@repobuddy/storybook 0.1.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,5 +1,9 @@
+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';
 export * from './parameters/define_story_sort.ts';
 export * from './parameters/define_test_param.ts';
+export * from './parameters/define_viewport_param.ts';

package/esm/index.js

@@ -1,5 +1,9 @@
+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";
 export * from "./parameters/define_story_sort.js";
 export * from "./parameters/define_test_param.js";
+export * from "./parameters/define_viewport_param.js";

package/esm/manager/brand_title.d.ts

@@ -0,0 +1,35 @@
+export interface BrandTitleOptions {
+    /**
+     * The title to display in the brand title.
+     * It can be a simple string or raw HTML.
+     */
+    title: string;
+    /**
+     * The logo to display in the brand title.
+     * It can be a simple string or raw HTML (e.g. `<svg>`).
+     */
+    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.logo - Optional logo HTML to display before the title
+ * @returns An HTML string containing the brand title element
+ *
+ * @example
+ *
+ * ```ts
+ * import { brandTitle } from '@repobuddy/storybook'
+ * import { addons } from '@storybook/manager-api'
+ *
+ * addons.setConfig({
+ *   brandTitle: brandTitle({
+ *     title: 'My Storybook',
+ *     logo: '<img src="logo.png" alt="Logo" width="24" height="24">'
+ *   })
+ * })
+ * ```
+ */
+export declare function brandTitle(options: BrandTitleOptions): string;

package/esm/manager/brand_title.js

@@ -0,0 +1,28 @@
+/**
+ * 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.logo - Optional logo HTML to display before the title
+ * @returns An HTML string containing the brand title element
+ *
+ * @example
+ *
+ * ```ts
+ * import { brandTitle } from '@repobuddy/storybook'
+ * import { addons } from '@storybook/manager-api'
+ *
+ * addons.setConfig({
+ *   brandTitle: brandTitle({
+ *     title: 'My Storybook',
+ *     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.logo ?? ''}
+		${options.title}
+	</span>`;
+}

package/esm/manager/tag_badges.js

@@ -68,7 +68,7 @@ export const tagBadges = [
     {
         tags: 'integration',
         badge: {
-            text: '🧱',
+            text: '🔄',
             bgColor: 'transparent',
             tooltip: 'Integration Test'
         }

package/esm/manager.d.ts

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

package/esm/manager.js

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

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_docs_param.d.ts

@@ -0,0 +1,181 @@
+import type { StoryContext } from '@storybook/react';
+declare global {
+    namespace JSX {
+        interface Element {
+        }
+    }
+}
+export interface SourceProps {
+    /**
+     * Provides the source code to be rendered.
+     *
+     * This is useful when the story contains extra code that would be confusing in the docs.
+     *
+     * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#code
+     */
+    code?: string | undefined;
+    /**
+     * Specifies whether the source code should be rendered in dark mode.
+     *
+     * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#dark
+     */
+    dark?: boolean | undefined;
+    /**
+     * Specifies whether decorators should be excluded from the source code.
+     *
+     * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#excludedecorators
+     */
+    excludeDecorators?: boolean | undefined;
+    /**
+     * Specifies the language of the source code.
+     *
+     * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#language
+     */
+    language?: string | undefined;
+    /**
+     * A function to dynamically transform the source before being rendered,
+     * based on the original source and any story context necessary.
+     * The returned string is displayed as-is.
+     *
+     * If both code and transform are specified, transform will be ignored.
+     *
+     * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#transform
+     */
+    transform?: ((code: string, storyContext: StoryContext) => string) | undefined;
+    /**
+     * Specifies how the source code is rendered.
+     *
+     * - auto: Same as dynamic, if the story's render function accepts args inputs and dynamic is supported by the framework in use; otherwise same as code
+     * - code: Renders the value of code prop, otherwise renders static story source
+     * - dynamic: Renders the story source with dynamically updated arg values
+     *
+     * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#type
+     */
+    type?: 'auto' | 'code' | 'dynamic' | undefined;
+}
+export interface DocsParam {
+    docs: {
+        argTypes?: {
+            /**
+             * Specifies which controls to exclude from the args table.
+             * Any controls whose names match the regex or are part of the array will be left out.
+             *
+             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-argtypes#exclude
+             */
+            exclude?: string[] | RegExp | undefined;
+            /**
+             * Specifies which controls to include in the args table.
+             * Any controls whose names don't match the regex or are not part of the array will be left out.
+             *
+             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-argtypes#include
+             */
+            include?: string[] | RegExp | undefined;
+            /**
+             * Specifies how the arg types are sorted.
+             *
+             * - none: Unsorted, displayed in the same order the arg types are processed in
+             * - alpha: Sorted alphabetically, by the arg type's name
+             * - requiredFirst: Same as alpha, with any required arg types displayed first
+             *
+             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-argtypes#sort
+             */
+            sort?: 'alpha' | 'requiredFirst' | 'none' | undefined;
+        } | undefined;
+        description?: {
+            /**
+             * `docs.description.story` can be used to describe the story in doc.
+             */
+            story?: string | undefined;
+            /**
+             * `docs.description.component` can be used to describe the component in meta.
+             * It has no effect on the stories.
+             */
+            component?: string | undefined;
+        } | undefined;
+        source?: SourceProps | undefined;
+        canvas?: {
+            /**
+             * Provides any additional custom actions to show in the bottom right corner.
+             * These are simple buttons that do anything you specify in the onClick function.
+             *
+             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#additionalactions
+             */
+            additionalActions?: Array<{
+                title: string | JSX.Element;
+                className?: string;
+                onClick: () => void;
+                disabled?: boolean;
+            }> | undefined;
+            /**
+             * Provides HTML class(es) to the preview element, for custom styling.
+             *
+             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#classname
+             */
+            className?: string | undefined;
+            /**
+             * Specifies how the canvas should layout the story.
+             *
+             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#layout
+             */
+            layout?: 'centered' | 'padded' | 'fullscreen' | undefined;
+            /**
+             * Specifies the initial state of the source panel.
+             *
+             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#sourcestate
+             */
+            sourceState?: 'hidden' | 'shown' | 'none' | undefined;
+            /**
+             * Determines whether to render a toolbar containing tools to interact with the story.
+             *
+             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#withtoolbar
+             */
+            withToolbar?: boolean | undefined;
+        } | undefined;
+        controls?: {
+            /**
+             * Specifies which controls to exclude from the args table.
+             * Any controls whose names match the regex or are part of the array will be left out.
+             *
+             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-controls#exclude
+             */
+            exclude?: string[] | RegExp | undefined;
+            /**
+             * Specifies which controls to include in the args table.
+             * Any controls whose names don't match the regex or are not part of the array will be left out.
+             *
+             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-controls#include
+             */
+            include?: string[] | RegExp | undefined;
+            /**
+             *
+             * Specifies how the controls are sorted.
+             *
+             * - none: Unsorted, displayed in the same order the controls are processed in
+             * - alpha: Sorted alphabetically, by the arg type's name
+             * - requiredFirst: Same as alpha, with any required controls displayed first
+             *
+             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-controls#sort
+             */
+            sort?: 'alpha' | 'requiredFirst' | 'none' | undefined;
+        } | undefined;
+        story?: {
+            /**
+             * Specifies whether the story should be autoplayed.
+             *
+             * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-story#autoplay
+             */
+            autoplay?: boolean | undefined;
+            /**
+             * Set a minimum height (note for an iframe this is the actual height) when rendering a story in an iframe or inline.
+             * This overrides parameters.docs.story.iframeHeight for iframes.
+             */
+            height?: string | undefined;
+            /**
+             * Determines whether the story is rendered inline (in the same browser frame as the other docs content) or in an iframe.
+             */
+            inline?: boolean | undefined;
+        } | undefined;
+        [k: string]: unknown;
+    };
+}
+export declare function defineDocsParam(docs: DocsParam['docs']): DocsParam['docs'];

package/esm/parameters/define_docs_param.js

@@ -0,0 +1,3 @@
+export function defineDocsParam(docs) {
+    return { docs };
+}

package/esm/parameters/define_layout_param.d.ts

@@ -18,5 +18,5 @@ export interface LayoutParam {
  * ```
  */
 export declare const defineLayoutParam: (layout: LayoutParam["layout"]) => {
-    layout: "padded" | "fullscreen" | "centered";
+    layout: "centered" | "padded" | "fullscreen";
 };

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

@@ -0,0 +1,51 @@
+export interface ViewportParam {
+    viewport: {
+        /**
+         * @see https://storybook.js.org/docs/essentials/viewport#viewports
+         */
+        viewports?: Record<string, Viewport> | undefined;
+        /**
+         * @see https://storybook.js.org/docs/essentials/viewport#defaultorientation
+         */
+        defaultOrientation?: 'landscape' | 'portrait' | undefined;
+        /**
+         * @see https://storybook.js.org/docs/essentials/viewport#defaultviewport
+         */
+        defaultViewport?: string | undefined;
+        /**
+         * Disables the viewport parameter.
+         * @deprecated Use `disabled` instead.
+         */
+        disable?: boolean | undefined;
+        [k: string]: unknown;
+    };
+}
+export interface Viewport {
+    name: string;
+    styles: {
+        width: string;
+        height: string;
+    };
+    type: 'mobile' | 'tablet' | 'desktop';
+}
+export interface GlobalApiViewportParam {
+    viewport: {
+        /**
+         * @see https://storybook.js.org/docs/essentials/viewport#viewports
+         */
+        options?: Record<string, Viewport> | undefined;
+        /**
+         * @see https://storybook.js.org/docs/essentials/viewport#defaultviewport
+         */
+        defaultViewport?: string | undefined;
+        /**
+         * @see https://storybook.js.org/docs/essentials/viewport#defaultorientation
+         */
+        defaultOrientation?: 'landscape' | 'portrait' | undefined;
+        /**
+         * @see https://storybook.js.org/docs/essentials/viewport#disable
+         */
+        disabled?: boolean | undefined;
+    };
+}
+export declare function defineViewportParam(viewport: ViewportParam['viewport'] | GlobalApiViewportParam['viewport']): ViewportParam;

package/esm/parameters/define_viewport_param.js

@@ -0,0 +1,3 @@
+export function defineViewportParam(viewport) {
+    return { viewport };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobuddy/storybook",
-  "version": "0.1.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
@@ -58,7 +72,7 @@ we provide a different set of badges that uses icons:
 - 📋 To-do items
 - 📝 Code-only stories
 - 🧪 Unit tests
-- 🧱 Integration tests
+- 🔄 Integration tests
 - Version indicators (unchanged)
 
 To use them, add them to your `.storybook/manager.ts`:

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,5 +1,9 @@
+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'
 export * from './parameters/define_story_sort.ts'
 export * from './parameters/define_test_param.ts'
+export * from './parameters/define_viewport_param.ts'

package/src/manager/brand_title.ts

@@ -0,0 +1,41 @@
+export interface BrandTitleOptions {
+	/**
+	 * The title to display in the brand title.
+	 * It can be a simple string or raw HTML.
+	 */
+	title: string
+	/**
+	 * The logo to display in the brand title.
+	 * It can be a simple string or raw HTML (e.g. `<svg>`).
+	 */
+	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.logo - Optional logo HTML to display before the title
+ * @returns An HTML string containing the brand title element
+ *
+ * @example
+ *
+ * ```ts
+ * import { brandTitle } from '@repobuddy/storybook'
+ * import { addons } from '@storybook/manager-api'
+ *
+ * addons.setConfig({
+ *   brandTitle: brandTitle({
+ *     title: 'My Storybook',
+ *     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.logo ?? ''}
+		${options.title}
+	</span>`
+}

package/src/manager/tag_badges.ts

@@ -71,7 +71,7 @@ export const tagBadges: TagBadgeParameters = [
 	{
 		tags: 'integration',
 		badge: {
-			text: '🧱',
+			text: '🔄',
 			bgColor: 'transparent',
 			tooltip: 'Integration Test'
 		}

package/src/manager.ts

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

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_docs_param.ts

@@ -0,0 +1,206 @@
+import type { StoryContext } from '@storybook/react'
+
+declare global {
+	namespace JSX {
+		interface Element {}
+	}
+}
+
+export interface SourceProps {
+	/**
+	 * Provides the source code to be rendered.
+	 *
+	 * This is useful when the story contains extra code that would be confusing in the docs.
+	 *
+	 * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#code
+	 */
+	code?: string | undefined
+	/**
+	 * Specifies whether the source code should be rendered in dark mode.
+	 *
+	 * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#dark
+	 */
+	dark?: boolean | undefined
+	/**
+	 * Specifies whether decorators should be excluded from the source code.
+	 *
+	 * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#excludedecorators
+	 */
+	excludeDecorators?: boolean | undefined
+	/**
+	 * Specifies the language of the source code.
+	 *
+	 * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#language
+	 */
+	language?: string | undefined
+	/**
+	 * A function to dynamically transform the source before being rendered,
+	 * based on the original source and any story context necessary.
+	 * The returned string is displayed as-is.
+	 *
+	 * If both code and transform are specified, transform will be ignored.
+	 *
+	 * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#transform
+	 */
+	transform?: ((code: string, storyContext: StoryContext) => string) | undefined
+	/**
+	 * Specifies how the source code is rendered.
+	 *
+	 * - auto: Same as dynamic, if the story's render function accepts args inputs and dynamic is supported by the framework in use; otherwise same as code
+	 * - code: Renders the value of code prop, otherwise renders static story source
+	 * - dynamic: Renders the story source with dynamically updated arg values
+	 *
+	 * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-source#type
+	 */
+	type?: 'auto' | 'code' | 'dynamic' | undefined
+}
+
+export interface DocsParam {
+	docs: {
+		argTypes?:
+			| {
+					/**
+					 * Specifies which controls to exclude from the args table.
+					 * Any controls whose names match the regex or are part of the array will be left out.
+					 *
+					 * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-argtypes#exclude
+					 */
+					exclude?: string[] | RegExp | undefined
+
+					/**
+					 * Specifies which controls to include in the args table.
+					 * Any controls whose names don't match the regex or are not part of the array will be left out.
+					 *
+					 * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-argtypes#include
+					 */
+					include?: string[] | RegExp | undefined
+
+					/**
+					 * Specifies how the arg types are sorted.
+					 *
+					 * - none: Unsorted, displayed in the same order the arg types are processed in
+					 * - alpha: Sorted alphabetically, by the arg type's name
+					 * - requiredFirst: Same as alpha, with any required arg types displayed first
+					 *
+					 * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-argtypes#sort
+					 */
+					sort?: 'alpha' | 'requiredFirst' | 'none' | undefined
+			  }
+			| undefined
+		description?:
+			| {
+					/**
+					 * `docs.description.story` can be used to describe the story in doc.
+					 */
+					story?: string | undefined
+					/**
+					 * `docs.description.component` can be used to describe the component in meta.
+					 * It has no effect on the stories.
+					 */
+					component?: string | undefined
+			  }
+			| undefined
+		source?: SourceProps | undefined
+		canvas?:
+			| {
+					/**
+					 * Provides any additional custom actions to show in the bottom right corner.
+					 * These are simple buttons that do anything you specify in the onClick function.
+					 *
+					 * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#additionalactions
+					 */
+					additionalActions?:
+						| Array<{
+								title: string | JSX.Element
+								className?: string
+								onClick: () => void
+								disabled?: boolean
+						  }>
+						| undefined
+
+					/**
+					 * Provides HTML class(es) to the preview element, for custom styling.
+					 *
+					 * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#classname
+					 */
+					className?: string | undefined
+
+					/**
+					 * Specifies how the canvas should layout the story.
+					 *
+					 * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#layout
+					 */
+					layout?: 'centered' | 'padded' | 'fullscreen' | undefined
+
+					/**
+					 * Specifies the initial state of the source panel.
+					 *
+					 * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#sourcestate
+					 */
+					sourceState?: 'hidden' | 'shown' | 'none' | undefined
+
+					/**
+					 * Determines whether to render a toolbar containing tools to interact with the story.
+					 *
+					 * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-canvas#withtoolbar
+					 */
+					withToolbar?: boolean | undefined
+			  }
+			| undefined
+		controls?:
+			| {
+					/**
+					 * Specifies which controls to exclude from the args table.
+					 * Any controls whose names match the regex or are part of the array will be left out.
+					 *
+					 * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-controls#exclude
+					 */
+					exclude?: string[] | RegExp | undefined
+
+					/**
+					 * Specifies which controls to include in the args table.
+					 * Any controls whose names don't match the regex or are not part of the array will be left out.
+					 *
+					 * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-controls#include
+					 */
+					include?: string[] | RegExp | undefined
+
+					/**
+					 *
+					 * Specifies how the controls are sorted.
+					 *
+					 * - none: Unsorted, displayed in the same order the controls are processed in
+					 * - alpha: Sorted alphabetically, by the arg type's name
+					 * - requiredFirst: Same as alpha, with any required controls displayed first
+					 *
+					 * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-controls#sort
+					 */
+					sort?: 'alpha' | 'requiredFirst' | 'none' | undefined
+			  }
+			| undefined
+		story?:
+			| {
+					/**
+					 * Specifies whether the story should be autoplayed.
+					 *
+					 * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-story#autoplay
+					 */
+					autoplay?: boolean | undefined
+					/**
+					 * Set a minimum height (note for an iframe this is the actual height) when rendering a story in an iframe or inline.
+					 * This overrides parameters.docs.story.iframeHeight for iframes.
+					 */
+					height?: string | undefined
+					/**
+					 * Determines whether the story is rendered inline (in the same browser frame as the other docs content) or in an iframe.
+					 */
+					inline?: boolean | undefined
+			  }
+			| undefined
+		[k: string]: unknown
+	}
+}
+
+export function defineDocsParam(docs: DocsParam['docs']): DocsParam['docs'] {
+	return { docs }
+}

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

@@ -0,0 +1,58 @@
+export interface ViewportParam {
+	viewport: {
+		/**
+		 * @see https://storybook.js.org/docs/essentials/viewport#viewports
+		 */
+		viewports?: Record<string, Viewport> | undefined
+		/**
+		 * @see https://storybook.js.org/docs/essentials/viewport#defaultorientation
+		 */
+		defaultOrientation?: 'landscape' | 'portrait' | undefined
+		/**
+		 * @see https://storybook.js.org/docs/essentials/viewport#defaultviewport
+		 */
+		defaultViewport?: string | undefined
+		/**
+		 * Disables the viewport parameter.
+		 * @deprecated Use `disabled` instead.
+		 */
+		disable?: boolean | undefined
+		[k: string]: unknown
+	}
+}
+
+export interface Viewport {
+	name: string
+	styles: {
+		width: string
+		height: string
+	}
+	type: 'mobile' | 'tablet' | 'desktop'
+}
+
+export interface GlobalApiViewportParam {
+	viewport: {
+		/**
+		 * @see https://storybook.js.org/docs/essentials/viewport#viewports
+		 */
+		options?: Record<string, Viewport> | undefined
+		/**
+		 * @see https://storybook.js.org/docs/essentials/viewport#defaultviewport
+		 */
+		defaultViewport?: string | undefined
+		/**
+		 * @see https://storybook.js.org/docs/essentials/viewport#defaultorientation
+		 */
+		defaultOrientation?: 'landscape' | 'portrait' | undefined
+		/**
+		 * @see https://storybook.js.org/docs/essentials/viewport#disable
+		 */
+		disabled?: boolean | undefined
+	}
+}
+
+export function defineViewportParam(
+	viewport: ViewportParam['viewport'] | GlobalApiViewportParam['viewport']
+): ViewportParam {
+	return { viewport }
+}