Docs: Snippet fixes for supported frameworks

docs/_snippets/addon-a11y-parameter-example.md

@@ -146,7 +146,7 @@ export const NoA11yFail = {
 // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
-import { Button } from './Button.svelte';
+import Button from './Button.svelte';
 
 const meta = {
   component: Button,
@@ -205,7 +205,7 @@ export const NoA11yFail: Story = {
 ```
 
 ```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
-import { Button } from './Button.svelte';
+import Button from './Button.svelte';
 
 export default {
   component: Button,

docs/_snippets/addon-a11y-parameter-remove.md

@@ -75,7 +75,7 @@ export default meta;
 // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
 import type { Meta } from '@storybook/your-framework';
 
-import { Button } from './Button.svelte';
+import Button from './Button.svelte';
 
 const meta = {
   component: Button,
@@ -104,7 +104,7 @@ export default meta;
 ```
 
 ```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
-import { Button } from './Button.svelte';
+import Button from './Button.svelte';
 
 export default {
   component: Button,

docs/_snippets/addon-a11y-parameter-todo-in-meta.md

@@ -59,14 +59,14 @@ export default {
 };
 ```
 
-```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+```svelte filename="DataTable.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
-  import Button from './Button.svelte';
+  import DataTable from './DataTable.svelte';
 
   const { Story } = defineMeta({
-    component: Button,
+    component: DataTable,
     parameters: {
       // 👇 This component's accessibility tests will not fail
       //    Instead, they display warnings in the Storybook UI
@@ -76,31 +76,31 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
+```ts filename="DataTable.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
 import type { Meta } from '@storybook/your-framework';
 
-import { Button } from './Button.svelte';
+import DataTable from './DataTable.svelte';
 
 const meta = {
-  component: Button,
+  component: DataTable,
   parameters: {
     // 👇 This component's accessibility tests will not fail
     //    Instead, they display warnings in the Storybook UI
     a11y: { test: 'todo' },
   },
-} satisfies Meta<typeof Button>;
+} satisfies Meta<typeof DataTable>;
 export default meta;
 ```
 
-```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+```svelte filename="DataTable.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
-  import Button from './Button.svelte';
+  import DataTable from './DataTable.svelte';
 
   const { Story } = defineMeta({
-    component: Button,
+    component: DataTable,
     parameters: {
       // 👇 This component's accessibility tests will not fail
       //    Instead, they display warnings in the Storybook UI
@@ -110,11 +110,11 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
-import { Button } from './Button.svelte';
+```js filename="DataTable.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
+import DataTable from './DataTable.svelte';
 
 export default {
-  component: Button,
+  component: DataTable,
   parameters: {
     // 👇 This component's accessibility tests will not fail
     //    Instead, they display warnings in the Storybook UI
@@ -193,6 +193,7 @@ const meta = preview.meta({
 
 ```js filename="DataTable.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { DataTable } from './DataTable';
 
 const meta = preview.meta({

docs/_snippets/addon-backgrounds-define-globals.md

@@ -281,6 +281,7 @@ export const OnDark = meta.story({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({

docs/_snippets/addon-backgrounds-disabled.md

@@ -140,6 +140,7 @@ export const Large = meta.story({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({

docs/_snippets/addon-backgrounds-grid.md

@@ -288,6 +288,7 @@ const meta = preview.meta({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({

docs/_snippets/addon-backgrounds-options-in-meta.md

@@ -344,6 +344,7 @@ const meta = preview.meta({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({

docs/_snippets/addon-viewport-define-globals.md

@@ -112,7 +112,7 @@ export const OnPhone = {
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
-import { Button } from './Button';
+import Button from './Button.svelte';
 
 const meta = {
   component: Button,
@@ -279,6 +279,7 @@ export const OnPhone = meta.story({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({

docs/_snippets/after-each-in-meta.md

@@ -47,7 +47,7 @@ export const Basic = meta.story({
 
   import Page from './Page.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Page,
     // 👇 Runs after each story in this file
     async afterEach(context) {
@@ -104,7 +104,7 @@ export const Basic = {
 
   import Page from './Page.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Page,
     // 👇 Runs after each story in this file
     async afterEach(context) {
@@ -264,6 +264,7 @@ export const Basic = meta.story({
 
 ```js filename="Page.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Page } from './Page';
 
 const meta = preview.meta({

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

@@ -36,7 +36,7 @@ const meta = preview.meta({
 
   import Button from './Button.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Button,
     parameters: {
       docs: {
@@ -79,7 +79,7 @@ export default {
 
   import Button from './Button.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Button,
     parameters: {
       docs: {
@@ -197,6 +197,7 @@ const meta = preview.meta({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({

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

@@ -244,6 +244,7 @@ export const Basic = meta.story({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({

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

@@ -36,7 +36,7 @@ const meta = preview.meta({
 
   import Button from './Button.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Button,
     parameters: {
       docs: {
@@ -79,7 +79,7 @@ export default {
 
   import Button from './Button.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Button,
     parameters: {
       docs: {
@@ -201,6 +201,7 @@ const meta = preview.meta({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({

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

@@ -81,7 +81,7 @@ export const Primary = meta.story({
    * Button stories
    * These stories showcase the button
    */
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Button,
     parameters: {
       docs: {
@@ -185,7 +185,7 @@ export const Primary = {
    * Button stories
    * These stories showcase the button
    */
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Button,
     parameters: {
       docs: {
@@ -467,6 +467,7 @@ export const Primary = meta.story({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({

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

@@ -43,7 +43,7 @@ export const Basic = meta.story({
 
   import Button from './Button.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Button,
   });
 </script>
@@ -95,7 +95,7 @@ export const Basic = {
 
   import Button from './Button.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Button,
   });
 </script>
@@ -240,6 +240,7 @@ export const Basic = meta.story({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({

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

@@ -43,7 +43,7 @@ export const Basic = meta.story({
 
   import Button from './Button.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Button,
   });
 </script>
@@ -95,7 +95,7 @@ export const Basic = {
 
   import Button from './Button.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Button,
   });
 </script>
@@ -240,6 +240,7 @@ export const Basic = meta.story({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({

docs/_snippets/arg-types-default-value.md

@@ -262,6 +262,7 @@ const meta = preview.meta({
 
 ```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Example } from './Example';
 
 const meta = preview.meta({

docs/_snippets/arg-types-description.md

@@ -197,6 +197,7 @@ const meta = preview.meta({
 
 ```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Example } from './Example';
 
 const meta = preview.meta({

docs/_snippets/arg-types-if.md

@@ -483,6 +483,7 @@ const meta = preview.meta({
 
 ```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Example } from './Example';
 
 const meta = preview.meta({

docs/_snippets/arg-types-in-meta.md

@@ -223,6 +223,7 @@ const meta = preview.meta({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({

docs/_snippets/arg-types-in-story.md

@@ -261,6 +261,7 @@ export const Basic = meta.story({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({

docs/_snippets/arg-types-mapping.md

@@ -211,6 +211,7 @@ const meta = preview.meta({
 
 ```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Example } from './Example';
 
 const meta = preview.meta({

docs/_snippets/arg-types-name.md

@@ -197,6 +197,7 @@ const meta = preview.meta({
 
 ```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Example } from './Example';
 
 const meta = preview.meta({

docs/_snippets/arg-types-options.md

@@ -197,6 +197,7 @@ const meta = preview.meta({
 
 ```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Example } from './Example';
 
 const meta = preview.meta({