From f1734b6d773cd729c04ff15a25e36a1c2b018268 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 27 Jan 2022 00:49:35 +0800 Subject: [PATCH] CLI/Svelte: Convert stories from svelte-native to CSF --- .../src/frameworks/svelte/Button.stories.js | 51 +++++++++++++++++ .../frameworks/svelte/Button.stories.svelte | 57 ------------------- .../src/frameworks/svelte/Header.stories.js | 29 ++++++++++ .../frameworks/svelte/Header.stories.svelte | 32 ----------- lib/cli/src/frameworks/svelte/Page.stories.js | 29 ++++++++++ .../src/frameworks/svelte/Page.stories.svelte | 32 ----------- lib/cli/src/generators/SVELTE/index.ts | 1 - 7 files changed, 109 insertions(+), 122 deletions(-) create mode 100644 lib/cli/src/frameworks/svelte/Button.stories.js delete mode 100644 lib/cli/src/frameworks/svelte/Button.stories.svelte create mode 100644 lib/cli/src/frameworks/svelte/Header.stories.js delete mode 100644 lib/cli/src/frameworks/svelte/Header.stories.svelte create mode 100644 lib/cli/src/frameworks/svelte/Page.stories.js delete mode 100644 lib/cli/src/frameworks/svelte/Page.stories.svelte diff --git a/lib/cli/src/frameworks/svelte/Button.stories.js b/lib/cli/src/frameworks/svelte/Button.stories.js new file mode 100644 index 000000000000..d700639dba2d --- /dev/null +++ b/lib/cli/src/frameworks/svelte/Button.stories.js @@ -0,0 +1,51 @@ +import Button from './Button.svelte'; + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +// More on argTypes: https://storybook.js.org/docs/svelte/api/argtypes +export default { + title: 'Example/Button', + component: Button, + argTypes: { + backgroundColor: { control: 'color' }, + label: { control: 'text' }, + onClick: { action: 'onClick' }, + primary: { control: 'boolean' }, + size: { + control: { type: 'select' }, + options: ['small', 'medium', 'large'], + }, + }, +}; + +// More on component templates: https://storybook.js.org/docs/svelte/writing-stories/introduction#using-args +const Template = (args) => ({ + Component: Button, + props: args, + on: { + click: args.onClick, + }, +}); + +// More on args: https://storybook.js.org/docs/svelte/writing-stories/args +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', +}; diff --git a/lib/cli/src/frameworks/svelte/Button.stories.svelte b/lib/cli/src/frameworks/svelte/Button.stories.svelte deleted file mode 100644 index 046635b93fd0..000000000000 --- a/lib/cli/src/frameworks/svelte/Button.stories.svelte +++ /dev/null @@ -1,57 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/lib/cli/src/frameworks/svelte/Header.stories.js b/lib/cli/src/frameworks/svelte/Header.stories.js new file mode 100644 index 000000000000..41497d78558d --- /dev/null +++ b/lib/cli/src/frameworks/svelte/Header.stories.js @@ -0,0 +1,29 @@ +import Header from './Header.svelte'; + +export default { + title: 'Example/Header', + component: Header, + argTypes: { + onLogin: { action: 'onLogin' }, + onLogout: { action: 'onLogout' }, + onCreateAccount: { action: 'onCreateAccount' }, + }, +}; + +const Template = (args) => ({ + Component: Header, + props: args, + on: { + login: args.onLogin, + logout: args.onLogout, + createAccount: args.onCreateAccount, + }, +}); + +export const LoggedIn = Template.bind({}); +LoggedIn.args = { + user: {}, +}; + +export const LoggedOut = Template.bind({}); +LoggedOut.args = {}; diff --git a/lib/cli/src/frameworks/svelte/Header.stories.svelte b/lib/cli/src/frameworks/svelte/Header.stories.svelte deleted file mode 100644 index edd67627b1fd..000000000000 --- a/lib/cli/src/frameworks/svelte/Header.stories.svelte +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - diff --git a/lib/cli/src/frameworks/svelte/Page.stories.js b/lib/cli/src/frameworks/svelte/Page.stories.js new file mode 100644 index 000000000000..809c66be70c1 --- /dev/null +++ b/lib/cli/src/frameworks/svelte/Page.stories.js @@ -0,0 +1,29 @@ +import Page from './Page.svelte'; + +export default { + title: 'Example/Page', + component: Page, + argTypes: { + onLogin: { action: 'onLogin' }, + onLogout: { action: 'onLogout' }, + onCreateAccount: { action: 'onCreateAccount' }, + }, +}; + +const Template = (args) => ({ + Component: Page, + props: args, + on: { + login: args.onLogin, + logout: args.onLogout, + createAccount: args.onCreateAccount, + }, +}); + +export const LoggedIn = Template.bind({}); +LoggedIn.args = { + user: {}, +}; + +export const LoggedOut = Template.bind({}); +LoggedOut.args = {}; diff --git a/lib/cli/src/frameworks/svelte/Page.stories.svelte b/lib/cli/src/frameworks/svelte/Page.stories.svelte deleted file mode 100644 index 336a64ac62ea..000000000000 --- a/lib/cli/src/frameworks/svelte/Page.stories.svelte +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - diff --git a/lib/cli/src/generators/SVELTE/index.ts b/lib/cli/src/generators/SVELTE/index.ts index f4f380870f4c..a5b5c9c0879e 100644 --- a/lib/cli/src/generators/SVELTE/index.ts +++ b/lib/cli/src/generators/SVELTE/index.ts @@ -35,7 +35,6 @@ const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'svelte', { extraPackages: ['svelte', 'svelte-loader'], - extraAddons: ['@storybook/addon-svelte-csf'], extensions: ['js', 'jsx', 'ts', 'tsx', 'svelte'], extraMain, commonJs,