@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 +4 -4
- package/esm/storybook-addon-tag-badges/index.d.ts +30 -15
- package/esm/storybook-addon-tag-badges/index.js +82 -20
- package/package.json +1 -1
- package/readme.md +14 -10
- package/src/storybook-addon-tag-badges/tag_badges.ts +92 -19
- package/src/types/extends_meta.ts +2 -2
- package/src/types/extends_story_obj.ts +2 -2
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 (
|
|
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 (
|
|
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
|
-
*
|
|
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
|
-
* -
|
|
57
|
-
* -
|
|
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
|
-
* -
|
|
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 (
|
|
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 (
|
|
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
|
-
*
|
|
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
|
-
* -
|
|
256
|
-
* -
|
|
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
|
-
* -
|
|
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
|
-
|
|
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
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
|
-
-
|
|
84
|
-
-
|
|
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
|
-
-
|
|
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
|
-
-
|
|
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 (
|
|
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 (
|
|
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
|
-
*
|
|
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
|
-
* -
|
|
323
|
-
* -
|
|
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
|
-
* -
|
|
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
|
-
|
|
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
|
* ```
|