From f0e3a16778c766645c1ae9d30e2d3cb5ddd4dd01 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Sat, 20 Jul 2019 16:59:03 +0800
Subject: [PATCH] CLI templates: Angular => module format

---
 .../ANGULAR/template/.storybook/config.js     |  9 +---
 .../template/src/stories/Button.stories.ts    | 51 +++++++++++++++++++
 .../template/src/stories/Welcome.stories.ts   | 14 +++++
 .../template/src/stories/index.stories.ts     | 47 -----------------
 4 files changed, 67 insertions(+), 54 deletions(-)
 create mode 100644 lib/cli/generators/ANGULAR/template/src/stories/Button.stories.ts
 create mode 100644 lib/cli/generators/ANGULAR/template/src/stories/Welcome.stories.ts
 delete mode 100644 lib/cli/generators/ANGULAR/template/src/stories/index.stories.ts

diff --git a/lib/cli/generators/ANGULAR/template/.storybook/config.js b/lib/cli/generators/ANGULAR/template/.storybook/config.js
index e9cb2308d98..a466ceb9f08 100644
--- a/lib/cli/generators/ANGULAR/template/.storybook/config.js
+++ b/lib/cli/generators/ANGULAR/template/.storybook/config.js
@@ -1,9 +1,4 @@
-import { configure } from '@storybook/angular';
+import { load } from '@storybook/angular';
 
 // automatically import all files ending in *.stories.ts
-const req = require.context('../src/stories', true, /\.stories\.ts$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.ts$/), module);
diff --git a/lib/cli/generators/ANGULAR/template/src/stories/Button.stories.ts b/lib/cli/generators/ANGULAR/template/src/stories/Button.stories.ts
new file mode 100644
index 00000000000..7ff57f3af13
--- /dev/null
+++ b/lib/cli/generators/ANGULAR/template/src/stories/Button.stories.ts
@@ -0,0 +1,51 @@
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { Button } from '@storybook/angular/demo';
+
+export default {
+  title: 'Button',
+};
+
+export const text = () => ({
+  component: Button,
+  props: {
+    text: 'Hello Button',
+  },
+});
+
+export const emoji = () => ({
+  component: Button,
+  props: {
+    text: '😀 😎 👍 💯',
+  },
+});
+
+emoji.story = {
+  parameters: { notes: 'My notes on a button with emojis' },
+};
+
+export const withSomeEmojiAndAction = () => ({
+  component: Button,
+  props: {
+    text: '😀 😎 👍 💯',
+    onClick: action('This was clicked OMG'),
+  },
+});
+
+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',
+    onClick: linkTo('Welcome'),
+  },
+});
+
+buttonWithLinkToAnotherStory.story = {
+  name: 'button with link to another story',
+};
diff --git a/lib/cli/generators/ANGULAR/template/src/stories/Welcome.stories.ts b/lib/cli/generators/ANGULAR/template/src/stories/Welcome.stories.ts
new file mode 100644
index 00000000000..c15fa411f64
--- /dev/null
+++ b/lib/cli/generators/ANGULAR/template/src/stories/Welcome.stories.ts
@@ -0,0 +1,14 @@
+import { Welcome } from '@storybook/angular/demo';
+
+export default {
+  title: 'Welcome',
+};
+
+export const toStorybook = () => ({
+  component: Welcome,
+  props: {},
+});
+
+toStorybook.story = {
+  name: 'to Storybook',
+};
diff --git a/lib/cli/generators/ANGULAR/template/src/stories/index.stories.ts b/lib/cli/generators/ANGULAR/template/src/stories/index.stories.ts
deleted file mode 100644
index 6ad38845f6a..00000000000
--- a/lib/cli/generators/ANGULAR/template/src/stories/index.stories.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { storiesOf } from '@storybook/angular';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import { Welcome, Button } from '@storybook/angular/demo';
-
-storiesOf('Welcome', module).add('to Storybook', () => ({
-  component: Welcome,
-  props: {},
-}));
-
-storiesOf('Button', module)
-  .add('with text', () => ({
-    component: Button,
-    props: {
-      text: 'Hello Button',
-    },
-  }))
-  .add(
-    'with some emoji',
-    () => ({
-      component: Button,
-      props: {
-        text: '😀 😎 👍 💯',
-      },
-    }),
-    { notes: 'My notes on a button with emojis' }
-  )
-  .add(
-    'with some emoji and action',
-    () => ({
-      component: Button,
-      props: {
-        text: '😀 😎 👍 💯',
-        onClick: action('This was clicked OMG'),
-      },
-    }),
-    { notes: 'My notes on a button with emojis' }
-  );
-
-storiesOf('Another Button', module).add('button with link to another story', () => ({
-  component: Button,
-  props: {
-    text: 'Go to Welcome Story',
-    onClick: linkTo('Welcome'),
-  },
-}));