@qijenchen/storybook-config 0.1.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/addons-preset.ts +34 -0
- package/package.json +26 -0
- package/preview.tsx +93 -0
package/addons-preset.ts
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
// Shared Storybook addons preset(2026-05-22 Phase 2 team-distribution-roadmap)
|
|
2
|
+
// Consumer product workspace use:`addons: ['@qijenchen/storybook-config/preset']`
|
|
3
|
+
// DS repo dogfood:`.storybook/main.ts` 直接 import 此 array spread
|
|
4
|
+
|
|
5
|
+
export const sharedAddons = [
|
|
6
|
+
// essentials 含 Controls / Actions / Viewport / Backgrounds / Measure / Highlight / Toolbars / Docs
|
|
7
|
+
// Outline + Backgrounds disabled — DS audit 用 token 量值,不需 outline overlay
|
|
8
|
+
{
|
|
9
|
+
name: '@storybook/addon-essentials',
|
|
10
|
+
options: { outline: false, backgrounds: false },
|
|
11
|
+
},
|
|
12
|
+
'@storybook/addon-a11y',
|
|
13
|
+
'@storybook/addon-docs',
|
|
14
|
+
'@storybook/addon-links',
|
|
15
|
+
'@whitespace/storybook-addon-html',
|
|
16
|
+
] as const
|
|
17
|
+
|
|
18
|
+
export const sharedFramework = {
|
|
19
|
+
name: '@storybook/react-vite' as const,
|
|
20
|
+
options: {},
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const sharedDocsConfig = {
|
|
24
|
+
autodocs: 'tag' as const,
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export const sharedTypescriptConfig = {
|
|
28
|
+
reactDocgen: 'react-docgen-typescript' as const,
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export const sharedStoryGlobs = [
|
|
32
|
+
'../packages/design-system/src/**/*.mdx',
|
|
33
|
+
'../packages/design-system/src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
|
|
34
|
+
]
|
package/package.json
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@qijenchen/storybook-config",
|
|
3
|
+
"version": "0.1.0-beta.3",
|
|
4
|
+
"private": false,
|
|
5
|
+
"description": "Shared Storybook config (addons preset + preview parameters + decorators) for design-system + consumer products. Single SSOT for storybook UX.",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"license": "UNLICENSED",
|
|
8
|
+
"files": [
|
|
9
|
+
"preview.ts",
|
|
10
|
+
"preview.tsx",
|
|
11
|
+
"addons-preset.ts",
|
|
12
|
+
"README.md"
|
|
13
|
+
],
|
|
14
|
+
"exports": {
|
|
15
|
+
".": "./preview.tsx",
|
|
16
|
+
"./preset": "./addons-preset.ts",
|
|
17
|
+
"./preview": "./preview.tsx"
|
|
18
|
+
},
|
|
19
|
+
"main": "./preview.tsx",
|
|
20
|
+
"peerDependencies": {
|
|
21
|
+
"@storybook/react": ">=8.0.0",
|
|
22
|
+
"@storybook/react-vite": ">=8.0.0",
|
|
23
|
+
"react": ">=18.0.0",
|
|
24
|
+
"react-dom": ">=18.0.0"
|
|
25
|
+
}
|
|
26
|
+
}
|
package/preview.tsx
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
// Shared Storybook preview config(2026-05-22 Phase 2 team-distribution-roadmap)
|
|
2
|
+
// Consumer product workspace use:`.storybook/preview.tsx` import { sharedPreview } from '@qijenchen/storybook-config'
|
|
3
|
+
// DS repo dogfood:`.storybook/preview.tsx` 直接 import 此 default export
|
|
4
|
+
|
|
5
|
+
import type { Preview } from '@storybook/react'
|
|
6
|
+
import React, { useEffect } from 'react'
|
|
7
|
+
import { TooltipProvider } from '../design-system/src/components/Tooltip/tooltip'
|
|
8
|
+
|
|
9
|
+
export const sharedGlobalTypes = {
|
|
10
|
+
theme: {
|
|
11
|
+
name: 'Theme',
|
|
12
|
+
description: 'Global theme',
|
|
13
|
+
defaultValue: 'light',
|
|
14
|
+
toolbar: {
|
|
15
|
+
icon: 'circlehollow',
|
|
16
|
+
items: [
|
|
17
|
+
{ value: 'light', icon: 'sun', title: 'Light' },
|
|
18
|
+
{ value: 'dark', icon: 'moon', title: 'Dark' },
|
|
19
|
+
],
|
|
20
|
+
showName: true,
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
density: {
|
|
24
|
+
name: 'Density',
|
|
25
|
+
description: 'UI density (ui-size + layout-space)',
|
|
26
|
+
defaultValue: 'md',
|
|
27
|
+
toolbar: {
|
|
28
|
+
icon: 'component',
|
|
29
|
+
items: [
|
|
30
|
+
{ value: 'md', title: 'Density: md' },
|
|
31
|
+
{ value: 'lg', title: 'Density: lg' },
|
|
32
|
+
],
|
|
33
|
+
showName: true,
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export const sharedParameters = {
|
|
39
|
+
controls: {
|
|
40
|
+
matchers: {
|
|
41
|
+
color: /(background|color)$/i,
|
|
42
|
+
date: /Date$/i,
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
backgrounds: { disable: true },
|
|
46
|
+
options: {
|
|
47
|
+
storySort: {
|
|
48
|
+
order: [
|
|
49
|
+
'Design System',
|
|
50
|
+
['Tokens', 'Components', ['*', ['展示', '設計規格', '設計原則']], 'Patterns'],
|
|
51
|
+
],
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export const sharedDecorators: Preview['decorators'] = [
|
|
57
|
+
(Story, context) => {
|
|
58
|
+
const theme = (context.globals.theme ?? 'light') as string
|
|
59
|
+
const density = (context.globals.density ?? 'md') as string
|
|
60
|
+
|
|
61
|
+
useEffect(() => {
|
|
62
|
+
document.documentElement.setAttribute('data-theme', theme)
|
|
63
|
+
document.documentElement.setAttribute('data-density', density)
|
|
64
|
+
}, [theme, density])
|
|
65
|
+
|
|
66
|
+
// Fullscreen layout 跳過 padding trick:position:fixed 元件相對 viewport,跟 padding 衝突
|
|
67
|
+
const isFullscreen = context.parameters?.layout === 'fullscreen'
|
|
68
|
+
const wrapperStyle: React.CSSProperties = isFullscreen
|
|
69
|
+
? { backgroundColor: 'var(--canvas)', color: 'var(--foreground)' }
|
|
70
|
+
: {
|
|
71
|
+
backgroundColor: 'var(--canvas)',
|
|
72
|
+
color: 'var(--foreground)',
|
|
73
|
+
margin: '-1rem',
|
|
74
|
+
padding: '1rem',
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
return (
|
|
78
|
+
<TooltipProvider delayDuration={500} skipDelayDuration={300}>
|
|
79
|
+
<div style={wrapperStyle}>
|
|
80
|
+
<Story />
|
|
81
|
+
</div>
|
|
82
|
+
</TooltipProvider>
|
|
83
|
+
)
|
|
84
|
+
},
|
|
85
|
+
]
|
|
86
|
+
|
|
87
|
+
const preview: Preview = {
|
|
88
|
+
globalTypes: sharedGlobalTypes,
|
|
89
|
+
parameters: sharedParameters,
|
|
90
|
+
decorators: sharedDecorators,
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
export default preview
|