@sit-onyx/storybook-utils 1.0.0-beta.53 → 1.0.0-beta.54

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-beta.53",
+  "version": "1.0.0-beta.54",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -27,13 +27,13 @@
     "storybook": ">= 8.3.0",
     "storybook-dark-mode": ">= 4",
     "@sit-onyx/icons": "^1.0.0-beta.5",
-    "sit-onyx": "^1.0.0-beta.47"
+    "sit-onyx": "^1.0.0-beta.48"
   },
   "dependencies": {
     "deepmerge-ts": "^7.1.0"
   },
   "devDependencies": {
-    "vue": "^3.5.0"
+    "vue": "3.5.10"
   },
   "scripts": {
     "build": "tsc --noEmit",

package/src/sbType.ts

@@ -1,4 +1,9 @@
-import type { SBType } from "storybook/internal/types";
+import type {
+  ArgTypesEnhancer,
+  InputType,
+  SBType,
+  StrictInputType,
+} from "storybook/internal/types";
 
 /**
  * Call a function `cb` for every type node in the storybook type tree.
@@ -33,3 +38,67 @@ export const walkTree = <TValue>(
     );
   }
 };
+
+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;
+  };
+};