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

---
 .../PREACT/template/.storybook/config.js      |  9 ++------
 .../PREACT/template/stories/Button.stories.js | 19 +++++++++++++++++
 .../template/stories/Welcome.stories.js       | 15 +++++++++++++
 .../PREACT/template/stories/index.stories.js  | 21 -------------------
 4 files changed, 36 insertions(+), 28 deletions(-)
 create mode 100644 lib/cli/generators/PREACT/template/stories/Button.stories.js
 create mode 100644 lib/cli/generators/PREACT/template/stories/Welcome.stories.js
 delete mode 100644 lib/cli/generators/PREACT/template/stories/index.stories.js

diff --git a/lib/cli/generators/PREACT/template/.storybook/config.js b/lib/cli/generators/PREACT/template/.storybook/config.js
index f28fdabd458..6779717ae05 100644
--- a/lib/cli/generators/PREACT/template/.storybook/config.js
+++ b/lib/cli/generators/PREACT/template/.storybook/config.js
@@ -1,9 +1,4 @@
-import { configure } from '@storybook/preact';
+import { load } from '@storybook/preact';
 
 // 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/PREACT/template/stories/Button.stories.js b/lib/cli/generators/PREACT/template/stories/Button.stories.js
new file mode 100644
index 00000000000..c4c4e533038
--- /dev/null
+++ b/lib/cli/generators/PREACT/template/stories/Button.stories.js
@@ -0,0 +1,19 @@
+/** @jsx h */
+import { h } from 'preact';
+import { action } from '@storybook/addon-actions';
+
+import Button from './Button';
+
+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/PREACT/template/stories/Welcome.stories.js b/lib/cli/generators/PREACT/template/stories/Welcome.stories.js
new file mode 100644
index 00000000000..0d0669ee407
--- /dev/null
+++ b/lib/cli/generators/PREACT/template/stories/Welcome.stories.js
@@ -0,0 +1,15 @@
+/** @jsx h */
+import { h } from 'preact';
+import { linkTo } from '@storybook/addon-links';
+
+import Welcome from './Welcome';
+
+export default {
+  title: 'Welcome',
+};
+
+export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+toStorybook.story = {
+  name: 'to Storybook',
+};
diff --git a/lib/cli/generators/PREACT/template/stories/index.stories.js b/lib/cli/generators/PREACT/template/stories/index.stories.js
deleted file mode 100644
index 6702ffd81bd..00000000000
--- a/lib/cli/generators/PREACT/template/stories/index.stories.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/** @jsx h */
-import { h } from 'preact';
-
-import { storiesOf } from '@storybook/preact';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import Welcome from './Welcome';
-import Button from './Button';
-
-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>
-  ));