From 166785f93ceef93adee39146af24d3814cdff543 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Sat, 20 Jul 2019 16:46:51 +0800
Subject: [PATCH] CLI templates: react => module format

---
 .../REACT/template/.storybook/config.js       |  9 ++-------
 .../REACT/template/stories/Button.stories.js  | 17 +++++++++++++++++
 .../REACT/template/stories/Welcome.stories.js | 13 +++++++++++++
 .../REACT/template/stories/index.stories.js   | 19 -------------------
 4 files changed, 32 insertions(+), 26 deletions(-)
 create mode 100644 lib/cli/generators/REACT/template/stories/Button.stories.js
 create mode 100644 lib/cli/generators/REACT/template/stories/Welcome.stories.js
 delete mode 100644 lib/cli/generators/REACT/template/stories/index.stories.js

diff --git a/lib/cli/generators/REACT/template/.storybook/config.js b/lib/cli/generators/REACT/template/.storybook/config.js
index 639b168f733..924c2f16cf7 100644
--- a/lib/cli/generators/REACT/template/.storybook/config.js
+++ b/lib/cli/generators/REACT/template/.storybook/config.js
@@ -1,9 +1,4 @@
-import { configure } from '@storybook/react';
+import { load } from '@storybook/react';
 
 // automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /\.stories\.js$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../stories', true, /\.stories\.js$/), module);
diff --git a/lib/cli/generators/REACT/template/stories/Button.stories.js b/lib/cli/generators/REACT/template/stories/Button.stories.js
new file mode 100644
index 00000000000..2d2526055de
--- /dev/null
+++ b/lib/cli/generators/REACT/template/stories/Button.stories.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+export default {
+  title: 'Button',
+};
+
+export const text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+
+export const emoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
diff --git a/lib/cli/generators/REACT/template/stories/Welcome.stories.js b/lib/cli/generators/REACT/template/stories/Welcome.stories.js
new file mode 100644
index 00000000000..fe4de2145a6
--- /dev/null
+++ b/lib/cli/generators/REACT/template/stories/Welcome.stories.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+  title: 'Welcome',
+};
+
+export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+toStorybook.story = {
+  name: 'to Storybook',
+};
diff --git a/lib/cli/generators/REACT/template/stories/index.stories.js b/lib/cli/generators/REACT/template/stories/index.stories.js
deleted file mode 100644
index aa04241802d..00000000000
--- a/lib/cli/generators/REACT/template/stories/index.stories.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import { Button, Welcome } from '@storybook/react/demo';
-
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
-
-storiesOf('Button', module)
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>
-      <span role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </span>
-    </Button>
-  ));