@sit-onyx/storybook-utils 1.0.0-alpha.16 → 1.0.0-alpha.160

package/README.md

@@ -11,3 +11,9 @@
 # onyx Storybook utils
 
 Storybook utilities for Vue created by [Schwarz IT](https://it.schwarz).
+
+<br />
+
+## Documentation
+
+You can find our documentation [here](https://onyx.schwarz/development/packages/storybook-utils.html).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-alpha.16",
+  "version": "1.0.0-alpha.160",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -13,18 +13,31 @@
     ".": "./src/index.ts",
     "./style.css": "./src/index.css"
   },
+  "homepage": "https://onyx.schwarz/development/packages/storybook-utils.html",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SchwarzIT/onyx",
+    "directory": "packages/storybook-utils"
+  },
+  "bugs": {
+    "url": "https://github.com/SchwarzIT/onyx/issues"
+  },
   "peerDependencies": {
-    "@storybook/core-events": ">= 7",
-    "@storybook/preview-api": ">= 7",
-    "@storybook/theming": ">= 7",
-    "@storybook/vue3": ">= 7",
-    "storybook-dark-mode": ">= 3",
-    "sit-onyx": "^1.0.0-alpha.15"
+    "@storybook/core-events": ">= 8.0.0",
+    "@storybook/docs-tools": ">= 8.0.0",
+    "@storybook/preview-api": ">= 8.0.0",
+    "@storybook/theming": ">= 8.0.0",
+    "@storybook/vue3": ">= 8.0.0",
+    "storybook-dark-mode": ">= 4",
+    "@sit-onyx/icons": "^0.1.0-alpha.2",
+    "sit-onyx": "^1.0.0-alpha.154"
   },
   "dependencies": {
-    "deepmerge-ts": "^5.1.0"
+    "deepmerge-ts": "^7.0.3"
   },
   "scripts": {
-    "build": "tsc --noEmit"
+    "build": "tsc --noEmit",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage"
   }
 }

package/src/preview.spec.ts

@@ -0,0 +1,36 @@
+import bellRing from "@sit-onyx/icons/bell-ring.svg?raw";
+import calendar from "@sit-onyx/icons/calendar.svg?raw";
+import placeholder from "@sit-onyx/icons/placeholder.svg?raw";
+import { describe, expect, test, vi } from "vitest";
+import { replaceAll, sourceCodeTransformer } from "./preview";
+import * as sourceCodeGenerator from "./source-code-generator";
+
+describe("preview.ts", () => {
+  test("should transform source code and add icon/onyx imports", () => {
+    // ARRANGE
+    const generatorSpy = vi.spyOn(sourceCodeGenerator, "generateSourceCode")
+      .mockReturnValue(`<template>
+<OnyxTest icon='${placeholder}' test='${bellRing}' :obj="{foo:'${replaceAll(calendar, '"', "\\'")}'}" />
+<OnyxOtherComponent />
+<OnyxComp>Test</OnyxComp>
+</template>`);
+
+    // ACT
+    const sourceCode = sourceCodeTransformer("", { title: "OnyxTest", args: {} });
+
+    // ASSERT
+    expect(generatorSpy).toHaveBeenCalledOnce();
+    expect(sourceCode).toBe(`<script lang="ts" setup>
+import { OnyxComp, OnyxOtherComponent, OnyxTest } from "sit-onyx";
+import bellRing from "@sit-onyx/icons/bell-ring.svg?raw";
+import calendar from "@sit-onyx/icons/calendar.svg?raw";
+import placeholder from "@sit-onyx/icons/placeholder.svg?raw";
+</script>
+
+<template>
+<OnyxTest :icon="placeholder" :test="bellRing" :obj="{foo:calendar}" />
+<OnyxOtherComponent />
+<OnyxComp>Test</OnyxComp>
+</template>`);
+  });
+});

package/src/preview.ts

@@ -1,9 +1,13 @@
 import { DOCS_RENDERED } from "@storybook/core-events";
 import { addons } from "@storybook/preview-api";
 import { type ThemeVars } from "@storybook/theming";
-import { type Preview } from "@storybook/vue3";
+import { type Preview, type StoryContext } from "@storybook/vue3";
 import { deepmerge } from "deepmerge-ts";
 import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
+
+import { getIconImportName } from "@sit-onyx/icons";
+import { requiredGlobalType, withRequired } from "./required";
+import { generateSourceCode } from "./source-code-generator";
 import { ONYX_BREAKPOINTS, createTheme } from "./theme";
 
 const themes = {
@@ -17,7 +21,6 @@ const themes = {
  * - Improved Vue-specific code highlighting (e.g. using `@` instead of `v-on:`)
  * - Setup for dark mode (including docs page). Requires addon `storybook-dark-mode` to be enabled in .storybook/main.ts file
  * - Custom Storybook theme using onyx colors (light and dark mode)
- * - Support for setting the light/dark mode when Storybook is embedded as an iframe (via query parameter, e.g. `?theme=dark`)
  * - Configure viewports / breakpoints as defined by onyx
  *
  * @param overrides Custom preview / overrides, will be deep merged with the default preview.
@@ -39,6 +42,10 @@ const themes = {
  */
 export const createPreview = <T extends Preview = Preview>(overrides?: T) => {
   const defaultPreview = {
+    globalTypes: {
+      ...requiredGlobalType,
+    },
+    decorators: [withRequired],
     parameters: {
       controls: {
         matchers: {
@@ -52,20 +59,16 @@ export const createPreview = <T extends Preview = Preview>(overrides?: T) => {
       docs: {
         // see: https://github.com/hipstersmoothie/storybook-dark-mode/issues/127#issuecomment-840701971
         get theme(): ThemeVars {
-          // support setting the theme via query parameters, useful if docs are embedded via an iframe
-          const params = new URLSearchParams(window.location.search);
-          const themeParam = params.get("theme");
-
-          const isDark = themeParam
-            ? themeParam === "dark"
-            : parent.document.body.classList.contains("dark");
+          const isDark = parent.document.body.classList.contains("dark");
 
           if (isDark) {
             document.body.classList.remove("light");
             document.body.classList.add("dark");
+            document.documentElement.style.colorScheme = "dark";
           } else {
             document.body.classList.remove("dark");
             document.body.classList.add("light");
+            document.documentElement.style.colorScheme = "light";
           }
 
           return isDark ? themes.dark : themes.light;
@@ -78,22 +81,7 @@ export const createPreview = <T extends Preview = Preview>(overrides?: T) => {
            * we want it to look.
            * @see https://storybook.js.org/docs/react/api/doc-block-source
            */
-          transform: (sourceCode: string): string => {
-            const replacements = [
-              // replace event bindings with shortcut
-              { searchValue: "v-on:", replaceValue: "@" },
-              // remove empty event handlers, e.g. @click="()=>({})" will be removed
-              { searchValue: / @.*['"]\(\)=>\({}\)['"]/g, replaceValue: "" },
-              // remove empty v-binds, e.g. v-bind="{}" will be removed
-              { searchValue: / v-bind=['"]{}['"]/g, replaceValue: "" },
-              // replace boolean shortcuts for true, e.g. disabled="true" will be changed to just disabled
-              { searchValue: /:(.*)=['"]true['"]/g, replaceValue: "$1" },
-            ];
-
-            return replacements.reduce((code, replacement) => {
-              return replaceAll(code, replacement.searchValue, replacement.replaceValue);
-            }, sourceCode);
-          },
+          transform: sourceCodeTransformer,
         },
       },
       darkMode: {
@@ -129,10 +117,93 @@ export const createPreview = <T extends Preview = Preview>(overrides?: T) => {
   return deepmerge<[T, typeof defaultPreview]>(overrides ?? ({} as T), defaultPreview);
 };
 
+/**
+ * Custom transformer for the story source code to support improved source code generation.
+ * and add imports for all used onyx icons so icon imports are displayed in the source code
+ * instead of the the raw SVG content.
+ *
+ * @see https://storybook.js.org/docs/react/api/doc-block-source
+ */
+export const sourceCodeTransformer = (
+  sourceCode: string,
+  ctx: Pick<StoryContext, "title" | "component" | "args">,
+): string => {
+  const RAW_ICONS = import.meta.glob("../node_modules/@sit-onyx/icons/src/assets/*.svg", {
+    query: "?raw",
+    import: "default",
+    eager: true,
+  });
+
+  /**
+   * Mapping between icon SVG content (key) and icon name (value).
+   * Needed to display a labelled dropdown list of all available icons.
+   */
+  const ALL_ICONS = Object.entries(RAW_ICONS).reduce<Record<string, string>>(
+    (obj, [filePath, content]) => {
+      obj[filePath.split("/").at(-1)!.replace(".svg", "")] = content as string;
+      return obj;
+    },
+    {},
+  );
+
+  let code = generateSourceCode(ctx);
+
+  const additionalImports: string[] = [];
+
+  // add icon imports to the source code for all used onyx icons
+  Object.entries(ALL_ICONS).forEach(([iconName, iconContent]) => {
+    const importName = getIconImportName(iconName);
+    const singleQuotedIconContent = `'${replaceAll(iconContent, '"', "\\'")}'`;
+    const escapedIconContent = `"${replaceAll(iconContent, '"', '\\"')}"`;
+
+    if (code.includes(iconContent)) {
+      code = code.replace(new RegExp(` (\\S+)=['"]${iconContent}['"]`), ` :$1="${importName}"`);
+      additionalImports.push(`import ${importName} from "@sit-onyx/icons/${iconName}.svg?raw";`);
+    } else if (code.includes(singleQuotedIconContent)) {
+      // support icons inside objects
+      code = code.replace(singleQuotedIconContent, importName);
+      additionalImports.push(`import ${importName} from "@sit-onyx/icons/${iconName}.svg?raw";`);
+    } else if (code.includes(escapedIconContent)) {
+      // support icons inside objects
+      code = code.replace(escapedIconContent, importName);
+      additionalImports.push(`import ${importName} from "@sit-onyx/icons/${iconName}.svg?raw";`);
+    }
+  });
+
+  // add imports for all used onyx components
+  // Set is used here to only include unique components if they are used multiple times
+  const usedOnyxComponents = [
+    ...new Set(Array.from(code.matchAll(/<(Onyx\w+)(?:\s*\/?)/g)).map((match) => match[1])),
+  ].sort();
+
+  if (usedOnyxComponents.length > 0) {
+    additionalImports.unshift(`import { ${usedOnyxComponents.join(", ")} } from "sit-onyx";`);
+  }
+
+  if (additionalImports.length === 0) return code;
+
+  if (code.startsWith("<script")) {
+    const index = code.indexOf("\n");
+    const hasOtherImports = code.includes("import {");
+    return (
+      code.slice(0, index) +
+      additionalImports.join("\n") +
+      (!hasOtherImports ? "\n" : "") +
+      code.slice(index)
+    );
+  }
+
+  return `<script lang="ts" setup>
+${additionalImports.join("\n")}
+</script>
+
+${code}`;
+};
+
 /**
  * Custom String.replaceAll implementation using a RegExp
  * because String.replaceAll() is not available in our specified EcmaScript target in tsconfig.json
  */
-const replaceAll = (message: string, searchValue: string | RegExp, replaceValue: string) => {
-  return message.replace(new RegExp(searchValue, "gi"), replaceValue);
+export const replaceAll = (value: string, searchValue: string | RegExp, replaceValue: string) => {
+  return value.replace(new RegExp(searchValue, "gi"), replaceValue);
 };

package/src/required.ts

@@ -0,0 +1,36 @@
+import { type Decorator } from "@storybook/vue3";
+import { ref, watch } from "vue";
+import type { StorybookGlobalType } from "./types";
+
+type RequiredIndicator = "required" | "optional";
+
+export const requiredGlobalType = {
+  requiredMode: {
+    name: "Required mode",
+    description: "Switch between 'required' and 'optional' indicator",
+    defaultValue: "required",
+    toolbar: {
+      icon: "flag",
+      items: [
+        { value: "required", right: "*", title: "Required indicator" },
+        { value: "optional", right: "(optional)", title: "Optional indicator" },
+      ],
+    },
+  } satisfies StorybookGlobalType<RequiredIndicator>,
+};
+
+const requiredMode = ref<RequiredIndicator>("required");
+
+export const withRequired: Decorator = (Story, context) => {
+  watch(
+    () => context.globals.requiredMode as RequiredIndicator,
+    (newRequiredMode) => (requiredMode.value = newRequiredMode),
+    { immediate: true },
+  );
+
+  return {
+    components: { Story },
+    setup: () => ({ requiredMode }),
+    template: `<div :class="{ ['onyx-use-optional']: requiredMode === 'optional' }"> <story /> </div>`,
+  };
+};

package/src/source-code-generator.spec.ts

@@ -0,0 +1,236 @@
+//
+// This file is only a temporary copy of the improved source code generation for Storybook.
+// It is intended to be deleted once its officially released in Storybook itself, see:
+// https://github.com/storybookjs/storybook/pull/27194
+//
+import { expect, test } from "vitest";
+import { h } from "vue";
+import {
+  generatePropsSourceCode,
+  generateSlotSourceCode,
+  generateSourceCode,
+  parseDocgenInfo,
+  type SourceCodeGeneratorContext,
+} from "./source-code-generator";
+
+test("should generate source code for props", () => {
+  const ctx: SourceCodeGeneratorContext = {
+    scriptVariables: {},
+    imports: {},
+  };
+
+  const code = generatePropsSourceCode(
+    {
+      a: "foo",
+      b: '"I am double quoted"',
+      c: 42,
+      d: true,
+      e: false,
+      f: [1, 2, 3],
+      g: {
+        g1: "foo",
+        g2: 42,
+      },
+      h: undefined,
+      i: null,
+      j: "",
+      k: BigInt(9007199254740991),
+      l: Symbol(),
+      m: Symbol("foo"),
+      modelValue: "test-v-model",
+      otherModelValue: 42,
+      default: "default slot",
+      testSlot: "test slot",
+    },
+    ["default", "testSlot"],
+    ["update:modelValue", "update:otherModelValue"],
+    ctx,
+  );
+
+  expect(code).toBe(
+    `a="foo" b='"I am double quoted"' :c="42" d :e="false" :f="f" :g="g" :k="BigInt(9007199254740991)" :l="Symbol()" :m="Symbol('foo')" v-model="modelValue" v-model:otherModelValue="otherModelValue"`,
+  );
+
+  expect(ctx.scriptVariables).toStrictEqual({
+    f: `[1,2,3]`,
+    g: `{"g1":"foo","g2":42}`,
+    modelValue: 'ref("test-v-model")',
+    otherModelValue: "ref(42)",
+  });
+
+  expect(Array.from(ctx.imports.vue.values())).toStrictEqual(["ref"]);
+});
+
+test("should generate source code for slots", () => {
+  // slot code generator should support primitive values (string, number etc.)
+  // but also VNodes (e.g. created using h()) so custom Vue components can also be used
+  // inside slots with proper generated code
+
+  const slots = {
+    default: "default content",
+    a: "a content",
+    b: 42,
+    c: true,
+    // single VNode without props
+    d: h("div", "d content"),
+    // VNode with props and single child
+    e: h("div", { style: "color:red" }, "e content"),
+    // VNode with props and single child returned as getter
+    f: h("div", { style: "color:red" }, () => "f content"),
+    // VNode with multiple children
+    g: h("div", { style: "color:red" }, [
+      "child 1",
+      h("span", { style: "color:green" }, "child 2"),
+    ]),
+    // VNode multiple children but returned as getter
+    h: h("div", { style: "color:red" }, () => [
+      "child 1",
+      h("span", { style: "color:green" }, "child 2"),
+    ]),
+    // VNode with multiple and nested children
+    i: h("div", { style: "color:red" }, [
+      "child 1",
+      h("span", { style: "color:green" }, ["nested child 1", h("p", "nested child 2")]),
+    ]),
+    j: ["child 1", "child 2"],
+    k: null,
+    l: { foo: "bar" },
+    m: BigInt(9007199254740991),
+  };
+
+  const expectedCode = `default content
+
+<template #a>a content</template>
+
+<template #b>42</template>
+
+<template #c>true</template>
+
+<template #d><div>d content</div></template>
+
+<template #e><div style="color:red">e content</div></template>
+
+<template #f><div style="color:red">f content</div></template>
+
+<template #g><div style="color:red">child 1
+<span style="color:green">child 2</span></div></template>
+
+<template #h><div style="color:red">child 1
+<span style="color:green">child 2</span></div></template>
+
+<template #i><div style="color:red">child 1
+<span style="color:green">nested child 1
+<p>nested child 2</p></span></div></template>
+
+<template #j>child 1
+child 2</template>
+
+<template #l>{"foo":"bar"}</template>
+
+<template #m>{{ BigInt(9007199254740991) }}</template>`;
+
+  let actualCode = generateSlotSourceCode(slots, Object.keys(slots), {
+    scriptVariables: {},
+    imports: {},
+  });
+  expect(actualCode).toBe(expectedCode);
+
+  // should generate the same code if getters/functions are used to return the slot content
+  const slotsWithGetters = Object.entries(slots).reduce<
+    Record<string, () => (typeof slots)[keyof typeof slots]>
+  >((obj, [slotName, value]) => {
+    obj[slotName] = () => value;
+    return obj;
+  }, {});
+
+  actualCode = generateSlotSourceCode(slotsWithGetters, Object.keys(slotsWithGetters), {
+    scriptVariables: {},
+    imports: {},
+  });
+  expect(actualCode).toBe(expectedCode);
+});
+
+test("should generate source code for slots with bindings", () => {
+  type TestBindings = {
+    foo: string;
+    bar?: number;
+  };
+
+  const slots = {
+    a: ({ foo, bar }: TestBindings) => `Slot with bindings ${foo} and ${bar}`,
+    b: ({ foo }: TestBindings) => h("a", { href: foo, target: foo }, `Test link: ${foo}`),
+  };
+
+  const expectedCode = `<template #a="{ foo, bar }">Slot with bindings {{ foo }} and {{ bar }}</template>
+
+<template #b="{ foo }"><a :href="foo" :target="foo">Test link: {{ foo }}</a></template>`;
+
+  const actualCode = generateSlotSourceCode(slots, Object.keys(slots), {
+    imports: {},
+    scriptVariables: {},
+  });
+  expect(actualCode).toBe(expectedCode);
+});
+
+test("should generate source code with <script setup> block", () => {
+  const actualCode = generateSourceCode({
+    title: "MyComponent",
+    component: {
+      __docgenInfo: {
+        slots: [{ name: "mySlot" }],
+        events: [{ name: "update:c" }],
+      },
+    },
+    args: {
+      a: 42,
+      b: "foo",
+      c: [1, 2, 3],
+      d: { bar: "baz" },
+      mySlot: () => h("div", { test: [1, 2], d: { nestedProp: "foo" } }),
+    },
+  });
+
+  expect(actualCode).toBe(`<script lang="ts" setup>
+import { ref } from "vue";
+
+const c = ref([1,2,3]);
+
+const d = {"bar":"baz"};
+
+const d1 = {"nestedProp":"foo"};
+
+const test = [1,2];
+</script>
+
+<template>
+  <MyComponent :a="42" b="foo" v-model:c="c" :d="d"> <template #mySlot><div :d="d1" :test="test" /></template> </MyComponent>
+</template>`);
+});
+
+test.each([
+  { __docgenInfo: "invalid-value", slotNames: [] },
+  { __docgenInfo: {}, slotNames: [] },
+  { __docgenInfo: { slots: "invalid-value" }, slotNames: [] },
+  { __docgenInfo: { slots: ["invalid-value"] }, slotNames: [] },
+  {
+    __docgenInfo: { slots: [{ name: "slot-1" }, { name: "slot-2" }, { notName: "slot-3" }] },
+    slotNames: ["slot-1", "slot-2"],
+  },
+])("should parse slots names from __docgenInfo", ({ __docgenInfo, slotNames }) => {
+  const docgenInfo = parseDocgenInfo({ __docgenInfo });
+  expect(docgenInfo.slotNames).toStrictEqual(slotNames);
+});
+
+test.each([
+  { __docgenInfo: "invalid-value", eventNames: [] },
+  { __docgenInfo: {}, eventNames: [] },
+  { __docgenInfo: { events: "invalid-value" }, eventNames: [] },
+  { __docgenInfo: { events: ["invalid-value"] }, eventNames: [] },
+  {
+    __docgenInfo: { events: [{ name: "event-1" }, { name: "event-2" }, { notName: "event-3" }] },
+    eventNames: ["event-1", "event-2"],
+  },
+])("should parse event names from __docgenInfo", ({ __docgenInfo, eventNames }) => {
+  const docgenInfo = parseDocgenInfo({ __docgenInfo });
+  expect(docgenInfo.eventNames).toStrictEqual(eventNames);
+});

package/src/source-code-generator.ts

@@ -0,0 +1,523 @@
+//
+// This file is only a temporary copy of the improved source code generation for Storybook.
+// It is intended to be deleted once its officially released in Storybook itself, see:
+// https://github.com/storybookjs/storybook/pull/27194
+//
+import { SourceType } from "@storybook/docs-tools";
+import type { Args, StoryContext } from "@storybook/vue3";
+import { isVNode, type VNode } from "vue";
+import { replaceAll } from "./preview";
+
+/**
+ * Context that is passed down to nested components/slots when generating the source code for a single story.
+ */
+export type SourceCodeGeneratorContext = {
+  /**
+   * Properties/variables that should be placed inside a `<script lang="ts" setup>` block.
+   * Usually contains complex property values like objects and arrays.
+   */
+  scriptVariables: Record<string, string>;
+  /**
+   * Optional imports to add inside the `<script lang="ts" setup>` block.
+   * e.g. to add 'import { ref } from "vue";'
+   *
+   * key = package name, values = imports
+   */
+  imports: Record<string, Set<string>>;
+};
+
+/**
+ * Generate Vue source code for the given Story.
+ * @returns Source code or empty string if source code could not be generated.
+ */
+export const generateSourceCode = (
+  ctx: Pick<StoryContext, "title" | "component" | "args"> & {
+    component?: StoryContext["component"] & { __docgenInfo?: unknown };
+  },
+): string => {
+  const sourceCodeContext: SourceCodeGeneratorContext = {
+    imports: {},
+    scriptVariables: {},
+  };
+
+  const { displayName, slotNames, eventNames } = parseDocgenInfo(ctx.component);
+
+  const props = generatePropsSourceCode(ctx.args, slotNames, eventNames, sourceCodeContext);
+  const slotSourceCode = generateSlotSourceCode(ctx.args, slotNames, sourceCodeContext);
+  const componentName = displayName || ctx.title.split("/").at(-1)!;
+
+  // prefer self closing tag if no slot content exists
+  const templateCode = slotSourceCode
+    ? `<${componentName} ${props}> ${slotSourceCode} </${componentName}>`
+    : `<${componentName} ${props} />`;
+
+  const variablesCode = Object.entries(sourceCodeContext.scriptVariables)
+    .map(([name, value]) => `const ${name} = ${value};`)
+    .join("\n\n");
+
+  const importsCode = Object.entries(sourceCodeContext.imports)
+    .map(([packageName, imports]) => {
+      return `import { ${Array.from(imports.values()).sort().join(", ")} } from "${packageName}";`;
+    })
+    .join("\n");
+
+  const template = `<template>\n  ${templateCode}\n</template>`;
+
+  if (!importsCode && !variablesCode) return template;
+
+  return `<script lang="ts" setup>
+${importsCode ? `${importsCode}\n\n${variablesCode}` : variablesCode}
+</script>
+
+${template}`;
+};
+
+/**
+ * Checks if the source code generation should be skipped for the given Story context.
+ * Will be true if one of the following is true:
+ * - view mode is not "docs"
+ * - story is no arg story
+ * - story has set custom source code via parameters.docs.source.code
+ * - story has set source type to "code" via parameters.docs.source.type
+ */
+export const shouldSkipSourceCodeGeneration = (context: StoryContext): boolean => {
+  const sourceParams = context?.parameters.docs?.source;
+  if (sourceParams?.type === SourceType.DYNAMIC) {
+    // always render if the user forces it
+    return false;
+  }
+
+  const isArgsStory = context?.parameters.__isArgsStory;
+  const isDocsViewMode = context?.viewMode === "docs";
+
+  // never render if the user is forcing the block to render code, or
+  // if the user provides code, or if it's not an args story.
+  return (
+    !isDocsViewMode || !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE
+  );
+};
+
+/**
+ * Parses the __docgenInfo of the given component.
+ * Requires Storybook docs addon to be enabled.
+ * Default slot will always be sorted first, remaining slots are sorted alphabetically.
+ */
+export const parseDocgenInfo = (
+  component?: StoryContext["component"] & { __docgenInfo?: unknown },
+) => {
+  // type check __docgenInfo to prevent errors
+  if (
+    !component ||
+    !("__docgenInfo" in component) ||
+    !component.__docgenInfo ||
+    typeof component.__docgenInfo !== "object"
+  ) {
+    return {
+      displayName: component?.__name,
+      eventNames: [],
+      slotNames: [],
+    };
+  }
+
+  const docgenInfo = component.__docgenInfo as Record<string, unknown>;
+
+  const displayName =
+    "displayName" in docgenInfo && typeof docgenInfo.displayName === "string"
+      ? docgenInfo.displayName
+      : undefined;
+
+  const parseNames = (key: "slots" | "events") => {
+    if (!(key in docgenInfo) || !Array.isArray(docgenInfo[key])) return [];
+
+    const values = docgenInfo[key] as unknown[];
+
+    return values
+      .map((i) => (i && typeof i === "object" && "name" in i ? i.name : undefined))
+      .filter((i): i is string => typeof i === "string");
+  };
+
+  return {
+    displayName: displayName || component.__name,
+    slotNames: parseNames("slots").sort((a, b) => {
+      if (a === "default") return -1;
+      if (b === "default") return 1;
+      return a.localeCompare(b);
+    }),
+    eventNames: parseNames("events"),
+  };
+};
+
+/**
+ * Generates the source code for the given Vue component properties.
+ * Props with complex values (objects and arrays) and v-models will be added to the ctx.scriptVariables because they should be
+ * generated in a `<script lang="ts" setup>` block.
+ *
+ * @param args Story args / property values.
+ * @param slotNames All slot names of the component. Needed to not generate code for args that are slots.
+ * Can be extracted using `parseDocgenInfo()`.
+ * @param eventNames All event names of the component. Needed to generate v-model properties. Can be extracted using `parseDocgenInfo()`.
+ *
+ * @example `:a="42" b="Hello World" v-model="modelValue" v-model:search="search"`
+ */
+export const generatePropsSourceCode = (
+  args: Record<string, unknown>,
+  slotNames: string[],
+  eventNames: string[],
+  ctx: SourceCodeGeneratorContext,
+) => {
+  type Property = {
+    /** Property name */
+    name: string;
+    /** Stringified property value */
+    value: string;
+    /**
+     * Function that returns the source code when used inside the `<template>`.
+     * If unset, the property will be generated inside the `<script lang="ts" setup>` block.
+     */
+    templateFn?: (name: string, value: string) => string;
+  };
+
+  const properties: Property[] = [];
+
+  Object.entries(args).forEach(([propName, value]) => {
+    // ignore slots
+    if (slotNames.includes(propName)) return;
+    if (value == undefined) return; // do not render undefined/null values
+
+    switch (typeof value) {
+      case "string":
+        if (value === "") return; // do not render empty strings
+
+        properties.push({
+          name: propName,
+          value: value.includes('"') ? `'${value}'` : `"${value}"`,
+          templateFn: (name, propValue) => `${name}=${propValue}`,
+        });
+        break;
+      case "number":
+        properties.push({
+          name: propName,
+          value: value.toString(),
+          templateFn: (name, propValue) => `:${name}="${propValue}"`,
+        });
+        break;
+      case "bigint":
+        properties.push({
+          name: propName,
+          value: `BigInt(${value.toString()})`,
+          templateFn: (name, propValue) => `:${name}="${propValue}"`,
+        });
+        break;
+      case "boolean":
+        properties.push({
+          name: propName,
+          value: value ? "true" : "false",
+          templateFn: (name, propValue) => (propValue === "true" ? name : `:${name}="false"`),
+        });
+        break;
+      case "symbol":
+        properties.push({
+          name: propName,
+          value: `Symbol(${value.description ? `'${value.description}'` : ""})`,
+          templateFn: (name, propValue) => `:${name}="${propValue}"`,
+        });
+        break;
+      case "object": {
+        properties.push({
+          name: propName,
+          value: formatObject(value),
+          // to follow Vue best practices, complex values like object and arrays are
+          // usually placed inside the <script setup> block instead of inlining them in the <template>
+          templateFn: undefined,
+        });
+        break;
+      }
+      case "function":
+        // TODO: check if functions should be rendered in source code
+        break;
+    }
+  });
+
+  properties.sort((a, b) => a.name.localeCompare(b.name));
+
+  /**
+   * List of generated source code for the props.
+   * @example [':a="42"', 'b="Hello World"']
+   */
+  const props: string[] = [];
+
+  // now that we have all props parsed, we will generate them either inside the `<script lang="ts" setup>` block
+  // or inside the `<template>`.
+  // we also make sure to render v-model properties accordingly (see https://vuejs.org/guide/components/v-model)
+  properties.forEach((prop) => {
+    const isVModel = eventNames.includes(`update:${prop.name}`);
+
+    if (!isVModel && prop.templateFn) {
+      props.push(prop.templateFn(prop.name, prop.value));
+      return;
+    }
+
+    let variableName = prop.name;
+
+    // a variable with the same name might already exist (e.g. from a parent component)
+    // so we need to make sure to use a unique name here to not generate multiple variables with the same name
+    if (variableName in ctx.scriptVariables) {
+      let index = 1;
+      do {
+        variableName = `${prop.name}${index}`;
+        index++;
+      } while (variableName in ctx.scriptVariables);
+    }
+
+    if (!isVModel) {
+      ctx.scriptVariables[variableName] = prop.value;
+      props.push(`:${prop.name}="${variableName}"`);
+      return;
+    }
+
+    // always generate v-models inside the `<script lang="ts" setup>` block
+    ctx.scriptVariables[variableName] = `ref(${prop.value})`;
+
+    if (!ctx.imports.vue) ctx.imports.vue = new Set();
+    ctx.imports.vue.add("ref");
+
+    if (prop.name === "modelValue") {
+      props.push(`v-model="${variableName}"`);
+    } else {
+      props.push(`v-model:${prop.name}="${variableName}"`);
+    }
+  });
+
+  return props.join(" ");
+};
+
+/**
+ * Generates the source code for the given Vue component slots.
+ * Supports primitive slot content (e.g. strings, numbers etc.) and nested components/VNodes (e.g. created using Vue's `h()` function).
+ *
+ * @param args Story args.
+ * @param slotNames All slot names of the component. Needed to only generate slots and ignore props etc.
+ * Can be extracted using `parseDocgenInfo()`.
+ * @param ctx Context so complex props of nested slot children will be set in the ctx.scriptVariables.
+ *
+ * @example `<template #slotName="{ foo }">Content {{ foo }}</template>`
+ */
+export const generateSlotSourceCode = (
+  args: Args,
+  slotNames: string[],
+  ctx: SourceCodeGeneratorContext,
+): string => {
+  /** List of slot source codes (e.g. <template #slotName>Content</template>) */
+  const slotSourceCodes: string[] = [];
+
+  slotNames.forEach((slotName) => {
+    const arg = args[slotName];
+    if (!arg) return;
+
+    const slotContent = generateSlotChildrenSourceCode([arg], ctx);
+    if (!slotContent) return; // do not generate source code for empty slots
+
+    const slotBindings = typeof arg === "function" ? getFunctionParamNames(arg) : [];
+
+    if (slotName === "default" && !slotBindings.length) {
+      // do not add unnecessary "<template #default>" tag since the default slot content without bindings
+      // can be put directly into the slot without need of "<template #default>"
+      slotSourceCodes.push(slotContent);
+    } else {
+      slotSourceCodes.push(
+        `<template ${slotBindingsToString(slotName, slotBindings)}>${slotContent}</template>`,
+      );
+    }
+  });
+
+  return slotSourceCodes.join("\n\n");
+};
+
+/**
+ * Generates the source code for the given slot children (the code inside <template #slotName></template>).
+ */
+const generateSlotChildrenSourceCode = (
+  children: unknown[],
+  ctx: SourceCodeGeneratorContext,
+): string => {
+  const slotChildrenSourceCodes: string[] = [];
+
+  /**
+   * Recursively generates the source code for a single slot child and all its children.
+   * @returns Source code for child and all nested children or empty string if child is of a non-supported type.
+   */
+  const generateSingleChildSourceCode = (child: unknown): string => {
+    if (isVNode(child)) {
+      return generateVNodeSourceCode(child, ctx);
+    }
+
+    switch (typeof child) {
+      case "string":
+      case "number":
+      case "boolean":
+        return child.toString();
+
+      case "object":
+        if (child === null) return "";
+        if (Array.isArray(child)) {
+          // if child also has children, we generate them recursively
+          return child
+            .map(generateSingleChildSourceCode)
+            .filter((code) => code !== "")
+            .join("\n");
+        }
+        return JSON.stringify(child);
+
+      case "function": {
+        const paramNames = getFunctionParamNames(child).filter(
+          (param) => !["{", "}"].includes(param),
+        );
+
+        const parameters = paramNames.reduce<Record<string, string>>((obj, param) => {
+          obj[param] = `{{ ${param} }}`;
+          return obj;
+        }, {});
+
+        const returnValue = child(parameters);
+        let slotSourceCode = generateSlotChildrenSourceCode([returnValue], ctx);
+
+        // if slot bindings are used for properties of other components, our {{ paramName }} is incorrect because
+        // it would generate e.g. my-prop="{{ paramName }}", therefore, we replace it here to e.g. :my-prop="paramName"
+        paramNames.forEach((param) => {
+          slotSourceCode = replaceAll(
+            slotSourceCode,
+            new RegExp(` (\\S+)="{{ ${param} }}"`, "g"),
+            ` :$1="${param}"`,
+          );
+        });
+
+        return slotSourceCode;
+      }
+
+      case "bigint":
+        return `{{ BigInt(${child.toString()}) }}`;
+
+      // the only missing case here is "symbol"
+      // because rendering a symbol as slot / HTML does not make sense and is not supported by Vue
+      default:
+        return "";
+    }
+  };
+
+  children.forEach((child) => {
+    const sourceCode = generateSingleChildSourceCode(child);
+    if (sourceCode !== "") slotChildrenSourceCodes.push(sourceCode);
+  });
+
+  return slotChildrenSourceCodes.join("\n");
+};
+
+/**
+ * Generates source code for the given VNode and all its children (e.g. created using `h(MyComponent)` or `h("div")`).
+ */
+const generateVNodeSourceCode = (vnode: VNode, ctx: SourceCodeGeneratorContext): string => {
+  const componentName = getVNodeName(vnode);
+  let childrenCode = "";
+
+  if (typeof vnode.children === "string") {
+    childrenCode = vnode.children;
+  } else if (Array.isArray(vnode.children)) {
+    childrenCode = generateSlotChildrenSourceCode(vnode.children, ctx);
+  } else if (vnode.children) {
+    // children are an object, just like if regular Story args where used
+    // so we can generate the source code with the regular "generateSlotSourceCode()".
+    childrenCode = generateSlotSourceCode(
+      vnode.children,
+      // $stable is a default property in vnode.children so we need to filter it out
+      // to not generate source code for it
+      Object.keys(vnode.children).filter((i) => i !== "$stable"),
+      ctx,
+    );
+  }
+
+  const props = vnode.props ? generatePropsSourceCode(vnode.props, [], [], ctx) : "";
+
+  // prefer self closing tag if no children exist
+  if (childrenCode) {
+    return `<${componentName}${props ? ` ${props}` : ""}>${childrenCode}</${componentName}>`;
+  }
+  return `<${componentName}${props ? ` ${props}` : ""} />`;
+};
+
+/**
+ * Gets the name for the given VNode.
+ * Will return "component" if name could not be extracted.
+ *
+ * @example "div" for `h("div")` or "MyComponent" for `h(MyComponent)`
+ */
+const getVNodeName = (vnode: VNode) => {
+  // this is e.g. the case when rendering native HTML elements like, h("div")
+  if (typeof vnode.type === "string") return vnode.type;
+
+  if (typeof vnode.type === "object") {
+    // this is the case when using custom Vue components like h(MyComponent)
+    if ("name" in vnode.type && vnode.type.name) {
+      // prefer custom component name set by the developer
+      return vnode.type.name;
+    } else if ("__name" in vnode.type && vnode.type.__name) {
+      // otherwise use name inferred by Vue from the file name
+      return vnode.type.__name;
+    }
+  }
+
+  return "component";
+};
+
+/**
+ * Gets a list of parameters for the given function since func.arguments can not be used since
+ * it throws a TypeError.
+ *
+ * If the arguments are destructured (e.g. "func({ foo, bar })"), the returned array will also
+ * include "{" and "}".
+ *
+ * @see Based on https://stackoverflow.com/a/9924463
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+const getFunctionParamNames = (func: Function): string[] => {
+  const STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/gm;
+  const ARGUMENT_NAMES = /([^\s,]+)/g;
+
+  const fnStr = func.toString().replace(STRIP_COMMENTS, "");
+  const result = fnStr.slice(fnStr.indexOf("(") + 1, fnStr.indexOf(")")).match(ARGUMENT_NAMES);
+  return result ?? [];
+};
+
+/**
+ * Converts the given slot bindings/parameters to a string.
+ *
+ * @example
+ * If no params: '#slotName'
+ * If params: '#slotName="{ foo, bar }"'
+ */
+const slotBindingsToString = (
+  slotName: string,
+  params: string[],
+): `#${string}` | `#${string}="${string}"` => {
+  if (!params.length) return `#${slotName}`;
+  if (params.length === 1) return `#${slotName}="${params[0]}"`;
+
+  // parameters might be destructured so remove duplicated brackets here
+  return `#${slotName}="{ ${params.filter((i) => !["{", "}"].includes(i)).join(", ")} }"`;
+};
+
+/**
+ * Formats the given object as string.
+ * Will format in single line if it only contains non-object values.
+ * Otherwise will format multiline.
+ */
+export const formatObject = (obj: object): string => {
+  const isPrimitive = Object.values(obj).every(
+    (value) => value == null || typeof value !== "object",
+  );
+
+  // if object/array only contains non-object values, we format all values in one line
+  if (isPrimitive) return JSON.stringify(obj);
+
+  // otherwise, we use a "pretty" formatting with newlines and spaces
+  return JSON.stringify(obj, null, 2);
+};

package/src/theme.ts

@@ -1,6 +1,7 @@
 import type { ThemeVars, ThemeVarsPartial } from "@storybook/theming";
 import { create } from "@storybook/theming/create";
 import onyxVariables from "sit-onyx/src/styles/variables-onyx.json";
+import { ONYX_BREAKPOINTS as RAW_ONYX_BREAKPOINTS, type OnyxBreakpoint } from "sit-onyx/types";
 import onyxLogo from "./assets/logo-onyx.svg";
 
 /**
@@ -90,50 +91,22 @@ const defineTheme = (colors: {
 };
 
 /** All available Storybook breakpoints / viewports supported by onyx. */
-export const ONYX_BREAKPOINTS = {
-  "2xs": {
-    name: "2xs",
-    styles: {
-      width: "320px",
-      height: "100%",
-    },
+export const ONYX_BREAKPOINTS = Object.entries(RAW_ONYX_BREAKPOINTS).reduce(
+  (obj, [name, width]) => {
+    const breakpoint = name as OnyxBreakpoint;
+    obj[breakpoint] = { name: breakpoint, styles: { width: `${width}px`, height: "100%" } };
+    return obj;
   },
-  xs: {
-    name: "xs",
-    styles: {
-      width: "576px",
-      height: "100%",
-    },
-  },
-  sm: {
-    name: "sm",
-    styles: {
-      width: "768px",
-      height: "100%",
-    },
-  },
-  md: {
-    name: "md",
-    styles: {
-      width: "992px",
-      height: "100%",
-    },
-  },
-  lg: {
-    name: "lg",
-    styles: {
-      width: "1440px",
-      height: "100%",
-    },
-  },
-  xl: {
-    name: "xl",
-    styles: {
-      width: "1920px",
-      height: "100%",
-    },
-  },
-} as const;
+  {} as Record<OnyxBreakpoint, StorybookBreakpoint>,
+);
+
+export type StorybookBreakpoint = {
+  name: OnyxBreakpoint;
+  styles: {
+    width: string;
+    height: string;
+  };
+};
 
 /**
  * Converts a rem string into a numeric value with a rem base of 16.

package/src/types.ts

@@ -46,3 +46,13 @@ export type DefineStorybookActionsAndVModelsOptions<T> = Meta<T> & {
   component: NonNullable<T>;
   events: ExtractVueEventNames<T>[];
 };
+
+export type StorybookGlobalType<TValue> = {
+  name: string;
+  description: string;
+  defaultValue: TValue;
+  toolbar: {
+    icon: string;
+    items: { value: TValue; right: string; title: string }[];
+  };
+};