Standardize imports

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

@@ -6,11 +6,6 @@ import type { Meta } from '@storybook/angular';
 import { Button } from './button.component';
 
 const meta: Meta<Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
   component: Button,
   parameters: {
     myAddon: { disable: true }, // Disables the addon

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

@@ -6,11 +6,6 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { Checkbox } from './checkbox.component';
 
 const meta: Meta<Checkbox> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Checkbox',
   component: Checkbox,
 };
 

docs/snippets/angular/component-story-figma-integration.ts.mdx

@@ -9,7 +9,6 @@ import { MyComponent } from './MyComponent.component';
 
 // More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
 const meta: Meta<MyComponent> = {
-  title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
 };

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

@@ -19,11 +19,6 @@ const image = {
   alt: 'my image',
 };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/angular/api/csf
- * to learn how to use render functions.
- */
 export const WithAnImage: Story = {
   render: () => ({
     props: {

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

@@ -24,11 +24,6 @@ const meta: Meta<TodoItem> = {
 export default meta;
 type Story = StoryObj<TodoItem>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/angular/api/csf
- * to learn how to use render functions.
- */
 export const Primary: Story = {
   render: (args, { loaded: { todo } }) => ({
     props: {

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

@@ -12,11 +12,6 @@ const meta: Meta<Table> = {
 export default meta;
 type Story = StoryObj<Table>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/angular/api/csf
- * to learn how to use render functions.
- */
 export const Numeric: Story = {
   render: (args) => ({
     props: args,

docs/snippets/common/api-doc-block-argtypes-parameter.ts-4-9.mdx

@@ -2,7 +2,7 @@
 // Button.stories.ts|tsx
 
 // Replace your-framework with the name of your framework
-import type { Meta } from '@storybook/<your-framework>';
+import type { Meta } from '@storybook/your-framework';
 
 import { Button } from './Button';
 

docs/snippets/common/api-doc-block-argtypes-parameter.ts.mdx

@@ -2,7 +2,7 @@
 // Button.stories.ts|tsx
 
 // Replace your-framework with the name of your framework
-import type { Meta } from '@storybook/<your-framework>';
+import type { Meta } from '@storybook/your-framework';
 
 import { Button } from './Button';
 

docs/snippets/common/api-doc-block-canvas-parameter.ts-4-9.mdx

@@ -2,7 +2,7 @@
 // Button.stories.ts|tsx
 
 // Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/<your-framework>';
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { Button } from './Button';
 

docs/snippets/common/api-doc-block-canvas-parameter.ts.mdx

@@ -2,7 +2,7 @@
 // Button.stories.ts|tsx
 
 // Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/<your-framework>';
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { Button } from './Button';
 

docs/snippets/common/api-doc-block-controls-parameter.ts-4-9.mdx

@@ -2,7 +2,7 @@
 // Button.stories.ts|tsx
 
 // Replace your-framework with the name of your framework
-import type { Meta } from '@storybook/<your-framework>';
+import type { Meta } from '@storybook/your-framework';
 
 import { Button } from './Button';
 

docs/snippets/common/api-doc-block-controls-parameter.ts.mdx

@@ -2,7 +2,7 @@
 // Button.stories.ts|tsx
 
 // Replace your-framework with the name of your framework
-import type { Meta } from '@storybook/<your-framework>';
+import type { Meta } from '@storybook/your-framework';
 
 import { Button } from './Button';
 

docs/snippets/common/api-doc-block-description-example.ts-4-9.mdx

@@ -2,7 +2,7 @@
 // Button.stories.ts|tsx
 
 // Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/<your-framework>';
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { Button } from './Button';
 

docs/snippets/common/api-doc-block-description-example.ts.mdx

@@ -2,7 +2,7 @@
 // Button.stories.ts|tsx
 
 // Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/<your-framework>';
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { Button } from './Button';
 

docs/snippets/common/api-doc-block-source-parameter.ts-4-9.mdx

@@ -2,7 +2,7 @@
 // Button.stories.ts|tsx
 
 // Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/<your-framework>';
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { Button } from './Button';
 

docs/snippets/common/api-doc-block-source-parameter.ts.mdx

@@ -2,7 +2,7 @@
 // Button.stories.ts|tsx
 
 // Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/<your-framework>';
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { Button } from './Button';
 

docs/snippets/common/api-doc-block-story-parameter.ts-4-9.mdx

@@ -2,7 +2,7 @@
 // Button.stories.ts|tsx
 
 // Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/<your-framework>';
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { Button } from './Button';
 

docs/snippets/common/api-doc-block-story-parameter.ts.mdx

@@ -2,7 +2,7 @@
 // Button.stories.ts|tsx
 
 // Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/<your-framework>';
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { Button } from './Button';
 

docs/snippets/common/button-story-baseline-with-satisfies-story-level.ts-4-9.mdx

@@ -2,7 +2,7 @@
 // Button.stories.ts|tsx
 
 // Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/<your-framework>';
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { Button } from './Button';
 

docs/snippets/common/button-story-baseline.ts.mdx

@@ -2,7 +2,7 @@
 // Button.stories.ts|tsx
 
 // Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/<your-framework>';
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { Button } from './Button';
 

docs/snippets/common/checkbox-story-csf.ts-4-9.mdx

@@ -7,11 +7,6 @@ import type { Meta, StoryObj } from '@storybook/your-framework';
 import { Checkbox } from './Checkbox';
 
 const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Checkbox',
   component: Checkbox,
 } satisfies Meta<typeof Checkbox>;
 

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

@@ -7,11 +7,6 @@ import type { Meta, StoryObj } from '@storybook/your-framework';
 import { Checkbox } from './Checkbox';
 
 const meta: Meta<typeof Checkbox> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Checkbox',
   component: Checkbox,
 };
 

docs/snippets/common/storybook-interactions-play-function.ts-4-9.mdx

@@ -2,7 +2,7 @@
 // Form.stories.ts|tsx
 
 // Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/<your-framework>';
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { userEvent, waitFor, within } from '@storybook/testing-library';
 

docs/snippets/common/storybook-interactions-play-function.ts.mdx

@@ -2,7 +2,7 @@
 // Form.stories.ts|tsx
 
 // Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/<your-framework>';
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { userEvent, waitFor, within } from '@storybook/testing-library';
 

docs/snippets/react/button-group-story.js.mdx

@@ -1,8 +1,6 @@
 ```js
 // ButtonGroup.stories.js|jsx
 
-import React from 'react';
-
 import { ButtonGroup } from '../ButtonGroup';
 
 //👇 Imports the Button stories

docs/snippets/react/button-story-click-handler-args.js.mdx

@@ -1,8 +1,6 @@
 ```js
 // Button.stories.js|jsx
 
-import React from 'react';
-
 import { action } from '@storybook/addon-actions';
 
 import { Button } from './Button';

docs/snippets/react/button-story-click-handler-simple-docs.js.mdx

@@ -1,7 +1,5 @@
 ```js
-// Button.stories.js|jsx|ts|tsx
-
-import React from 'react';
+// Button.stories.js|jsx
 
 import { action } from '@storybook/addon-actions';
 

docs/snippets/react/button-story-click-handler.js.mdx

@@ -1,8 +1,6 @@
 ```js
 // Button.stories.js|jsx
 
-import React from 'react';
-
 import { action } from '@storybook/addon-actions';
 
 import { Button } from './Button';

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

@@ -1,8 +1,6 @@
 ```js
 // Button.stories.js|jsx
 
-import React from 'react';
-
 import { Button } from './Button';
 
 export default {

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

@@ -1,8 +1,6 @@
 ```js
 // Button.stories.js|jsx
 
-import React from 'react';
-
 import { Button } from './Button';
 
 export default {

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

@@ -1,8 +1,6 @@
 ```js
 // Button.stories.js|jsx
 
-import React from 'react';
-
 import { Button } from './Button';
 
 export default {

docs/snippets/react/button-story-default-export-with-component.js.mdx

@@ -1,8 +1,6 @@
 ```js
 // Button.stories.js|jsx
 
-import React from 'react';
-
 import { Button } from './Button';
 
 export default {

docs/snippets/react/button-story-rename-story.js.mdx

@@ -1,8 +1,6 @@
 ```js
 // Button.stories.js|jsx
 
-import React from 'react';
-
 import { Button } from './Button';
 
 export default {

docs/snippets/react/button-story-using-args.js.mdx

@@ -1,8 +1,6 @@
 ```js
 // Button.stories.js|jsx
 
-import React from 'react';
-
 import { Button } from './Button';
 
 export default {

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

@@ -1,8 +1,6 @@
 ```js
 // Button.stories.js|jsx
 
-import React from 'react';
-
 import { Button } from './Button';
 
 export default {

docs/snippets/react/button-story-with-blue-args.js.mdx

@@ -1,8 +1,6 @@
 ```js
 // Button.stories.js|jsx
 
-import React from 'react';
-
 import { Button } from './Button';
 
 export default {

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

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

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

@@ -1,8 +1,6 @@
 ```js
 // Button.stories.js|jsx
 
-import React from 'react';
-
 import { Button } from './Button';
 
 export default {

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

@@ -1,8 +1,6 @@
 ```js
 // Button.stories.js|jsx
 
-import React from 'react';
-
 import { Button } from './Button';
 
 export default {

docs/snippets/react/component-story-custom-args-complex.js.mdx

@@ -1,8 +1,6 @@
 ```js
 // YourComponent.stories.js|jsx
 
-import React from 'react';
-
 import { YourComponent } from './your-component';
 
 export default {

docs/snippets/react/component-story-figma-integration.js.mdx

@@ -1,15 +1,12 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import React from 'react';
-
 import { withDesign } from 'storybook-addon-designs';
 
 import { MyComponent } from './MyComponent';
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
-  title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
 };

docs/snippets/react/component-story-figma-integration.ts-4-9.mdx

@@ -9,7 +9,6 @@ import { MyComponent } from './MyComponent';
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
-  title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
 } satisfies Meta<typeof MyComponent>;

docs/snippets/react/component-story-figma-integration.ts.mdx

@@ -9,7 +9,6 @@ import { MyComponent } from './MyComponent';
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta: Meta<typeof MyComponent> = {
-  title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
 };

docs/snippets/react/component-story-static-asset-with-import.js.mdx

@@ -1,8 +1,6 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import React from 'react';
-
 import { MyComponent } from './MyComponent';
 
 import imageFile from './static/image.png';

docs/snippets/react/component-story-with-accessibility.js.mdx

@@ -1,8 +1,6 @@
 ```js
 // Button.stories.js|jsx
 
-import React from 'react';
-
 import { Button } from './Button';
 
 export default {

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

@@ -1,8 +1,6 @@
 ```js
 // List.stories.js|jsx
 
-import React from 'react';
-
 import { List } from './List';
 import { ListItem } from './ListItem';
 

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

@@ -1,8 +1,6 @@
 ```js
 // List.stories.js|jsx
 
-import React from 'react';
-
 import { List } from './List';
 
 export default {

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

@@ -1,8 +1,6 @@
 ```js
 // List.stories.js|jsx
 
-import React from 'react';
-
 import { List } from './List';
 import { ListItem } from './ListItem';
 

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

@@ -1,8 +1,6 @@
 ```js
 // List.stories.js|jsx
 
-import React from 'react';
-
 import { List } from './List';
 
 //👇 Instead of importing ListItem, we import the stories

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

@@ -1,8 +1,6 @@
 ```js
 // List.stories.js|jsx
 
-import React from 'react';
-
 import { List } from './List';
 
 //👇 Instead of importing ListItem, we import the stories

docs/snippets/react/loader-story.js.mdx

@@ -1,8 +1,6 @@
 ```js
 // TodoItem.stories.js|jsx
 
-import React from 'react';
-
 import fetch from 'node-fetch';
 
 import { TodoItem } from './TodoItem';

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

@@ -1,8 +1,6 @@
 ```js
 // MyComponent.story.js|jsx
 
-import React from 'react';
-
 import { MyComponent } from './MyComponent';
 
 export default {

docs/snippets/react/page-story-slots.js.mdx

@@ -1,19 +1,12 @@
 ```js
 // Page.stories.js|jsx
 
-import React from 'react';
-
 import { Page } from './Page';
 
 export default {
   component: Page,
 };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/react/api/csf
- * to learn how to use render functions.
- */
 export const CustomFooter = {
   render: (args) => (
     <Page {...args}>

docs/snippets/react/table-story-fully-customize-controls.js.mdx

@@ -1,8 +1,6 @@
 ```js
 // Table.stories.js|jsx
 
-import React from 'react';
-
 import { Table } from './Table';
 import { TD } from './TableDataCell';
 import { TR } from './TableRow';

docs/snippets/react/your-component-with-decorator.js.mdx

@@ -1,8 +1,6 @@
 ```js
 // YourComponent.stories.js|jsx
 
-import React from 'react';
-
 import { YourComponent } from './YourComponent';
 
 export default {

docs/snippets/solid/button-story-click-handler-args.js.mdx

@@ -1,8 +1,6 @@
 ```js
 // Button.stories.js|jsx
 
-import solid from 'solid';
-
 import { action } from '@storybook/addon-actions';
 
 import { Button } from './Button';

docs/snippets/solid/component-story-figma-integration.js.mdx

@@ -6,7 +6,6 @@ import { withDesign } from 'storybook-addon-designs';
 import { MyComponent } from './MyComponent';
 
 export default {
-  title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
 };

docs/snippets/solid/component-story-figma-integration.ts-4-9.mdx

@@ -8,7 +8,6 @@ import { withDesign } from 'storybook-addon-designs';
 import { MyComponent } from './MyComponent';
 
 const meta = {
-  title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
 } satisfies Meta<typeof MyComponent>;

docs/snippets/solid/component-story-figma-integration.ts.mdx

@@ -8,7 +8,6 @@ import { withDesign } from 'storybook-addon-designs';
 import { MyComponent } from './MyComponent';
 
 const meta: Meta<typeof MyComponent> = {
-  title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
 };

docs/snippets/solid/component-story-with-custom-render-function.js.mdx

@@ -1,8 +1,6 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import solid from 'solid';
-
 import { Layout } from './Layout';
 
 import { MyComponent } from './MyComponent';

docs/snippets/svelte/component-story-figma-integration.js.mdx

@@ -7,16 +7,10 @@ import MyComponent from './MyComponent.svelte';
 
 // More on default export: https://storybook.js.org/docs/svelte/writing-stories/introduction#default-export
 export default {
-  title: 'FigmaExample',
   component: { MyComponent },
   decorators: [withDesign],
 };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/svelte/api/csf
- * to learn how to use render functions.
- */
 export const Example = {
   render: () => ({
     Component: MyComponent,

docs/snippets/vue/component-story-figma-integration.js.mdx

@@ -7,16 +7,10 @@ import MyComponent from './MyComponent.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
 };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/vue/api/csf
- * to learn how to use render functions.
- */
 export const Example = {
   render: () => ({
     components: { MyComponent },

docs/snippets/vue/component-story-figma-integration.ts-4-9.mdx

@@ -10,7 +10,6 @@ import MyComponent from './MyComponent.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 const meta = {
-  title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
 } satisfies Meta<typeof MyComponent>;
@@ -18,11 +17,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/vue/api/csf
- * to learn how to use render functions.
- */
 export const Example: Story = {
   render: () => ({
     components: { MyComponent },

docs/snippets/vue/component-story-figma-integration.ts.mdx

@@ -10,7 +10,6 @@ import MyComponent from './MyComponent.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 const meta: Meta<typeof MyComponent> = {
-  title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
 };
@@ -18,11 +17,6 @@ const meta: Meta<typeof MyComponent> = {
 export default meta;
 type Story = StoryObj<typeof MyComponent>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/vue/api/csf
- * to learn how to use render functions.
- */
 export const Example: Story = {
   render: () => ({
     components: { MyComponent },

docs/snippets/web-components/button-story-disable-addon.js.mdx

@@ -2,7 +2,6 @@
 // Button.stories.js
 
 export default {
-  title: 'Button',
   component: 'demo-button',
   parameters: {
     myAddon: { disable: true }, // Disables the addon

docs/snippets/web-components/button-story-disable-addon.ts.mdx

@@ -4,7 +4,6 @@
 import type { Meta } from '@storybook/web-components';
 
 const meta: Meta = {
-  title: 'Button',
   component: 'demo-button',
   parameters: {
     myAddon: { disable: true }, // Disables the addon

docs/snippets/web-components/checkbox-story-csf.ts.mdx

@@ -4,7 +4,6 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
-  title: 'Checkbox',
   component: 'checkbox',
 };
 

docs/snippets/web-components/component-story-figma-integration.js.mdx

@@ -4,7 +4,6 @@
 import { withDesign } from 'storybook-addon-designs';
 
 export default {
-  title: 'FigmaExample',
   component: 'my-component',
   decorators: [withDesign],
 };

docs/snippets/web-components/component-story-figma-integration.ts.mdx

@@ -6,7 +6,6 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { withDesign } from 'storybook-addon-designs';
 
 const meta: Meta = {
-  title: 'FigmaExample',
   component: 'my-component',
   decorators: [withDesign],
 };