Merge pull request #10705 from storybookjs/generator_html

CLI: html stories homogenization

lib/cli/src/generators/HTML/index.js

@@ -9,7 +9,8 @@ import {
 import { STORY_FORMAT } from '../../project_types';
 
 export default async (npmOptions, { storyFormat }) => {
-  const packages = ['@storybook/html'];
+  const packages = ['@storybook/html', '@storybook/addon-actions', '@storybook/addon-links'];
+
   const versionedPackages = await getVersionedPackages(npmOptions, ...packages);
   if (storyFormat === STORY_FORMAT.MDX) {
     packages.push('@storybook/addon-docs');

lib/cli/src/generators/HTML/template-csf/.storybook/main.js

@@ -1,3 +1,4 @@
 module.exports = {
   stories: ['../stories/**/*.stories.js'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
 };

lib/cli/src/generators/HTML/template-csf/stories/0-Welcome.stories.js

@@ -0,0 +1,48 @@
+export default {
+  title: 'Welcome',
+};
+
+export const ToStorybook = () => `
+<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/1-Button.stories.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/HTML/template-csf/stories/1-Button.stories.js

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

lib/cli/src/generators/HTML/template-csf/stories/index.stories.js

@@ -1,13 +0,0 @@
-export default {
-  title: 'Demo',
-};
-
-export const Heading = () => '<h1>Hello World</h1>';
-
-export const Button = () => {
-  const btn = document.createElement('button');
-  btn.type = 'button';
-  btn.innerText = 'Hello Button';
-  btn.addEventListener('click', (e) => console.log(e));
-  return btn;
-};