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
@@ -15,7 +15,7 @@ const meta: Meta<Button> {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js"
+```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { action } from '@storybook/addon-actions';
 
 import Button from './Button';
@@ -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
@@ -47,14 +47,14 @@ const meta {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 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

@@ -19,8 +19,8 @@ export const Basic: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
-export const Basic {
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
+export const Basic = {
   parameters: {
     docs: {
       canvas: { sourceState: 'shown' },
@@ -29,7 +29,7 @@ export const Basic {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -51,7 +51,7 @@ export const Basic: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 

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

@@ -19,8 +19,14 @@ export const Basic: Story = {
 };
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
-export const Basic {
+```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF 3"
+const meta = {
+  component: Button,
+};
+
+export default meta;
+
+export const Basic = {
   parameters: {
     docs: {
       source: { language: 'jsx' },
@@ -29,7 +35,7 @@ export const Basic {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -51,7 +57,7 @@ export const Basic: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -107,3 +113,53 @@ export const Basic: Story = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts" tabTitle="CSF 4 (experimental)"
+import config from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = config.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      source: { language: 'tsx' },
+    },
+  },
+});
+```
+
+<!-- js & ts-4-9 (when applicable) still needed while providing both CSF 3 & 4 -->
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF 4 (experimental)"
+export const Basic = {
+  parameters: {
+    docs: {
+      source: { language: 'jsx' },
+    },
+  },
+};
+```
+
+<!-- js & ts-4-9 (when applicable) still needed while providing both CSF 3 & 4 -->
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="CSF 4 (experimental)"
+import config from '#.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = config.meta({
+  component: Button,
+});
+
+export const Basic = meta.story({
+  parameters: {
+    docs: {
+      source: { language: 'tsx' },
+    },
+  },
+});
+```

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

@@ -20,7 +20,11 @@ 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,7 @@ const combosIndexer = {
     const title = fileName.match(/\/(.*)\.stories/)[1];
 
     // Read file and generate entries ...
+    const entries = [];
 
     return entries.map((entry) => ({
       type: 'story',
@@ -20,7 +21,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 +39,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 +54,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 +72,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 +87,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;

docs/_snippets/main-config-indexers.md

@@ -11,7 +11,9 @@ export default {
   experimental_indexers: async (existingIndexers) => {
     const customIndexer = {
       test: /\.custom-stories\.[tj]sx?$/,
-      createIndex: // See API and examples below...
+      createIndex: async (fileName) => {
+        // See API and examples below...
+      },
     };
     return [...existingIndexers, customIndexer];
   },
@@ -33,13 +35,15 @@ const config: StorybookConfig = {
   experimental_indexers: async (existingIndexers) => {
     const customIndexer = {
       test: /\.custom-stories\.[tj]sx?$/,
-      createIndex: // See API and examples below...
+      createIndex: async (fileName) => {
+        // See API and examples below...
+      },
     };
     return [...existingIndexers, customIndexer];
   },
 };
 
-export default config
+export default config;
 ```
 
 ```ts filename=".storybook/main.ts" renderer="common" language="ts"
@@ -57,11 +61,13 @@ const config: StorybookConfig = {
   experimental_indexers: async (existingIndexers) => {
     const customIndexer = {
       test: /\.custom-stories\.[tj]sx?$/,
-      createIndex: // See API and examples below...
+      createIndex: async (fileName) => {
+        // See API and examples below...
+      },
     };
     return [...existingIndexers, customIndexer];
   },
 };
 
-export default config
+export default config;
 ```

docs/_snippets/my-component-story-mandatory-export.md

@@ -10,8 +10,8 @@ const meta: Meta<MyComponent> = {
    */
   title: 'Path/To/MyComponent',
   component: MyComponent,
-  decorators: [ ... ],
-  parameters: { ... },
+  decorators: [],
+  parameters: {},
 };
 
 export default meta;
@@ -22,13 +22,13 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/configure/#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Path/To/MyComponent',
   component: MyComponent,
-  decorators: [ ... ],
-  parameters: { ... },
+  decorators: [],
+  parameters: {},
 };
 ```
 
@@ -45,8 +45,8 @@ const meta = {
    */
   title: 'Path/To/MyComponent',
   component: MyComponent,
-  decorators: [ ... ],
-  parameters: { ... },
+  decorators: [],
+  parameters: {},
 } satisfies Meta<typeof MyComponent>;
 
 export default meta;
@@ -65,8 +65,8 @@ const meta: Meta<typeof MyComponent> = {
    */
   title: 'Path/To/MyComponent',
   component: MyComponent,
-  decorators: [ ... ],
-  parameters: { ... },
+  decorators: [],
+  parameters: {},
 };
 
 export default meta;
@@ -76,8 +76,8 @@ export default meta;
 export default {
   title: 'Path/To/MyComponent',
   component: 'my-component',
-  decorators: [ ... ],
-  parameters: { ... },
+  decorators: [],
+  parameters: {},
 };
 ```
 
@@ -87,8 +87,8 @@ import type { Meta } from '@storybook/web-components';
 const meta: Meta = {
   title: 'Path/To/MyComponent',
   component: 'my-component',
-  decorators: [ ... ],
-  parameters: { ... },
+  decorators: [],
+  parameters: {},
 };
 
 export default meta;

docs/_snippets/my-component-story-with-storyname.md

@@ -25,10 +25,10 @@ export default {
 };
 
 export const Simple = {
-  decorators: [...],
+  decorators: [],
   name: 'So simple!',
-  parameters: {...},
-}
+  parameters: {},
+};
 ```
 
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"

docs/_snippets/nextjs-navigation-mock.md

@@ -15,7 +15,7 @@ export default {
 };
 
 export const Unauthenticated = {
-  async play() => {
+  async play() {
     // 👇 Assert that your component called redirect()
     await expect(redirect).toHaveBeenCalledWith('/login', 'replace');
   },
@@ -56,7 +56,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Unauthenticated: Story = {
-  async play() => {
+  async play() {
     // 👇 Assert that your component called redirect()
     await expect(redirect).toHaveBeenCalledWith('/login', 'replace');
   },
@@ -97,7 +97,7 @@ export default meta;
 type Story = StoryObj<typeof MyForm>;
 
 export const Unauthenticated: Story = {
-  async play() => {
+  async play() {
     // 👇 Assert that your component called redirect()
     await expect(redirect).toHaveBeenCalledWith('/login', 'replace');
   },

docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md

@@ -16,12 +16,12 @@ const preview = {
       themes: {
         light: lightTheme,
         dark: darkTheme,
-      }
+      },
       defaultTheme: 'light',
       Provider: ThemeProvider,
       GlobalStyles,
-    })
-  ]
+    }),
+  ],
 };
 
 export default preview;
@@ -47,12 +47,12 @@ const preview: Preview = {
       themes: {
         light: lightTheme,
         dark: darkTheme,
-      }
+      },
       defaultTheme: 'light',
       Provider: ThemeProvider,
       GlobalStyles,
     }),
-  ]
+  ],
 };
 
 export default preview;
@@ -74,15 +74,16 @@ const GlobalStyles = createGlobalStyle`
 
 const preview: Preview = {
   decorators: [
-  withThemeFromJSXProvider<Renderer>({
-  themes: {
-    light: lightTheme,
-    dark: darkTheme,
-  }
-  defaultTheme: 'light',
-  Provider: ThemeProvider,
-  GlobalStyles,
-})]
+    withThemeFromJSXProvider<Renderer>({
+      themes: {
+        light: lightTheme,
+        dark: darkTheme,
+      },
+      defaultTheme: 'light',
+      Provider: ThemeProvider,
+      GlobalStyles,
+    }),
+  ],
 };
 
 export default preview;

docs/_snippets/storybook-fix-imports-autodocs-monorepo.md

@@ -1,6 +1,6 @@
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 // ❌ Don't use the package's index file to import the component.
-import { MyComponent } from '@component-package';
+// import { MyComponent } from '@component-package';
 
 // ✅ Use the component's export to import it directly.
 import { MyComponent } from '@component-package/src/MyComponent';
@@ -20,7 +20,7 @@ export default {
 import type { Meta } from '@storybook/your-framework';
 
 // ❌ Don't use the package's index file to import the component.
-import { MyComponent } from '@component-package';
+// import { MyComponent } from '@component-package';
 
 // ✅ Use the component's export to import it directly.
 import { MyComponent } from '@component-package/src/MyComponent';
@@ -42,7 +42,7 @@ export default meta;
 import type { Meta } from '@storybook/your-framework';
 
 // ❌ Don't use the package's index file to import the component.
-import { MyComponent } from '@component-package';
+// import { MyComponent } from '@component-package';
 
 // ✅ Use the component's export to import it directly.
 import { MyComponent } from '@component-package/src/MyComponent';

docs/_snippets/storybook-main-simplified-config.md

@@ -4,10 +4,10 @@ export default {
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   webpackFinal: async (config) => {
-    config.plugins.push(...);
+    config.plugins.push(/* ... */);
     return config;
   },
-}
+};
 ```
 
 ```ts filename=".storybook/main.ts" renderer="common" language="ts"
@@ -17,8 +17,8 @@ import type { StorybookConfig } from '@storybook/your-framework';
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-   webpackFinal: async (config) => {
-    config.plugins.push(...);
+  webpackFinal: async (config) => {
+    config.plugins.push(/* ... */);
     return config;
   },
 };

docs/_snippets/storybook-preview-migrate-backgrounds-globals.md

@@ -16,8 +16,8 @@ export default {
   parameters: {
     backgrounds: {
       options: {
-        { name: 'twitter', value: '#00aced' },
-        { name: 'facebook', value: '#3b5998' },
+        twitter: { name: 'twitter', value: '#00aced' },
+        facebook: { name: 'facebook', value: '#3b5998' },
       },
     },
   },
@@ -50,8 +50,8 @@ const preview: Preview = {
   parameters: {
     backgrounds: {
       options: {
-        { name: 'twitter', value: '#00aced' },
-        { name: 'facebook', value: '#3b5998' },
+        twitter: { name: 'twitter', value: '#00aced' },
+        facebook: { name: 'facebook', value: '#3b5998' },
       },
     },
   },

docs/_snippets/storybook-preview-use-global-type.md

@@ -8,7 +8,7 @@ const preview: Preview = {
       (story) => `<div [class]="myTheme">${story}</div>`,
       ({ globals }) => {
         return { myTheme: globals['theme'] };
-      },
+      }
     ),
   ],
 };
@@ -24,9 +24,8 @@ const preview = {
     (story, context) => {
       const selectedTheme = context.globals.theme || 'light';
       const theme = MyThemes[selectedTheme];
-      return (
-        // Your theme provider and other context providers go here
-      )
+      // Your theme provider and other context providers goes in the return statement
+      return;
     },
   ],
 };
@@ -45,9 +44,8 @@ const preview: Preview = {
     (story, context) => {
       const selectedTheme = context.globals.theme || 'light';
       const theme = MyThemes[selectedTheme];
-      return (
-        // Your theme provider and other context providers go here
-      )
+      // Your theme provider and other context providers goes in the return statement
+      return;
     },
   ],
 };
@@ -66,9 +64,8 @@ const preview: Preview = {
     (story, context) => {
       const selectedTheme = context.globals.theme || 'light';
       const theme = MyThemes[selectedTheme];
-      return (
-        // Your theme provider and other context providers go here
-      )
+      // Your theme provider and other context providers goes in the return statement
+      return;
     },
   ],
 };

docs/_snippets/storybook-story-layout-param.md

@@ -18,11 +18,11 @@ export const WithLayout: Story = {
 ```
 
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
-import { Button } from './Button':
+import { Button } from './Button';
 
 export default {
   component: Button,
-}
+};
 
 export const WithLayout = {
   parameters: {