@repobuddy/storybook 2.14.0 → 2.16.0

package/esm/index.js

@@ -93,11 +93,11 @@ function generateKey(prefix) {
 }
 
 //#endregion
-//#region src/contexts/story_card_registry_context.tsx
+//#region src/contexts/_story_card_registry_context.tsx
 const StoryCardRegistryContext = createContext(null);
 
 //#endregion
-//#region src/contexts/story_card_scope.tsx
+//#region src/contexts/_story_card_scope.tsx
 /**
 * Ensures a story-card collection scope: creates the root container when no context exists,
 * otherwise renders the collector so this card participates in the existing scope.

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

@@ -8,41 +8,69 @@ type TagBadgeParameter = TagBadgeParameters[0];
 /**
  * Type representing the names of predefined tags used in Storybook stories.
  */
-type TagNames = 'editor' | 'source' | 'new' | 'beta' | 'props' | 'deprecated' | 'outdated' | 'danger' | 'todo' | 'code-only' | 'snapshot' | 'unit' | 'integration' | 'keyboard' | 'internal' | 'usecase' | 'version:next';
-/**
- * Configuration for story tag badges that appear in the Storybook sidebar.
- * Each badge is associated with a specific tag and displays an emoji with a tooltip.
- *
- * The badges help visually identify stories with certain characteristics:
- * - ✏️ Editor - Stories with live editor
- * - 🆕 New - Recently added stories
- * - 🅱️ Beta - Stories for features in beta
- * - 🪦 Deprecated - Stories for deprecated features
- * - ⚠️ Outdated - Stories that need updating
- * - 🚨 Danger - Stories demonstrating dangerous patterns
- * - 📋 Todo - Stories marked as todo/incomplete
- * - 📝 Code Only - Stories without visual examples
- * - 📸 Snapshot - Stories with snapshot tests
- * - 🧪 Unit - Stories with unit tests
- * - 🔗 Integration - Stories with integration tests
- *
- * Also includes the default version badge from `storybook-addon-tag-badges`.
- */
+type TagNames = 'editor' | 'source' | 'type' | 'func' | 'var' | 'new' | 'beta' | 'props' | 'deprecated' | 'outdated' | 'danger' | 'todo' | 'code-only' | 'snapshot' | 'unit' | 'integration' | 'keyboard' | 'internal' | 'usecase' | 'version:next';
+/** Badge (✏️) for stories with a live editor. Shown in sidebar on story and inherited. */
 declare const editorBadge: TagBadgeParameter;
+/** Badge (🆕) for recently added stories. */
 declare const newBadge: TagBadgeParameter;
+/** Badge (🅱️) for stories covering features in beta. */
 declare const betaBadge: TagBadgeParameter;
+/** Badge (🔧) for stories that demonstrate props or configuration. */
 declare const propsBadge: TagBadgeParameter;
+/** Badge (🪦) for stories documenting deprecated features. */
 declare const deprecatedBadge: TagBadgeParameter;
+/** Badge (⚠️) for stories that need updating. */
 declare const outdatedBadge: TagBadgeParameter;
+/** Badge (🚨) for stories demonstrating dangerous or cautionary patterns. */
 declare const dangerBadge: TagBadgeParameter;
+/** Badge (📋) for stories marked as todo or incomplete. */
 declare const todoBadge: TagBadgeParameter;
+/** Badge (📝) for stories without visual examples (code-only). Hidden in MDX. */
 declare const codeOnlyBadge: TagBadgeParameter;
+/** Badge (<T>) for stories that showcase or document TypeScript types. Hidden in MDX. */
+declare const typeBadge: TagBadgeParameter;
+/** Badge (ƒ(x)) for stories that showcase or document functions. Hidden in MDX. */
+declare const functionBadge: TagBadgeParameter;
+/** Badge (var) for stories that describe values and variables. */
+declare const varBadge: TagBadgeParameter;
+/** Badge (`</>`) for source-code-focused stories. Hidden in MDX. */
 declare const sourceBadge: TagBadgeParameter;
+/** Badge (📸) for stories with snapshot tests. Shown in toolbar only, not in sidebar. */
 declare const snapshotBadge: TagBadgeParameter;
+/** Badge (🧪) for stories with unit tests. */
 declare const unitBadge: TagBadgeParameter;
+/** Badge (🔗) for stories with integration tests. Hidden in sidebar. */
 declare const integrationBadge: TagBadgeParameter;
+/** Badge (⌨️) for stories that demonstrate or test keyboard interaction. */
 declare const keyboardBadge: TagBadgeParameter;
+/** Badge (🔒) for internal or private-use-only stories. */
 declare const internalBadge: TagBadgeParameter;
+/**
+ * Configuration for story tag badges that appear in the Storybook sidebar.
+ * Each badge is associated with a specific tag and displays an emoji or symbol with a tooltip.
+ *
+ * The badges help visually identify stories with certain characteristics:
+ * - 🆕 New - Recently added stories
+ * - 🅱️ Beta - Stories for features in beta
+ * - 🪦 Deprecated - Stories for deprecated features
+ * - ⚠️ Outdated - Stories that need updating
+ * - ✏️ Editor - Stories with live editor
+ * - 🧪 Unit - Stories with unit tests
+ * - 🔗 Integration - Stories with integration tests
+ * - ⌨️ Keyboard - Stories that demonstrate or test keyboard interaction
+ * - 🚨 Danger - Stories demonstrating dangerous patterns
+ * - `</>` Source - Source-code-focused stories
+ * - `<T>` Type - Stories that showcase or document TypeScript types
+ * - `ƒ(x)` Function - Stories that showcase or document functions
+ * - `var` Variables - Stories that describe values and variables
+ * - 🔧 Props - Stories that demonstrate props or configuration
+ * - 📝 Code Only - Stories without visual examples
+ * - 📋 Todo - Stories marked as todo/incomplete
+ * - `next` - (`version:next`) The component or function is available in the next version
+ * - `x.y` - (`version:x.y`) The component or function was created or updated in the x.y version
+ * - 🔒 Internal - Internal or private-use-only stories
+ * - 📸 Snapshot - Stories with snapshot tests
+ */
 declare const tagBadges: TagBadgeParameters;
 //#endregion
 //#region src/types/_extract_string_literals.d.ts
@@ -116,4 +144,4 @@ type StoryObj<TMetaOrCmpOrArgs = Args> = ExtendStoryObj<TMetaOrCmpOrArgs, StoryO
   tag: TagNames;
 }>;
 //#endregion
-export { Meta, StoryObj, TagNames, betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, propsBadge, snapshotBadge, sourceBadge, tagBadges, todoBadge, unitBadge };
+export { Meta, StoryObj, TagNames, betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, functionBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, propsBadge, snapshotBadge, sourceBadge, tagBadges, todoBadge, typeBadge, unitBadge, varBadge };

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

@@ -3,25 +3,7 @@ import { defaultConfig } from "storybook-addon-tag-badges/manager-helpers";
 
 //#region src/storybook-addon-tag-badges/tag_badges.ts
 const [, , , , , , versionBadge] = defaultConfig;
-/**
-* Configuration for story tag badges that appear in the Storybook sidebar.
-* Each badge is associated with a specific tag and displays an emoji with a tooltip.
-*
-* The badges help visually identify stories with certain characteristics:
-* - ✏️ Editor - Stories with live editor
-* - 🆕 New - Recently added stories
-* - 🅱️ Beta - Stories for features in beta
-* - 🪦 Deprecated - Stories for deprecated features
-* - ⚠️ Outdated - Stories that need updating
-* - 🚨 Danger - Stories demonstrating dangerous patterns
-* - 📋 Todo - Stories marked as todo/incomplete
-* - 📝 Code Only - Stories without visual examples
-* - 📸 Snapshot - Stories with snapshot tests
-* - 🧪 Unit - Stories with unit tests
-* - 🔗 Integration - Stories with integration tests
-*
-* Also includes the default version badge from `storybook-addon-tag-badges`.
-*/
+/** Badge (✏️) for stories with a live editor. Shown in sidebar on story and inherited. */
 const editorBadge = {
 	tags: "editor",
 	badge: {
@@ -37,6 +19,7 @@ const editorBadge = {
 		skipInherited: false
 	} }
 };
+/** Badge (🆕) for recently added stories. */
 const newBadge = {
 	tags: "new",
 	badge: {
@@ -48,6 +31,7 @@ const newBadge = {
 		tooltip: "New"
 	}
 };
+/** Badge (🅱️) for stories covering features in beta. */
 const betaBadge = {
 	tags: "beta",
 	badge: {
@@ -59,6 +43,7 @@ const betaBadge = {
 		tooltip: "Beta"
 	}
 };
+/** Badge (🔧) for stories that demonstrate props or configuration. */
 const propsBadge = {
 	tags: "props",
 	badge: {
@@ -70,6 +55,7 @@ const propsBadge = {
 		tooltip: "Props"
 	}
 };
+/** Badge (🪦) for stories documenting deprecated features. */
 const deprecatedBadge = {
 	tags: "deprecated",
 	badge: {
@@ -81,6 +67,7 @@ const deprecatedBadge = {
 		tooltip: "Deprecated"
 	}
 };
+/** Badge (⚠️) for stories that need updating. */
 const outdatedBadge = {
 	tags: "outdated",
 	badge: {
@@ -92,6 +79,7 @@ const outdatedBadge = {
 		tooltip: "Outdated"
 	}
 };
+/** Badge (🚨) for stories demonstrating dangerous or cautionary patterns. */
 const dangerBadge = {
 	tags: "danger",
 	badge: {
@@ -103,6 +91,7 @@ const dangerBadge = {
 		tooltip: "Dangerous"
 	}
 };
+/** Badge (📋) for stories marked as todo or incomplete. */
 const todoBadge = {
 	tags: "todo",
 	badge: {
@@ -114,6 +103,7 @@ const todoBadge = {
 		tooltip: "Todo"
 	}
 };
+/** Badge (📝) for stories without visual examples (code-only). Hidden in MDX. */
 const codeOnlyBadge = {
 	tags: "code-only",
 	badge: {
@@ -126,6 +116,46 @@ const codeOnlyBadge = {
 	},
 	display: { mdx: false }
 };
+/** Badge (<T>) for stories that showcase or document TypeScript types. Hidden in MDX. */
+const typeBadge = {
+	tags: "type",
+	badge: {
+		text: "<T>",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "TypeScript Types"
+	},
+	display: { mdx: true }
+};
+/** Badge (ƒ(x)) for stories that showcase or document functions. Hidden in MDX. */
+const functionBadge = {
+	tags: "func",
+	badge: {
+		text: "ƒ(x)",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Function"
+	},
+	display: { mdx: true }
+};
+/** Badge (var) for stories that describe values and variables. */
+const varBadge = {
+	tags: "var",
+	badge: {
+		text: "var",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Variables"
+	},
+	display: { mdx: true }
+};
+/** Badge (`</>`) for source-code-focused stories. Hidden in MDX. */
 const sourceBadge = {
 	tags: "source",
 	badge: {
@@ -138,6 +168,7 @@ const sourceBadge = {
 	},
 	display: { mdx: false }
 };
+/** Badge (📸) for stories with snapshot tests. Shown in toolbar only, not in sidebar. */
 const snapshotBadge = {
 	tags: "snapshot",
 	badge: {
@@ -153,6 +184,7 @@ const snapshotBadge = {
 		toolbar: ["story"]
 	}
 };
+/** Badge (🧪) for stories with unit tests. */
 const unitBadge = {
 	tags: "unit",
 	badge: {
@@ -165,6 +197,7 @@ const unitBadge = {
 	},
 	display: { sidebar: true }
 };
+/** Badge (🔗) for stories with integration tests. Hidden in sidebar. */
 const integrationBadge = {
 	tags: "integration",
 	badge: {
@@ -177,6 +210,7 @@ const integrationBadge = {
 	},
 	display: { sidebar: false }
 };
+/** Badge (⌨️) for stories that demonstrate or test keyboard interaction. */
 const keyboardBadge = {
 	tags: "keyboard",
 	badge: {
@@ -188,6 +222,7 @@ const keyboardBadge = {
 		tooltip: "Keyboard Interaction"
 	}
 };
+/** Badge (🔒) for internal or private-use-only stories. */
 const internalBadge = {
 	tags: "internal",
 	badge: {
@@ -199,24 +234,53 @@ const internalBadge = {
 		tooltip: "Internal"
 	}
 };
+/**
+* Configuration for story tag badges that appear in the Storybook sidebar.
+* Each badge is associated with a specific tag and displays an emoji or symbol with a tooltip.
+*
+* The badges help visually identify stories with certain characteristics:
+* - 🆕 New - Recently added stories
+* - 🅱️ Beta - Stories for features in beta
+* - 🪦 Deprecated - Stories for deprecated features
+* - ⚠️ Outdated - Stories that need updating
+* - ✏️ Editor - Stories with live editor
+* - 🧪 Unit - Stories with unit tests
+* - 🔗 Integration - Stories with integration tests
+* - ⌨️ Keyboard - Stories that demonstrate or test keyboard interaction
+* - 🚨 Danger - Stories demonstrating dangerous patterns
+* - `</>` Source - Source-code-focused stories
+* - `<T>` Type - Stories that showcase or document TypeScript types
+* - `ƒ(x)` Function - Stories that showcase or document functions
+* - `var` Variables - Stories that describe values and variables
+* - 🔧 Props - Stories that demonstrate props or configuration
+* - 📝 Code Only - Stories without visual examples
+* - 📋 Todo - Stories marked as todo/incomplete
+* - `next` - (`version:next`) The component or function is available in the next version
+* - `x.y` - (`version:x.y`) The component or function was created or updated in the x.y version
+* - 🔒 Internal - Internal or private-use-only stories
+* - 📸 Snapshot - Stories with snapshot tests
+*/
 const tagBadges = [
-	editorBadge,
-	sourceBadge,
-	unitBadge,
-	integrationBadge,
-	keyboardBadge,
 	newBadge,
 	betaBadge,
 	deprecatedBadge,
 	outdatedBadge,
+	editorBadge,
+	unitBadge,
+	integrationBadge,
+	keyboardBadge,
 	dangerBadge,
+	sourceBadge,
+	typeBadge,
+	functionBadge,
+	varBadge,
 	propsBadge,
-	todoBadge,
 	codeOnlyBadge,
+	todoBadge,
 	versionBadge,
 	internalBadge,
 	snapshotBadge
 ];
 
 //#endregion
-export { betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, propsBadge, snapshotBadge, sourceBadge, tagBadges, todoBadge, unitBadge };
+export { betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, functionBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, propsBadge, snapshotBadge, sourceBadge, tagBadges, todoBadge, typeBadge, unitBadge, varBadge };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobuddy/storybook",
-  "version": "2.14.0",
+  "version": "2.16.0",
   "description": "Storybook repo buddy",
   "keywords": [
     "storybook",

package/readme.md

@@ -1,5 +1,9 @@
 # @repobuddy/storybook
 
+[![npm version](https://img.shields.io/npm/v/@repobuddy/storybook.svg)](https://www.npmjs.com/package/@repobuddy/storybook)
+[![npm downloads](https://img.shields.io/npm/dm/@repobuddy/storybook.svg)](https://www.npmjs.com/package/@repobuddy/storybook)
+[![GitHub Actions](https://github.com/repobuddy/storybook/actions/workflows/release.yml/badge.svg)](https://github.com/repobuddy/storybook/actions/workflows/release.yml)
+
 Your repository buddy for Storybook.
 
 > [!NOTE]

package/src/contexts/{story_card_scope.tsx → _story_card_scope.tsx}

@@ -5,7 +5,7 @@ import {
 	type StoryCardEntry,
 	StoryCardRegistryContext,
 	type StoryCardRegistryContextValue
-} from './story_card_registry_context.js'
+} from './_story_card_registry_context.js'
 
 export type StoryCardScopeProps = { Story: ComponentType } & StoryCardEntry
 

package/src/decorators/show_doc_source.tsx

@@ -5,7 +5,7 @@ import { addons } from 'storybook/preview-api'
 import { convert, ThemeProvider, themes } from 'storybook/theming'
 import { twJoin } from 'tailwind-merge'
 import { StoryCard, type StoryCardProps } from '../components/story_card'
-import { StoryCardScope } from '../contexts/story_card_scope'
+import { StoryCardScope } from '../contexts/_story_card_scope'
 
 const channel = addons.getChannel()
 

package/src/decorators/with_story_card.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 import type { DecoratorFunction, Renderer } from 'storybook/internal/csf'
 import type { StoryCardProps, StoryCardStatus } from '../components/story_card.js'
-import { StoryCardScope } from '../contexts/story_card_scope.js'
+import { StoryCardScope } from '../contexts/_story_card_scope.js'
 import type { StoryCardParam } from '../parameters/define_story_card_param.js'
 
 export type WithStoryCardProps = Omit<StoryCardProps, 'children' | 'className'> & {

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

@@ -10,6 +10,9 @@ type TagBadgeParameter = TagBadgeParameters[0]
 export type TagNames =
 	| 'editor'
 	| 'source'
+	| 'type'
+	| 'func'
+	| 'var'
 	| 'new'
 	| 'beta'
 	| 'props'
@@ -26,25 +29,7 @@ export type TagNames =
 	| 'usecase'
 	| 'version:next'
 
-/**
- * Configuration for story tag badges that appear in the Storybook sidebar.
- * Each badge is associated with a specific tag and displays an emoji with a tooltip.
- *
- * The badges help visually identify stories with certain characteristics:
- * - ✏️ Editor - Stories with live editor
- * - 🆕 New - Recently added stories
- * - 🅱️ Beta - Stories for features in beta
- * - 🪦 Deprecated - Stories for deprecated features
- * - ⚠️ Outdated - Stories that need updating
- * - 🚨 Danger - Stories demonstrating dangerous patterns
- * - 📋 Todo - Stories marked as todo/incomplete
- * - 📝 Code Only - Stories without visual examples
- * - 📸 Snapshot - Stories with snapshot tests
- * - 🧪 Unit - Stories with unit tests
- * - 🔗 Integration - Stories with integration tests
- *
- * Also includes the default version badge from `storybook-addon-tag-badges`.
- */
+/** Badge (✏️) for stories with a live editor. Shown in sidebar on story and inherited. */
 export const editorBadge: TagBadgeParameter = {
 	tags: 'editor',
 	badge: {
@@ -63,6 +48,7 @@ export const editorBadge: TagBadgeParameter = {
 	}
 }
 
+/** Badge (🆕) for recently added stories. */
 export const newBadge: TagBadgeParameter = {
 	tags: 'new',
 	badge: {
@@ -75,6 +61,7 @@ export const newBadge: TagBadgeParameter = {
 	}
 }
 
+/** Badge (🅱️) for stories covering features in beta. */
 export const betaBadge: TagBadgeParameter = {
 	tags: 'beta',
 	badge: {
@@ -87,6 +74,7 @@ export const betaBadge: TagBadgeParameter = {
 	}
 }
 
+/** Badge (🔧) for stories that demonstrate props or configuration. */
 export const propsBadge: TagBadgeParameter = {
 	tags: 'props',
 	badge: {
@@ -99,6 +87,7 @@ export const propsBadge: TagBadgeParameter = {
 	}
 }
 
+/** Badge (🪦) for stories documenting deprecated features. */
 export const deprecatedBadge: TagBadgeParameter = {
 	tags: 'deprecated',
 	badge: {
@@ -111,6 +100,7 @@ export const deprecatedBadge: TagBadgeParameter = {
 	}
 }
 
+/** Badge (⚠️) for stories that need updating. */
 export const outdatedBadge: TagBadgeParameter = {
 	tags: 'outdated',
 	badge: {
@@ -123,6 +113,7 @@ export const outdatedBadge: TagBadgeParameter = {
 	}
 }
 
+/** Badge (🚨) for stories demonstrating dangerous or cautionary patterns. */
 export const dangerBadge: TagBadgeParameter = {
 	tags: 'danger',
 	badge: {
@@ -135,6 +126,7 @@ export const dangerBadge: TagBadgeParameter = {
 	}
 }
 
+/** Badge (📋) for stories marked as todo or incomplete. */
 export const todoBadge: TagBadgeParameter = {
 	tags: 'todo',
 	badge: {
@@ -147,6 +139,7 @@ export const todoBadge: TagBadgeParameter = {
 	}
 }
 
+/** Badge (📝) for stories without visual examples (code-only). Hidden in MDX. */
 export const codeOnlyBadge: TagBadgeParameter = {
 	tags: 'code-only',
 	badge: {
@@ -162,6 +155,55 @@ export const codeOnlyBadge: TagBadgeParameter = {
 	}
 }
 
+/** Badge (<T>) for stories that showcase or document TypeScript types. Hidden in MDX. */
+export const typeBadge: TagBadgeParameter = {
+	tags: 'type',
+	badge: {
+		text: '<T>',
+		style: {
+			backgroundColor: 'transparent',
+			borderColor: 'transparent'
+		},
+		tooltip: 'TypeScript Types'
+	},
+	display: {
+		mdx: true
+	}
+}
+
+/** Badge (ƒ(x)) for stories that showcase or document functions. Hidden in MDX. */
+export const functionBadge: TagBadgeParameter = {
+	tags: 'func',
+	badge: {
+		text: 'ƒ(x)',
+		style: {
+			backgroundColor: 'transparent',
+			borderColor: 'transparent'
+		},
+		tooltip: 'Function'
+	},
+	display: {
+		mdx: true
+	}
+}
+
+/** Badge (var) for stories that describe values and variables. */
+export const varBadge: TagBadgeParameter = {
+	tags: 'var',
+	badge: {
+		text: 'var',
+		style: {
+			backgroundColor: 'transparent',
+			borderColor: 'transparent'
+		},
+		tooltip: 'Variables'
+	},
+	display: {
+		mdx: true
+	}
+}
+
+/** Badge (`</>`) for source-code-focused stories. Hidden in MDX. */
 export const sourceBadge: TagBadgeParameter = {
 	tags: 'source',
 	badge: {
@@ -177,6 +219,7 @@ export const sourceBadge: TagBadgeParameter = {
 	}
 }
 
+/** Badge (📸) for stories with snapshot tests. Shown in toolbar only, not in sidebar. */
 export const snapshotBadge: TagBadgeParameter = {
 	tags: 'snapshot',
 	badge: {
@@ -193,6 +236,7 @@ export const snapshotBadge: TagBadgeParameter = {
 	}
 }
 
+/** Badge (🧪) for stories with unit tests. */
 export const unitBadge: TagBadgeParameter = {
 	tags: 'unit',
 	badge: {
@@ -208,6 +252,7 @@ export const unitBadge: TagBadgeParameter = {
 	}
 }
 
+/** Badge (🔗) for stories with integration tests. Hidden in sidebar. */
 export const integrationBadge: TagBadgeParameter = {
 	tags: 'integration',
 	badge: {
@@ -223,6 +268,7 @@ export const integrationBadge: TagBadgeParameter = {
 	}
 }
 
+/** Badge (⌨️) for stories that demonstrate or test keyboard interaction. */
 export const keyboardBadge: TagBadgeParameter = {
 	tags: 'keyboard',
 	badge: {
@@ -235,6 +281,7 @@ export const keyboardBadge: TagBadgeParameter = {
 	}
 }
 
+/** Badge (🔒) for internal or private-use-only stories. */
 export const internalBadge: TagBadgeParameter = {
 	tags: 'internal',
 	badge: {
@@ -247,20 +294,49 @@ export const internalBadge: TagBadgeParameter = {
 	}
 }
 
+/**
+ * Configuration for story tag badges that appear in the Storybook sidebar.
+ * Each badge is associated with a specific tag and displays an emoji or symbol with a tooltip.
+ *
+ * The badges help visually identify stories with certain characteristics:
+ * - 🆕 New - Recently added stories
+ * - 🅱️ Beta - Stories for features in beta
+ * - 🪦 Deprecated - Stories for deprecated features
+ * - ⚠️ Outdated - Stories that need updating
+ * - ✏️ Editor - Stories with live editor
+ * - 🧪 Unit - Stories with unit tests
+ * - 🔗 Integration - Stories with integration tests
+ * - ⌨️ Keyboard - Stories that demonstrate or test keyboard interaction
+ * - 🚨 Danger - Stories demonstrating dangerous patterns
+ * - `</>` Source - Source-code-focused stories
+ * - `<T>` Type - Stories that showcase or document TypeScript types
+ * - `ƒ(x)` Function - Stories that showcase or document functions
+ * - `var` Variables - Stories that describe values and variables
+ * - 🔧 Props - Stories that demonstrate props or configuration
+ * - 📝 Code Only - Stories without visual examples
+ * - 📋 Todo - Stories marked as todo/incomplete
+ * - `next` - (`version:next`) The component or function is available in the next version
+ * - `x.y` - (`version:x.y`) The component or function was created or updated in the x.y version
+ * - 🔒 Internal - Internal or private-use-only stories
+ * - 📸 Snapshot - Stories with snapshot tests
+ */
 export const tagBadges: TagBadgeParameters = [
-	editorBadge,
-	sourceBadge,
-	unitBadge,
-	integrationBadge,
-	keyboardBadge,
 	newBadge,
 	betaBadge,
 	deprecatedBadge,
 	outdatedBadge,
+	editorBadge,
+	unitBadge,
+	integrationBadge,
+	keyboardBadge,
 	dangerBadge,
+	sourceBadge,
+	typeBadge,
+	functionBadge,
+	varBadge,
 	propsBadge,
-	todoBadge,
 	codeOnlyBadge,
+	todoBadge,
 	versionBadge,
 	internalBadge,
 	snapshotBadge