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

Vue CSF 3 Snippets

Browse Source
This commit is contained in:
jonniebigodes 2022-07-07 18:50:21 +01:00
parent 7faf40d75e
commit 393f84aa1c
154 changed files with 2831 additions and 2242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
docs/snippets/vue/app-story-with-mock.js.mdx
View File

@ -5,34 +5,39 @@ import App from './App.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'App',
component: App,
};
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
const Template = () => ({
components: { App },
template: '<App />',
});
export const Success = Template.bind({});
Success.parameters = {
fetch: {
json: {
JavaScript: 3390991,
"C++": 44974,
TypeScript: 15530,
CoffeeScript: 12253,
Python: 9383,
C: 5341,
Shell: 5115,
HTML: 3420,
CSS: 3171,
Makefile: 189
}
}
export const Success = {
parameters: {
fetch: {
json: {
JavaScript: 3390991,
'C++': 44974,
TypeScript: 15530,
CoffeeScript: 12253,
Python: 9383,
C: 5341,
Shell: 5115,
HTML: 3420,
CSS: 3171,
Makefile: 189,
},
},
},
render: (args) => ({
components: { App },
template: '<App />',
}),
};
```

98
docs/snippets/vue/badge-story-starter-example.mdx.mdx
View File

@ -8,30 +8,32 @@ import Icon from './Icon.vue';
<Meta title="MDX/Badge" component={Badge} />
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/vue/api/csf
to learn how to use render functions.
-->
# Badge
Let's define a story for our `Badge` component:
<Story name="positive">
{() => {
return {
components: { Badge },
template: `<Badge status="positive">Positive</Badge>`,
};
}}
</Story>
<Story
name="positive"
render={() => ({
components: { Badge },
template: `<Badge status="positive">Positive</Badge>`,
})} />
We can drop it in a `Canvas` to get a code snippet:
<Canvas>
<Story name="negative">
{() => {
return {
components: { Badge },
template: `<Badge status="negative">Negative</Badge>`,
};
}}
</Story>
<Story
name="negative"
render={() => ({
components: { Badge },
template: `<Badge status="negative">Negative</Badge>`,
})} />
</Canvas>
We can even preview multiple stories in a block. This
@ -39,41 +41,33 @@ gets rendered as a group, but defines individual stories
with unique URLs and isolated snapshot tests.
<Canvas>
<Story name="warning">
{() => {
return {
components: { Badge },
template: `<Badge status="warning">Warning</Badge>`,
};
}}
</Story>
<Story name="neutral">
{() => {
return {
components: { Badge },
template: `<Badge status="neutral">Neutral</Badge>`,
};
}}
</Story>
<Story name="error">
{() => {
return {
components: { Badge },
template: `<Badge status="error">Error</Badge>`,
};
}}
</Story>
<Story name="with icon">
{() => {
return {
components: { Badge, Icon },
template: `
<Badge status="warning">
<Icon icon="check" inline />
with icon
</Badge>`,
};
}}
</Story>
<Story
name="warning"
render={() => ({
components: { Badge },
template: `<Badge status="warning">Warning</Badge>`,
})} />
<Story
name="neutral"
render={() => ({
components: { Badge },
template: `<Badge status="neutral">Neutral</Badge>`,
})} />
<Story
name="error"
render={() => ({
components: { Badge },
template: `<Badge status="error">Error</Badge>`,
})} />
<Story
name="with icon"
render={() => ({
components: { Badge, Icon },
template: `
<Badge status="warning">
<Icon icon="check" inline />
with icon
</Badge>`,
})} />
</Canvas>
```

57
docs/snippets/vue/badge-story.mdx-2.mdx.mdx
View File

@ -7,24 +7,27 @@ import Badge from './Badge.vue';
<Meta title="MDX/Badge" component={Badge} />
export const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Badge },
template: '<Badge v-bind="$props" />',
});
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/vue/api/csf
to learn how to use render functions.
-->
# Badge
Let's define a story for our `Badge` component:
<Story
<Story
name="positive"
args={{
status: 'positive',
label: 'Positive',
}}>
{Template.bind({})}
</Story>
}}
render={(args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Badge },
template: '<Badge v-bind="$props" />',
})} />
We can drop it in a `Canvas` to get a code snippet:
@ -34,9 +37,12 @@ We can drop it in a `Canvas` to get a code snippet:
args={{
status: 'negative',
label: 'Negative',
}}>
{Template.bind({})}
</Story>
}}
render={(args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Badge },
template: '<Badge v-bind="$props" />',
})} />
</Canvas>
We can even preview multiple Stories in a block. This
@ -49,24 +55,33 @@ with unique URLs, which is great for review and testing.
args={{
status: 'warning',
label: 'Warning',
}}>
{Template.bind({})}
</Story>
}}
render={(args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Badge },
template: '<Badge v-bind="$props" />',
})} />
<Story
name="neutral"
args={{
status: 'neutral',
label: 'Neutral',
}}>
{Template.bind({})}
</Story>
}}
render={(args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Badge },
template: '<Badge v-bind="$props" />',
})} />
<Story
name="error"
args={{
status: 'error',
label: 'Error',
}}>
{Template.bind({})}
</Story>
}}
render={(args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Badge },
template: '<Badge v-bind="$props" />',
})} />
</Canvas>
```

67
docs/snippets/vue/badge-story.mdx-3.mdx.mdx
View File

@ -7,13 +7,11 @@ import Badge from './Badge.vue';
<Meta title="MDX/Badge" component={Badge} />
export const Template = (args) => ({
components: { Badge },
setup() {
return { args };
},
template: '<Badge v-bind="args" />',
});
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/vue/api/csf
to learn how to use render functions.
-->
# Badge
@ -24,9 +22,14 @@ Let's define a story for our `Badge` component:
args={{
status: 'positive',
label: 'Positive'
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
components: { Badge },
setup() {
return { args };
},
template: '<Badge v-bind="args" />',
})} />
We can drop it in a `Canvas` to get a code snippet:
@ -36,9 +39,14 @@ We can drop it in a `Canvas` to get a code snippet:
args={{
status: 'negative',
label: 'Negative',
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
components: { Badge },
setup() {
return { args };
},
template: '<Badge v-bind="args" />',
})} />
</Canvas>
We can even preview multiple Stories in a block. This
@ -51,24 +59,39 @@ with unique URLs, which is great for review and testing.
args={{
status: 'warning',
label: 'Warning',
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
components: { Badge },
setup() {
return { args };
},
template: '<Badge v-bind="args" />',
})} />
<Story
name="neutral"
args={{
status: 'neutral',
label: 'Neutral',
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
components: { Badge },
setup() {
return { args };
},
template: '<Badge v-bind="args" />',
})} />
<Story
name="error"
args={{
status: 'error',
label: 'Error',
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
components: { Badge },
setup() {
return { args };
},
template: '<Badge v-bind="args" />',
})} />
</Canvas>
```

34
docs/snippets/vue/button-group-story.2.js.mdx
View File

@ -8,25 +8,27 @@ import * as ButtonStories from './Button.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'ButtonGroup',
component: ButtonGroup,
};
const Template = (args, { argTypes }) => ({
components: { ButtonGroup },
props: Object.keys(argTypes),
template: '<ButtonGroup v-bind="$props" />',
});
export const Pair = Template.bind({});
Pair.args = {
buttons: [
{ ...ButtonStories.Primary.args },
{ ...ButtonStories.Secondary.args }
],
orientation: 'horizontal',
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const Pair = {
render: (args, { argTypes }) => ({
components: { ButtonGroup },
props: Object.keys(argTypes),
template: '<ButtonGroup v-bind="$props" />',
}),
args: {
buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
orientation: 'horizontal',
},
};
```

36
docs/snippets/vue/button-group-story.3.js.mdx
View File

@ -8,27 +8,29 @@ import * as ButtonStories from './Button.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'ButtonGroup',
component: ButtonGroup,
};
const Template = (args) => ({
components: { ButtonGroup },
setup() {
return { args };
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const Pair = {
render: (args) => ({
components: { ButtonGroup },
setup() {
return { args };
},
template: '<ButtonGroup v-bind="args" />',
}),
args: {
buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
orientation: 'horizontal',
},
template: '<ButtonGroup v-bind="args" />',
});
export const Pair = Template.bind({});
Pair.args = {
buttons: [
{ ...ButtonStories.Primary.args },
{ ...ButtonStories.Secondary.args }
],
orientation: 'horizontal',
};
```

2
docs/snippets/vue/button-group-story.ts-2.ts.mdx
View File

@ -10,7 +10,7 @@ import * as ButtonStories from './Button.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'ButtonGroup',

26
docs/snippets/vue/button-group-story.ts-3.ts.mdx
View File

@ -3,31 +3,31 @@
import ButtonGroup from './ButtonGroup.vue';
import { Meta, StoryFn } from '@storybook/vue3';
import type { Meta, Story } from '@storybook/vue3';
//👇 Imports the Button stories
import * as ButtonStories from './Button.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'ButtonGroup',
component: ButtonGroup,
} as Meta<typeof Button>;
const Template: StoryFn<typeof Button> = (args) => ({
components: { ButtonGroup },
setup() {
return { args };
export const Pair: Story = {
render: (args) => ({
components: { ButtonGroup },
setup() {
return { args };
},
template: '<ButtonGroup v-bind="args" />',
}),
args: {
buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
orientation: 'horizontal',
},
template: '<ButtonGroup v-bind="args" />',
});
export const Pair = Template.bind({});
Pair.args = {
buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
orientation: 'horizontal',
};
```

25
docs/snippets/vue/button-story-click-handler-args.2.js.mdx
View File

@ -7,21 +7,22 @@ import { action } from '@storybook/addon-actions';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
};
export const Text = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Button },
template: '<Button @onClick="onClick" :label="label" />'
});
Text.args = {
label: 'Hello',
onClick: action('clicked'),
export const Text = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Button },
template: '<Button @onClick="onClick" :label="label" />',
}),
args: {
label: 'Hello',
onClick: action('clicked'),
},
};
```

32
docs/snippets/vue/button-story-click-handler-args.3.js.mdx
View File

@ -7,26 +7,26 @@ import { action } from '@storybook/addon-actions';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
};
export const Text = ({ label, onClick }) => ({
components: { Button },
setup() {
return {
label,
onClick,
};
export const Text = {
render: (args) => ({
components: { Button },
setup() {
return {
...args,
onClick: action('clicked'),
};
},
template: '<Button @onClick="onClick" :label="label" />',
}),
args: {
label: 'Hello',
},
template: '<Button @onClick="onClick" :label="label" />',
});
Text.args = {
label: 'Hello',
onClick: action('clicked'),
};
```

20
docs/snippets/vue/button-story-click-handler-simplificated.js.mdx
View File

@ -5,13 +5,13 @@ import Button from './Button.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
/*
* See https://storybook.js.org/docs/vue/essentials/actions#action-argtype-annotation
* See https://storybook.js.org/docs/7.0/vue/essentials/actions#action-argtype-annotation
* to learn how to set up argTypes for actions
*/
argTypes: {
@ -19,11 +19,13 @@ export default {
},
};
export const Text = (args) => ({
components: { Button },
setup() {
return { args };
},
template: '<Button v-bind="args" />',
});
export const Text = {
render: (args) => ({
components: { Button },
setup() {
return { args };
},
template: '<Button v-bind="args" />',
}),
};
```

22
docs/snippets/vue/button-story-click-handler.2.js.mdx
View File

@ -7,18 +7,20 @@ import { action } from '@storybook/addon-actions';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
};
export const Text = () => ({
components: { Button },
template: '<Button label="Hello" @click="onClick" />',
methods: {
onClick: action('clicked'),
},
});
export const Text = {
render: () => ({
components: { Button },
template: '<Button label="Hello" @click="onClick" />',
methods: {
onClick: action('clicked'),
},
}),
};
```

26
docs/snippets/vue/button-story-click-handler.3.js.mdx
View File

@ -7,20 +7,22 @@ import { action } from '@storybook/addon-actions';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
};
export const Text = () => ({
components: { Button },
template: '<Button label="Hello" @click="onClick" />',
setup(){
return {
onClick: action('clicked'),
};
},
});
export const Text = {
render: () => ({
components: { Button },
setup() {
return {
onClick: action('clicked'),
};
},
template: '<Button label="Hello" @click="onClick" />',
}),
};
```

2
docs/snippets/vue/button-story-component-args-primary.js.mdx
View File

@ -5,7 +5,7 @@ import Button from './Button.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',

2
docs/snippets/vue/button-story-component-decorator.js.mdx
View File

@ -5,7 +5,7 @@ import Button from './Button.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',

4
docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx
View File

@ -3,11 +3,11 @@
import Button from './Button.vue';
import { Meta } from '@storybook/vue';
import type { Meta } from '@storybook/vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',

4
docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx
View File

@ -3,11 +3,11 @@
import Button from './Button.vue';
import { Meta } from '@storybook/vue3';
import type { Meta } from '@storybook/vue3';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',

23
docs/snippets/vue/button-story-decorator.js.mdx
View File

@ -5,16 +5,23 @@ import Button from './Button.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
};
export const Primary = () => ({
components: { Button },
template: '<Button primary label="Hello World" />',
});
Primary.decorators = [() => ({ template: '<div style="margin: 3em;"><story /></div>' })];
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const Primary = {
render: () => ({
components: { Button },
template: '<Button primary label="Hello World" />',
}),
decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })],
};
```

19
docs/snippets/vue/button-story-decorator.mdx.mdx
View File

@ -7,19 +7,20 @@ import Button from './Button.vue';
<Meta title="Button" component={Button}/>
export const Template = () => ({
components: { Button },
template: '<Button primary label="Hello World"/>',
});
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/vue/api/csf
to learn how to use render functions.
-->
<Story
name="Primary"
decorators={[
() => ({
template: '<div style="margin: 3em;"><story /></div>',
}),
]}>
{Template.bind({})}
<Story>
]}
render={() => ({
components: { Button },
template: '<Button primary label="Hello World"/>',
})} />
```

47
docs/snippets/vue/button-story-default-docs-code.3.js.mdx
View File

@ -1,47 +0,0 @@
```js
// Button.stories.js
import Button from './Button.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
//👇 Creates specific argTypes
argTypes: {
backgroundColor: { control: 'color' },
},
};
//👇 Some function to demonstrate the behavior
const someFunction = (someValue) => {
return `i am a ${someValue}`;
};
export const ExampleStory = (args) => {
//👇 Assigns the function result to a variable
const functionResult = someFunction(args.label);
return {
components: { Button },
setup() {
//👇 The args will now be passed down to the template
return {
args: {
...args,
//👇 Replaces arg variable with the override (without the need of mutation)
label: functionResult,
},
};
},
template: '<Button v-bind="args" />',
};
};
ExampleStory.args = {
primary: true,
size: 'small',
label: 'button',
};
```

49
docs/snippets/vue/button-story-default-docs-code.mdx-3.mdx.mdx
View File

@ -1,49 +0,0 @@
```md
<!-- Button.stories.mdx -->
import { Meta, Story } from '@storybook/addon-docs';
import Button from './Button.vue';
<!-- 👇 Creates specific argTypes -->
<Meta
title="Button"
component={Button}
argTypes={{
backgroundColor: {
control: 'color',
},
}}
/>
<!-- 👇 Some function to demonstrate the behavior -->
export const someFunction = (someValue) => {
return `i am a ${someValue}`;
};
<!-- 👇 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"
args={{
primary: true,
size: 'small',
label: 'button',
}} >
{(args) => {
const functionResult = someFunction(args.label);
return {
components: { Button },
setup() {
return {
args: {
...args,
label: functionResult,
},
};
},
template: '<Button v-bind="args" />',
};
}}
</Story>
```

2
docs/snippets/vue/button-story-default-export-with-component.js.mdx
View File

@ -5,7 +5,7 @@ import Button from './Button.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',

4
docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx
View File

@ -3,11 +3,11 @@
import Button from './Button.vue';
import { Meta } from '@storybook/vue';
import type { Meta } from '@storybook/vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',

4
docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx
View File

@ -3,11 +3,11 @@
import Button from './Button.vue';
import { Meta } from '@storybook/vue3';
import type { Meta } from '@storybook/vue3';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',

23
docs/snippets/vue/button-story-rename-story.js.mdx
View File

@ -5,16 +5,23 @@ import Button from './Button.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
};
export const Primary = () => ({
components: { Button },
template: '<Button primary label="Button" />',
});
Primary.storyName = 'I am the primary';
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const Primary = {
name: 'I am the primary',
render: () => ({
components: { Button },
template: '<Button primary label="Button" />',
}),
};
```

22
docs/snippets/vue/button-story-rename-story.ts-2.ts.mdx
View File

@ -1,22 +0,0 @@
```ts
// Button.stories.ts
import Button from './Button.vue';
import { Meta, StoryFn } from '@storybook/vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta<typeof Button>;
export const Primary: StoryFn<typeof Button> = () => ({
components: { Button },
template: '<Button primary label="Button" />',
});
Primary.storyName = 'I am the primary';
```

22
docs/snippets/vue/button-story-rename-story.ts-3.ts.mdx
View File

@ -1,22 +0,0 @@
```ts
// Button.stories.ts
import Button from './Button.vue';
import { Meta, StoryFn } from '@storybook/vue3';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta<typeof Button>;
export const Primary: StoryFn<typeof Button> = () => ({
components: { Button },
template: '<Button primary label="Button" />',
});
Primary.storyName = 'I am the primary';
```

29
docs/snippets/vue/button-story-rename-story.ts.mdx Normal file
View File

@ -0,0 +1,29 @@
```ts
// Button.stories.ts
import Button from './Button.vue';
import type { Meta, Story } from '@storybook/vue3';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta<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/vue/api/csf
* to learn how to use render functions.
*/
export const Primary: Story = {
name:'I am the primary',
render: () => ({
components: { Button },
template: '<Button primary label="Button" />',
}),
};
```

58
docs/snippets/vue/button-story-using-args.2.js.mdx
View File

@ -5,27 +5,51 @@ import Button from './Button.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
};
//👇 We create a “template” of how args map to rendering
const Template = (args, { argTypes }) => ({
components: { Button },
props: Object.keys(argTypes),
template: '<Button v-bind="$props" />',
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const Primary = {
render: (args, { argTypes }) => ({
components: { Button },
props: Object.keys(argTypes),
template: '<Button v-bind="$props" />',
}),
args: {
backgroundColor: '#ff0',
label: 'Button',
},
};
//👇 Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = { background: '#ff0', label: 'Button' };
export const Secondary = {
render: (args, { argTypes }) => ({
components: { Button },
props: Object.keys(argTypes),
template: '<Button v-bind="$props" />',
}),
args: {
...Primary.args,
label: '😄👍😍💯',
},
};
export const Secondary = Template.bind({});
Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
export const Tertiary = Template.bind({});
Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
export const Tertiary = {
args: {
...Primary.args,
label: '📚📕📈🤓',
},
render: (args, { argTypes }) => ({
components: { Button },
props: Object.keys(argTypes),
template: '<Button v-bind="$props" />',
}),
};
```

63
docs/snippets/vue/button-story-using-args.3.js.mdx
View File

@ -5,28 +5,57 @@ import Button from './Button.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
};
//👇 We create a “template” of how args map to rendering
const Template = (args) => ({
components: { Button },
setup() {
return { args };
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const Primary = {
args: {
backgroundColor: '#ff0',
label: 'Button',
},
template: '<Button v-bind="args" />',
});
//👇 Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = { background: '#ff0', label: 'Button' };
render: (args) => ({
components: { Button },
setup() {
return { args };
},
template: '<Button v-bind="args" />',
}),
};
export const Secondary = Template.bind({});
Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
export const Secondary = {
args: {
...Primary.args,
label: '😄👍😍💯',
},
render: (args) => ({
components: { Button },
setup() {
return { args };
},
template: '<Button v-bind="args" />',
}),
};
export const Tertiary = Template.bind({});
Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
export const Tertiary = {
args: {
...Primary.args,
label: '📚📕📈🤓',
},
render: (args) => ({
components: { Button },
setup() {
return { args };
},
template: '<Button v-bind="args" />',
}),
};
```

56
docs/snippets/vue/button-story-using-args.ts-2.ts.mdx
View File

@ -3,31 +3,55 @@
import Button from './Button.vue';
import { Meta, StoryFn } from '@storybook/vue';
import type { Meta, Story } from '@storybook/vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta<typeof Button>;
//👇 We create a “template” of how args map to rendering
const Template: StoryFn<typeof Button> = (args, { argTypes }) => ({
components: { Button },
props: Object.keys(argTypes),
template: '<Button v-bind="$props" />',
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const Primary: Story = {
render: (args, { argTypes }) => ({
components: { Button },
props: Object.keys(argTypes),
template: '<Button v-bind="$props" />',
}),
args: {
background: '#ff0',
label: 'Button',
},
};
//👇 Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = { background: '#ff0', label: 'Button' };
export const Secondary: Story = {
render: (args, { argTypes }) => ({
components: { Button },
props: Object.keys(argTypes),
template: '<Button v-bind="$props" />',
}),
args: {
...Primary.args,
label: '😄👍😍💯',
},
};
export const Secondary = Template.bind({});
Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
export const Tertiary = Template.bind({});
Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
export const Tertiary: Story = {
render: (args, { argTypes }) => ({
components: { Button },
props: Object.keys(argTypes),
template: '<Button v-bind="$props" />',
}),
args: {
...Primary.args,
label: '📚📕📈🤓',
},
};
```

63
docs/snippets/vue/button-story-using-args.ts-3.ts.mdx
View File

@ -3,33 +3,62 @@
import Button from './Button.vue';
import { Meta, StoryFn } from '@storybook/vue3';
import type { Meta, Story } from '@storybook/vue3';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta<typeof Button>;
//👇 We create a “template” of how args map to rendering
const Template: StoryFn<typeof Button> = (args) => ({
components: { Button },
setup() {
return { args };
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const Primary: Story = {
render: (args) => ({
components: { Button },
setup() {
return { args };
},
template: '<Button v-bind="args" />',
}),
args: {
background: '#ff0',
label: 'Button',
},
template: '<Button v-bind="args" />',
});
};
//👇 Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = { background: '#ff0', label: 'Button' };
export const Secondary: Story = {
render: (args) => ({
components: { Button },
setup() {
return { args };
},
template: '<Button v-bind="args" />',
}),
args: {
...Primary.args,
label: '😄👍😍💯',
},
};
export const Secondary = Template.bind({});
Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
export const Tertiary = Template.bind({});
Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
export const Tertiary: Story = {
render: (args) => ({
components: { Button },
setup() {
return { args };
},
template: '<Button v-bind="args" />',
}),
args: {
...Primary.args,
label: '📚📕📈🤓',
},
};
```

14
docs/snippets/vue/button-story-with-addon-example.js.mdx
View File

@ -5,9 +5,9 @@ import Button from './Button.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
//👇 Creates specific parameters for the story
parameters: {
@ -17,8 +17,10 @@ export default {
},
};
export const Basic = () => ({
components: { Button },
export const Basic = {
render: () => ({
components: { Button },
template: '<Button label="Hello" />',
});
}),
};
```

33
docs/snippets/vue/button-story-with-args.2.js.mdx
View File

@ -5,24 +5,27 @@ import Button from './Button.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
};
// 👇 We create a “template” of how args map to rendering
const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Button },
});
//👇 Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: '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/vue/api/csf
* to learn how to use render functions.
*/
export const Primary = {
render: (args, { argTypes }) => ({
components: { Button },
props: Object.keys(argTypes),
template: '<Button v-bind="$props" v-on="$props" />',
}),
args: {
primary: true,
label: 'Button',
},
};
```

37
docs/snippets/vue/button-story-with-args.3.js.mdx
View File

@ -5,28 +5,29 @@ import Button from './Button.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
};
//👇 We create a “template” of how args map to rendering
const Template = (args) => ({
components: { Button },
setup() {
//👇 The args will now be passed down to the template
return { args };
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const Primary = {
render: (args) => ({
components: { Button },
setup() {
return { args };
},
template: '<Button v-bind="args" />',
}),
args: {
primary: true,
label: 'Button',
},
template: '<Button v-bind="args" />',
});
//👇 Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Button',
};
```

23
docs/snippets/vue/button-story-with-args.mdx-2.mdx.mdx
View File

@ -7,21 +7,20 @@ import Button from './Button.vue';
<Meta title="Button" component={Button} />
<!-- 👇 We create a “template” of how args map to rendering -->
export const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Button },
template: `<Button v-bind="$props" v-on="$props" />`,
});
<!-- 👇 Each story then reuses that template -->
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/vue/api/csf
to learn how to use render functions.
-->
<Story
name="Primary"
args={{
primary: true,
label: 'Button',
}}>
{Template.bind({})}
</Story>
}}
render={(args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Button },
template: '<Button v-bind="$props" v-on="$props" />',
})} />
```

26
docs/snippets/vue/button-story-with-args.mdx-3.mdx.mdx
View File

@ -7,22 +7,22 @@ import Button from './Button.vue';
<Meta title="Button" component={Button}/>
<!-- 👇 We create a “template” of how args map to rendering -->
export const Template = (args) => ({
components: { Button },
setup() {
return { args };
},
template: '<Button v-bind="args" />',
});
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/vue/api/csf
to learn how to use render functions.
-->
<Story
name="Primary"
args={{
primary: true,
label: 'Button',
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
components: { Button },
setup() {
return { args };
},
template: '<Button v-bind="args" />',
})} />
```

2
docs/snippets/vue/button-story-with-blue-args.js.mdx
View File

@ -5,7 +5,7 @@ import Button from './Button.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',

4
docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx
View File

@ -3,11 +3,11 @@
import Button from './Button.vue';
import { Meta } from '@storybook/vue';
import type { Meta } from '@storybook/vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',

4
docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx
View File

@ -3,11 +3,11 @@
import Button from './Button.vue';
import { Meta } from '@storybook/vue3';
import type { Meta } from '@storybook/vue3';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',

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

@ -5,25 +5,35 @@ import Button from './Button.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
};
export const Primary = () => ({
components: { Button },
template: '<Button background="#ff0" label="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/vue/api/csf
* to learn how to use render functions.
*/
export const Primary = {
render: () => ({
components: { Button },
template: '<Button backgroundColor="#ff0" label="Button" />',
}),
};
export const Secondary = () => ({
components: { Button },
template: '<Button background="#ff0" label="😄👍😍💯" />',
});
export const Secondary = {
render: () => ({
components: { Button },
template: '<Button backgroundColor="#ff0" label="😄👍😍💯" />',
}),
};
export const Tertiary = () => ({
components: { Button },
template: '<Button background="#ff0" label="📚📕📈🤓" />',
});
export const Tertiary = {
render: () => ({
components: { Button },
template: '<Button backgroundColor="#ff0" label="📚📕📈🤓" />',
}),
```

47
docs/snippets/vue/button-story-with-emojis.mdx.mdx
View File

@ -7,32 +7,27 @@ import Button from './Button.vue';
<Meta title="Button" component={Button}/>
<Story name="Primary">
{() => {
return {
components: { Button },
template: `<Button background="#ff0" label="Button" />`,
};
}}
</Story>
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/vue/api/csf
to learn how to use render functions.
-->
<Story
name="Primary"
render={() => ({
components: { Button },
template: `<Button background="#ff0" label="Button" />`,
})} />
<Story
name="Secondary">
{() => {
return {
components: { Button },
template: `<Button background="#ff0" label="😄👍😍💯" />`,
};
}}
</Story>
name="Secondary"
render={() => ({
components: { Button },
template: `<Button background="#ff0" label="😄👍😍💯" />`,
})} />
<Story
name="Tertiary">
{() => {
return {
components: { Button },
template: `<Button background="#ff0" label="📚📕📈🤓" />`,
};
}}
</Story>
name="Tertiary"
render={() => ({
components: { Button },
template: `<Button background="#ff0" label="📚📕📈🤓" />`,
})} />
```

40
docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx
View File

@ -3,29 +3,41 @@
import Button from './Button.vue';
import { Meta, StoryFn } from '@storybook/vue';
import type { Meta, Story } from '@storybook/vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta<typeof Button>;
export const Primary: StoryFn<typeof Button> = () => ({
components: { Button },
template: '<Button background="#ff0" label="Button" />',
});
export const Secondary: StoryFn<typeof Button> = () => ({
components: { Button },
template: '<Button background="#ff0" label="😄👍😍💯" />',
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const Primary: Story = {
render: () => ({
components: { Button },
template: '<Button background="#ff0" label="Button" />',
}),
};
export const Tertiary: StoryFn<typeof Button> = () => ({
components: { Button },
template: '<Button background="#ff0" label="📚📕📈🤓" />',
});
export const Secondary: Story = {
render: () => ({
components: { Button },
template: '<Button background="#ff0" label="😄👍😍💯" />',
}),
};
export const Tertiary: Story = {
render: () => ({
components: { Button },
template: '<Button background="#ff0" label="📚📕📈🤓" />',
}),
};
```

40
docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx
View File

@ -3,29 +3,41 @@
import Button from './Button.vue';
import { Meta, StoryFn } from '@storybook/vue3';
import type { Meta, StoryFn } from '@storybook/vue3';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta<typeof Button>;
export const Primary: StoryFn<typeof Button> = () => ({
components: { Button },
template: '<Button background="#ff0" label="Button" />',
});
export const Secondary: StoryFn<typeof Button> = () => ({
components: { Button },
template: '<Button background="#ff0" label="😄👍😍💯" />',
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const Primary: Story = {
render: () => ({
components: { Button },
template: '<Button background="#ff0" label="Button" />',
}),
};
export const Tertiary: StoryFn<typeof Button> = () => ({
components: { Button },
template: '<Button background="#ff0" label="📚📕📈🤓" />',
});
export const Secondary: Story = {
render: () => ({
components: { Button },
template: '<Button background="#ff0" label="😄👍😍💯" />',
}),
};
export const Tertiary: Story = {
render: () => ({
components: { Button },
template: '<Button background="#ff0" label="📚📕📈🤓" />',
}),
};
```

21
docs/snippets/vue/button-story.js.mdx
View File

@ -5,15 +5,22 @@ import Button from './Button.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
};
export const Primary = () => ({
components: { Button },
template: '<Button primary label="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/vue/api/csf
* to learn how to use render functions.
*/
export const Primary = {
render: () => ({
components: { Button },
template: '<Button primary label="Button" />',
}),
};
```

20
docs/snippets/vue/button-story.mdx.mdx
View File

@ -7,14 +7,18 @@ import Button from './Button.vue';
<Meta title="Button" component={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/vue/api/csf
to learn how to use render functions.
-->
# Button
<Story name="Primary">
{() => {
return {
components: { Button },
template: `<Button primary label="Button" />`,
};
}}
</Story>
<Story
name="Primary"
render={() => ({
components: { Button },
template: '<Button primary label="Button" />',
})} />
```

19
docs/snippets/vue/button-story.ts-2.ts.mdx
View File

@ -3,19 +3,26 @@
import Button from './Button.vue';
import { Meta, StoryFn } from '@storybook/vue';
import type { Meta, Story } from '@storybook/vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta<typeof Button>;
export const Primary: StoryFn<typeof Button> = () => ({
components: { Button },
template: '<Button primary label="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/vue/api/csf
* to learn how to use render functions.
*/
export const Primary: Story = {
render: () => ({
components: { Button },
template: '<Button primary label="Button" />',
}),
};
```

19
docs/snippets/vue/button-story.ts-3.ts.mdx
View File

@ -3,19 +3,26 @@
import Button from './Button.vue';
import { Meta, StoryFn } from '@storybook/vue3';
import type { Meta, Story } from '@storybook/vue3';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta<typeof Button>;
export const Primary: StoryFn<typeof Button> = () => ({
components: { Button },
template: '<Button primary label="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/vue/api/csf
* to learn how to use render functions.
*/
export const Primary: Story = {
render: () => ({
components: { Button },
template: '<Button primary label="Button" />',
}),
};
```

33
docs/snippets/vue/checkbox-story-csf.js.mdx
View File

@ -5,20 +5,27 @@ import Checkbox from './Checkbox.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Checkbox',
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Checkbox',
component: Checkbox,
};
export const allCheckboxes = () => ({
components: { Checkbox },
template: `
<form>
<Checkbox id="Unchecked" label="Unchecked"/>
<Checkbox id="Checked" label="Checked" checked />
<Checkbox appearance="secondary" id="second" label="Secondary" checked />
</form>`,
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const allCheckboxes = () => {
render: () => ({
components: { Checkbox },
template: `
<form>
<Checkbox id="Unchecked" label="Unchecked"/>
<Checkbox id="Checked" label="Checked" checked />
<Checkbox appearance="secondary" id="second" label="Secondary" checked />
</form>`,
});
};
```

30
docs/snippets/vue/checkbox-story-starter-example.mdx.mdx
View File

@ -7,23 +7,27 @@ import Checkbox from './Checkbox.vue';
<Meta title="MDX/Checkbox" component={Checkbox} />
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/vue/api/csf
to learn how to use render functions.
-->
# Checkbox
With `MDX`, we can define a story for `Checkbox` right in the middle of our Markdown documentation.
<Canvas>
<Story name="all checkboxes">
{() => {
return {
components: { Checkbox },
template: `
<form>
<Checkbox id="Unchecked" label="Unchecked" />
<Checkbox id="Checked" label="Checked" checked />
<Checkbox appearance="secondary" id="second" label="Secondary" checked />
</form>`,
};
}}
</Story>
<Story
name="all checkboxes"
render={() => ({
components: { Checkbox },
template: `
<form>
<Checkbox id="Unchecked" label="Unchecked" />
<Checkbox id="Checked" label="Checked" checked />
<Checkbox appearance="secondary" id="second" label="Secondary" checked />
</form>`,
})} />
</Canvas>
```

39
docs/snippets/vue/checkbox-story.mdx-2.mdx.mdx
View File

@ -7,11 +7,11 @@ import Checkbox from './Checkbox.vue';
<Meta title="MDX/Checkbox" component={Checkbox} />
export const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Checkbox },
template: '<Checkbox v-bind="$props" />',
});
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/vue/api/csf
to learn how to use render functions.
-->
# Checkbox
@ -23,27 +23,34 @@ Markdown documentation.
name="Unchecked"
args={{
label: 'Unchecked',
}}>
{Template.bind({})}
</Story>
}}
render={(args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Checkbox },
template: '<Checkbox v-bind="$props" />',
})} />
<Story
name="Checked"
args={{
label: 'Unchecked',
checked: true,
}}>
{Template.bind({})}
</Story>
}}
render={(args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Checkbox },
template: '<Checkbox v-bind="$props" />',
})} />
<Story
name="Secondary"
args={{
label: 'Secondary',
checked: true,
appearance: 'secondary',
}}>
{Template.bind({})}
</Story>
}}
render={(args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Checkbox },
template: '<Checkbox v-bind="$props" />',
})} />
</Canvas>
```

48
docs/snippets/vue/checkbox-story.mdx-3.mdx.mdx
View File

@ -7,13 +7,12 @@ import Checkbox from './Checkbox.vue';
<Meta title="MDX/Checkbox" component={Checkbox} />
export const Template = (args) => ({
components: { Checkbox },
setup() {
return { args };
},
template: '<Checkbox v-bind="args" />',
});
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/vue/api/csf
to learn how to use render functions.
-->
# Checkbox
With `MDX`, we can define a story for `Checkbox` right in the middle of our
@ -24,27 +23,40 @@ Markdown documentation.
name="Unchecked"
args={{
label: 'Unchecked',
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
components: { Checkbox },
setup() {
return { args };
},
template: '<Checkbox v-bind="args" />',
})} />
<Story
name="Checked"
args={{
label: 'Unchecked',
checked: true,
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
components: { Checkbox },
setup() {
return { args };
},
template: '<Checkbox v-bind="args" />',
})} />
<Story
name="Secondary"
args={{
label: 'Secondary',
checked: true,
appearance: 'secondary',
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
components: { Checkbox },
setup() {
return { args };
},
template: '<Checkbox v-bind="args" />',
})} />
</Canvas>
```

45
docs/snippets/vue/component-story-custom-args-complex.3.js.mdx
View File

@ -5,9 +5,9 @@ import YourComponent from './YourComponent.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'YourComponent',
component: YourComponent,
//👇 Creates specific argTypes with options
@ -27,28 +27,27 @@ const someFunction = (valuePropertyA, valuePropertyB) => {
// Makes some computations and returns something
};
const Template = (args) => {
//👇 Assigns the function result to a variable
const functionResult = someFunction(args.propertyA, args.propertyB);
return {
components: { YourComponent },
setup() {
//👇 The args will now be passed down to the template
return {
args: {
export const ExampleStory = {
render: ({ args }) => {
const { propertyA, propertyB } = args;
//👇 Assigns the function result to a variable
const functionResult = someFunction(propertyA, propertyB);
return {
components: { YourComponent },
setup() {
return {
...args,
//👇 Replaces arg variable with the override (without the need of mutation)
someProperty: functionResult,
},
};
},
template: '<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>',
};
};
export const ExampleStory = Template.bind({});
ExampleStory.args= {
propertyA: 'Item One',
propertyB: 'Another Item One',
};
},
template:
'<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>',
};
},
args: {
propertyA: 'Item One',
propertyB: 'Another Item One',
},
};
```

44
docs/snippets/vue/component-story-custom-args-complex.mdx-3.mdx.mdx
View File

@ -15,25 +15,11 @@ export const someFunction = (valuePropertyA, valuePropertyB) => {
};
export const Template = (args) => {
//👇 Assigns the function result to a variable
const functionResult = someFunction(args.propertyA, args.propertyB);
return {
components: { YourComponent },
setup() {
//👇 The args will now be passed down to the template
return {
args: {
...args,
//👇 Replaces arg variable with the override (without the need of mutation)
someProperty: functionResult,
},
};
},
template: '<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>',
};
};
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/vue/api/csf
to learn how to use render functions.
-->
<Canvas>
<Story
name="ExampleStory"
@ -56,8 +42,22 @@ export const Template = (args) => {
args={{
propertyA: 'Item One',
propertyB: 'Another Item One',
}}>
{Template.bind({})}
</Story>
}}
render={(args) => {
const { propertyA, propertyB } = args;
const functionResult = someFunction(propertyA, propertyB);
return {
components: { YourComponent },
setup() {
return {
args: {
...args,
someProperty: functionResult,
},
};
},
template: '<YourComponent v-bind="args" />',
};
}} />
</Canvas>
```

39
docs/snippets/vue/component-story-custom-args-icons.2.js.mdx
View File

@ -1,39 +0,0 @@
```js
// YourComponent.stories.js
import YourComponent from './YourComponent.vue';
import { IconA, IconB, IconC, IconD, IconE } from './icons';
//👇 Maps the icons to a JSON serializable object to be safely used with the argTypes
const iconMap = { IconA, IconB, IconC, IconD, IconE };
export default {
title: 'My Story with Icons',
component: YourComponent,
//👇 Creates specific argTypes with options
argTypes: {
icon: {
options: Object.keys(iconMap),
},
},
};
const Template = (args, { argTypes }) => {
//👇 Retrieves the appropriate icon passes it as a component prop
const oldArgs = args;
const { icon } = oldArgs;
//👇 Sets the new icon
const selectedIcon = iconMap[icon];
//👇 Updates the args with the new icon
args.icon = selectedIcon;
return {
props: Object.keys(argTypes),
components: { YourComponent },
template: '<YourComponent v-bind="$props"/>',
};
};
```

38
docs/snippets/vue/component-story-custom-args-icons.3.js.mdx
View File

@ -1,38 +0,0 @@
```js
// YourComponent.stories.js
import YourComponent from './YourComponent.vue';
import { IconA, IconB, IconC, IconD, IconE } from './icons';
//👇 Maps the icons to a JSON serializable object to be safely used with the argTypes
const iconMap = { IconA, IconB, IconC, IconD, IconE };
export default {
title: 'My Story with Icons',
component: YourComponent,
//👇 Creates specific argTypes with options
argTypes: {
icon: {
options: Object.keys(iconMap),
},
},
};
const Template = (args) => {
return {
components: { YourComponent },
setup() {
//👇 The args will now be passed down to the template
return {
args: {
...args,
//👇 Replaces the local variable with the override (without mutating it)
icon: iconMap[args.icon],
},
};
},
template: '<YourComponent v-bind="args" />',
};
};
```

28
docs/snippets/vue/component-story-figma-integration.js.mdx
View File

@ -5,24 +5,28 @@ import { withDesign } from 'storybook-addon-designs';
import MyComponent from './MyComponent.vue';
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
// More on default export: https://storybook.js.org/docs/7.0/vue/writing-stories/introduction#default-export
export default {
title: 'FigmaExample',
component: MyComponent,
decorators: [withDesign],
};
// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
const Template = () => ({
components: { MyComponent },
template: '<MyComponent />',
});
export const Example = Template.bind({});
Example.parameters = {
design: {
type: 'figma',
url: 'https://www.figma.com/file/Sample-File',
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const Example = {
render: () => ({
components: { MyComponent },
template: '<MyComponent />',
}),
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/Sample-File',
},
},
};
```

19
docs/snippets/vue/component-story-figma-integration.mdx.mdx
View File

@ -9,23 +9,24 @@ import MyComponent from './MyComponent.vue';
<Meta title="FigmaExample" component={MyComponent} decorators={[withDesign]} />
export const Template = (args) => ({
// Components used in your story `template` are defined in the `components` object
components: { MyComponent },
template: 'MyComponent />',
});
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/vue/api/csf
to learn how to use render functions.
-->
<Canvas>
<Story
name="Example"
parameters={{
parameters={{
design: {
type: 'figma',
url: 'https://www.figma.com/file/Sample-File',
},
}}
>
{Template.bind({})}
</Story>
render={() => ({
components: { MyComponent },
template: 'MyComponent />',
})} />
</Canvas>
```

26
docs/snippets/vue/component-story-figma-integration.ts.mdx
View File

@ -1,30 +1,40 @@
```ts
// MyComponent.stories.ts
import { Meta, StoryFn } from '@storybook/vue'; // For Vue 3 use import { Meta, Story } from '@storybook/vue3';
import type { Meta, Story } from '@storybook/vue'; // For Vue 3 use import { Meta, Story } from '@storybook/vue3';
import { withDesign } from 'storybook-addon-designs';
import MyComponent from './MyComponent.vue';
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
// More on default export: https://storybook.js.org/docs/7.0/vue/writing-stories/introduction#default-export
export default {
title: 'FigmaExample',
component: MyComponent,
decorators: [withDesign],
} as Meta<typeof MyComponent>;
// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
// More on component templates: https://storybook.js.org/docs/7.0/vue/writing-stories/introduction#using-args
const Template: StoryFn<typeof MyComponent> = () => ({
components: { MyComponent },
template: '<MyComponent />',
});
export const Example = Template.bind({});
Example.parameters = {
design: {
type: 'figma',
url: 'https://www.figma.com/file/Sample-File',
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const Example: Story = {
render: () => ({
components: { MyComponent },
template: '<MyComponent />',
}),
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/Sample-File',
},
},
};
```

21
docs/snippets/vue/component-story-mdx-story-by-name.mdx-2.mdx.mdx
View File

@ -7,13 +7,18 @@ import Button from './Button.vue';
<Meta title="Button" component={Button} />
export const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Button },
template: '<Button v-bind="$props" />',
});
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/vue/api/csf
to learn how to use render functions.
-->
<Story name="Basic" args={{ label: 'hello' }}>
{Template.bind({})}
</Story>
<Story
name="Basic"
args={{ label: 'hello' }}
render={(args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Button },
template: '<Button v-bind="$props" />',
})} />
```

25
docs/snippets/vue/component-story-mdx-story-by-name.mdx-3.mdx.mdx
View File

@ -7,15 +7,20 @@ import Button from './Button.vue';
<Meta title="Button" component={Button} />
export const Template = (args) => ({
components: { Button },
setup() {
return { args };
},
template: '<Button v-bind="args" />',
});
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/vue/api/csf
to learn how to use render functions.
-->
<Story name="Basic" args={{ label: 'hello' }}>
{Template.bind({})}
</Story>
<Story
name="Basic"
args={{ label: 'hello' }}
render={(args) => ({
components: { Button },
setup() {
return { args };
},
template: '<Button v-bind="args" />',
})} />
```

19
docs/snippets/vue/component-story-static-asset-cdn.js.mdx
View File

@ -3,13 +3,20 @@
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'img',
};
export const WithAnImage = () => ({
template: '<img src="https://place-hold.it/350x150" alt="My CDN placeholder"/>',
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const WithAnImage = {
render: () => ({
template: '<img src="https://place-hold.it/350x150" alt="My CDN placeholder"/>',
}),
};
```

17
docs/snippets/vue/component-story-static-asset-cdn.mdx.mdx
View File

@ -7,12 +7,15 @@ import MyComponent from './MyComponent.vue';
<Meta title="img" component={MyComponent}/>
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/vue/api/csf
to learn how to use render functions.
-->
<Story
name="withAnImage">
{() => {
return {
template: `<img src="https://place-hold.it/350x150" alt="My CDN placeholder"/>`,
};
}}
</Story>
name="withAnImage"
render={() => ({
template: `<img src="https://place-hold.it/350x150" alt="My CDN placeholder"/>`,
})} />
```

33
docs/snippets/vue/component-story-static-asset-with-import.2.js.mdx
View File

@ -5,9 +5,9 @@ import imageFile from './static/image.png';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'img',
};
@ -16,15 +16,22 @@ const image = {
alt: 'my image',
};
export const WithAnImage = () => ({
props: {
src: {
default: () => image.src,
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const WithAnImage = {
render: () => ({
props: {
src: {
default: () => image.src,
},
alt: {
default: () => image.alt,
},
},
alt: {
default: () => image.alt,
},
},
template: `<img :src="src" :alt="alt"/>`,
});
template: `<img :src="src" :alt="alt"/>`,
}),
};
```

19
docs/snippets/vue/component-story-static-asset-with-import.3.js.mdx
View File

@ -5,9 +5,9 @@ import imageFile from './static/image.png';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'img',
};
@ -16,13 +16,18 @@ const image = {
alt: 'my image',
};
export const WithAnImage = () => {
return {
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const WithAnImage = {
render: () => ({
setup() {
//👇 Returns the content of the image object create above.
//👇 Returns the content of the image object create above.
return { image };
},
template: `<img v-bind="image"/>`,
};
}),
};
```

31
docs/snippets/vue/component-story-static-asset-with-import.mdx-2.mdx.mdx
View File

@ -12,20 +12,23 @@ export const image = {
alt: 'my image',
};
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/vue/api/csf
to learn how to use render functions.
-->
<Story
name="WithAnImage">
{() => {
return {
props: {
src: {
default: () => image.src,
},
alt: {
default: () => image.alt,
},
name="withAnImage"
render={() => ({
props: {
src: {
default: () => image.src,
},
template: `<img :src="src" :alt="alt"/>`,
};
}}
</Story>
alt: {
default: () => image.alt,
},
},
template: `<img :src="src" :alt="alt"/>`,
})} />
```

23
docs/snippets/vue/component-story-static-asset-with-import.mdx-3.mdx.mdx
View File

@ -12,15 +12,18 @@ export const image = {
alt: 'my image',
};
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/vue/api/csf
to learn how to use render functions.
-->
<Story
name="WithAnImage">
{() => {
return {
setup() {
return { image };
},
template: `<img v-bind="image"/>`,
};
}}
</Story>
name="WithAnImage"
render={() => ({
setup() {
return { image };
},
template: `<img v-bind="image"/>`,
})} />
```

14
docs/snippets/vue/component-story-static-asset-without-import.js.mdx
View File

@ -3,14 +3,16 @@
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'img',
};
// Assume image.png is located in the "public" directory.
export const WithAnImage = () => ({
template: '<img src="image.png" alt="my image" />',
});
export const WithAnImage = {
render: () => ({
template: '<img src="image.png" alt="my image" />',
}),
};
```

16
docs/snippets/vue/component-story-static-asset-without-import.mdx.mdx
View File

@ -5,16 +5,10 @@ import { Meta, Story } from '@storybook/addon-docs';
<Meta title="img" component={MyComponent}/>
<!-- Assume image.png is located in the "public" directory.-->
<!-- Assume image.png is located in the "public" directory. -->
<Story
name="WithAnImage">
{() => {
return {
setup() {
return { image };
},
template: `<img src="image.png" alt="my image" />`,
};
}}
</Story>
name="WithAnImage"
render={() => ({
template: '<img src="/image.png" alt="my image" />',
})} />
```

40
docs/snippets/vue/component-story-with-accessibility.2.js.mdx
View File

@ -5,9 +5,9 @@ import Button from './Button.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Accessibility testing',
component: Button,
argTypes: {
@ -15,23 +15,29 @@ export default {
},
};
const Template = (args, { argTypes }) => ({
components: { Button },
props: Object.keys(argTypes),
template: '<Button v-bind="$props" v-on="$props" />',
});
// This is an accessible story
export const Accessible = Template.bind({});
Accessible.args = {
primary: false,
label: 'Button',
export const Accessible = {
render: (args, { argTypes }) => ({
components: { Button },
props: Object.keys(argTypes),
template: '<Button v-bind="$props" v-on="$props" />',
}),
args: {
primary: false,
label: 'Button',
},
};
// This is not
export const Inaccessible = Template.bind({});
Inaccessible.args = {
...Accessible.args,
backgroundColor: 'red',
export const Inaccessible = {
render: (args, { argTypes }) => ({
components: { Button },
props: Object.keys(argTypes),
template: '<Button v-bind="$props" v-on="$props" />',
}),
args: {
...Accessible.args,
backgroundColor: 'red',
},
};
```

38
docs/snippets/vue/component-story-with-accessibility.3.js.mdx
View File

@ -5,9 +5,9 @@ import Button from './Button.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Accessibility testing',
component: Button,
argTypes: {
@ -24,16 +24,32 @@ const Template = (args) => ({
});
// This is an accessible story
export const Accessible = Template.bind({});
Accessible.args = {
primary: false,
label: 'Button',
export const Accessible = {
render: (args) => ({
components: { Button },
setup() {
return { args };
},
template: '<Button v-bind="args" />',
}),
args: {
primary: false,
label: 'Button',
},
};
// This is not
export const Inaccessible = Template.bind({});
Inaccessible.args = {
...Accessible.args,
backgroundColor: 'red',
export const Inaccessible = {
render: (args) => ({
components: { Button },
setup() {
return { args };
},
template: '<Button v-bind="args" />',
}),
args: {
...Accessible.args,
backgroundColor: 'red',
},
};
```

28
docs/snippets/vue/component-story-with-accessibility.mdx-2.mdx.mdx
View File

@ -16,11 +16,11 @@ import Button from './Button.vue';
}
}} />
export const Template = (args, { argTypes }) => ({
components: { Button },
props: Object.keys(argTypes),
template: '<Button v-bind="$props" v-on="$props" />',
});
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/vue/api/csf
to learn how to use render functions.
-->
## This is an accessible story
@ -29,9 +29,12 @@ export const Template = (args, { argTypes }) => ({
args={{
primary: false,
label: 'Button'
}}>
{Template.bind({})}
</Story>
}}
render={(args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Button },
template: '<Button v-bind="$props" v-on="$props" />',
})} />
## This is not
@ -41,7 +44,10 @@ export const Template = (args, { argTypes }) => ({
primary: false,
label: 'Button',
backgroundColor: 'red'
}}>
{Template.bind({})}
</Story>
}}
render={(args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Button },
template: '<Button v-bind="$props" v-on="$props" />',
})} />
```

34
docs/snippets/vue/component-story-with-accessibility.mdx-3.mdx.mdx
View File

@ -16,13 +16,11 @@ import Button from './Button.vue';
}
}} />
export const Template = (args) => ({
components: { Button },
setup() {
return { args };
},
template: '<Button v-bind="args" />',
});
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/vue/api/csf
to learn how to use render functions.
-->
## This is an accessible story
@ -31,9 +29,14 @@ export const Template = (args) => ({
args={{
primary: false,
label: 'Button'
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
components: { MyButton },
setup() {
return { args };
},
template: '<Button v-bind="args" />',
})} />
## This is not
@ -43,7 +46,12 @@ export const Template = (args) => ({
primary: false,
label: 'Button',
backgroundColor: 'red'
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
components: { MyButton },
setup() {
return { args };
},
template: '<Button v-bind="args" />',
})} />
```

33
docs/snippets/vue/component-story-with-custom-render-function.js.mdx Normal file
View File

@ -0,0 +1,33 @@
```js
// MyComponent.stories.js
import Layout from './Layout.vue';
import MyComponent from './MyComponent.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'MyComponent',
component: MyComponent,
};
// This story uses a render function to fully control how the component renders.
export const Example = {
render: () => ({
components: { Layout, MyComponent },
template: `
<Layout>
<header>
<h1>Example</h1>
</header>
<article>
<MyComponent />
</article>
</Layout>
`,
}),
};
```

35
docs/snippets/vue/component-story-with-custom-render-function.ts.mdx Normal file
View File

@ -0,0 +1,35 @@
```ts
// MyComponent.stories.js
import type { Meta, Story } from '@storybook/vue'; // Replace with '@storybook/vue3' if you're working with Vue3 project
import Layout from './Layout.vue';
import MyComponent from './MyComponent.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'MyComponent',
component: MyComponent,
};
// This story uses a render function to fully control how the component renders.
export const Example: Story = {
render: () => ({
components: { Layout, MyComponent },
template: `
<Layout>
<header>
<h1>Example</h1>
</header>
<article>
<MyComponent />
</article>
</Layout>
`,
}),
};
```

74
docs/snippets/vue/documentscreen-story-msw-graphql-query.3.js.mdx
View File

@ -9,9 +9,9 @@ import { graphql } from 'msw';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'DocumentScreen',
component: DocumentScreen,
};
@ -65,37 +65,43 @@ const TestData = {
],
};
const PageTemplate = () => ({
components: { DocumentScreen, WrapperComponent },
template: `
<WrapperComponent>
<SampleGraphqlComponent />
</WrapperComponent>
`,
});
export const MockedSuccess = PageTemplate.bind({});
MockedSuccess.parameters = {
msw: [
graphql.query('AllInfoQuery', (req, res, ctx) => {
return res(ctx.data(TestData));
}),
],
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const MockedSuccess = {
render: () => ({
components: { DocumentScreen, WrapperComponent },
template: '<WrapperComponent><DocumentScreen /></WrapperComponent>',
}),
parameters: {
msw: [
graphql.query('AllInfoQuery', (req, res, ctx) => {
return res(ctx.data(TestData));
}),
],
},
};
export const MockedError = PageTemplate.bind({});
MockedError.parameters = {
msw: [
graphql.query('AllInfoQuery', (req, res, ctx) => {
return res(
ctx.delay(800),
ctx.errors([
{
message: 'Access denied',
},
])
);
}),
],
export const MockedError = {
render: () => ({
components: { DocumentScreen, WrapperComponent },
template: '<WrapperComponent><DocumentScreen /></WrapperComponent>',
}),
parameters: {
msw: [
graphql.query('AllInfoQuery', (req, res, ctx) => {
return res(
ctx.delay(800),
ctx.errors([
{
message: 'Access denied',
},
])
);
}),
],
},
};
```
```

54
docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx
View File

@ -7,9 +7,9 @@ import DocumentScreen from './YourPage.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'DocumentScreen',
component: DocumentScreen,
};
@ -63,26 +63,36 @@ const TestData = {
],
};
const PageTemplate = () => ({
components: { DocumentScreen },
template: '<DocumentScreen />',
});
export const MockedSuccess = PageTemplate.bind({});
MockedSuccess.parameters = {
msw: [
rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
return res(ctx.json(TestData));
}),
],
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const MockedSuccess = {
render: () => ({
components: { DocumentScreen },
template: '<DocumentScreen />',
}),
parameters: {
msw: [
rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
return res(ctx.json(TestData));
}),
],
},
};
export const MockedError = PageTemplate.bind({});
MockedError.parameters = {
msw: [
rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
return res(ctx.delay(800), ctx.status(403));
}),
],
export const MockedError = {
render: () => ({
components: { DocumentScreen },
template: '<DocumentScreen />',
}),
parameters: {
msw: [
rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
return res(ctx.delay(800), ctx.status(403));
}),
],
},
};
```

29
docs/snippets/vue/form-story-component-with-play-function.2.js.mdx
View File

@ -1,29 +0,0 @@
```js
// Form.stories.js
import { userEvent, within } from '@storybook/testing-library';
import LoginForm from './LoginForm.vue';
export default {
component: LoginForm,
};
export const FilledForm = {
play: async ({ args, canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
await userEvent.type(canvas.getByTestId('email'), 'email');
await userEvent.type(canvas.getByTestId('password'), 'password');
// See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
},
render: (args, { argTypes }) => ({
components: { LoginForm },
props: Object.keys(argTypes),
template: '<LoginForm @onSubmit="onSubmit" v-bind="$props"/>',
}),
};
```

30
docs/snippets/vue/form-story-component-with-play-function.3.js.mdx
View File

@ -1,30 +0,0 @@
```js
// Form.stories.js
import { userEvent, within } from '@storybook/testing-library';
import LoginForm from './LoginForm.vue';
export default {
component: LoginForm,
};
export const FilledForm = {
play: async ({ args, canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
await userEvent.type(canvas.getByTestId('email'), 'email');
await userEvent.type(canvas.getByTestId('password'), 'password');
// See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
},
render: (args) => ({
components: { LoginForm },
setup() {
return { args };
},
template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
}),
};
```

61
docs/snippets/vue/list-story-expanded.2.js.mdx
View File

@ -6,34 +6,47 @@ import ListItem from './ListItem.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
};
export const Empty = (args, { argTypes }) => ({
components: { List },
props: Object.keys(argTypes),
template: '<list v-bind="$props"/>',
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const Empty = {
render: (args, { argTypes }) => ({
components: { List },
props: Object.keys(argTypes),
template: '<List v-bind="$props"/>',
}),
};
export const OneItem = (args, { argTypes }) => ({
components: { List, ListItem },
props: Object.keys(argTypes),
template: '<list v-bind="$props"><list-item/></list>',
});
export const OneItem = {
render: (args, { argTypes }) => ({
components: { List, ListItem },
props: Object.keys(argTypes),
template: `
<List v-bind="$props">
<list-item/>
</List>`,
}),
};
export const ManyItems = (args, { argTypes }) => ({
components: { List, ListItem },
props: Object.keys(argTypes),
template: `
<list v-bind="$props">
<list-item/>
<list-item/>
<list-item/>
</list>
`,
});
export const ManyItems = {
render: (args, { argTypes }) => ({
components: { List, ListItem },
props: Object.keys(argTypes),
template: `
<List v-bind="$props">
<list-item/>
<list-item/>
<list-item/>
</List>`,
}),
};
```

75
docs/snippets/vue/list-story-expanded.3.js.mdx
View File

@ -6,40 +6,53 @@ import ListItem from './ListItem.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
};
export const Empty = (args) => ({
components: { List },
setup() {
return { args };
},
template: '<list v-bind="args"/>',
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const Empty = {
render: (args) => ({
components: { List },
setup() {
return { args };
},
template: '<List v-bind="args">',
}),
};
export const OneItem = (args) => ({
components: { List, ListItem },
setup() {
return { args };
},
template: '<list v-bind="args"><list-item/></list>',
});
export const OneItem = {
render: (args) => ({
components: { List, ListItem },
setup() {
return { args };
},
template: `
<List v-bind="args">
<list-item/>
</List>`,
}),
};
export const ManyItems = (args) => ({
components: { List, ListItem },
setup() {
return { args };
},
template: `
<list v-bind="args">
<list-item/>
<list-item/>
<list-item/>
</list>
`,
});
```
export const ManyItems = {
render: (args) => ({
components: { List, ListItem },
setup() {
return { ...args };
},
template: `
<List v-bind="args">
<list-item/>
<list-item/>
<list-item/>
</List>`,
}),
};
```

59
docs/snippets/vue/list-story-expanded.ts-2.ts.mdx
View File

@ -4,38 +4,51 @@
import List from './ListComponent.vue';
import ListItem from './ListItem.vue';
import { Meta, StoryFn } from '@storybook/vue';
import type { Meta, Story } from '@storybook/vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
} as Meta<typeof List>;
export const Empty: StoryFn<typeof List> = (args, { argTypes }) => ({
components: { List },
props: Object.keys(argTypes),
template: '<list v-bind="$props"/>',
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const Empty: Story = {
render: (args, { argTypes }) => ({
components: { List },
props: Object.keys(argTypes),
template: '<List v-bind="$props"/>',
}),
};
export const OneItem: StoryFn<typeof List> = (args, { argTypes }) => ({
components: { List, ListItem },
props: Object.keys(argTypes),
template: '<list v-bind="$props"><list-item/></list>',
});
export const OneItem: Story = {
render: (args, { argTypes }) => ({
components: { List, ListItem },
props: Object.keys(argTypes),
template: `
<List v-bind="$props">
<list-item/>
</List>`,
}),
};
export const ManyItems: StoryFn<typeof List> = (args, { argTypes }) => ({
components: { List, ListItem },
props: Object.keys(argTypes),
template: `
<list v-bind="$props">
<list-item/>
<list-item/>
<list-item/>
</list>
`,
});
export const ManyItems: Story = {
render: (args, { argTypes }) => ({
components: { List, ListItem },
props: Object.keys(argTypes),
template: `
<List v-bind="$props">
<list-item/>
<list-item/>
<list-item/>
</List>`,
}),
};
```

71
docs/snippets/vue/list-story-expanded.ts-3.ts.mdx
View File

@ -4,44 +4,57 @@
import List from './ListComponent.vue';
import ListItem from './ListItem.vue';
import { Meta, StoryFn } from '@storybook/vue3';
import type { Meta, Story } from '@storybook/vue3';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
} as Meta<typeof List>;
export const Empty: StoryFn<typeof List> = (args) => ({
components: { List },
setup() {
return { args };
},
template: '<list v-bind="args"/>',
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const Empty: Story = {
render: (args) => ({
components: { List },
setup() {
return { args };
},
template: '<List v-bind="args">',
}),
};
export const OneItem: StoryFn<typeof List> = (args) => ({
components: { List, ListItem },
setup() {
return { args };
},
template: '<list v-bind="args"><list-item/></list>',
});
export const OneItem: Story = {
render: (args) => ({
components: { List, ListItem },
setup() {
return { args };
},
template: `
<List v-bind="args">
<list-item/>
</List>`,
}),
};
export const ManyItems: StoryFn<typeof List> = (args) => ({
components: { List, ListItem },
setup() {
return { args };
},
template: `
<list v-bind="args">
<list-item/>
<list-item/>
<list-item/>
</list>
`,
});
export const ManyItems: Story = {
render: (args) => ({
components: { List, ListItem },
setup() {
return { ...args };
},
template: `
<List v-bind="args">
<list-item/>
<list-item/>
<list-item/>
</List>`,
}),
};
```

40
docs/snippets/vue/list-story-reuse-data.2.js.mdx
View File

@ -9,26 +9,32 @@ import { Selected, Unselected } from './ListItem.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
};
export const ManyItems = (args, { argTypes }) => ({
components: { List, ListItem },
props: Object.keys(argTypes),
template: `
<List v-bind="$props">
<list-item :isSelected="Selected"/>
<list-item :isSelected="Unselected"/>
<list-item :isSelected="Unselected"/>
</List>`,
});
ManyItems.args = {
Selected: Selected.args.isSelected,
Unselected: Unselected.args.isSelected,
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const ManyItems = {
render: (args, { argTypes }) => ({
components: { List, ListItem },
props: Object.keys(argTypes),
template: `
<List v-bind="$props">
<list-item :isSelected="Selected"/>
<list-item :isSelected="Unselected"/>
<list-item :isSelected="Unselected"/>
</List>`,
}),
args: {
Selected: Selected.args.isSelected,
Unselected: Unselected.args.isSelected,
},
};
```

43
docs/snippets/vue/list-story-reuse-data.3.js.mdx
View File

@ -9,29 +9,34 @@ import { Selected, Unselected } from './ListItem.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
};
export const ManyItems = (args) => ({
components: { List, ListItem },
setup() {
return { ...args };
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const ManyItems = {
render: (args) => ({
components: { List, ListItem },
setup() {
return { ...args };
},
template: `
<List v-bind="args">
<list-item :isSelected="Selected"/>
<list-item :isSelected="Unselected"/>
<list-item :isSelected="Unselected"/>
</List>`,
}),
args: {
Selected: Selected.args.isSelected,
Unselected: Unselected.args.isSelected,
},
template: `
<List v-bind="args">
<list-item :isSelected="Selected"/>
<list-item :isSelected="Unselected"/>
<list-item :isSelected="Unselected"/>
</List>`,
});
ManyItems.args={
Selected: Selected.args.isSelected,
Unselected: Unselected.args.isSelected,
};
```

38
docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx
View File

@ -4,33 +4,39 @@
import List from './ListComponent.vue';
import ListItem from './ListItem.vue';
import { Meta, StoryFn } from '@storybook/vue';
import type { Meta, Story } from '@storybook/vue';
//👇 We're importing the necessary stories from ListItem
import { Selected, Unselected } from './ListItem.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
} as Meta<typeof List>;
export const ManyItems: StoryFn<typeof List> = (args, { argTypes }) => ({
components: { List, ListItem },
props: Object.keys(argTypes),
template: `
<List v-bind="$props">
<list-item :isSelected="Selected"/>
<list-item :isSelected="Unselected"/>
<list-item :isSelected="Unselected"/>
</List>`,
});
ManyItems.args = {
Selected: Selected.args.isSelected,
Unselected: Unselected.args.isSelected,
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const ManyItems: Story = {
render: (args, { argTypes }) => ({
components: { List, ListItem },
props: Object.keys(argTypes),
template: `
<List v-bind="$props">
<list-item :isSelected="Selected"/>
<list-item :isSelected="Unselected"/>
<list-item :isSelected="Unselected"/>
</List>`,
}),
args: {
Selected: Selected.args.isSelected,
Unselected: Unselected.args.isSelected,
},
};
```

40
docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx
View File

@ -4,35 +4,41 @@
import List from './ListComponent.vue';
import ListItem from './ListItem.vue';
import { Meta, StoryFn } from '@storybook/vue3';
import type { Meta, Story } from '@storybook/vue3';
//👇 We're importing the necessary stories from ListItem
import { Selected, Unselected } from './ListItem.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
} as Meta<typeof List>;
export const ManyItems: StoryFn<typeof List> = (args) => ({
components: { List, ListItem },
setup() {
return { ...args };
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const ManyItems: Story = {
render: (args) => ({
components: { List, ListItem },
setup() {
return { ...args };
},
template: `
<List v-bind="args">
<list-item :isSelected="Selected"/>
<list-item :isSelected="Unselected"/>
<list-item :isSelected="Unselected"/>
</List>`,
}),
args: {
Selected: Selected.args.isSelected,
Unselected: Unselected.args.isSelected,
},
template: `
<List v-bind="args">
<list-item :isSelected="Selected"/>
<list-item :isSelected="Unselected"/>
<list-item :isSelected="Unselected"/>
</List>`,
});
ManyItems.args = {
Selected: Selected.args.isSelected,
Unselected: Unselected.args.isSelected,
};
```

18
docs/snippets/vue/list-story-starter.2.js.mdx
View File

@ -5,17 +5,19 @@ import List from './ListComponent.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
};
// Always an empty list, not super interesting
const Template = (args, { argTypes }) => ({
components: { List },
props: Object.keys(argTypes),
template: '<list v-bind="$props"/>',
});
export const Empty = {
render: (args, { argTypes }) => ({
components: { List },
props: Object.keys(argTypes),
template: '<List v-bind="$props"/>',
}),
};
```

22
docs/snippets/vue/list-story-starter.3.js.mdx
View File

@ -5,19 +5,21 @@ import List from './ListComponent.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
};
// Always an empty list, not super interesting
const Template = (args) => ({
components: { List },
setup() {
return { args };
},
template: '<list v-bind="args"/>',
});
export const Empty = {
render: (args) => ({
components: { List },
setup() {
return { args };
},
template: '<List v-bind="args">',
}),
};
```

16
docs/snippets/vue/list-story-starter.ts-2.ts.mdx
View File

@ -3,11 +3,11 @@
import List from './ListComponent.vue';
import { Meta, StoryFn } from '@storybook/vue';
import type { Meta, Story } from '@storybook/vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
@ -15,9 +15,11 @@ export default {
} as Meta<typeof List>;
// Always an empty list, not super interesting
const Template: StoryFn<typeof List> = (args, { argTypes }) => ({
components: { List },
props: Object.keys(argTypes),
template: '<list v-bind="$props"/>',
});
export const Empty: Story = {
render: (args, { argTypes }) => ({
components: { List },
props: Object.keys(argTypes),
template: '<List v-bind="$props"/>',
}),
};
```

20
docs/snippets/vue/list-story-starter.ts-3.ts.mdx
View File

@ -3,11 +3,11 @@
import List from './ListComponent.vue';
import { Meta, StoryFn } from '@storybook/vue3';
import type { Meta, Story } from '@storybook/vue3';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
@ -15,11 +15,13 @@ export default {
} as Meta<typeof LoginForm>;
// Always an empty list, not super interesting
const Template: StoryFn<typeof LoginForm> = (args) => ({
components: { List },
setup() {
return { args };
},
template: '<list v-bind="args"/>',
});
export const Empty: Story = {
render: (args) => ({
components: { List },
setup() {
return { args };
},
template: '<List v-bind="args">',
}),
};
```

33
docs/snippets/vue/list-story-template.2.js.mdx
View File

@ -9,13 +9,14 @@ import { Unchecked } from './ListItem.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
};
//👇 The ListTemplate construct will be spread to the existing stories.
const ListTemplate = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { List, ListItem },
@ -25,20 +26,24 @@ const ListTemplate = (args, { argTypes }) => ({
<ListItem :item="item" />
</div>
</List>
`,
`,
});
export const Empty = ListTemplate.bind({});
EmptyListTemplate.args = {
items: [],
export const Empty = {
...ListTemplate,
args: {
items: [],
},
};
export const OneItem = ListTemplate.bind({});
OneItem.args = {
items: [
{
...Unchecked.args,
},
],
export const OneItem = {
...ListTemplate,
args: {
items: [
{
...Unchecked.args,
},
],
},
};
```

60
docs/snippets/vue/list-story-template.3.js.mdx
View File

@ -9,38 +9,44 @@ import { Unchecked } from './ListItem.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
};
const ListTemplate = (args) => ({
components: { List, ListItem },
setup() {
return { args };
},
template: `
<List v-bind="args">
<div v-for="item in items" :key="item.title">
<ListItem :item="item"/>
</div>
</List>
`,
});
export const Empty = ListTemplate.bind({});
Empty.args = {
items: [],
//👇 The ListTemplate construct will be spread to the existing stories.
export const ListTemplate = {
render: (args) => ({
components: { List, ListItem },
setup() {
return { ...args };
},
template: `
<List v-bind="args">
<div v-for="item in items" :key="item.title">
<ListItem :item="item"/>
</div>
</List>
`,
}),
};
export const OneItem = ListTemplate.bind({});
OneItem.args = {
items: [
{
...Unchecked.args,
},
],
export const Empty = {
...ListTemplate,
args: {
items: [],
},
};
export const OneItem = {
...ListTemplate,
args: {
items: [
{
...Unchecked.args,
},
],
},
};
```

32
docs/snippets/vue/list-story-unchecked.2.js.mdx
View File

@ -9,23 +9,25 @@ import { Unchecked } from './ListItem.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
};
export const OneItem = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { List, ListItem },
template: `
<List v-bind="$props">
<ListItem v-bind="$props"/>
</List>
`,
});
OneItem.args = {
...Unchecked.args,
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const OneItem = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { List, ListItem },
template: '<List v-bind="$props"><ListItem v-bind="$props"/></List>',
}),
args: {
...Unchecked.args,
},
};
```

35
docs/snippets/vue/list-story-unchecked.3.js.mdx
View File

@ -9,26 +9,29 @@ import { Unchecked } from './ListItem.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
};
export const OneItem = (args) => ({
components: { List, ListItem },
setup() {
//👇 The args will now be passed down to the template
return { args };
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const OneItem = {
args: {
...Unchecked.args,
},
template: `
<List v-bind="args">
<ListItem v-bind="args"/>
</List>
`,
});
OneItem.args = {
...Unchecked.args,
render: (args) => ({
components: { List, ListItem },
setup() {
//👇 The args will now be passed down to the template
return { args };
},
template: '<List v-bind="args"><ListItem v-bind="args"/></List>',
}),
};
```

35
docs/snippets/vue/list-story-with-sub-components.2.js.mdx
View File

@ -6,23 +6,32 @@ import ListItem from './ListItem.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
};
export const Empty = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { List },
template: '<List v-bind="$props"/>',
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const Empty = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { List },
template: '<List v-bind="$props"/>',
}),
};
export const OneItem = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { List, ListItem },
template: '<List v-bind="$props"><ListItem /></List>',
});
export const OneItem = {
render: (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { List, ListItem },
template: '<List v-bind="$props"><ListItem /></List>',
}),
};
```

46
docs/snippets/vue/list-story-with-sub-components.3.js.mdx
View File

@ -6,29 +6,37 @@ import ListItem from './ListItem.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
};
export const Empty = (args) => ({
components: { List },
setup() {
//👇 The args will now be passed down to the template
return { args };
}
template: '<List v-bind="args"/>',
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const Empty = {
render: (args) => ({
components: { List },
setup() {
return { args };
},
template: '<List v-bind="args"/>',
}),
};
export const OneItem = (args) => ({
components: { List, ListItem },
setup() {
//👇 The args will now be passed down to the template
return { args };
}
template: '<List v-bind="args"><ListItem /></List>',
});
export const OneItem = {
render: (args) => ({
components: { List, ListItem },
setup() {
//👇 The args will now be passed down to the template
return { args };
},
template: '<List v-bind="args"><ListItem /></List>',
}),
};
```

25
docs/snippets/vue/loader-story.3.js.mdx
View File

@ -7,26 +7,25 @@ import fetch from 'node-fetch';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Examples/Loader',
component: TodoItem,
};
export const Primary = (args, { loaded: { todo } }) => {
return {
export const Primary = {
render: (args, { loaded: { todo } }) => ({
components: { TodoItem },
setup() {
return { args, todo: todo };
},
template: `<TodoItem :todo="todo"/>`,
};
};
Primary.loaders = [
async () => ({
todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
template: '<TodoItem :todo="todo" />',
}),
];
loaders: [
async () => ({
todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
}),
],
};
```

14
docs/snippets/vue/loader-story.mdx.mdx
View File

@ -9,21 +9,25 @@ 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.
See https://storybook.js.org/docs/7.0/vue/api/csf
to learn how to use render functions.
-->
<Story
name="Primary"
loaders={[
async () => ({
todo: await (
await fetch("https://jsonplaceholder.typicode.com/todos/1")
await fetch('https://jsonplaceholder.typicode.com/todos/1')
).json(),
}),
]}>
{(args, { loaded: { todo } }) => ({
render={(args, { loaded: { todo } }) => ({
components: { TodoItem },
setup() {
return { args, todo: todo };
},
template: `<TodoItem :todo="todo"/>`,
})}
</Story>
template: '<TodoItem :todo="todo" />',
})} />
```

61
docs/snippets/vue/login-form-with-play-function.2.js.mdx
View File

@ -9,39 +9,50 @@ import LoginForm from './LoginForm.vue';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Form',
component: LoginForm,
};
const Template = (args, { argTypes }) => ({
components: { LoginForm },
props: Object.keys(argTypes),
template: `<LoginForm v-bind="$props" v-on="$props" />`,
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/vue/api/csf
* to learn how to use render functions.
*/
export const EmptyForm = {
render: (args, { argTypes }) => ({
components: { LoginForm },
props: Object.keys(argTypes),
template: `<LoginForm v-bind="$props" v-on="$props" />`,
}),
};
export const EmptyForm = Template.bind({});
export const FilledForm = {
render: (args, { argTypes }) => ({
components: { LoginForm },
props: Object.keys(argTypes),
template: `<LoginForm v-bind="$props" v-on="$props" />`,
}),
play: async ({ canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
export const FilledForm = Template.bind({});
FilledForm.play = async ({ canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
// 👇 Simulate interactions with the component
await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
// 👇 Simulate interactions with the component
await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
// See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
// See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
// 👇 Assert DOM structure
await expect(
canvas.getByText(
'Everything is perfect. Your account is ready and we should probably get you started!'
)
).toBeInTheDocument();
// 👇 Assert DOM structure
await expect(
canvas.getByText(
'Everything is perfect. Your account is ready and we should probably get you started!'
)
).toBeInTheDocument();
},
};
```

Some files were not shown because too many files have changed in this diff Show More