Move component to components-ui

packages/ui-components/src/__tests__/WordTable.test.ts

@@ -0,0 +1,77 @@
+import { render, screen } from '@testing-library/svelte';
+import { test, expect } from 'vitest';
+import WordTable from '$lib/components/WordTable.svelte';
+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');
+});

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>

packages/ui-components/src/lib/index.ts

@@ -47,6 +47,7 @@ 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 InputToken } from './components/input/InputToken.svelte';
+export { default as WordTable } from './components/WordTable.svelte';
 
 //Types
 export type { AppStoresInterface } from './types/appStores.ts';

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;