feat(ui): migrate to svelte-5 and storybook
This commit is contained in:
parent
9ba26374db
commit
a87add30ff
@ -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
|
||||
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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: {
|
||||
|
||||
3
packages/ui/.gitignore
vendored
3
packages/ui/.gitignore
vendored
@ -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
|
||||
|
||||
21
packages/ui/.storybook/main.ts
Normal file
21
packages/ui/.storybook/main.ts
Normal file
@ -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;
|
||||
12
packages/ui/.storybook/manager-head.html
Normal file
12
packages/ui/.storybook/manager-head.html
Normal file
@ -0,0 +1,12 @@
|
||||
<style>
|
||||
.sidebar-header {
|
||||
display: none !important;
|
||||
}
|
||||
#downshift-0-label {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#downshift-0-label ~ div {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
</style>
|
||||
29
packages/ui/.storybook/preview.ts
Normal file
29
packages/ui/.storybook/preview.ts
Normal file
@ -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;
|
||||
@ -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(),
|
||||
],
|
||||
})
|
||||
@ -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",
|
||||
|
||||
@ -1 +0,0 @@
|
||||
import "./lib/app.css"
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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'}
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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} />
|
||||
|
||||
11
packages/ui/src/lib/elements/Float.stories.svelte
Normal file
11
packages/ui/src/lib/elements/Float.stories.svelte
Normal file
@ -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" />
|
||||
@ -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>
|
||||
@ -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};`}
|
||||
/>
|
||||
|
||||
11
packages/ui/src/lib/elements/Integer.stories.svelte
Normal file
11
packages/ui/src/lib/elements/Integer.stories.svelte
Normal file
@ -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" />
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
|
||||
23
packages/ui/src/lib/elements/Select.stories.svelte
Normal file
23
packages/ui/src/lib/elements/Select.stories.svelte
Normal file
@ -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'] }} />
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
10
packages/ui/src/lib/elements/Vec3.stories.svelte
Normal file
10
packages/ui/src/lib/elements/Vec3.stories.svelte
Normal file
@ -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" />
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
6575
pnpm-lock.yaml
6575
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user