From 271c230cf1e202657f84953836f24a1f8a236131 Mon Sep 17 00:00:00 2001
From: tooppaaa <clementdungler@gmail.com>
Date: Sat, 9 May 2020 11:25:54 +0200
Subject: [PATCH 1/2] cli: web-components stories homogenization

---
 .../src/generators/WEB-COMPONENTS/index.js    | 10 ++--
 .../template/.storybook/main.js               |  1 +
 .../template/stories/0-Welcome.stories.js     | 49 +++++++++++++++++++
 .../template/stories/1-Button.stories.js      | 42 ++++++++++++++++
 .../template/stories/index.stories.js         | 24 ---------
 5 files changed, 97 insertions(+), 29 deletions(-)
 create mode 100644 lib/cli/src/generators/WEB-COMPONENTS/template/stories/0-Welcome.stories.js
 create mode 100644 lib/cli/src/generators/WEB-COMPONENTS/template/stories/1-Button.stories.js
 delete mode 100644 lib/cli/src/generators/WEB-COMPONENTS/template/stories/index.stories.js

diff --git a/lib/cli/src/generators/WEB-COMPONENTS/index.js b/lib/cli/src/generators/WEB-COMPONENTS/index.js
index ad448dc92d52..6a7d4697e744 100755
--- a/lib/cli/src/generators/WEB-COMPONENTS/index.js
+++ b/lib/cli/src/generators/WEB-COMPONENTS/index.js
@@ -1,7 +1,6 @@
 import fse from 'fs-extra';
 import path from 'path';
 import {
-  getVersion,
   getVersionedPackages,
   retrievePackageJson,
   writePackageJson,
@@ -15,17 +14,18 @@ export default async (npmOptions, { storyFormat }) => {
     '@storybook/web-components',
     '@storybook/addon-actions',
     '@storybook/addon-links',
+    '@storybook/addons',
     'lit-html',
   ];
 
-  if (storyFormat === STORY_FORMAT.MDX) {
-    // TODO: handle adding of docs mode
-  }
-
   const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
 
   fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
 
+  if (storyFormat === STORY_FORMAT.MDX) {
+    // TODO: handle adding of docs mode
+  }
+
   const packageJson = await retrievePackageJson();
 
   packageJson.dependencies = packageJson.dependencies || {};
diff --git a/lib/cli/src/generators/WEB-COMPONENTS/template/.storybook/main.js b/lib/cli/src/generators/WEB-COMPONENTS/template/.storybook/main.js
index 77857c48de3f..3036098563cc 100644
--- a/lib/cli/src/generators/WEB-COMPONENTS/template/.storybook/main.js
+++ b/lib/cli/src/generators/WEB-COMPONENTS/template/.storybook/main.js
@@ -1,3 +1,4 @@
 module.exports = {
   stories: ['../stories/**/*.stories.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
 };
diff --git a/lib/cli/src/generators/WEB-COMPONENTS/template/stories/0-Welcome.stories.js b/lib/cli/src/generators/WEB-COMPONENTS/template/stories/0-Welcome.stories.js
new file mode 100644
index 000000000000..de56afdc9f1c
--- /dev/null
+++ b/lib/cli/src/generators/WEB-COMPONENTS/template/stories/0-Welcome.stories.js
@@ -0,0 +1,49 @@
+import { html } from 'lit-html';
+
+export default {
+  title: 'Welcome',
+};
+
+export const ToStorybook = () => html`<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">src/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>
+  <p>
+    See these sample
+    <a (click)="showApp.emit($event)" role="button" tabindex="0">stories</a> for a component called
+    <span class="inline-code">Button</span> .
+  </p>
+  <p>
+    Just like that, you can add your own components as stories. <br />
+    You can also edit those components and see changes right away. <br />
+    (Try editing the <span class="inline-code">Button</span> stories located at
+    <span class="inline-code">src/stories/index.js</span>.)
+  </p>
+  <p>
+    Usually we create stories with smaller UI components in the app.<br />
+    Have a look at the
+    <a
+      href="https://storybook.js.org/basics/writing-stories"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Writing Stories
+    </a>
+    section in our documentation.
+  </p>
+  <p class="note">
+    <b>NOTE:</b> <br />
+    Have a look at the <span class="inline-code">.storybook/webpack.config.js</span> to add webpack
+    loaders and plugins you are using in this project.
+  </p>
+</main>`;
+
+ToStorybook.story = {
+  name: 'to Storybook',
+};
diff --git a/lib/cli/src/generators/WEB-COMPONENTS/template/stories/1-Button.stories.js b/lib/cli/src/generators/WEB-COMPONENTS/template/stories/1-Button.stories.js
new file mode 100644
index 000000000000..b87d698a5e13
--- /dev/null
+++ b/lib/cli/src/generators/WEB-COMPONENTS/template/stories/1-Button.stories.js
@@ -0,0 +1,42 @@
+import { html } from 'lit-html';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+export default {
+  title: 'Button',
+};
+
+export const Text = () => html`
+  <button @click=${action('clicked')}>
+    Hello Button
+  </button>
+`;
+
+export const Emoji = () => html`
+  <button @click=${action('clicked')}>
+    😀 😎 👍 💯
+  </button>
+`;
+
+Emoji.story = {
+  parameters: { notes: 'My notes on a button with emojis' },
+};
+
+export const WithSomeEmojiAndAction = () => html`
+  <button @click=${action('This was clicked')}>
+    😀 😎 👍 💯
+  </button>
+`;
+
+WithSomeEmojiAndAction.story = {
+  name: 'with some emoji and action',
+  parameters: { notes: 'My notes on a button with emojis' },
+};
+
+export const ButtonWithLinkToAnotherStory = () => html`<button @click=${linkTo('Welcome')}>
+  Go to Welcome Story
+</button>`;
+
+ButtonWithLinkToAnotherStory.story = {
+  name: 'button with link to another story',
+};
diff --git a/lib/cli/src/generators/WEB-COMPONENTS/template/stories/index.stories.js b/lib/cli/src/generators/WEB-COMPONENTS/template/stories/index.stories.js
deleted file mode 100644
index 0697fe20c7b4..000000000000
--- a/lib/cli/src/generators/WEB-COMPONENTS/template/stories/index.stories.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { html } from 'lit-html';
-
-// import '../my-component.js';
-
-export default {
-  title: 'Demo',
-};
-
-export const Heading = () => html` <h1>Hello World</h1> `;
-
-export const SettingProperties = () => html`
-  <my-component .data=${{ header: 'foo', state: true }}>Hello World</my-component>
-`;
-
-export const Events = () => html`
-  <button @click=${(ev) => console.log('clicked button')}>
-    clicking will get logged to console
-  </button>
-`;
-
-export const WithFunction = () => {
-  const header = 'My Header';
-  return html` <h1>${header}</h1> `;
-};

From 1c4e3d5e7310fc6919ec765eee98be7eeedce1e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Maisse?= <gmaisse@solocal.com>
Date: Wed, 13 May 2020 22:22:23 +0200
Subject: [PATCH 2/2] feat(cli): remove `@storybook/addons` from deps installed
 when running `sb init` in a web-component project

`@storybook/addons` is already a dependency of all `@storybook/addon-XXX` packages so there is no need to add it to the root project directly.
---
 lib/cli/src/generators/WEB-COMPONENTS/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/cli/src/generators/WEB-COMPONENTS/index.js b/lib/cli/src/generators/WEB-COMPONENTS/index.js
index 6a7d4697e744..2b6159651136 100755
--- a/lib/cli/src/generators/WEB-COMPONENTS/index.js
+++ b/lib/cli/src/generators/WEB-COMPONENTS/index.js
@@ -14,7 +14,6 @@ export default async (npmOptions, { storyFormat }) => {
     '@storybook/web-components',
     '@storybook/addon-actions',
     '@storybook/addon-links',
-    '@storybook/addons',
     'lit-html',
   ];