@repobuddy/storybook 0.16.0 → 1.0.0

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.
Files changed (24) hide show
  1. package/esm/manager/brand_title.d.ts +1 -1
  2. package/esm/manager/brand_title.js +1 -1
  3. package/esm/parameters/define_docs_param.d.ts +10 -1
  4. package/esm/storybook-addon-tag-badges/tag_badges.d.ts +4 -0
  5. package/esm/storybook-addon-tag-badges/tag_badges.js +60 -30
  6. package/esm/storybook-addon-tag-badges/types.d.ts +6 -2
  7. package/esm/storybook-dark-mode/dark_mode_docs_container.d.ts +3 -3
  8. package/esm/storybook-dark-mode/dark_mode_docs_container.js +4 -4
  9. package/esm/storybook-dark-mode/define_dark_mode.d.ts +2 -2
  10. package/esm/storybook-dark-mode/define_dark_mode.js +1 -1
  11. package/esm/storybook-dark-mode/with_dark_mode.js +1 -1
  12. package/esm/testing/decorators/when_running_in_test.d.ts +1 -1
  13. package/package.json +12 -25
  14. package/readme.md +10 -4
  15. package/src/manager/brand_title.ts +1 -1
  16. package/src/overview.mdx +2 -2
  17. package/src/parameters/define_docs_param.ts +10 -1
  18. package/src/storybook-addon-tag-badges/tag_badges.ts +79 -30
  19. package/src/storybook-addon-tag-badges/types.ts +7 -20
  20. package/src/storybook-dark-mode/dark_mode_docs_container.mdx +3 -3
  21. package/src/storybook-dark-mode/dark_mode_docs_container.tsx +4 -4
  22. package/src/storybook-dark-mode/define_dark_mode.ts +2 -2
  23. package/src/storybook-dark-mode/with_dark_mode.tsx +1 -1
  24. package/src/testing/decorators/when_running_in_test.tsx +1 -1
package/esm/manager/brand_title.d.ts CHANGED
@@ -22,7 +22,7 @@ export interface BrandTitleOptions {
22
22
  *
23
23
  * ```ts
24
24
  * import { brandTitle } from '@repobuddy/storybook'
25
- * import { addons } from '@storybook/manager-api'
25
+ * import { addons } from 'storybook/manager-api'
26
26
  *
27
27
  * addons.setConfig({
28
28
  * brandTitle: brandTitle({
package/esm/manager/brand_title.js CHANGED
@@ -10,7 +10,7 @@
10
10
  *
11
11
  * ```ts
12
12
  * import { brandTitle } from '@repobuddy/storybook'
13
- * import { addons } from '@storybook/manager-api'
13
+ * import { addons } from 'storybook/manager-api'
14
14
  *
15
15
  * addons.setConfig({
16
16
  * brandTitle: brandTitle({
package/esm/parameters/define_docs_param.d.ts CHANGED
@@ -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
  /**
package/esm/storybook-addon-tag-badges/tag_badges.d.ts CHANGED
@@ -1,5 +1,9 @@
1
1
  import { type TagBadgeParameters } from 'storybook-addon-tag-badges';
2
2
  type TagBadgeParameter = TagBadgeParameters[0];
3
+ /**
4
+ * Type representing the names of predefined tags used in Storybook stories.
5
+ */
6
+ export type TagNames = 'editor' | 'new' | 'beta' | 'props' | 'deprecated' | 'outdated' | 'danger' | 'todo' | 'code-only' | 'snapshot' | 'unit' | 'integration' | 'keyboard' | 'internal';
3
7
  /**
4
8
  * Configuration for story tag badges that appear in the Storybook sidebar.
5
9
  * Each badge is associated with a specific tag and displays an emoji with a tooltip.
package/esm/storybook-addon-tag-badges/tag_badges.js CHANGED
@@ -23,21 +23,27 @@ export const editorBadge = {
23
23
  tags: 'editor',
24
24
  badge: {
25
25
  text: '✏️',
26
- bgColor: 'transparent',
27
- borderColor: 'transparent',
26
+ style: {
27
+ backgroundColor: 'transparent',
28
+ borderColor: 'transparent'
29
+ },
28
30
  tooltip: 'Editor'
29
31
  },
30
32
  display: {
31
- sidebar: ['story'],
32
- toolbar: ['story']
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
- bgColor: 'transparent',
40
- borderColor: 'transparent',
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
- bgColor: 'transparent',
49
- borderColor: 'transparent',
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
- bgColor: 'transparent',
58
- borderColor: 'transparent',
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
- bgColor: 'transparent',
67
- borderColor: 'transparent',
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
- bgColor: 'transparent',
76
- borderColor: 'transparent',
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
- bgColor: 'transparent',
85
- borderColor: 'transparent',
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
- bgColor: 'transparent',
94
- borderColor: 'transparent',
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
- bgColor: 'transparent',
103
- borderColor: 'transparent',
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
- bgColor: 'transparent',
112
- borderColor: 'transparent',
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
- bgColor: 'transparent',
125
- borderColor: 'transparent',
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
- bgColor: 'transparent',
137
- borderColor: 'transparent',
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
- bgColor: 'transparent',
149
- borderColor: 'transparent',
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
- bgColor: 'transparent',
158
- borderColor: 'transparent',
185
+ style: {
186
+ backgroundColor: 'transparent',
187
+ borderColor: 'transparent'
188
+ },
159
189
  tooltip: 'Internal'
160
190
  }
161
191
  };
package/esm/storybook-addon-tag-badges/types.d.ts CHANGED
@@ -1,4 +1,8 @@
1
- import type { Args, StoryObj as SBO } from '@storybook/react';
1
+ import type { Args, Meta as M, StoryObj as SBO } from '@storybook/react-vite';
2
+ import type { TagNames } from './tag_badges.ts';
3
+ export type Meta<TCmpOrArgs = Args> = Omit<M<TCmpOrArgs>, 'tags'> & {
4
+ tags?: Array<TagNames | (string & {})> | undefined;
5
+ };
2
6
  export type StoryObj<TMetaOrCmpOrArgs = Args> = Omit<SBO<TMetaOrCmpOrArgs>, 'tags'> & {
3
- tags?: Array<'editor' | 'new' | 'beta' | 'props' | 'deprecated' | 'outdated' | 'danger' | 'todo' | 'code-only' | 'snapshot' | 'unit' | 'integration' | 'keyboard' | 'internal' | (string & {})> | undefined;
7
+ tags?: Array<TagNames | (string & {})> | undefined;
4
8
  };
package/esm/storybook-dark-mode/dark_mode_docs_container.d.ts CHANGED
@@ -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-mode`.
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
  *
package/esm/storybook-dark-mode/dark_mode_docs_container.js CHANGED
@@ -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-mode';
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-mode`.
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
  *
package/esm/storybook-dark-mode/define_dark_mode.d.ts CHANGED
@@ -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-mode`.
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-mode` parameters for Storybook stories.
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
package/esm/storybook-dark-mode/define_dark_mode.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Defines `storybook-dark-mode` parameters for Storybook stories.
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
package/esm/storybook-dark-mode/with_dark_mode.js CHANGED
@@ -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-mode';
3
+ import { useDarkMode } from 'storybook-dark-mode2';
4
4
  /**
5
5
  * Applies additional dark mode behavior.
6
6
  *
package/esm/testing/decorators/when_running_in_test.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { Decorator, StrictArgs } from '@storybook/react';
1
+ import type { Decorator, StrictArgs } from '@storybook/react-vite';
2
2
  /**
3
3
  * executes the specified decorator or handler if the code is running in test.
4
4
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@repobuddy/storybook",
3
- "version": "0.16.0",
3
+ "version": "1.0.0",
4
4
  "description": "Storybook repo buddy",
5
5
  "keywords": [
6
6
  "storybook",
@@ -48,14 +48,10 @@
48
48
  },
49
49
  "devDependencies": {
50
50
  "@repobuddy/vitest": "^1.2.2",
51
- "@storybook/addon-essentials": "^8.6.12",
52
- "@storybook/addon-storysource": "^8.6.12",
53
- "@storybook/blocks": "^8.6.12",
54
- "@storybook/experimental-addon-test": "^8.6.12",
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",
@@ -64,32 +60,23 @@
64
60
  "react": "^19.1.0",
65
61
  "react-dom": "^19.1.0",
66
62
  "rimraf": "^6.0.1",
67
- "storybook": "^8.6.12",
68
- "storybook-addon-tag-badges": "^1.4.0",
69
- "storybook-addon-vis": "^1.0.0",
70
- "storybook-dark-mode": "^4.0.2",
63
+ "storybook": "^9.0.1",
64
+ "storybook-addon-tag-badges": "^2.0.0",
65
+ "storybook-addon-vis": "^1.1.0",
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
- "@storybook/blocks": ">= 8.6.12",
78
- "@storybook/theming": ">= 8.6.12",
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-mode": {
79
+ "storybook-dark-mode2": {
93
80
  "optional": true
94
81
  }
95
82
  },
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-mode`
105
+ ### `storybook-dark-mode2`
100
106
 
101
- [`@repobuddy/storybook`][`@repobuddy/storybook`] provides a few utilities to work with [`storybook-dark-mode`][`storybook-dark-mode`].
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: 'dark:bg-black dark:text-white'
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-mode`]: https://github.com/hipstersmoothie/storybook-dark-mode
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
package/src/manager/brand_title.ts CHANGED
@@ -23,7 +23,7 @@ export interface BrandTitleOptions {
23
23
  *
24
24
  * ```ts
25
25
  * import { brandTitle } from '@repobuddy/storybook'
26
- * import { addons } from '@storybook/manager-api'
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
 
package/src/parameters/define_docs_param.ts CHANGED
@@ -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
  | {
package/src/storybook-addon-tag-badges/tag_badges.ts CHANGED
@@ -4,6 +4,25 @@ const [, , , , , , versionBadge] = defaultConfig
4
4
 
5
5
  type TagBadgeParameter = TagBadgeParameters[0]
6
6
 
7
+ /**
8
+ * Type representing the names of predefined tags used in Storybook stories.
9
+ */
10
+ export type TagNames =
11
+ | 'editor'
12
+ | 'new'
13
+ | 'beta'
14
+ | 'props'
15
+ | 'deprecated'
16
+ | 'outdated'
17
+ | 'danger'
18
+ | 'todo'
19
+ | 'code-only'
20
+ | 'snapshot'
21
+ | 'unit'
22
+ | 'integration'
23
+ | 'keyboard'
24
+ | 'internal'
25
+
7
26
  /**
8
27
  * Configuration for story tag badges that appear in the Storybook sidebar.
9
28
  * Each badge is associated with a specific tag and displays an emoji with a tooltip.
@@ -27,13 +46,17 @@ export const editorBadge: TagBadgeParameter = {
27
46
  tags: 'editor',
28
47
  badge: {
29
48
  text: '✏️',
30
- bgColor: 'transparent',
31
- borderColor: 'transparent',
49
+ style: {
50
+ backgroundColor: 'transparent',
51
+ borderColor: 'transparent'
52
+ },
32
53
  tooltip: 'Editor'
33
54
  },
34
55
  display: {
35
- sidebar: ['story'],
36
- toolbar: ['story']
56
+ sidebar: {
57
+ type: 'story',
58
+ skipInherited: false
59
+ }
37
60
  }
38
61
  }
39
62
 
@@ -41,8 +64,10 @@ export const newBadge: TagBadgeParameter = {
41
64
  tags: 'new',
42
65
  badge: {
43
66
  text: '🆕',
44
- bgColor: 'transparent',
45
- borderColor: 'transparent',
67
+ style: {
68
+ backgroundColor: 'transparent',
69
+ borderColor: 'transparent'
70
+ },
46
71
  tooltip: 'New'
47
72
  }
48
73
  }
@@ -51,8 +76,10 @@ export const betaBadge: TagBadgeParameter = {
51
76
  tags: 'beta',
52
77
  badge: {
53
78
  text: '🅱️',
54
- bgColor: 'transparent',
55
- borderColor: 'transparent',
79
+ style: {
80
+ backgroundColor: 'transparent',
81
+ borderColor: 'transparent'
82
+ },
56
83
  tooltip: 'Beta'
57
84
  }
58
85
  }
@@ -61,8 +88,10 @@ export const propsBadge: TagBadgeParameter = {
61
88
  tags: 'props',
62
89
  badge: {
63
90
  text: '🔧',
64
- bgColor: 'transparent',
65
- borderColor: 'transparent',
91
+ style: {
92
+ backgroundColor: 'transparent',
93
+ borderColor: 'transparent'
94
+ },
66
95
  tooltip: 'Props'
67
96
  }
68
97
  }
@@ -71,8 +100,10 @@ export const deprecatedBadge: TagBadgeParameter = {
71
100
  tags: 'deprecated',
72
101
  badge: {
73
102
  text: '🪦',
74
- bgColor: 'transparent',
75
- borderColor: 'transparent',
103
+ style: {
104
+ backgroundColor: 'transparent',
105
+ borderColor: 'transparent'
106
+ },
76
107
  tooltip: 'Deprecated'
77
108
  }
78
109
  }
@@ -81,8 +112,10 @@ export const outdatedBadge: TagBadgeParameter = {
81
112
  tags: 'outdated',
82
113
  badge: {
83
114
  text: '⚠️',
84
- bgColor: 'transparent',
85
- borderColor: 'transparent',
115
+ style: {
116
+ backgroundColor: 'transparent',
117
+ borderColor: 'transparent'
118
+ },
86
119
  tooltip: 'Outdated'
87
120
  }
88
121
  }
@@ -91,8 +124,10 @@ export const dangerBadge: TagBadgeParameter = {
91
124
  tags: 'danger',
92
125
  badge: {
93
126
  text: '🚨',
94
- bgColor: 'transparent',
95
- borderColor: 'transparent',
127
+ style: {
128
+ backgroundColor: 'transparent',
129
+ borderColor: 'transparent'
130
+ },
96
131
  tooltip: 'Dangerous'
97
132
  }
98
133
  }
@@ -101,8 +136,10 @@ export const todoBadge: TagBadgeParameter = {
101
136
  tags: 'todo',
102
137
  badge: {
103
138
  text: '📋',
104
- bgColor: 'transparent',
105
- borderColor: 'transparent',
139
+ style: {
140
+ backgroundColor: 'transparent',
141
+ borderColor: 'transparent'
142
+ },
106
143
  tooltip: 'Todo'
107
144
  }
108
145
  }
@@ -111,8 +148,10 @@ export const codeOnlyBadge: TagBadgeParameter = {
111
148
  tags: 'code-only',
112
149
  badge: {
113
150
  text: '📝',
114
- bgColor: 'transparent',
115
- borderColor: 'transparent',
151
+ style: {
152
+ backgroundColor: 'transparent',
153
+ borderColor: 'transparent'
154
+ },
116
155
  tooltip: 'Code Only'
117
156
  }
118
157
  }
@@ -121,8 +160,10 @@ export const snapshotBadge: TagBadgeParameter = {
121
160
  tags: 'snapshot',
122
161
  badge: {
123
162
  text: '📸',
124
- bgColor: 'transparent',
125
- borderColor: 'transparent',
163
+ style: {
164
+ backgroundColor: 'transparent',
165
+ borderColor: 'transparent'
166
+ },
126
167
  tooltip: 'Snapshot Test'
127
168
  },
128
169
  display: {
@@ -135,8 +176,10 @@ export const unitBadge: TagBadgeParameter = {
135
176
  tags: 'unit',
136
177
  badge: {
137
178
  text: '🧪',
138
- bgColor: 'transparent',
139
- borderColor: 'transparent',
179
+ style: {
180
+ backgroundColor: 'transparent',
181
+ borderColor: 'transparent'
182
+ },
140
183
  tooltip: 'Unit Test'
141
184
  },
142
185
  display: {
@@ -148,8 +191,10 @@ export const integrationBadge: TagBadgeParameter = {
148
191
  tags: 'integration',
149
192
  badge: {
150
193
  text: '🔗',
151
- bgColor: 'transparent',
152
- borderColor: 'transparent',
194
+ style: {
195
+ backgroundColor: 'transparent',
196
+ borderColor: 'transparent'
197
+ },
153
198
  tooltip: 'Integration Test'
154
199
  },
155
200
  display: {
@@ -161,8 +206,10 @@ export const keyboardBadge: TagBadgeParameter = {
161
206
  tags: 'keyboard',
162
207
  badge: {
163
208
  text: '⌨️',
164
- bgColor: 'transparent',
165
- borderColor: 'transparent',
209
+ style: {
210
+ backgroundColor: 'transparent',
211
+ borderColor: 'transparent'
212
+ },
166
213
  tooltip: 'Keyboard Interaction'
167
214
  }
168
215
  }
@@ -171,8 +218,10 @@ export const internalBadge: TagBadgeParameter = {
171
218
  tags: 'internal',
172
219
  badge: {
173
220
  text: '🔒',
174
- bgColor: 'transparent',
175
- borderColor: 'transparent',
221
+ style: {
222
+ backgroundColor: 'transparent',
223
+ borderColor: 'transparent'
224
+ },
176
225
  tooltip: 'Internal'
177
226
  }
178
227
  }
package/src/storybook-addon-tag-badges/types.ts CHANGED
@@ -1,23 +1,10 @@
1
- import type { Args, StoryObj as SBO } from '@storybook/react'
1
+ import type { Args, Meta as M, StoryObj as SBO } from '@storybook/react-vite'
2
+ import type { TagNames } from './tag_badges.ts'
3
+
4
+ export type Meta<TCmpOrArgs = Args> = Omit<M<TCmpOrArgs>, 'tags'> & {
5
+ tags?: Array<TagNames | (string & {})> | undefined
6
+ }
2
7
 
3
8
  export type StoryObj<TMetaOrCmpOrArgs = Args> = Omit<SBO<TMetaOrCmpOrArgs>, 'tags'> & {
4
- tags?:
5
- | Array<
6
- | 'editor'
7
- | 'new'
8
- | 'beta'
9
- | 'props'
10
- | 'deprecated'
11
- | 'outdated'
12
- | 'danger'
13
- | 'todo'
14
- | 'code-only'
15
- | 'snapshot'
16
- | 'unit'
17
- | 'integration'
18
- | 'keyboard'
19
- | 'internal'
20
- | (string & {})
21
- >
22
- | undefined
9
+ tags?: Array<TagNames | (string & {})> | undefined
23
10
  }
package/src/storybook-dark-mode/dark_mode_docs_container.mdx CHANGED
@@ -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-mode`.
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 `@storybook/theming`.
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
package/src/storybook-dark-mode/dark_mode_docs_container.tsx CHANGED
@@ -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-mode'
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-mode`.
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
  *
package/src/storybook-dark-mode/define_dark_mode.ts CHANGED
@@ -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-mode`.
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-mode` parameters for Storybook stories.
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
package/src/storybook-dark-mode/with_dark_mode.tsx CHANGED
@@ -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-mode'
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
 
package/src/testing/decorators/when_running_in_test.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import type { Decorator, StrictArgs } from '@storybook/react'
1
+ import type { Decorator, StrictArgs } from '@storybook/react-vite'
2
2
  import { ctx } from './when_running_in_text.ctx.ts'
3
3
 
4
4
  /**