@repobuddy/storybook 0.9.3 → 0.10.0

package/esm/index.d.ts

@@ -1,9 +1,11 @@
 export * from '@repobuddy/test';
+export * from './decorators/show_doc_source.tsx';
+export * from './decorators/when_running_in_test.tsx';
 export * from './parameters/define_actions_param.ts';
 export * from './parameters/define_backgrounds_param.ts';
 export * from './parameters/define_docs_param.ts';
 export * from './parameters/define_layout_param.ts';
 export * from './parameters/define_parameters.ts';
-export * from './parameters/define_story_sort.ts';
 export * from './parameters/define_test_param.ts';
 export * from './parameters/define_viewport_param.ts';
+export * from './parameters/story_sort.ts';

package/esm/index.js

@@ -1,9 +1,11 @@
 export * from '@repobuddy/test';
+export * from "./decorators/show_doc_source.js";
+export * from "./decorators/when_running_in_test.js";
 export * from "./parameters/define_actions_param.js";
 export * from "./parameters/define_backgrounds_param.js";
 export * from "./parameters/define_docs_param.js";
 export * from "./parameters/define_layout_param.js";
 export * from "./parameters/define_parameters.js";
-export * from "./parameters/define_story_sort.js";
 export * from "./parameters/define_test_param.js";
 export * from "./parameters/define_viewport_param.js";
+export * from "./parameters/story_sort.js";

package/esm/manager/tag_badges.js

@@ -127,16 +127,16 @@ export const integrationBadge = {
     }
 };
 export const tagBadges = [
+    editorBadge,
+    unitBadge,
+    integrationBadge,
     newBadge,
     betaBadge,
     deprecatedBadge,
     outdatedBadge,
     dangerBadge,
     todoBadge,
-    editorBadge,
     codeOnlyBadge,
     snapshotBadge,
-    unitBadge,
-    integrationBadge,
     versionBadge
 ];

package/esm/parameters/define_parameters.d.ts

@@ -1,10 +1,12 @@
 import type { BackgroundsParam, GlobalApiBackgroundsParam } from './define_backgrounds_param.ts';
 import type { DocsParam } from './define_docs_param.ts';
 import type { LayoutParam } from './define_layout_param.ts';
-import type { StorySortParam } from './define_story_sort.ts';
 import type { TestParam } from './define_test_param.ts';
 import type { ViewportParam } from './define_viewport_param.ts';
-export type StorybookBuiltInParams = Partial<BackgroundsParam | GlobalApiBackgroundsParam> & Partial<DocsParam> & Partial<LayoutParam> & Partial<StorySortParam> & Partial<TestParam> & Partial<ViewportParam>;
+import type { StorySortParam } from './story_sort.ts';
+export type StorybookBuiltInParams = Partial<BackgroundsParam | GlobalApiBackgroundsParam> & Partial<DocsParam> & Partial<LayoutParam> & Partial<TestParam> & Partial<ViewportParam> & {
+    options?: StorySortParam & Record<string, any>;
+} & Record<string, any>;
 /**
  * Defines parameters for Storybook stories, combining built-in parameters with custom ones.
  *

package/esm/parameters/story_sort.d.ts

@@ -0,0 +1,27 @@
+type StorySortConfig = {
+    includeNames?: boolean;
+    locales?: string;
+    method?: 'alphabetical' | 'alphabetical-by-kind' | 'custom';
+    order?: string[];
+    [k: string]: unknown;
+};
+type Story = {
+    id: string;
+    importPath: string;
+    name: string;
+    title: string;
+};
+type StorySortFn = (a: Story, b: Story) => number;
+/**
+ * Interface for story sorting parameters in Storybook.
+ * Used to define how stories should be sorted in the navigation sidebar.
+ */
+export interface StorySortParam {
+    /**
+     * Configuration for story sorting. Can be either:
+     * - A StorySortConfig object specifying sort method and options
+     * - A custom sorting function that takes two stories and returns their sort order
+     */
+    storySort: StorySortConfig | StorySortFn;
+}
+export {};

package/esm/parameters/story_sort.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,26 @@
+import { type DocsContextProps } from '@storybook/blocks';
+import { type ThemeVars } from '@storybook/theming';
+import { type PropsWithChildren } from 'react';
+/**
+ * Creates a `DocsContainer` for `storybook` that works with `storybook-dark-mode`.
+ *
+ * @see https://github.com/hipstersmoothie/storybook-dark-mode/issues/282
+ *
+ * @example
+ * ```ts
+ * // .storybook/preview.tsx
+ * const preview: Preview = {
+ *   parameters: {
+ *     docs: {
+ *       container: createDarkModeDocsContainer()
+ *     }
+ *   }
+ * }
+ * ```
+ */
+export declare function createDarkModeDocsContainer(customThemes?: {
+    light: ThemeVars;
+    dark: ThemeVars;
+}): (props: PropsWithChildren<{
+    context: DocsContextProps;
+}>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DocsContainer } from '@storybook/blocks';
+import { themes } from '@storybook/theming';
+import { useEffect, useState } from 'react';
+import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
+/**
+ * Creates a `DocsContainer` for `storybook` that works with `storybook-dark-mode`.
+ *
+ * @see https://github.com/hipstersmoothie/storybook-dark-mode/issues/282
+ *
+ * @example
+ * ```ts
+ * // .storybook/preview.tsx
+ * const preview: Preview = {
+ *   parameters: {
+ *     docs: {
+ *       container: createDarkModeDocsContainer()
+ *     }
+ *   }
+ * }
+ * ```
+ */
+export function createDarkModeDocsContainer(customThemes = themes) {
+    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 }));
+    };
+}

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

@@ -0,0 +1,38 @@
+import type { ThemeVars } from '@storybook/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[];
+    /** CSS class(es) to apply in light mode */
+    lightClass?: string | string[];
+    /** Dark theme variables */
+    dark?: ThemeVars;
+    /** Light theme variables */
+    light?: ThemeVars;
+    /** Element to apply theme classes to ('html' or 'body') */
+    classTarget?: 'html' | 'body';
+    /** Whether to apply theme styles to preview iframe */
+    stylePreview?: boolean;
+}
+/**
+ * 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
+ */
+export declare function defineDarkModeParam(darkMode: DarkModeParam): {
+    darkMode: DarkModeParam;
+};

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

@@ -0,0 +1,18 @@
+/**
+ * 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
+ */
+export function defineDarkModeParam(darkMode) {
+    return { darkMode };
+}

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

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

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

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

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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,61 @@
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobuddy/storybook",
-  "version": "0.9.3",
+  "version": "0.10.0",
   "description": "Storybook repo buddy",
   "keywords": [
     "storybook",
@@ -23,9 +23,9 @@
       "types": "./esm/manager/index.d.ts",
       "default": "./esm/manager/index.js"
     },
-    "./react": {
-      "types": "./esm/react/index.d.ts",
-      "default": "./esm/react/index.js"
+    "./storybook-dark-mode": {
+      "types": "./esm/storybook-dark-mode/index.d.ts",
+      "default": "./esm/storybook-dark-mode/index.js"
     },
     "./testing": {
       "types": "./esm/testing.d.ts",
@@ -38,6 +38,7 @@
     "!**/*.{spec,test,unit,accept,integrate,system,perf,stress,study,stories}.*"
   ],
   "dependencies": {
+    "@just-web/css": "^0.4.0",
     "@repobuddy/test": "^1.0.0"
   },
   "devDependencies": {
@@ -66,6 +67,26 @@
     "vite": "^6.3.4",
     "vitest": "^3.1.2"
   },
+  "peerDependencies": {
+    "@storybook/blocks": ">= 8.6.12",
+    "@storybook/theming": ">= 8.6.12",
+    "storybook-addon-tag-badges": ">= 1.4.0",
+    "storybook-dark-mode": ">= 4.0.2"
+  },
+  "peerDependenciesMeta": {
+    "@storybook/blocks": {
+      "optional": true
+    },
+    "@storybook/theming": {
+      "optional": true
+    },
+    "storybook-addon-tag-badges": {
+      "optional": true
+    },
+    "storybook-dark-mode": {
+      "optional": true
+    }
+  },
   "scripts": {
     "build": "tsc",
     "clean": "rimraf .turbo coverage esm storybook-static *.tsbuildinfo",

package/readme.md

@@ -86,5 +86,45 @@ import { addons } from '@storybook/manager-api'
 addons.setConfig({ tagBadges })
 ```
 
+### `storybook-dark-mode` support
+
+[`@repobuddy/storybook`][`@repobuddy/storybook`] provides a few utilities to work with `storybook-dark-mode`.
+
+```ts
+// .storybook/preview.tsx
+import { defineDarkModeParam, withStoryRoot, createDarkModeDocsContainer } from '@repobuddy/storybook/storybook-dark-mode'
+
+export const preview: Preview = {
+  parameters: {
+    docs: {
+      container: createDarkModeDocsContainer()
+    },
+		darkMode: defineDarkModeParam({
+			classTarget: 'html',
+			darkClass: 'dark',
+			stylePreview: true
+		})
+  },
+	decorators: [withStoryRoot({
+		classTarget: 'html',
+		dark: {
+			className: '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

package/src/index.ts

@@ -1,9 +1,11 @@
 export * from '@repobuddy/test'
+export * from './decorators/show_doc_source.tsx'
+export * from './decorators/when_running_in_test.tsx'
 export * from './parameters/define_actions_param.ts'
 export * from './parameters/define_backgrounds_param.ts'
 export * from './parameters/define_docs_param.ts'
 export * from './parameters/define_layout_param.ts'
 export * from './parameters/define_parameters.ts'
-export * from './parameters/define_story_sort.ts'
 export * from './parameters/define_test_param.ts'
 export * from './parameters/define_viewport_param.ts'
+export * from './parameters/story_sort.ts'

package/src/manager/tag_badges.ts

@@ -140,16 +140,16 @@ export const integrationBadge = {
 }
 
 export const tagBadges: TagBadgeParameters = [
+	editorBadge,
+	unitBadge,
+	integrationBadge,
 	newBadge,
 	betaBadge,
 	deprecatedBadge,
 	outdatedBadge,
 	dangerBadge,
 	todoBadge,
-	editorBadge,
 	codeOnlyBadge,
 	snapshotBadge,
-	unitBadge,
-	integrationBadge,
 	versionBadge
 ]

package/src/parameters/define_parameters.ts

@@ -1,16 +1,15 @@
 import type { BackgroundsParam, GlobalApiBackgroundsParam } from './define_backgrounds_param.ts'
 import type { DocsParam } from './define_docs_param.ts'
 import type { LayoutParam } from './define_layout_param.ts'
-import type { StorySortParam } from './define_story_sort.ts'
 import type { TestParam } from './define_test_param.ts'
 import type { ViewportParam } from './define_viewport_param.ts'
+import type { StorySortParam } from './story_sort.ts'
 
 export type StorybookBuiltInParams = Partial<BackgroundsParam | GlobalApiBackgroundsParam> &
 	Partial<DocsParam> &
 	Partial<LayoutParam> &
-	Partial<StorySortParam> &
 	Partial<TestParam> &
-	Partial<ViewportParam>
+	Partial<ViewportParam> & { options?: StorySortParam & Record<string, any> } & Record<string, any>
 
 /**
  * Defines parameters for Storybook stories, combining built-in parameters with custom ones.

package/src/parameters/story_sort.ts

@@ -0,0 +1,29 @@
+type StorySortConfig = {
+	includeNames?: boolean
+	locales?: string
+	method?: 'alphabetical' | 'alphabetical-by-kind' | 'custom'
+	order?: string[]
+	[k: string]: unknown
+}
+
+type Story = {
+	id: string
+	importPath: string
+	name: string
+	title: string
+}
+
+type StorySortFn = (a: Story, b: Story) => number
+
+/**
+ * Interface for story sorting parameters in Storybook.
+ * Used to define how stories should be sorted in the navigation sidebar.
+ */
+export interface StorySortParam {
+	/**
+	 * Configuration for story sorting. Can be either:
+	 * - A StorySortConfig object specifying sort method and options
+	 * - A custom sorting function that takes two stories and returns their sort order
+	 */
+	storySort: StorySortConfig | StorySortFn
+}

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

@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/blocks'
+
+# `createDarkModeDocsContainer`
+
+<Meta title="storybook-dark-mode/createDarkModeDocsContainer" />
+
+Creates a `DocsContainer` for `storybook` that works with `storybook-dark-mode`.
+
+## Usage
+
+It can be called with no arguments to use the default themes from `@storybook/theming`.
+
+```tsx
+// .storybook/preview.tsx
+import { createDarkModeDocsContainer } from '@repobuddy/storybook/react'
+
+export const preview: Preview = {
+	parameters: {
+		docs: {
+			container: createDarkModeDocsContainer()
+		}
+	}
+}
+```
+
+It can also be called with a custom themes.
+
+```tsx
+container: createDarkModeDocsContainer({
+	light: customThemes.light,
+	dark: customThemes.dark
+})
+```

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

@@ -0,0 +1,43 @@
+import { DocsContainer, type DocsContextProps } from '@storybook/blocks'
+import { type ThemeVars, themes } from '@storybook/theming'
+import { type PropsWithChildren, useEffect, useState } from 'react'
+import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode'
+
+/**
+ * Creates a `DocsContainer` for `storybook` that works with `storybook-dark-mode`.
+ *
+ * @see https://github.com/hipstersmoothie/storybook-dark-mode/issues/282
+ *
+ * @example
+ * ```ts
+ * // .storybook/preview.tsx
+ * const preview: Preview = {
+ *   parameters: {
+ *     docs: {
+ *       container: createDarkModeDocsContainer()
+ *     }
+ *   }
+ * }
+ * ```
+ */
+export function createDarkModeDocsContainer(
+	customThemes: {
+		light: ThemeVars
+		dark: ThemeVars
+	} = themes
+) {
+	return function DarkModeDocsContainer(props: PropsWithChildren<{ context: DocsContextProps }>) {
+		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 (
+			<DocsContainer {...props} theme={isDark ? customThemes.dark : customThemes.light}>
+				{props.children}
+			</DocsContainer>
+		)
+	}
+}

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

@@ -0,0 +1,40 @@
+import type { ThemeVars } from '@storybook/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[]
+	/** CSS class(es) to apply in light mode */
+	lightClass?: string | string[]
+	/** Dark theme variables */
+	dark?: ThemeVars
+	/** Light theme variables */
+	light?: ThemeVars
+	/** Element to apply theme classes to ('html' or 'body') */
+	classTarget?: 'html' | 'body'
+	/** Whether to apply theme styles to preview iframe */
+	stylePreview?: boolean
+}
+
+/**
+ * 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
+ */
+export function defineDarkModeParam(darkMode: DarkModeParam) {
+	return { darkMode }
+}

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

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

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

@@ -0,0 +1,97 @@
+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)
+		}
+	}
+}

package/esm/parameters/define_story_sort.d.ts

@@ -1,55 +0,0 @@
-type StorySortConfig = {
-    includeNames?: boolean;
-    locales?: string;
-    method?: 'alphabetical' | 'alphabetical-by-kind' | 'custom';
-    order?: string[];
-    [k: string]: unknown;
-};
-type Story = {
-    id: string;
-    importPath: string;
-    name: string;
-    title: string;
-};
-type StorySortFn = (a: Story, b: Story) => number;
-/**
- * Interface for story sorting parameters in Storybook.
- * Used to define how stories should be sorted in the navigation sidebar.
- */
-export interface StorySortParam {
-    /**
-     * Configuration for story sorting. Can be either:
-     * - A StorySortConfig object specifying sort method and options
-     * - A custom sorting function that takes two stories and returns their sort order
-     */
-    storySort: StorySortConfig | StorySortFn;
-}
-/**
- * Defines story sorting parameters for Storybook navigation.
- *
- * @see https://storybook.js.org/docs/api/parameters#optionsstorysort
- *
- * @param storySort - Configuration for how stories should be sorted. Can be either:
- *   - A configuration object specifying sort method and options
- *   - A custom sorting function that takes two stories and returns their sort order
- * @returns An object containing the story sort configuration
- *
- * @example
- * // Alphabetical sorting
- * defineStorySort({ method: 'alphabetical' })
- *
- * @example
- * // Custom order
- * defineStorySort({
- *   method: 'custom',
- *   order: ['Introduction', 'Components', '*']
- * })
- *
- * @example
- * // Custom sort function
- * defineStorySort((a, b) => a.title.localeCompare(b.title))
- */
-export declare function defineStorySort(storySort: StorySortParam['storySort']): {
-    storySort: StorySortConfig | StorySortFn;
-};
-export {};

package/esm/parameters/define_story_sort.js

@@ -1,28 +0,0 @@
-/**
- * Defines story sorting parameters for Storybook navigation.
- *
- * @see https://storybook.js.org/docs/api/parameters#optionsstorysort
- *
- * @param storySort - Configuration for how stories should be sorted. Can be either:
- *   - A configuration object specifying sort method and options
- *   - A custom sorting function that takes two stories and returns their sort order
- * @returns An object containing the story sort configuration
- *
- * @example
- * // Alphabetical sorting
- * defineStorySort({ method: 'alphabetical' })
- *
- * @example
- * // Custom order
- * defineStorySort({
- *   method: 'custom',
- *   order: ['Introduction', 'Components', '*']
- * })
- *
- * @example
- * // Custom sort function
- * defineStorySort((a, b) => a.title.localeCompare(b.title))
- */
-export function defineStorySort(storySort) {
-    return { storySort };
-}

package/esm/react/index.d.ts

@@ -1,2 +0,0 @@
-export * from './decorators/show_doc_source.tsx';
-export * from './decorators/when_running_in_test.tsx';

package/esm/react/index.js

@@ -1,2 +0,0 @@
-export * from "./decorators/show_doc_source.js";
-export * from "./decorators/when_running_in_test.js";

package/src/parameters/define_story_sort.ts

@@ -1,58 +0,0 @@
-type StorySortConfig = {
-	includeNames?: boolean
-	locales?: string
-	method?: 'alphabetical' | 'alphabetical-by-kind' | 'custom'
-	order?: string[]
-	[k: string]: unknown
-}
-
-type Story = {
-	id: string
-	importPath: string
-	name: string
-	title: string
-}
-
-type StorySortFn = (a: Story, b: Story) => number
-
-/**
- * Interface for story sorting parameters in Storybook.
- * Used to define how stories should be sorted in the navigation sidebar.
- */
-export interface StorySortParam {
-	/**
-	 * Configuration for story sorting. Can be either:
-	 * - A StorySortConfig object specifying sort method and options
-	 * - A custom sorting function that takes two stories and returns their sort order
-	 */
-	storySort: StorySortConfig | StorySortFn
-}
-
-/**
- * Defines story sorting parameters for Storybook navigation.
- *
- * @see https://storybook.js.org/docs/api/parameters#optionsstorysort
- *
- * @param storySort - Configuration for how stories should be sorted. Can be either:
- *   - A configuration object specifying sort method and options
- *   - A custom sorting function that takes two stories and returns their sort order
- * @returns An object containing the story sort configuration
- *
- * @example
- * // Alphabetical sorting
- * defineStorySort({ method: 'alphabetical' })
- *
- * @example
- * // Custom order
- * defineStorySort({
- *   method: 'custom',
- *   order: ['Introduction', 'Components', '*']
- * })
- *
- * @example
- * // Custom sort function
- * defineStorySort((a, b) => a.title.localeCompare(b.title))
- */
-export function defineStorySort(storySort: StorySortParam['storySort']) {
-	return { storySort }
-}

package/src/react/index.ts

@@ -1,2 +0,0 @@
-export * from './decorators/show_doc_source.tsx'
-export * from './decorators/when_running_in_test.tsx'