From 555f06942a06406facab9e7c2129ed34e596ccaf Mon Sep 17 00:00:00 2001 From: Lars Rickert Date: Fri, 28 Jun 2024 20:33:42 +0200 Subject: [PATCH 1/3] fix(storybook): generate correct source code for slot bindings --- .../src/source-code-generator.spec.ts | 22 +++++++++++++++++++ .../src/source-code-generator.ts | 20 +++++++++++++++-- 2 files changed, 40 insertions(+), 2 deletions(-) diff --git a/packages/storybook-utils/src/source-code-generator.spec.ts b/packages/storybook-utils/src/source-code-generator.spec.ts index 40b642da1..8083c67a6 100644 --- a/packages/storybook-utils/src/source-code-generator.spec.ts +++ b/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); +}); diff --git a/packages/storybook-utils/src/source-code-generator.ts b/packages/storybook-utils/src/source-code-generator.ts index 9b03fbbe0..4ca0e7322 100644 --- a/packages/storybook-utils/src/source-code-generator.ts +++ b/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; + }); }; /** From e6c3675a63dc70eb9063029ed9b91d58dd116455 Mon Sep 17 00:00:00 2001 From: Lars Rickert Date: Fri, 28 Jun 2024 21:36:57 +0200 Subject: [PATCH 2/3] docs: use fullscreen storybook layout for layout components --- .../OnyxAppLayout/OnyxAppLayout.stories.ts | 14 +++----------- .../OnyxPageLayout/OnyxPageLayout.stories.ts | 8 +++++--- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/packages/sit-onyx/src/components/OnyxAppLayout/OnyxAppLayout.stories.ts b/packages/sit-onyx/src/components/OnyxAppLayout/OnyxAppLayout.stories.ts index 52c20f73f..d901e2c40 100644 --- a/packages/sit-onyx/src/components/OnyxAppLayout/OnyxAppLayout.stories.ts +++ b/packages/sit-onyx/src/components/OnyxAppLayout/OnyxAppLayout.stories.ts @@ -27,18 +27,10 @@ const meta: Meta = { 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: ` -
- -
`, - }), - ], }), + parameters: { + layout: "fullscreen", + }, }; export default meta; diff --git a/packages/sit-onyx/src/components/OnyxPageLayout/OnyxPageLayout.stories.ts b/packages/sit-onyx/src/components/OnyxPageLayout/OnyxPageLayout.stories.ts index b5ff1efe2..8fabb4feb 100644 --- a/packages/sit-onyx/src/components/OnyxPageLayout/OnyxPageLayout.stories.ts +++ b/packages/sit-onyx/src/components/OnyxPageLayout/OnyxPageLayout.stories.ts @@ -31,14 +31,16 @@ const meta: Meta = { (story) => ({ components: { story }, template: ` -
+ color: var(--onyx-color-text-icons-neutral-intense);" >
`, }), ], + parameters: { + layout: "fullscreen", + }, }; export default meta; From 62679b37375ab08ba73295f7e778ca3c3e0600ce Mon Sep 17 00:00:00 2001 From: Lars Rickert Date: Mon, 1 Jul 2024 08:04:24 +0200 Subject: [PATCH 3/3] docs(changeset): fix: generate correct code for slot bindings --- .changeset/curvy-mails-promise.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/curvy-mails-promise.md diff --git a/.changeset/curvy-mails-promise.md b/.changeset/curvy-mails-promise.md new file mode 100644 index 000000000..d74cdce0d --- /dev/null +++ b/.changeset/curvy-mails-promise.md @@ -0,0 +1,5 @@ +--- +"@sit-onyx/storybook-utils": patch +--- + +fix: generate correct code for slot bindings