@repobuddy/storybook 2.16.0 → 2.18.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.
|
@@ -8,12 +8,12 @@ type TagBadgeParameter = TagBadgeParameters[0];
|
|
|
8
8
|
/**
|
|
9
9
|
* Type representing the names of predefined tags used in Storybook stories.
|
|
10
10
|
*/
|
|
11
|
-
type TagNames = 'editor' | 'source' | 'type' | 'func' | 'var' | 'new' | 'beta' | 'props' | 'deprecated' | 'outdated' | 'danger' | 'todo' | 'code-only' | 'snapshot' | 'unit' | 'integration' | 'keyboard' | 'internal' | 'usecase' | 'version:next';
|
|
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';
|
|
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 beta. */
|
|
17
17
|
declare const betaBadge: TagBadgeParameter;
|
|
18
18
|
/** Badge (🔧) for stories that demonstrate props or configuration. */
|
|
19
19
|
declare const propsBadge: TagBadgeParameter;
|
|
@@ -45,13 +45,15 @@ declare const integrationBadge: TagBadgeParameter;
|
|
|
45
45
|
declare const keyboardBadge: TagBadgeParameter;
|
|
46
46
|
/** Badge (🔒) for internal or private-use-only stories. */
|
|
47
47
|
declare const internalBadge: TagBadgeParameter;
|
|
48
|
+
/** Badge (🎯) for stories that demonstrate a specific use case or scenario. */
|
|
49
|
+
declare const useCaseBadge: TagBadgeParameter;
|
|
48
50
|
/**
|
|
49
51
|
* Configuration for story tag badges that appear in the Storybook sidebar.
|
|
50
52
|
* Each badge is associated with a specific tag and displays an emoji or symbol with a tooltip.
|
|
51
53
|
*
|
|
52
54
|
* The badges help visually identify stories with certain characteristics:
|
|
53
55
|
* - 🆕 New - Recently added stories
|
|
54
|
-
* -
|
|
56
|
+
* - 🌱 Beta - Stories for features in beta
|
|
55
57
|
* - 🪦 Deprecated - Stories for deprecated features
|
|
56
58
|
* - ⚠️ Outdated - Stories that need updating
|
|
57
59
|
* - ✏️ Editor - Stories with live editor
|
|
@@ -66,6 +68,7 @@ declare const internalBadge: TagBadgeParameter;
|
|
|
66
68
|
* - 🔧 Props - Stories that demonstrate props or configuration
|
|
67
69
|
* - 📝 Code Only - Stories without visual examples
|
|
68
70
|
* - 📋 Todo - Stories marked as todo/incomplete
|
|
71
|
+
* - 🎯 Use Case - Stories that demonstrate a specific use case or scenario
|
|
69
72
|
* - `next` - (`version:next`) The component or function is available in the next version
|
|
70
73
|
* - `x.y` - (`version:x.y`) The component or function was created or updated in the x.y version
|
|
71
74
|
* - 🔒 Internal - Internal or private-use-only stories
|
|
@@ -144,4 +147,4 @@ type StoryObj<TMetaOrCmpOrArgs = Args> = ExtendStoryObj<TMetaOrCmpOrArgs, StoryO
|
|
|
144
147
|
tag: TagNames;
|
|
145
148
|
}>;
|
|
146
149
|
//#endregion
|
|
147
|
-
export { Meta, StoryObj, TagNames, betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, functionBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, propsBadge, snapshotBadge, sourceBadge, tagBadges, todoBadge, typeBadge, unitBadge, varBadge };
|
|
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 };
|
|
@@ -31,11 +31,11 @@ const newBadge = {
|
|
|
31
31
|
tooltip: "New"
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
|
-
/** Badge (
|
|
34
|
+
/** Badge (🌱) for stories covering features in beta. */
|
|
35
35
|
const betaBadge = {
|
|
36
36
|
tags: "beta",
|
|
37
37
|
badge: {
|
|
38
|
-
text: "
|
|
38
|
+
text: "🌱",
|
|
39
39
|
style: {
|
|
40
40
|
backgroundColor: "transparent",
|
|
41
41
|
borderColor: "transparent"
|
|
@@ -234,13 +234,25 @@ const internalBadge = {
|
|
|
234
234
|
tooltip: "Internal"
|
|
235
235
|
}
|
|
236
236
|
};
|
|
237
|
+
/** Badge (🎯) for stories that demonstrate a specific use case or scenario. */
|
|
238
|
+
const useCaseBadge = {
|
|
239
|
+
tags: "use-case",
|
|
240
|
+
badge: {
|
|
241
|
+
text: "🎯",
|
|
242
|
+
style: {
|
|
243
|
+
backgroundColor: "transparent",
|
|
244
|
+
borderColor: "transparent"
|
|
245
|
+
},
|
|
246
|
+
tooltip: "Use Case"
|
|
247
|
+
}
|
|
248
|
+
};
|
|
237
249
|
/**
|
|
238
250
|
* Configuration for story tag badges that appear in the Storybook sidebar.
|
|
239
251
|
* Each badge is associated with a specific tag and displays an emoji or symbol with a tooltip.
|
|
240
252
|
*
|
|
241
253
|
* The badges help visually identify stories with certain characteristics:
|
|
242
254
|
* - 🆕 New - Recently added stories
|
|
243
|
-
* -
|
|
255
|
+
* - 🌱 Beta - Stories for features in beta
|
|
244
256
|
* - 🪦 Deprecated - Stories for deprecated features
|
|
245
257
|
* - ⚠️ Outdated - Stories that need updating
|
|
246
258
|
* - ✏️ Editor - Stories with live editor
|
|
@@ -255,6 +267,7 @@ const internalBadge = {
|
|
|
255
267
|
* - 🔧 Props - Stories that demonstrate props or configuration
|
|
256
268
|
* - 📝 Code Only - Stories without visual examples
|
|
257
269
|
* - 📋 Todo - Stories marked as todo/incomplete
|
|
270
|
+
* - 🎯 Use Case - Stories that demonstrate a specific use case or scenario
|
|
258
271
|
* - `next` - (`version:next`) The component or function is available in the next version
|
|
259
272
|
* - `x.y` - (`version:x.y`) The component or function was created or updated in the x.y version
|
|
260
273
|
* - 🔒 Internal - Internal or private-use-only stories
|
|
@@ -277,10 +290,11 @@ const tagBadges = [
|
|
|
277
290
|
propsBadge,
|
|
278
291
|
codeOnlyBadge,
|
|
279
292
|
todoBadge,
|
|
293
|
+
useCaseBadge,
|
|
280
294
|
versionBadge,
|
|
281
295
|
internalBadge,
|
|
282
296
|
snapshotBadge
|
|
283
297
|
];
|
|
284
298
|
|
|
285
299
|
//#endregion
|
|
286
|
-
export { betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, functionBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, propsBadge, snapshotBadge, sourceBadge, tagBadges, todoBadge, typeBadge, unitBadge, varBadge };
|
|
300
|
+
export { betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, functionBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, propsBadge, snapshotBadge, sourceBadge, tagBadges, todoBadge, typeBadge, unitBadge, useCaseBadge, varBadge };
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -78,18 +78,25 @@ addons.setConfig({
|
|
|
78
78
|
If you use [`storybook-addon-tag-badges`][`storybook-addon-tag-badges`],
|
|
79
79
|
we provide a different set of badges that uses emojis:
|
|
80
80
|
|
|
81
|
-
- ✏️ `editor` - Live
|
|
82
|
-
- 🆕 `new` -
|
|
83
|
-
-
|
|
84
|
-
- 🪦 `deprecated` - Deprecated
|
|
85
|
-
- ⚠️ `outdated` -
|
|
86
|
-
-
|
|
87
|
-
-
|
|
88
|
-
-
|
|
89
|
-
-
|
|
90
|
-
-
|
|
81
|
+
- ✏️ `editor` - Live editor stories (with [`storybook-addon-code-editor`][`storybook-addon-code-editor`])
|
|
82
|
+
- 🆕 `new` - Recently added stories
|
|
83
|
+
- 🌱 `beta` - Features in beta
|
|
84
|
+
- 🪦 `deprecated` - Deprecated features
|
|
85
|
+
- ⚠️ `outdated` - Stories that need updating
|
|
86
|
+
- 🔧 `props` - Props or configuration
|
|
87
|
+
- 🚨 `danger` - Dangerous or cautionary patterns
|
|
88
|
+
- `</>` `source` - Source-code-focused stories
|
|
89
|
+
- `<T>` `type` - TypeScript types (shown in MDX)
|
|
90
|
+
- `ƒ(x)` `func` - Functions (shown in MDX)
|
|
91
|
+
- `var` `var` - Variables (shown in MDX)
|
|
92
|
+
- 📝 `code-only` - Stories without visual examples (hidden in MDX)
|
|
93
|
+
- 📋 `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)
|
|
91
97
|
- 🧪 `unit` - Unit tests
|
|
92
|
-
- 🔗 `integration` - Integration tests
|
|
98
|
+
- 🔗 `integration` - Integration tests (hidden in sidebar)
|
|
99
|
+
- 🔒 `internal` - Internal or private-use-only stories
|
|
93
100
|
- Version indicators (unchanged)
|
|
94
101
|
|
|
95
102
|
To use them, add them to your `.storybook/manager.ts`:
|
|
@@ -8,11 +8,15 @@ type TagBadgeParameter = TagBadgeParameters[0]
|
|
|
8
8
|
* Type representing the names of predefined tags used in Storybook stories.
|
|
9
9
|
*/
|
|
10
10
|
export type TagNames =
|
|
11
|
+
| '!test'
|
|
11
12
|
| 'editor'
|
|
12
13
|
| 'source'
|
|
13
14
|
| 'type'
|
|
15
|
+
| '!type'
|
|
14
16
|
| 'func'
|
|
17
|
+
| '!func'
|
|
15
18
|
| 'var'
|
|
19
|
+
| '!var'
|
|
16
20
|
| 'new'
|
|
17
21
|
| 'beta'
|
|
18
22
|
| 'props'
|
|
@@ -22,11 +26,13 @@ export type TagNames =
|
|
|
22
26
|
| 'todo'
|
|
23
27
|
| 'code-only'
|
|
24
28
|
| 'snapshot'
|
|
29
|
+
| '!snapshot'
|
|
25
30
|
| 'unit'
|
|
26
31
|
| 'integration'
|
|
27
32
|
| 'keyboard'
|
|
28
33
|
| 'internal'
|
|
29
34
|
| 'usecase'
|
|
35
|
+
| 'use-case'
|
|
30
36
|
| 'version:next'
|
|
31
37
|
|
|
32
38
|
/** Badge (✏️) for stories with a live editor. Shown in sidebar on story and inherited. */
|
|
@@ -61,11 +67,11 @@ export const newBadge: TagBadgeParameter = {
|
|
|
61
67
|
}
|
|
62
68
|
}
|
|
63
69
|
|
|
64
|
-
/** Badge (
|
|
70
|
+
/** Badge (🌱) for stories covering features in beta. */
|
|
65
71
|
export const betaBadge: TagBadgeParameter = {
|
|
66
72
|
tags: 'beta',
|
|
67
73
|
badge: {
|
|
68
|
-
text: '
|
|
74
|
+
text: '🌱',
|
|
69
75
|
style: {
|
|
70
76
|
backgroundColor: 'transparent',
|
|
71
77
|
borderColor: 'transparent'
|
|
@@ -294,13 +300,26 @@ export const internalBadge: TagBadgeParameter = {
|
|
|
294
300
|
}
|
|
295
301
|
}
|
|
296
302
|
|
|
303
|
+
/** Badge (🎯) for stories that demonstrate a specific use case or scenario. */
|
|
304
|
+
export const useCaseBadge: TagBadgeParameter = {
|
|
305
|
+
tags: 'use-case',
|
|
306
|
+
badge: {
|
|
307
|
+
text: '🎯',
|
|
308
|
+
style: {
|
|
309
|
+
backgroundColor: 'transparent',
|
|
310
|
+
borderColor: 'transparent'
|
|
311
|
+
},
|
|
312
|
+
tooltip: 'Use Case'
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
|
|
297
316
|
/**
|
|
298
317
|
* Configuration for story tag badges that appear in the Storybook sidebar.
|
|
299
318
|
* Each badge is associated with a specific tag and displays an emoji or symbol with a tooltip.
|
|
300
319
|
*
|
|
301
320
|
* The badges help visually identify stories with certain characteristics:
|
|
302
321
|
* - 🆕 New - Recently added stories
|
|
303
|
-
* -
|
|
322
|
+
* - 🌱 Beta - Stories for features in beta
|
|
304
323
|
* - 🪦 Deprecated - Stories for deprecated features
|
|
305
324
|
* - ⚠️ Outdated - Stories that need updating
|
|
306
325
|
* - ✏️ Editor - Stories with live editor
|
|
@@ -315,6 +334,7 @@ export const internalBadge: TagBadgeParameter = {
|
|
|
315
334
|
* - 🔧 Props - Stories that demonstrate props or configuration
|
|
316
335
|
* - 📝 Code Only - Stories without visual examples
|
|
317
336
|
* - 📋 Todo - Stories marked as todo/incomplete
|
|
337
|
+
* - 🎯 Use Case - Stories that demonstrate a specific use case or scenario
|
|
318
338
|
* - `next` - (`version:next`) The component or function is available in the next version
|
|
319
339
|
* - `x.y` - (`version:x.y`) The component or function was created or updated in the x.y version
|
|
320
340
|
* - 🔒 Internal - Internal or private-use-only stories
|
|
@@ -337,6 +357,7 @@ export const tagBadges: TagBadgeParameters = [
|
|
|
337
357
|
propsBadge,
|
|
338
358
|
codeOnlyBadge,
|
|
339
359
|
todoBadge,
|
|
360
|
+
useCaseBadge,
|
|
340
361
|
versionBadge,
|
|
341
362
|
internalBadge,
|
|
342
363
|
snapshotBadge
|