Docs: Minor fixes to Svelte CSF

GesuBackups · Nov 15, 2024 · 5b10679 · 5b10679
1 parent c7569a6
commit 5b10679
Show file tree

Hide file tree

Showing 36 changed files with 98 additions and 156 deletions.
diff --git a/docs/_snippets/arg-types-in-story.md b/docs/_snippets/arg-types-in-story.md
@@ -52,7 +52,7 @@ const meta = {
 
 export default meta;
 
-type Story = StoryObj<typeof Meta>;
+type Story = StoryObj<typeof meta>;
 
 export const Basic = {
   argTypes: {
@@ -126,4 +126,3 @@ export const Basic: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/button-group-story.md b/docs/_snippets/button-group-story.md
@@ -175,28 +175,12 @@ export const Pair: Story = {
 </script>
 
 <Story
-  name="Primary"
+  name="Pair"
   args={{
     buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
     orientation: 'horizontal',
   }}
 />
-
-<Story
-  name="Secondary"
-  args={{
-    backgroundColor: '#ff0',
-    label: '😄👍😍💯',
-   }}
-/>
-
-<Story
-  name="Tertiary"
-  args={{
-    backgroundColor:'#ff0',
-    label: '📚📕📈🤓',
-  }}
-/>
 ```
 
 ```js filename="ButtonGroup.stories.js" renderer="svelte" language="js" tabTitle="CSF"
@@ -232,28 +216,12 @@ export const Pair = {
 </script>
 
 <Story
-  name="Primary"
+  name="Pair"
   args={{
     buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
     orientation: 'horizontal',
   }}
 />
-
-<Story
-  name="Secondary"
-  args={{
-    backgroundColor: '#ff0',
-    label: '😄👍😍💯',
-   }}
-/>
-
-<Story
-  name="Tertiary"
-  args={{
-    backgroundColor:'#ff0',
-    label: '📚📕📈🤓',
-  }}
-/>
 ```
 
 ```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
@@ -294,28 +262,12 @@ export const Pair: Story = {
 </script>
 
 <Story
-  name="Primary"
+  name="Pair"
   args={{
     buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
     orientation: 'horizontal',
   }}
 />
-
-<Story
-  name="Secondary"
-  args={{
-    backgroundColor: '#ff0',
-    label: '😄👍😍💯',
-   }}
-/>
-
-<Story
-  name="Tertiary"
-  args={{
-    backgroundColor:'#ff0',
-    label: '📚📕📈🤓',
-  }}
-/>
 ```
 
 ```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"

diff --git a/docs/_snippets/button-story-component-decorator.md b/docs/_snippets/button-story-component-decorator.md
@@ -199,7 +199,7 @@ export default meta;
 
   const { Story } = defineMeta({
     component: Button,
-    decorators: [() => MarginDecorators],
+    decorators: [() => MarginDecorator],
   });
 </script>
 ```
@@ -223,7 +223,7 @@ export default {
 
   const { Story } = defineMeta({
     component: Button,
-    decorators: [() => MarginDecorators],
+    decorators: [() => MarginDecorator],
   });
 </script>
 ```
@@ -251,9 +251,7 @@ export default meta;
 
   const { Story } = defineMeta({
     component: Button,
-    decorators: [() => ({
-      Component: MarginDecorator,
-    })],
+    decorators: [() => MarginDecorator],
   });
 </script>
 ```

diff --git a/docs/_snippets/button-story-using-args.md b/docs/_snippets/button-story-using-args.md
@@ -336,7 +336,7 @@ export const Tertiary: Story = {
   args={{
     backgroundColor: '#ff0',
     label: '😄👍😍💯',
-   }}
+  }}
 />
 
 <Story
@@ -401,7 +401,7 @@ export const Tertiary = {
   args={{
     backgroundColor: '#ff0',
     label: '😄👍😍💯',
-   }}
+  }}
 />
 
 <Story
@@ -471,7 +471,7 @@ export const Tertiary: Story = {
   args={{
     backgroundColor: '#ff0',
     label: '😄👍😍💯',
-   }}
+  }}
 />
 
 <Story

diff --git a/docs/_snippets/button-story-with-emojis.md b/docs/_snippets/button-story-with-emojis.md
@@ -277,7 +277,7 @@ export const Tertiary: Story = {
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
 
@@ -344,7 +344,7 @@ export const Tertiary = {
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
 
@@ -416,7 +416,7 @@ export const Tertiary: Story = {
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
 

diff --git a/docs/_snippets/button-story.md b/docs/_snippets/button-story.md
@@ -451,7 +451,7 @@ export const Primary: Story = {
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
 
@@ -465,7 +465,7 @@ export const Primary: Story = {
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
 
@@ -507,7 +507,7 @@ export const Primary: Story = {
 
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
 

diff --git a/docs/_snippets/component-story-custom-args-mapping.md b/docs/_snippets/component-story-custom-args-mapping.md
@@ -34,7 +34,7 @@ export default meta;
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
-  import Button from './components/Button.svelte';
+  import Button from './Button.svelte';
 
   import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 
@@ -122,7 +122,7 @@ export default {
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
-  import Button from './components/Button.svelte';
+  import Button from './Button.svelte';
 
   import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 
@@ -219,7 +219,7 @@ export default meta;
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
-  import Button from './components/Button.svelte';
+  import Button from './Button.svelte';
 
   import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
 

diff --git a/docs/_snippets/component-story-static-asset-cdn.md b/docs/_snippets/component-story-static-asset-cdn.md
@@ -126,7 +126,7 @@ export const WithAnImage: Story = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
@@ -163,7 +163,7 @@ export const WithAnImage = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
@@ -205,7 +205,7 @@ export const WithAnImage: Story = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 

diff --git a/docs/_snippets/component-story-static-asset-with-import.md b/docs/_snippets/component-story-static-asset-with-import.md
@@ -164,7 +164,7 @@ export const WithAnImage: Story = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
@@ -209,7 +209,7 @@ export const WithAnImage = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
@@ -259,7 +259,7 @@ export const WithAnImage: Story = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 

diff --git a/docs/_snippets/component-story-static-asset-without-import.md b/docs/_snippets/component-story-static-asset-without-import.md
@@ -121,7 +121,7 @@ export const WithAnImage: Story = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
@@ -156,7 +156,7 @@ export const WithAnImage = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
@@ -196,7 +196,7 @@ export const WithAnImage: Story = {
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 

diff --git a/docs/_snippets/list-story-starter.md b/docs/_snippets/list-story-starter.md
@@ -118,7 +118,7 @@ export default {
   component: List,
 };
 
-//Always an empty list, not super interesting
+// Always an empty list, not super interesting
 export const Empty = {};
 ```
 

diff --git a/docs/_snippets/my-component-play-function-alt-queries.md b/docs/_snippets/my-component-play-function-alt-queries.md
@@ -32,7 +32,7 @@ export const ExampleWithRole: Story = {
 
   import { userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
@@ -103,7 +103,7 @@ export const ExampleWithRole = {
 
   import { userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
@@ -185,7 +185,7 @@ export const ExampleWithRole: Story = {
 
   import { userEvent, within } from '@storybook/test';
 
-  import MyComponent  from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
     component: MyComponent,
@@ -211,7 +211,7 @@ import type { Meta, StoryObj } from '@storybook/svelte';
 
 import { userEvent, within } from '@storybook/test';
 
-import { MyComponent } from './MyComponent';
+import MyComponent from './MyComponent.svelte';
 
 const meta: Meta<typeof MyComponent> = {
   component: MyComponent,