GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 06:21:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

Svelte snippets updated

Browse Source
This commit is contained in:
jonniebigodes 2021-10-11 19:53:39 +01:00
parent 613f6de8bb
commit 2418ee103b
15 changed files with 196 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
docs/snippets/svelte/badge-story.mdx.mdx
View File

@ -3,35 +3,41 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import { Badge } from './Badge.svelte';
import Badge from './Badge.svelte';
<Meta title="MDX/Badge" component={Badge} />
export const Template = (args) => ({
Component: Badge,
props: args,
});
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
# Badge
Let's define a story for our `Badge` component:
<Story name="positive" args={{
status: 'positive',
label: 'Positive'
}}>
{Template.bind({})}
</Story>
<Story
name="positive"
args={{
status: 'positive',
label: 'Positive'
}}
render={(args) => ({
Component: Badge,
props: args,
})} />
We can drop it in a `Canvas` to get a code snippet:
<Canvas>
<Story name="negative" args={{
status: 'negative',
label: 'Negative'
}}>
{Template.bind({})}
</Story>
<Story
name="negative"
args={{
status: 'negative',
label: 'Negative'
}}
render={(args) => ({
Component: Badge,
props: args,
})} />
</Canvas>
We can even preview multiple Stories in a block. This
@ -39,23 +45,37 @@ gets rendered as a group but defines individual stories
with unique URLs, which is great for review and testing.
<Canvas>
<Story name="warning" args={{
status: 'warning',
label: 'Warning'
}}>
{Template.bind({})}
</Story>
<Story name="neutral" args={{
status: 'neutral',
label: 'Neutral'
}}>
{Template.bind({})}
</Story>
<Story name="error" args={{
status: 'error',
label: 'Error'
}}>
{Template.bind({})}
</Story>
<Story
name="warning"
args={{
status: 'warning',
label: 'Warning'
}}
render={(args) => ({
Component: Badge,
props: args,
})} />
<Story
name="neutral"
args={{
status: 'neutral',
label: 'Neutral'
}}
render={(args) => ({
Component: Badge,
props: args,
})} />
<Story
name="error"
args={{
status: 'error',
label: 'Error'
}}
render={(args) => ({
Component: Badge,
props: args,
})} />
</Canvas>
```

8
docs/snippets/svelte/button-story-default-docs-code.mdx.mdx
View File

@ -21,6 +21,8 @@ export const someFunction = (someValue) => {
return `i am a ${someValue}`;
};
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
<!-- 👇 Destructure the label from the args object and assigns the function result to a variable and pass it as a prop into the component -->
<Story
name="ExampleStory"
@ -28,8 +30,8 @@ export const someFunction = (someValue) => {
primary: true,
size: 'small',
label: "button",
}}>
{(args) => {
}}
render={(args) => {
const { label } = args;
const functionResult = someFunction(label);
return {
@ -40,5 +42,5 @@ export const someFunction = (someValue) => {
},
};
}}
</Story>
/>
```

15
docs/snippets/svelte/button-story-with-args.mdx.mdx
View File

@ -5,19 +5,18 @@ import { Meta, Story } from '@storybook/addon-docs';
import Button from './Button.svelte';
<Meta title="Components/Button" component={Button} />
<Meta title="Button" component={Button} />
export const Template = (args) => ({
Component: Button,
props: args,
});
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
<Story
name="Primary"
args={{
primary: true,
label: 'Button',
}}>
{Template.bind({})}
</Story>
}}
render={(args)=>({
Component: Button,
props: args,
})} />
```

36
docs/snippets/svelte/button-story-with-emojis.mdx.mdx
View File

@ -5,33 +5,37 @@ import { Meta, Story } from '@storybook/addon-docs';
import Button from './Button.svelte';
<Meta title="Components/Button" component={Button} />
<Meta title="Button" component={Button} />
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
<Story name="Primary">
{{
<Story
name="Primary"
render={() => ({
Component: Button,
props: {
background: '#ff0',
label: 'Button',
},
}}
</Story>
<Story name="Secondary">
{{
})} />
<Story
name="Secondary"
render={() => ({
Component: Button,
props: {
background: '#ff0',
label: '😄👍😍💯',
},
}}
</Story>
<Story name="Tertiary">
{{
props: {
})} />
<Story
name="Tertiary"
render={() => ({
Component: Button,
props: {
background: '#ff0',
label: '📚📕📈🤓',
},
}}
</Story>
})} />
```

11
docs/snippets/svelte/button-story.mdx.mdx
View File

@ -7,14 +7,17 @@ import Button from './Button.svelte';
<Meta title="Button" component={Button}/>
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
# Button
<Story name="Primary">
{{
<Story
name="Primary"
render={() => ({
Component: Button,
props: {
primary: true,
label: 'Button',
},
}}
</Story>
})} />
```

19
docs/snippets/svelte/component-story-mdx-story-by-name.mdx.mdx
View File

@ -1,16 +1,19 @@
```md
<!-- Button.stories.mdx --->
import { Story } from '@storybook/addon-docs';
import { Meta, Story } from '@storybook/addon-docs';
import Button from './Button.svelte';
export const Template = (args) => ({
Component: Button,
props: args,
});
<Meta title="Button" component={Button}/>
<Story name="Basic" args={{ label: 'hello' }}>
{Template.bind({})}
</Story>
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
<Story
name="Basic"
args={{ label: 'hello' }}
render={(args) => ({
Component: Button,
props: args,
})} />
```

24
docs/snippets/svelte/component-story-static-asset-cdn.mdx.mdx
View File

@ -5,17 +5,17 @@ import { Meta, Story } from '@storybook/addon-docs';
import MyComponent from './MyComponent.svelte';
<Meta title="img" />
<Meta title="img" component={MyComponent} />
<Story name="withAnImage">
{() => {
return {
Component: MyComponent,
props: {
src: 'https://place-hold.it/350x150',
alt: 'my image',
},
};
}}
</Story>
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
<Story
name="withAnImage"
render={() => ({
Component: MyComponent,
props: {
src: 'https://place-hold.it/350x150',
alt: 'my image',
},
})} />
```

22
docs/snippets/svelte/component-story-static-asset-with-import.mdx.mdx
View File

@ -7,21 +7,21 @@ import MyComponent from './MyComponent.svelte';
import imageFile from './static/image.png';
<Meta title="img" />
<Meta title="img" component={MyComponent} />
export const image = {
src: imageFile,
alt: 'my image',
};
<Story name="withAnImage">
{() => {
return {
Component: MyComponent,
props: {
image: image,
},
};
}}
</Story>
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
<Story
name="withAnImage"
render={() => ({
Component: MyComponent,
props: {
image: image,
},
})} />
```

24
docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx
View File

@ -5,17 +5,17 @@ import { Meta, Story } from '@storybook/addon-docs';
import MyComponent from './MyComponent.svelte0;
<Meta title="img" />
<Meta title="img" component={MyComponent} />
<Story name="withAnImage">
{() => {
return {
Component: MyComponent,
props: {
src: '/image.png',
alt: 'my image',
},
};
}}
</Story>
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
<Story
name="withAnImage"
render={() => ({
Component: MyComponent,
props: {
src: '/image.png',
alt: 'my image',
},
})} />
```

9
docs/snippets/svelte/loader-story.mdx.mdx
View File

@ -9,6 +9,8 @@ import fetch from 'node-fetch';
<Meta title="Examples/Loader" component={TodoItem} />
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
<Story
name="Primary"
loaders={[
@ -18,13 +20,12 @@ import fetch from 'node-fetch';
).json(),
}),
]}
>
{(args, { loaded: { todo } }) => ({
Component: SampleLoaderComponent,
render={(args, { loaded: { todo } }) => ({
Component: TodoItem,
props: {
...args,
todo,
},
})}
</Story>
/>
```

37
docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx
View File

@ -1,12 +1,13 @@
```md
<!-- Badge.stories.mdx --->
import { Canvas } from '@storybook/addon-docs';
import { Canvas, Meta, Story } from '@storybook/addon-docs';
export const Template = (args) => ({
Component: Badge,
props: args,
});
import Badge from './Badge.svelte';
<Meta title="MDX/Badge" component={Badge} />
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
<Canvas>
<Story
@ -14,26 +15,32 @@ export const Template = (args) => ({
args={{
status: 'warning',
label: 'Warning',
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
Component: Badge,
props: args,
})} />
<Story
name="neutral"
args={{
status: 'neutral',
label: 'Neutral',
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
Component: Badge,
props: args,
})} />
<Story
name="error"
args={{
status: 'error',
label: 'Error',
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
Component: Badge,
props: args,
})} />
</Canvas>
```

13
docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx
View File

@ -15,7 +15,9 @@ import MyComponent from './MyComponent.svelte';
defaultViewport: 'iphone6',
},
}}
/>
component={MyComponent} />
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
<Story
name="MyStory"
@ -23,11 +25,8 @@ import MyComponent from './MyComponent.svelte';
viewport: {
defaultViewport: 'iphonex',
}
}}>
{() => {
return {
Component: MyComponent,
};
}}
</Story>
render={() => ({
Component: MyComponent,
})} />
```

15
docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx
View File

@ -1,7 +1,11 @@
```md
<!-- MyComponent.stories.mdx -->
import { Story } from '@storybook/addon-docs';
import { Meta, Story } from '@storybook/addon-docs';
import MyComponent from './MyComponent.svelte';
<Meta title="MDX Story with toolbars" component={MyComponent} />
export const getCaptionForLocale = (locale) => {
switch(locale) {
@ -14,8 +18,10 @@ export const getCaptionForLocale = (locale) => {
}
};
<Story name="StoryWithLocale">
{(args, { globals: { locale } }) => {
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
<Story name="StoryWithLocale"
render={(args, { globals: { locale } }) => {
const caption = getCaptionForLocale(locale);
return {
component: MyComponent,
@ -23,6 +29,5 @@ export const getCaptionForLocale = (locale) => {
locale: caption,
},
};
}}
</Story>
}} />
```

12
docs/snippets/svelte/my-component-with-env-variables.mdx.mdx
View File

@ -7,10 +7,7 @@ import MyComponent from './MyComponent.svelte';
<Meta title="A MDX story using environment variables inside a .env file" component={MyComponent}/>
export const Template = (args) => ({
Component: MyComponent,
props: args,
});
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
<Canvas>
<Story
@ -18,8 +15,9 @@ export const Template = (args) => ({
args={{
propertyA: process.env.STORYBOOK_DATA_KEY,
}}
>
{Template.bind({})}
</Story>
render={(args) => ({
Component: MyComponent,
props: args,
})} />
</Canvas>
```

16
docs/snippets/svelte/your-component.mdx.mdx
View File

@ -6,18 +6,18 @@ import { Meta, Story } from '@storybook/addon-docs';
import YourComponent from './YourComponent.svelte';
<!--👇 The title prop determines where your story goes in the story list -->
<Meta title="YourComponent" component={YourComponent} />
<!--👇 We create a “template” of how args map to rendering -->
export const Template = (args) => ({
Component: YourComponent,
props: args,
});
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
<!-- 👇 The args you need here will depend on your component -->
<Story
name="FirstStory"
args={{}}>
{Template.bind({})}
</Story>
args={{}}
render={(args) => ({
Component: YourComponent,
props: args,
})} />
```