Merge pull request #10703 from storybookjs/generator_webComponentsSto…

…ries

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,
@@ -18,14 +17,14 @@ export default async (npmOptions, { storyFormat }) => {
     '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 || {};

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

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

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