@sit-onyx/storybook-utils 1.0.0-beta.7 → 1.0.0-beta.70

package/src/index.css

@@ -24,3 +24,14 @@
   /* same as Storybook color "textMuted" inside ./theme.ts */
   color: var(--onyx-color-text-icons-neutral-medium);
 }
+
+/* To prevent bg flashing when changing between elements in darkmode */
+.sb-preparing-story,
+.sb-preparing-docs {
+  background-color: transparent;
+}
+/* removed placeholder for the same reason */
+.sb-previewBlock,
+.sb-argstableBlock {
+  display: none;
+}

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./actions";
 export * from "./preview";
+export * from "./sbType";
 export * from "./theme";
 export * from "./types";

package/src/preview.spec.ts

@@ -1,25 +1,19 @@
 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 { describe, expect, test } 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>
+    // ACT
+    const sourceCode = sourceCodeTransformer(`<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";

package/src/preview.ts

@@ -1,12 +1,12 @@
 import { getIconImportName } from "@sit-onyx/icons";
-import { type Preview, type StoryContext } from "@storybook/vue3";
+import type { Preview } from "@storybook/vue3";
 import { deepmerge } from "deepmerge-ts";
 import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
 import { DOCS_RENDERED } from "storybook/internal/core-events";
 import { addons } from "storybook/internal/preview-api";
 import type { ThemeVars } from "storybook/internal/theming";
+import { enhanceEventArgTypes } from "./actions";
 import { requiredGlobalType, withRequired } from "./required";
-import { generateSourceCode } from "./source-code-generator";
 import { ONYX_BREAKPOINTS, createTheme } from "./theme";
 
 const themes = {
@@ -21,6 +21,7 @@ const themes = {
  * - 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)
  * - Configure viewports / breakpoints as defined by onyx
+ * - Logs Vue emits as Storybook events
  *
  * @param overrides Custom preview / overrides, will be deep merged with the default preview.
  *
@@ -41,6 +42,7 @@ const themes = {
  */
 export const createPreview = <T extends Preview = Preview>(overrides?: T) => {
   const defaultPreview = {
+    argTypesEnhancers: [enhanceEventArgTypes],
     globalTypes: {
       ...requiredGlobalType,
     },
@@ -123,16 +125,15 @@ export const createPreview = <T extends Preview = Preview>(overrides?: T) => {
  *
  * @see https://storybook.js.org/docs/react/api/doc-block-source
  */
-export const sourceCodeTransformer = (
-  sourceCode: string,
-  ctx: Pick<StoryContext, "title" | "component" | "args">,
-): string => {
+export const sourceCodeTransformer = (originalSourceCode: string): string => {
   const RAW_ICONS = import.meta.glob("../node_modules/@sit-onyx/icons/src/assets/*.svg", {
     query: "?raw",
     import: "default",
     eager: true,
   });
 
+  let code = originalSourceCode;
+
   /**
    * Mapping between icon SVG content (key) and icon name (value).
    * Needed to display a labelled dropdown list of all available icons.
@@ -145,8 +146,6 @@ export const sourceCodeTransformer = (
     {},
   );
 
-  let code = generateSourceCode(ctx);
-
   const additionalImports: string[] = [];
 
   // add icon imports to the source code for all used onyx icons
@@ -156,7 +155,10 @@ export const sourceCodeTransformer = (
     const escapedIconContent = `"${replaceAll(iconContent, '"', '\\"')}"`;
 
     if (code.includes(iconContent)) {
-      code = code.replace(new RegExp(` (\\S+)=['"]${iconContent}['"]`), ` :$1="${importName}"`);
+      code = code.replace(
+        new RegExp(` (\\S+)=['"]${escapeRegExp(iconContent)}['"]`),
+        ` :$1="${importName}"`,
+      );
       additionalImports.push(`import ${importName} from "@sit-onyx/icons/${iconName}.svg?raw";`);
     } else if (code.includes(singleQuotedIconContent)) {
       // support icons inside objects
@@ -206,3 +208,11 @@ ${code}`;
 export const replaceAll = (value: string, searchValue: string | RegExp, replaceValue: string) => {
   return value.replace(new RegExp(searchValue, "gi"), replaceValue);
 };
+
+/**
+ * Escapes the given string value to be used in `new RegExp()`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions#escaping
+ */
+export const escapeRegExp = (string: string) => {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
+};

package/src/sbType.spec.ts

@@ -0,0 +1,38 @@
+import type { SBType } from "storybook/internal/types";
+import { describe, expect, test, vi } from "vitest";
+import { walkTree } from "./sbType";
+
+describe("walkTree", () => {
+  test.each<{ input: SBType; expected: SBType["name"][] }>([
+    { input: { name: "array", value: { name: "number" } }, expected: ["array", "number"] },
+    { input: { name: "object", value: { a: { name: "number" } } }, expected: ["object", "number"] },
+    { input: { name: "enum", value: ["a"] }, expected: ["enum"] },
+    {
+      input: { name: "intersection", value: [{ name: "number" }] },
+      expected: ["intersection", "number"],
+    },
+    { input: { name: "union", value: [{ name: "number" }] }, expected: ["union", "number"] },
+    { input: { name: "other", value: "a" }, expected: ["other"] },
+  ])("should execute cb for $input.name correctly", ({ input, expected }) => {
+    const spy = vi.fn<(p: SBType) => void>();
+    const result = walkTree(input, spy);
+
+    expect(result).toBeUndefined();
+    expect(spy).toHaveBeenCalledTimes(expected.length);
+    const nameCalls = spy.mock.calls.map(([{ name }]) => name);
+    expect(nameCalls).toMatchObject(expected);
+  });
+
+  test("should return value if there is any returned", () => {
+    const target: SBType = { name: "number", raw: "here" };
+    const overshoot: SBType = { name: "boolean", raw: "here" };
+    const parent: SBType = { name: "intersection", value: [target, overshoot] };
+    const returned = 42;
+    const spy = vi.fn((p: SBType) => (p.raw === "here" ? returned : undefined));
+    const result = walkTree({ name: "union", value: [parent] }, spy);
+
+    expect(spy).toHaveBeenCalledTimes(3);
+    expect(spy).toHaveBeenLastCalledWith(target, parent);
+    expect(result).toBe(returned);
+  });
+});

package/src/sbType.ts

@@ -0,0 +1,104 @@
+import type {
+  ArgTypesEnhancer,
+  InputType,
+  SBType,
+  StrictInputType,
+} from "storybook/internal/types";
+
+/**
+ * Call a function `cb` for every type node in the storybook type tree.
+ * @param inputType the root type
+ * @param cb the function that is called for every type. If any non-nullish value is returned by `cb` the execution is stopped and this value is returned.
+ * @param parent optional, the parent type. Is only used as input for the `cb` function and provided when recursing.
+ * @returns the first non-nullish value that is returned by `cb`
+ */
+export const walkTree = <TValue>(
+  inputType: SBType,
+  cb: (sb: SBType, parent?: SBType) => TValue,
+  parent?: SBType,
+): TValue | undefined => {
+  const shouldReturn = cb(inputType, parent);
+  if (shouldReturn) {
+    return shouldReturn;
+  }
+
+  if (inputType.name === "union" || inputType.name === "intersection") {
+    return inputType.value.reduce<TValue | undefined>(
+      (prev, it) => prev ?? walkTree(it, cb, inputType),
+      undefined,
+    );
+  }
+  if (inputType.name === "array") {
+    return walkTree(inputType.value, cb, inputType);
+  }
+  if (inputType.name === "object") {
+    return Object.values(inputType.value).reduce<TValue | undefined>(
+      (prev, it) => prev ?? walkTree(it, cb, inputType),
+      undefined,
+    );
+  }
+};
+
+const SB_TYPE_CONTROL_MAP: Partial<Record<SBType["name"], InputType["control"]>> = {
+  boolean: { type: "boolean" },
+  string: { type: "text" },
+  number: { type: "number" },
+};
+
+const getFormInjectedParent = (symbol: string, inputType?: StrictInputType) => {
+  if (!inputType?.type || inputType.table?.defaultValue?.summary !== symbol) {
+    return undefined;
+  }
+
+  return walkTree(inputType.type, (elem, parent) =>
+    elem.name === "symbol" || (elem.name === "other" && elem.value === "unique symbol")
+      ? parent
+      : undefined,
+  );
+};
+
+/**
+ * Can be used to create an `ArgTypesEnhancer` which matches a Symbol that is used as default Prop.
+ * When it matches the passed  description text will be set.
+ *
+ * @param symbol description of the symbol that should be matched.
+ * @param description the description text that should be shown in Storybook for this prop.
+ * @returns An `ArgTypesEnhancer` which can be passed to storybook.
+ *
+ * @example
+ * ```ts
+ * import { createSymbolArgTypeEnhancer } from "@sit-onyx/storybook-utils";
+ *
+ * export const enhanceFormInjectedSymbol = createSymbolArgTypeEnhancer(
+ *   "FORM_INJECTED_SYMBOL",
+ *   "If no value (or `undefined`) is provided, `FORM_INJECTED_SYMBOL` is the internal default value for this prop.\n" +
+ *     "In that case the props value will be derived from it's parent form (if it exists).\n",
+ * );
+ * ```
+ */
+export const createSymbolArgTypeEnhancer = (
+  symbol: string,
+  description: string,
+): ArgTypesEnhancer => {
+  return (context) => {
+    Object.values(context.argTypes)
+      .map((argType) => {
+        const parent = getFormInjectedParent(symbol, argType);
+        return { argType, parent };
+      })
+      .filter(({ parent }) => parent)
+      .forEach(({ argType, parent }) => {
+        const firstAvailableControl = walkTree(
+          parent || argType.type!,
+          (sb) => SB_TYPE_CONTROL_MAP[sb.name],
+        );
+
+        if (firstAvailableControl && argType.table?.defaultValue) {
+          argType.control = firstAvailableControl;
+          argType.table.defaultValue.detail = description;
+        }
+      });
+
+    return context.argTypes;
+  };
+};

package/src/theme.ts

@@ -1,5 +1,5 @@
+import { ONYX_BREAKPOINTS as RAW_ONYX_BREAKPOINTS, type OnyxBreakpoint } from "sit-onyx";
 import onyxVariables from "sit-onyx/themes/onyx.json";
-import { ONYX_BREAKPOINTS as RAW_ONYX_BREAKPOINTS, type OnyxBreakpoint } from "sit-onyx/types";
 import { create, type ThemeVars, type ThemeVarsPartial } from "storybook/internal/theming";
 import onyxLogo from "./assets/logo-onyx.svg";
 

package/src/types.ts

@@ -1,52 +1,3 @@
-import type { ComponentPropsAndSlots, Meta } from "@storybook/vue3";
-
-/**
- * Extracts all event names defined by e.g. `defineEmits()` from the given Vue component.
- *
- * @example
- * ```ts
- * import Input from "./Input.vue";
- * type InputEvents = ExtractVueEventNames<typeof Input>; // e.g. "input" | "change"
- * ```
- */
-export type ExtractVueEventNames<VueComponent> =
-  Extract<
-    // extract all props/events of the vue component that are functions
-    ExtractKeysByValueType<
-      // this generic type will extract ALL props and events from the given Vue component
-      ComponentPropsAndSlots<VueComponent>,
-      // emits are declared as functions, so we only take props/events that are functions and ignore the rest
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- We must use any here to match the type defined by Vue
-      ((...args: any) => any) | undefined
-    >,
-    // filter out potential function properties by just picking events that start with "on"
-    `on${string}`
-  > extends `on${infer EventName}`
-    ? // until now the extracted event names still start with "on" but we want to have the plain event name
-      // so we will remove the "on" prefix and uncapitalized the first letter so e.g. "onClick" becomes "click"
-      Uncapitalize<EventName>
-    : never;
-
-/**
- * Extracts only the keys from T whose value type satisfies U.
- *
- * @example
- * ```ts
- * type Test = ExtractKeysByValueType<{ a: boolean, b: number, c: boolean }, boolean>
- * // result: "a" | "c"
- * ```
- */
-export type ExtractKeysByValueType<T, U> = { [P in keyof T]: T[P] extends U ? P : never }[keyof T] &
-  keyof T;
-
-/**
- * Options for defining Storybook actions and v-models.
- */
-export type DefineStorybookActionsAndVModelsOptions<T> = Meta<T> & {
-  component: NonNullable<T>;
-  events: ExtractVueEventNames<T>[];
-};
-
 export type StorybookGlobalType<TValue> = {
   name: string;
   description: string;
@@ -55,5 +6,6 @@ export type StorybookGlobalType<TValue> = {
     icon: string;
     items: { value: TValue; right?: string; title: string }[];
     title?: string;
+    dynamicTitle?: boolean;
   };
 };

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

@@ -1,258 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-//
-// 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,
-  getFunctionParamNames,
-  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);
-});
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-test.each<{ fn: (...args: any[]) => unknown; expectedNames: string[] }>([
-  { fn: () => ({}), expectedNames: [] },
-  { fn: (a) => ({}), expectedNames: ["a"] },
-  { fn: (a, b) => ({}), expectedNames: ["a", "b"] },
-  { fn: (a, b, { c }) => ({}), expectedNames: ["a", "b", "{", "c", "}"] },
-  { fn: ({ a, b }) => ({}), expectedNames: ["{", "a", "b", "}"] },
-  {
-    fn: {
-      // simulate minified function after running "storybook build"
-      toString: () => "({a:foo,b:bar})=>({})",
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } as (...args: any[]) => unknown,
-    expectedNames: ["{", "a", "b", "}"],
-  },
-])("should extract function parameter names", ({ fn, expectedNames }) => {
-  const paramNames = getFunctionParamNames(fn);
-  expect(paramNames).toStrictEqual(expectedNames);
-});