Merge pull request #17340 from storybookjs/svelte-cli-template-csf

CLI/Svelte: Revert template stories from svelte-native to CSF

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',
+};

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 = {};

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 = {};

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,