Merge pull request #2195 from storybooks/dd/auto-import

#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/ANGULAR/template/stories/index.ts

@@ -1,44 +0,0 @@
-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';
-
-declare let module;
-
-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/.stories/index.js

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

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/angular-cli/stories/index.ts

@@ -1,44 +0,0 @@
-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';
-
-declare let module;
-
-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/.stories/index.js

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

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>);