@repobuddy/storybook 2.18.1 → 2.19.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/index.d.ts CHANGED
@@ -18,7 +18,7 @@ export * from "@repobuddy/test";
18
18
  * type R = FnToArgTypes<F, ['x', 'y']> // { x: number; y: string }
19
19
  */
20
20
  type FnToArgTypes<F extends AnyFunction, Names extends CreateTuple<Parameters<F>['length'], string> = CreateTuple<Parameters<F>['length'], string>> = Properties<ReduceToRecord<Parameters<F>, Names>>;
21
- type ReduceToRecord<Params extends Array<any>, Names extends Array<any>> = Names['length'] extends 0 ? unknown : Names['length'] extends 1 ? Names extends [infer K extends string] ? { [I in K]: Params[0] } : never : Names extends [infer K extends string, ...infer Rest] ? { [I in K]: Params[0] } & ReduceToRecord<Tail<Params>, Rest> : never;
21
+ type ReduceToRecord<Params extends Array<any>, Names extends Array<any>> = Names['length'] extends 0 ? unknown : Names['length'] extends 1 ? Names extends [infer K extends string] ? { [I in K]: Params[0] } : never : Names extends [infer K extends string, ...infer Rest] ? { [I in K]: Params[0] } & ReduceToRecord<Tail<Params>, Rest> : Record<string, any>;
22
22
  //#endregion
23
23
  //#region src/components/show_html.d.ts
24
24
  type ShowHtmlProps = ClassNameProps & StyleProps & {
@@ -840,12 +840,12 @@ type ExtractStringLiterals<T> = T extends any ? (string extends T ? never : T) :
840
840
  * // Create a generic Meta type for your project
841
841
  * type Meta<TCmpOrArgs = Args> = ExtendsMeta<
842
842
  * M<TCmpOrArgs>,
843
- * { tag: 'new' | 'beta' | 'deprecated' }
843
+ * { tag: 'new' | 'beta' | 'deprecated' | 'remove:next' }
844
844
  * >
845
845
  *
846
846
  * // Use in component stories
847
847
  * const meta: Meta<typeof Component> = {
848
- * tags: ['new'], // <--- gets auto-completion for 'new' | 'beta' | 'deprecated'
848
+ * tags: ['new'], // <--- gets auto-completion for 'new' | 'beta' | 'deprecated' | 'remove:next'
849
849
  * // ...
850
850
  * }
851
851
  * ```
@@ -876,12 +876,12 @@ type ExtendsMeta<M extends {
876
876
  * // Create a generic StoryObj type for your project
877
877
  * type StoryObj<TCmpOrArgs = Args> = ExtendsStoryObj<
878
878
  * S<TCmpOrArgs>,
879
- * { tag: 'new' | 'beta' | 'deprecated' }
879
+ * { tag: 'new' | 'beta' | 'deprecated' | 'remove:next' }
880
880
  * >
881
881
  *
882
882
  * // Use in component stories
883
883
  * const story: StoryObj<typeof Component> = {
884
- * tags: ['new'], // <--- gets auto-completion for 'new' | 'beta' | 'deprecated'
884
+ * tags: ['new'], // <--- gets auto-completion for 'new' | 'beta' | 'deprecated' | 'remove:next'
885
885
  * // ...
886
886
  * }
887
887
  * ```
@@ -8,17 +8,23 @@ type TagBadgeParameter = TagBadgeParameters[0];
8
8
  /**
9
9
  * Type representing the names of predefined tags used in Storybook stories.
10
10
  */
11
- type TagNames = '!test' | 'editor' | 'source' | 'type' | '!type' | 'func' | '!func' | 'var' | '!var' | 'new' | 'beta' | 'props' | 'deprecated' | 'outdated' | 'danger' | 'todo' | 'code-only' | 'snapshot' | '!snapshot' | 'unit' | 'integration' | 'keyboard' | 'internal' | 'usecase' | 'use-case' | 'version:next';
11
+ type TagNames = '!test' | 'editor' | 'source' | 'type' | '!type' | 'func' | '!func' | 'var' | '!var' | 'new' | 'alpha' | 'beta' | 'rc' | 'props' | 'deprecated' | 'outdated' | 'danger' | 'todo' | 'code-only' | 'snapshot' | '!snapshot' | 'unit' | 'integration' | 'keyboard' | 'internal' | 'usecase' | 'use-case' | 'example' | 'version:next' | 'remove' | 'remove:next' | 'autodocs';
12
12
  /** Badge (✏️) for stories with a live editor. Shown in sidebar on story and inherited. */
13
13
  declare const editorBadge: TagBadgeParameter;
14
14
  /** Badge (🆕) for recently added stories. */
15
15
  declare const newBadge: TagBadgeParameter;
16
- /** Badge (🌱) for stories covering features in beta. */
16
+ /** Badge (🔴) for stories covering features in alpha. */
17
+ declare const alphaBadge: TagBadgeParameter;
18
+ /** Badge (🟡) for stories covering features in beta. */
17
19
  declare const betaBadge: TagBadgeParameter;
20
+ /** Badge (🔵) for stories covering release candidates. */
21
+ declare const rcBadge: TagBadgeParameter;
18
22
  /** Badge (🔧) for stories that demonstrate props or configuration. */
19
23
  declare const propsBadge: TagBadgeParameter;
20
- /** Badge (🪦) for stories documenting deprecated features. */
24
+ /** Badge (🗑️) for stories documenting deprecated features. */
21
25
  declare const deprecatedBadge: TagBadgeParameter;
26
+ /** Badge (☠️) for stories documenting features scheduled for removal in a future version. Matches `remove`, `remove:next` (same meaning), or `remove:<version>` (e.g. `remove:2`). */
27
+ declare const removeBadge: TagBadgeParameter;
22
28
  /** Badge (⚠️) for stories that need updating. */
23
29
  declare const outdatedBadge: TagBadgeParameter;
24
30
  /** Badge (🚨) for stories demonstrating dangerous or cautionary patterns. */
@@ -47,20 +53,26 @@ declare const keyboardBadge: TagBadgeParameter;
47
53
  declare const internalBadge: TagBadgeParameter;
48
54
  /** Badge (🎯) for stories that demonstrate a specific use case or scenario. */
49
55
  declare const useCaseBadge: TagBadgeParameter;
56
+ /** Badge (✨) for example or demo stories. */
57
+ declare const exampleBadge: TagBadgeParameter;
50
58
  /**
51
59
  * Configuration for story tag badges that appear in the Storybook sidebar.
52
60
  * Each badge is associated with a specific tag and displays an emoji or symbol with a tooltip.
53
61
  *
54
- * Badge order (first match wins): New → Beta → Deprecated → Outdated → Danger → Use Case →
55
- * Keyboard → Source → Type → Function → Var → Props → Todo → Unit → Integration → Editor →
56
- * Code Only → Version → Internal → Snapshot.
62
+ * Badge order (first match wins): New → Alpha → Beta → RC → Deprecated → Remove → Outdated → Danger → Use Case →
63
+ * Example → Keyboard → Source → Type → Function → Var → Props → Todo → Unit → Integration →
64
+ * Editor → Code Only → Version → Internal → Snapshot.
57
65
  *
58
66
  * - 🆕 New - Recently added stories
59
- * - 🌱 Beta - Stories for features in beta
60
- * - 🪦 Deprecated - Stories for deprecated features
67
+ * - 🔴 Alpha - Stories for features in alpha
68
+ * - 🟡 Beta - Stories for features in beta
69
+ * - 🔵 RC - Release candidate
70
+ * - 🗑️ Deprecated - Stories for deprecated features
71
+ * - ☠️ Remove - (`remove` or `remove:next` = next release; `remove:<version>` = specific version) The feature or component will be removed in the specified version
61
72
  * - ⚠️ Outdated - Stories that need updating
62
73
  * - 🚨 Danger - Stories demonstrating dangerous patterns
63
74
  * - 🎯 Use Case - Stories that demonstrate a specific use case or scenario
75
+ * - ✨ Example - Example or demo stories
64
76
  * - ⌨️ Keyboard - Stories that demonstrate or test keyboard interaction
65
77
  * - `</>` Source - Source-code-focused stories
66
78
  * - `<T>` Type - Stories that showcase or document TypeScript types
@@ -100,12 +112,12 @@ type ExtractStringLiterals<T> = T extends any ? (string extends T ? never : T) :
100
112
  * // Create a generic Meta type for your project
101
113
  * type Meta<TCmpOrArgs = Args> = ExtendsMeta<
102
114
  * M<TCmpOrArgs>,
103
- * { tag: 'new' | 'beta' | 'deprecated' }
115
+ * { tag: 'new' | 'beta' | 'deprecated' | 'remove:next' }
104
116
  * >
105
117
  *
106
118
  * // Use in component stories
107
119
  * const meta: Meta<typeof Component> = {
108
- * tags: ['new'], // <--- gets auto-completion for 'new' | 'beta' | 'deprecated'
120
+ * tags: ['new'], // <--- gets auto-completion for 'new' | 'beta' | 'deprecated' | 'remove:next'
109
121
  * // ...
110
122
  * }
111
123
  * ```
@@ -150,4 +162,4 @@ type StoryObj<TMetaOrCmpOrArgs = Args> = ExtendStoryObj<TMetaOrCmpOrArgs, StoryO
150
162
  tag: TagNames;
151
163
  }>;
152
164
  //#endregion
153
- export { Meta, StoryObj, TagNames, betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, functionBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, propsBadge, snapshotBadge, sourceBadge, tagBadges, todoBadge, typeBadge, unitBadge, useCaseBadge, varBadge };
165
+ export { Meta, StoryObj, TagNames, alphaBadge, betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, exampleBadge, functionBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, propsBadge, rcBadge, removeBadge, snapshotBadge, sourceBadge, tagBadges, todoBadge, typeBadge, unitBadge, useCaseBadge, varBadge };
@@ -31,11 +31,23 @@ const newBadge = {
31
31
  tooltip: "New"
32
32
  }
33
33
  };
34
- /** Badge (🌱) for stories covering features in beta. */
34
+ /** Badge (🔴) for stories covering features in alpha. */
35
+ const alphaBadge = {
36
+ tags: "alpha",
37
+ badge: {
38
+ text: "🔴",
39
+ style: {
40
+ backgroundColor: "transparent",
41
+ borderColor: "transparent"
42
+ },
43
+ tooltip: "Alpha"
44
+ }
45
+ };
46
+ /** Badge (🟡) for stories covering features in beta. */
35
47
  const betaBadge = {
36
48
  tags: "beta",
37
49
  badge: {
38
- text: "🌱",
50
+ text: "🟡",
39
51
  style: {
40
52
  backgroundColor: "transparent",
41
53
  borderColor: "transparent"
@@ -43,6 +55,18 @@ const betaBadge = {
43
55
  tooltip: "Beta"
44
56
  }
45
57
  };
58
+ /** Badge (🔵) for stories covering release candidates. */
59
+ const rcBadge = {
60
+ tags: "rc",
61
+ badge: {
62
+ text: "🔵",
63
+ style: {
64
+ backgroundColor: "transparent",
65
+ borderColor: "transparent"
66
+ },
67
+ tooltip: "Release Candidate"
68
+ }
69
+ };
46
70
  /** Badge (🔧) for stories that demonstrate props or configuration. */
47
71
  const propsBadge = {
48
72
  tags: "props",
@@ -55,11 +79,11 @@ const propsBadge = {
55
79
  tooltip: "Props"
56
80
  }
57
81
  };
58
- /** Badge (🪦) for stories documenting deprecated features. */
82
+ /** Badge (🗑️) for stories documenting deprecated features. */
59
83
  const deprecatedBadge = {
60
84
  tags: "deprecated",
61
85
  badge: {
62
- text: "🪦",
86
+ text: "🗑️",
63
87
  style: {
64
88
  backgroundColor: "transparent",
65
89
  borderColor: "transparent"
@@ -67,6 +91,21 @@ const deprecatedBadge = {
67
91
  tooltip: "Deprecated"
68
92
  }
69
93
  };
94
+ /** Badge (☠️) for stories documenting features scheduled for removal in a future version. Matches `remove`, `remove:next` (same meaning), or `remove:<version>` (e.g. `remove:2`). */
95
+ const removeBadge = {
96
+ tags: ["remove", { prefix: "remove" }],
97
+ badge: ({ getTagSuffix, tag }) => {
98
+ const version = getTagSuffix(tag) ?? "next";
99
+ return {
100
+ text: version === "next" ? "☠️" : `☠️ v${version}`,
101
+ style: {
102
+ backgroundColor: "transparent",
103
+ borderColor: "transparent"
104
+ },
105
+ tooltip: version === "next" ? "Will be removed in the next major release" : `Will be removed in version ${version}`
106
+ };
107
+ }
108
+ };
70
109
  /** Badge (⚠️) for stories that need updating. */
71
110
  const outdatedBadge = {
72
111
  tags: "outdated",
@@ -246,20 +285,36 @@ const useCaseBadge = {
246
285
  tooltip: "Use Case"
247
286
  }
248
287
  };
288
+ /** Badge (✨) for example or demo stories. */
289
+ const exampleBadge = {
290
+ tags: "example",
291
+ badge: {
292
+ text: "✨",
293
+ style: {
294
+ backgroundColor: "transparent",
295
+ borderColor: "transparent"
296
+ },
297
+ tooltip: "Example"
298
+ }
299
+ };
249
300
  /**
250
301
  * Configuration for story tag badges that appear in the Storybook sidebar.
251
302
  * Each badge is associated with a specific tag and displays an emoji or symbol with a tooltip.
252
303
  *
253
- * Badge order (first match wins): New → Beta → Deprecated → Outdated → Danger → Use Case →
254
- * Keyboard → Source → Type → Function → Var → Props → Todo → Unit → Integration → Editor →
255
- * Code Only → Version → Internal → Snapshot.
304
+ * Badge order (first match wins): New → Alpha → Beta → RC → Deprecated → Remove → Outdated → Danger → Use Case →
305
+ * Example → Keyboard → Source → Type → Function → Var → Props → Todo → Unit → Integration →
306
+ * Editor → Code Only → Version → Internal → Snapshot.
256
307
  *
257
308
  * - 🆕 New - Recently added stories
258
- * - 🌱 Beta - Stories for features in beta
259
- * - 🪦 Deprecated - Stories for deprecated features
309
+ * - 🔴 Alpha - Stories for features in alpha
310
+ * - 🟡 Beta - Stories for features in beta
311
+ * - 🔵 RC - Release candidate
312
+ * - 🗑️ Deprecated - Stories for deprecated features
313
+ * - ☠️ Remove - (`remove` or `remove:next` = next release; `remove:<version>` = specific version) The feature or component will be removed in the specified version
260
314
  * - ⚠️ Outdated - Stories that need updating
261
315
  * - 🚨 Danger - Stories demonstrating dangerous patterns
262
316
  * - 🎯 Use Case - Stories that demonstrate a specific use case or scenario
317
+ * - ✨ Example - Example or demo stories
263
318
  * - ⌨️ Keyboard - Stories that demonstrate or test keyboard interaction
264
319
  * - `</>` Source - Source-code-focused stories
265
320
  * - `<T>` Type - Stories that showcase or document TypeScript types
@@ -278,11 +333,15 @@ const useCaseBadge = {
278
333
  */
279
334
  const tagBadges = [
280
335
  newBadge,
336
+ alphaBadge,
281
337
  betaBadge,
338
+ rcBadge,
282
339
  deprecatedBadge,
340
+ removeBadge,
283
341
  outdatedBadge,
284
342
  dangerBadge,
285
343
  useCaseBadge,
344
+ exampleBadge,
286
345
  keyboardBadge,
287
346
  sourceBadge,
288
347
  typeBadge,
@@ -300,4 +359,4 @@ const tagBadges = [
300
359
  ];
301
360
 
302
361
  //#endregion
303
- export { betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, functionBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, propsBadge, snapshotBadge, sourceBadge, tagBadges, todoBadge, typeBadge, unitBadge, useCaseBadge, varBadge };
362
+ export { alphaBadge, betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, exampleBadge, functionBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, propsBadge, rcBadge, removeBadge, snapshotBadge, sourceBadge, tagBadges, todoBadge, typeBadge, unitBadge, useCaseBadge, varBadge };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@repobuddy/storybook",
3
- "version": "2.18.1",
3
+ "version": "2.19.1",
4
4
  "description": "Storybook repo buddy",
5
5
  "keywords": [
6
6
  "storybook",
@@ -24,7 +24,10 @@
24
24
  },
25
25
  "exports": {
26
26
  ".": {
27
- "types": "./esm/index.d.ts",
27
+ "types": [
28
+ "./esm/index.d.ts",
29
+ "./src/index.ts"
30
+ ],
28
31
  "default": "./esm/index.js"
29
32
  },
30
33
  "./manager": {
@@ -32,11 +35,17 @@
32
35
  "default": "./esm/manager/index.js"
33
36
  },
34
37
  "./storybook-addon-tag-badges": {
35
- "types": "./esm/storybook-addon-tag-badges/index.d.ts",
38
+ "types": [
39
+ "./esm/storybook-addon-tag-badges/index.d.ts",
40
+ "./src/storybook-addon-tag-badges/index.ts"
41
+ ],
36
42
  "default": "./esm/storybook-addon-tag-badges/index.js"
37
43
  },
38
44
  "./storybook-dark-mode": {
39
- "types": "./esm/storybook-dark-mode/index.d.ts",
45
+ "types": [
46
+ "./esm/storybook-dark-mode/index.d.ts",
47
+ "./src/storybook-dark-mode/index.ts"
48
+ ],
40
49
  "default": "./esm/storybook-dark-mode/index.js"
41
50
  },
42
51
  "./tailwind": {
@@ -65,11 +74,11 @@
65
74
  "type-plus": "8.0.0-beta.8"
66
75
  },
67
76
  "devDependencies": {
68
- "@repobuddy/vitest": "^2.0.0",
69
- "@storybook-community/storybook-dark-mode": "^7.0.2",
70
- "@storybook/addon-docs": "^10.2.4",
71
- "@storybook/addon-vitest": "^10.1.10",
72
- "@storybook/react-vite": "^10.2.4",
77
+ "@repobuddy/vitest": "^2.1.1",
78
+ "@storybook-community/storybook-dark-mode": "^7.1.0",
79
+ "@storybook/addon-docs": "^10.2.8",
80
+ "@storybook/addon-vitest": "^10.2.8",
81
+ "@storybook/react-vite": "^10.2.8",
73
82
  "@tailwindcss/cli": "^4.1.17",
74
83
  "@tailwindcss/vite": "^4.1.17",
75
84
  "@vitest/browser": "^4.0.16",
@@ -80,8 +89,9 @@
80
89
  "react": "^19.2.0",
81
90
  "react-dom": "^19.2.0",
82
91
  "rimraf": "^6.1.0",
83
- "storybook": "^10.1.10",
84
- "storybook-addon-tag-badges": "^3.0.2",
92
+ "storybook": "^10.2.8",
93
+ "storybook-addon-code-editor": "^6.1.3",
94
+ "storybook-addon-tag-badges": "^3.0.6",
85
95
  "tailwindcss": "^4.1.17",
86
96
  "tsdown": "^0.20.0",
87
97
  "vite": "^7.3.0",
package/readme.md CHANGED
@@ -79,11 +79,15 @@ If you use [`storybook-addon-tag-badges`][`storybook-addon-tag-badges`],
79
79
  we provide a different set of badges that uses emojis (order: first match wins):
80
80
 
81
81
  - 🆕 `new` - Recently added stories
82
- - 🌱 `beta` - Features in beta
83
- - 🪦 `deprecated` - Deprecated features
82
+ - 🔴 `alpha` - Features in alpha
83
+ - 🟡 `beta` - Features in beta
84
+ - 🔵 `rc` - Release candidate
85
+ - 🗑️ `deprecated` - Deprecated features
86
+ - ☠️ `remove` or `remove:next` (same) or `remove:<version>` - Will be removed in the next or specified version
84
87
  - ⚠️ `outdated` - Stories that need updating
85
88
  - 🚨 `danger` - Dangerous or cautionary patterns
86
89
  - 🎯 `use-case` - Specific use case or scenario
90
+ - ✨ `example` - Example or demo stories
87
91
  - ⌨️ `keyboard` - Keyboard interaction
88
92
  - `</>` `source` - Source-code-focused stories
89
93
  - `<T>` `type` - TypeScript types (shown in MDX)
@@ -21,4 +21,4 @@ type ReduceToRecord<Params extends Array<any>, Names extends Array<any>> = Names
21
21
  : never
22
22
  : Names extends [infer K extends string, ...infer Rest]
23
23
  ? { [I in K]: Params[0] } & ReduceToRecord<Tail<Params>, Rest>
24
- : never
24
+ : Record<string, any>
@@ -18,7 +18,9 @@ export type TagNames =
18
18
  | 'var'
19
19
  | '!var'
20
20
  | 'new'
21
+ | 'alpha'
21
22
  | 'beta'
23
+ | 'rc'
22
24
  | 'props'
23
25
  | 'deprecated'
24
26
  | 'outdated'
@@ -33,7 +35,11 @@ export type TagNames =
33
35
  | 'internal'
34
36
  | 'usecase'
35
37
  | 'use-case'
38
+ | 'example'
36
39
  | 'version:next'
40
+ | 'remove'
41
+ | 'remove:next'
42
+ | 'autodocs'
37
43
 
38
44
  /** Badge (✏️) for stories with a live editor. Shown in sidebar on story and inherited. */
39
45
  export const editorBadge: TagBadgeParameter = {
@@ -67,11 +73,24 @@ export const newBadge: TagBadgeParameter = {
67
73
  }
68
74
  }
69
75
 
70
- /** Badge (🌱) for stories covering features in beta. */
76
+ /** Badge (🔴) for stories covering features in alpha. */
77
+ export const alphaBadge: TagBadgeParameter = {
78
+ tags: 'alpha',
79
+ badge: {
80
+ text: '🔴',
81
+ style: {
82
+ backgroundColor: 'transparent',
83
+ borderColor: 'transparent'
84
+ },
85
+ tooltip: 'Alpha'
86
+ }
87
+ }
88
+
89
+ /** Badge (🟡) for stories covering features in beta. */
71
90
  export const betaBadge: TagBadgeParameter = {
72
91
  tags: 'beta',
73
92
  badge: {
74
- text: '🌱',
93
+ text: '🟡',
75
94
  style: {
76
95
  backgroundColor: 'transparent',
77
96
  borderColor: 'transparent'
@@ -80,6 +99,19 @@ export const betaBadge: TagBadgeParameter = {
80
99
  }
81
100
  }
82
101
 
102
+ /** Badge (🔵) for stories covering release candidates. */
103
+ export const rcBadge: TagBadgeParameter = {
104
+ tags: 'rc',
105
+ badge: {
106
+ text: '🔵',
107
+ style: {
108
+ backgroundColor: 'transparent',
109
+ borderColor: 'transparent'
110
+ },
111
+ tooltip: 'Release Candidate'
112
+ }
113
+ }
114
+
83
115
  /** Badge (🔧) for stories that demonstrate props or configuration. */
84
116
  export const propsBadge: TagBadgeParameter = {
85
117
  tags: 'props',
@@ -93,11 +125,11 @@ export const propsBadge: TagBadgeParameter = {
93
125
  }
94
126
  }
95
127
 
96
- /** Badge (🪦) for stories documenting deprecated features. */
128
+ /** Badge (🗑️) for stories documenting deprecated features. */
97
129
  export const deprecatedBadge: TagBadgeParameter = {
98
130
  tags: 'deprecated',
99
131
  badge: {
100
- text: '🪦',
132
+ text: '🗑️',
101
133
  style: {
102
134
  backgroundColor: 'transparent',
103
135
  borderColor: 'transparent'
@@ -106,6 +138,23 @@ export const deprecatedBadge: TagBadgeParameter = {
106
138
  }
107
139
  }
108
140
 
141
+ /** Badge (☠️) for stories documenting features scheduled for removal in a future version. Matches `remove`, `remove:next` (same meaning), or `remove:<version>` (e.g. `remove:2`). */
142
+ export const removeBadge: TagBadgeParameter = {
143
+ tags: ['remove', { prefix: 'remove' }],
144
+ badge: ({ getTagSuffix, tag }) => {
145
+ const version = getTagSuffix(tag) ?? 'next'
146
+ return {
147
+ text: version === 'next' ? '☠️' : `☠️ v${version}`,
148
+ style: {
149
+ backgroundColor: 'transparent',
150
+ borderColor: 'transparent'
151
+ },
152
+ tooltip:
153
+ version === 'next' ? 'Will be removed in the next major release' : `Will be removed in version ${version}`
154
+ }
155
+ }
156
+ }
157
+
109
158
  /** Badge (⚠️) for stories that need updating. */
110
159
  export const outdatedBadge: TagBadgeParameter = {
111
160
  tags: 'outdated',
@@ -313,20 +362,37 @@ export const useCaseBadge: TagBadgeParameter = {
313
362
  }
314
363
  }
315
364
 
365
+ /** Badge (✨) for example or demo stories. */
366
+ export const exampleBadge: TagBadgeParameter = {
367
+ tags: 'example',
368
+ badge: {
369
+ text: '✨',
370
+ style: {
371
+ backgroundColor: 'transparent',
372
+ borderColor: 'transparent'
373
+ },
374
+ tooltip: 'Example'
375
+ }
376
+ }
377
+
316
378
  /**
317
379
  * Configuration for story tag badges that appear in the Storybook sidebar.
318
380
  * Each badge is associated with a specific tag and displays an emoji or symbol with a tooltip.
319
381
  *
320
- * Badge order (first match wins): New → Beta → Deprecated → Outdated → Danger → Use Case →
321
- * Keyboard → Source → Type → Function → Var → Props → Todo → Unit → Integration → Editor →
322
- * Code Only → Version → Internal → Snapshot.
382
+ * Badge order (first match wins): New → Alpha → Beta → RC → Deprecated → Remove → Outdated → Danger → Use Case →
383
+ * Example → Keyboard → Source → Type → Function → Var → Props → Todo → Unit → Integration →
384
+ * Editor → Code Only → Version → Internal → Snapshot.
323
385
  *
324
386
  * - 🆕 New - Recently added stories
325
- * - 🌱 Beta - Stories for features in beta
326
- * - 🪦 Deprecated - Stories for deprecated features
387
+ * - 🔴 Alpha - Stories for features in alpha
388
+ * - 🟡 Beta - Stories for features in beta
389
+ * - 🔵 RC - Release candidate
390
+ * - 🗑️ Deprecated - Stories for deprecated features
391
+ * - ☠️ Remove - (`remove` or `remove:next` = next release; `remove:<version>` = specific version) The feature or component will be removed in the specified version
327
392
  * - ⚠️ Outdated - Stories that need updating
328
393
  * - 🚨 Danger - Stories demonstrating dangerous patterns
329
394
  * - 🎯 Use Case - Stories that demonstrate a specific use case or scenario
395
+ * - ✨ Example - Example or demo stories
330
396
  * - ⌨️ Keyboard - Stories that demonstrate or test keyboard interaction
331
397
  * - `</>` Source - Source-code-focused stories
332
398
  * - `<T>` Type - Stories that showcase or document TypeScript types
@@ -345,11 +411,15 @@ export const useCaseBadge: TagBadgeParameter = {
345
411
  */
346
412
  export const tagBadges: TagBadgeParameters = [
347
413
  newBadge,
414
+ alphaBadge,
348
415
  betaBadge,
416
+ rcBadge,
349
417
  deprecatedBadge,
418
+ removeBadge,
350
419
  outdatedBadge,
351
420
  dangerBadge,
352
421
  useCaseBadge,
422
+ exampleBadge,
353
423
  keyboardBadge,
354
424
  sourceBadge,
355
425
  typeBadge,
@@ -18,12 +18,12 @@ import type { ExtractStringLiterals } from './_extract_string_literals.js'
18
18
  * // Create a generic Meta type for your project
19
19
  * type Meta<TCmpOrArgs = Args> = ExtendsMeta<
20
20
  * M<TCmpOrArgs>,
21
- * { tag: 'new' | 'beta' | 'deprecated' }
21
+ * { tag: 'new' | 'beta' | 'deprecated' | 'remove:next' }
22
22
  * >
23
23
  *
24
24
  * // Use in component stories
25
25
  * const meta: Meta<typeof Component> = {
26
- * tags: ['new'], // <--- gets auto-completion for 'new' | 'beta' | 'deprecated'
26
+ * tags: ['new'], // <--- gets auto-completion for 'new' | 'beta' | 'deprecated' | 'remove:next'
27
27
  * // ...
28
28
  * }
29
29
  * ```
@@ -18,12 +18,12 @@ import type { ExtractStringLiterals } from './_extract_string_literals.js'
18
18
  * // Create a generic StoryObj type for your project
19
19
  * type StoryObj<TCmpOrArgs = Args> = ExtendsStoryObj<
20
20
  * S<TCmpOrArgs>,
21
- * { tag: 'new' | 'beta' | 'deprecated' }
21
+ * { tag: 'new' | 'beta' | 'deprecated' | 'remove:next' }
22
22
  * >
23
23
  *
24
24
  * // Use in component stories
25
25
  * const story: StoryObj<typeof Component> = {
26
- * tags: ['new'], // <--- gets auto-completion for 'new' | 'beta' | 'deprecated'
26
+ * tags: ['new'], // <--- gets auto-completion for 'new' | 'beta' | 'deprecated' | 'remove:next'
27
27
  * // ...
28
28
  * }
29
29
  * ```