@repobuddy/storybook 0.1.0 → 0.2.0

package/esm/index.d.ts

@@ -1,5 +1,7 @@
 export * from './parameters/define_actions_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,7 @@
 export * from "./parameters/define_actions_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 icon to display in the brand title.
+     * It can be a simple string or raw HTML (e.g. `<svg>`).
+     */
+    icon?: 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
+ * @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',
+ *     icon: '<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.icon - Optional icon 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',
+ *     icon: '<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.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_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_viewport_param.d.ts

@@ -0,0 +1,50 @@
+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;
+    };
+}
+export interface Viewport {
+    name: string;
+    styles: {
+        width: string;
+        height: string;
+    };
+    type: 'mobile' | 'tablet' | 'desktop';
+}
+export interface ViewportParamV9 {
+    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'] | ViewportParamV9['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.2.0",
   "description": "Storybook repo buddy",
   "keywords": [
     "storybook",

package/readme.md

@@ -58,7 +58,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/index.ts

@@ -1,5 +1,7 @@
 export * from './parameters/define_actions_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 icon to display in the brand title.
+	 * It can be a simple string or raw HTML (e.g. `<svg>`).
+	 */
+	icon?: 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
+ * @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',
+ *     icon: '<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.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/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_viewport_param.ts

@@ -0,0 +1,55 @@
+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
+	}
+}
+
+export interface Viewport {
+	name: string
+	styles: {
+		width: string
+		height: string
+	}
+	type: 'mobile' | 'tablet' | 'desktop'
+}
+
+export interface ViewportParamV9 {
+	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'] | ViewportParamV9['viewport']): ViewportParam {
+	return { viewport }
+}