Skip to content

Commit 58eb36a

Browse files
antfubotantfubot
committed
feat(storybook): unify plugin Storybooks into one composed host
Add a single Storybook UI that composes every plugin's framework-specific Storybook (React, Vue, Svelte, Solid, vanilla) as its own section, so the whole devframe surface can be browsed in one place. - add the @devframes/storybook host that composes each plugin via refs (live dev-server ports in dev, per-plugin static subfolders in build) - scaffold Storybooks for terminals (Svelte) and a11y (Solid) - align every Storybook on Storybook 10 and a shared dark/light theme toggle
1 parent 4ddfe06 commit 58eb36a

29 files changed

Lines changed: 1569 additions & 1056 deletions

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
"docs": "pnpm -C docs run docs",
2020
"docs:build": "pnpm -C docs run docs:build",
2121
"docs:serve": "pnpm -C docs run docs:serve",
22+
"storybook": "pnpm -r --parallel --if-present run storybook",
23+
"storybook:build": "pnpm --filter @devframes/storybook run storybook:build",
2224
"lint": "eslint --cache",
2325
"test": "turbo run build && vitest",
2426
"test:e2e": "turbo run build && playwright test",

‎plugins/a11y/.storybook/main.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import type { StorybookConfig } from 'storybook-solidjs-vite'
2+
import UnoCSS from 'unocss/vite'
3+
import { mergeConfig } from 'vite'
4+
import { alias } from '../../../alias'
5+
6+
const config: StorybookConfig = {
7+
stories: ['../src/**/*.stories.@(ts|tsx)'],
8+
framework: {
9+
name: 'storybook-solidjs-vite',
10+
options: {},
11+
},
12+
// `storybook-solidjs-vite` wires `vite-plugin-solid` itself; we only add UnoCSS
13+
// (auto-loading the plugin-root `uno.config.ts`) and the shared source aliases
14+
// so `devframe/*` imports resolve without a prior build.
15+
async viteFinal(config) {
16+
return mergeConfig(config, {
17+
resolve: { alias },
18+
plugins: [UnoCSS()],
19+
})
20+
},
21+
}
22+
23+
export default config

‎plugins/a11y/.storybook/preview.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import type { Preview } from 'storybook-solidjs-vite'
2+
import 'virtual:uno.css'
3+
import '@antfu/design/styles.css'
4+
import '../src/spa/styles.css'
5+
6+
// Drive the shared `@antfu/design` tokens off the toolbar theme toggle: dark mode
7+
// is the `.dark` class on `<html>`, and the canvas takes the semantic
8+
// `bg-base`/`color-base` surface — matching every other devframe surface.
9+
function applyTheme(theme: string): void {
10+
document.documentElement.classList.toggle('dark', theme !== 'light')
11+
document.body.classList.add('bg-base', 'color-base', 'font-sans')
12+
}
13+
14+
const preview: Preview = {
15+
parameters: {
16+
layout: 'fullscreen',
17+
controls: { expanded: true },
18+
},
19+
globalTypes: {
20+
theme: {
21+
description: 'Color theme',
22+
defaultValue: 'dark',
23+
toolbar: {
24+
title: 'Theme',
25+
icon: 'contrast',
26+
items: [
27+
{ value: 'light', title: 'Light', icon: 'sun' },
28+
{ value: 'dark', title: 'Dark', icon: 'moon' },
29+
],
30+
dynamicTitle: true,
31+
},
32+
},
33+
},
34+
decorators: [
35+
(Story, context) => {
36+
applyTheme(context.globals.theme ?? 'dark')
37+
return <Story />
38+
},
39+
],
40+
}
41+
42+
export default preview

‎plugins/a11y/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@
4343
"build:inject": "vite build --config src/inject/vite.config.ts",
4444
"watch": "tsdown --watch",
4545
"dev": "node bin.mjs",
46+
"storybook": "storybook dev -p 6015 --host 0.0.0.0",
47+
"build-storybook": "storybook build",
4648
"cli:build": "node bin.mjs build --out-dir dist/static",
4749
"demo": "node demo/server.mjs",
4850
"demo:build": "node demo/server.mjs build",
@@ -69,6 +71,8 @@
6971
"devframe": "workspace:*",
7072
"get-port-please": "catalog:deps",
7173
"h3": "catalog:deps",
74+
"storybook": "catalog:storybook",
75+
"storybook-solidjs-vite": "catalog:storybook",
7276
"tsdown": "catalog:build",
7377
"unocss": "catalog:frontend",
7478
"vite": "catalog:build",

‎plugins/a11y/src/spa/components/summary.stories.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import type { Meta, StoryObj } from 'storybook-solidjs-vite'
2+
import { Summary } from './header.tsx'
3+
4+
// The severity summary chips — the one expressive, domain-specific color in the
5+
// inspector. Presentational: driven entirely by the per-impact counts, so it
6+
// stories offline without a live scan.
7+
const meta = {
8+
title: 'A11y/Summary',
9+
component: Summary,
10+
parameters: { layout: 'centered' },
11+
} satisfies Meta<typeof Summary>
12+
13+
export default meta
14+
type Story = StoryObj<typeof meta>
15+
16+
const counts = { critical: 3, serious: 5, moderate: 2, minor: 8 }
17+
18+
/** A spread of violations across every severity bucket. */
19+
export const Issues: Story = {
20+
args: { counts, active: null, onToggle: () => {} },
21+
}
22+
23+
/** One severity selected as the active filter. */
24+
export const Filtered: Story = {
25+
args: { counts, active: 'serious', onToggle: () => {} },
26+
}
27+
28+
/** A clean report — every bucket at zero. */
29+
export const Clean: Story = {
30+
args: {
31+
counts: { critical: 0, serious: 0, moderate: 0, minor: 0 },
32+
active: null,
33+
onToggle: () => {},
34+
},
35+
}

‎plugins/code-server/.storybook/preview.ts‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,42 @@
1-
import type { Preview } from '@storybook/html-vite'
1+
import type { Decorator, Preview } from '@storybook/html-vite'
22
import 'virtual:uno.css'
33
import '@antfu/design/styles.css'
44
import '../src/client/style.css'
55

6+
// Drive the shared `@antfu/design` tokens off the toolbar theme toggle: dark mode
7+
// is the `.dark` class on `<html>`, and the canvas takes the semantic
8+
// `bg-base`/`color-base` surface — matching every other devframe surface.
9+
function applyTheme(theme: string): void {
10+
document.documentElement.classList.toggle('dark', theme !== 'light')
11+
document.body.classList.add('bg-base', 'color-base', 'font-sans')
12+
}
13+
14+
const withTheme: Decorator = (story, context) => {
15+
applyTheme(context.globals.theme ?? 'dark')
16+
return story(context)
17+
}
18+
619
const preview: Preview = {
720
parameters: {
821
layout: 'fullscreen',
922
controls: { expanded: true },
1023
},
24+
globalTypes: {
25+
theme: {
26+
description: 'Color theme',
27+
defaultValue: 'dark',
28+
toolbar: {
29+
title: 'Theme',
30+
icon: 'contrast',
31+
items: [
32+
{ value: 'light', title: 'Light', icon: 'sun' },
33+
{ value: 'dark', title: 'Dark', icon: 'moon' },
34+
],
35+
dynamicTitle: true,
36+
},
37+
},
38+
},
39+
decorators: [withTheme],
1140
}
1241

1342
export default preview

‎plugins/code-server/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
"watch": "tsdown --watch",
4545
"typecheck": "tsc --noEmit",
4646
"dev": "vite --config src/spa/vite.config.ts --host 0.0.0.0",
47-
"storybook": "storybook dev -p 6006 --host 0.0.0.0",
47+
"storybook": "storybook dev -p 6013 --host 0.0.0.0",
4848
"build-storybook": "storybook build",
4949
"test": "vitest run",
5050
"prepack": "pnpm run build"

‎plugins/code-server/src/client/code-server.stories.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Meta, StoryObj } from '@storybook/html'
1+
import type { Meta, StoryObj } from '@storybook/html-vite'
22
import type { CodeServerViewState } from './view'
33
import { createCodeServerView } from './view'
44
import './style.css'

‎plugins/git/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
"dev": "node scripts/dev.mjs",
4040
"dev:server": "node src/cli.ts",
4141
"dev:client": "next dev src/client",
42-
"storybook": "storybook dev -p 6006",
42+
"storybook": "storybook dev -p 6011 --host 0.0.0.0",
4343
"storybook:build": "storybook build -o storybook-static",
4444
"watch": "tsdown --watch",
4545
"typecheck": "tsc --noEmit",

‎plugins/inspect/.storybook/main.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { alias } from '../../../alias'
66

77
const config: StorybookConfig = {
88
stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
9-
addons: ['@storybook/addon-essentials'],
9+
addons: ['@storybook/addon-docs'],
1010
framework: {
1111
name: '@storybook/vue3-vite',
1212
options: {},

0 commit comments

Comments
 (0)