feat: make rule fixable

README.md

@@ -185,7 +185,7 @@ This plugin does not support MDX files.
 | [`storybook/no-stories-of`](./docs/rules/no-stories-of.md)                                 | storiesOf is deprecated and should not be used                                                                                |     | <ul><li>csf-strict</li><li>flat/csf-strict</li></ul>                                                                           |
 | [`storybook/no-title-property-in-meta`](./docs/rules/no-title-property-in-meta.md)         | Do not define a title in meta                                                                                                 | 🔧  | <ul><li>csf-strict</li><li>flat/csf-strict</li></ul>                                                                           |
 | [`storybook/no-uninstalled-addons`](./docs/rules/no-uninstalled-addons.md)                 | This rule identifies storybook addons that are invalid because they are either not installed or contain a typo in their name. |     | <ul><li>recommended</li><li>flat/recommended</li></ul>                                                                         |
-| [`storybook/only-csf3`](./docs/rules/only-csf3.md)                                         | Enforce Component Story Format 3.0 (CSF3) for stories                                                                         |     | N/A                                                                                                                            |
+| [`storybook/only-csf3`](./docs/rules/only-csf3.md)                                         | Enforce Component Story Format 3.0 (CSF3) for stories                                                                         | 🔧  | N/A                                                                                                                            |
 | [`storybook/prefer-pascal-case`](./docs/rules/prefer-pascal-case.md)                       | Stories should use PascalCase                                                                                                 | 🔧  | <ul><li>recommended</li><li>flat/recommended</li></ul>                                                                         |
 | [`storybook/story-exports`](./docs/rules/story-exports.md)                                 | A story file must contain at least one story export                                                                           |     | <ul><li>recommended</li><li>flat/recommended</li><li>csf</li><li>flat/csf</li><li>csf-strict</li><li>flat/csf-strict</li></ul> |
 | [`storybook/use-storybook-expect`](./docs/rules/use-storybook-expect.md)                   | Use expect from `@storybook/test`, `storybook/test` or `@storybook/jest`                                                      | 🔧  | <ul><li>addon-interactions</li><li>flat/addon-interactions</li><li>recommended</li><li>flat/recommended</li></ul>              |

docs/rules/only-csf3.md

@@ -32,6 +32,17 @@ export const Tertiary = () => <Button>Click me</Button>
 export const WithArgs = Template.bind({})
 WithArgs.args = { label: 'With Args' }
 WithArgs.parameters = { layout: 'centered' }
+
+// ❌ CSF2: Template.bind({}) with multiple stories
+const Template = (args) => <Button {...args} />
+
+export const Primary = Template.bind({})
+Primary.args = { label: 'Primary', variant: 'primary' }
+Primary.parameters = { backgrounds: { default: 'light' } }
+
+export const Secondary = Template.bind({})
+Secondary.args = { label: 'Secondary', variant: 'secondary' }
+Secondary.parameters = { backgrounds: { default: 'dark' } }
 ```
 
 Examples of **correct** code:
@@ -48,6 +59,21 @@ export const Primary = {
 export const Secondary = {
   render: (args) => <Button {...args}>Secondary</Button>,
 }
+
+// ✅ CSF3: Multiple stories sharing render logic
+const render = (args) => <Button {...args} />
+
+export const Primary = {
+  render,
+  args: { label: 'Primary', variant: 'primary' },
+  parameters: { backgrounds: { default: 'light' } },
+}
+
+export const Secondary = {
+  render,
+  args: { label: 'Secondary', variant: 'secondary' },
+  parameters: { backgrounds: { default: 'dark' } },
+}
 ```
 
 ## When Not To Use It
@@ -68,8 +94,8 @@ Primary.args = { label: 'Primary' }
 
 // ✅ CSF3
 export const Primary = {
-  args: { label: 'Primary' },
   render: (args) => <Button {...args} />,
+  args: { label: 'Primary' },
 }
 ```
 
@@ -104,6 +130,7 @@ Primary.decorators = [
 
 // ✅ CSF3
 export const Primary = {
+  render: (args) => <Button {...args} />,
   args: { label: 'Primary' },
   parameters: { layout: 'centered' },
   decorators: [
@@ -113,7 +140,6 @@ export const Primary = {
       </div>
     ),
   ],
-  render: (args) => <Button {...args} />,
 }
 ```