@repobuddy/storybook 2.18.0 → 2.19.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.
package/esm/index.d.ts CHANGED
@@ -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,28 +53,37 @@ 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
- * The badges help visually identify stories with certain characteristics:
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.
65
+ *
55
66
  * - 🆕 New - Recently added stories
56
- * - 🌱 Beta - Stories for features in beta
57
- * - 🪦 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
58
72
  * - ⚠️ Outdated - Stories that need updating
59
- * - ✏️ Editor - Stories with live editor
60
- * - 🧪 Unit - Stories with unit tests
61
- * - 🔗 Integration - Stories with integration tests
62
- * - ⌨️ Keyboard - Stories that demonstrate or test keyboard interaction
63
73
  * - 🚨 Danger - Stories demonstrating dangerous patterns
74
+ * - 🎯 Use Case - Stories that demonstrate a specific use case or scenario
75
+ * - ✨ Example - Example or demo stories
76
+ * - ⌨️ Keyboard - Stories that demonstrate or test keyboard interaction
64
77
  * - `</>` Source - Source-code-focused stories
65
78
  * - `<T>` Type - Stories that showcase or document TypeScript types
66
79
  * - `ƒ(x)` Function - Stories that showcase or document functions
67
80
  * - `var` Variables - Stories that describe values and variables
68
81
  * - 🔧 Props - Stories that demonstrate props or configuration
69
- * - 📝 Code Only - Stories without visual examples
70
82
  * - 📋 Todo - Stories marked as todo/incomplete
71
- * - 🎯 Use Case - Stories that demonstrate a specific use case or scenario
83
+ * - 🧪 Unit - Stories with unit tests
84
+ * - 🔗 Integration - Stories with integration tests
85
+ * - ✏️ Editor - Stories with live editor
86
+ * - 📝 Code Only - Stories without visual examples
72
87
  * - `next` - (`version:next`) The component or function is available in the next version
73
88
  * - `x.y` - (`version:x.y`) The component or function was created or updated in the x.y version
74
89
  * - 🔒 Internal - Internal or private-use-only stories
@@ -97,12 +112,12 @@ type ExtractStringLiterals<T> = T extends any ? (string extends T ? never : T) :
97
112
  * // Create a generic Meta type for your project
98
113
  * type Meta<TCmpOrArgs = Args> = ExtendsMeta<
99
114
  * M<TCmpOrArgs>,
100
- * { tag: 'new' | 'beta' | 'deprecated' }
115
+ * { tag: 'new' | 'beta' | 'deprecated' | 'remove:next' }
101
116
  * >
102
117
  *
103
118
  * // Use in component stories
104
119
  * const meta: Meta<typeof Component> = {
105
- * tags: ['new'], // <--- gets auto-completion for 'new' | 'beta' | 'deprecated'
120
+ * tags: ['new'], // <--- gets auto-completion for 'new' | 'beta' | 'deprecated' | 'remove:next'
106
121
  * // ...
107
122
  * }
108
123
  * ```
@@ -147,4 +162,4 @@ type StoryObj<TMetaOrCmpOrArgs = Args> = ExtendStoryObj<TMetaOrCmpOrArgs, StoryO
147
162
  tag: TagNames;
148
163
  }>;
149
164
  //#endregion
150
- 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,28 +285,47 @@ 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
- * The badges help visually identify stories with certain characteristics:
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.
307
+ *
254
308
  * - 🆕 New - Recently added stories
255
- * - 🌱 Beta - Stories for features in beta
256
- * - 🪦 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
257
314
  * - ⚠️ Outdated - Stories that need updating
258
- * - ✏️ Editor - Stories with live editor
259
- * - 🧪 Unit - Stories with unit tests
260
- * - 🔗 Integration - Stories with integration tests
261
- * - ⌨️ Keyboard - Stories that demonstrate or test keyboard interaction
262
315
  * - 🚨 Danger - Stories demonstrating dangerous patterns
316
+ * - 🎯 Use Case - Stories that demonstrate a specific use case or scenario
317
+ * - ✨ Example - Example or demo stories
318
+ * - ⌨️ Keyboard - Stories that demonstrate or test keyboard interaction
263
319
  * - `</>` Source - Source-code-focused stories
264
320
  * - `<T>` Type - Stories that showcase or document TypeScript types
265
321
  * - `ƒ(x)` Function - Stories that showcase or document functions
266
322
  * - `var` Variables - Stories that describe values and variables
267
323
  * - 🔧 Props - Stories that demonstrate props or configuration
268
- * - 📝 Code Only - Stories without visual examples
269
324
  * - 📋 Todo - Stories marked as todo/incomplete
270
- * - 🎯 Use Case - Stories that demonstrate a specific use case or scenario
325
+ * - 🧪 Unit - Stories with unit tests
326
+ * - 🔗 Integration - Stories with integration tests
327
+ * - ✏️ Editor - Stories with live editor
328
+ * - 📝 Code Only - Stories without visual examples
271
329
  * - `next` - (`version:next`) The component or function is available in the next version
272
330
  * - `x.y` - (`version:x.y`) The component or function was created or updated in the x.y version
273
331
  * - 🔒 Internal - Internal or private-use-only stories
@@ -275,26 +333,30 @@ const useCaseBadge = {
275
333
  */
276
334
  const tagBadges = [
277
335
  newBadge,
336
+ alphaBadge,
278
337
  betaBadge,
338
+ rcBadge,
279
339
  deprecatedBadge,
340
+ removeBadge,
280
341
  outdatedBadge,
281
- editorBadge,
282
- unitBadge,
283
- integrationBadge,
284
- keyboardBadge,
285
342
  dangerBadge,
343
+ useCaseBadge,
344
+ exampleBadge,
345
+ keyboardBadge,
286
346
  sourceBadge,
287
347
  typeBadge,
288
348
  functionBadge,
289
349
  varBadge,
290
350
  propsBadge,
291
- codeOnlyBadge,
292
351
  todoBadge,
293
- useCaseBadge,
352
+ unitBadge,
353
+ integrationBadge,
354
+ editorBadge,
355
+ codeOnlyBadge,
294
356
  versionBadge,
295
357
  internalBadge,
296
358
  snapshotBadge
297
359
  ];
298
360
 
299
361
  //#endregion
300
- 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.0",
3
+ "version": "2.19.0",
4
4
  "description": "Storybook repo buddy",
5
5
  "keywords": [
6
6
  "storybook",
package/readme.md CHANGED
@@ -76,28 +76,32 @@ addons.setConfig({
76
76
  ### `storybook-addon-tag-badges`
77
77
 
78
78
  If you use [`storybook-addon-tag-badges`][`storybook-addon-tag-badges`],
79
- we provide a different set of badges that uses emojis:
79
+ we provide a different set of badges that uses emojis (order: first match wins):
80
80
 
81
- - ✏️ `editor` - Live editor stories (with [`storybook-addon-code-editor`][`storybook-addon-code-editor`])
82
81
  - 🆕 `new` - Recently added stories
83
- - 🌱 `beta` - Features in beta
84
- - 🪦 `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
85
87
  - ⚠️ `outdated` - Stories that need updating
86
- - 🔧 `props` - Props or configuration
87
88
  - 🚨 `danger` - Dangerous or cautionary patterns
89
+ - 🎯 `use-case` - Specific use case or scenario
90
+ - ✨ `example` - Example or demo stories
91
+ - ⌨️ `keyboard` - Keyboard interaction
88
92
  - `</>` `source` - Source-code-focused stories
89
93
  - `<T>` `type` - TypeScript types (shown in MDX)
90
94
  - `ƒ(x)` `func` - Functions (shown in MDX)
91
95
  - `var` `var` - Variables (shown in MDX)
92
- - 📝 `code-only` - Stories without visual examples (hidden in MDX)
96
+ - 🔧 `props` - Props or configuration
93
97
  - 📋 `todo` - Todo or incomplete stories
94
- - 🎯 `use-case` - Specific use case or scenario
95
- - ⌨️ `keyboard` - Keyboard interaction
96
- - 📸 `snapshot` - Snapshot tests (toolbar only, not sidebar)
97
98
  - 🧪 `unit` - Unit tests
98
99
  - 🔗 `integration` - Integration tests (hidden in sidebar)
99
- - 🔒 `internal` - Internal or private-use-only stories
100
+ - ✏️ `editor` - Live editor stories (with [`storybook-addon-code-editor`][`storybook-addon-code-editor`])
101
+ - 📝 `code-only` - Stories without visual examples (hidden in MDX)
100
102
  - Version indicators (unchanged)
103
+ - 🔒 `internal` - Internal or private-use-only stories
104
+ - 📸 `snapshot` - Snapshot tests (toolbar only, not sidebar)
101
105
 
102
106
  To use them, add them to your `.storybook/manager.ts`:
103
107
 
@@ -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,28 +362,48 @@ 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
- * The badges help visually identify stories with certain characteristics:
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.
385
+ *
321
386
  * - 🆕 New - Recently added stories
322
- * - 🌱 Beta - Stories for features in beta
323
- * - 🪦 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
324
392
  * - ⚠️ Outdated - Stories that need updating
325
- * - ✏️ Editor - Stories with live editor
326
- * - 🧪 Unit - Stories with unit tests
327
- * - 🔗 Integration - Stories with integration tests
328
- * - ⌨️ Keyboard - Stories that demonstrate or test keyboard interaction
329
393
  * - 🚨 Danger - Stories demonstrating dangerous patterns
394
+ * - 🎯 Use Case - Stories that demonstrate a specific use case or scenario
395
+ * - ✨ Example - Example or demo stories
396
+ * - ⌨️ Keyboard - Stories that demonstrate or test keyboard interaction
330
397
  * - `</>` Source - Source-code-focused stories
331
398
  * - `<T>` Type - Stories that showcase or document TypeScript types
332
399
  * - `ƒ(x)` Function - Stories that showcase or document functions
333
400
  * - `var` Variables - Stories that describe values and variables
334
401
  * - 🔧 Props - Stories that demonstrate props or configuration
335
- * - 📝 Code Only - Stories without visual examples
336
402
  * - 📋 Todo - Stories marked as todo/incomplete
337
- * - 🎯 Use Case - Stories that demonstrate a specific use case or scenario
403
+ * - 🧪 Unit - Stories with unit tests
404
+ * - 🔗 Integration - Stories with integration tests
405
+ * - ✏️ Editor - Stories with live editor
406
+ * - 📝 Code Only - Stories without visual examples
338
407
  * - `next` - (`version:next`) The component or function is available in the next version
339
408
  * - `x.y` - (`version:x.y`) The component or function was created or updated in the x.y version
340
409
  * - 🔒 Internal - Internal or private-use-only stories
@@ -342,22 +411,26 @@ export const useCaseBadge: TagBadgeParameter = {
342
411
  */
343
412
  export const tagBadges: TagBadgeParameters = [
344
413
  newBadge,
414
+ alphaBadge,
345
415
  betaBadge,
416
+ rcBadge,
346
417
  deprecatedBadge,
418
+ removeBadge,
347
419
  outdatedBadge,
348
- editorBadge,
349
- unitBadge,
350
- integrationBadge,
351
- keyboardBadge,
352
420
  dangerBadge,
421
+ useCaseBadge,
422
+ exampleBadge,
423
+ keyboardBadge,
353
424
  sourceBadge,
354
425
  typeBadge,
355
426
  functionBadge,
356
427
  varBadge,
357
428
  propsBadge,
358
- codeOnlyBadge,
359
429
  todoBadge,
360
- useCaseBadge,
430
+ unitBadge,
431
+ integrationBadge,
432
+ editorBadge,
433
+ codeOnlyBadge,
361
434
  versionBadge,
362
435
  internalBadge,
363
436
  snapshotBadge
@@ -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
  * ```