Refactor components

package.json

@@ -22,32 +22,32 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.48.2",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@playwright/test": "^1.49.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.1",
 		"@types/cookie": "^1.0.0",
-		"eslint": "^9.14.0",
+		"eslint": "^9.15.0",
 		"postcss": "^8.4.49",
 		"postcss-load-config": "^6.0.1",
-		"prettier": "^3.3.3",
-		"prettier-plugin-svelte": "^3.2.8",
+		"prettier": "^3.4.1",
+		"prettier-plugin-svelte": "^3.3.2",
 		"tslib": "^2.8.1",
-		"typescript": "^5.6.3",
+		"typescript": "^5.7.2",
 		"vite": "^5.4.11",
-		"vitest": "^2.1.5"
+		"vitest": "^2.1.6"
 	},
 	"dependencies": {
 		"@fontsource/fira-mono": "^5.1.0",
 		"@neoconfetti/svelte": "^2.2.1",
 		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/kit": "^2.8.1",
+		"@sveltejs/kit": "^2.8.5",
 		"@tailwindcss/forms": "^0.5.9",
 		"autoprefixer": "^10.4.20",
 		"exchange-rounding": "^1.1.3",
-		"svelte": "^5.1.16",
-		"svelte-check": "^4.0.7",
+		"svelte": "^5.2.11",
+		"svelte-check": "^4.1.0",
 		"svelte-preprocess": "^6.0.3",
 		"svelte-transition": "^0.0.17",
-		"tailwindcss": "^3.4.14",
+		"tailwindcss": "^3.4.15",
 		"tailwindcss-logical": "^3.0.1"
 	},
 	"engines": {

src/lib/components/box/Box.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+	import type { Component } from 'svelte';
 	import { join } from '$lib/helpers/join.helper';
 
-	export let children: typeof import('svelte').SvelteComponent | null = null;
+	export let children: Component | null = null;
 </script>
 
 <section

src/lib/components/box/BoxContent.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	export let children: typeof import('svelte').SvelteComponent | null = null;
+	import type { Component } from 'svelte';
+
+	export let children: Component | null = null;
 </script>
 
 {#if children}

src/lib/components/box/BoxTitle.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	export let children: typeof import('svelte').SvelteComponent | null = null;
+	import type { Component } from 'svelte';
+
+	export let children: Component | null = null;
 </script>
 
 <h1 class="[ m-0 text-2xl font-bold text-white ] [ lg:text-3xl ]">

src/lib/components/designContent/DesignContent.svelte → src/lib/components/design-content/DesignContent.svelte

@@ -4,7 +4,7 @@
 		FieldGroupColorPicker,
 		FieldGroupLabel,
 		FieldGroupText,
-		Listbox
+		ListBox
 	} from '$lib/components';
 
 	import { derived } from 'svelte/store';
@@ -73,7 +73,7 @@
 
 	<FieldGroup>
 		<FieldGroupLabel>Barcode type (QR code as default)</FieldGroupLabel>
-		<Listbox id="barcode-list" bind:value={$constructor.design.barcode} items={barcodeTypes} />
+		<ListBox id="barcode-list" bind:value={$constructor.design.barcode} items={barcodeTypes} />
 	</FieldGroup>
 
 	<button

src/lib/components/fieldgroup/FieldGroup.svelte → src/lib/components/field-group/FieldGroup.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
+	import type { Component } from 'svelte';
 	import { join } from '$lib/helpers/join.helper';
 	import { setFieldGroupContext } from './fieldgroup.context';
 
 	setFieldGroupContext();
 
-	export let children: typeof import('svelte').SvelteComponent | null = null;
-
+	export let children: Component | null = null;
 	export let classValue: string = '';
 	export let flexType: string = 'flex-col';
 	export let itemPosition: string = 'items-stretch';

src/lib/components/fieldgroup/FieldGroupAppendix.svelte → src/lib/components/field-group/FieldGroupAppendix.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+	import type { Component } from 'svelte';
 	import { getFieldGroupContext } from './fieldgroup.context';
 
-	export let children: typeof import('svelte').SvelteComponent | null = null;
+	export let children: Component | null = null;
 
 	const ctx = getFieldGroupContext();
 </script>

src/lib/components/fieldgroup/FieldGroupLabel.svelte → src/lib/components/field-group/FieldGroupLabel.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+	import type { Component } from 'svelte';
 	import { getFieldGroupContext } from './fieldgroup.context';
 
 	const ctx = getFieldGroupContext();
 	export let classValue: string = '';
-	export let children: typeof import('svelte').SvelteComponent | null = null;
+	export let children: Component | null = null;
 </script>
 
 <label class={classValue} id={ctx.labelId} for={ctx.fieldId}>

src/lib/components/index.ts

@@ -1,11 +1,5 @@
-export { DesignContent } from './designContent';
-export { Page } from './page';
 export { Box, BoxTitle, BoxContent } from './box';
-export { Row } from './row';
-export { Listbox } from './listBox';
-export { Tabs } from './tabs';
-export { toast } from './toast';
-export { default as Toast } from './toast/toast.svelte';
+export { DesignContent } from './design-content';
 export {
 	FieldGroup,
 	FieldGroupColorPicker,
@@ -16,5 +10,10 @@ export {
 	FieldGroupDateTime,
 	FieldGroupAppendix,
 	FieldGroupRadioWithNumber
-} from './fieldgroup';
-export { WalletCard } from './walletCard';
+} from './field-group';
+export { ListBox } from './list-box';
+export { Page } from './page';
+export { Row } from './row';
+export { Tabs } from './tabs';
+export { Toast, toast } from './toast';
+export { WalletCard } from './wallet-card';

src/lib/components/listBox/listbox.svelte → src/lib/components/list-box/ListBox.svelte

@@ -31,6 +31,7 @@
 	<button
 		id={id}
 		on:click={toggle}
+		aria-label="Toggle dropdown"
 		class={join(
 			'[ inline-flex items-center justify-between ]',
 			'[ w-full px-3 py-2 bg-gray-900 text-white rounded-md cursor-pointer ]',
@@ -61,6 +62,7 @@
 				<li>
 					<button
 						type="button"
+						aria-label={item.label}
 						on:click={() => select(item)}
 						on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && select(item)}
 						class="flex items-center w-full px-3 py-2 hover:bg-gray-700"

src/lib/components/list-box/index.ts

@@ -0,0 +1 @@
+export { default as ListBox } from './ListBox.svelte';

src/lib/components/page/Page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	export let children: typeof import('svelte').SvelteComponent | null = null;
+	import type { Component } from 'svelte';
+
+	export let children: Component | null = null;
 </script>
 
 <svelte:head>

src/lib/components/row/Row.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import type { Component } from 'svelte';
 	import { join } from '$lib/helpers/join.helper';
-	export let children: typeof import('svelte').SvelteComponent | null = null;
+
+	export let children: Component | null = null;
 </script>
 
 <div

src/lib/components/tabs/index.ts

@@ -1 +1 @@
-export { default as Tabs } from './tabs.svelte';
+export { default as Tabs } from './Tabs.svelte';

src/lib/components/tabs/tabs.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { writable } from 'svelte/store';
 	import { join } from '$lib/helpers/join.helper';
-	import { Listbox } from '$lib/components';
+	import { ListBox } from '$lib/components';
 	import { fade } from 'svelte/transition';
 	import { getObjectByType } from '$lib/helpers/get-object-by-type.helper';
 	import { TYPES } from '$lib/data/types.data';
@@ -43,7 +43,7 @@
 	<label id="payment-type-label" for="payment-type" class="font-bold">Payment Type</label>
 	<div class="[ flex flex-col items-stretch gap-4 ]">
 		<div in:fade>
-			<Listbox id="payment-type" bind:value={selectedTab} items={listboxItems} />
+			<ListBox id="payment-type" bind:value={selectedTab} items={listboxItems} />
 		</div>
 	</div>
 

src/lib/components/toast/index.ts

@@ -14,3 +14,5 @@ export function toast({ message, type = 'info', duration = 3000 }: Omit<Toast, '
 		toasts.update((current) => current.filter((toast) => toast.id !== id));
 	}, duration);
 }
+
+export { default as Toast } from './Toast.svelte';

src/lib/components/toast/toast.svelte

@@ -18,7 +18,7 @@
 	{#each $toasts as { id, message, type = 'info' } (id)}
 		<div
 			in:fade
-			class={`toast p-4 rounded-lg shadow-lg text-zinc-700 font-medium w-72 ${toastType(type)}`}
+			class={`toast p-4 rounded-lg shadow-lg text-zinc-700 w-72 ${toastType(type)}`}
 		>
 			{message}
 		</div>

src/routes/+page.svelte

@@ -103,6 +103,7 @@
 									)}
 									type="button"
 									title="Copy to clipboard"
+									aria-label="Copy to clipboard"
 									data-value={output.value}
 									on:click={handleOnCopy}
 								>

src/routes/components/automated-clearing-house-constructor/AutomatedClearingHouseConstructor.svelte

@@ -16,17 +16,9 @@
 			$constructor.networks.ach.params.rc.value = undefined;
 		}
 	}
-
-	function handleTabChange(event: CustomEvent<{ selected: string }>) {
-		console.log('Tab changed:', event.detail.selected);
-	}
-
-	function handleListboxChange(event: CustomEvent<{ selected: { value: string } }>) {
-		console.log('Listbox selection changed:', event.detail.selected);
-	}
 </script>
 
-<div class="[ flex flex-col gap-6 ]" in:fly={{ y: 64 }} on:tabchange={handleTabChange}>
+<div class="[ flex flex-col gap-6 ]" in:fly={{ y: 64 }}>
 	<FieldGroup>
 		<FieldGroupLabel>Account Number *</FieldGroupLabel>
 		<FieldGroupText
@@ -92,7 +84,6 @@
 			]}
 			defaultChecked={$constructor.networks.ach.params.rc.value}
 			bind:outputValue={$constructor.networks.ach.params.rc.value}
-			on:listboxchange={handleListboxChange}
 		/>
 	{/if}
 </div>

src/routes/components/international-crypto-account-number-constructor/InternationalCryptoAccountNumberConstructor.svelte

@@ -7,7 +7,7 @@
 		FieldGroupDateTime,
 		FieldGroupText,
 		FieldGroupRadioWithNumber,
-		Listbox
+		ListBox
 	} from '$lib/components';
 
 	import { TRANSPORT } from '$lib/data/transports.data';
@@ -71,13 +71,14 @@
 		<div class="[ flex flex-col items-stretch gap-4 ]">
 			{#if $constructor.networks.ican.network !== 'other'}
 				<div in:fade>
-					<Listbox id="transport-network" bind:value={$constructor.networks.ican.network} items={TRANSPORT.ican} />
+					<ListBox id="transport-network" bind:value={$constructor.networks.ican.network} items={TRANSPORT.ican} />
 				</div>
 			{:else}
 				<div class="[ flex items-center relative ]" in:fade>
 					<button
 						class="[ absolute mli-3 p-2 text-gray-50 bg-gray-700 rounded-full outline-none transition-all ]"
 						title="Back to network menu options"
+						aria-label="Back to network menu options"
 						on:pointerdown={() => ($constructor.networks.ican.network = 'xcb')}
 					>
 						<svg class="[ bs-4 is-4 ]" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">

src/routes/components/void-payment-target-constructor/VoidPaymentTargetConstructor.svelte

@@ -5,7 +5,7 @@
 		FieldGroupLabel,
 		FieldGroupNumber,
 		FieldGroupText,
-		Listbox
+		ListBox
 	} from '$lib/components';
 
 	import { TRANSPORT } from '$lib/data/transports.data';
@@ -20,7 +20,7 @@
 		<div class="[ flex flex-col items-stretch gap-4 ]">
 			{#if $constructor.networks.void.transport !== 'other'}
 				<div in:fade>
-					<Listbox bind:value={$constructor.networks.void.transport} items={TRANSPORT.void} />
+					<ListBox bind:value={$constructor.networks.void.transport} items={TRANSPORT.void} />
 				</div>
 			{/if}
 			{#if $constructor.networks.void.transport === 'other'}
@@ -33,6 +33,7 @@
 						)}
 						type="button"
 						title="Back to network menu options"
+						aria-label="Back to network menu options"
 						on:pointerdown={() => ($constructor.networks.void.transport = 'geo')}
 					>
 						<svg