From 63dea569212ed743a14c5549c2af5d50d5836b81 Mon Sep 17 00:00:00 2001
From: nino <Ninokeldishvili@gmail.com>
Date: Fri, 27 Dec 2024 13:53:40 +0400
Subject: [PATCH 1/2] Move component to components-ui

---
 .../src/__tests__/WordTable.test.ts           | 78 ++++++++++++++++++
 .../src/lib/components/WordTable.svelte       | 63 +++++++++++++++
 packages/ui-components/src/lib/index.ts       |  1 +
 tauri-app/src/lib/components/WordTable.svelte | 64 ---------------
 .../src/lib/components/WordTable.test.ts      | 79 -------------------
 tauri-app/src/lib/components/Words.svelte     |  2 +-
 6 files changed, 143 insertions(+), 144 deletions(-)
 create mode 100644 packages/ui-components/src/__tests__/WordTable.test.ts
 create mode 100644 packages/ui-components/src/lib/components/WordTable.svelte
 delete mode 100644 tauri-app/src/lib/components/WordTable.svelte
 delete mode 100644 tauri-app/src/lib/components/WordTable.test.ts

diff --git a/packages/ui-components/src/__tests__/WordTable.test.ts b/packages/ui-components/src/__tests__/WordTable.test.ts
new file mode 100644
index 000000000..d8fd83d64
--- /dev/null
+++ b/packages/ui-components/src/__tests__/WordTable.test.ts
@@ -0,0 +1,78 @@
+import { render, screen } from '@testing-library/svelte';
+import { test } from 'vitest';
+import WordTable from '$lib/components/WordTable.svelte';
+import { expect } from 'tauri-app/src/lib/test/matchers.ts';
+import userEvent from '@testing-library/user-event';
+
+const authoringMeta = {
+	words: [
+		{ word: 'apple', description: 'a fruit' },
+		{ word: 'banana', description: 'another fruit' },
+		{ word: 'carrot', description: 'a vegetable' }
+	]
+};
+
+test('shows initial words', () => {
+	render(WordTable, { authoringMeta, pragma: '0x0123' });
+
+	const words = screen.getAllByTestId('word');
+	expect(words).toHaveLength(3);
+	expect(words[0]).toHaveTextContent('apple');
+	expect(words[1]).toHaveTextContent('banana');
+	expect(words[2]).toHaveTextContent('carrot');
+});
+
+test('shows initial descriptions', () => {
+	render(WordTable, { authoringMeta, pragma: '0x0123' });
+
+	const descriptions = screen.getAllByTestId('description');
+	expect(descriptions).toHaveLength(3);
+	expect(descriptions[0]).toHaveTextContent('a fruit');
+	expect(descriptions[1]).toHaveTextContent('another fruit');
+	expect(descriptions[2]).toHaveTextContent('a vegetable');
+});
+
+test('shows no words when there are none', () => {
+	// this shouldn't really ever happen but if it does we don't want it to break
+	render(WordTable, { authoringMeta: { words: [] }, pragma: '0x0123' });
+
+	const words = screen.queryAllByTestId('word');
+	expect(words).toHaveLength(0);
+
+	// will show the no results message
+	const noneMsg = screen.getByTestId('no-results-msg');
+	expect(noneMsg).toHaveTextContent('No words found');
+});
+
+test('shows no words when there are no matching words', async () => {
+	render(WordTable, { authoringMeta, pragma: '0x0123' });
+
+	const input = screen.getByTestId('search-input');
+	await userEvent.type(input, 'z');
+
+	const words = screen.queryAllByTestId('word');
+	expect(words).toHaveLength(0);
+
+	const noneMsg = screen.getByTestId('no-results-msg');
+	expect(noneMsg).toHaveTextContent('No words found');
+});
+
+test('searches words based on input', async () => {
+	const user = userEvent.setup();
+	render(WordTable, { authoringMeta, pragma: '0x0123' });
+
+	const input = screen.getByTestId('search-input');
+	await user.type(input, 'app');
+
+	const words = screen.getAllByTestId('word');
+	expect(words).toHaveLength(1);
+
+	expect(words[0]).toHaveTextContent('apple');
+});
+
+test('shows the correct pragma', () => {
+	render(WordTable, { authoringMeta, pragma: '0x0123' });
+
+	const pragma = screen.getByTestId('pragma');
+	expect(pragma).toHaveTextContent('0x0123');
+});
diff --git a/packages/ui-components/src/lib/components/WordTable.svelte b/packages/ui-components/src/lib/components/WordTable.svelte
new file mode 100644
index 000000000..975e68536
--- /dev/null
+++ b/packages/ui-components/src/lib/components/WordTable.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import {
+		Input,
+		Table,
+		TableBody,
+		TableBodyCell,
+		TableBodyRow,
+		TableHead,
+		TableHeadCell
+	} from 'flowbite-svelte';
+	import Fuse from 'fuse.js';
+
+	export let authoringMeta;
+	export let pragma: string;
+
+	let search: string;
+
+	const fuse = new Fuse(authoringMeta.words, {
+		keys: ['word', 'description'],
+		ignoreLocation: true,
+		threshold: 0.0
+	});
+
+	$: filteredWords = search ? fuse.search(search).map((res) => res.item) : authoringMeta.words;
+</script>
+
+<Table
+	divClass="cursor-pointer rounded-lg dark:border-none border h-[500px] overflow-y-scroll relative w-[450px] bg-white dark:bg-gray-800"
+	data-testid={`word-table-${pragma}`}
+>
+	<TableHead theadClass="sticky top-0">
+		<TableHeadCell>
+			<div class="flex flex-col text-xs font-normal">
+				<div data-testid="pragma" class="mb-3 mt-1">
+					From {pragma}
+				</div>
+				<Input data-testid="search-input" placeholder="Search words" bind:value={search} />
+			</div>
+		</TableHeadCell>
+	</TableHead>
+	<TableBody tableBodyClass="w-full">
+		{#if filteredWords.length === 0}
+			<TableBodyRow>
+				<TableBodyCell>
+					<div data-testid="no-results-msg" class="text-center text-gray-500">No words found</div>
+				</TableBodyCell>
+			</TableBodyRow>
+		{:else}
+			{#each filteredWords as word}
+				<TableBodyRow>
+					<TableBodyCell>
+						<div class="flex flex-col gap-y-2">
+							<div data-testid="word">{word.word}</div>
+							<div data-testid="description" class="whitespace-normal text-gray-500">
+								{word.description}
+							</div>
+						</div>
+					</TableBodyCell>
+				</TableBodyRow>
+			{/each}
+		{/if}
+	</TableBody>
+</Table>
diff --git a/packages/ui-components/src/lib/index.ts b/packages/ui-components/src/lib/index.ts
index 88874ce51..efbd2cc29 100644
--- a/packages/ui-components/src/lib/index.ts
+++ b/packages/ui-components/src/lib/index.ts
@@ -46,6 +46,7 @@ export { default as IconSuccess } from './components/IconSuccess.svelte';
 export { default as IconTelegram } from './components/IconTelegram.svelte';
 export { default as IconWalletConnect } from './components/IconWalletConnect.svelte';
 export { default as IconWarning } from './components/IconWarning.svelte';
+export { default as WordTable } from './components/WordTable.svelte';
 
 //Types
 export type { AppStoresInterface } from './types/appStores.ts';
diff --git a/tauri-app/src/lib/components/WordTable.svelte b/tauri-app/src/lib/components/WordTable.svelte
deleted file mode 100644
index 852c96a59..000000000
--- a/tauri-app/src/lib/components/WordTable.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts">
-  import type { AuthoringMetaV2 } from '$lib/typeshare/authoringMeta';
-  import {
-    Input,
-    Table,
-    TableBody,
-    TableBodyCell,
-    TableBodyRow,
-    TableHead,
-    TableHeadCell,
-  } from 'flowbite-svelte';
-  import Fuse from 'fuse.js';
-
-  export let authoringMeta: AuthoringMetaV2;
-  export let pragma: string;
-
-  let search: string;
-
-  const fuse = new Fuse(authoringMeta.words, {
-    keys: ['word', 'description'],
-    ignoreLocation: true,
-    threshold: 0.0,
-  });
-
-  $: filteredWords = search ? fuse.search(search).map((res) => res.item) : authoringMeta.words;
-</script>
-
-<Table
-  divClass="cursor-pointer rounded-lg dark:border-none border h-[500px] overflow-y-scroll relative w-[450px] bg-white dark:bg-gray-800"
-  data-testid={`word-table-${pragma}`}
->
-  <TableHead theadClass="sticky top-0">
-    <TableHeadCell>
-      <div class="flex flex-col text-xs font-normal">
-        <div data-testid="pragma" class="mb-3 mt-1">
-          From {pragma}
-        </div>
-        <Input data-testid="search-input" placeholder="Search words" bind:value={search} />
-      </div>
-    </TableHeadCell>
-  </TableHead>
-  <TableBody tableBodyClass="w-full">
-    {#if filteredWords.length === 0}
-      <TableBodyRow>
-        <TableBodyCell>
-          <div data-testid="no-results-msg" class="text-center text-gray-500">No words found</div>
-        </TableBodyCell>
-      </TableBodyRow>
-    {:else}
-      {#each filteredWords as word}
-        <TableBodyRow>
-          <TableBodyCell>
-            <div class="flex flex-col gap-y-2">
-              <div data-testid="word">{word.word}</div>
-              <div data-testid="description" class="whitespace-normal text-gray-500">
-                {word.description}
-              </div>
-            </div>
-          </TableBodyCell>
-        </TableBodyRow>
-      {/each}
-    {/if}
-  </TableBody>
-</Table>
diff --git a/tauri-app/src/lib/components/WordTable.test.ts b/tauri-app/src/lib/components/WordTable.test.ts
deleted file mode 100644
index 3b0d2a72f..000000000
--- a/tauri-app/src/lib/components/WordTable.test.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { render, screen } from '@testing-library/svelte';
-import { test } from 'vitest';
-import WordTable from './WordTable.svelte';
-import type { AuthoringMetaV2 } from '$lib/typeshare/authoringMeta';
-import { expect } from '$lib/test/matchers';
-import userEvent from '@testing-library/user-event';
-
-const authoringMeta: AuthoringMetaV2 = {
-  words: [
-    { word: 'apple', description: 'a fruit' },
-    { word: 'banana', description: 'another fruit' },
-    { word: 'carrot', description: 'a vegetable' },
-  ],
-};
-
-test('shows initial words', () => {
-  render(WordTable, { authoringMeta, pragma: '0x0123' });
-
-  const words = screen.getAllByTestId('word');
-  expect(words).toHaveLength(3);
-  expect(words[0]).toHaveTextContent('apple');
-  expect(words[1]).toHaveTextContent('banana');
-  expect(words[2]).toHaveTextContent('carrot');
-});
-
-test('shows initial descriptions', () => {
-  render(WordTable, { authoringMeta, pragma: '0x0123' });
-
-  const descriptions = screen.getAllByTestId('description');
-  expect(descriptions).toHaveLength(3);
-  expect(descriptions[0]).toHaveTextContent('a fruit');
-  expect(descriptions[1]).toHaveTextContent('another fruit');
-  expect(descriptions[2]).toHaveTextContent('a vegetable');
-});
-
-test('shows no words when there are none', () => {
-  // this shouldn't really ever happen but if it does we don't want it to break
-  render(WordTable, { authoringMeta: { words: [] }, pragma: '0x0123' });
-
-  const words = screen.queryAllByTestId('word');
-  expect(words).toHaveLength(0);
-
-  // will show the no results message
-  const noneMsg = screen.getByTestId('no-results-msg');
-  expect(noneMsg).toHaveTextContent('No words found');
-});
-
-test('shows no words when there are no matching words', async () => {
-  render(WordTable, { authoringMeta, pragma: '0x0123' });
-
-  const input = screen.getByTestId('search-input');
-  await userEvent.type(input, 'z');
-
-  const words = screen.queryAllByTestId('word');
-  expect(words).toHaveLength(0);
-
-  const noneMsg = screen.getByTestId('no-results-msg');
-  expect(noneMsg).toHaveTextContent('No words found');
-});
-
-test('searches words based on input', async () => {
-  const user = userEvent.setup();
-  render(WordTable, { authoringMeta, pragma: '0x0123' });
-
-  const input = screen.getByTestId('search-input');
-  await user.type(input, 'app');
-
-  const words = screen.getAllByTestId('word');
-  expect(words).toHaveLength(1);
-
-  expect(words[0]).toHaveTextContent('apple');
-});
-
-test('shows the correct pragma', () => {
-  render(WordTable, { authoringMeta, pragma: '0x0123' });
-
-  const pragma = screen.getByTestId('pragma');
-  expect(pragma).toHaveTextContent('0x0123');
-});
diff --git a/tauri-app/src/lib/components/Words.svelte b/tauri-app/src/lib/components/Words.svelte
index 40fd6b995..391bfd9fd 100644
--- a/tauri-app/src/lib/components/Words.svelte
+++ b/tauri-app/src/lib/components/Words.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { P, TabItem, Tabs } from 'flowbite-svelte';
-  import WordTable from '$lib/components/WordTable.svelte';
+  import { WordTable } from '@rainlanguage/ui-components';
   import type { ScenarioWords } from '$lib/typeshare/authoringMeta';
 
   export let authoringMetas: ScenarioWords[] | undefined;

From 990ff8b4bad41406ed3f4c79c73366a7ee301e24 Mon Sep 17 00:00:00 2001
From: nino <Ninokeldishvili@gmail.com>
Date: Fri, 27 Dec 2024 15:26:19 +0400
Subject: [PATCH 2/2] Remove tauri-app import from test

---
 packages/ui-components/src/__tests__/WordTable.test.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/ui-components/src/__tests__/WordTable.test.ts b/packages/ui-components/src/__tests__/WordTable.test.ts
index d8fd83d64..ddc52e8c7 100644
--- a/packages/ui-components/src/__tests__/WordTable.test.ts
+++ b/packages/ui-components/src/__tests__/WordTable.test.ts
@@ -1,7 +1,6 @@
 import { render, screen } from '@testing-library/svelte';
-import { test } from 'vitest';
+import { test, expect } from 'vitest';
 import WordTable from '$lib/components/WordTable.svelte';
-import { expect } from 'tauri-app/src/lib/test/matchers.ts';
 import userEvent from '@testing-library/user-event';
 
 const authoringMeta = {