@repobuddy/storybook 0.16.2 → 1.0.1
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/esm/manager/brand_title.d.ts +1 -1
- package/esm/manager/brand_title.js +1 -1
- package/esm/parameters/define_docs_param.d.ts +10 -1
- package/esm/storybook-addon-tag-badges/tag_badges.js +60 -30
- package/esm/storybook-addon-tag-badges/types.d.ts +1 -1
- package/esm/storybook-dark-mode/dark_mode_docs_container.d.ts +3 -3
- package/esm/storybook-dark-mode/dark_mode_docs_container.js +4 -4
- package/esm/storybook-dark-mode/define_dark_mode.d.ts +2 -2
- package/esm/storybook-dark-mode/define_dark_mode.js +1 -1
- package/esm/storybook-dark-mode/with_dark_mode.js +1 -15
- package/esm/testing/decorators/when_running_in_test.d.ts +1 -1
- package/package.json +17 -27
- package/readme.md +10 -4
- package/src/manager/brand_title.ts +1 -1
- package/src/overview.mdx +2 -2
- package/src/parameters/define_docs_param.ts +10 -1
- package/src/storybook-addon-tag-badges/tag_badges.ts +60 -30
- package/src/storybook-addon-tag-badges/types.ts +1 -1
- package/src/storybook-dark-mode/dark_mode_docs_container.mdx +3 -3
- package/src/storybook-dark-mode/dark_mode_docs_container.tsx +4 -4
- package/src/storybook-dark-mode/define_dark_mode.ts +2 -2
- package/src/storybook-dark-mode/with_dark_mode.tsx +1 -14
- package/src/testing/decorators/when_running_in_test.tsx +1 -1
|
@@ -22,7 +22,7 @@ export interface BrandTitleOptions {
|
|
|
22
22
|
*
|
|
23
23
|
* ```ts
|
|
24
24
|
* import { brandTitle } from '@repobuddy/storybook'
|
|
25
|
-
* import { addons } from '
|
|
25
|
+
* import { addons } from 'storybook/manager-api'
|
|
26
26
|
*
|
|
27
27
|
* addons.setConfig({
|
|
28
28
|
* brandTitle: brandTitle({
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { StoryContext } from '@storybook/react';
|
|
1
|
+
import type { StoryContext } from '@storybook/react-vite';
|
|
2
2
|
declare global {
|
|
3
3
|
namespace JSX {
|
|
4
4
|
interface Element {
|
|
@@ -24,6 +24,9 @@ export interface SourceProps {
|
|
|
24
24
|
* Specifies whether decorators should be excluded from the source code.
|
|
25
25
|
*
|
|
26
26
|
* @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#excludedecorators
|
|
27
|
+
*
|
|
28
|
+
* Note: Has no effect in React.
|
|
29
|
+
* @see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#parameter-docssourceexcludedecorators-has-no-effect-in-react
|
|
27
30
|
*/
|
|
28
31
|
excludeDecorators?: boolean | undefined;
|
|
29
32
|
/**
|
|
@@ -92,6 +95,12 @@ export interface DocsParam {
|
|
|
92
95
|
*/
|
|
93
96
|
component?: string | JSX.Element | undefined;
|
|
94
97
|
} | undefined;
|
|
98
|
+
/**
|
|
99
|
+
* Determines whether to show the code panel.
|
|
100
|
+
*
|
|
101
|
+
* @see https://storybook.js.org/docs/writing-docs/code-panel
|
|
102
|
+
*/
|
|
103
|
+
codePanel?: boolean | undefined;
|
|
95
104
|
source?: SourceProps | undefined;
|
|
96
105
|
canvas?: {
|
|
97
106
|
/**
|
|
@@ -23,21 +23,27 @@ export const editorBadge = {
|
|
|
23
23
|
tags: 'editor',
|
|
24
24
|
badge: {
|
|
25
25
|
text: '✏️',
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
style: {
|
|
27
|
+
backgroundColor: 'transparent',
|
|
28
|
+
borderColor: 'transparent'
|
|
29
|
+
},
|
|
28
30
|
tooltip: 'Editor'
|
|
29
31
|
},
|
|
30
32
|
display: {
|
|
31
|
-
sidebar:
|
|
32
|
-
|
|
33
|
+
sidebar: {
|
|
34
|
+
type: 'story',
|
|
35
|
+
skipInherited: false
|
|
36
|
+
}
|
|
33
37
|
}
|
|
34
38
|
};
|
|
35
39
|
export const newBadge = {
|
|
36
40
|
tags: 'new',
|
|
37
41
|
badge: {
|
|
38
42
|
text: '🆕',
|
|
39
|
-
|
|
40
|
-
|
|
43
|
+
style: {
|
|
44
|
+
backgroundColor: 'transparent',
|
|
45
|
+
borderColor: 'transparent'
|
|
46
|
+
},
|
|
41
47
|
tooltip: 'New'
|
|
42
48
|
}
|
|
43
49
|
};
|
|
@@ -45,8 +51,10 @@ export const betaBadge = {
|
|
|
45
51
|
tags: 'beta',
|
|
46
52
|
badge: {
|
|
47
53
|
text: '🅱️',
|
|
48
|
-
|
|
49
|
-
|
|
54
|
+
style: {
|
|
55
|
+
backgroundColor: 'transparent',
|
|
56
|
+
borderColor: 'transparent'
|
|
57
|
+
},
|
|
50
58
|
tooltip: 'Beta'
|
|
51
59
|
}
|
|
52
60
|
};
|
|
@@ -54,8 +62,10 @@ export const propsBadge = {
|
|
|
54
62
|
tags: 'props',
|
|
55
63
|
badge: {
|
|
56
64
|
text: '🔧',
|
|
57
|
-
|
|
58
|
-
|
|
65
|
+
style: {
|
|
66
|
+
backgroundColor: 'transparent',
|
|
67
|
+
borderColor: 'transparent'
|
|
68
|
+
},
|
|
59
69
|
tooltip: 'Props'
|
|
60
70
|
}
|
|
61
71
|
};
|
|
@@ -63,8 +73,10 @@ export const deprecatedBadge = {
|
|
|
63
73
|
tags: 'deprecated',
|
|
64
74
|
badge: {
|
|
65
75
|
text: '🪦',
|
|
66
|
-
|
|
67
|
-
|
|
76
|
+
style: {
|
|
77
|
+
backgroundColor: 'transparent',
|
|
78
|
+
borderColor: 'transparent'
|
|
79
|
+
},
|
|
68
80
|
tooltip: 'Deprecated'
|
|
69
81
|
}
|
|
70
82
|
};
|
|
@@ -72,8 +84,10 @@ export const outdatedBadge = {
|
|
|
72
84
|
tags: 'outdated',
|
|
73
85
|
badge: {
|
|
74
86
|
text: '⚠️',
|
|
75
|
-
|
|
76
|
-
|
|
87
|
+
style: {
|
|
88
|
+
backgroundColor: 'transparent',
|
|
89
|
+
borderColor: 'transparent'
|
|
90
|
+
},
|
|
77
91
|
tooltip: 'Outdated'
|
|
78
92
|
}
|
|
79
93
|
};
|
|
@@ -81,8 +95,10 @@ export const dangerBadge = {
|
|
|
81
95
|
tags: 'danger',
|
|
82
96
|
badge: {
|
|
83
97
|
text: '🚨',
|
|
84
|
-
|
|
85
|
-
|
|
98
|
+
style: {
|
|
99
|
+
backgroundColor: 'transparent',
|
|
100
|
+
borderColor: 'transparent'
|
|
101
|
+
},
|
|
86
102
|
tooltip: 'Dangerous'
|
|
87
103
|
}
|
|
88
104
|
};
|
|
@@ -90,8 +106,10 @@ export const todoBadge = {
|
|
|
90
106
|
tags: 'todo',
|
|
91
107
|
badge: {
|
|
92
108
|
text: '📋',
|
|
93
|
-
|
|
94
|
-
|
|
109
|
+
style: {
|
|
110
|
+
backgroundColor: 'transparent',
|
|
111
|
+
borderColor: 'transparent'
|
|
112
|
+
},
|
|
95
113
|
tooltip: 'Todo'
|
|
96
114
|
}
|
|
97
115
|
};
|
|
@@ -99,8 +117,10 @@ export const codeOnlyBadge = {
|
|
|
99
117
|
tags: 'code-only',
|
|
100
118
|
badge: {
|
|
101
119
|
text: '📝',
|
|
102
|
-
|
|
103
|
-
|
|
120
|
+
style: {
|
|
121
|
+
backgroundColor: 'transparent',
|
|
122
|
+
borderColor: 'transparent'
|
|
123
|
+
},
|
|
104
124
|
tooltip: 'Code Only'
|
|
105
125
|
}
|
|
106
126
|
};
|
|
@@ -108,8 +128,10 @@ export const snapshotBadge = {
|
|
|
108
128
|
tags: 'snapshot',
|
|
109
129
|
badge: {
|
|
110
130
|
text: '📸',
|
|
111
|
-
|
|
112
|
-
|
|
131
|
+
style: {
|
|
132
|
+
backgroundColor: 'transparent',
|
|
133
|
+
borderColor: 'transparent'
|
|
134
|
+
},
|
|
113
135
|
tooltip: 'Snapshot Test'
|
|
114
136
|
},
|
|
115
137
|
display: {
|
|
@@ -121,8 +143,10 @@ export const unitBadge = {
|
|
|
121
143
|
tags: 'unit',
|
|
122
144
|
badge: {
|
|
123
145
|
text: '🧪',
|
|
124
|
-
|
|
125
|
-
|
|
146
|
+
style: {
|
|
147
|
+
backgroundColor: 'transparent',
|
|
148
|
+
borderColor: 'transparent'
|
|
149
|
+
},
|
|
126
150
|
tooltip: 'Unit Test'
|
|
127
151
|
},
|
|
128
152
|
display: {
|
|
@@ -133,8 +157,10 @@ export const integrationBadge = {
|
|
|
133
157
|
tags: 'integration',
|
|
134
158
|
badge: {
|
|
135
159
|
text: '🔗',
|
|
136
|
-
|
|
137
|
-
|
|
160
|
+
style: {
|
|
161
|
+
backgroundColor: 'transparent',
|
|
162
|
+
borderColor: 'transparent'
|
|
163
|
+
},
|
|
138
164
|
tooltip: 'Integration Test'
|
|
139
165
|
},
|
|
140
166
|
display: {
|
|
@@ -145,8 +171,10 @@ export const keyboardBadge = {
|
|
|
145
171
|
tags: 'keyboard',
|
|
146
172
|
badge: {
|
|
147
173
|
text: '⌨️',
|
|
148
|
-
|
|
149
|
-
|
|
174
|
+
style: {
|
|
175
|
+
backgroundColor: 'transparent',
|
|
176
|
+
borderColor: 'transparent'
|
|
177
|
+
},
|
|
150
178
|
tooltip: 'Keyboard Interaction'
|
|
151
179
|
}
|
|
152
180
|
};
|
|
@@ -154,8 +182,10 @@ export const internalBadge = {
|
|
|
154
182
|
tags: 'internal',
|
|
155
183
|
badge: {
|
|
156
184
|
text: '🔒',
|
|
157
|
-
|
|
158
|
-
|
|
185
|
+
style: {
|
|
186
|
+
backgroundColor: 'transparent',
|
|
187
|
+
borderColor: 'transparent'
|
|
188
|
+
},
|
|
159
189
|
tooltip: 'Internal'
|
|
160
190
|
}
|
|
161
191
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { Args, Meta as M, StoryObj as SBO } from '@storybook/react';
|
|
1
|
+
import type { Args, Meta as M, StoryObj as SBO } from '@storybook/react-vite';
|
|
2
2
|
import type { TagNames } from './tag_badges.ts';
|
|
3
3
|
export type Meta<TCmpOrArgs = Args> = Omit<M<TCmpOrArgs>, 'tags'> & {
|
|
4
4
|
tags?: Array<TagNames | (string & {})> | undefined;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { type DocsContextProps } from '@storybook/blocks';
|
|
2
|
-
import { type ThemeVars } from '@storybook/theming';
|
|
1
|
+
import { type DocsContextProps } from '@storybook/addon-docs/blocks';
|
|
3
2
|
import { type PropsWithChildren } from 'react';
|
|
3
|
+
import { type ThemeVars } from 'storybook/theming';
|
|
4
4
|
/**
|
|
5
|
-
* Creates a `DocsContainer` for `storybook` that works with `storybook-dark-
|
|
5
|
+
* Creates a `DocsContainer` for `storybook` that works with `storybook-dark-mode2`.
|
|
6
6
|
*
|
|
7
7
|
* @see https://github.com/hipstersmoothie/storybook-dark-mode/issues/282
|
|
8
8
|
*
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { DocsContainer } from '@storybook/blocks';
|
|
3
|
-
import { themes } from '@storybook/theming';
|
|
2
|
+
import { DocsContainer } from '@storybook/addon-docs/blocks';
|
|
4
3
|
import { useEffect, useState } from 'react';
|
|
5
|
-
import { DARK_MODE_EVENT_NAME } from 'storybook-dark-
|
|
4
|
+
import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode2';
|
|
5
|
+
import { themes } from 'storybook/theming';
|
|
6
6
|
/**
|
|
7
|
-
* Creates a `DocsContainer` for `storybook` that works with `storybook-dark-
|
|
7
|
+
* Creates a `DocsContainer` for `storybook` that works with `storybook-dark-mode2`.
|
|
8
8
|
*
|
|
9
9
|
* @see https://github.com/hipstersmoothie/storybook-dark-mode/issues/282
|
|
10
10
|
*
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { CSSProperties } from '@just-web/css';
|
|
2
2
|
import type { ThemeVars } from 'storybook/internal/theming';
|
|
3
3
|
/**
|
|
4
|
-
* Configuration parameters for `storybook-dark-
|
|
4
|
+
* Configuration parameters for `storybook-dark-mode2`.
|
|
5
5
|
*/
|
|
6
6
|
export interface DarkModeParam {
|
|
7
7
|
/** The current theme ('dark' or 'light') */
|
|
@@ -34,7 +34,7 @@ export interface DarkModeParam {
|
|
|
34
34
|
stylePreview?: boolean | undefined;
|
|
35
35
|
}
|
|
36
36
|
/**
|
|
37
|
-
* Defines `storybook-dark-
|
|
37
|
+
* Defines `storybook-dark-mode2` parameters for Storybook stories.
|
|
38
38
|
*
|
|
39
39
|
* @see https://storybook.js.org/addons/@storybook/addon-themes#dark-mode
|
|
40
40
|
* @returns An object containing the dark mode parameter configuration
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Defines `storybook-dark-
|
|
2
|
+
* Defines `storybook-dark-mode2` parameters for Storybook stories.
|
|
3
3
|
*
|
|
4
4
|
* @see https://storybook.js.org/addons/@storybook/addon-themes#dark-mode
|
|
5
5
|
* @returns An object containing the dark mode parameter configuration
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { toDOMStyle } from '@just-web/css';
|
|
3
|
-
import { useDarkMode } from 'storybook-dark-
|
|
3
|
+
import { useDarkMode } from 'storybook-dark-mode2';
|
|
4
4
|
/**
|
|
5
5
|
* Applies additional dark mode behavior.
|
|
6
6
|
*
|
|
@@ -15,14 +15,10 @@ export function withDarkMode(options) {
|
|
|
15
15
|
const dark = useDarkMode();
|
|
16
16
|
const target = darkMode.classTarget === 'html' ? document.documentElement : document.body;
|
|
17
17
|
if (dark) {
|
|
18
|
-
removeClass(target, darkMode.lightClass);
|
|
19
|
-
addClass(target, darkMode.darkClass);
|
|
20
18
|
removeStyle(target, darkMode.lightStyle);
|
|
21
19
|
addStyle(target, darkMode.darkStyle);
|
|
22
20
|
}
|
|
23
21
|
else {
|
|
24
|
-
removeClass(target, darkMode.darkClass);
|
|
25
|
-
addClass(target, darkMode.lightClass);
|
|
26
22
|
removeStyle(target, darkMode.darkStyle);
|
|
27
23
|
addStyle(target, darkMode.lightStyle);
|
|
28
24
|
}
|
|
@@ -45,16 +41,6 @@ function addClass(target, className) {
|
|
|
45
41
|
target.classList.add(...className);
|
|
46
42
|
}
|
|
47
43
|
}
|
|
48
|
-
function removeClass(target, className) {
|
|
49
|
-
if (!className)
|
|
50
|
-
return;
|
|
51
|
-
if (typeof className === 'string') {
|
|
52
|
-
target.classList.remove(...className.split(' '));
|
|
53
|
-
}
|
|
54
|
-
else if (Array.isArray(className)) {
|
|
55
|
-
target.classList.remove(...className);
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
44
|
function addStyle(target, style) {
|
|
59
45
|
if (style) {
|
|
60
46
|
for (const [key, value] of Object.entries(toDOMStyle(style))) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@repobuddy/storybook",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Storybook repo buddy",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook",
|
|
@@ -48,48 +48,35 @@
|
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@repobuddy/vitest": "^1.2.2",
|
|
51
|
-
"@storybook/addon-
|
|
52
|
-
"@storybook/addon-
|
|
53
|
-
"@storybook/
|
|
54
|
-
"@storybook/
|
|
55
|
-
"@storybook/react": "^8.6.12",
|
|
56
|
-
"@storybook/react-vite": "^8.6.12",
|
|
57
|
-
"@storybook/test": "^8.6.12",
|
|
58
|
-
"@storybook/theming": "^8.6.12",
|
|
51
|
+
"@storybook/addon-docs": "^9.0.1",
|
|
52
|
+
"@storybook/addon-themes": "^9.0.1",
|
|
53
|
+
"@storybook/addon-vitest": "^9.0.1",
|
|
54
|
+
"@storybook/react-vite": "^9.0.1",
|
|
59
55
|
"@tailwindcss/cli": "^4.1.5",
|
|
60
56
|
"@tailwindcss/vite": "^4.1.5",
|
|
61
57
|
"@vitest/browser": "^3.1.2",
|
|
62
58
|
"@vitest/coverage-v8": "^3.1.2",
|
|
63
59
|
"dedent": "^1.6.0",
|
|
64
|
-
"react": "^
|
|
65
|
-
"react-dom": "^
|
|
60
|
+
"react": "^18.3.1",
|
|
61
|
+
"react-dom": "^18.3.1",
|
|
66
62
|
"rimraf": "^6.0.1",
|
|
67
|
-
"storybook": "^
|
|
68
|
-
"storybook-addon-tag-badges": "^
|
|
69
|
-
"storybook-addon-vis": "^1.
|
|
70
|
-
"storybook-dark-
|
|
63
|
+
"storybook": "^9.0.1",
|
|
64
|
+
"storybook-addon-tag-badges": "^2.0.0",
|
|
65
|
+
"storybook-addon-vis": "^2.1.1",
|
|
66
|
+
"storybook-dark-mode2": "^5.0.2",
|
|
71
67
|
"tailwindcss": "^4.1.5",
|
|
72
|
-
"type-plus": "8.0.0-beta.7",
|
|
73
68
|
"vite": "^6.3.4",
|
|
74
69
|
"vitest": "^3.1.2"
|
|
75
70
|
},
|
|
76
71
|
"peerDependencies": {
|
|
77
|
-
"
|
|
78
|
-
"
|
|
79
|
-
"storybook-addon-tag-badges": ">= 1.4.0",
|
|
80
|
-
"storybook-dark-mode": ">= 4.0.2"
|
|
72
|
+
"storybook-addon-tag-badges": "^2.0.0",
|
|
73
|
+
"storybook-dark-mode2": "^5.0.2"
|
|
81
74
|
},
|
|
82
75
|
"peerDependenciesMeta": {
|
|
83
|
-
"@storybook/blocks": {
|
|
84
|
-
"optional": true
|
|
85
|
-
},
|
|
86
|
-
"@storybook/theming": {
|
|
87
|
-
"optional": true
|
|
88
|
-
},
|
|
89
76
|
"storybook-addon-tag-badges": {
|
|
90
77
|
"optional": true
|
|
91
78
|
},
|
|
92
|
-
"storybook-dark-
|
|
79
|
+
"storybook-dark-mode2": {
|
|
93
80
|
"optional": true
|
|
94
81
|
}
|
|
95
82
|
},
|
|
@@ -100,6 +87,9 @@
|
|
|
100
87
|
"sb": "storybook dev -p 6006",
|
|
101
88
|
"sb:build": "storybook build",
|
|
102
89
|
"test": "vitest run",
|
|
90
|
+
"test:dark": "vitest run --config=vitest.config.dark.ts",
|
|
91
|
+
"test:light": "vitest run --config=vitest.config.light.ts",
|
|
92
|
+
"test:theme": "vitest run --config=vitest.config.theme.ts",
|
|
103
93
|
"w": "vitest"
|
|
104
94
|
}
|
|
105
95
|
}
|
package/readme.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Your repository buddy for Storybook.
|
|
4
4
|
|
|
5
|
+
> [!NOTE]
|
|
6
|
+
>
|
|
7
|
+
> This package supports Storybook 9.x from version `1.0.0`.
|
|
8
|
+
>
|
|
9
|
+
> For Storybook 8.x, please use `0.x` version.
|
|
10
|
+
|
|
5
11
|
## Install
|
|
6
12
|
|
|
7
13
|
```sh
|
|
@@ -96,9 +102,9 @@ import { defaultConfig } from 'storybook-addon-tag-badges'
|
|
|
96
102
|
addons.setConfig({ tagBadges: [newBadge, ...defaultConfig] })
|
|
97
103
|
```
|
|
98
104
|
|
|
99
|
-
### `storybook-dark-
|
|
105
|
+
### `storybook-dark-mode2`
|
|
100
106
|
|
|
101
|
-
[`@repobuddy/storybook`][`@repobuddy/storybook`] provides a few utilities to work with [`storybook-dark-
|
|
107
|
+
[`@repobuddy/storybook`][`@repobuddy/storybook`] provides a few utilities to work with [`storybook-dark-mode2`][`storybook-dark-mode2`].
|
|
102
108
|
|
|
103
109
|
```ts
|
|
104
110
|
// .storybook/preview.tsx
|
|
@@ -120,12 +126,12 @@ export const preview: Preview = {
|
|
|
120
126
|
})
|
|
121
127
|
},
|
|
122
128
|
decorators: [withDarkMode({
|
|
123
|
-
bodyClass: '
|
|
129
|
+
bodyClass: 'text-black bg-white dark:text-white dark:bg-black'
|
|
124
130
|
})]
|
|
125
131
|
}
|
|
126
132
|
```
|
|
127
133
|
|
|
128
134
|
[`@repobuddy/storybook`]: https://github.com/repobuddy/storybook
|
|
129
135
|
[`storybook-addon-tag-badges`]: https://github.com/Sidnioulz/storybook-addon-tag-badges
|
|
130
|
-
[`storybook-dark-
|
|
136
|
+
[`storybook-dark-mode2`]: https://github.com/repobuddy/storybook-dark-mode2
|
|
131
137
|
[`storybook-addon-code-editor`]: https://github.com/storybookjs/storybook/tree/main/addons/code/code-editor
|
|
@@ -23,7 +23,7 @@ export interface BrandTitleOptions {
|
|
|
23
23
|
*
|
|
24
24
|
* ```ts
|
|
25
25
|
* import { brandTitle } from '@repobuddy/storybook'
|
|
26
|
-
* import { addons } from '
|
|
26
|
+
* import { addons } from 'storybook/manager-api'
|
|
27
27
|
*
|
|
28
28
|
* addons.setConfig({
|
|
29
29
|
* brandTitle: brandTitle({
|
package/src/overview.mdx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Meta } from "@storybook/blocks";
|
|
1
|
+
import { Meta } from "@storybook/addon-docs/blocks";
|
|
2
2
|
import readme from "../readme.md?raw";
|
|
3
|
-
import { Markdown } from "@storybook/blocks";
|
|
3
|
+
import { Markdown } from "@storybook/addon-docs/blocks";
|
|
4
4
|
|
|
5
5
|
<Meta title="Overview" />
|
|
6
6
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { StoryContext } from '@storybook/react'
|
|
1
|
+
import type { StoryContext } from '@storybook/react-vite'
|
|
2
2
|
|
|
3
3
|
declare global {
|
|
4
4
|
namespace JSX {
|
|
@@ -25,6 +25,9 @@ export interface SourceProps {
|
|
|
25
25
|
* Specifies whether decorators should be excluded from the source code.
|
|
26
26
|
*
|
|
27
27
|
* @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#excludedecorators
|
|
28
|
+
*
|
|
29
|
+
* Note: Has no effect in React.
|
|
30
|
+
* @see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#parameter-docssourceexcludedecorators-has-no-effect-in-react
|
|
28
31
|
*/
|
|
29
32
|
excludeDecorators?: boolean | undefined
|
|
30
33
|
/**
|
|
@@ -100,6 +103,12 @@ export interface DocsParam {
|
|
|
100
103
|
component?: string | JSX.Element | undefined
|
|
101
104
|
}
|
|
102
105
|
| undefined
|
|
106
|
+
/**
|
|
107
|
+
* Determines whether to show the code panel.
|
|
108
|
+
*
|
|
109
|
+
* @see https://storybook.js.org/docs/writing-docs/code-panel
|
|
110
|
+
*/
|
|
111
|
+
codePanel?: boolean | undefined
|
|
103
112
|
source?: SourceProps | undefined
|
|
104
113
|
canvas?:
|
|
105
114
|
| {
|
|
@@ -46,13 +46,17 @@ export const editorBadge: TagBadgeParameter = {
|
|
|
46
46
|
tags: 'editor',
|
|
47
47
|
badge: {
|
|
48
48
|
text: '✏️',
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
style: {
|
|
50
|
+
backgroundColor: 'transparent',
|
|
51
|
+
borderColor: 'transparent'
|
|
52
|
+
},
|
|
51
53
|
tooltip: 'Editor'
|
|
52
54
|
},
|
|
53
55
|
display: {
|
|
54
|
-
sidebar:
|
|
55
|
-
|
|
56
|
+
sidebar: {
|
|
57
|
+
type: 'story',
|
|
58
|
+
skipInherited: false
|
|
59
|
+
}
|
|
56
60
|
}
|
|
57
61
|
}
|
|
58
62
|
|
|
@@ -60,8 +64,10 @@ export const newBadge: TagBadgeParameter = {
|
|
|
60
64
|
tags: 'new',
|
|
61
65
|
badge: {
|
|
62
66
|
text: '🆕',
|
|
63
|
-
|
|
64
|
-
|
|
67
|
+
style: {
|
|
68
|
+
backgroundColor: 'transparent',
|
|
69
|
+
borderColor: 'transparent'
|
|
70
|
+
},
|
|
65
71
|
tooltip: 'New'
|
|
66
72
|
}
|
|
67
73
|
}
|
|
@@ -70,8 +76,10 @@ export const betaBadge: TagBadgeParameter = {
|
|
|
70
76
|
tags: 'beta',
|
|
71
77
|
badge: {
|
|
72
78
|
text: '🅱️',
|
|
73
|
-
|
|
74
|
-
|
|
79
|
+
style: {
|
|
80
|
+
backgroundColor: 'transparent',
|
|
81
|
+
borderColor: 'transparent'
|
|
82
|
+
},
|
|
75
83
|
tooltip: 'Beta'
|
|
76
84
|
}
|
|
77
85
|
}
|
|
@@ -80,8 +88,10 @@ export const propsBadge: TagBadgeParameter = {
|
|
|
80
88
|
tags: 'props',
|
|
81
89
|
badge: {
|
|
82
90
|
text: '🔧',
|
|
83
|
-
|
|
84
|
-
|
|
91
|
+
style: {
|
|
92
|
+
backgroundColor: 'transparent',
|
|
93
|
+
borderColor: 'transparent'
|
|
94
|
+
},
|
|
85
95
|
tooltip: 'Props'
|
|
86
96
|
}
|
|
87
97
|
}
|
|
@@ -90,8 +100,10 @@ export const deprecatedBadge: TagBadgeParameter = {
|
|
|
90
100
|
tags: 'deprecated',
|
|
91
101
|
badge: {
|
|
92
102
|
text: '🪦',
|
|
93
|
-
|
|
94
|
-
|
|
103
|
+
style: {
|
|
104
|
+
backgroundColor: 'transparent',
|
|
105
|
+
borderColor: 'transparent'
|
|
106
|
+
},
|
|
95
107
|
tooltip: 'Deprecated'
|
|
96
108
|
}
|
|
97
109
|
}
|
|
@@ -100,8 +112,10 @@ export const outdatedBadge: TagBadgeParameter = {
|
|
|
100
112
|
tags: 'outdated',
|
|
101
113
|
badge: {
|
|
102
114
|
text: '⚠️',
|
|
103
|
-
|
|
104
|
-
|
|
115
|
+
style: {
|
|
116
|
+
backgroundColor: 'transparent',
|
|
117
|
+
borderColor: 'transparent'
|
|
118
|
+
},
|
|
105
119
|
tooltip: 'Outdated'
|
|
106
120
|
}
|
|
107
121
|
}
|
|
@@ -110,8 +124,10 @@ export const dangerBadge: TagBadgeParameter = {
|
|
|
110
124
|
tags: 'danger',
|
|
111
125
|
badge: {
|
|
112
126
|
text: '🚨',
|
|
113
|
-
|
|
114
|
-
|
|
127
|
+
style: {
|
|
128
|
+
backgroundColor: 'transparent',
|
|
129
|
+
borderColor: 'transparent'
|
|
130
|
+
},
|
|
115
131
|
tooltip: 'Dangerous'
|
|
116
132
|
}
|
|
117
133
|
}
|
|
@@ -120,8 +136,10 @@ export const todoBadge: TagBadgeParameter = {
|
|
|
120
136
|
tags: 'todo',
|
|
121
137
|
badge: {
|
|
122
138
|
text: '📋',
|
|
123
|
-
|
|
124
|
-
|
|
139
|
+
style: {
|
|
140
|
+
backgroundColor: 'transparent',
|
|
141
|
+
borderColor: 'transparent'
|
|
142
|
+
},
|
|
125
143
|
tooltip: 'Todo'
|
|
126
144
|
}
|
|
127
145
|
}
|
|
@@ -130,8 +148,10 @@ export const codeOnlyBadge: TagBadgeParameter = {
|
|
|
130
148
|
tags: 'code-only',
|
|
131
149
|
badge: {
|
|
132
150
|
text: '📝',
|
|
133
|
-
|
|
134
|
-
|
|
151
|
+
style: {
|
|
152
|
+
backgroundColor: 'transparent',
|
|
153
|
+
borderColor: 'transparent'
|
|
154
|
+
},
|
|
135
155
|
tooltip: 'Code Only'
|
|
136
156
|
}
|
|
137
157
|
}
|
|
@@ -140,8 +160,10 @@ export const snapshotBadge: TagBadgeParameter = {
|
|
|
140
160
|
tags: 'snapshot',
|
|
141
161
|
badge: {
|
|
142
162
|
text: '📸',
|
|
143
|
-
|
|
144
|
-
|
|
163
|
+
style: {
|
|
164
|
+
backgroundColor: 'transparent',
|
|
165
|
+
borderColor: 'transparent'
|
|
166
|
+
},
|
|
145
167
|
tooltip: 'Snapshot Test'
|
|
146
168
|
},
|
|
147
169
|
display: {
|
|
@@ -154,8 +176,10 @@ export const unitBadge: TagBadgeParameter = {
|
|
|
154
176
|
tags: 'unit',
|
|
155
177
|
badge: {
|
|
156
178
|
text: '🧪',
|
|
157
|
-
|
|
158
|
-
|
|
179
|
+
style: {
|
|
180
|
+
backgroundColor: 'transparent',
|
|
181
|
+
borderColor: 'transparent'
|
|
182
|
+
},
|
|
159
183
|
tooltip: 'Unit Test'
|
|
160
184
|
},
|
|
161
185
|
display: {
|
|
@@ -167,8 +191,10 @@ export const integrationBadge: TagBadgeParameter = {
|
|
|
167
191
|
tags: 'integration',
|
|
168
192
|
badge: {
|
|
169
193
|
text: '🔗',
|
|
170
|
-
|
|
171
|
-
|
|
194
|
+
style: {
|
|
195
|
+
backgroundColor: 'transparent',
|
|
196
|
+
borderColor: 'transparent'
|
|
197
|
+
},
|
|
172
198
|
tooltip: 'Integration Test'
|
|
173
199
|
},
|
|
174
200
|
display: {
|
|
@@ -180,8 +206,10 @@ export const keyboardBadge: TagBadgeParameter = {
|
|
|
180
206
|
tags: 'keyboard',
|
|
181
207
|
badge: {
|
|
182
208
|
text: '⌨️',
|
|
183
|
-
|
|
184
|
-
|
|
209
|
+
style: {
|
|
210
|
+
backgroundColor: 'transparent',
|
|
211
|
+
borderColor: 'transparent'
|
|
212
|
+
},
|
|
185
213
|
tooltip: 'Keyboard Interaction'
|
|
186
214
|
}
|
|
187
215
|
}
|
|
@@ -190,8 +218,10 @@ export const internalBadge: TagBadgeParameter = {
|
|
|
190
218
|
tags: 'internal',
|
|
191
219
|
badge: {
|
|
192
220
|
text: '🔒',
|
|
193
|
-
|
|
194
|
-
|
|
221
|
+
style: {
|
|
222
|
+
backgroundColor: 'transparent',
|
|
223
|
+
borderColor: 'transparent'
|
|
224
|
+
},
|
|
195
225
|
tooltip: 'Internal'
|
|
196
226
|
}
|
|
197
227
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { Args, Meta as M, StoryObj as SBO } from '@storybook/react'
|
|
1
|
+
import type { Args, Meta as M, StoryObj as SBO } from '@storybook/react-vite'
|
|
2
2
|
import type { TagNames } from './tag_badges.ts'
|
|
3
3
|
|
|
4
4
|
export type Meta<TCmpOrArgs = Args> = Omit<M<TCmpOrArgs>, 'tags'> & {
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { Meta } from '@storybook/blocks'
|
|
1
|
+
import { Meta } from '@storybook/addon-docs/blocks'
|
|
2
2
|
|
|
3
3
|
# `createDarkModeDocsContainer`
|
|
4
4
|
|
|
5
5
|
<Meta title="storybook-dark-mode/createDarkModeDocsContainer" />
|
|
6
6
|
|
|
7
|
-
Creates a `DocsContainer` for `storybook` that works with `storybook-dark-
|
|
7
|
+
Creates a `DocsContainer` for `storybook` that works with `storybook-dark-mode2`.
|
|
8
8
|
|
|
9
9
|
## Usage
|
|
10
10
|
|
|
11
|
-
It can be called with no arguments to use the default themes from
|
|
11
|
+
It can be called with no arguments to use the default themes from `storybook/theming`.
|
|
12
12
|
|
|
13
13
|
```tsx
|
|
14
14
|
// .storybook/preview.tsx
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { DocsContainer, type DocsContextProps } from '@storybook/blocks'
|
|
2
|
-
import { type ThemeVars, themes } from '@storybook/theming'
|
|
1
|
+
import { DocsContainer, type DocsContextProps } from '@storybook/addon-docs/blocks'
|
|
3
2
|
import { type PropsWithChildren, useEffect, useState } from 'react'
|
|
4
|
-
import { DARK_MODE_EVENT_NAME } from 'storybook-dark-
|
|
3
|
+
import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode2'
|
|
4
|
+
import { type ThemeVars, themes } from 'storybook/theming'
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
|
-
* Creates a `DocsContainer` for `storybook` that works with `storybook-dark-
|
|
7
|
+
* Creates a `DocsContainer` for `storybook` that works with `storybook-dark-mode2`.
|
|
8
8
|
*
|
|
9
9
|
* @see https://github.com/hipstersmoothie/storybook-dark-mode/issues/282
|
|
10
10
|
*
|
|
@@ -2,7 +2,7 @@ import type { CSSProperties } from '@just-web/css'
|
|
|
2
2
|
import type { ThemeVars } from 'storybook/internal/theming'
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
|
-
* Configuration parameters for `storybook-dark-
|
|
5
|
+
* Configuration parameters for `storybook-dark-mode2`.
|
|
6
6
|
*/
|
|
7
7
|
export interface DarkModeParam {
|
|
8
8
|
/** The current theme ('dark' or 'light') */
|
|
@@ -36,7 +36,7 @@ export interface DarkModeParam {
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
/**
|
|
39
|
-
* Defines `storybook-dark-
|
|
39
|
+
* Defines `storybook-dark-mode2` parameters for Storybook stories.
|
|
40
40
|
*
|
|
41
41
|
* @see https://storybook.js.org/addons/@storybook/addon-themes#dark-mode
|
|
42
42
|
* @returns An object containing the dark mode parameter configuration
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { CSSProperties } from '@just-web/css'
|
|
2
2
|
import { toDOMStyle } from '@just-web/css'
|
|
3
|
-
import { useDarkMode } from 'storybook-dark-
|
|
3
|
+
import { useDarkMode } from 'storybook-dark-mode2'
|
|
4
4
|
import type { DecoratorFunction } from 'storybook/internal/types'
|
|
5
5
|
import type { DarkModeParam } from './define_dark_mode.ts'
|
|
6
6
|
|
|
@@ -35,13 +35,9 @@ export function withDarkMode(
|
|
|
35
35
|
const dark = useDarkMode()
|
|
36
36
|
const target = darkMode.classTarget === 'html' ? document.documentElement : document.body
|
|
37
37
|
if (dark) {
|
|
38
|
-
removeClass(target, darkMode.lightClass)
|
|
39
|
-
addClass(target, darkMode.darkClass)
|
|
40
38
|
removeStyle(target, darkMode.lightStyle)
|
|
41
39
|
addStyle(target, darkMode.darkStyle)
|
|
42
40
|
} else {
|
|
43
|
-
removeClass(target, darkMode.darkClass)
|
|
44
|
-
addClass(target, darkMode.lightClass)
|
|
45
41
|
removeStyle(target, darkMode.darkStyle)
|
|
46
42
|
addStyle(target, darkMode.lightStyle)
|
|
47
43
|
}
|
|
@@ -64,15 +60,6 @@ function addClass(target: HTMLElement, className: string | string[] | undefined)
|
|
|
64
60
|
}
|
|
65
61
|
}
|
|
66
62
|
|
|
67
|
-
function removeClass(target: HTMLElement, className: string | string[] | undefined) {
|
|
68
|
-
if (!className) return
|
|
69
|
-
if (typeof className === 'string') {
|
|
70
|
-
target.classList.remove(...className.split(' '))
|
|
71
|
-
} else if (Array.isArray(className)) {
|
|
72
|
-
target.classList.remove(...className)
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
63
|
function addStyle(target: HTMLElement, style: CSSProperties | undefined) {
|
|
77
64
|
if (style) {
|
|
78
65
|
for (const [key, value] of Object.entries(toDOMStyle(style)!)) {
|