diff --git a/README.md b/README.md index 7a9749f..a78425a 100644 --- a/README.md +++ b/README.md @@ -27,6 +27,7 @@ Currently this visual programming language is used to develop https://nodes.max- - [Node.js](https://nodejs.org/en/download) - [pnpm](https://pnpm.io/installation) - [rust](https://www.rust-lang.org/tools/install) +- wasm-pack ### Install dependencies diff --git a/package.json b/package.json index 1f50fb4..611bd83 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "build:app": "BASE_PATH=/ui pnpm -r --filter 'ui' build && pnpm -r --filter 'app' build", "build:nodes": "pnpm -r --filter './nodes/**' build", "dev:nodes": "pnpm -r --parallel --filter './nodes/**' dev", - "build:deploy": "pnpm build && cp -r ./packages/ui/build ./app/build/ui", + "build:deploy": "pnpm build && cp -r ./packages/ui/storybook-static ./app/build/ui", "dev": "pnpm -r --filter 'app' --filter './packages/node-registry' dev" } } diff --git a/packages/ui/.eslintrc.cjs b/packages/ui/.eslintrc.cjs index 0b75758..ae1f954 100644 --- a/packages/ui/.eslintrc.cjs +++ b/packages/ui/.eslintrc.cjs @@ -2,11 +2,12 @@ module.exports = { root: true, extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:svelte/recommended', - 'prettier' - ], + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:svelte/recommended", + "prettier", + "plugin:storybook/recommended" + ], parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint'], parserOptions: { diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore index ac7211b..e320660 100644 --- a/packages/ui/.gitignore +++ b/packages/ui/.gitignore @@ -2,6 +2,7 @@ node_modules /build /dist +/storybook-static /.svelte-kit /package .env @@ -9,3 +10,5 @@ node_modules !.env.example vite.config.js.timestamp-* vite.config.ts.timestamp-* + +*storybook.log diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts new file mode 100644 index 0000000..52aa66f --- /dev/null +++ b/packages/ui/.storybook/main.ts @@ -0,0 +1,21 @@ +import type { StorybookConfig } from '@storybook/sveltekit'; + +const config: StorybookConfig = { + "stories": [ + "../src/**/*.stories.@(js|ts|svelte)" + ], + + "addons": [ + "@storybook/addon-svelte-csf", + "@storybook/addon-essentials", + "@storybook/addon-themes", + ], + + "framework": { + "name": "@storybook/sveltekit", + "options": {} + }, + + docs: {} +}; +export default config; diff --git a/packages/ui/.storybook/manager-head.html b/packages/ui/.storybook/manager-head.html new file mode 100644 index 0000000..a3c7f89 --- /dev/null +++ b/packages/ui/.storybook/manager-head.html @@ -0,0 +1,12 @@ + diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts new file mode 100644 index 0000000..9e27467 --- /dev/null +++ b/packages/ui/.storybook/preview.ts @@ -0,0 +1,29 @@ +import { withThemeByClassName } from "@storybook/addon-themes"; +import type { Preview } from '@storybook/svelte'; + +import "../src/lib/app.css"; + +const preview: Preview = { + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, + decorators: [withThemeByClassName({ + themes: { + dark: 'theme-dark', + light: 'theme-light', + catppuccin: 'theme-catppuccin', + solarized: 'theme-solarized', + high: 'theme-high-contrast', + nord: 'theme-nord', + dracula: 'theme-dracula', + }, + defaultTheme: 'light', + })], +}; + +export default preview; diff --git a/packages/ui/histoire.config.ts b/packages/ui/histoire.config.ts deleted file mode 100644 index bb2292a..0000000 --- a/packages/ui/histoire.config.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { defineConfig } from 'histoire' -import { HstSvelte } from '@histoire/plugin-svelte' - -export default defineConfig({ - setupFile: '/src/histoire.setup.ts', - storyMatch: [ - './src/lib/**/*.story.svelte', - ], - plugins: [ - HstSvelte(), - ], -}) diff --git a/packages/ui/package.json b/packages/ui/package.json index 7354b5f..acf0442 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -11,9 +11,8 @@ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", "test": "vitest", "lint": "eslint .", - "story:dev": "histoire dev", - "story:build": "histoire build", - "story:preview": "histoire preview" + "story:dev": "storybook dev -p 6006", + "story:build": "storybook build" }, "exports": { ".": { @@ -31,24 +30,28 @@ "svelte": "^4.0.0" }, "devDependencies": { - "@histoire/plugin-svelte": "^0.17.17", - "@sveltejs/adapter-auto": "^3.2.0", + "@storybook/addon-essentials": "^8.4.1", + "@storybook/addon-svelte-csf": "^5.0.0-next.10", + "@storybook/addon-themes": "^8.4.1", + "@storybook/svelte": "^8.4.1", + "@storybook/sveltekit": "^8.4.1", "@sveltejs/adapter-static": "^3.0.1", - "@sveltejs/kit": "^2.5.7", + "@sveltejs/kit": "^2.5.27", "@sveltejs/package": "^2.3.1", - "@sveltejs/vite-plugin-svelte": "^3.1.0", + "@sveltejs/vite-plugin-svelte": "^4.0.0", "@types/eslint": "^8.56.10", "@typescript-eslint/eslint-plugin": "^7.7.1", "@typescript-eslint/parser": "^7.7.1", "eslint": "^9.1.1", - "eslint-plugin-svelte": "^2.38.0", - "histoire": "^0.17.17", + "eslint-plugin-storybook": "^0.10.1", + "eslint-plugin-svelte": "^2.45.1", "publint": "^0.2.7", - "svelte": "^4.2.15", - "svelte-check": "^3.7.0", + "storybook": "^8.4.1", + "svelte": "^5.0.0", + "svelte-check": "^4.0.0", "tslib": "^2.6.2", - "typescript": "^5.4.5", - "vite": "^5.2.10", + "typescript": "^5.5.0", + "vite": "^5.4.4", "vitest": "^1.5.2" }, "svelte": "./dist/index.js", diff --git a/packages/ui/src/histoire.setup.ts b/packages/ui/src/histoire.setup.ts deleted file mode 100644 index bbd582f..0000000 --- a/packages/ui/src/histoire.setup.ts +++ /dev/null @@ -1 +0,0 @@ -import "./lib/app.css" diff --git a/packages/ui/src/lib/Details.svelte b/packages/ui/src/lib/Details.svelte index 6fd8602..7c3e9ad 100644 --- a/packages/ui/src/lib/Details.svelte +++ b/packages/ui/src/lib/Details.svelte @@ -1,12 +1,17 @@
{title}
- + {@render children?.()}
diff --git a/packages/ui/src/lib/Input.svelte b/packages/ui/src/lib/Input.svelte index 30e1019..71164f7 100644 --- 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(); {#if input.type === 'float'} diff --git a/packages/ui/src/lib/ShortCut.svelte b/packages/ui/src/lib/ShortCut.svelte index 3feeafc..a4b8102 100644 --- a/packages/ui/src/lib/ShortCut.svelte +++ b/packages/ui/src/lib/ShortCut.svelte @@ -1,8 +1,17 @@
diff --git a/packages/ui/src/lib/app.css b/packages/ui/src/lib/app.css index a57f307..c626232 100644 --- 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; diff --git a/packages/ui/src/lib/elements/Checkbox.svelte b/packages/ui/src/lib/elements/Checkbox.svelte index a01e0cf..1076d41 100644 --- a/packages/ui/src/lib/elements/Checkbox.svelte +++ b/packages/ui/src/lib/elements/Checkbox.svelte @@ -1,13 +1,21 @@ diff --git a/packages/ui/src/lib/elements/Float.stories.svelte b/packages/ui/src/lib/elements/Float.stories.svelte new file mode 100644 index 0000000..1c5500a --- /dev/null +++ b/packages/ui/src/lib/elements/Float.stories.svelte @@ -0,0 +1,11 @@ + + + diff --git a/packages/ui/src/lib/elements/Float.story.svelte b/packages/ui/src/lib/elements/Float.story.svelte deleted file mode 100644 index 49cfe3f..0000000 --- a/packages/ui/src/lib/elements/Float.story.svelte +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - diff --git a/packages/ui/src/lib/elements/Float.svelte b/packages/ui/src/lib/elements/Float.svelte index a1d5d78..c3d9d66 100644 --- a/packages/ui/src/lib/elements/Float.svelte +++ b/packages/ui/src/lib/elements/Float.svelte @@ -1,9 +1,19 @@
@@ -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};`} /> diff --git a/packages/ui/src/lib/elements/Integer.stories.svelte b/packages/ui/src/lib/elements/Integer.stories.svelte new file mode 100644 index 0000000..27f83f8 --- /dev/null +++ b/packages/ui/src/lib/elements/Integer.stories.svelte @@ -0,0 +1,11 @@ + + + diff --git a/packages/ui/src/lib/elements/Integer.story.svelte b/packages/ui/src/lib/elements/Integer.story.svelte deleted file mode 100644 index e514c5d..0000000 --- a/packages/ui/src/lib/elements/Integer.story.svelte +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - diff --git a/packages/ui/src/lib/elements/Integer.svelte b/packages/ui/src/lib/elements/Integer.svelte index 16b1138..800115e 100644 --- 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' + );
{#if typeof min !== 'undefined' && typeof max !== 'undefined'} - + {/if} - + - +
- diff --git a/packages/ui/src/lib/elements/Select.stories.svelte b/packages/ui/src/lib/elements/Select.stories.svelte new file mode 100644 index 0000000..e6a0418 --- /dev/null +++ b/packages/ui/src/lib/elements/Select.stories.svelte @@ -0,0 +1,23 @@ + + + diff --git a/packages/ui/src/lib/elements/Select.story.svelte b/packages/ui/src/lib/elements/Select.story.svelte deleted file mode 100644 index 69cfa70..0000000 --- a/packages/ui/src/lib/elements/Select.story.svelte +++ /dev/null @@ -1,18 +0,0 @@ - - - - - diff --git a/packages/ui/src/lib/elements/Vec3.stories.svelte b/packages/ui/src/lib/elements/Vec3.stories.svelte new file mode 100644 index 0000000..dc288bf --- /dev/null +++ b/packages/ui/src/lib/elements/Vec3.stories.svelte @@ -0,0 +1,10 @@ + + + diff --git a/packages/ui/src/lib/elements/Vec3.story.svelte b/packages/ui/src/lib/elements/Vec3.story.svelte deleted file mode 100644 index 5f6d499..0000000 --- a/packages/ui/src/lib/elements/Vec3.story.svelte +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - diff --git a/packages/ui/src/lib/elements/Vec3.svelte b/packages/ui/src/lib/elements/Vec3.svelte index 0d9115e..37ee12c 100644 --- a/packages/ui/src/lib/elements/Vec3.svelte +++ b/packages/ui/src/lib/elements/Vec3.svelte @@ -1,8 +1,12 @@
diff --git a/packages/ui/src/lib/helpers/StoryContent.svelte b/packages/ui/src/lib/helpers/StoryContent.svelte deleted file mode 100644 index 262df79..0000000 --- a/packages/ui/src/lib/helpers/StoryContent.svelte +++ /dev/null @@ -1,24 +0,0 @@ - - -
- -
- - diff --git a/packages/ui/src/lib/helpers/StorySettings.svelte b/packages/ui/src/lib/helpers/StorySettings.svelte deleted file mode 100644 index c76f2a2..0000000 --- a/packages/ui/src/lib/helpers/StorySettings.svelte +++ /dev/null @@ -1,23 +0,0 @@ - - -
- -