@repobuddy/storybook 0.2.0 → 0.3.0

package/esm/decorators/show_doc_source.d.ts

@@ -0,0 +1,2 @@
+import type { Args, DecoratorFunction, Renderer } from 'storybook/internal/csf';
+export declare function showDocSource<TRenderer extends Renderer = Renderer, TArgs = Args>(): DecoratorFunction<TRenderer, TArgs>;

package/esm/decorators/show_doc_source.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function showDocSource() {
+    return (Story, { parameters }) => {
+        return (_jsxs("section", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '1rem'
+            }, children: [_jsx("pre", { children: parameters.docs?.source?.code }), _jsx(Story, {})] }));
+    };
+}

package/esm/index.d.ts

@@ -1,4 +1,6 @@
+export * from './decorators/show_doc_source.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';

package/esm/index.js

@@ -1,4 +1,6 @@
+export * from "./decorators/show_doc_source.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";

package/esm/manager/brand_title.d.ts

@@ -5,17 +5,17 @@ export interface BrandTitleOptions {
      */
     title: string;
     /**
-     * The icon to display in the brand title.
+     * The logo to display in the brand title.
      * It can be a simple string or raw HTML (e.g. `<svg>`).
      */
-    icon?: string | undefined;
+    logo?: string | undefined;
 }
 /**
  * Creates a brand title element for the Storybook manager UI.
  *
  * @param options - The options for customizing the brand title
  * @param options.title - The title text or HTML to display
- * @param options.icon - Optional icon HTML to display before the title
+ * @param options.logo - Optional logo HTML to display before the title
  * @returns An HTML string containing the brand title element
  *
  * @example
@@ -27,7 +27,7 @@ export interface BrandTitleOptions {
  * addons.setConfig({
  *   brandTitle: brandTitle({
  *     title: 'My Storybook',
- *     icon: '<img src="logo.png" alt="Logo" width="24" height="24">'
+ *     logo: '<img src="logo.png" alt="Logo" width="24" height="24">'
  *   })
  * })
  * ```

package/esm/manager/brand_title.js

@@ -3,7 +3,7 @@
  *
  * @param options - The options for customizing the brand title
  * @param options.title - The title text or HTML to display
- * @param options.icon - Optional icon HTML to display before the title
+ * @param options.logo - Optional logo HTML to display before the title
  * @returns An HTML string containing the brand title element
  *
  * @example
@@ -15,14 +15,14 @@
  * addons.setConfig({
  *   brandTitle: brandTitle({
  *     title: 'My Storybook',
- *     icon: '<img src="logo.png" alt="Logo" width="24" height="24">'
+ *     logo: '<img src="logo.png" alt="Logo" width="24" height="24">'
  *   })
  * })
  * ```
  */
 export function brandTitle(options) {
     return `<span style="display: flex; align-items: center; gap: 2px;">
-		${options.icon ?? ''}
+		${options.logo ?? ''}
 		${options.title}
 	</span>`;
 }

package/esm/parameters/define_actions_param.d.ts

@@ -3,6 +3,7 @@ export interface ActionsParam {
         argTypesRegex?: string | undefined;
         disable?: boolean | undefined;
         handles?: string[] | undefined;
+        [k: string]: unknown;
     };
 }
 /**
@@ -15,6 +16,7 @@ export interface ActionsParam {
  */
 export declare function defineActionsParam(actions: ActionsParam['actions']): {
     actions: {
+        [k: string]: unknown;
         argTypesRegex?: string | undefined;
         disable?: boolean | undefined;
         handles?: string[] | undefined;

package/esm/parameters/define_backgrounds_param.d.ts

@@ -0,0 +1,39 @@
+export interface BackgroundsParam {
+    backgrounds: {
+        default?: string | undefined;
+        values?: Array<{
+            name: string;
+            value: string;
+        }>;
+        disable?: boolean | undefined;
+        grid?: {
+            cellAmount?: number | undefined;
+            cellSize?: number | undefined;
+            disable?: boolean | undefined;
+            offsetX?: number | undefined;
+            offsetY?: number | undefined;
+            opacity?: number | undefined;
+        } | undefined;
+        [k: string]: unknown;
+    };
+}
+export interface GlobalApiBackgroundsParam {
+    backgrounds: {
+        default?: string | undefined;
+        options?: Array<{
+            name: string;
+            value: string;
+        }>;
+        disabled?: boolean | undefined;
+        grid?: {
+            cellAmount?: number | undefined;
+            cellSize?: number | undefined;
+            disable?: boolean | undefined;
+            offsetX?: number | undefined;
+            offsetY?: number | undefined;
+            opacity?: number | undefined;
+        } | undefined;
+        [k: string]: unknown;
+    };
+}
+export declare const defineBackgroundsParam: (backgrounds: BackgroundsParam["backgrounds"] | GlobalApiBackgroundsParam["backgrounds"]) => BackgroundsParam;

package/esm/parameters/define_backgrounds_param.js

@@ -0,0 +1,3 @@
+export const defineBackgroundsParam = (backgrounds) => ({
+    backgrounds
+});

package/esm/parameters/define_parameters.d.ts

@@ -1,6 +1,6 @@
+import type { BackgroundsParam, GlobalApiBackgroundsParam } from './define_backgrounds_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';
-export interface StorybookBuiltInParams extends Partial<LayoutParam>, Partial<StorySortParam>, Partial<TestParam> {
-}
+export type StorybookBuiltInParams = Partial<LayoutParam> & Partial<StorySortParam> & Partial<TestParam> & Partial<BackgroundsParam | GlobalApiBackgroundsParam>;
 export declare function defineParameters<P extends Record<string, any>>(parameters: P & StorybookBuiltInParams): P & StorybookBuiltInParams;

package/esm/parameters/define_story_sort.d.ts

@@ -3,6 +3,7 @@ type StorySortConfig = {
     locales?: string;
     method?: 'alphabetical' | 'alphabetical-by-kind' | 'custom';
     order?: string[];
+    [k: string]: unknown;
 };
 type Story = {
     id: string;

package/esm/parameters/define_test_param.d.ts

@@ -4,6 +4,7 @@ export interface TestParam {
         mockReset?: boolean | undefined;
         restoreMocks?: boolean | undefined;
         dangerouslyIgnoreUnhandledErrors?: boolean | undefined;
+        [k: string]: unknown;
     };
 }
 /**
@@ -24,6 +25,7 @@ export interface TestParam {
  */
 export declare function defineTestParam(test: TestParam['test']): {
     test: {
+        [k: string]: unknown;
         clearMocks?: boolean | undefined;
         mockReset?: boolean | undefined;
         restoreMocks?: boolean | undefined;

package/esm/parameters/define_viewport_param.d.ts

@@ -17,6 +17,7 @@ export interface ViewportParam {
          * @deprecated Use `disabled` instead.
          */
         disable?: boolean | undefined;
+        [k: string]: unknown;
     };
 }
 export interface Viewport {
@@ -27,7 +28,7 @@ export interface Viewport {
     };
     type: 'mobile' | 'tablet' | 'desktop';
 }
-export interface ViewportParamV9 {
+export interface GlobalApiViewportParam {
     viewport: {
         /**
          * @see https://storybook.js.org/docs/essentials/viewport#viewports
@@ -47,4 +48,4 @@ export interface ViewportParamV9 {
         disabled?: boolean | undefined;
     };
 }
-export declare function defineViewportParam(viewport: ViewportParam['viewport'] | ViewportParamV9['viewport']): ViewportParam;
+export declare function defineViewportParam(viewport: ViewportParam['viewport'] | GlobalApiViewportParam['viewport']): ViewportParam;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobuddy/storybook",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Storybook repo buddy",
   "keywords": [
     "storybook",
@@ -38,14 +38,20 @@
     "@storybook/react-vite": "^8.6.12",
     "@storybook/test": "^8.6.12",
     "@storybook/theming": "^8.6.12",
+    "@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": "^19.1.0",
     "react-dom": "^19.1.0",
     "rimraf": "^6.0.1",
     "storybook": "^8.6.12",
     "storybook-addon-tag-badges": "^1.4.0",
     "storybook-addon-vis": "^0.19.4",
+    "storybook-dark-mode": "^4.0.2",
+    "tailwindcss": "^4.1.5",
+    "vite": "^6.3.4",
     "vitest": "^3.1.2"
   },
   "scripts": {

package/readme.md

@@ -1,10 +1,10 @@
 # @repobuddy/storybook
 
-Your repo buddy for Storybook.
+Your repository buddy for Storybook.
 
 ## Install
 
-```bash
+```sh
 pnpm add -D @repobuddy/storybook
 ```
 
@@ -12,9 +12,10 @@ pnpm add -D @repobuddy/storybook
 
 ### Typed Parameters
 
-Storybook supports some built-in parameters, but the `StoryObj` type does not include them.
+Storybook supports some built-in parameters,
+but the `parameters` props in the `StoryObj` type is typed as `Record<string, any>`.
 
-[`@repobuddy/storybook`] adds these types as well as their corresponding define-functions so that you can use them in your stories.
+[`@repobuddy/storybook`][`@repobuddy/storybook`] adds these types as well as their corresponding define-functions so that you can use them in your stories.
 
 For example:
 
@@ -43,12 +44,25 @@ export const MyStory: StoryObj = {
 }
 ```
 
-### Manager Customizations
+### Brand Title
 
-#### Tag Badges
+[`@repobuddy/storybook`][`@repobuddy/storybook`] also provides a `brandTitle` parameter that allows you to set the brand title of your Storybook.
 
-If you use [`storybook-addon-tag-badges`],
-we provide a different set of badges that uses icons:
+```ts
+import { brandTitle } from '@repobuddy/storybook/manager'
+
+addons.setConfig({
+	brandTitle: brandTitle({
+		title:'My Brand',
+		logo: `<svg.../>`
+	})
+})
+```
+
+### Tag Badges
+
+If you use [`storybook-addon-tag-badges`][`storybook-addon-tag-badges`],
+we provide a different set of badges that uses emojis:
 
 - 🆕 New components/features
 - 🅱️ Beta status

package/src/decorators/show_doc_source.tsx

@@ -0,0 +1,21 @@
+import type { Args, DecoratorFunction, Renderer } from 'storybook/internal/csf'
+
+export function showDocSource<TRenderer extends Renderer = Renderer, TArgs = Args>(): DecoratorFunction<
+	TRenderer,
+	TArgs
+> {
+	return (Story, { parameters }) => {
+		return (
+			<section
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					gap: '1rem'
+				}}
+			>
+				<pre>{parameters.docs?.source?.code}</pre>
+				<Story />
+			</section>
+		)
+	}
+}

package/src/index.ts

@@ -1,4 +1,6 @@
+export * from './decorators/show_doc_source.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'

package/src/manager/brand_title.ts

@@ -5,10 +5,10 @@ export interface BrandTitleOptions {
 	 */
 	title: string
 	/**
-	 * The icon to display in the brand title.
+	 * The logo to display in the brand title.
 	 * It can be a simple string or raw HTML (e.g. `<svg>`).
 	 */
-	icon?: string | undefined
+	logo?: string | undefined
 }
 
 /**
@@ -16,7 +16,7 @@ export interface BrandTitleOptions {
  *
  * @param options - The options for customizing the brand title
  * @param options.title - The title text or HTML to display
- * @param options.icon - Optional icon HTML to display before the title
+ * @param options.logo - Optional logo HTML to display before the title
  * @returns An HTML string containing the brand title element
  *
  * @example
@@ -28,14 +28,14 @@ export interface BrandTitleOptions {
  * addons.setConfig({
  *   brandTitle: brandTitle({
  *     title: 'My Storybook',
- *     icon: '<img src="logo.png" alt="Logo" width="24" height="24">'
+ *     logo: '<img src="logo.png" alt="Logo" width="24" height="24">'
  *   })
  * })
  * ```
  */
 export function brandTitle(options: BrandTitleOptions) {
 	return `<span style="display: flex; align-items: center; gap: 2px;">
-		${options.icon ?? ''}
+		${options.logo ?? ''}
 		${options.title}
 	</span>`
 }

package/src/overview.mdx

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

package/src/parameters/define_actions_param.ts

@@ -3,6 +3,7 @@ export interface ActionsParam {
 		argTypesRegex?: string | undefined
 		disable?: boolean | undefined
 		handles?: string[] | undefined
+		[k: string]: unknown
 	}
 }
 

package/src/parameters/define_backgrounds_param.ts

@@ -0,0 +1,48 @@
+export interface BackgroundsParam {
+	backgrounds: {
+		default?: string | undefined
+		values?: Array<{
+			name: string
+			value: string
+		}>
+		disable?: boolean | undefined
+		grid?:
+			| {
+					cellAmount?: number | undefined
+					cellSize?: number | undefined
+					disable?: boolean | undefined
+					offsetX?: number | undefined
+					offsetY?: number | undefined
+					opacity?: number | undefined
+			  }
+			| undefined
+		[k: string]: unknown
+	}
+}
+export interface GlobalApiBackgroundsParam {
+	backgrounds: {
+		default?: string | undefined
+		options?: Array<{
+			name: string
+			value: string
+		}>
+		disabled?: boolean | undefined
+		grid?:
+			| {
+					cellAmount?: number | undefined
+					cellSize?: number | undefined
+					disable?: boolean | undefined
+					offsetX?: number | undefined
+					offsetY?: number | undefined
+					opacity?: number | undefined
+			  }
+			| undefined
+		[k: string]: unknown
+	}
+}
+
+export const defineBackgroundsParam = (
+	backgrounds: BackgroundsParam['backgrounds'] | GlobalApiBackgroundsParam['backgrounds']
+): BackgroundsParam => ({
+	backgrounds
+})

package/src/parameters/define_parameters.ts

@@ -1,8 +1,12 @@
+import type { BackgroundsParam, GlobalApiBackgroundsParam } from './define_backgrounds_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'
 
-export interface StorybookBuiltInParams extends Partial<LayoutParam>, Partial<StorySortParam>, Partial<TestParam> {}
+export type StorybookBuiltInParams = Partial<LayoutParam> &
+	Partial<StorySortParam> &
+	Partial<TestParam> &
+	Partial<BackgroundsParam | GlobalApiBackgroundsParam>
 
 export function defineParameters<P extends Record<string, any>>(parameters: P & StorybookBuiltInParams) {
 	return parameters

package/src/parameters/define_story_sort.ts

@@ -3,6 +3,7 @@ type StorySortConfig = {
 	locales?: string
 	method?: 'alphabetical' | 'alphabetical-by-kind' | 'custom'
 	order?: string[]
+	[k: string]: unknown
 }
 
 type Story = {

package/src/parameters/define_test_param.ts

@@ -4,6 +4,7 @@ export interface TestParam {
 		mockReset?: boolean | undefined
 		restoreMocks?: boolean | undefined
 		dangerouslyIgnoreUnhandledErrors?: boolean | undefined
+		[k: string]: unknown
 	}
 }
 

package/src/parameters/define_viewport_param.ts

@@ -17,6 +17,7 @@ export interface ViewportParam {
 		 * @deprecated Use `disabled` instead.
 		 */
 		disable?: boolean | undefined
+		[k: string]: unknown
 	}
 }
 
@@ -29,7 +30,7 @@ export interface Viewport {
 	type: 'mobile' | 'tablet' | 'desktop'
 }
 
-export interface ViewportParamV9 {
+export interface GlobalApiViewportParam {
 	viewport: {
 		/**
 		 * @see https://storybook.js.org/docs/essentials/viewport#viewports
@@ -50,6 +51,8 @@ export interface ViewportParamV9 {
 	}
 }
 
-export function defineViewportParam(viewport: ViewportParam['viewport'] | ViewportParamV9['viewport']): ViewportParam {
+export function defineViewportParam(
+	viewport: ViewportParam['viewport'] | GlobalApiViewportParam['viewport']
+): ViewportParam {
 	return { viewport }
 }