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

#1013 autoload all *.stories.js files in cli templates
storybookjs · Oct 31, 2017 · f051082 · f051082
2 parents d42e4c1 + 1d0d679
commit f051082
Show file tree

Hide file tree

Showing 30 changed files with 157 additions and 141 deletions.
diff --git a/lib/cli/generators/ANGULAR/template/.storybook/config.js b/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);
diff --git a/lib/cli/generators/ANGULAR/template/stories/index.stories.js b/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'),
+  },
+}));
diff --git a/lib/cli/generators/ANGULAR/template/stories/index.ts b/lib/cli/generators/ANGULAR/template/stories/index.ts
diff --git a/lib/cli/generators/METEOR/template/.stories/index.js b/lib/cli/generators/METEOR/template/.stories/index.js
diff --git a/lib/cli/generators/METEOR/template/.storybook/config.js b/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);
diff --git a/...enerators/REACT/template/stories/index.js → .../METEOR/template/stories/index.stories.js b/...enerators/REACT/template/stories/index.js → .../METEOR/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
@@ -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);
diff --git a/...s/WEBPACK_REACT/template/stories/index.js → ...s/REACT/template/stories/index.stories.js b/...s/WEBPACK_REACT/template/stories/index.js → ...s/REACT/template/stories/index.stories.js
diff --git a/lib/cli/generators/SFC_VUE/template/.storybook/config.js b/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)
diff --git a/...ors/SFC_VUE/template/src/stories/index.js → ...VUE/template/src/stories/index.stories.js b/...ors/SFC_VUE/template/src/stories/index.js → ...VUE/template/src/stories/index.stories.js
diff --git a/lib/cli/generators/VUE/template/.storybook/config.js b/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)
diff --git a/.../generators/VUE/template/stories/index.js → ...ors/VUE/template/stories/index.stories.js b/.../generators/VUE/template/stories/index.js → ...ors/VUE/template/stories/index.stories.js
diff --git a/lib/cli/generators/WEBPACK_REACT/template/.storybook/config.js b/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);
diff --git a/...cli/test/snapshots/react/stories/index.js → ...K_REACT/template/stories/index.stories.js b/...cli/test/snapshots/react/stories/index.js → ...K_REACT/template/stories/index.stories.js
diff --git a/lib/cli/test/snapshots/angular-cli/.storybook/config.js b/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);
diff --git a/lib/cli/test/snapshots/angular-cli/stories/index.stories.js b/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'),
+  },
+}));
diff --git a/lib/cli/test/snapshots/angular-cli/stories/index.ts b/lib/cli/test/snapshots/angular-cli/stories/index.ts
diff --git a/lib/cli/test/snapshots/meteor/.stories/index.js b/lib/cli/test/snapshots/meteor/.stories/index.js
diff --git a/lib/cli/test/snapshots/meteor/.storybook/config.js b/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);
diff --git a/.../snapshots/react_project/stories/index.js → ...snapshots/meteor/stories/index.stories.js b/.../snapshots/react_project/stories/index.js → ...snapshots/meteor/stories/index.stories.js
diff --git a/lib/cli/test/snapshots/react/.storybook/config.js b/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);
diff --git a/.../snapshots/webpack_react/stories/index.js → .../snapshots/react/stories/index.stories.js b/.../snapshots/webpack_react/stories/index.js → .../snapshots/react/stories/index.stories.js
diff --git a/lib/cli/test/snapshots/react_project/.storybook/config.js b/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);
diff --git a/lib/cli/test/snapshots/react_project/stories/index.stories.js b/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>);
diff --git a/lib/cli/test/snapshots/sfc_vue/.storybook/config.js b/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)
diff --git a/...st/snapshots/sfc_vue/src/stories/index.js → ...hots/sfc_vue/src/stories/index.stories.js b/...st/snapshots/sfc_vue/src/stories/index.js → ...hots/sfc_vue/src/stories/index.stories.js
diff --git a/lib/cli/test/snapshots/vue/.storybook/config.js b/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)
diff --git a/lib/cli/test/snapshots/vue/stories/index.js → ...st/snapshots/vue/stories/index.stories.js b/lib/cli/test/snapshots/vue/stories/index.js → ...st/snapshots/vue/stories/index.stories.js
diff --git a/lib/cli/test/snapshots/webpack_react/.storybook/config.js b/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);
diff --git a/lib/cli/test/snapshots/webpack_react/stories/index.stories.js b/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>);