cli: svelte stories homogenization

lib/cli/src/generators/SVELTE/template-csf/stories/0-welcome.stories.js

@@ -0,0 +1,15 @@
+import Welcome from './welcome.svelte';
+
+export default {
+  title: 'Welcome',
+  component: Welcome,
+};
+
+export const ToStorybook = () => ({
+  Component: Welcome,
+  props: {},
+});
+
+ToStorybook.story = {
+  name: 'to Storybook',
+};

lib/cli/src/generators/SVELTE/template-csf/stories/1-button.stories.js

@@ -0,0 +1,56 @@
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import Button from './button.svelte';
+
+export default {
+  title: 'Button',
+  component: Button,
+};
+
+export const Text = () => ({
+  Component: Button,
+  props: { text: 'Hello Button' },
+  on: { click: action('clicked') },
+});
+
+export const Emoji = () => ({
+  Component: Button,
+  props: {
+    text: '😀 😎 👍 💯',
+  },
+  on: { click: action('clicked') },
+});
+
+Emoji.story = {
+  parameters: { notes: 'My notes on a button with emojis' },
+};
+
+export const WithSomeEmojiAndAction = () => ({
+  Component: Button,
+  props: {
+    text: '😀 😎 👍 💯',
+  },
+  on: {
+    click: action('This was clicked'),
+  },
+});
+
+WithSomeEmojiAndAction.story = {
+  name: 'with some emoji and action',
+  parameters: { notes: 'My notes on a button with emojis' },
+};
+
+export const ButtonWithLinkToAnotherStory = () => ({
+  Component: Button,
+  props: {
+    text: 'Go to Welcome Story',
+  },
+  on: {
+    click: linkTo('Welcome'),
+  },
+});
+
+ButtonWithLinkToAnotherStory.story = {
+  name: 'button with link to another story',
+};

lib/cli/src/generators/SVELTE/template-csf/stories/welcome.svelte

@@ -0,0 +1,37 @@
+<script>
+
+</script>
+
+<style>
+  main {
+    padding: 15px;
+    line-height: 1.4;
+    font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
+    background-color: #ffffff;
+  }
+
+  .inline-code {
+    font-size: 15px;
+    font-weight: 600;
+    padding: 2px 5px;
+    border: 1px solid #eae9e9;
+    border-radius: 4px;
+    background-color: #f3f2f2;
+    color: #3a3a3a;
+  }
+</style>
+
+<main>
+  <h1>Welcome to storybook</h1>
+  <p>This is a UI component dev environment for your app.</p>
+  <p>
+    We've added some basic stories inside the
+    <span class="inline-code">stories</span>
+    directory.
+    <br />
+    A story is a single state of one or more UI components. You can have as many stories as you
+    want.
+    <br />
+    (Basically a story is like a visual test case.)
+  </p>
+</main>