@repobuddy/storybook 0.10.0 → 0.11.1

package/esm/manager/index.d.ts

@@ -1,2 +1 @@
 export * from './brand_title.ts';
-export * from './tag_badges.ts';

package/esm/manager/index.js

@@ -1,2 +1 @@
 export * from "./brand_title.js";
-export * from "./tag_badges.js";

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

@@ -0,0 +1 @@
+export * from './tag_badges.ts';

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

@@ -0,0 +1 @@
+export * from "./tag_badges.js";

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

@@ -0,0 +1,35 @@
+import { type TagBadgeParameters } from 'storybook-addon-tag-badges';
+type TagBadgeParameter = TagBadgeParameters[0];
+/**
+ * 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`.
+ */
+export declare const editorBadge: TagBadgeParameter;
+export declare const newBadge: TagBadgeParameter;
+export declare const betaBadge: TagBadgeParameter;
+export declare const propsBadge: TagBadgeParameter;
+export declare const deprecatedBadge: TagBadgeParameter;
+export declare const outdatedBadge: TagBadgeParameter;
+export declare const dangerBadge: TagBadgeParameter;
+export declare const todoBadge: TagBadgeParameter;
+export declare const codeOnlyBadge: TagBadgeParameter;
+export declare const snapshotBadge: TagBadgeParameter;
+export declare const unitBadge: TagBadgeParameter;
+export declare const integrationBadge: TagBadgeParameter;
+export declare const tagBadges: TagBadgeParameters;
+export {};

package/esm/{manager → storybook-addon-tag-badges}/tag_badges.js

@@ -50,6 +50,15 @@ export const betaBadge = {
         tooltip: 'Beta'
     }
 };
+export const propsBadge = {
+    tags: 'props',
+    badge: {
+        text: '🔧',
+        bgColor: 'transparent',
+        borderColor: 'transparent',
+        tooltip: 'Props'
+    }
+};
 export const deprecatedBadge = {
     tags: 'deprecated',
     badge: {
@@ -104,7 +113,7 @@ export const snapshotBadge = {
         tooltip: 'Snapshot Test'
     },
     display: {
-        sidebar: ['story'],
+        sidebar: false,
         toolbar: ['story']
     }
 };
@@ -115,6 +124,9 @@ export const unitBadge = {
         bgColor: 'transparent',
         borderColor: 'transparent',
         tooltip: 'Unit Test'
+    },
+    display: {
+        sidebar: false
     }
 };
 export const integrationBadge = {
@@ -124,6 +136,9 @@ export const integrationBadge = {
         bgColor: 'transparent',
         borderColor: 'transparent',
         tooltip: 'Integration Test'
+    },
+    display: {
+        sidebar: false
     }
 };
 export const tagBadges = [
@@ -135,6 +150,7 @@ export const tagBadges = [
     deprecatedBadge,
     outdatedBadge,
     dangerBadge,
+    propsBadge,
     todoBadge,
     codeOnlyBadge,
     snapshotBadge,

package/esm/storybook-dark-mode/dark_mode_docs_container.d.ts

@@ -19,8 +19,8 @@ import { type PropsWithChildren } from 'react';
  * ```
  */
 export declare function createDarkModeDocsContainer(customThemes?: {
-    light: ThemeVars;
-    dark: ThemeVars;
-}): (props: PropsWithChildren<{
+    light?: ThemeVars | undefined;
+    dark?: ThemeVars | undefined;
+} | undefined): (props: PropsWithChildren<{
     context: DocsContextProps;
 }>) => import("react/jsx-runtime").JSX.Element;

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

@@ -20,13 +20,13 @@ import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
  * }
  * ```
  */
-export function createDarkModeDocsContainer(customThemes = themes) {
+export function createDarkModeDocsContainer(customThemes) {
     return function DarkModeDocsContainer(props) {
         const [isDark, setDark] = useState(true);
         useEffect(() => {
             props.context.channel.on(DARK_MODE_EVENT_NAME, setDark);
             return () => props.context.channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
         }, [props.context.channel]);
-        return (_jsx(DocsContainer, { ...props, theme: isDark ? customThemes.dark : customThemes.light, children: props.children }));
+        return (_jsx(DocsContainer, { ...props, theme: isDark ? (customThemes?.dark ?? themes.dark) : (customThemes?.light ?? themes.light), children: props.children }));
     };
 }

package/esm/storybook-dark-mode/define_dark_mode.d.ts

@@ -1,37 +1,53 @@
-import type { ThemeVars } from '@storybook/theming';
+import type { CSSProperties } from '@just-web/css';
+import type { ThemeVars } from 'storybook/internal/theming';
 /**
  * Configuration parameters for `storybook-dark-mode`.
  */
 export interface DarkModeParam {
     /** The current theme ('dark' or 'light') */
-    current?: 'dark' | 'light';
-    /** CSS class(es) to apply in dark mode */
-    darkClass?: string | string[];
+    current?: 'dark' | 'light' | undefined;
+    /**
+     * CSS class(es) to apply in dark mode.
+     */
+    darkClass?: string | string[] | undefined;
+    /**
+     * CSS style(s) to apply in dark mode.
+     *
+     * This only works when using `withStoryRoot`.
+     */
+    darkStyle?: CSSProperties | undefined;
     /** CSS class(es) to apply in light mode */
-    lightClass?: string | string[];
+    lightClass?: string | string[] | undefined;
+    /**
+     * CSS style(s) to apply in light mode.
+     *
+     * This only works when using `withStoryRoot`.
+     */
+    lightStyle?: CSSProperties | undefined;
     /** Dark theme variables */
     dark?: ThemeVars;
     /** Light theme variables */
     light?: ThemeVars;
     /** Element to apply theme classes to ('html' or 'body') */
-    classTarget?: 'html' | 'body';
+    classTarget?: 'html' | 'body' | undefined;
     /** Whether to apply theme styles to preview iframe */
-    stylePreview?: boolean;
+    stylePreview?: boolean | undefined;
 }
 /**
  * Defines `storybook-dark-mode` parameters for Storybook stories.
  *
  * @see https://storybook.js.org/addons/@storybook/addon-themes#dark-mode
- *
- * @param darkMode - Configuration for dark mode parameters
- * @param darkMode.current - The current theme ('dark' or 'light')
- * @param darkMode.darkClass - CSS class(es) to apply in dark mode
- * @param darkMode.lightClass - CSS class(es) to apply in light mode
- * @param darkMode.dark - Dark theme variables
- * @param darkMode.light - Light theme variables
- * @param darkMode.classTarget - Element to apply theme classes to ('html' or 'body')
- * @param darkMode.stylePreview - Whether to apply theme styles to preview iframe
  * @returns An object containing the dark mode parameter configuration
+ *
+ * @example
+ * ```ts
+ * // ./storybook/preview.tsx
+ *
+ * export const preview = {
+ *   parameters: {
+ *     ...defineDarkModeParam({ darkClass: 'dark' })
+ *   }
+ * }
  */
 export declare function defineDarkModeParam(darkMode: DarkModeParam): {
     darkMode: DarkModeParam;

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

@@ -2,16 +2,17 @@
  * Defines `storybook-dark-mode` parameters for Storybook stories.
  *
  * @see https://storybook.js.org/addons/@storybook/addon-themes#dark-mode
- *
- * @param darkMode - Configuration for dark mode parameters
- * @param darkMode.current - The current theme ('dark' or 'light')
- * @param darkMode.darkClass - CSS class(es) to apply in dark mode
- * @param darkMode.lightClass - CSS class(es) to apply in light mode
- * @param darkMode.dark - Dark theme variables
- * @param darkMode.light - Light theme variables
- * @param darkMode.classTarget - Element to apply theme classes to ('html' or 'body')
- * @param darkMode.stylePreview - Whether to apply theme styles to preview iframe
  * @returns An object containing the dark mode parameter configuration
+ *
+ * @example
+ * ```ts
+ * // ./storybook/preview.tsx
+ *
+ * export const preview = {
+ *   parameters: {
+ *     ...defineDarkModeParam({ darkClass: 'dark' })
+ *   }
+ * }
  */
 export function defineDarkModeParam(darkMode) {
     return { darkMode };

package/esm/storybook-dark-mode/index.d.ts

@@ -1,3 +1,3 @@
 export * from './dark_mode_docs_container.tsx';
 export * from './define_dark_mode.ts';
-export * from './with_story_root.tsx';
+export * from './with_dark_mode.tsx';

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

@@ -1,3 +1,3 @@
 export * from "./dark_mode_docs_container.js";
 export * from "./define_dark_mode.js";
-export * from "./with_story_root.js";
+export * from "./with_dark_mode.js";

package/esm/storybook-dark-mode/with_dark_mode.d.ts

@@ -0,0 +1,22 @@
+import type { CSSProperties } from '@just-web/css';
+import type { DecoratorFunction } from 'storybook/internal/types';
+/**
+ * Applies additional dark mode behavior.
+ *
+ * @see https://storybook.js.org/addons/@storybook/addon-themes#dark-mode
+ * @returns A decorator function that applies additional dark mode behavior.
+ */
+export declare function withDarkMode(options?: {
+    /**
+     * CSS class(es) to apply to the body element.
+     *
+     * Useful when using Tailwind CSS and `classTarget: 'html'`
+     */
+    bodyClass?: string | string[] | undefined;
+    /**
+     * CSS style(s) to apply to the body element.
+     *
+     * Useful when using Tailwind CSS and `classTarget: 'html'`
+     */
+    bodyStyle?: CSSProperties | undefined;
+} | undefined): DecoratorFunction<any, any>;

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

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { toDOMStyle } from '@just-web/css';
+import { useDarkMode } from 'storybook-dark-mode';
+/**
+ * Applies additional dark mode behavior.
+ *
+ * @see https://storybook.js.org/addons/@storybook/addon-themes#dark-mode
+ * @returns A decorator function that applies additional dark mode behavior.
+ */
+export function withDarkMode(options) {
+    return function darkModeDecorator(Story, { parameters }) {
+        const darkMode = parameters.darkMode;
+        if (!darkMode)
+            return _jsx(Story, {});
+        const dark = useDarkMode();
+        const target = darkMode.classTarget === 'html' ? document.documentElement : document.body;
+        if (dark) {
+            removeClass(target, darkMode.lightClass);
+            addClass(target, darkMode.darkClass);
+            removeStyle(target, darkMode.lightStyle);
+            addStyle(target, darkMode.darkStyle);
+        }
+        else {
+            removeClass(target, darkMode.darkClass);
+            addClass(target, darkMode.lightClass);
+            removeStyle(target, darkMode.darkStyle);
+            addStyle(target, darkMode.lightStyle);
+        }
+        if (options?.bodyClass) {
+            addClass(document.body, options.bodyClass);
+        }
+        if (options?.bodyStyle) {
+            addStyle(document.body, options.bodyStyle);
+        }
+        return _jsx(Story, {});
+    };
+}
+function addClass(target, className) {
+    if (!className)
+        return;
+    if (typeof className === 'string') {
+        target.classList.add(className);
+    }
+    else if (Array.isArray(className)) {
+        target.classList.add(...className);
+    }
+}
+function removeClass(target, className) {
+    if (!className)
+        return;
+    if (typeof className === 'string') {
+        target.classList.remove(className);
+    }
+    else if (Array.isArray(className)) {
+        target.classList.remove(...className);
+    }
+}
+function addStyle(target, style) {
+    if (style) {
+        for (const [key, value] of Object.entries(toDOMStyle(style))) {
+            target.style.setProperty(key, value);
+        }
+    }
+}
+function removeStyle(target, style) {
+    if (style) {
+        for (const key of Object.keys(toDOMStyle(style))) {
+            target.style.removeProperty(key);
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobuddy/storybook",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "Storybook repo buddy",
   "keywords": [
     "storybook",
@@ -23,6 +23,10 @@
       "types": "./esm/manager/index.d.ts",
       "default": "./esm/manager/index.js"
     },
+    "./storybook-addon-tag-badges": {
+      "types": "./esm/storybook-addon-tag-badges/index.d.ts",
+      "default": "./esm/storybook-addon-tag-badges/index.js"
+    },
     "./storybook-dark-mode": {
       "types": "./esm/storybook-dark-mode/index.d.ts",
       "default": "./esm/storybook-dark-mode/index.js"

package/readme.md

@@ -23,7 +23,7 @@ For example:
 import { defineLayoutParam } from '@repobuddy/storybook'
 
 export const MyStory: StoryObj = {
-  parameters: defineLayoutParam('fullscreen')
+	parameters: defineLayoutParam('fullscreen')
 }
 ```
 
@@ -34,13 +34,13 @@ and also allow you to specify additional parameter types.
 import { defineParameters, type ActionsParam } from '@repobuddy/storybook'
 
 export const MyStory: StoryObj = {
-  parameters: defineParameters<ActionsParam>({
-    layout: 'fullscreen',
-    // this is typed
-    actions: {
-      disable: true
-    }
-  })
+	parameters: defineParameters<ActionsParam>({
+		layout: 'fullscreen',
+		// this is typed
+		actions: {
+			disable: true
+		}
+	})
 }
 ```
 
@@ -59,7 +59,7 @@ addons.setConfig({
 })
 ```
 
-### Tag Badges
+### `storybook-addon-tag-badges`
 
 If you use [`storybook-addon-tag-badges`][`storybook-addon-tag-badges`],
 we provide a different set of badges that uses emojis:
@@ -80,51 +80,50 @@ we provide a different set of badges that uses emojis:
 To use them, add them to your `.storybook/manager.ts`:
 
 ```ts
-import { tagBadges } from '@repobuddy/storybook/manager'
+import { tagBadges } from '@repobuddy/storybook/storybook-addon-tag-badges'
 import { addons } from '@storybook/manager-api'
 
 addons.setConfig({ tagBadges })
 ```
 
-### `storybook-dark-mode` support
+You can also import only the one you need:
+
+```ts
+import { newBadge } from '@repobuddy/storybook/storybook-addon-tag-badges'
+import { defaultConfig } from 'storybook-addon-tag-badges'
+
+addons.setConfig({ tagBadges: [newBadge, ...defaultConfig] })
+```
+
+### `storybook-dark-mode`
 
-[`@repobuddy/storybook`][`@repobuddy/storybook`] provides a few utilities to work with `storybook-dark-mode`.
+[`@repobuddy/storybook`][`@repobuddy/storybook`] provides a few utilities to work with [`storybook-dark-mode`][`storybook-dark-mode`].
 
 ```ts
 // .storybook/preview.tsx
-import { defineDarkModeParam, withStoryRoot, createDarkModeDocsContainer } from '@repobuddy/storybook/storybook-dark-mode'
+import {
+	createDarkModeDocsContainer,
+	defineDarkModeParam,
+	withDarkMode
+} from '@repobuddy/storybook/storybook-dark-mode'
 
 export const preview: Preview = {
-  parameters: {
-    docs: {
-      container: createDarkModeDocsContainer()
-    },
+	parameters: {
+		docs: {
+		container: createDarkModeDocsContainer()
+		},
 		darkMode: defineDarkModeParam({
 			classTarget: 'html',
 			darkClass: 'dark',
 			stylePreview: true
 		})
-  },
-	decorators: [withStoryRoot({
-		classTarget: 'html',
-		dark: {
-			className: 'dark:bg-black dark:text-white'
-		}
+	},
+	decorators: [withDarkMode({
+		bodyClass: 'dark:bg-black dark:text-white'
 	})]
 }
 ```
 
-#### `withStoryRoot`
-
-The `withStoryRoot` decorator allows you to use `storybook-dark-mode` to change the background color of the story.
-
-```ts
-import { withStoryRoot } from '@repobuddy/storybook/storybook-dark-mode'
-
-export const MyStory: StoryObj = {
-  decorators: [withStoryRoot()]
-}
-```
-
 [`@repobuddy/storybook`]: https://github.com/repobuddy/storybook
 [`storybook-addon-tag-badges`]: https://github.com/Sidnioulz/storybook-addon-tag-badges
+[`storybook-dark-mode`]: https://github.com/hipstersmoothie/storybook-dark-mode

package/src/manager/index.ts

@@ -1,2 +1 @@
 export * from './brand_title.ts'
-export * from './tag_badges.ts'

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

@@ -0,0 +1 @@
+export * from './tag_badges.ts'

package/src/{manager → storybook-addon-tag-badges}/tag_badges.ts

@@ -2,6 +2,8 @@ import { type TagBadgeParameters, defaultConfig } from 'storybook-addon-tag-badg
 
 const [, , , , , , versionBadge] = defaultConfig
 
+type TagBadgeParameter = TagBadgeParameters[0]
+
 /**
  * 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.
@@ -21,7 +23,7 @@ const [, , , , , , versionBadge] = defaultConfig
  *
  * Also includes the default version badge from `storybook-addon-tag-badges`.
  */
-export const editorBadge = {
+export const editorBadge: TagBadgeParameter = {
 	tags: 'editor',
 	badge: {
 		text: '✏️',
@@ -35,7 +37,7 @@ export const editorBadge = {
 	}
 }
 
-export const newBadge = {
+export const newBadge: TagBadgeParameter = {
 	tags: 'new',
 	badge: {
 		text: '🆕',
@@ -45,7 +47,7 @@ export const newBadge = {
 	}
 }
 
-export const betaBadge = {
+export const betaBadge: TagBadgeParameter = {
 	tags: 'beta',
 	badge: {
 		text: '🅱️',
@@ -55,7 +57,17 @@ export const betaBadge = {
 	}
 }
 
-export const deprecatedBadge = {
+export const propsBadge: TagBadgeParameter = {
+	tags: 'props',
+	badge: {
+		text: '🔧',
+		bgColor: 'transparent',
+		borderColor: 'transparent',
+		tooltip: 'Props'
+	}
+}
+
+export const deprecatedBadge: TagBadgeParameter = {
 	tags: 'deprecated',
 	badge: {
 		text: '🪦',
@@ -65,7 +77,7 @@ export const deprecatedBadge = {
 	}
 }
 
-export const outdatedBadge = {
+export const outdatedBadge: TagBadgeParameter = {
 	tags: 'outdated',
 	badge: {
 		text: '⚠️',
@@ -75,7 +87,7 @@ export const outdatedBadge = {
 	}
 }
 
-export const dangerBadge = {
+export const dangerBadge: TagBadgeParameter = {
 	tags: 'danger',
 	badge: {
 		text: '🚨',
@@ -85,7 +97,7 @@ export const dangerBadge = {
 	}
 }
 
-export const todoBadge = {
+export const todoBadge: TagBadgeParameter = {
 	tags: 'todo',
 	badge: {
 		text: '📋',
@@ -95,7 +107,7 @@ export const todoBadge = {
 	}
 }
 
-export const codeOnlyBadge = {
+export const codeOnlyBadge: TagBadgeParameter = {
 	tags: 'code-only',
 	badge: {
 		text: '📝',
@@ -105,7 +117,7 @@ export const codeOnlyBadge = {
 	}
 }
 
-export const snapshotBadge = {
+export const snapshotBadge: TagBadgeParameter = {
 	tags: 'snapshot',
 	badge: {
 		text: '📸',
@@ -114,28 +126,34 @@ export const snapshotBadge = {
 		tooltip: 'Snapshot Test'
 	},
 	display: {
-		sidebar: ['story'],
+		sidebar: false,
 		toolbar: ['story']
 	}
 }
 
-export const unitBadge = {
+export const unitBadge: TagBadgeParameter = {
 	tags: 'unit',
 	badge: {
 		text: '🧪',
 		bgColor: 'transparent',
 		borderColor: 'transparent',
 		tooltip: 'Unit Test'
+	},
+	display: {
+		sidebar: false
 	}
 }
 
-export const integrationBadge = {
+export const integrationBadge: TagBadgeParameter = {
 	tags: 'integration',
 	badge: {
 		text: '🔗',
 		bgColor: 'transparent',
 		borderColor: 'transparent',
 		tooltip: 'Integration Test'
+	},
+	display: {
+		sidebar: false
 	}
 }
 
@@ -148,6 +166,7 @@ export const tagBadges: TagBadgeParameters = [
 	deprecatedBadge,
 	outdatedBadge,
 	dangerBadge,
+	propsBadge,
 	todoBadge,
 	codeOnlyBadge,
 	snapshotBadge,

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

@@ -21,10 +21,12 @@ import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode'
  * ```
  */
 export function createDarkModeDocsContainer(
-	customThemes: {
-		light: ThemeVars
-		dark: ThemeVars
-	} = themes
+	customThemes?:
+		| {
+				light?: ThemeVars | undefined
+				dark?: ThemeVars | undefined
+		  }
+		| undefined
 ) {
 	return function DarkModeDocsContainer(props: PropsWithChildren<{ context: DocsContextProps }>) {
 		const [isDark, setDark] = useState(true)
@@ -35,7 +37,10 @@ export function createDarkModeDocsContainer(
 			return () => props.context.channel.removeListener(DARK_MODE_EVENT_NAME, setDark)
 		}, [props.context.channel])
 		return (
-			<DocsContainer {...props} theme={isDark ? customThemes.dark : customThemes.light}>
+			<DocsContainer
+				{...props}
+				theme={isDark ? (customThemes?.dark ?? themes.dark) : (customThemes?.light ?? themes.light)}
+			>
 				{props.children}
 			</DocsContainer>
 		)

package/src/storybook-dark-mode/define_dark_mode.ts

@@ -1,39 +1,55 @@
-import type { ThemeVars } from '@storybook/theming'
+import type { CSSProperties } from '@just-web/css'
+import type { ThemeVars } from 'storybook/internal/theming'
 
 /**
  * Configuration parameters for `storybook-dark-mode`.
  */
 export interface DarkModeParam {
 	/** The current theme ('dark' or 'light') */
-	current?: 'dark' | 'light'
-	/** CSS class(es) to apply in dark mode */
-	darkClass?: string | string[]
+	current?: 'dark' | 'light' | undefined
+	/**
+	 * CSS class(es) to apply in dark mode.
+	 */
+	darkClass?: string | string[] | undefined
+	/**
+	 * CSS style(s) to apply in dark mode.
+	 *
+	 * This only works when using `withStoryRoot`.
+	 */
+	darkStyle?: CSSProperties | undefined
 	/** CSS class(es) to apply in light mode */
-	lightClass?: string | string[]
+	lightClass?: string | string[] | undefined
+	/**
+	 * CSS style(s) to apply in light mode.
+	 *
+	 * This only works when using `withStoryRoot`.
+	 */
+	lightStyle?: CSSProperties | undefined
 	/** Dark theme variables */
 	dark?: ThemeVars
 	/** Light theme variables */
 	light?: ThemeVars
 	/** Element to apply theme classes to ('html' or 'body') */
-	classTarget?: 'html' | 'body'
+	classTarget?: 'html' | 'body' | undefined
 	/** Whether to apply theme styles to preview iframe */
-	stylePreview?: boolean
+	stylePreview?: boolean | undefined
 }
 
 /**
  * Defines `storybook-dark-mode` parameters for Storybook stories.
  *
  * @see https://storybook.js.org/addons/@storybook/addon-themes#dark-mode
- *
- * @param darkMode - Configuration for dark mode parameters
- * @param darkMode.current - The current theme ('dark' or 'light')
- * @param darkMode.darkClass - CSS class(es) to apply in dark mode
- * @param darkMode.lightClass - CSS class(es) to apply in light mode
- * @param darkMode.dark - Dark theme variables
- * @param darkMode.light - Light theme variables
- * @param darkMode.classTarget - Element to apply theme classes to ('html' or 'body')
- * @param darkMode.stylePreview - Whether to apply theme styles to preview iframe
  * @returns An object containing the dark mode parameter configuration
+ *
+ * @example
+ * ```ts
+ * // ./storybook/preview.tsx
+ *
+ * export const preview = {
+ *   parameters: {
+ *     ...defineDarkModeParam({ darkClass: 'dark' })
+ *   }
+ * }
  */
 export function defineDarkModeParam(darkMode: DarkModeParam) {
 	return { darkMode }

package/src/storybook-dark-mode/index.ts

@@ -1,3 +1,3 @@
 export * from './dark_mode_docs_container.tsx'
 export * from './define_dark_mode.ts'
-export * from './with_story_root.tsx'
+export * from './with_dark_mode.tsx'

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

@@ -0,0 +1,90 @@
+import type { CSSProperties } from '@just-web/css'
+import { toDOMStyle } from '@just-web/css'
+import { useDarkMode } from 'storybook-dark-mode'
+import type { DecoratorFunction } from 'storybook/internal/types'
+import type { DarkModeParam } from './define_dark_mode.ts'
+
+/**
+ * Applies additional dark mode behavior.
+ *
+ * @see https://storybook.js.org/addons/@storybook/addon-themes#dark-mode
+ * @returns A decorator function that applies additional dark mode behavior.
+ */
+export function withDarkMode(
+	options?:
+		| {
+				/**
+				 * CSS class(es) to apply to the body element.
+				 *
+				 * Useful when using Tailwind CSS and `classTarget: 'html'`
+				 */
+				bodyClass?: string | string[] | undefined
+				/**
+				 * CSS style(s) to apply to the body element.
+				 *
+				 * Useful when using Tailwind CSS and `classTarget: 'html'`
+				 */
+				bodyStyle?: CSSProperties | undefined
+		  }
+		| undefined
+): DecoratorFunction<any, any> {
+	return function darkModeDecorator(Story, { parameters }) {
+		const darkMode = parameters.darkMode as DarkModeParam | undefined
+		if (!darkMode) return <Story />
+
+		const dark = useDarkMode()
+		const target = darkMode.classTarget === 'html' ? document.documentElement : document.body
+		if (dark) {
+			removeClass(target, darkMode.lightClass)
+			addClass(target, darkMode.darkClass)
+			removeStyle(target, darkMode.lightStyle)
+			addStyle(target, darkMode.darkStyle)
+		} else {
+			removeClass(target, darkMode.darkClass)
+			addClass(target, darkMode.lightClass)
+			removeStyle(target, darkMode.darkStyle)
+			addStyle(target, darkMode.lightStyle)
+		}
+		if (options?.bodyClass) {
+			addClass(document.body, options.bodyClass)
+		}
+		if (options?.bodyStyle) {
+			addStyle(document.body, options.bodyStyle)
+		}
+		return <Story />
+	}
+}
+
+function addClass(target: HTMLElement, className: string | string[] | undefined) {
+	if (!className) return
+	if (typeof className === 'string') {
+		target.classList.add(className)
+	} else if (Array.isArray(className)) {
+		target.classList.add(...className)
+	}
+}
+
+function removeClass(target: HTMLElement, className: string | string[] | undefined) {
+	if (!className) return
+	if (typeof className === 'string') {
+		target.classList.remove(className)
+	} else if (Array.isArray(className)) {
+		target.classList.remove(...className)
+	}
+}
+
+function addStyle(target: HTMLElement, style: CSSProperties | undefined) {
+	if (style) {
+		for (const [key, value] of Object.entries(toDOMStyle(style)!)) {
+			target.style.setProperty(key, value as any)
+		}
+	}
+}
+
+function removeStyle(target: HTMLElement, style: CSSProperties | undefined) {
+	if (style) {
+		for (const key of Object.keys(toDOMStyle(style)!)) {
+			target.style.removeProperty(key)
+		}
+	}
+}

package/esm/manager/tag_badges.d.ts

@@ -1,128 +0,0 @@
-import { type TagBadgeParameters } from 'storybook-addon-tag-badges';
-/**
- * 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`.
- */
-export declare const editorBadge: {
-    tags: string;
-    badge: {
-        text: string;
-        bgColor: string;
-        borderColor: string;
-        tooltip: string;
-    };
-    display: {
-        sidebar: string[];
-        toolbar: string[];
-    };
-};
-export declare const newBadge: {
-    tags: string;
-    badge: {
-        text: string;
-        bgColor: string;
-        borderColor: string;
-        tooltip: string;
-    };
-};
-export declare const betaBadge: {
-    tags: string;
-    badge: {
-        text: string;
-        bgColor: string;
-        borderColor: string;
-        tooltip: string;
-    };
-};
-export declare const deprecatedBadge: {
-    tags: string;
-    badge: {
-        text: string;
-        bgColor: string;
-        borderColor: string;
-        tooltip: string;
-    };
-};
-export declare const outdatedBadge: {
-    tags: string;
-    badge: {
-        text: string;
-        bgColor: string;
-        borderColor: string;
-        tooltip: string;
-    };
-};
-export declare const dangerBadge: {
-    tags: string;
-    badge: {
-        text: string;
-        bgColor: string;
-        borderColor: string;
-        tooltip: string;
-    };
-};
-export declare const todoBadge: {
-    tags: string;
-    badge: {
-        text: string;
-        bgColor: string;
-        borderColor: string;
-        tooltip: string;
-    };
-};
-export declare const codeOnlyBadge: {
-    tags: string;
-    badge: {
-        text: string;
-        bgColor: string;
-        borderColor: string;
-        tooltip: string;
-    };
-};
-export declare const snapshotBadge: {
-    tags: string;
-    badge: {
-        text: string;
-        bgColor: string;
-        borderColor: string;
-        tooltip: string;
-    };
-    display: {
-        sidebar: string[];
-        toolbar: string[];
-    };
-};
-export declare const unitBadge: {
-    tags: string;
-    badge: {
-        text: string;
-        bgColor: string;
-        borderColor: string;
-        tooltip: string;
-    };
-};
-export declare const integrationBadge: {
-    tags: string;
-    badge: {
-        text: string;
-        bgColor: string;
-        borderColor: string;
-        tooltip: string;
-    };
-};
-export declare const tagBadges: TagBadgeParameters;

package/esm/storybook-dark-mode/with_story_root.d.ts

@@ -1,15 +0,0 @@
-import type { CSSProperties } from '@just-web/css';
-import type { DecoratorFunction } from 'storybook/internal/types';
-interface StoryRootOptions {
-    classTarget?: 'html' | 'body' | undefined;
-    dark?: {
-        className?: string | string[] | undefined;
-        style?: CSSProperties | undefined;
-    } | undefined;
-    light?: {
-        className?: string | string[] | undefined;
-        style?: CSSProperties | undefined;
-    } | undefined;
-}
-export declare function withStoryRoot(param: StoryRootOptions): DecoratorFunction<any, any>;
-export {};

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

@@ -1,61 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { toDOMStyle } from '@just-web/css';
-import { useDarkMode } from 'storybook-dark-mode';
-export function withStoryRoot(param) {
-    return function storyRootDecorator(Story) {
-        const dark = useDarkMode();
-        if (param.classTarget === 'html') {
-            if (dark) {
-                removeClass(param.light?.className);
-                addClass(param.dark?.className);
-                removeStyle(param.light?.style);
-                addStyle(param.dark?.style);
-            }
-            else {
-                removeClass(param.dark?.className);
-                addClass(param.light?.className);
-                removeStyle(param.dark?.style);
-                addStyle(param.light?.style);
-            }
-            return _jsx(Story, {});
-        }
-        if (dark) {
-            return (_jsx("div", { className: typeof param.dark?.className === 'string' ? param.dark.className : param.dark?.className?.join(' '), style: param.dark?.style, children: _jsx(Story, {}) }));
-        }
-        return (_jsx("div", { className: typeof param.light?.className === 'string' ? param.light.className : param.light?.className?.join(' '), style: param.light?.style, children: _jsx(Story, {}) }));
-    };
-}
-function addClass(className) {
-    if (!className)
-        return;
-    if (typeof className === 'string') {
-        document.body.classList.add(...className.split(' '));
-    }
-    else if (Array.isArray(className)) {
-        document.body.classList.add(...className);
-    }
-}
-function removeClass(className) {
-    if (!className)
-        return;
-    if (typeof className === 'string') {
-        document.body.classList.remove(...className.split(' '));
-    }
-    else if (Array.isArray(className)) {
-        document.body.classList.remove(...className);
-    }
-}
-function addStyle(style) {
-    if (style) {
-        for (const [key, value] of Object.entries(toDOMStyle(style))) {
-            document.body.style.setProperty(key, value);
-        }
-    }
-}
-function removeStyle(style) {
-    if (style) {
-        for (const key of Object.keys(toDOMStyle(style))) {
-            document.body.style.removeProperty(key);
-        }
-    }
-}

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

@@ -1,97 +0,0 @@
-import type { CSSProperties } from '@just-web/css'
-import { toDOMStyle } from '@just-web/css'
-import { useDarkMode } from 'storybook-dark-mode'
-import type { DecoratorFunction } from 'storybook/internal/types'
-
-interface StoryRootOptions {
-	classTarget?: 'html' | 'body' | undefined
-	dark?:
-		| {
-				className?: string | string[] | undefined
-				style?: CSSProperties | undefined
-		  }
-		| undefined
-	light?:
-		| {
-				className?: string | string[] | undefined
-				style?: CSSProperties | undefined
-		  }
-		| undefined
-}
-
-export function withStoryRoot(param: StoryRootOptions): DecoratorFunction<any, any> {
-	return function storyRootDecorator(Story) {
-		const dark = useDarkMode()
-		if (param.classTarget === 'html') {
-			if (dark) {
-				removeClass(param.light?.className)
-				addClass(param.dark?.className)
-				removeStyle(param.light?.style)
-				addStyle(param.dark?.style)
-			} else {
-				removeClass(param.dark?.className)
-				addClass(param.light?.className)
-				removeStyle(param.dark?.style)
-				addStyle(param.light?.style)
-			}
-			return <Story />
-		}
-
-		if (dark) {
-			return (
-				<div
-					className={
-						typeof param.dark?.className === 'string' ? param.dark.className : param.dark?.className?.join(' ')
-					}
-					style={param.dark?.style}
-				>
-					<Story />
-				</div>
-			)
-		}
-		return (
-			<div
-				className={
-					typeof param.light?.className === 'string' ? param.light.className : param.light?.className?.join(' ')
-				}
-				style={param.light?.style}
-			>
-				<Story />
-			</div>
-		)
-	}
-}
-
-function addClass(className: string | string[] | undefined) {
-	if (!className) return
-	if (typeof className === 'string') {
-		document.body.classList.add(...className.split(' '))
-	} else if (Array.isArray(className)) {
-		document.body.classList.add(...className)
-	}
-}
-
-function removeClass(className: string | string[] | undefined) {
-	if (!className) return
-	if (typeof className === 'string') {
-		document.body.classList.remove(...className.split(' '))
-	} else if (Array.isArray(className)) {
-		document.body.classList.remove(...className)
-	}
-}
-
-function addStyle(style: CSSProperties | undefined) {
-	if (style) {
-		for (const [key, value] of Object.entries(toDOMStyle(style)!)) {
-			document.body.style.setProperty(key, value as any)
-		}
-	}
-}
-
-function removeStyle(style: CSSProperties | undefined) {
-	if (style) {
-		for (const key of Object.keys(toDOMStyle(style)!)) {
-			document.body.style.removeProperty(key)
-		}
-	}
-}