docs(storybook): fix code snippets for slot bindings (#1458)

Merge latest changes of
storybookjs/storybook#27194.
Fixes code snippets when using slot bindings on a deployed Storybook
<img width="305" alt="image"
src="https://github.com/SchwarzIT/onyx/assets/67898185/15230312-5c5e-46eb-90a5-c9c9d422b604">

.changeset/curvy-mails-promise.md

@@ -0,0 +1,5 @@
+---
+"@sit-onyx/storybook-utils": patch
+---
+
+fix: generate correct code for slot bindings

packages/sit-onyx/src/components/OnyxAppLayout/OnyxAppLayout.stories.ts

@@ -27,18 +27,10 @@ const meta: Meta<typeof OnyxAppLayout> = {
         control: { disable: true },
       },
     },
-    // storybook adds 1rem padding. The app layout fills the full available space
-    // so we need to counteract the padding with a negative margin.
-    decorators: [
-      (story) => ({
-        components: { story },
-        template: `
-          <div style="margin: -1rem;" >
-            <story />
-          </div>`,
-      }),
-    ],
   }),
+  parameters: {
+    layout: "fullscreen",
+  },
 };
 
 export default meta;

packages/sit-onyx/src/components/OnyxPageLayout/OnyxPageLayout.stories.ts

@@ -31,14 +31,16 @@ const meta: Meta<typeof OnyxPageLayout> = {
     (story) => ({
       components: { story },
       template: `
-        <div style="margin: -1rem; height: 15rem;
+        <div style="height: 15rem;
                     font-family: var(--onyx-font-family);
-                    color: var(--onyx-color-text-icons-neutral-intense);
-                    border: 1px solid var(--onyx-color-text-icons-neutral-soft);" >
+                    color: var(--onyx-color-text-icons-neutral-intense);" >
           <story />
         </div>`,
     }),
   ],
+  parameters: {
+    layout: "fullscreen",
+  },
 };
 
 export default meta;

packages/storybook-utils/src/source-code-generator.spec.ts

@@ -1,3 +1,4 @@
+/* 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:
@@ -9,6 +10,7 @@ import {
   generatePropsSourceCode,
   generateSlotSourceCode,
   generateSourceCode,
+  getFunctionParamNames,
   parseDocgenInfo,
   type SourceCodeGeneratorContext,
 } from "./source-code-generator";
@@ -234,3 +236,23 @@ test.each([
   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);
+});

packages/storybook-utils/src/source-code-generator.ts

@@ -478,13 +478,29 @@ const getVNodeName = (vnode: VNode) => {
  * @see Based on https://stackoverflow.com/a/9924463
  */
 // eslint-disable-next-line @typescript-eslint/ban-types
-const getFunctionParamNames = (func: Function): string[] => {
+export 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 ?? [];
+  if (!result) return [];
+
+  // when running "storybook build", the function will be minified, so result for e.g.
+  // `({ foo, bar }) => { // function body }` will be `["{foo:e", "bar:a}"]`
+  // therefore we need to remove the :e and :a mappings and extract the "{" and "}"" from the destructured object
+  // so the final result becomes `["{", "foo", "bar", "}"]`
+  return result.flatMap((param) => {
+    if (["{", "}"].includes(param)) return param;
+    const nonMinifiedName = param.split(":")[0].trim();
+    if (nonMinifiedName.startsWith("{")) {
+      return ["{", nonMinifiedName.substring(1)];
+    }
+    if (param.endsWith("}") && !nonMinifiedName.endsWith("}")) {
+      return [nonMinifiedName, "}"];
+    }
+    return nonMinifiedName;
+  });
 };
 
 /**