Merge pull request #103 from TeaSeaLancs/csf3-meta-render

Allow render function to be sourced from story meta

Author: yannbf

README.md

@@ -148,21 +148,29 @@ test('reuses args from composed story', () => {
 
 ### CSF3
 
-Storybook 6.4 released a [new version of CSF](https://storybook.js.org/blog/component-story-format-3-0/), where the story can also be an object. This is supported in `@storybook/testing-react`, but you have to match the requisites:
+Storybook 6.4 released a [new version of CSF](https://storybook.js.org/blog/component-story-format-3-0/), where the story can also be an object. This is supported in `@storybook/testing-react`, but you have to match one of the requisites:
 
-1 - Either your **story** has a `render` method or your **meta** contains a `component` property:
+1 - Your **story** has a `render` method
+2 - Or your **meta** has a `render` method
+3 - Or your **meta** contains a `component` property
 
 ```js
 // Example 1: Meta with component property
 export default {
   title: 'Button',
-  component: Button // <-- This is strictly necessary
-}
+  component: Button, // <-- This is strictly necessary
+};
+
+// Example 2: Meta with render method:
+export default {
+  title: 'Button',
+  render: args => <Button {...args} />,
+};
 
-// Example 2: Story with render method:
+// Example 3: Story with render method:
 export const Primary = {
-  render: (args) => <Button {...args}>
-}
+  render: args => <Button {...args} />,
+};
 ```
 
 #### Interactions with play function

example/src/components/AccountForm.stories.tsx

@@ -11,6 +11,10 @@ export default {
   parameters: {
     layout: 'centered',
   },
+  render: (args: AccountFormProps) => (<div>
+    <p>This uses a custom render from meta</p>
+    <AccountForm {...args} />
+  </div>)
 } as ComponentMeta<typeof AccountForm>;
 
 type Story = ComponentStoryObj<typeof AccountForm>
@@ -92,7 +96,7 @@ export const VerificationSuccess: Story = {
 export const StandardWithRenderFunction: Story = {
   ...Standard,
   render: (args: AccountFormProps) => (<div>
-    <p>This uses a custom render</p>
+    <p>This uses a custom render from story</p>
     <AccountForm {...args} />
   </div>),
 };

src/index.ts

@@ -80,7 +80,7 @@ export function composeStory<GenericArgs>(
     );
   }
 
-  const renderFn = typeof story === 'function' ? story : story.render ?? globalRender;
+  const renderFn = typeof story === 'function' ? story : story.render ?? meta.render ?? globalRender;
   const finalStoryFn = (context: StoryContext<ReactFramework, GenericArgs>) => {
     const { passArgsFirst = true } = context.parameters;
     if (!passArgsFirst) {