Merge pull request #30345 from storybookjs/yann/fix-syntax-issues-in-…

…docs

Docs: Fix syntax issues in documentation snippets

docs/_snippets/addon-actions-action-function.md

@@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
 
 import Button from './button.component';
 
-const meta: Meta<Button> {
+const meta: Meta<Button> = {
   component: Button,
   args: {
     // 👇 Create an action that appears when the onClick event is fired
@@ -36,7 +36,7 @@ import { action } from '@storybook/addon-actions';
 
 import Button from './Button';
 
-const meta {
+const meta = {
   component: Button,
   args: {
     // 👇 Create an action that appears when the onClick event is fired
@@ -54,7 +54,7 @@ import { action } from '@storybook/addon-actions';
 
 import Button from './Button';
 
-const meta: Meta<typeof Button> {
+const meta: Meta<typeof Button> = {
   component: Button,
   args: {
     // 👇 Create an action that appears when the onClick event is fired
@@ -81,7 +81,7 @@ export default {
 import type { Meta } from '@storybook/angular';
 import { action } from '@storybook/addon-actions';
 
-const meta: Meta {
+const meta: Meta = {
   component: 'demo-button',
   args: {
     // 👇 Create an action that appears when the onClick event is fired

docs/_snippets/api-doc-block-canvas-parameter.md

@@ -20,7 +20,7 @@ export const Basic: Story = {
 ```
 
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
-export const Basic {
+export const Basic = {
   parameters: {
     docs: {
       canvas: { sourceState: 'shown' },

docs/_snippets/api-doc-block-description-example.md

@@ -8,11 +8,11 @@ import { Button } from './button.component';
  * These stories showcase the button
  */
 const meta: Meta<Button> = {
-  component: Button
+  component: Button,
   parameters: {
     docs: {
       description: {
-        component: 'Another description, overriding the comments'
+        component: 'Another description, overriding the comments',
       },
     },
   },
@@ -29,7 +29,7 @@ export const Primary: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Another description on the story, overriding the comments'
+        story: 'Another description on the story, overriding the comments',
       },
     },
   },
@@ -44,15 +44,15 @@ import { Button } from './Button';
  * These stories showcase the button
  */
 export default {
-  component: Button
+  component: Button,
   parameters: {
     docs: {
       description: {
-        component: 'Another description, overriding the comments'
-      }
-    }
-  }
-}
+        component: 'Another description, overriding the comments',
+      },
+    },
+  },
+};
 
 /**
  * Primary Button
@@ -62,11 +62,11 @@ export const Primary = {
   parameters: {
     docs: {
       description: {
-        story: 'Another description on the story, overriding the comments'
-      }
-    }
-  }
-}
+        story: 'Another description on the story, overriding the comments',
+      },
+    },
+  },
+};
 ```
 
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
@@ -80,18 +80,18 @@ import { Button } from './Button';
  * These stories showcase the button
  */
 const meta = {
-  component: Button
+  component: Button,
   parameters: {
     docs: {
       description: {
-        component: 'Another description, overriding the comments'
-      }
-    }
-  }
+        component: 'Another description, overriding the comments',
+      },
+    },
+  },
 } satisfies Meta<typeof Button>;
 
 export default meta;
-type Story = StoryObj<typeof meta>
+type Story = StoryObj<typeof meta>;
 
 /**
  * Primary Button
@@ -101,11 +101,11 @@ export const Primary: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Another description on the story, overriding the comments'
-      }
-    }
-  }
-}
+        story: 'Another description on the story, overriding the comments',
+      },
+    },
+  },
+};
 ```
 
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
@@ -119,11 +119,11 @@ import { Button } from './Button';
  * These stories showcase the button
  */
 const meta: Meta<typeof Button> = {
-  component: Button
+  component: Button,
   parameters: {
     docs: {
       description: {
-        component: 'Another description, overriding the comments'
+        component: 'Another description, overriding the comments',
       },
     },
   },
@@ -140,7 +140,7 @@ export const Primary: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Another description on the story, overriding the comments'
+        story: 'Another description on the story, overriding the comments',
       },
     },
   },

docs/_snippets/api-doc-block-source-parameter.md

@@ -20,7 +20,13 @@ export const Basic: Story = {
 ```
 
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
-export const Basic {
+const meta = {
+  component: Button,
+};
+
+export default meta;
+
+export const Basic = {
   parameters: {
     docs: {
       source: { language: 'jsx' },

docs/_snippets/api-doc-block-story-parameter.md

@@ -20,7 +20,12 @@ export const Basic: Story = {
 ```
 
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
-export const Basic {
+const meta = {
+  component: Button,
+};
+export default meta;
+
+export const Basic = {
   parameters: {
     docs: {
       story: { autoplay: true },

docs/_snippets/button-story-click-handler-simplificated.md

@@ -20,10 +20,10 @@ import { Button } from './Button';
 
 export default {
   component: Button,
-}
+};
 
 export const Text = {
-  args: {...},
+  args: {/* ... */},
 };
 ```
 
@@ -66,10 +66,10 @@ import { Button } from './Button';
 
 export default {
   component: Button,
-}
+};
 
 export const Text = {
-  args: {...},
+  args: {/* ... */},
 };
 ```
 
@@ -115,7 +115,7 @@ export default {
 };
 
 export const Text = {
-  args: {...},
+  args: {/* ... */},
 };
 ```
 
@@ -132,7 +132,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Text: Story = {
-  args: {...},
+  args: {/* ... */},
 };
 ```
 
@@ -149,7 +149,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Text: Story = {
-  args: {...},
+  args: {/* ... */},
 };
 ```
 
@@ -219,7 +219,7 @@ export default {
 };
 
 export const Text = {
-  args: {...},
+  args: {/* ... */},
 };
 ```
 

docs/_snippets/main-config-indexers-jsonstories.md

@@ -8,11 +8,11 @@ const jsonStoriesIndexer = {
 
     const stories = generateStoryIndexesFromJson(content);
 
-    return stories.map((story) => {
+    return stories.map((story) => ({
       type: 'story',
       importPath: `virtual:jsonstories--${fileName}--${story.componentName}`,
-      exportName: story.name
-    });
+      exportName: story.name,
+    }));
   },
 };
 
@@ -24,7 +24,7 @@ const config = {
     // 👇 Make sure files to index are included in `stories`
     '../src/**/*.stories.json',
   ],
-  experimental_indexers: async (existingIndexers) => [...existingIndexers, jsonStoriesIndexer];
+  experimental_indexers: async (existingIndexers) => [...existingIndexers, jsonStoriesIndexer],
 };
 
 export default config;
@@ -44,11 +44,11 @@ const jsonStoriesIndexer: Indexer = {
 
     const stories = generateStoryIndexesFromJson(content);
 
-    return stories.map((story) => {
+    return stories.map((story) => ({
       type: 'story',
       importPath: `virtual:jsonstories--${fileName}--${story.componentName}`,
-      exportName: story.name
-    });
+      exportName: story.name,
+    }));
   },
 };
 
@@ -60,7 +60,7 @@ const config: StorybookConfig = {
     // 👇 Make sure files to index are included in `stories`
     '../src/**/*.stories.json',
   ],
-  experimental_indexers: async (existingIndexers) => [...existingIndexers, jsonStoriesIndexer];
+  experimental_indexers: async (existingIndexers) => [...existingIndexers, jsonStoriesIndexer],
 };
 
 export default config;
@@ -80,11 +80,11 @@ const jsonStoriesIndexer: Indexer = {
 
     const stories = generateStoryIndexesFromJson(content);
 
-    return stories.map((story) => {
+    return stories.map((story) => ({
       type: 'story',
       importPath: `virtual:jsonstories--${fileName}--${story.componentName}`,
-      exportName: story.name
-    });
+      exportName: story.name,
+    }));
   },
 };
 
@@ -96,7 +96,7 @@ const config: StorybookConfig = {
     // 👇 Make sure files to index are included in `stories`
     '../src/**/*.stories.json',
   ],
-  experimental_indexers: async (existingIndexers) => [...existingIndexers, jsonStoriesIndexer];
+  experimental_indexers: async (existingIndexers) => [...existingIndexers, jsonStoriesIndexer],
 };
 
 export default config;

docs/_snippets/main-config-indexers-title.md

@@ -6,6 +6,8 @@ const combosIndexer = {
     const title = fileName.match(/\/(.*)\.stories/)[1];
 
     // Read file and generate entries ...
+    let entries = [];
+    // Read file and generate entries...
 
     return entries.map((entry) => ({
       type: 'story',
@@ -20,7 +22,7 @@ const combosIndexer = {
 const config = {
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  experimental_indexers: async (existingIndexers) => [...existingIndexers, combosIndexer];
+  experimental_indexers: async (existingIndexers) => [...existingIndexers, combosIndexer],
 };
 
 export default config;
@@ -38,6 +40,7 @@ const combosIndexer: Indexer = {
     const title = fileName.match(/\/(.*)\.stories/)[1];
 
     // Read file and generate entries ...
+    const entries = [];
 
     return entries.map((entry) => ({
       type: 'story',
@@ -52,7 +55,7 @@ const combosIndexer: Indexer = {
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  experimental_indexers: async (existingIndexers) => [...existingIndexers, combosIndexer];
+  experimental_indexers: async (existingIndexers) => [...existingIndexers, combosIndexer],
 };
 
 export default config;
@@ -70,6 +73,7 @@ const combosIndexer: Indexer = {
     const title = fileName.match(/\/(.*)\.stories/)[1];
 
     // Read file and generate entries ...
+    const entries = [];
 
     return entries.map((entry) => ({
       type: 'story',
@@ -84,7 +88,7 @@ const combosIndexer: Indexer = {
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  experimental_indexers: async (existingIndexers) => [...existingIndexers, combosIndexer];
+  experimental_indexers: async (existingIndexers) => [...existingIndexers, combosIndexer],
 };
 
 export default config;