diff options
Diffstat (limited to 'llama.cpp/tools/server/webui/.storybook')
5 files changed, 120 insertions, 0 deletions
diff --git a/llama.cpp/tools/server/webui/.storybook/ModeWatcherDecorator.svelte b/llama.cpp/tools/server/webui/.storybook/ModeWatcherDecorator.svelte new file mode 100644 index 0000000..8bded8b --- /dev/null +++ b/llama.cpp/tools/server/webui/.storybook/ModeWatcherDecorator.svelte @@ -0,0 +1,36 @@ +<script lang="ts"> + import { ModeWatcher } from 'mode-watcher'; + import { onMount } from 'svelte'; + + interface Props { + children?: any; + } + + let { children }: Props = $props(); + + onMount(() => { + const root = document.documentElement; + const theme = localStorage.getItem('mode-watcher-mode') || 'system'; + + if (theme === 'dark') { + root.classList.add('dark'); + } else if (theme === 'light') { + root.classList.remove('dark'); + } else { + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + if (prefersDark) { + root.classList.add('dark'); + } else { + root.classList.remove('dark'); + } + } + }); +</script> + +<ModeWatcher /> + +{#if children} + {@const Component = children} + + <Component /> +{/if} diff --git a/llama.cpp/tools/server/webui/.storybook/TooltipProviderDecorator.svelte b/llama.cpp/tools/server/webui/.storybook/TooltipProviderDecorator.svelte new file mode 100644 index 0000000..9aad1ea --- /dev/null +++ b/llama.cpp/tools/server/webui/.storybook/TooltipProviderDecorator.svelte @@ -0,0 +1,13 @@ +<script lang="ts"> + import * as Tooltip from '../src/lib/components/ui/tooltip'; + + interface Props { + children: any; + } + + let { children }: Props = $props(); +</script> + +<Tooltip.Provider> + {@render children()} +</Tooltip.Provider> diff --git a/llama.cpp/tools/server/webui/.storybook/main.ts b/llama.cpp/tools/server/webui/.storybook/main.ts new file mode 100644 index 0000000..bfd16fa --- /dev/null +++ b/llama.cpp/tools/server/webui/.storybook/main.ts @@ -0,0 +1,17 @@ +import type { StorybookConfig } from '@storybook/sveltekit'; + +const config: StorybookConfig = { + stories: ['../tests/stories/**/*.mdx', '../tests/stories/**/*.stories.@(js|ts|svelte)'], + addons: [ + '@storybook/addon-svelte-csf', + '@chromatic-com/storybook', + '@storybook/addon-docs', + '@storybook/addon-a11y', + '@storybook/addon-vitest' + ], + framework: { + name: '@storybook/sveltekit', + options: {} + } +}; +export default config; diff --git a/llama.cpp/tools/server/webui/.storybook/preview.ts b/llama.cpp/tools/server/webui/.storybook/preview.ts new file mode 100644 index 0000000..8d530e4 --- /dev/null +++ b/llama.cpp/tools/server/webui/.storybook/preview.ts @@ -0,0 +1,42 @@ +import type { Preview } from '@storybook/sveltekit'; +import '../src/app.css'; +import ModeWatcherDecorator from './ModeWatcherDecorator.svelte'; +import TooltipProviderDecorator from './TooltipProviderDecorator.svelte'; + +const preview: Preview = { + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i + } + }, + + backgrounds: { + disable: true + }, + + a11y: { + // 'todo' - show a11y violations in the test UI only + // 'error' - fail CI on a11y violations + // 'off' - skip a11y checks entirely + test: 'todo' + } + }, + decorators: [ + (story) => ({ + Component: ModeWatcherDecorator, + props: { + children: story + } + }), + (story) => ({ + Component: TooltipProviderDecorator, + props: { + children: story + } + }) + ] +}; + +export default preview; diff --git a/llama.cpp/tools/server/webui/.storybook/vitest.setup.ts b/llama.cpp/tools/server/webui/.storybook/vitest.setup.ts new file mode 100644 index 0000000..1471572 --- /dev/null +++ b/llama.cpp/tools/server/webui/.storybook/vitest.setup.ts @@ -0,0 +1,12 @@ +import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview'; +import { setProjectAnnotations } from '@storybook/sveltekit'; +import * as previewAnnotations from './preview'; +import { beforeAll } from 'vitest'; + +const project = setProjectAnnotations([a11yAddonAnnotations, previewAnnotations]); + +beforeAll(async () => { + if (project.beforeAll) { + await project.beforeAll(); + } +}); |