Update examples

storybookjs · May 20, 2024 · 2fe01cb · 2fe01cb
1 parent 20c926f
commit 2fe01cb
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 70 deletions.
diff --git a/stories/Actions.stories.svelte b/stories/Actions.stories.svelte
@@ -1,19 +1,15 @@
 <script context="module">
   import { action } from '@storybook/addon-actions';
 
-  export const meta = {
+  import { defineMeta } from '../src/index';
+
+  const { Story, meta } = defineMeta({
     title: 'Addon/Actions',
     parameters: {
       controls: { disable: true },
       interactions: { disable: true },
     },
-  };
-</script>
-
-<script>
-  import { defineComponent } from '../src/index';
-
-  const { Story } = defineComponent(meta);
+  });
 </script>
 
 <Story>

diff --git a/stories/Controls.stories.svelte b/stories/Controls.stories.svelte
@@ -1,25 +1,21 @@
 <script context="module">
   import Controls from './Controls.svelte';
 
+  import { defineMeta } from '../src/index';
+
   /**
    * This is an visual example for using/testing the args table
    * @type {import("@storybook/svelte").Meta<Controls>}
    */
-  export const meta = {
+  const { Story, meta } = defineMeta({
     title: 'Addon/Controls',
     component: Controls,
     parameters: {
       actions: { disable: true },
       interactions: { disable: true },
     },
     tags: ['autodocs'],
-  };
-</script>
-
-<script>
-  import { defineComponent } from '../src/index';
-
-  const { Story } = defineComponent(meta);
+  });
 </script>
 
 <Story

diff --git a/stories/Example.stories.svelte b/stories/Example.stories.svelte
@@ -1,33 +1,31 @@
 <script context="module" lang="ts">
   import { action } from '@storybook/addon-actions';
-  import type { Meta } from "@storybook/svelte";
+
+  import { defineMeta, setTemplate } from "../src/index.js";
 
   import Example from './Example.svelte';
 
-  // Description set explicitly in the comment above `export const meta`
-  export const meta = {
-    title: 'Example',
+  // Description set explicitly in the comment above `defineMeta`
+  const { Story, meta: m } = defineMeta({
+  ...({ title: 'Example damn'}),
     component: Example,
     tags: ['autodocs'],
     args: {
       onclick: action("onclick"),
       onmouseenter: action("onmouseenter"),
       onmouseleave: action("onmouseleave"),
     },
-  } satisfies Meta<Example>;
+  });
 </script>
 
 <script lang="ts">
-  import { defineComponent, setTemplate } from "../src/index.js";
 
   let count = $state(0);
 
   function handleClick() {
     count += 1;
   }
 
-  const { Story } = defineComponent(meta);
-
   setTemplate(render);
 </script>
 

diff --git a/stories/Interactions.stories.svelte b/stories/Interactions.stories.svelte
@@ -1,38 +1,33 @@
 <script context="module">
   import Interactions from './Interactions.svelte';
+  import { expect } from '@storybook/test';
+  import { userEvent, within } from '@storybook/test';
+  import { tick } from 'svelte';
 
-  export const meta = {
+  import { defineMeta } from '../src/index';
+
+  const { Story, meta } = defineMeta({
     title: 'Addon/Interactions',
     component: Interactions,
     parameters: {
       actions: { disable: true },
       controls: { disable: true },
     },
-  };
-</script>
-
-<script>
-  import { expect } from '@storybook/test';
-  import { userEvent, within } from '@storybook/test';
-  import { tick } from 'svelte';
-
-  import { defineComponent } from '../src/index';
-
-  const { Story } = defineComponent(meta);
+  });
 
   async function play({ canvasElement }) {
     const canvas = within(canvasElement);
     const count = await canvas.findByTestId('count');
 
     await userEvent.click(await canvas.findByText('Increment'));
-
     expect(count.textContent).toEqual('You clicked 1 times');
 
     await userEvent.click(await canvas.findByText('Decrement'));
-
     expect(count.textContent).toEqual('You clicked 0 times');
   }
+</script>
 
+<script>
   let i = $state(0);
 </script>
 
@@ -51,12 +46,10 @@
 
     i++;
     await tick();
-
     expect(p.textContent).toEqual('1');
 
     i--;
     await tick();
-
     expect(p.textContent).toEqual('0');
   }}
 >

diff --git a/stories/ImportStoryAs.stories.svelte → stories/TestOverrides.stories.svelte b/stories/ImportStoryAs.stories.svelte → stories/TestOverrides.stories.svelte
@@ -1,19 +1,15 @@
 <script context="module">
-  export const meta = {
-    title: 'Import Story As',
+  import { defineMeta as d } from '../src/index';
+
+  const { Story: S, meta: m } = d({
+    title: 'Test overrides',
     args: {
       message: "Hello from Storybook for Svelte using CSF!",
     },
     argTypes: {
       text: { control: "text" },
     },
-  };
-</script>
-
-<script>
-  import { defineComponent } from '../src/index';
-
-  const { Story: S } = defineComponent(meta);
+  });
 </script>
 
 <S>

diff --git a/stories/context.stories.svelte b/stories/context.stories.svelte
@@ -1,20 +1,16 @@
 <script context="module">
-  export const meta = {
+  import { defineMeta } from '../src/index';
+
+  const { Story, meta } = defineMeta({
     title: 'StoryContext',
     parameters: {
       controls: { disable: true },
       interactions: { disable: true },
     },
-  };
-</script>
-
-<script>
-  import { defineComponent } from '../src/index';
-
-  const { Story } = defineComponent(meta);
+  });
 </script>
 
-<Story name="Example">
+<Story>
   {#snippet children({ context })}
     {#each Object.entries(context) as [key, value]}
       {#if typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === "function"}

diff --git a/stories/templates.stories.svelte b/stories/templates.stories.svelte
@@ -1,31 +1,29 @@
 <script context="module" lang="ts">
-  import type { Meta } from '@storybook/svelte';
+  import { defineMeta, type Template } from '../src/index.js';
 
   import Text from './Text.svelte';
 
   /**
    * Demonstration on how to use multiple templates in one stories file,
    * powered by Svelte's **snippets**.
    */
-  export const meta: Meta<Text> = {
+  const { Story, meta } = defineMeta({
     title: 'Templates',
+    component: Text,
     tags: ['autodocs'],
-  };
+    args: { text: "" },
+    argsTypes: {
+      text: { control: "text" },
+    },
+  });
 </script>
 
-<script lang="ts">
-  import { defineComponent, type Template } from '../src/index.js';
-
-  const { Story } = defineComponent(meta);
-</script>
-
-
-{#snippet template1({ args }: Template<Text>)}
+{#snippet template1({ args }: Template<typeof meta>)}
   <h2 style="color: lightgreen">Template 1</h2>
   <p>{args.text}</p>
 {/snippet}
 
-{#snippet template2({ args }: Template<Text>)}
+{#snippet template2({ args }: Template<typeof meta>)}
   <h2 style="color: fuchsia">Template 2</h2>
   <hr>
   <p>{args.text}</p>