feat(ui): migrate to svelte-5 and storybook

2024-11-02 15:15:09 +01:00
parent 9ba26374db
commit a87add30ff
31 changed files with 5926 additions and 1148 deletions
--- a/packages/ui/src/histoire.setup.ts
+++ b/packages/ui/src/histoire.setup.ts
@ -1 +0,0 @@
-import "./lib/app.css"
--- a/packages/ui/src/lib/Details.svelte
+++ b/packages/ui/src/lib/Details.svelte
@ -1,12 +1,17 @@
 <script lang="ts">
-  export let title = "Details";
-  export let transparent = false;
+  interface Props {
+    title?: string;
+    transparent?: boolean;
+    children?: import('svelte').Snippet;
+  }
+
+  let { title = "Details", transparent = false, children }: Props = $props();
 </script>

 <details class:transparent>
  <summary>{title}</summary>
  <div class="content">
-    <slot />
+    {@render children?.()}
  </div>
 </details>

--- a/packages/ui/src/lib/Input.svelte
+++ b/packages/ui/src/lib/Input.svelte
@ -7,9 +7,13 @@
 	import type { NodeInput } from '@nodes/types';
 	import Vec3 from './elements/Vec3.svelte';

-	export let input: NodeInput;
-	export let value: any;
-	export let id: string;
+	interface Props {
+		input: NodeInput;
+		value: any;
+		id: string;
+	}
+
+	let { input, value = $bindable(), id }: Props = $props();
 </script>

 {#if input.type === 'float'}
--- a/packages/ui/src/lib/ShortCut.svelte
+++ b/packages/ui/src/lib/ShortCut.svelte
@ -1,8 +1,17 @@
 <script lang="ts">
-  export let ctrl = false;
-  export let shift = false;
-  export let alt = false;
-  export let key: string;
+  interface Props {
+    ctrl?: boolean;
+    shift?: boolean;
+    alt?: boolean;
+    key: string;
+  }
+
+  let {
+    ctrl = false,
+    shift = false,
+    alt = false,
+    key
+  }: Props = $props();
 </script>

 <div class="command">
--- a/packages/ui/src/lib/app.css
+++ b/packages/ui/src/lib/app.css
@ -38,9 +38,7 @@

 }

-body {
-  overflow: hidden;
-
+html {
  --neutral-100: #E7E7E7;
  --neutral-200: #CECECE;
  --neutral-300: #7C7C7C;
@ -65,6 +63,11 @@ body {
  --edge: var(--connection, var(--outline));

  --text-color: var(--neutral-200);
+}
+
+body {
+  overflow: hidden;
+

  color: var(--text-color);
  background-color: var(--layer-0);
@ -74,7 +77,7 @@ body * {
  color: var(--text-color);
 }

-body.theme-light {
+html.theme-light {
  --text-color: var(--neutral-800);
  --outline: var(--neutral-300);
  --layer-0: var(--neutral-100);
@ -86,7 +89,7 @@ body.theme-light {
  --connection: #888;
 }

-body.theme-solarized {
+html.theme-solarized {
  --text-color: #425055;
  --outline: #93a1a1;
  --layer-0: #fdf6e3;
@ -98,7 +101,7 @@ body.theme-solarized {
  --connection: #839496;
 }

-body.theme-catppuccin {
+html.theme-catppuccin {
  --text-color: #CDD6F4;
  --outline: #3e3e4f;
  --layer-3: #a8aac8;
@ -108,7 +111,7 @@ body.theme-catppuccin {
  --connection: #444459;
 }

-body.theme-high-contrast {
+html.theme-high-contrast {
  --text-color: #FFFFFF;
  --outline: white;
  --layer-0: #000000;
@ -118,7 +121,7 @@ body.theme-high-contrast {
  --connection: #FFF;
 }

-body.theme-nord {
+html.theme-nord {
  --text-color: #D8DEE9;
  --outline: #4C566A;
  --layer-0: #2E3440;
@ -130,7 +133,7 @@ body.theme-nord {
  --connection: #4C566A;
 }

-body.theme-dracula {
+html.theme-dracula {
  --text-color: #F8F8F2;
  --outline: #6272A4;
  --layer-0: #282A36;
--- a/packages/ui/src/lib/elements/Checkbox.svelte
+++ b/packages/ui/src/lib/elements/Checkbox.svelte
@ -1,13 +1,21 @@
 <script lang="ts">
-	export let value: boolean;
+	import { run } from 'svelte/legacy';

-	$: if (typeof value === 'string') {
-		value = value === 'true';
-	} else if (typeof value === 'number') {
-		value = value === 1;
+
+
+	interface Props {
+		value: boolean;
+		id?: string;
 	}

-	export let id = '';
+	let { value = $bindable(), id = '' }: Props = $props();
+	run(() => {
+		if (typeof value === 'string') {
+			value = value === 'true';
+		} else if (typeof value === 'number') {
+			value = value === 1;
+		}
+	});
 </script>

 <input {id} type="checkbox" bind:checked={value} />
--- a/packages/ui/src/lib/elements/Float.stories.svelte
+++ b/packages/ui/src/lib/elements/Float.stories.svelte
@ -0,0 +1,11 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import FloatComp from './Float.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Inputs/Float',
+		component: FloatComp
+	});
+</script>
+
+<Story name="Float" />
--- a/packages/ui/src/lib/elements/Float.story.svelte
+++ b/packages/ui/src/lib/elements/Float.story.svelte
@ -1,17 +0,0 @@
-<script lang="ts">
-	import type { Hst } from '@histoire/plugin-svelte';
-	export let Hst: Hst;
-	import Float from './Float.svelte';
-	import StoryContent from '$lib/helpers/StoryContent.svelte';
-	import StorySettings from '$lib/helpers/StorySettings.svelte';
-	let theme = 'dark';
-</script>
-
-<Hst.Story>
-	<StoryContent {theme}>
-		<Float value={0} min={0} max={6.9} />
-	</StoryContent>
-	<svelte:fragment slot="controls">
-		<StorySettings bind:theme />
-	</svelte:fragment>
-</Hst.Story>
--- a/packages/ui/src/lib/elements/Float.svelte
+++ b/packages/ui/src/lib/elements/Float.svelte
@ -1,9 +1,19 @@
 <script lang="ts">
-	export let value = 0.5;
-	export let step = 0.01;
-	export let min = 0;
-	export let max = 1;
-	export let id = '';
+	interface Props {
+		value?: number;
+		step?: number;
+		min?: number;
+		max?: number;
+		id?: string;
+	}
+
+	let {
+		value = $bindable(0.5),
+		step = 0.01,
+		min = $bindable(0),
+		max = $bindable(1),
+		id = ''
+	}: Props = $props();

 	if (min > max) {
 		[min, max] = [max, min];
@ -16,23 +26,15 @@
 		return +parseFloat(input + '').toPrecision(2);
 	}

-	let inputEl: HTMLInputElement;
+	let inputEl: HTMLInputElement | undefined = $state();

-	$: if ((value || 0).toString().length > 5) {
-		value = strip(value || 0);
-	}
-	$: value !== undefined && handleChange();
 	let oldValue: number;
 	function handleChange() {
 		if (value === oldValue) return;
 		oldValue = value;
 	}

-	$: width = Number.isFinite(value)
-		? Math.max((value?.toString().length ?? 1) * 8, 50) + 'px'
-		: '20px';
-
-	let isMouseDown = false;
+	let isMouseDown = $state(false);
 	let downV = 0;
 	let vx = 0;
 	let rect: DOMRect;
@ -40,6 +42,8 @@
 	function handleMouseDown(ev: MouseEvent) {
 		ev.preventDefault();

+		if (!inputEl) return;
+
 		inputEl.focus();

 		isMouseDown = true;
@ -57,7 +61,7 @@
 		isMouseDown = false;

 		if (downV === value) {
-			inputEl.focus();
+			inputEl?.focus();
 		}

 		if (value > max) {
@ -76,7 +80,7 @@
 	function handleKeyDown(ev: KeyboardEvent) {
 		if (ev.key === 'Escape' || ev.key === 'Enter') {
 			handleMouseUp();
-			inputEl.blur();
+			inputEl?.blur();
 		}
 	}

@ -90,6 +94,15 @@
 			value = Math.max(Math.min(min + (max - min) * vx, max), min);
 		}
 	}
+	$effect(() => {
+		if ((value || 0).toString().length > 5) {
+			value = strip(value || 0);
+		}
+		value !== undefined && handleChange();
+	});
+	let width = $derived(
+		Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 50) + 'px' : '20px'
+	);
 </script>

 <div class="component-wrapper" class:is-down={isMouseDown}>
@ -101,9 +114,9 @@
 		{step}
 		{max}
 		{min}
-		on:keydown={handleKeyDown}
-		on:mousedown={handleMouseDown}
-		on:mouseup={handleMouseUp}
+		onkeydown={handleKeyDown}
+		onmousedown={handleMouseDown}
+		onmouseup={handleMouseUp}
 		type="number"
 		style={`width:${width};`}
 	/>
--- a/packages/ui/src/lib/elements/Integer.stories.svelte
+++ b/packages/ui/src/lib/elements/Integer.stories.svelte
@ -0,0 +1,11 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import IntegerComp from './Integer.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Inputs/Integer',
+		component: IntegerComp
+	});
+</script>
+
+<Story name="Integer" />
--- a/packages/ui/src/lib/elements/Integer.story.svelte
+++ b/packages/ui/src/lib/elements/Integer.story.svelte
@ -1,18 +0,0 @@
-<script lang="ts">
-	import type { Hst } from '@histoire/plugin-svelte';
-	export let Hst: Hst;
-	import Integer from './Integer.svelte';
-	import StorySettings from '../helpers/StorySettings.svelte';
-	import StoryContent from '$lib/helpers/StoryContent.svelte';
-
-	let theme = 'dark';
-</script>
-
-<Hst.Story>
-	<StoryContent {theme}>
-		<Integer value={5} min={0} max={42} />
-	</StoryContent>
-	<svelte:fragment slot="controls">
-		<StorySettings bind:theme />
-	</svelte:fragment>
-</Hst.Story>
--- a/packages/ui/src/lib/elements/Integer.svelte
+++ b/packages/ui/src/lib/elements/Integer.svelte
@ -2,20 +2,28 @@
 	import { createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher();

-	// Styling
-	export let min: number | undefined = undefined;
-	export let max: number | undefined = undefined;
-	export let step = 1;
-	export let value = 0;
-	export let id = '';
+	interface Props {
+		min?: number | undefined;
+		max?: number | undefined;
+		step?: number;
+		value?: number;
+		id?: string;
+	}
+
+	let {
+		min = undefined,
+		max = undefined,
+		step = 1,
+		value = $bindable(0),
+		id = ''
+	}: Props = $props();

 	if (!value) {
 		value = 0;
 	}

-	let inputEl: HTMLInputElement;
-	let wrapper: HTMLDivElement;
-	$: value !== undefined && update();
+	let inputEl: HTMLInputElement | undefined = $state();
+	let wrapper: HTMLDivElement | undefined = $state();

 	let prev = -1;
 	function update() {
@ -24,10 +32,6 @@
 		dispatch('change', parseFloat(value + ''));
 	}

-	$: width = Number.isFinite(value)
-		? Math.max((value?.toString().length ?? 1) * 8, 30) + 'px'
-		: '20px';
-
 	function handleChange(change: number) {
 		value = Math.max(min ?? -Infinity, Math.min(+value + change, max ?? Infinity));
 	}
@ -70,6 +74,13 @@
 			value = downV + Math.round(vx / 10);
 		}
 	}
+
+	$effect(() => {
+		value !== undefined && update();
+	});
+	let width = $derived(
+		Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 30) + 'px' : '20px'
+	);
 </script>

 <div
@ -78,13 +89,14 @@
 	role="slider"
 	tabindex="0"
 	aria-valuenow={value}
-	on:mousedown={handleMouseDown}
-	on:mouseup={handleMouseUp}
+	onmousedown={handleMouseDown}
+	onmouseup={handleMouseUp}
 >
 	{#if typeof min !== 'undefined' && typeof max !== 'undefined'}
-		<span class="overlay" style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`} />
+		<span class="overlay" style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`}
+		></span>
 	{/if}
-	<button on:click={() => handleChange(-step)}>-</button>
+	<button onclick={() => handleChange(-step)}>-</button>
 	<input
 		bind:value
 		bind:this={inputEl}
@ -96,7 +108,7 @@
 		style={`width:${width};`}
 	/>

-	<button on:click={() => handleChange(+step)}>+</button>
+	<button onclick={() => handleChange(+step)}>+</button>
 </div>

 <style>
@ -159,4 +171,3 @@
 		border-style: none;
 	}
 </style>
-
--- a/packages/ui/src/lib/elements/Select.stories.svelte
+++ b/packages/ui/src/lib/elements/Select.stories.svelte
@ -0,0 +1,23 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import SelectComp from '$lib/elements/Select.svelte';
+	const { Story } = defineMeta({
+		title: 'Inputs/Select',
+		component: SelectComp,
+
+		argTypes: {
+			options: {
+				control: {
+					type: 'select'
+				}
+			}
+		},
+		parameters: {
+			actions: {
+				handles: ['change']
+			}
+		}
+	});
+</script>
+
+<Story name="Select" args={{ options: ['strawberry', 'raspberry', 'chickpeas'] }} />
--- a/packages/ui/src/lib/elements/Select.story.svelte
+++ b/packages/ui/src/lib/elements/Select.story.svelte
@ -1,18 +0,0 @@
-<script lang="ts">
-	import type { Hst } from '@histoire/plugin-svelte';
-	export let Hst: Hst;
-	import Select from './Select.svelte';
-	import StoryContent from '$lib/helpers/StoryContent.svelte';
-	import StorySettings from '$lib/helpers/StorySettings.svelte';
-
-	let theme = 'dark';
-</script>
-
-<Hst.Story>
-	<StoryContent {theme}>
-		<Select id="" options={['strawberry', 'apple', 'banana']} />
-	</StoryContent>
-	<svelte:fragment slot="controls">
-		<StorySettings bind:theme />
-	</svelte:fragment>
-</Hst.Story>
--- a/packages/ui/src/lib/elements/Select.svelte
+++ b/packages/ui/src/lib/elements/Select.svelte
@ -1,7 +1,11 @@
 <script lang="ts">
-	export let options: string[] = [];
-	export let value: number = 0;
-	export let id = '';
+	interface Props {
+		options?: string[];
+		value?: number;
+		id?: string;
+	}
+
+	let { options = [], value = $bindable(0), id = '' }: Props = $props();
 </script>

 <select {id} bind:value>
--- a/packages/ui/src/lib/elements/Vec3.stories.svelte
+++ b/packages/ui/src/lib/elements/Vec3.stories.svelte
@ -0,0 +1,10 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Vec3Comp from './Vec3.svelte';
+	const { Story } = defineMeta({
+		title: 'Inputs/Vec3',
+		component: Vec3Comp
+	});
+</script>
+
+<Story name="Vec3" />
--- a/packages/ui/src/lib/elements/Vec3.story.svelte
+++ b/packages/ui/src/lib/elements/Vec3.story.svelte
@ -1,18 +0,0 @@
-<script lang="ts">
-	import type { Hst } from '@histoire/plugin-svelte';
-	export let Hst: Hst;
-	import Vec3 from './Vec3.svelte';
-	import StoryContent from '$lib/helpers/StoryContent.svelte';
-	import StorySettings from '$lib/helpers/StorySettings.svelte';
-
-	let theme = 'dark';
-</script>
-
-<Hst.Story>
-	<StoryContent {theme}>
-		<Vec3 value={[0.2, 0.4, 0.6]} />
-	</StoryContent>
-	<svelte:fragment slot="controls">
-		<StorySettings bind:theme />
-	</svelte:fragment>
-</Hst.Story>
--- a/packages/ui/src/lib/elements/Vec3.svelte
+++ b/packages/ui/src/lib/elements/Vec3.svelte
@ -1,8 +1,12 @@
 <script lang="ts">
 	import Float from './Float.svelte';

-	export let value = [0, 0, 0];
-	export let id = '';
+	interface Props {
+		value?: any;
+		id?: string;
+	}
+
+	let { value = $bindable([0, 0, 0]), id = '' }: Props = $props();
 </script>

 <div>
--- a/packages/ui/src/lib/helpers/StoryContent.svelte
+++ b/packages/ui/src/lib/helpers/StoryContent.svelte
@ -1,24 +0,0 @@
-<script lang="ts">
-	export let theme = 'dark';
-
-	$: if (theme !== undefined) {
-		const classes = document.body.classList;
-		const newClassName = `theme-${theme}`;
-		for (const className of classes) {
-			if (className.startsWith('theme-') && className !== newClassName) {
-				classes.remove(className);
-			}
-		}
-		document.body.classList.add(newClassName);
-	}
-</script>
-
-<div>
-	<slot />
-</div>
-
-<style>
-	div {
-		padding: 1em;
-	}
-</style>
--- a/packages/ui/src/lib/helpers/StorySettings.svelte
+++ b/packages/ui/src/lib/helpers/StorySettings.svelte
@ -1,23 +0,0 @@
-<script lang="ts">
-	import { Select } from '$lib/index.js';
-
-	const themes = ['dark', 'light', 'catppuccin', 'solarized', 'high-contrast', 'nord', 'dracula'];
-
-	let value = 0;
-	export let theme = themes[value];
-	$: theme = themes[value];
-</script>
-
-<div>
-	<label for="theme-select"> Select Theme </label>
-	<Select id="" bind:value options={themes} />
-</div>
-
-<style>
-	div {
-		display: flex;
-		flex-direction: column;
-		gap: 1em;
-		padding: 1em;
-	}
-</style>
--- a/packages/ui/src/routes/+page.svelte
+++ b/packages/ui/src/routes/+page.svelte
@ -4,9 +4,9 @@
 	import Integer from '$lib/elements/Integer.svelte';
 	import Vec3 from '$lib/elements/Vec3.svelte';

-	let intValue = 0;
-	let floatValue = 0.2;
-	let vecValue = [0.2, 0.3, 0.4];
+	let intValue = $state(0);
+	let floatValue = $state(0.2);
+	let vecValue = $state([0.2, 0.3, 0.4]);
 </script>

 <main>