@repobuddy/storybook 0.9.4 → 0.11.0

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.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,48 @@
+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 | undefined
+				dark?: ThemeVars | undefined
+		  }
+		| undefined
+) {
+	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 ?? themes.dark) : (customThemes?.light ?? themes.light)}
+			>
+				{props.children}
+			</DocsContainer>
+		)
+	}
+}

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

@@ -0,0 +1,51 @@
+import type { CSSProperties } from '@just-web/css'
+
+/**
+ * Configuration parameters for `storybook-dark-mode`.
+ */
+export interface DarkModeParam {
+	/** The current theme ('dark' or 'light') */
+	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[] | undefined
+	/**
+	 * CSS style(s) to apply in light mode.
+	 *
+	 * This only works when using `withStoryRoot`.
+	 */
+	lightStyle?: CSSProperties | undefined
+	/** Element to apply theme classes to ('html' or 'body') */
+	classTarget?: 'html' | 'body' | undefined
+	/** Whether to apply theme styles to preview iframe */
+	stylePreview?: boolean | undefined
+}
+
+/**
+ * Defines `storybook-dark-mode` parameters for Storybook stories.
+ *
+ * @see https://storybook.js.org/addons/@storybook/addon-themes#dark-mode
+ * @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

@@ -0,0 +1,3 @@
+export * from './dark_mode_docs_container.tsx'
+export * from './define_dark_mode.ts'
+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/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'