Updates snippets (common, react, vue)

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

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

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

@@ -1,6 +1,7 @@
 ```tsx
 // Button.stories.ts|tsx
 
+// Replace your-framework with the name of 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

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

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

@@ -1,6 +1,7 @@
-```tsx
+```ts
 // Button.stories.ts|tsx
 
+// Replace your-framework with the name of 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

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

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

@@ -1,6 +1,7 @@
-```tsx
+```ts
 // Button.stories.ts|tsx
 
+// Replace your-framework with the name of 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

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

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

@@ -1,6 +1,7 @@
 ```ts
 // Button.stories.ts|tsx
 
+// Replace your-framework with the name of 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

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

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

@@ -1,6 +1,7 @@
 ```tsx
 // Button.stories.ts|tsx
 
+// Replace your-framework with the name of 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

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

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

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

docs/snippets/common/app-story-with-mock.ts-4-9.mdx

@@ -0,0 +1,36 @@
+```ts
+// App.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import App from './App';
+
+const meta = {
+  title: 'App',
+  component: App,
+} satisfies Meta<typeof App>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Success: Story = {
+  parameters: {
+    fetch: {
+      json: {
+        JavaScript: 3390991,
+        'C++': 44974,
+        TypeScript: 15530,
+        CoffeeScript: 12253,
+        Python: 9383,
+        C: 5341,
+        Shell: 5115,
+        HTML: 3420,
+        CSS: 3171,
+        Makefile: 189,
+      },
+    },
+  },
+};
+```

docs/snippets/common/app-story-with-mock.ts.mdx

@@ -10,8 +10,8 @@ const meta: Meta<typeof App> = {
   title: 'App',
   component: App,
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof App>;
 
 export const Success: Story = {

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

@@ -1,43 +0,0 @@
-```js
-// Badge.stories.js|jsx|ts|tsx
-
-import { Badge } from './Badge';
-
-export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Badge',
-  component: Badge,
-  argTypes: {
-    status: {
-      name: 'Badge Status',
-      description: 'Available options available to the Badge',
-      options: ['positive', 'negative', 'warning', 'error', 'neutral'],
-      table: {
-        defaultValue: {
-          summary: 'positive',
-        },
-        type: {
-          summary: 'Shows options to the Badge',
-          detail: 'Listing of available options',
-        },
-      },
-    },
-    label: {
-      name: 'Badge Content',
-      description: 'Text shown by Badge',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {
-          summary: 'The label contents',
-          detail: 'Text displayed by the Badge',
-        },
-      },
-    },
-  },
-};
-```

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

@@ -1,54 +0,0 @@
-```md
-<!-- Badge.stories.mdx -->
-
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-
-import { Badge } from './Badge';
-
-<Meta
-  title="MDX/Badge"
-  argTypes={{
-    status: {
-      name: 'Badge Status',
-      description: 'Available options available to the Badge',
-      options: [
-        'positive',
-        'negative',
-        'warning',
-        'error',
-        'neutral'
-      ],
-      table: {
-        defaultValue: {
-          summary: 'positive'
-        },
-        type: {
-          summary: 'Shows options to the Badge',
-          detail: 'Listing of available options'
-        },
-      },
-    },
-    label: {
-      name: 'Badge Content',
-      description: 'Text shown by Badge',
-      control: {
-        type: 'text'
-      },
-      table: {
-        type: {
-          summary: 'The label contents',
-          detail: 'Text displayed by the Badge'
-        }
-      }
-    }
-  }}
-  component={Badge}/>
-
-### Badge
-
-Let's define a story for our `Badge` component
-
-<ArgsTable of={Badge} />
-
-<!-- remainder story implementation -->
-```

docs/snippets/common/button-group-story-subcomponents.ts-4-9.mdx

@@ -0,0 +1,20 @@
+```ts
+// ButtonGroup.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button, ButtonGroup } from './ButtonGroup';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'ButtonGroup',
+  component: ButtonGroup,
+  subcomponents: { Button },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```

docs/snippets/common/button-group-story-subcomponents.ts.mdx

@@ -1,7 +1,8 @@
 ```ts
 // ButtonGroup.stories.ts|tsx
 
-import type { Meta } from '@storybook/react';
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
 
 import { Button, ButtonGroup } from './ButtonGroup';
 

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

@@ -2,6 +2,7 @@
 // Button.stories.js|jsx
 
 import { Button } from './Button';
+
 import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {

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

@@ -1,18 +0,0 @@
-```md
-<!-- Button.stories.mdx -->
-
-import { Meta } from '@storybook/addon-docs';
-import { withActions } from '@storybook/addon-actions/decorator';
-
-import { Button } from './Button';
-
-<Meta 
-  title="Button"
-  parameters={{
-    actions: {
-      handles: ['mouseover', 'click .btn'],
-    },
-  }} 
-  component={Button}
-  decorators={[withActions]}/>
-```

docs/snippets/common/button-story-action-event-handle.ts-4-9.mdx

@@ -0,0 +1,27 @@
+```ts
+// Button.stories.ts
+
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
+
+import { withActions } from '@storybook/addon-actions/decorator';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  parameters: {
+    actions: {
+      handles: ['mouseover', 'click .btn'],
+    },
+  },
+  decorators: [withActions],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```

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

@@ -1,12 +1,12 @@
 ```ts
 // Button.stories.ts|tsx
 
-import { Button } from './Button';
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
 
 import { withActions } from '@storybook/addon-actions/decorator';
 
-// Replace your-framework with the name of your framework
-import type { Meta } from '@storybook/your-framework';
+import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.

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

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js|jsx|ts|tsx
+// Button.stories.js|jsx
 
 import { Button } from './Button';
 

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

@@ -1,40 +0,0 @@
-```md
-<!-- Button.stories.mdx -->
-
-import { ArgsTable, Meta } from '@storybook/addon-docs';
-
-import { Button } from './Button';
-
-<Meta
-  title="Button"
-  component={Button}
-  argTypes={{
-    backgroundColor: {
-      control: 'color',
-      table: {
-        category: 'Colors',
-      },
-    },
-    primary: {
-      table: {
-        category: 'Colors',
-      },
-    },
-    label: {
-      table: {
-        category: 'Text',
-      },
-    },
-    onClick: {
-      table: {
-        category: 'Events',
-      },
-    },
-    size: {
-      table: {
-        category: 'Sizes',
-      },
-    },
-  }}
-/>
-```

docs/snippets/common/button-story-argtypes-with-categories.ts-4-9.mdx

@@ -0,0 +1,51 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    // Assigns the argTypes to the Colors category
+    backgroundColor: {
+      control: 'color',
+      table: {
+        category: 'Colors',
+      },
+    },
+    primary: {
+      table: {
+        category: 'Colors',
+      },
+    },
+    // Assigns the argType to the Text category
+    label: {
+      table: {
+        category: 'Text',
+      },
+    },
+    // Assigns the argType to the Events category
+    onClick: {
+      table: {
+        category: 'Events',
+      },
+    },
+    // Assigns the argType to the Sizes category
+    size: {
+      table: {
+        category: 'Sizes',
+      },
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```

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

@@ -0,0 +1,51 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    // Assigns the argTypes to the Colors category
+    backgroundColor: {
+      control: 'color',
+      table: {
+        category: 'Colors',
+      },
+    },
+    primary: {
+      table: {
+        category: 'Colors',
+      },
+    },
+    // Assigns the argType to the Text category
+    label: {
+      table: {
+        category: 'Text',
+      },
+    },
+    // Assigns the argType to the Events category
+    onClick: {
+      table: {
+        category: 'Events',
+      },
+    },
+    // Assigns the argType to the Sizes category
+    size: {
+      table: {
+        category: 'Sizes',
+      },
+    },
+  },
+};
+
+export default meta;
+```

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

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js|jsx|ts|tsx
+// Button.stories.js|jsx
 
 import { Button } from './Button';
 

docs/snippets/common/button-story-argtypes-with-subcategories.ts-4-9.mdx

@@ -0,0 +1,55 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    // Assigns the argTypes to the Colors category
+    backgroundColor: {
+      control: 'color',
+      table: {
+        category: 'Colors',
+        // Assigns the argTypes to a specific subcategory
+        subcategory: 'Button colors',
+      },
+    },
+    primary: {
+      table: {
+        category: 'Colors',
+        subcategory: 'Button style',
+      },
+    },
+    label: {
+      table: {
+        category: 'Text',
+        subcategory: 'Button contents',
+      },
+    },
+    // Assigns the argType to the Events category
+    onClick: {
+      table: {
+        category: 'Events',
+        subcategory: 'Button Events',
+      },
+    },
+    // Assigns the argType to the Sizes category
+    size: {
+      table: {
+        category: 'Sizes',
+      },
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```

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

@@ -1,14 +1,20 @@
-```md
-<!-- Button.stories.mdx -->
+```ts
+// Button.stories.ts|tsx
 
-import { ArgsTable, Meta, Story } from '@storybook/addon-docs';
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
 
 import { Button } from './Button';
 
-<Meta
-  title="Button"
-  component={Button}
-  argTypes={{
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    // Assigns the argTypes to the Colors category
     backgroundColor: {
       control: 'color',
       table: {
@@ -29,17 +35,21 @@ import { Button } from './Button';
         subcategory: 'Button contents',
       },
     },
+    // Assigns the argType to the Events category
     onClick: {
       table: {
         category: 'Events',
         subcategory: 'Button Events',
       },
     },
+    // Assigns the argType to the Sizes category
     size: {
       table: {
         category: 'Sizes',
       },
     },
-  }}
-/>
-```
+  },
+};
+
+export default meta;
+```

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

@@ -0,0 +1,27 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/<your-framework>';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Example = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+} satisfies Story;
+```

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

@@ -0,0 +1,15 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/<your-framework>';
+
+import { Button } from './Button';
+
+const meta = {
+  title: 'Button',
+  component: Button,
+} satisfies Meta<typeof Button>; // 👈 Satisfies operator being used for stricter type checking.
+
+export default meta;
+```

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

@@ -1,7 +1,8 @@
-```tsx
+```ts
 // Button.stories.ts|tsx
 
-import type { Meta, StoryObj } from '@storybook/react';
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/<your-framework>';
 
 import { Button } from './Button';
 
@@ -12,18 +13,15 @@ const meta: Meta<typeof Button> = {
    */
   title: 'Button',
   component: Button,
-};
+} satisfies Meta<typeof Button>;
 
 export default meta;
 type Story = StoryObj<typeof Button>;
 
+//👇 Throws a type error it the args don't match the component props
 export const Primary: Story = {
-  decorators: [
-    (Story) => (
-      <div style={{ margin: '3em' }}>
-        <Story />
-      </div>
-    ),
-  ],
+  args: {
+    primary: true,
+  },
 };
 ```

docs/snippets/common/button-story-controls-primary-variant.ts-4-9.mdx

@@ -1,7 +1,8 @@
-```tsx
+```ts
 // Button.stories.ts|tsx
 
-import type { Meta, StoryObj } from '@storybook/react';
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { Button } from './Button';
 
@@ -11,7 +12,6 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Button',
-
   component: Button,
 } satisfies Meta<typeof Button>;
 
@@ -19,12 +19,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
-  decorators: [
-    (Story) => (
-      <div style={{ margin: '3em' }}>
-        <Story />
-      </div>
-    ),
-  ],
+  args: {
+    variant: 'primary',
+  },
 };
 ```

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

@@ -1,11 +1,11 @@
 ```ts
 // Button.stories.ts|tsx
 
-import { Button } from './Button';
-
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
+import { Button } from './Button';
+
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading

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

@@ -1,18 +0,0 @@
-```md
-<!-- Button.stories.mdx -->
-
-import { Meta } from '@storybook/addon-docs';
-
-import { Button } from './Button';
-
-<Meta
-  title="Button"
-  component={Button}
-  argTypes={{
-    variant: {
-      options: ['primary', 'secondary'],
-      control: { type: 'radio' }
-    }
-  }}
-/>
-```

docs/snippets/common/button-story-controls-radio-group.ts-4-9.mdx

@@ -0,0 +1,25 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```

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

@@ -1,11 +1,11 @@
 ```ts
 // Button.stories.ts|tsx
 
-import { Button } from './Button';
-
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
+import { Button } from './Button';
+
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading

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

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js|jsx|ts|tsx
+// Button.stories.js|jsx
 
 import { Button } from './Button';
 

docs/snippets/common/button-story-default-export.ts-4-9.mdx

@@ -1,17 +1,19 @@
-```js
-// Button.stories.js|jsx
+```ts
+// Button.stories.ts
 
-import React from 'react';
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
 
 import { Button } from './Button';
 
-export default {
+const meta = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-  decorators: [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>],
-};
+} satisfies Meta<typeof Button>;
+
+export default meta;
 ```

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

@@ -1,11 +1,11 @@
 ```ts
 // Button.stories.ts
 
-import { Button } from './Button';
-
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
+import { Button } from './Button';
+
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading

docs/snippets/common/button-story-disable-addon.ts-4-9.mdx

@@ -0,0 +1,22 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  parameters: {
+    myAddon: { disable: true }, // Disables the addon
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```

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

@@ -1,11 +1,11 @@
 ```ts
 // Button.stories.ts|tsx
 
-import { Button } from './Button';
-
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
+import { Button } from './Button';
+
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading

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

@@ -1,22 +0,0 @@
-```js
-// Button.stories.js|jsx|ts|tsx
-
-import { Button } from './Button';
-
-export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
-  component: Button,
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-};
-```

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

@@ -1,26 +0,0 @@
-```js
-// Button.stories.js|jsx|ts|tsx
-
-import { Button } from './Button';
-
-export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
-  component: Button,
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-  parameters: {
-    docs: {
-      source: {
-        type: 'code',
-      },
-    },
-  },
-};
-
-// Remainder story implementation
-```

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

@@ -1,24 +0,0 @@
-```js
-// Button.stories.js|jsx|ts|tsx
-
-import { Button } from './Button';
-
-import { CustomDocumentationComponent } from './CustomDocumentationComponent';
-
-export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
-  component: Button,
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-  parameters: {
-    docs: {
-      page: CustomDocumentationComponent,
-    },
-  },
-};
-```

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

@@ -1,48 +0,0 @@
-```js
-// Button.stories.js|jsx|ts|tsx
-
-import { Button } from './Button';
-
-import CustomMDXDocumentation from './Custom-MDX-Documentation.mdx';
-
-export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
-  component: Button,
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-  parameters: {
-    docs: {
-      page: CustomMDXDocumentation,
-    },
-  },
-};
-
-export const Primary = {
-  args:{
-    backgroundColor: 'primary',
-  },
-};
-
-export const Secondary = {
-  args:{
-     backgroundColor: 'secondary',
-  },
-};
-
-export const Large =  = {
-  args:{
-    size:'large',
-  }
-};
-
-export const Small = {
-  args:{
-    size:'small',
-  },
-};
-```

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

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js|jsx|ts|tsx
+// Button.stories.js|jsx
 
 import { Button } from './Button';
 

docs/snippets/common/button-story-grouped.ts-4-9.mdx

@@ -0,0 +1,19 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Design System/Atoms/Button',
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```

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

@@ -1,11 +1,11 @@
 ```ts
 // Button.stories.ts|tsx
 
-import { Button } from './Button';
-
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
+import { Button } from './Button';
+
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading

docs/snippets/common/button-story-hide-nocontrols-warning.ts-4-9.mdx

@@ -0,0 +1,26 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Large: Story = {
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+};
+```

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

@@ -1,11 +1,11 @@
 ```ts
 // Button.stories.ts|tsx
 
-import { Button } from './Button';
-
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
+import { Button } from './Button';
+
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading

docs/snippets/common/button-story-hoisted.ts-4-9.mdx

@@ -0,0 +1,23 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta, Storybook } from '@storybook/your-framework';
+
+import { Button as ButtonComponent } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Design System/Atoms/Button',
+  component: ButtonComponent,
+} satisfies Meta<typeof ButtonComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// This is the only named export in the file, and it matches the component name
+export const Button: Story = {};
+```

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

@@ -1,11 +1,11 @@
 ```ts
 // Button.stories.ts|tsx
 
-import { Button as ButtonComponent } from './Button';
-
 // Replace your-framework with the name of your framework
 import type { Meta, Storybook } from '@storybook/your-framework';
 
+import { Button as ButtonComponent } from './Button';
+
 const meta: Meta<typeof ButtonComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading

docs/snippets/common/button-story-hypothetical-example.ts-4-9.mdx

@@ -0,0 +1,34 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+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/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+export const Sample: Story = {
+  render: () => ({
+    template: '<button :label=label />',
+    data: {
+      label: 'hello button',
+    },
+  }),
+};
+```

docs/snippets/common/button-story-hypothetical-example.ts.mdx

@@ -0,0 +1,34 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn how to use render functions.
+ */
+export const Sample: Story = {
+  render: () => ({
+    template: '<button :label=label />',
+    data: {
+      label: 'hello button',
+    },
+  }),
+};
+```

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

@@ -1,14 +0,0 @@
-```md
-<!-- Button.stories.mdx -->
-
-import { Meta } from '@storybook/addon-docs';
-
-import { Button } from './Button';
-
-<Meta 
-  title="Button"
-  component={Button} 
-  parameters={{ 
-    actions: { argTypesRegex: '^on.\*' } 
-  }}/>
-```

docs/snippets/common/button-story-matching-argtypes.ts-4-9.mdx

@@ -1,25 +1,20 @@
-```tsx
+```ts
 // Button.stories.ts|tsx
 
-import type { Meta } from '@storybook/react';
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
 
 import { Button } from './Button';
 
-const meta: Meta<typeof Button> = {
+const meta = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-  decorators: [
-    (Story) => (
-      <div style={{ margin: '3em' }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
+  parameters: { actions: { argTypesRegex: '^on.*' } },
+} satisfies Meta<typeof Button>;
 
 export default meta;
 ```

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

@@ -1,11 +1,11 @@
 ```ts
 // Button.stories.ts|tsx
 
-import { Button } from './Button';
-
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
+import { Button } from './Button';
+
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading

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

@@ -1,9 +0,0 @@
-```md
-<!-- Button.stories.mdx -->
-
-import { Meta } from '@storybook/addon-docs';
-
-import { Button } from './Button';
-
-<Meta title="Button" argTypes={{ onClick: { action: 'clicked' } }} component={Button} />
-```

docs/snippets/common/button-story-onclick-action-argtype.ts-4-9.mdx

@@ -1,7 +1,8 @@
-```tsx
+```ts
 // Button.stories.ts|tsx
 
-import type { Meta } from '@storybook/react';
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
 
 import { Button } from './Button';
 
@@ -11,16 +12,8 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Button',
-
   component: Button,
-
-  decorators: [
-    (Story) => (
-      <div style={{ margin: '3em' }}>
-        <Story />
-      </div>
-    ),
-  ],
+  argTypes: { onClick: { action: 'clicked' } },
 } satisfies Meta<typeof Button>;
 
 export default meta;

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

@@ -1,11 +1,11 @@
 ```ts
 // Button.stories.ts|tsx
 
-import { Button } from './Button';
-
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
+import { Button } from './Button';
+
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading

docs/snippets/common/button-story-primary-composition.ts-4-9.mdx

@@ -0,0 +1,34 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    primary: false,
+  },
+};
+```

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

@@ -1,11 +1,11 @@
 ```ts
 // Button.stories.ts|tsx
 
-import { Button } from './Button';
-
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
+import { Button } from './Button';
+
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading

docs/snippets/common/button-story-primary-long-name.ts-4-9.mdx

@@ -0,0 +1,34 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const PrimaryLongName: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Primary with a really long name',
+  },
+};
+```

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

@@ -1,11 +1,11 @@
 ```ts
 // Button.stories.ts|tsx
 
-import { Button } from './Button';
-
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
+import { Button } from './Button';
+
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading

docs/snippets/common/button-story-project-args-theme.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// preview.js
+// .storybook/preview.js
 
 export default {
   // All stories expect a theme arg

docs/snippets/common/button-story-project-args-theme.ts.mdx

@@ -0,0 +1,16 @@
+```ts
+// .storybook/preview.ts
+
+// Replace your-framework with the framework you are using (e.g., react, vue3)
+import { Preview } from '@storybook/your-framework';
+
+const preview: Preview = {
+  // All stories expect a theme arg
+  argTypes: { theme: { control: 'select', options: ['light', 'dark'] } },
+
+  // The default value of the theme arg to all stories
+  args: { theme: 'light' },
+};
+
+export default preview;
+```

docs/snippets/common/button-story-remix-docspage.js.mdx

@@ -1,40 +0,0 @@
-```js
-// Button.stories.js|jsx
-
-import React from 'react';
-
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  ArgsTable,
-  Stories,
-  PRIMARY_STORY,
-} from '@storybook/addon-docs';
-
-import { Button } from './Button';
-
-export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
-  component: Button,
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Title />
-          <Subtitle />
-          <Description />
-          <Primary />
-          <ArgsTable story={PRIMARY_STORY} />
-          <Stories />
-        </>
-      ),
-    },
-  },
-};
-```

docs/snippets/common/button-story-remix-docspage.ts.mdx

@@ -1,42 +0,0 @@
-```ts
-// Button.stories.ts|tsx
-
-import type { Meta } from '@storybook/react';
-
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  ArgsTable,
-  Stories,
-  PRIMARY_STORY,
-} from '@storybook/addon-docs';
-
-import { Button } from './Button';
-
-const meta: Meta<typeof Button> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
-  component: Button,
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Title />
-          <Subtitle />
-          <Description />
-          <Primary />
-          <ArgsTable story={PRIMARY_STORY} />
-          <Stories />
-        </>
-      ),
-    },
-  },
-};
-
-export default meta;
-```

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

@@ -0,0 +1,19 @@
+```ts
+// CheckBox.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
+
+import { CheckBox } from './Checkbox';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Design System/Atoms/Checkbox',
+  component: CheckBox,
+} satisfies Meta<typeof CheckBox>;
+
+export default meta;
+```

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

@@ -1,11 +1,11 @@
 ```ts
 // CheckBox.stories.ts|tsx
 
-import { CheckBox } from './Checkbox';
-
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
+import { CheckBox } from './Checkbox';
+
 const meta: Meta<typeof CheckBox> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading

docs/snippets/common/component-story-auto-title.csf3-story-ts.ts-4-9.mdx

@@ -0,0 +1,24 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { MyComponent } from './MyComponent';
+
+/**
+ * Story written in CSF 3.0 with auto title generation
+ * See https://storybook.js.org/docs/7.0/react/api/csf
+ * to learn more about it.
+ */
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { message: 'Hello world!' },
+};
+```

docs/snippets/common/component-story-auto-title.csf3-story-ts.ts.mdx

@@ -1,11 +1,11 @@
 ```ts
 // MyComponent.stories.ts|tsx
 
-import { MyComponent } from './MyComponent';
-
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
+import { MyComponent } from './MyComponent';
+
 /**
  * Story written in CSF 3.0 with auto title generation
  * See https://storybook.js.org/docs/7.0/react/api/csf

docs/snippets/common/component-story-conditional-controls-mutual-exclusion.ts-4-9.mdx

@@ -0,0 +1,30 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    // Button can be passed a label or an image, not both
+    label: {
+      control: 'text',
+      if: { arg: 'image', truthy: false },
+    },
+    image: {
+      control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
+      if: { arg: 'label', truthy: false },
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```

docs/snippets/common/component-story-conditional-controls-mutual-exclusion.ts.mdx

@@ -1,11 +1,11 @@
 ```ts
 // Button.stories.ts|tsx
 
-import { Button } from './Button';
-
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
+import { Button } from './Button';
+
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading

docs/snippets/common/component-story-conditional-controls-toggle.ts-4-9.mdx

@@ -0,0 +1,27 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    label: { control: 'text' }, // always shows
+    advanced: { control: 'boolean' },
+    // Below are only included when advanced is true
+    margin: { control: 'number', if: { arg: 'advanced' } },
+    padding: { control: 'number', if: { arg: 'advanced' } },
+    cornerRadius: { control: 'number', if: { arg: 'advanced' } },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```

docs/snippets/common/component-story-conditional-controls-toggle.ts.mdx

@@ -1,11 +1,11 @@
 ```ts
 // Button.stories.ts|tsx
 
-import { Button } from './Button';
-
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
+import { Button } from './Button';
+
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading

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

@@ -1,7 +0,0 @@
-```js
-// ./storybook/main.js
-
-export default {
-  stories: [{ directory: '../src', files: '*.story.tsx', titlePrefix: 'Foo' }],
-};
-```

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

@@ -1,31 +0,0 @@
-```js
-// Button.stories.js|jsx|ts|tsx
-
-import { Button } from './Button';
-
-export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
-  component: Button,
-  parameters: {
-    docs: {
-      description: {
-        component: 'Some component _markdown_',
-      },
-    },
-  },
-};
-
-export const WithStoryDescription = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'Some story **markdown**',
-      },
-    },
-  },
-};
-```

docs/snippets/common/component-story-custom-args-mapping.ts-4-9.mdx

@@ -0,0 +1,39 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    arrow: {
+      options: Object.keys(arrows), // An array of serializable values
+      mapping: arrows, // Maps serializable option values to complex arg values
+      control: {
+        type: 'select', // Type 'select' is automatically inferred when 'options' is defined
+        labels: {
+          // 'labels' maps option values to string labels
+          ArrowUp: 'Up',
+          ArrowDown: 'Down',
+          ArrowLeft: 'Left',
+          ArrowRight: 'Right',
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```

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

@@ -1,11 +1,11 @@
 ```ts
 // Button.stories.ts|tsx
 
-import { Button } from './Button';
-
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
+import { Button } from './Button';
+
 import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 
 const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };

docs/snippets/common/component-story-custom-params.ts-4-9.mdx

@@ -0,0 +1,36 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+        { name: 'blue', value: '#00f' },
+      ],
+    },
+  },
+};
+```

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

@@ -1,11 +1,11 @@
 ```ts
 // Button.stories.ts|tsx
 
-import { Button } from './Button';
-
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
+import { Button } from './Button';
+
 const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading

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

@@ -1,26 +0,0 @@
-```js
-// Button.stories.js|jsx|ts|tsx
-
-import { Button } from './Button';
-
-export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
-  component: Button,
-};
-
-export const CustomSource = {
-  parameters: {
-    docs: {
-      source: {
-        code: 'Your code snippet goes here.',
-        language: 'yml',
-        type: 'auto',
-      },
-    },
-  },
-};
-```

docs/snippets/common/component-story-disable-controls-alt.mdx.mdx

@@ -1,16 +0,0 @@
-```md
-<!-- YourComponent.stories.mdx -->
-
-import { Meta } from '@storybook/addon-docs';
-
-import { YourComponent } from './your-component'
-
-<Meta 
-  title='YourComponent' 
-  argTypes={{
-    foo:{
-      control: false
-    }
-  }}
-  component={YourComponent} />
-```

docs/snippets/common/component-story-disable-controls-alt.ts-4-9.mdx

@@ -1,21 +1,24 @@
-```tsx
+```ts
 // YourComponent.stories.ts|tsx
 
-import type { Meta } from '@storybook/react';
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
 
 import { YourComponent } from './YourComponent';
 
-// Replacing the <Story/> element with a Story function is also a good way of writing decorators.
-// Useful to prevent the full remount of the component's story.
 const meta = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',
-
   component: YourComponent,
-  decorators: [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>],
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      control: false,
+    },
+  },
 } satisfies Meta<typeof YourComponent>;
 
 export default meta;

docs/snippets/common/component-story-disable-controls-alt.ts.mdx

@@ -1,11 +1,11 @@
 ```ts
 // YourComponent.stories.ts|tsx
 
-import { YourComponent } from './YourComponent';
-
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
+import { YourComponent } from './YourComponent';
+
 const meta: Meta<typeof YourComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading

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

@@ -1,45 +0,0 @@
-```md
-<!-- YourComponent.stories.mdx -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import { YourComponent } from './YourComponent';
-
-<Meta title="YourComponent" component={YourComponent} />
-
-<Story 
-  name="Array Include"
-  parameters={{ 
-    controls: { 
-      include: ['foo', 'bar'] 
-    } 
-  }}
-  render={() => ({ // Your implementation here })} />
-
-<Story 
-  name="Regex Include"
-  parameters={{ 
-    controls: { include: 
-      /^hello*/ 
-    } 
-  }}
-  render={() => ({ // Your implementation here })} />
-
-<Story 
-  name="Array Exclude"
-  parameters={{ 
-    controls: { 
-      exclude: ['foo', 'bar'] 
-    } 
-  }}
-  render={() => ({ // Your implementation here })} />
-
-<Story 
-  name="Regex Exclude"
-  parameters={{ 
-    controls: { 
-      exclude: /^hello*/ 
-    } 
-  }}
-  render={() => ({ // Your implementation here })} />
-```

docs/snippets/common/component-story-disable-controls-regex.ts-4-9.mdx

@@ -0,0 +1,44 @@
+```ts
+// YourComponent.stories.ts|tsx
+
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { YourComponent } from './YourComponent';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
+  component: YourComponent,
+} satisfies Meta<typeof YourComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ArrayInclude: Story = {
+  parameters: {
+    controls: { include: ['foo', 'bar'] },
+  },
+};
+
+export const RegexInclude: Story = {
+  parameters: {
+    controls: { include: /^hello*/ },
+  },
+};
+
+export const ArrayExclude: Story = {
+  parameters: {
+    controls: { exclude: ['foo', 'bar'] },
+  },
+};
+
+export const RegexExclude: Story = {
+  parameters: {
+    controls: { exclude: /^hello*/ },
+  },
+};
+```

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

@@ -1,11 +1,11 @@
 ```ts
 // YourComponent.stories.ts|tsx
 
-import { YourComponent } from './YourComponent';
-
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
+import { YourComponent } from './YourComponent';
+
 const meta: Meta<typeof YourComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading

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

@@ -1,18 +0,0 @@
-```md
-<!-- YourComponent.stories.mdx -->
-
-import { Meta } from '@storybook/addon-docs';
-
-import { YourComponent } from './YourComponent'
-
-<Meta 
-  title="YourComponent"
-  component={YourComponent} 
-  argTypes={{
-    foo: {
-      table: {
-        disable: true,
-      }
-    }
-  }} />
-```

docs/snippets/common/component-story-disable-controls.ts-4-9.mdx

@@ -1,21 +1,27 @@
-```tsx
+```ts
 // YourComponent.stories.ts|tsx
 
-import type { Meta } from '@storybook/react';
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
 
 import { YourComponent } from './YourComponent';
 
-// Replacing the <Story/> element with a Story function is also a good way of writing decorators.
-// Useful to prevent the full remount of the component's story.
-const meta: Meta<typeof YourComponent> = {
+const meta = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',
   component: YourComponent,
-  decorators: [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>],
-};
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+} satisfies Meta<typeof YourComponent>;
 
 export default meta;
 ```

docs/snippets/common/component-story-disable-controls.ts.mdx

@@ -1,11 +1,11 @@
 ```ts
 // YourComponent.stories.ts|tsx
 
-import { YourComponent } from './YourComponent';
-
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
 
+import { YourComponent } from './YourComponent';
+
 const meta: Meta<typeof YourComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading

docs/snippets/common/component-story-mdx-argstable-block-for-component.with-component.mdx.mdx

@@ -1,11 +0,0 @@
-```md
-<!-- MyComponent.stories.mdx -->
-
-import { ArgsTable } from '@storybook/addon-docs';
-
-import { MyComponent } from './MyComponent';
-
-# My Component!
-
-<ArgsTable of={MyComponent} />
-```

docs/snippets/common/component-story-mdx-argstable-block-for-story.with-story.mdx.mdx

@@ -1,17 +0,0 @@
-```md
-<!-- MyComponent.stories.mdx -->
-
-import { ArgsTable, Meta, Story } from '@storybook/addon-docs';
-
-import { MyComponent } from './MyComponent';
-
-<Meta title="MyComponent" component={MyComponent} />
-
-# My Component!
-
-<Story 
-  name="My Story"
-  render={() => ({ // Your implementation here })} />
-
-<ArgsTable story="My Story" />
-```

docs/snippets/common/component-story-mdx-argtypes.mdx.mdx

@@ -1,28 +0,0 @@
-```md
-<!-- Button.stories.mdx -->
-
-import { Meta } from '@storybook/addon-docs';
-
-import { Button } from './Button';
-
-<!-- Add new argTypes to your Story or further adjust them -->
-
-<Meta
-  title="Button"
-  component={Button}
-  argTypes={{
-    label: {
-      description: 'Overwritten description',
-      table: {
-        type: {
-          summary: 'Something short',
-          detail: 'Something really really long',
-        },
-      },
-      control: {
-        type: null,
-      },
-    },
-  }}
-/>
-```

docs/snippets/common/component-story-mdx-decorators-params.mdx.mdx

@@ -1,16 +0,0 @@
-```md
-<!-- MyComponent.stories.mdx -->
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import { MyComponent } from './MyComponent';
-
-<Meta
-  title="MyComponent"
-  decorators={[ ... ]}
-  parameters={{ ... }}
-  component={MyComponent}
-/>
-
-<Story name="story" decorators={[ ... ]} parameters={{ ... }} render={() => ({ // Your implementation here })} />
-```

docs/snippets/common/component-story-mdx-dedent.mdx.mdx

@@ -1,24 +0,0 @@
-```md
-<!-- MyComponent.stories.mdx -->
-
-import { Source } from '@storybook/addon-docs';
-
-import { dedent } from 'ts-dedent';
-
-## With code snippet
-
-<Source
-  language='css'
-  dark
-  format={false}
-  code={dedent`
-     .container {
-       display: grid | inline-grid;
-     }
-  `}
-/>
-
-## With Story Id
-
-<Source id="example-mycomponent--starter" />
-```

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

@@ -1,19 +0,0 @@
-```md
-<!-- Button.stories.mdx -->
-
-import { Description } from '@storybook/addon-docs';
-
-import { dedent } from 'ts-dedent';
-
-import { Button } from './Button';
-
-<Description of={Button} />
-
-<Description markdown={dedent`
-  
-  ## Custom description
-
-  Insert fancy markdown here.
-
-`}/>
-```

docs/snippets/common/component-story-sort-controls.mdx.mdx

@@ -1,16 +0,0 @@
-```md
-<!-- YourComponent.stories.mdx -->
-
-import { Meta } from '@storybook/addon-docs';
-
-import { YourComponent } from './your-component'
-
-<Meta 
-  title="My Story"
-  component={YourComponent}
-  parameters={{ 
-    controls: { 
-      sort: 'requiredFirst',
-    } 
-  }} />
-```