@repobuddy/storybook 2.9.0 → 2.10.0

package/esm/index.d.ts

@@ -785,7 +785,7 @@ interface StoryCardParam {
  * }
  * ```
  */
-declare function defineStoryCard(storyCard: StoryCardParam['storyCard']): StoryCardParam;
+declare function defineStoryCardParam(storyCard: StoryCardParam['storyCard']): StoryCardParam;
 //#endregion
 //#region src/testing/decorators/when_running_in_test.d.ts
 /**
@@ -793,52 +793,6 @@ declare function defineStoryCard(storyCard: StoryCardParam['storyCard']): StoryC
  */
 declare function whenRunningInTest<TArgs = StrictArgs>(decoratorOrHandler: ((...args: Parameters<Decorator<TArgs>>) => ReturnType<Decorator<TArgs>> | undefined | void) | (() => ReturnType<Decorator<TArgs>> | undefined | void)): Decorator<TArgs>;
 //#endregion
-//#region src/types.d.ts
-/**
- * Extends the Storybook Meta type with custom tag types
- * @template TCmpOrArgs - The component or args type
- * @template M - The base Meta type
- * @template E - The extension type containing tagType
- *
- * @deprecated use `import { ExtendsMeta } from '@repobuddy/storybook'` instead.
- *
- * @example
- * ```ts
- * // Create a generic Meta type for a project
- * type Meta<TCmpOrArgs = Args> = ExtendMeta<TCmpOrArgs, Meta<TCmpOrArgs>, { tagType: 'tag1' | 'tag2' }>
- *
- * // Create a specific Meta type for a component
- * type Meta = ExtendMeta<typeof Component, Meta<typeof Component>, { tagType: 'tag1' | 'tag2' }>
- * ```
- */
-type ExtendMeta<TCmpOrArgs, M extends Meta<TCmpOrArgs>, E extends {
-  tag: string;
-}> = Omit<M, 'tags'> & {
-  tags?: Array<E['tag'] | (string & {})> | undefined;
-};
-/**
- * Extends the Storybook StoryObj type with custom tag types
- * @template TMetaOrCmpOrArgs - The meta, component or args type
- * @template S - The base StoryObj type
- * @template E - The extension type containing tagType
- *
- * @deprecated use `import { ExtendsStoryObj } from '@repobuddy/storybook'` instead.
- *
- * @example
- * ```ts
- * // Create a generic StoryObj type for a project
- * type StoryObj<TMetaOrCmpOrArgs = Args> = ExtendStoryObj<TMetaOrCmpOrArgs, StoryObj<TMetaOrCmpOrArgs>, { tagType: 'tag1' | 'tag2' }>
- *
- * // Create a specific StoryObj type for a component
- * type StoryObj = ExtendStoryObj<typeof Component, StoryObj<typeof Component>, { tagType: 'tag1' | 'tag2' }>
- * ```
- */
-type ExtendStoryObj<TMetaOrCmpOrArgs, S extends StoryObj<TMetaOrCmpOrArgs>, E extends {
-  tag: string;
-}> = Omit<S, 'tags'> & {
-  tags?: Array<E['tag'] | (string & {})> | undefined;
-};
-//#endregion
 //#region src/types/_extract_string_literals.d.ts
 type ExtractStringLiterals<T> = T extends any ? (string extends T ? never : T) : never;
 //#endregion
@@ -914,4 +868,50 @@ type ExtendsStoryObj<S extends {
   tags?: ExtractStringLiterals<NonNullable<S['tags']>[number]> extends infer MT ? IsStringLiteral<MT> extends true ? Array<(string & {}) | MT | E['tag']> | undefined : Array<(string & {}) | E['tag']> | undefined : never;
 };
 //#endregion
-export { ActionsParam, BackgroundsParam, DocsParam, ExtendMeta, ExtendStoryObj, ExtendsMeta, ExtendsStoryObj, FnToArgTypes, GlobalApiBackgroundsParam, GlobalApiViewportParam, LayoutParam, ShowHtml, ShowHtmlProps, SourceProps, StoryCard, StoryCardParam, StoryCardProps, StoryCardStatus, StorySortParam, StorybookBuiltInParams, TestParam, Viewport, ViewportParam, WithStoryCardProps, defineActionsParam, defineBackgroundsParam, defineDocsParam, defineLayoutParam, defineParameters, defineStoryCard, defineTestParam, defineViewportParam, showDocSource, whenRunningInTest, withStoryCard };
+//#region src/types.d.ts
+/**
+ * Extends the Storybook Meta type with custom tag types
+ * @template TCmpOrArgs - The component or args type
+ * @template M - The base Meta type
+ * @template E - The extension type containing tagType
+ *
+ * @deprecated use `import { ExtendsMeta } from '@repobuddy/storybook'` instead.
+ *
+ * @example
+ * ```ts
+ * // Create a generic Meta type for a project
+ * type Meta<TCmpOrArgs = Args> = ExtendMeta<TCmpOrArgs, Meta<TCmpOrArgs>, { tagType: 'tag1' | 'tag2' }>
+ *
+ * // Create a specific Meta type for a component
+ * type Meta = ExtendMeta<typeof Component, Meta<typeof Component>, { tagType: 'tag1' | 'tag2' }>
+ * ```
+ */
+type ExtendMeta<TCmpOrArgs, M extends Meta<TCmpOrArgs>, E extends {
+  tag: string;
+}> = Omit<M, 'tags'> & {
+  tags?: Array<E['tag'] | (string & {})> | undefined;
+};
+/**
+ * Extends the Storybook StoryObj type with custom tag types
+ * @template TMetaOrCmpOrArgs - The meta, component or args type
+ * @template S - The base StoryObj type
+ * @template E - The extension type containing tagType
+ *
+ * @deprecated use `import { ExtendsStoryObj } from '@repobuddy/storybook'` instead.
+ *
+ * @example
+ * ```ts
+ * // Create a generic StoryObj type for a project
+ * type StoryObj<TMetaOrCmpOrArgs = Args> = ExtendStoryObj<TMetaOrCmpOrArgs, StoryObj<TMetaOrCmpOrArgs>, { tagType: 'tag1' | 'tag2' }>
+ *
+ * // Create a specific StoryObj type for a component
+ * type StoryObj = ExtendStoryObj<typeof Component, StoryObj<typeof Component>, { tagType: 'tag1' | 'tag2' }>
+ * ```
+ */
+type ExtendStoryObj<TMetaOrCmpOrArgs, S extends StoryObj<TMetaOrCmpOrArgs>, E extends {
+  tag: string;
+}> = Omit<S, 'tags'> & {
+  tags?: Array<E['tag'] | (string & {})> | undefined;
+};
+//#endregion
+export { ActionsParam, BackgroundsParam, DocsParam, ExtendMeta, ExtendStoryObj, ExtendsMeta, ExtendsStoryObj, FnToArgTypes, GlobalApiBackgroundsParam, GlobalApiViewportParam, LayoutParam, ShowHtml, ShowHtmlProps, SourceProps, StoryCard, StoryCardParam, StoryCardProps, StoryCardStatus, StorySortParam, StorybookBuiltInParams, TestParam, Viewport, ViewportParam, WithStoryCardProps, defineActionsParam, defineBackgroundsParam, defineDocsParam, defineLayoutParam, defineParameters, defineStoryCardParam, defineTestParam, defineViewportParam, showDocSource, whenRunningInTest, withStoryCard };

package/esm/index.js

@@ -447,7 +447,7 @@ function defineParameters(param, ...rest) {
 * }
 * ```
 */
-function defineStoryCard(storyCard) {
+function defineStoryCardParam(storyCard) {
 	return { storyCard };
 }
 
@@ -522,4 +522,4 @@ function whenRunningInTest(decoratorOrHandler) {
 }
 
 //#endregion
-export { ShowHtml, StoryCard, defineActionsParam, defineBackgroundsParam, defineDocsParam, defineLayoutParam, defineParameters, defineStoryCard, defineTestParam, defineViewportParam, showDocSource, whenRunningInTest, withStoryCard };
+export { ShowHtml, StoryCard, defineActionsParam, defineBackgroundsParam, defineDocsParam, defineLayoutParam, defineParameters, defineStoryCardParam, defineTestParam, defineViewportParam, showDocSource, whenRunningInTest, withStoryCard };

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

@@ -44,30 +44,6 @@ declare const keyboardBadge: TagBadgeParameter;
 declare const internalBadge: TagBadgeParameter;
 declare const tagBadges: TagBadgeParameters;
 //#endregion
-//#region src/types.d.ts
-/**
- * Extends the Storybook StoryObj type with custom tag types
- * @template TMetaOrCmpOrArgs - The meta, component or args type
- * @template S - The base StoryObj type
- * @template E - The extension type containing tagType
- *
- * @deprecated use `import { ExtendsStoryObj } from '@repobuddy/storybook'` instead.
- *
- * @example
- * ```ts
- * // Create a generic StoryObj type for a project
- * type StoryObj<TMetaOrCmpOrArgs = Args> = ExtendStoryObj<TMetaOrCmpOrArgs, StoryObj<TMetaOrCmpOrArgs>, { tagType: 'tag1' | 'tag2' }>
- *
- * // Create a specific StoryObj type for a component
- * type StoryObj = ExtendStoryObj<typeof Component, StoryObj<typeof Component>, { tagType: 'tag1' | 'tag2' }>
- * ```
- */
-type ExtendStoryObj<TMetaOrCmpOrArgs, S extends StoryObj$1<TMetaOrCmpOrArgs>, E extends {
-  tag: string;
-}> = Omit<S, 'tags'> & {
-  tags?: Array<E['tag'] | (string & {})> | undefined;
-};
-//#endregion
 //#region src/types/_extract_string_literals.d.ts
 type ExtractStringLiterals<T> = T extends any ? (string extends T ? never : T) : never;
 //#endregion
@@ -107,6 +83,30 @@ type ExtendsMeta<M extends {
   tags?: ExtractStringLiterals<NonNullable<M['tags']>[number]> extends infer MT ? IsStringLiteral<MT> extends true ? Array<(string & {}) | MT | E['tag']> | undefined : Array<(string & {}) | E['tag']> | undefined : never;
 };
 //#endregion
+//#region src/types.d.ts
+/**
+ * Extends the Storybook StoryObj type with custom tag types
+ * @template TMetaOrCmpOrArgs - The meta, component or args type
+ * @template S - The base StoryObj type
+ * @template E - The extension type containing tagType
+ *
+ * @deprecated use `import { ExtendsStoryObj } from '@repobuddy/storybook'` instead.
+ *
+ * @example
+ * ```ts
+ * // Create a generic StoryObj type for a project
+ * type StoryObj<TMetaOrCmpOrArgs = Args> = ExtendStoryObj<TMetaOrCmpOrArgs, StoryObj<TMetaOrCmpOrArgs>, { tagType: 'tag1' | 'tag2' }>
+ *
+ * // Create a specific StoryObj type for a component
+ * type StoryObj = ExtendStoryObj<typeof Component, StoryObj<typeof Component>, { tagType: 'tag1' | 'tag2' }>
+ * ```
+ */
+type ExtendStoryObj<TMetaOrCmpOrArgs, S extends StoryObj$1<TMetaOrCmpOrArgs>, E extends {
+  tag: string;
+}> = Omit<S, 'tags'> & {
+  tags?: Array<E['tag'] | (string & {})> | undefined;
+};
+//#endregion
 //#region src/storybook-addon-tag-badges/types.d.ts
 type Meta<TCmpOrArgs = Args> = ExtendsMeta<Meta$1<TCmpOrArgs>, {
   tag: TagNames;

package/esm/storybook-dark-mode/index.js

@@ -1,6 +1,6 @@
 
-import { DARK_MODE_EVENT_NAME, useDarkMode } from "@storybook-community/storybook-dark-mode";
 import { DocsContainer } from "@storybook/addon-docs/blocks";
+import { DARK_MODE_EVENT_NAME, useDarkMode } from "@storybook-community/storybook-dark-mode";
 import { useEffect, useState } from "react";
 import { themes } from "storybook/theming";
 import { jsx } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobuddy/storybook",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "description": "Storybook repo buddy",
   "keywords": [
     "storybook",
@@ -39,6 +39,9 @@
       "types": "./esm/storybook-dark-mode/index.d.ts",
       "default": "./esm/storybook-dark-mode/index.js"
     },
+    "./tailwind": {
+      "style": "./tailwind.css"
+    },
     "./styles.css": "./styles.css"
   },
   "files": [
@@ -46,6 +49,7 @@
     "esm",
     "src",
     "styles.css",
+    "tailwind.css",
     "!**/*.{spec,test,unit,accept,integrate,system,perf,stress,study,stories}.*",
     "!**/*.mdx"
   ],

package/readme.md

@@ -139,10 +139,15 @@ export const preview: Preview = {
 
 [`@repobuddy/storybook`][`@repobuddy/storybook`] uses Tailwind CSS 4 and the prefix `rbsb:` to avoid conflicts with user styles.
 
-To use the styles, import `@repobuddy/storybook/styles.css`:
+To use the styles, import `@repobuddy/storybook/tailwind` in your Tailwind config:
 
-```ts
-import '@repobuddy/storybook/styles.css'
+```css
+/* tailwind.css */
+@import "tailwindcss";
+@import "@repobuddy/storybook/tailwind";
+
+/* specify your dark variant mechanism */
+@custom-variant dark (&:where(.dark, .dark *));
 ```
 
 [`@repobuddy/storybook`]: https://github.com/repobuddy/storybook

package/src/decorators/with_story_card.tsx

@@ -1,12 +1,12 @@
 import {
+	type ComponentType,
 	createContext,
+	type ReactNode,
 	useContext,
 	useLayoutEffect,
 	useMemo,
 	useRef,
-	useState,
-	type ComponentType,
-	type ReactNode
+	useState
 } from 'react'
 import type { DecoratorFunction, Renderer } from 'storybook/internal/csf'
 import type { RequiredPick } from 'type-plus'

package/src/index.ts

@@ -14,6 +14,6 @@ export * from './parameters/define_test_param.ts'
 export * from './parameters/define_viewport_param.ts'
 export * from './parameters/story_sort.ts'
 export * from './testing/decorators/when_running_in_test.tsx'
-export type * from './types.ts'
 export * from './types/extends_meta.ts'
 export * from './types/extends_story_obj.ts'
+export type * from './types.ts'

package/src/parameters/define_story_card_param.ts

@@ -78,6 +78,6 @@ export interface StoryCardParam {
  * }
  * ```
  */
-export function defineStoryCard(storyCard: StoryCardParam['storyCard']): StoryCardParam {
+export function defineStoryCardParam(storyCard: StoryCardParam['storyCard']): StoryCardParam {
 	return { storyCard }
 }

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

@@ -1,4 +1,4 @@
-import { type TagBadgeParameters, defaultConfig } from 'storybook-addon-tag-badges/manager-helpers'
+import { defaultConfig, type TagBadgeParameters } from 'storybook-addon-tag-badges/manager-helpers'
 
 const [, , , , , , versionBadge] = defaultConfig
 

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

@@ -1,6 +1,6 @@
 import type { Args, Meta as M, StoryObj as SBO } from '@storybook/react-vite'
-import type { ExtendStoryObj } from '../types.js'
 import type { ExtendsMeta } from '../types/extends_meta.js'
+import type { ExtendStoryObj } from '../types.js'
 import type { TagNames } from './tag_badges.js'
 
 export type Meta<TCmpOrArgs = Args> = ExtendsMeta<M<TCmpOrArgs>, { tag: TagNames }>

package/src/storybook-dark-mode/dark_mode_docs_container.tsx

@@ -1,5 +1,5 @@
-import { DARK_MODE_EVENT_NAME } from '@storybook-community/storybook-dark-mode'
 import { DocsContainer, type DocsContextProps } from '@storybook/addon-docs/blocks'
+import { DARK_MODE_EVENT_NAME } from '@storybook-community/storybook-dark-mode'
 import { type PropsWithChildren, useEffect, useState } from 'react'
 import { type ThemeVars, themes } from 'storybook/theming'
 

package/styles.css

@@ -1,6 +1,5 @@
 /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
 @layer properties;
-@layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
     --rbsb-color-red-100: oklch(93.6% 0.032 17.717);

package/tailwind.css

@@ -0,0 +1,4 @@
+@import "tailwindcss/theme.css" layer(theme) prefix(rbsb);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+@source "src/**";