#1013 autoload all *.stories.js files in cli templates

lib/cli/generators/ANGULAR/template/.storybook/config.js

@@ -2,8 +2,10 @@
 
 import { configure } from '@storybook/angular';
 
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
 function loadStories() {
-  require('../stories');
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module);

lib/cli/generators/ANGULAR/template/stories/index.stories.js

@@ -0,0 +1,46 @@
+import { storiesOf } from '@storybook/angular';
+import { withNotes } from '@storybook/addon-notes';
+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',
+    withNotes({ notes: 'My notes on a button with emojis' })(() => ({
+      component: Button,
+      props: {
+        text: '😀 😎 👍 💯',
+      },
+    }))
+  )
+  .add(
+    'with some emoji and action',
+    withNotes({ notes: 'My notes on a button with emojis' })(() => ({
+      component: Button,
+      props: {
+        text: '😀 😎 👍 💯',
+        onClick: action('This was clicked OMG'),
+      },
+    }))
+  );
+
+storiesOf('Another Button', module).add('button with link to another story', () => ({
+  component: Button,
+  props: {
+    text: 'Go to Welcome Story',
+    onClick: linkTo('Welcome'),
+  },
+}));

lib/cli/generators/METEOR/template/.storybook/config.js

@@ -1,7 +1,9 @@
 import { configure } from '@storybook/react';
 
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
 function loadStories() {
-  require('../.stories');
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module);

lib/cli/generators/REACT/template/.storybook/config.js

@@ -1,7 +1,9 @@
 import { configure } from '@storybook/react';
 
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
 function loadStories() {
-  require('../stories');
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module);

lib/cli/generators/SFC_VUE/template/.storybook/config.js

@@ -1,7 +1,9 @@
 import { configure } from '@storybook/vue'
 
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
 function loadStories() {
-  require('../src/stories')
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module)

lib/cli/generators/VUE/template/.storybook/config.js

@@ -1,7 +1,9 @@
 import { configure } from '@storybook/vue'
 
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
 function loadStories() {
-  require('../stories')
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module)

lib/cli/generators/WEBPACK_REACT/template/.storybook/config.js

@@ -1,7 +1,9 @@
 import { configure } from '@storybook/react';
 
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
 function loadStories() {
-  require('../stories');
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module);

lib/cli/test/snapshots/angular-cli/.storybook/config.js

@@ -2,8 +2,10 @@
 
 import { configure } from '@storybook/angular';
 
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
 function loadStories() {
-  require('../stories');
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module);

lib/cli/test/snapshots/angular-cli/stories/index.stories.js

@@ -0,0 +1,46 @@
+import { storiesOf } from '@storybook/angular';
+import { withNotes } from '@storybook/addon-notes';
+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',
+    withNotes({ notes: 'My notes on a button with emojis' })(() => ({
+      component: Button,
+      props: {
+        text: '😀 😎 👍 💯',
+      },
+    }))
+  )
+  .add(
+    'with some emoji and action',
+    withNotes({ notes: 'My notes on a button with emojis' })(() => ({
+      component: Button,
+      props: {
+        text: '😀 😎 👍 💯',
+        onClick: action('This was clicked OMG'),
+      },
+    }))
+  );
+
+storiesOf('Another Button', module).add('button with link to another story', () => ({
+  component: Button,
+  props: {
+    text: 'Go to Welcome Story',
+    onClick: linkTo('Welcome'),
+  },
+}));

lib/cli/test/snapshots/meteor/.storybook/config.js

@@ -1,7 +1,9 @@
 import { configure } from '@storybook/react';
 
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
 function loadStories() {
-  require('../.stories');
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module);

lib/cli/test/snapshots/react/.storybook/config.js

@@ -1,7 +1,9 @@
 import { configure } from '@storybook/react';
 
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
 function loadStories() {
-  require('../stories');
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module);

lib/cli/test/snapshots/react_project/.storybook/config.js

@@ -1,7 +1,9 @@
 import { configure } from '@storybook/react';
 
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
 function loadStories() {
-  require('../stories');
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module);

lib/cli/test/snapshots/react_project/stories/index.stories.js

@@ -0,0 +1,13 @@
+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')}>😀 😎 👍 💯</Button>);

lib/cli/test/snapshots/sfc_vue/.storybook/config.js

@@ -1,7 +1,9 @@
 import { configure } from '@storybook/vue'
 
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
 function loadStories() {
-  require('../src/stories')
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module)

lib/cli/test/snapshots/vue/.storybook/config.js

@@ -1,7 +1,9 @@
 import { configure } from '@storybook/vue'
 
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
 function loadStories() {
-  require('../stories')
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module)

lib/cli/test/snapshots/webpack_react/.storybook/config.js

@@ -1,7 +1,9 @@
 import { configure } from '@storybook/react';
 
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
 function loadStories() {
-  require('../stories');
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module);

lib/cli/test/snapshots/webpack_react/stories/index.stories.js

@@ -0,0 +1,13 @@
+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')}>😀 😎 👍 💯</Button>);