@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 +5 -5
- package/esm/storybook-addon-tag-badges/index.d.ts +23 -11
- package/esm/storybook-addon-tag-badges/index.js +69 -10
- package/package.json +21 -11
- package/readme.md +6 -2
- package/src/arg-types/fn-to-arg-types.ts +1 -1
- package/src/storybook-addon-tag-badges/tag_badges.ts +79 -9
- package/src/types/extends_meta.ts +2 -2
- package/src/types/extends_story_obj.ts +2 -2
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> :
|
|
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 (
|
|
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,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 →
|
|
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
|
-
* -
|
|
60
|
-
* -
|
|
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 (
|
|
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,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 →
|
|
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
|
-
* -
|
|
259
|
-
* -
|
|
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.
|
|
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":
|
|
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":
|
|
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":
|
|
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.
|
|
69
|
-
"@storybook-community/storybook-dark-mode": "^7.0
|
|
70
|
-
"@storybook/addon-docs": "^10.2.
|
|
71
|
-
"@storybook/addon-vitest": "^10.
|
|
72
|
-
"@storybook/react-vite": "^10.2.
|
|
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.
|
|
84
|
-
"storybook-addon-
|
|
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
|
-
-
|
|
83
|
-
-
|
|
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)
|
|
@@ -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,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 →
|
|
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
|
-
* -
|
|
326
|
-
* -
|
|
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
|
* ```
|