change to named exports and QOL adjustments

docs/snippets/angular/button-component-with-proptypes.ts.mdx

@@ -5,12 +5,13 @@ import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'my-button',
-  template: ` <button type="button" [disabled]="isDisabled">
-    {{ content }}
-  </button>`,
+  template: `
+    <button type="button" [disabled]="isDisabled">
+      {{ content }}
+    </button>`,
   styleUrls: ['./button.css'],
 })
-export default class ButtonComponent {
+export class ButtonComponent {
   /**
    * Checks if the button should be disabled
    */

docs/snippets/angular/button-group-story.ts.mdx

@@ -4,8 +4,8 @@
 import { moduleMetadata } from '@storybook/angular';
 import { CommonModule } from '@angular/common';
 
-import ButtonGroup from './ButtonGroup.component';
-import Button from './button.component';
+import { ButtonGroup } from './ButtonGroup.component';
+import { Button } from './button.component';
 
 //👇 Imports the Button stories
 import * as ButtonStories from './Button.stories';

docs/snippets/angular/button-implementation.ts.mdx

@@ -7,7 +7,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
   selector: 'button',
   template: `the component implementation markup`,
 })
-export default class ButtonComponent {
+export class ButtonComponent {
   /**
    * Is this the principal call to action on the page?
    */

docs/snippets/angular/button-story-click-handler-args.ts.mdx

@@ -3,7 +3,7 @@
 
 import { action } from '@storybook/addon-actions';
 
-import Button from './button.component';
+import { Button } from './button.component';
 
 export default {
   component: Button,

docs/snippets/angular/button-story-click-handler.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import Button from './Button.component';
+import { Button } from './button.component';
 
 import { action } from '@storybook/addon-actions';
 

docs/snippets/angular/button-story-component-args-primary.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import Button from './button.component';
+import { Button } from './button.component';
 
 export default {
   component: Button,

docs/snippets/angular/button-story-component-decorator.ts.mdx

@@ -3,8 +3,8 @@
 
 import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
 
-import Button from './button.component';
-import ParentComponent from './parent.component'; // ParentComponent contains ng-content
+import { Button } from './button.component';
+import { ParentComponent } from './parent.component'; // ParentComponent contains ng-content
 
 export default {
   component: Button,

docs/snippets/angular/button-story-decorator.ts.mdx

@@ -3,8 +3,8 @@
 
 import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
 
-import Button from './button.component';
-import ParentComponent from './parent.component'; // ParentComponent contains ng-content
+import { Button } from './button.component';
+import { ParentComponent } from './parent.component'; // ParentComponent contains ng-content
 
 export default {
   component: ButtonComponent,

docs/snippets/angular/button-story-default-docs-code.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import Button from './button.component';
+import { Button } from './button.component';
 
 export default {
   component: Button,

docs/snippets/angular/button-story-default-export-with-component.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import Button from './button.component';
+import { Button } from './button.component';
 
 export default {
   component: Button,

docs/snippets/angular/button-story-rename-story.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import Button from './button.component';
+import { Button } from './button.component';
 
 export default {
   component: Button,

docs/snippets/angular/button-story-using-args.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import Button from './button.component';
+import { Button } from './button.component';
 
 export default {
   component: Button,

docs/snippets/angular/button-story-with-addon-example.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import Button from './button.component';
+import { Button } from './button.component';
 
 export default {
   component: Button,

docs/snippets/angular/button-story-with-args.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 //Button.stories.ts
 
-import Button from './button.component';
+import { Button } from './button.component';
 
 export default {
   component: Button,

docs/snippets/angular/button-story-with-blue-args.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import Button from './button.component';
+import { Button } from './button.component';
 
 export default {
   component: Button,

docs/snippets/angular/button-story-with-emojis.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import Button from './button.component';
+import { Button } from './button.component';
 
 export default {
   component: Button,

docs/snippets/angular/button-story-with-parameters.ts.mdx

@@ -1,12 +1,9 @@
 ```ts
 // Button.stories.ts
 
-import { Meta } from '@storybook/angular/types-6-0';
-
-import Button from './button.component';
+import { Button } from './button.component';
 
 export default {
-  title: 'Button',
   component: Button,
   parameters: {
     backgrounds: {
@@ -16,5 +13,5 @@ export default {
       ],
     },
   },
-} as Meta;
+};
 ```

docs/snippets/angular/button-story.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import Button from './button.component';
+import { Button } from './button.component';
 
 export default {
   component: Button,

docs/snippets/angular/checkbox-story-csf.ts.mdx

@@ -1,10 +1,9 @@
 ```ts
 // Checkbox.stories.ts
 
-import Checkbox from './Checkbox.component';
+import { Checkbox } from './Checkbox.component';
 
 export default {
-  title: 'MDX/Checkbox',
   component: Checkbox,
 };
 

docs/snippets/angular/component-story-custom-args-complex.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // YourComponent.stories.ts
 
-import YourComponent from './your.component';
+import { YourComponent } from './your-component.component';
 
 export default {
   component: YourComponent,

docs/snippets/angular/component-story-static-asset-cdn.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import MyComponent from './MyComponent.component';
+import { MyComponent } from './MyComponent.component';
 
 export default {
   component: MyComponent,

docs/snippets/angular/component-story-static-asset-with-import.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import MyComponent from './MyComponent.component';
+import { MyComponent } from './MyComponent.component';
 
 import imageFile from './static/image.png';
 

docs/snippets/angular/component-story-static-asset-without-import.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import MyComponent from './MyComponent.component';
+import { MyComponent } from './MyComponent.component';
 
 export default {
   component: MyComponent,

docs/snippets/angular/document-screen-fetch.ts.mdx

@@ -19,7 +19,7 @@ import { HttpClient } from '@angular/common/http';
     </div>
   `,
 })
-export default class DocumentScreen implements OnInit {
+export class DocumentScreen implements OnInit {
   user: any = { id: 0, name: 'Some User' };
 
   document: any = { id: 0, title: 'Some Title' };

docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx

@@ -8,10 +8,10 @@ import { moduleMetadata } from '@storybook/angular';
 
 import { graphql } from 'msw';
 
-import DocumentScreen from './YourPage.component';
-import DocumentList from './DocumentList.component';
-import DocumentHeader from './DocumentHeader.component';
-import PageLayout from './PageLayout.component';
+import { DocumentScreen } from './YourPage.component';
+import { DocumentList } from './DocumentList.component';
+import { DocumentHeader } from './DocumentHeader.component';
+import { PageLayout } from './PageLayout.component';
 
 import { MockGraphQLModule } from './mock-graphql.module';
 

docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx

@@ -8,10 +8,10 @@ import { moduleMetadata } from '@storybook/angular';
 
 import { rest } from 'msw';
 
-import DocumentScreen from './YourPage.component';
-import DocumentList from './DocumentList.component';
-import DocumentHeader from './DocumentHeader.component';
-import PageLayout from './PageLayout.component';
+import { DocumentScreen } from './YourPage.component';
+import { DocumentList } from './DocumentList.component';
+import { DocumentHeader } from './DocumentHeader.component';
+import { PageLayout } from './PageLayout.component';
 
 export default {
   component: DocumentScreen,

docs/snippets/angular/list-story-expanded.ts.mdx

@@ -5,8 +5,8 @@ import { moduleMetadata } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
-import List from './list.component';
-import ListItem from './list-item.component';
+import { List } from './list.component';
+import { ListItem } from './list-item.component';
 
 export default {
   component: List,

docs/snippets/angular/list-story-reuse-data.ts.mdx

@@ -5,8 +5,8 @@ import { moduleMetadata } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
-import List from './list.component';
-import ListItem from './list-item.component';
+import { List } from './list.component';
+import { ListItem } from './list-item.component';
 
 //👇 We're importing the necessary stories from ListItem
 import { Selected, Unselected } from './ListItem.stories';

docs/snippets/angular/list-story-starter.ts.mdx

@@ -5,7 +5,7 @@ import { moduleMetadata } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
-import List from './list.component';
+import { List } from './list.component';
 
 export default {
   component: List,

docs/snippets/angular/list-story-template.ts.mdx

@@ -5,8 +5,8 @@ import { moduleMetadata } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
-import ListItemComponent from './list-item.component';
-import ListComponent from './list.component';
+import { ListItemComponent } from './list-item.component';
+import { ListComponent } from './list.component';
 
 //👇 Imports a specific story from ListItem stories
 import { Unchecked } from './ListItem.stories';

docs/snippets/angular/list-story-unchecked.ts.mdx

@@ -5,8 +5,8 @@ import { moduleMetadata } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
-import ListItemComponent from './list-item.component';
-import ListComponent from './list.component';
+import { ListItemComponent } from './list-item.component';
+import { ListComponent } from './list.component';
 
 //👇 Imports a specific story from ListItem stories
 import { Unchecked } from './ListItem.stories';

docs/snippets/angular/list-story-with-subcomponents.ts.mdx

@@ -5,8 +5,8 @@ import { moduleMetadata } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
-import ListItemComponent from './list-item.component';
-import ListComponent from './list.component';
+import { ListItemComponent } from './list-item.component';
+import { ListComponent } from './list.component';
 
 export default {
   component: ListComponent,

docs/snippets/angular/loader-story.ts.mdx

@@ -3,7 +3,7 @@
 
 import fetch from 'node-fetch';
 
-import TodoItem from './TodoItem';
+import { TodoItem } from './TodoItem';
 
 export default {
   component: TodoItem,

docs/snippets/angular/my-component-story-basic-and-props.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import MyComponent from './MyComponent.component';
+import { MyComponent } from './MyComponent.component';
 
 export default {
   component: MyComponent,

docs/snippets/angular/my-component-story-configure-viewports.ts.mdx

@@ -3,7 +3,7 @@
 
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
-import MyComponent from './MyComponent.component';
+import { MyComponent } from './MyComponent.component';
 
 export default {
   component: MyComponent,

docs/snippets/angular/my-component-story-use-globaltype.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import MyComponent from './MyComponent.component';
+import { MyComponent } from './MyComponent.component';
 
 export default {
   component: MyComponent,

docs/snippets/angular/my-component-story-with-nonstory.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import MyComponent from './MyComponent.component';
+import { MyComponent } from './MyComponent.component';
 
 import someData from './data.json';
 

docs/snippets/angular/my-component-with-env-variables.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import MyComponent from './mycomponent.component';
+import { MyComponent } from './MyComponent.component';
 
 export default {
   component: MyComponent,

docs/snippets/angular/page-story-slots.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // Page.stories.ts
 
-import Page from './page.component';
+import { Page } from './page.component';
 
 export default {
   component: Page,

docs/snippets/angular/page-story.ts.mdx

@@ -5,9 +5,9 @@ import { moduleMetadata } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
-import Button from './button.component';
-import Header from './header.component';
-import Page from './page.component';
+import { Button } from './button.component';
+import { Header } from './header.component';
+import { Page } from './page.component';
 
 //👇 Imports all Header stories
 import * as HeaderStories from './Header.stories';

docs/snippets/angular/simple-page-implementation.ts.mdx

@@ -12,7 +12,7 @@ import { Component, Input } from '@angular/core';
     </page-layout>
   `,
 })
-export default class DocumentScreen {
+export class DocumentScreen {
   @Input()
   user: any = { id: 0, name: 'Some User' };
 

docs/snippets/angular/table-story-fully-customize-controls.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // Table.stories.ts
 
-import Table from './Table.component';
+import { Table } from './Table.component';
 
 export default {
   component: Table,

docs/snippets/angular/your-component-with-decorator.ts.mdx

@@ -3,7 +3,7 @@
 
 import { componentWrapperDecorator } from '@storybook/angular';
 
-import YourComponent from './your.component';
+import { YourComponent } from './your.component';
 
 export default {
   component: YourComponent,

docs/snippets/common/badge-story-custom-argtypes.js.mdx

@@ -1,6 +1,8 @@
 ```js
 // Badge.stories.js | Badge.stories.jsx  | Badge.stories.ts | Badge.stories.tsx
 
+import { Badge } from './Badge';
+
 export default {
   component: Badge,
   argTypes: {

docs/snippets/common/button-story-action-event-handle.js.mdx

@@ -1,9 +1,10 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
+  component: Button,
   parameters: {
     actions: {
       handles: ['mouseover', 'click .btn'],

docs/snippets/common/button-story-argtypes-with-categories.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
   component: Button,

docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
   component: Button,

docs/snippets/common/button-story-controls-primary-variant.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
   component: Button,

docs/snippets/common/button-story-controls-radio-group.js.mdx

@@ -1,6 +1,8 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
+import { Button } from './Button';
+
 export default {
   component: Button,
   argTypes: {

docs/snippets/common/button-story-default-export.js.mdx

@@ -1,7 +1,10 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
+import { Button } from './Button';
+
 export default {
+  component: Button,
   title: 'Button',
 };
 ```

docs/snippets/common/button-story-disable-addon.js.mdx

@@ -1,8 +1,10 @@
 ```js
 // Button.stories.js |  Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
+import { Button } from './Button';
+
 export default {
-  title: 'Button',
+  component: Button,
   parameters: {
     myAddon: { disable: true }, // Disables the addon
   },

docs/snippets/common/button-story-docs-code-type.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
   component: Button,

docs/snippets/common/button-story-docspage-with-custom-component.js.mdx

@@ -3,7 +3,7 @@
 
 import { Button } from './Button';
 
-import ButtonDocumentationComponent from './CustomDocumentationComponent';
+import { CustomDocumentationComponent } from './CustomDocumentationComponent';
 
 export default {
   component: Button,
@@ -12,7 +12,7 @@ export default {
   },
   parameters: {
     docs: {
-      page: ButtonDocumentationComponent,
+      page: CustomDocumentationComponent,
     },
   },
 };

docs/snippets/common/button-story-grouped.js.mdx

@@ -1,7 +1,10 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
+import { Button } from './Button';
+
 export default {
+  component: Button,
   title: 'Design System/Atoms/Button',
 };
 ```

docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
   component: Button,

docs/snippets/common/button-story-matching-argtypes.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
   component: Button,

docs/snippets/common/button-story-onclick-action-argtype.js.mdx

@@ -1,9 +1,10 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
+  component: Button,
   argTypes: { onClick: { action: 'clicked' } },
 };
 ```

docs/snippets/common/button-story-primary-composition.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
   component: Button,

docs/snippets/common/button-story-primary-long-name.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
   component: Button,

docs/snippets/common/button-story-with-parameters.js.mdx

@@ -1,6 +1,12 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
+import { Button } from './Button';
+
+export default {
+  component: Button,
+}
+
 export const Primary = Template.bind({});
 Primary.args ={
   primary: true,

docs/snippets/common/checkbox-story-grouped.js.mdx

@@ -1,7 +1,10 @@
 ```js
 // Checkbox.stories.js | Checkbox.stories.jsx | Checkbox.stories.ts | Checkbox.stories.tsx
 
+import { CheckBox } from './Checkbox';
+
 export default {
+  component: CheckBox,
   title: 'Design System/Atoms/Checkbox',
 };
 ```

docs/snippets/common/component-story-csf-argstable-customization.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
   component: Button,

docs/snippets/common/component-story-csf-description.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
   component: Button,

docs/snippets/common/component-story-custom-args-mapping.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
-import { Button } from './button';
+import { Button } from './Button';
 import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 
 const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };

docs/snippets/common/component-story-custom-params.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js | Button.stories.ts | Button.stories.jsx | Button.stories.tsx
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
   component: Button,

docs/snippets/common/component-story-custom-source.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
   component: Button,

docs/snippets/common/component-story-disable-controls-regex.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx
 
-import YourComponent from './YourComponent';
+import { YourComponent } from './YourComponent';
 
 export default {
   component: YourComponent,

docs/snippets/common/custom-docs-page.js-component.js.mdx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-export default function CustomDocumentationComponent() {
+export function CustomDocumentationComponent() {
   return (
     <div>
       <h1>Replacing DocsPage with a custom component</h1>

docs/snippets/common/foo-bar-baz-story.js.mdx

@@ -1,7 +1,10 @@
 ```js
 // FooBar.stories.js | FooBar.stories.jsx | FooBar.stories.ts | FooBar.stories.tsx
 
+import { Foo } from './Foo';
+
 export default {
+  component:Foo,
   title: 'Foo/Bar',
 };
 

docs/snippets/common/gizmo-story-controls-customization.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Gizmo.stories.js | Gizmo.stories.jsx | Gizmo.stories.ts | Gizmo.stories.tsx
 
-import Gizmo from './Gizmo';
+import { Gizmo } from './Gizmo';
 
 export default {
   component: Gizmo,

docs/snippets/common/my-component-story-mandatory-export.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // MyComponent.story.js | MyComponent.story.jsx | MyComponent.story.ts | MyComponent.story.tsx
 
-import MyComponent from './MyComponent';
+import { MyComponent } from './MyComponent';
 
 export default {
   title: 'Path/To/MyComponent',

docs/snippets/common/my-component-story-with-storyname.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // MyComponent.story.js | MyComponent.story.jsx | MyComponent.story.ts | MyComponent.story.tsx
 
-import MyComponent from './MyComponent';
+import { MyComponent } from './MyComponent';
 
 export default {
   component: MyComponent,

docs/snippets/common/other-foo-bar-story.js.mdx

@@ -1,7 +1,10 @@
 ```js
 // FooBar.stories.js | FooBar.stories.jsx | FooBar.stories.ts | FooBar.stories.tsx
 
+import { Foo } from './Foo';
+
 export default {
+  component: Foo,
   title: 'OtherFoo/Bar',
   id: 'Foo/Bar', // Or 'foo-bar' if you prefer
 };

docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
-import Button from './Button';
+import { Button } from './Button';
 
 // To apply a set of backgrounds to all stories of Button:
 export default {

docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
-import Button from '.Button';
+import { Button } from './Button';
 
 // To apply a grid to all stories of Button:
 export default {

docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
   component: Button,

docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
   component: Button,

docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js | Button.stories.jsx |  Button.stories.ts | Button.stories.tsx
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
   component: Button,

docs/snippets/common/storybook-component-layout-param.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
   component: Button,

docs/snippets/common/storybook-customize-argtypes.js.mdx

@@ -1,8 +1,9 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
+import { Button } from './Button';
+
 export default {
-  title: 'Button',
   component: Button,
   argTypes: {
     label: {

docs/snippets/common/storybook-story-layout-param.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
 
-import Button from './Button':
+import { Button } from './Button':
 
 export default {
   component: Button,

docs/snippets/react/button-component-with-proptypes.js.mdx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import PropTypes from 'prop-types';
 
-export default function Button({ isDisabled, content }) {
+export function Button({ isDisabled, content }) {
   return (
     <button type="button" disabled={isDisabled}>
       {content}

docs/snippets/react/button-story-component-args-primary.js.mdx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
   component: Button,

docs/snippets/react/button-story-component-decorator.story-function-js.js.mdx

@@ -3,10 +3,9 @@
 
 import React from 'react';
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
-  title: 'Button',
   component: Button,
   decorators: [
     (Story) => (

docs/snippets/react/button-story-with-parameters.js.mdx

@@ -3,10 +3,9 @@
 
 import React from 'react';
 
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
-  title: 'Button',
   component: Button,
   //👇 Creates specific parameters for the story
   parameters: {

docs/snippets/react/document-screen-fetch.js.mdx

@@ -3,9 +3,9 @@
 
 import React, { useState, useEffect } from 'react';
 
-import PageLayout from './PageLayout';
-import DocumentHeader from './DocumentHeader';
-import DocumentList from './DocumentList';
+import { PageLayout } from './PageLayout';
+import { DocumentHeader } from './DocumentHeader';
+import { DocumentList } from './DocumentList';
 
 // Example hook to retrieve data from an external endpoint
 function useFetchData() {
@@ -34,7 +34,7 @@ function useFetchData() {
     data,
   };
 }
-function DocumentScreen() {
+export function DocumentScreen() {
   const { status, data } = useFetchData();
 
   const { user, document, subdocuments } = data;
@@ -52,6 +52,4 @@ function DocumentScreen() {
     </PageLayout>
   );
 }
-
-export default DocumentScreen;
 ```

docs/snippets/react/document-screen-with-graphql.js.mdx

@@ -5,9 +5,9 @@ import React from 'react';
 
 import { useQuery, gql } from '@apollo/client';
 
-import PageLayout from './PageLayout';
-import DocumentHeader from './DocumentHeader';
-import DocumentList from './DocumentList';
+import { PageLayout } from './PageLayout';
+import { DocumentHeader } from './DocumentHeader';
+import { DocumentList } from './DocumentList';
 
 const AllInfoQuery = gql`
   query AllInfo {
@@ -38,7 +38,7 @@ function useFetchInfo() {
   return { loading, error, data };
 }
 
-function DocumentScreen() {
+export function DocumentScreen() {
   const { loading, error, data } = useFetchInfo();
 
   if (loading) {
@@ -56,5 +56,4 @@ function DocumentScreen() {
     </PageLayout>
   );
 }
-export default DocumentScreen;
 ```

docs/snippets/react/documentscreen-story-msw-graphql-query.js.mdx

@@ -7,7 +7,7 @@ import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
 
 import { graphql } from 'msw';
 
-import DocumentScreen from './YourPage';
+import { DocumentScreen } from './YourPage';
 
 export default {
   component: DocumentScreen,

docs/snippets/react/documentscreen-story-msw-rest-request.js.mdx

@@ -3,7 +3,7 @@
 
 import { rest } from 'msw';
 
-import DocumentScreen from './YourPage';
+import { DocumentScreen } from './YourPage';
 
 export default {
   component: DocumentScreen,

docs/snippets/react/list-story-expanded.js.mdx

@@ -3,8 +3,8 @@
 
 import React from 'react';
 
-import List from './List';
-import ListItem from './ListItem';
+import { List } from './List';
+import { ListItem } from './ListItem';
 
 export default {
   component: List,

docs/snippets/react/list-story-reuse-data.js.mdx

@@ -3,12 +3,16 @@
 
 import React from 'react';
 
-import List from './List';
-import ListItem from './ListItem';
+import { List } from './List';
+import { ListItem } from './ListItem';
 
 //👇 We're importing the necessary stories from ListItem
 import { Selected, Unselected } from './ListItem.stories';
 
+export default {
+  component: List,
+};
+
 export const ManyItems = {
   render: (args) => (
     <List {...args}>

docs/snippets/react/list-story-starter.js.mdx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import List from './List';
+import { List } from './List';
 
 export default {
   component: List,

docs/snippets/react/list-story-template.js.mdx

@@ -3,8 +3,8 @@
 
 import React from 'react';
 
-import List from './List';
-import ListItem from './ListItem';
+import { List } from './List';
+import { ListItem } from './ListItem';
 
 //👇 Imports a specific story from ListItem stories
 import { Unchecked } from './ListItem.stories';

docs/snippets/react/list-story-unchecked.js.mdx

@@ -3,11 +3,15 @@
 
 import React from 'react';
 
-import List from './List';
+import { List } from './List';
 
 //👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
+export default {
+  component: List,
+};
+
 export const OneItem = (args) => (
   <List {...args}>
     <Unchecked {...Unchecked.args} />

docs/snippets/react/list-story-with-subcomponents.js.mdx

@@ -3,8 +3,8 @@
 
 import React from 'react';
 
-import List from './List';
-import ListItem from './ListItem';
+import { List } from './List';
+import { ListItem } from './ListItem';
 
 export default {
   component: List,

docs/snippets/react/list-story-with-unchecked-children.js.mdx

@@ -3,11 +3,14 @@
 
 import React from 'react';
 
-import List from './List';
+import { List } from './List';
 
 //👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
+export default {
+  component: List,
+};
 const Template = (args) => <List {...args} />;
 
 export const OneItem = Template.bind({});

docs/snippets/react/mock-context-container-provider.js.mdx

@@ -4,9 +4,9 @@
 import React from 'react';
 
 import ProfilePageContext from './ProfilePageContext';
-import ProfilePageContainer from './ProfilePageContainer';
-import UserPostsContainer from './UserPostsContainer';
-import UserFriendsContainer from './UserFriendsContainer';
+import { ProfilePageContainer } from './ProfilePageContainer';
+import { UserPostsContainer } from './UserPostsContainer';
+import { UserFriendsContainer } from './UserFriendsContainer';
 
 //👇 Ensure that your context value remains referentially equal between each render.
 const context = {
@@ -14,13 +14,11 @@ const context = {
   UserFriendsContainer,
 };
 
-const AppProfilePage = () => {
+export const AppProfilePage = () => {
   return (
     <ProfilePageContext.Provider value={context}>
       <ProfilePageContainer />
     </ProfilePageContext.Provider>
   );
 };
-
-export default AppProfilePage;
 ```

docs/snippets/react/mock-context-container.js.mdx

@@ -3,8 +3,8 @@
 
 import React from 'react';
 
-import ProfilePage from './ProfilePage';
-import UserPosts from './UserPosts';
+import { ProfilePage } from './ProfilePage';
+import { UserPosts } from './UserPosts';
 
 //👇 Imports a specific story from a story file
 import { normal as UserFriendsNormal } from './UserFriends.stories';

docs/snippets/react/mock-context-in-use.js.mdx

@@ -5,7 +5,7 @@ import { useContext } from 'react';
 
 import ProfilePageContext from './ProfilePageContext';
 
-const ProfilePage = ({ name, userId }) => {
+export const ProfilePage = ({ name, userId }) => {
   const { UserPostsContainer, UserFriendsContainer } = useContext(ProfilePageContext);
 
   return (
@@ -16,6 +16,4 @@ const ProfilePage = ({ name, userId }) => {
     </div>
   );
 };
-
-export default ProfilePage;
 ```

docs/snippets/react/my-component-story-basic-and-props.js.mdx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import MyComponent from './MyComponent';
+import { MyComponent } from './MyComponent';
 
 export default {
   component: MyComponent,