@repobuddy/storybook 2.23.0 → 2.24.0

package/esm/storybook-addon-tag-badges/index.d.ts

@@ -8,7 +8,7 @@ type TagBadgeParameter = TagBadgeParameters[0];
 /**
  * Type representing the names of predefined tags used in Storybook stories.
  */
-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' | 'perf' | 'version:next' | 'remove' | 'remove:next' | 'autodocs';
+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' | 'playground' | 'example' | 'perf' | 'version:next' | 'remove' | 'remove:next' | 'autodocs';
 /** Badge (✏️) for stories with a live editor. Shown in sidebar on story and inherited. */
 declare const editorBadge: TagBadgeParameter;
 /** Badge (🆕) for recently added stories. */
@@ -53,6 +53,8 @@ declare const keyboardBadge: TagBadgeParameter;
 declare const internalBadge: TagBadgeParameter;
 /** Badge (🎯) for stories that demonstrate a specific use case or scenario. */
 declare const useCaseBadge: TagBadgeParameter;
+/** Badge (▶️) for high-quality interactive playground stories where users can explore and interact with the component. */
+declare const playgroundBadge: TagBadgeParameter;
 /** Badge (✨) for example or demo stories. */
 declare const exampleBadge: TagBadgeParameter;
 /** Badge (⚡) for stories that demonstrate or test performance. */
@@ -62,7 +64,7 @@ declare const perfBadge: TagBadgeParameter;
  * Each badge is associated with a specific tag and displays an emoji or symbol with a tooltip.
  *
  * Badge order (first match wins): New → Alpha → Beta → RC → Deprecated → Remove → Outdated → Danger → Use Case →
- * Example → Perf → Keyboard → Source → Type → Function → Var → Props → Todo → Unit → Integration →
+ * Playground → Example → Perf → Keyboard → Source → Type → Function → Var → Props → Todo → Unit → Integration →
  * Editor → Code Only → Version → Internal → Snapshot.
  *
  * - 🆕 New - Recently added stories
@@ -74,6 +76,7 @@ declare const perfBadge: TagBadgeParameter;
  * - ⚠️ Outdated - Stories that need updating
  * - 🚨 Danger - Stories demonstrating dangerous patterns
  * - 🎯 Use Case - Stories that demonstrate a specific use case or scenario
+ * - ▶️ Playground - High-quality interactive stories for users to explore and interact with the component
  * - ✨ Example - Example or demo stories
  * - ⚡ Perf - Stories that demonstrate or test performance
  * - ⌨️ Keyboard - Stories that demonstrate or test keyboard interaction
@@ -165,4 +168,4 @@ type StoryObj<TMetaOrCmpOrArgs = Args> = ExtendStoryObj<TMetaOrCmpOrArgs, StoryO
   tag: TagNames;
 }>;
 //#endregion
-export { Meta, StoryObj, TagNames, alphaBadge, betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, exampleBadge, functionBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, perfBadge, propsBadge, rcBadge, removeBadge, snapshotBadge, sourceBadge, tagBadges, todoBadge, typeBadge, unitBadge, useCaseBadge, varBadge };
+export { Meta, StoryObj, TagNames, alphaBadge, betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, exampleBadge, functionBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, perfBadge, playgroundBadge, propsBadge, rcBadge, removeBadge, snapshotBadge, sourceBadge, tagBadges, todoBadge, typeBadge, unitBadge, useCaseBadge, varBadge };

package/esm/storybook-addon-tag-badges/index.js

@@ -315,6 +315,22 @@ const useCaseBadge = {
 		skipInherited: false
 	} }
 };
+/** Badge (▶️) for high-quality interactive playground stories where users can explore and interact with the component. */
+const playgroundBadge = {
+	tags: "playground",
+	badge: {
+		text: "▶️",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Playground"
+	},
+	display: { sidebar: {
+		type: "story",
+		skipInherited: false
+	} }
+};
 /** Badge (✨) for example or demo stories. */
 const exampleBadge = {
 	tags: "example",
@@ -352,7 +368,7 @@ const perfBadge = {
 * Each badge is associated with a specific tag and displays an emoji or symbol with a tooltip.
 *
 * Badge order (first match wins): New → Alpha → Beta → RC → Deprecated → Remove → Outdated → Danger → Use Case →
-* Example → Perf → Keyboard → Source → Type → Function → Var → Props → Todo → Unit → Integration →
+* Playground → Example → Perf → Keyboard → Source → Type → Function → Var → Props → Todo → Unit → Integration →
 * Editor → Code Only → Version → Internal → Snapshot.
 *
 * - 🆕 New - Recently added stories
@@ -364,6 +380,7 @@ const perfBadge = {
 * - ⚠️ Outdated - Stories that need updating
 * - 🚨 Danger - Stories demonstrating dangerous patterns
 * - 🎯 Use Case - Stories that demonstrate a specific use case or scenario
+* - ▶️ Playground - High-quality interactive stories for users to explore and interact with the component
 * - ✨ Example - Example or demo stories
 * - ⚡ Perf - Stories that demonstrate or test performance
 * - ⌨️ Keyboard - Stories that demonstrate or test keyboard interaction
@@ -392,6 +409,7 @@ const tagBadges = [
 	outdatedBadge,
 	dangerBadge,
 	useCaseBadge,
+	playgroundBadge,
 	exampleBadge,
 	perfBadge,
 	keyboardBadge,
@@ -411,4 +429,4 @@ const tagBadges = [
 ];
 
 //#endregion
-export { alphaBadge, betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, exampleBadge, functionBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, perfBadge, propsBadge, rcBadge, removeBadge, snapshotBadge, sourceBadge, tagBadges, todoBadge, typeBadge, unitBadge, useCaseBadge, varBadge };
+export { alphaBadge, betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, exampleBadge, functionBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, perfBadge, playgroundBadge, propsBadge, rcBadge, removeBadge, snapshotBadge, sourceBadge, tagBadges, todoBadge, typeBadge, unitBadge, useCaseBadge, varBadge };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobuddy/storybook",
-  "version": "2.23.0",
+  "version": "2.24.0",
   "description": "Storybook repo buddy",
   "keywords": [
     "storybook",
@@ -80,6 +80,7 @@
     "class-variance-authority": "^0.7.1",
     "htmlfy": "^1.0.0",
     "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.2.1",
     "type-plus": "8.0.0-beta.8"
   },
   "devDependencies": {
@@ -102,7 +103,6 @@
     "storybook-addon-code-editor": "^6.1.3",
     "storybook-addon-tag-badges": "^3.0.6",
     "storybook-addon-vis": "^3.1.2",
-    "tailwindcss": "^4.1.17",
     "tsdown": "^0.20.0",
     "vite": "^7.3.0",
     "vitest": "^4.0.16"

package/readme.md

@@ -89,6 +89,7 @@ we provide a different set of badges that uses emojis (order: first match wins):
 | ⚠️      | `outdated`                                               | Stories that need updating                                                                |
 | 🚨      | `danger`                                                 | Dangerous or cautionary patterns                                                          |
 | 🎯      | `use-case`                                               | Specific use case or scenario                                                             |
+| ▶️      | `playground`                                             | High-quality interactive stories for users to explore and interact with the component     |
 | ✨      | `example`                                                | Example or demo stories                                                                   |
 | ⚡      | `perf`                                                   | Performance (stories that demonstrate or test performance)                                |
 | ⌨️      | `keyboard`                                               | Keyboard interaction                                                                      |

package/src/storybook-addon-tag-badges/tag_badges.ts

@@ -35,6 +35,7 @@ export type TagNames =
 	| 'internal'
 	| 'usecase'
 	| 'use-case'
+	| 'playground'
 	| 'example'
 	| 'perf'
 	| 'version:next'
@@ -395,6 +396,25 @@ export const useCaseBadge: TagBadgeParameter = {
 	}
 }
 
+/** Badge (▶️) for high-quality interactive playground stories where users can explore and interact with the component. */
+export const playgroundBadge: TagBadgeParameter = {
+	tags: 'playground',
+	badge: {
+		text: '▶️',
+		style: {
+			backgroundColor: 'transparent',
+			borderColor: 'transparent'
+		},
+		tooltip: 'Playground'
+	},
+	display: {
+		sidebar: {
+			type: 'story',
+			skipInherited: false
+		}
+	}
+}
+
 /** Badge (✨) for example or demo stories. */
 export const exampleBadge: TagBadgeParameter = {
 	tags: 'example',
@@ -438,7 +458,7 @@ export const perfBadge: TagBadgeParameter = {
  * Each badge is associated with a specific tag and displays an emoji or symbol with a tooltip.
  *
  * Badge order (first match wins): New → Alpha → Beta → RC → Deprecated → Remove → Outdated → Danger → Use Case →
- * Example → Perf → Keyboard → Source → Type → Function → Var → Props → Todo → Unit → Integration →
+ * Playground → Example → Perf → Keyboard → Source → Type → Function → Var → Props → Todo → Unit → Integration →
  * Editor → Code Only → Version → Internal → Snapshot.
  *
  * - 🆕 New - Recently added stories
@@ -450,6 +470,7 @@ export const perfBadge: TagBadgeParameter = {
  * - ⚠️ Outdated - Stories that need updating
  * - 🚨 Danger - Stories demonstrating dangerous patterns
  * - 🎯 Use Case - Stories that demonstrate a specific use case or scenario
+ * - ▶️ Playground - High-quality interactive stories for users to explore and interact with the component
  * - ✨ Example - Example or demo stories
  * - ⚡ Perf - Stories that demonstrate or test performance
  * - ⌨️ Keyboard - Stories that demonstrate or test keyboard interaction
@@ -478,6 +499,7 @@ export const tagBadges: TagBadgeParameters = [
 	outdatedBadge,
 	dangerBadge,
 	useCaseBadge,
+	playgroundBadge,
 	exampleBadge,
 	perfBadge,
 	keyboardBadge,

package/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.2.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme {
   :root, :host {