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

CLI: use CSF for svelete during initialization

Browse Source
This commit is contained in:
Clément DUNGLER 2021-03-27 20:50:54 +01:00
parent 6a937b6d03
commit e2fe77dff9
6 changed files with 116 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
lib/cli/src/frameworks/svelte/Button.stories.js
View File

@ -1,46 +0,0 @@
import Button from './Button.svelte';
export default {
title: 'Example/Button',
component: Button,
argTypes: {
label: { control: 'text' },
primary: { control: 'boolean' },
backgroundColor: { control: 'color' },
size: {
control: { type: 'select', options: ['small', 'medium', 'large'] },
},
onClick: { action: 'onClick' },
},
};
const Template = ({ onClick, ...args }) => ({
Component: Button,
props: args,
on: {
click: onClick,
},
});
export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Button',
};
export const Secondary = Template.bind({});
Secondary.args = {
label: 'Button',
};
export const Large = Template.bind({});
Large.args = {
size: 'large',
label: 'Button',
};
export const Small = Template.bind({});
Small.args = {
size: 'small',
label: 'Button',
};

52
lib/cli/src/frameworks/svelte/Button.stories.svelte Normal file
View File

@ -0,0 +1,52 @@
<script>
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
import Button from "./Button.svelte";
</script>
<Meta
title="Example/Button"
component={Button}
argTypes={{
label: { control: "text" },
primary: { control: "boolean" },
backgroundColor: { control: "color" },
size: {
control: { type: "select", options: ["small", "medium", "large"] },
},
onClick: { action: "onClick" },
}}
/>
<Template let:args>
<Button {...args} on:click={args.onClick} />
</Template>
<Story
name="Primary"
args={{
primary: true,
label: "Button",
}}
/>
<Story
name="Secondary"
args={{
label: "Button",
}}
/>
<Story
name="Large"
args={{
size: "large",
label: "Button",
}}
/>
<Story
name="Small"
args={{
size: "small",
label: "Button",
}}
/>

29
lib/cli/src/frameworks/svelte/Header.stories.js
View File

@ -1,29 +0,0 @@
import Header from './Header.svelte';
export default {
title: 'Example/Header',
component: Header,
argTypes: {
onLogin: { action: 'onLogin' },
onLogout: { action: 'onLogout' },
onCreateAccount: { action: 'onCreateAccount' },
},
};
const Template = ({ onLogin, onLogout, onCreateAccount, ...args }) => ({
Component: Header,
props: args,
on: {
login: onLogin,
logout: onLogout,
createAccount: onCreateAccount,
},
});
export const LoggedIn = Template.bind({});
LoggedIn.args = {
user: {},
};
export const LoggedOut = Template.bind({});
LoggedOut.args = {};

32
lib/cli/src/frameworks/svelte/Header.stories.svelte Normal file
View File

@ -0,0 +1,32 @@
<script>
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
import Header from "./Header.svelte";
</script>
<Meta
title="Example/Header"
component={Header}
argTypes={{
onLogin: { action: "onLogin" },
onLogout: { action: "onLogout" },
onCreateAccount: { action: "onCreateAccount" },
}}
/>
<Template let:args>
<Header
{...args}
on:login={args.onLogin}
on:logout={args.onLogout}
on:createAccount={args.onCreateAccount}
/>
</Template>
<Story
name="LoggedIn"
args={{
user: {},
}}
/>
<Story name="LoggedOut" args={{}} />

32
lib/cli/src/frameworks/svelte/Page.stories.js
View File

@ -1,32 +0,0 @@
import Page from './Page.svelte';
import * as HeaderStories from './Header.stories';
export default {
title: 'Example/Page',
component: Page,
argTypes: {
onLogin: { action: 'onLogin' },
onLogout: { action: 'onLogout' },
onCreateAccount: { action: 'onCreateAccount' },
},
};
const Template = ({ onLogin, onLogout, onCreateAccount, ...args }) => ({
Component: Page,
props: args,
on: {
login: onLogin,
logout: onLogout,
createAccount: onCreateAccount,
},
});
export const LoggedIn = Template.bind({});
LoggedIn.args = {
...HeaderStories.LoggedIn.args,
};
export const LoggedOut = Template.bind({});
LoggedOut.args = {
...HeaderStories.LoggedOut.args,
};

32
lib/cli/src/frameworks/svelte/Page.stories.svelte Normal file
View File

@ -0,0 +1,32 @@
<script>
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
import Page from "./Page.svelte";
</script>
<Meta
title="Example/Page"
component={Page}
argTypes={{
onLogin: { action: "onLogin" },
onLogout: { action: "onLogout" },
onCreateAccount: { action: "onCreateAccount" },
}}
/>
<Template let:args>
<Page
{...args}
on:login={args.onLogin}
on:logout={args.onLogout}
on:createAccount={args.onCreateAccount}
/>
</Template>
<Story
name="LoggedIn"
args={{
user: {},
}}
/>
<Story name="LoggedOut" args={{}} />