Merge pull request #30565 from storybookjs/kasper/empty-render

shilman · web-flow · commit 9408d0f0b6e3 · 2025-02-18T22:40:04.000+08:00
Core: Allow empty render functions in CSF factories
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<

Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ export interface Meta<TRenderer extends Renderer, TArgs extends Args = Args> {`
`46`	`46`	`composed: NormalizedComponentAnnotations<TRenderer>;`
`47`	`47`	`preview: Preview<TRenderer>;`
`48`	`48`
`49`		`- story(input: ComponentAnnotations<TRenderer, TArgs>): Story<TRenderer, TArgs>;`
	`49`	`+ story(input: StoryAnnotations<TRenderer, TArgs>): Story<TRenderer, TArgs>;`
`50`	`50`	`}`
`51`	`51`
`52`	`52`	`export function isMeta(input: unknown): input is Meta<Renderer> {`