@sit-onyx/storybook-utils 1.0.0-beta.3 → 1.0.0-beta.31

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.31",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -23,17 +23,14 @@
     "url": "https://github.com/SchwarzIT/onyx/issues"
   },
   "peerDependencies": {
-    "@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/vue3": ">= 8.2.0",
+    "storybook": ">= 8.2.0",
     "storybook-dark-mode": ">= 4",
     "@sit-onyx/icons": "^1.0.0-beta.0",
-    "sit-onyx": "^1.0.0-beta.3"
+    "sit-onyx": "^1.0.0-beta.30"
   },
   "dependencies": {
-    "deepmerge-ts": "^7.0.3"
+    "deepmerge-ts": "^7.1.0"
   },
   "scripts": {
     "build": "tsc --noEmit",

package/src/actions.ts

@@ -1,6 +1,6 @@
-import { useArgs } from "@storybook/preview-api";
 import type { ArgTypes, Decorator, Meta } from "@storybook/vue3";
 import { deepmerge } from "deepmerge-ts";
+import { useArgs } from "storybook/internal/preview-api";
 import { isReactive, reactive, watch } from "vue";
 import type { DefineStorybookActionsAndVModelsOptions, ExtractVueEventNames } from ".";
 

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

@@ -1,11 +1,10 @@
-import { DOCS_RENDERED } from "@storybook/core-events";
-import { addons } from "@storybook/preview-api";
-import { type ThemeVars } from "@storybook/theming";
+import { getIconImportName } from "@sit-onyx/icons";
 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 { DOCS_RENDERED } from "storybook/internal/core-events";
+import { addons } from "storybook/internal/preview-api";
+import type { ThemeVars } from "storybook/internal/theming";
 import { requiredGlobalType, withRequired } from "./required";
 import { generateSourceCode } from "./source-code-generator";
 import { ONYX_BREAKPOINTS, createTheme } from "./theme";

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,35 @@
+import type { SBType } 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,
+    );
+  }
+};

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

@@ -156,16 +156,20 @@ test("should generate source code for slots with bindings", () => {
   type TestBindings = {
     foo: string;
     bar?: number;
+    boo: {
+      mimeType: string;
+    };
   };
 
   const slots = {
-    a: ({ foo, bar }: TestBindings) => `Slot with bindings ${foo} and ${bar}`,
-    b: ({ foo }: TestBindings) => h("a", { href: foo, target: foo }, `Test link: ${foo}`),
+    a: ({ foo, bar, boo }: TestBindings) => `Slot with bindings ${foo}, ${bar} and ${boo.mimeType}`,
+    b: ({ foo, boo }: TestBindings) =>
+      h("a", { href: foo, target: foo, type: boo.mimeType, ...boo }, `Test link: ${foo}`),
   };
 
-  const expectedCode = `<template #a="{ foo, bar }">Slot with bindings {{ foo }} and {{ bar }}</template>
+  const expectedCode = `<template #a="{ foo, bar, boo }">Slot with bindings {{ foo }}, {{ bar }} and {{ boo.mimeType }}</template>
 
-<template #b="{ foo }"><a :href="foo" :target="foo">Test link: {{ foo }}</a></template>`;
+<template #b="{ foo, boo }"><a :href="foo" :target="foo" :type="boo.mimeType" v-bind="boo">Test link: {{ foo }}</a></template>`;
 
   const actualCode = generateSlotSourceCode(slots, Object.keys(slots), {
     imports: {},

package/src/source-code-generator.ts

@@ -3,11 +3,25 @@
 // 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 { SourceType } from "storybook/internal/docs-tools";
 import { isVNode, type VNode } from "vue";
 import { replaceAll } from "./preview";
 
+/**
+ * Used to get the tracking data from the proxy.
+ * A symbol is unique, so when using it as a key it can't be accidentally accessed.
+ */
+const TRACKING_SYMBOL = Symbol("DEEP_ACCESS_SYMBOL");
+
+type TrackingProxy = {
+  [TRACKING_SYMBOL]: true;
+  toString: () => string;
+};
+
+const isProxy = (obj: unknown): obj is TrackingProxy =>
+  !!(obj && typeof obj === "object" && TRACKING_SYMBOL in obj);
+
 /**
  * Context that is passed down to nested components/slots when generating the source code for a single story.
  */
@@ -184,6 +198,10 @@ export const generatePropsSourceCode = (
     if (slotNames.includes(propName)) return;
     if (value == undefined) return; // do not render undefined/null values
 
+    if (isProxy(value)) {
+      value = value!.toString();
+    }
+
     switch (typeof value) {
       case "string":
         if (value === "") return; // do not render empty strings
@@ -225,7 +243,7 @@ export const generatePropsSourceCode = (
       case "object": {
         properties.push({
           name: propName,
-          value: formatObject(value),
+          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,
@@ -373,25 +391,60 @@ const generateSlotChildrenSourceCode = (
           (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"
+        // We create proxy to track how and which properties of a parameter are accessed
+        const parameters: Record<string, string> = {};
+        const proxied: Record<string, TrackingProxy> = {};
         paramNames.forEach((param) => {
-          slotSourceCode = replaceAll(
-            slotSourceCode,
-            new RegExp(` (\\S+)="{{ ${param} }}"`, "g"),
-            ` :$1="${param}"`,
+          parameters[param] = `{{ ${param} }}`;
+          // TODO: we should be able to extend the proxy logic here and maybe get rid of the `generatePropsSourceCode` code
+          proxied[param] = new Proxy(
+            {
+              // we use the symbol to identify the proxy
+              [TRACKING_SYMBOL]: true,
+            } as TrackingProxy,
+            {
+              // getter is called when any prop of the parameter is read
+              get: (t, key) => {
+                if (key === TRACKING_SYMBOL) {
+                  // allow retrieval of the tracking data
+                  return t[TRACKING_SYMBOL];
+                }
+                if ([Symbol.toPrimitive, Symbol.toStringTag, "toString"].includes(key)) {
+                  // when the parameter is used as a string we return the parameter name
+                  // we use the double brace notation as we don't know if the parameter is used in text or in a binding
+                  return () => `{{ ${param} }}`;
+                }
+                if (key === "v-bind") {
+                  // if this key is returned we just return the parameter name
+                  return `${param}`;
+                }
+                // otherwise a specific key of the parameter was accessed
+                // we use the double brace notation as we don't know if the parameter is used in text or in a binding
+                return `{{ ${param}.${key.toString()} }}`;
+              },
+              // ownKeys is called, among other uses, when an object is destructured
+              // in this case we assume the parameter is supposed to be bound using "v-bind"
+              // Therefore we only return one special key "v-bind" and the getter will be called afterwards with it
+              ownKeys: () => {
+                return [`v-bind`];
+              },
+              /** called when destructured */
+              getOwnPropertyDescriptor: () => ({
+                configurable: true,
+                enumerable: true,
+                value: param,
+                writable: true,
+              }),
+            },
           );
         });
 
-        return slotSourceCode;
+        const returnValue = child(proxied);
+        const 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"
+        return replaceAll(slotSourceCode, / (\S+)="{{ (\S+) }}"/g, ` :$1="$2"`);
       }
 
       case "bigint":

package/src/theme.ts

@@ -1,7 +1,6 @@
-import type { ThemeVars, ThemeVarsPartial } from "@storybook/theming";
-import { create } from "@storybook/theming/create";
+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

@@ -55,5 +55,6 @@ export type StorybookGlobalType<TValue> = {
     icon: string;
     items: { value: TValue; right?: string; title: string }[];
     title?: string;
+    dynamicTitle?: boolean;
   };
 };