Allow empty render functions in CSF4

storybookjs · Feb 18, 2025 · b5aa1f2 · b5aa1f2
1 parent c8844ba
commit b5aa1f2
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 3 deletions.
diff --git a/code/core/src/csf/csf-factories.ts b/code/core/src/csf/csf-factories.ts
@@ -46,7 +46,7 @@ export interface Meta<TRenderer extends Renderer, TArgs extends Args = Args> {
   composed: NormalizedComponentAnnotations<TRenderer>;
   preview: Preview<TRenderer>;
 
-  story(input: ComponentAnnotations<TRenderer, TArgs>): Story<TRenderer, TArgs>;
+  story(input: StoryAnnotations<TRenderer, TArgs>): Story<TRenderer, TArgs>;
 }
 
 export function isMeta(input: unknown): input is Meta<Renderer> {

diff --git a/code/renderers/react/src/csf-factories.test.tsx b/code/renderers/react/src/csf-factories.test.tsx
@@ -65,8 +65,8 @@ describe('Args can be provided in multiple ways', () => {
   it('❌ The combined shape of meta args and story args must match the required args.', () => {
     {
       const meta = preview.meta({ component: Button });
+      // @ts-expect-error disabled not provided ❌
       const Basic = meta.story({
-        // @ts-expect-error disabled not provided ❌
         args: { label: 'good' },
       });
     }
@@ -80,12 +80,37 @@ describe('Args can be provided in multiple ways', () => {
     }
     {
       const meta = preview.meta({ component: Button });
+      // @ts-expect-error disabled not provided ❌
       const Basic = meta.story({
-        // @ts-expect-error disabled not provided ❌
         args: { label: 'good' },
       });
     }
   });
+
+  it("✅ Required args don't need to be provided when the user uses an empty render", () => {
+    const meta = preview.meta({
+      component: Button,
+      args: { label: 'good' },
+    });
+    const Basic = meta.story({
+      args: {},
+      render: () => <div>Hello world</div>,
+    });
+  });
+
+  it('❌ Required args need to be provided when the user uses a non-empty render', () => {
+    const meta = preview.meta({
+      component: Button,
+      args: { label: 'good' },
+    });
+    // @ts-expect-error disabled not provided ❌
+    const Basic = meta.story({
+      args: {
+        label: 'good',
+      },
+      render: (args) => <div>Hello world</div>,
+    });
+  });
 });
 
 it('✅ Void functions are not changed', () => {

diff --git a/code/renderers/react/src/preview.tsx b/code/renderers/react/src/preview.tsx
@@ -55,6 +55,14 @@ interface ReactMeta<
   Context extends { args: Args },
   MetaInput extends ComponentAnnotations<ReactRenderer>,
 > extends Meta<ReactRenderer, Context['args']> {
+  story<
+    TInput extends StoryAnnotations<ReactRenderer, Context['args']> & {
+      render: () => ReactRenderer['storyResult'];
+    },
+  >(
+    story: TInput
+  ): ReactStory;
+
   story<
     const TInput extends Simplify<
       StoryAnnotations<