@repobuddy/storybook 1.0.1 → 2.0.0

package/esm/types.d.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+/**
+ * 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
+ *
+ * @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' }>
+ * ```
+ */
+export 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
+ *
+ * @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' }>
+ * ```
+ */
+export type ExtendStoryObj<TMetaOrCmpOrArgs, S extends StoryObj<TMetaOrCmpOrArgs>, E extends {
+    tag: string;
+}> = Omit<S, 'tags'> & {
+    tags?: Array<E['tag'] | (string & {})> | undefined;
+};

package/esm/variants/index.d.ts

@@ -0,0 +1 @@
+export declare const empty: {};

package/esm/variants/index.js

@@ -0,0 +1,2 @@
+console.info("variants.index.ts.load");
+export const empty = {};

package/esm/variants/package.json

@@ -0,0 +1,3 @@
+{
+	"type": "module"
+}

package/esm/variants/preset.d.ts

@@ -0,0 +1,11 @@
+/**
+ * User specifies `@repobuddy/storybook/variants/addon` in the `.storybook/main.ts`.
+ *
+ * Storybook loads it on the server side.
+ *
+ * It provides a default export (or in CJS, `module.exports =`) that contains:
+ *
+ * - `managerEntries` a function that returns an array of strings on where to load the manager (on the client side)
+ * - `previewAnnotations` a function that returns an array of strings on where to load the preview (on the client side)
+ * - `experimental_serverChannel` a function that handles the server-side channel
+ */

package/esm/variants/preset.js

@@ -0,0 +1 @@
+console.info("variants.preset.js.load");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobuddy/storybook",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "Storybook repo buddy",
   "keywords": [
     "storybook",
@@ -14,6 +14,14 @@
     "url": "https://github.com/unional"
   },
   "type": "module",
+  "imports": {
+    "#repobuddy/storybook": "./src/index.ts",
+    "#repobuddy/storybook/manager": "./src/manager/index.ts",
+    "#repobuddy/storybook/storybook-addon-tag-badges": "./src/storybook-addon-tag-badges/index.ts",
+    "#repobuddy/storybook/storybook-dark-mode": "./src/storybook-dark-mode/index.ts",
+    "#repobuddy/storybook/variants": "./src/variants/index.ts",
+    "#repobuddy/storybook/variants/package.json": "./src/variants/package.json"
+  },
   "exports": {
     ".": {
       "types": "./esm/index.d.ts",
@@ -31,58 +39,67 @@
       "types": "./esm/storybook-dark-mode/index.d.ts",
       "default": "./esm/storybook-dark-mode/index.js"
     },
-    "./testing": {
-      "types": "./esm/testing.d.ts",
-      "default": "./esm/testing.js"
-    }
+    "./variants": {
+      "import": {
+        "types": "./esm/variants/index.d.ts",
+        "default": "./esm/variants/index.js"
+      }
+    },
+    "./variants/package.json": "./esm/variants/package.json",
+    "./variants/preset": "./esm/variants/preset.js"
   },
   "files": [
+    "cjs",
     "esm",
     "src",
-    "!**/*.{spec,test,unit,accept,integrate,system,perf,stress,study,stories}.*"
+    "!**/*.{spec,test,unit,accept,integrate,system,perf,stress,study,stories}.*",
+    "!**/*.mdx"
   ],
   "dependencies": {
-    "@just-web/css": "^0.5.0",
+    "@just-web/css": "^0.7.0",
     "@repobuddy/test": "^1.0.0",
-    "htmlfy": "^0.7.5"
+    "@storybook/icons": "^2.0.1",
+    "htmlfy": "^1.0.0"
   },
   "devDependencies": {
-    "@repobuddy/vitest": "^1.2.2",
-    "@storybook/addon-docs": "^9.0.1",
-    "@storybook/addon-themes": "^9.0.1",
-    "@storybook/addon-vitest": "^9.0.1",
-    "@storybook/react-vite": "^9.0.1",
-    "@tailwindcss/cli": "^4.1.5",
-    "@tailwindcss/vite": "^4.1.5",
-    "@vitest/browser": "^3.1.2",
-    "@vitest/coverage-v8": "^3.1.2",
-    "dedent": "^1.6.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rimraf": "^6.0.1",
-    "storybook": "^9.0.1",
-    "storybook-addon-tag-badges": "^2.0.0",
-    "storybook-addon-vis": "^2.1.1",
-    "storybook-dark-mode2": "^5.0.2",
-    "tailwindcss": "^4.1.5",
-    "vite": "^6.3.4",
-    "vitest": "^3.1.2"
+    "@repobuddy/vitest": "^2.0.0",
+    "@storybook-community/storybook-dark-mode": "^7.0.2",
+    "@storybook/addon-docs": "^10.0.7",
+    "@storybook/addon-themes": "^10.0.7",
+    "@storybook/addon-vitest": "^10.0.7",
+    "@storybook/react-vite": "^10.0.7",
+    "@tailwindcss/cli": "^4.1.17",
+    "@tailwindcss/vite": "^4.1.17",
+    "@vitest/browser": "^4.0.9",
+    "@vitest/browser-playwright": "^4.0.9",
+    "@vitest/coverage-v8": "^4.0.9",
+    "dedent": "^1.7.0",
+    "ncp": "^2.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "rimraf": "^6.1.0",
+    "storybook": "^10.0.7",
+    "storybook-addon-tag-badges": "^3.0.2",
+    "tailwindcss": "^4.1.17",
+    "unbuild": "^3.6.1",
+    "vite": "^7.2.2",
+    "vitest": "^4.0.9"
   },
   "peerDependencies": {
-    "storybook-addon-tag-badges": "^2.0.0",
-    "storybook-dark-mode2": "^5.0.2"
+    "@storybook-community/storybook-dark-mode": "^7.0.0",
+    "storybook-addon-tag-badges": "^3.0.2"
   },
   "peerDependenciesMeta": {
-    "storybook-addon-tag-badges": {
+    "@storybook-community/storybook-dark-mode": {
       "optional": true
     },
-    "storybook-dark-mode2": {
+    "storybook-addon-tag-badges": {
       "optional": true
     }
   },
   "scripts": {
-    "build": "tsc",
-    "clean": "rimraf .turbo coverage esm storybook-static *.tsbuildinfo",
+    "build": "unbuild",
+    "clean": "rimraf .turbo coverage cjs esm storybook-static *.tsbuildinfo",
     "coverage": "vitest run --coverage",
     "sb": "storybook dev -p 6006",
     "sb:build": "storybook build",

package/readme.md

@@ -102,9 +102,9 @@ import { defaultConfig } from 'storybook-addon-tag-badges'
 addons.setConfig({ tagBadges: [newBadge, ...defaultConfig] })
 ```
 
-### `storybook-dark-mode2`
+### `@storybook-community/storybook-dark-mode`
 
-[`@repobuddy/storybook`][`@repobuddy/storybook`] provides a few utilities to work with [`storybook-dark-mode2`][`storybook-dark-mode2`].
+[`@repobuddy/storybook`][`@repobuddy/storybook`] provides a few utilities to work with [`@storybook-community/storybook-dark-mode`][`@storybook-community/storybook-dark-mode`].
 
 ```ts
 // .storybook/preview.tsx
@@ -133,5 +133,5 @@ export const preview: Preview = {
 
 [`@repobuddy/storybook`]: https://github.com/repobuddy/storybook
 [`storybook-addon-tag-badges`]: https://github.com/Sidnioulz/storybook-addon-tag-badges
-[`storybook-dark-mode2`]: https://github.com/repobuddy/storybook-dark-mode2
+[`@storybook-community/storybook-dark-mode`]: https://github.com/repobuddy/@storybook-community/storybook-dark-mode
 [`storybook-addon-code-editor`]: https://github.com/storybookjs/storybook/tree/main/addons/code/code-editor

package/src/decorators/show_doc_source.tsx

@@ -1,4 +1,10 @@
+import { useEffect, useState } from 'react'
+import { SyntaxHighlighter } from 'storybook/internal/components'
 import type { Args, DecoratorFunction, Renderer } from 'storybook/internal/csf'
+import { addons } from 'storybook/preview-api'
+import { convert, ThemeProvider, themes } from 'storybook/theming'
+
+const channel = addons.getChannel()
 
 /**
  * A decorator that shows the source code of a story above the rendered story.
@@ -8,18 +14,31 @@ export function showDocSource<TRenderer extends Renderer = Renderer, TArgs = Arg
 	TRenderer,
 	TArgs
 > {
-	return (Story, { parameters }) => {
+	return (Story, { parameters: { docs, darkMode } }) => {
+		// This is a workaround to get the current dark mode from `@storybook-community/storybook-dark-mode` without referencing it.
+		const storedItem = window.localStorage.getItem('sb-addon-themes-3')
+		const current = typeof storedItem === 'string' ? JSON.parse(storedItem).current : darkMode?.current
+		const [isDark, setIsDark] = useState((darkMode?.stylePreview && current === 'dark') ?? false)
+
+		useEffect(() => {
+			channel.on('DARK_MODE', setIsDark)
+
+			return () => channel.off('DARK_MODE', setIsDark)
+		}, [])
+
 		return (
-			<section
-				style={{
-					display: 'flex',
-					flexDirection: 'column',
-					gap: '1rem'
-				}}
-			>
-				<pre>{parameters.docs?.source?.code}</pre>
-				<Story />
-			</section>
+			<ThemeProvider theme={convert(docs?.theme ?? (isDark ? themes.dark : themes.light))}>
+				<section
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						gap: '1rem'
+					}}
+				>
+					<SyntaxHighlighter language={docs?.source?.language}>{docs?.source?.code}</SyntaxHighlighter>
+					<Story />
+				</section>
+			</ThemeProvider>
 		)
 	}
 }

package/src/index.ts

@@ -10,3 +10,4 @@ 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'

package/src/parameters/define_docs_param.ts

@@ -95,12 +95,12 @@ export interface DocsParam {
 					/**
 					 * `docs.description.story` can be used to describe the story in doc.
 					 */
-					story?: string | JSX.Element | undefined
+					story?: string | undefined
 					/**
 					 * `docs.description.component` can be used to describe the component in meta.
 					 * It has no effect on the stories.
 					 */
-					component?: string | JSX.Element | undefined
+					component?: string | undefined
 			  }
 			| undefined
 		/**

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

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

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

@@ -1,10 +1,11 @@
 import type { Args, Meta as M, StoryObj as SBO } from '@storybook/react-vite'
+import type { ExtendMeta, ExtendStoryObj } from '../types.ts'
 import type { TagNames } from './tag_badges.ts'
 
-export type Meta<TCmpOrArgs = Args> = Omit<M<TCmpOrArgs>, 'tags'> & {
-	tags?: Array<TagNames | (string & {})> | undefined
-}
+export type Meta<TCmpOrArgs = Args> = ExtendMeta<TCmpOrArgs, M<TCmpOrArgs>, { tag: TagNames }>
 
-export type StoryObj<TMetaOrCmpOrArgs = Args> = Omit<SBO<TMetaOrCmpOrArgs>, 'tags'> & {
-	tags?: Array<TagNames | (string & {})> | undefined
-}
+export type StoryObj<TMetaOrCmpOrArgs = Args> = ExtendStoryObj<
+	TMetaOrCmpOrArgs,
+	SBO<TMetaOrCmpOrArgs>,
+	{ tag: TagNames }
+>

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

@@ -1,10 +1,10 @@
+import { DARK_MODE_EVENT_NAME } from '@storybook-community/storybook-dark-mode'
 import { DocsContainer, type DocsContextProps } from '@storybook/addon-docs/blocks'
 import { type PropsWithChildren, useEffect, useState } from 'react'
-import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode2'
 import { type ThemeVars, themes } from 'storybook/theming'
 
 /**
- * Creates a `DocsContainer` for `storybook` that works with `storybook-dark-mode2`.
+ * Creates a `DocsContainer` for `storybook` that works with `@storybook-community/storybook-dark-mode`.
  *
  * @see https://github.com/hipstersmoothie/storybook-dark-mode/issues/282
  *

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

@@ -1,8 +1,8 @@
 import type { CSSProperties } from '@just-web/css'
-import type { ThemeVars } from 'storybook/internal/theming'
+import type { ThemeVars } from 'storybook/theming'
 
 /**
- * Configuration parameters for `storybook-dark-mode2`.
+ * Configuration parameters for `@storybook-community/storybook-dark-mode`.
  */
 export interface DarkModeParam {
 	/** The current theme ('dark' or 'light') */
@@ -36,7 +36,7 @@ export interface DarkModeParam {
 }
 
 /**
- * Defines `storybook-dark-mode2` parameters for Storybook stories.
+ * Defines `@storybook-community/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

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from '@just-web/css'
 import { toDOMStyle } from '@just-web/css'
-import { useDarkMode } from 'storybook-dark-mode2'
+import { useDarkMode } from '@storybook-community/storybook-dark-mode'
 import type { DecoratorFunction } from 'storybook/internal/types'
 import type { DarkModeParam } from './define_dark_mode.ts'
 
@@ -32,6 +32,7 @@ export function withDarkMode(
 		const darkMode = parameters.darkMode as DarkModeParam | undefined
 		if (!darkMode) return <Story />
 
+		// biome-ignore lint/correctness/useHookAtTopLevel: on purpose
 		const dark = useDarkMode()
 		const target = darkMode.classTarget === 'html' ? document.documentElement : document.body
 		if (dark) {

package/src/types.ts

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+/**
+ * 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
+ *
+ * @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' }>
+ * ```
+ */
+export 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
+ *
+ * @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' }>
+ * ```
+ */
+export type ExtendStoryObj<
+	TMetaOrCmpOrArgs,
+	S extends StoryObj<TMetaOrCmpOrArgs>,
+	E extends {
+		tag: string
+	}
+> = Omit<S, 'tags'> & {
+	tags?: Array<E['tag'] | (string & {})> | undefined
+}

package/src/variants/index.ts

@@ -0,0 +1,3 @@
+console.info('variants.index.ts.load')
+
+export const empty = {}

package/src/variants/package.json

@@ -0,0 +1,3 @@
+{
+	"type": "module"
+}

package/src/variants/preset.ts

@@ -0,0 +1,22 @@
+/**
+ * User specifies `@repobuddy/storybook/variants/addon` in the `.storybook/main.ts`.
+ *
+ * Storybook loads it on the server side.
+ *
+ * It provides a default export (or in CJS, `module.exports =`) that contains:
+ *
+ * - `managerEntries` a function that returns an array of strings on where to load the manager (on the client side)
+ * - `previewAnnotations` a function that returns an array of strings on where to load the preview (on the client side)
+ * - `experimental_serverChannel` a function that handles the server-side channel
+ */
+
+console.info('variants.preset.js.load')
+
+// export const managerEntries = ['@storybook-community/storybook-dark-mode/manager']
+// const previewAnnotations = (entry = []) => [...entry, require.resolve('@storybook-community/storybook-dark-mode')]
+// const previewAnnotations =  [ require.resolve('@storybook-community/storybook-dark-mode')]
+
+// module.exports = {
+// 	managerEntries,
+// 	// previewAnnotations
+// }

package/src/overview.mdx

@@ -1,7 +0,0 @@
-import { Meta } from "@storybook/addon-docs/blocks";
-import readme from "../readme.md?raw";
-import { Markdown } from "@storybook/addon-docs/blocks";
-
-<Meta title="Overview" />
-
-<Markdown>{readme}</Markdown>

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

@@ -1,33 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks'
-
-# `createDarkModeDocsContainer`
-
-<Meta title="storybook-dark-mode/createDarkModeDocsContainer" />
-
-Creates a `DocsContainer` for `storybook` that works with `storybook-dark-mode2`.
-
-## 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
-})
-```