Addon-docs: Convert repo stories to new module format (#7175)

Addon-docs: Convert repo stories to new module format

addons/storyshots/storyshots-core/src/api/integrityTestTemplate.js

@@ -16,7 +16,8 @@ function integrityTest(integrityOptions, stories2snapsConverter) {
         const possibleStoriesFiles = stories2snapsConverter.getPossibleStoriesFiles(fileName);
         return !possibleStoriesFiles.some(fs.existsSync);
       });
-      expect(abandonedStoryshots.length).toBe(0);
+
+      expect(abandonedStoryshots).toEqual([]);
     });
   });
 }

app/rax/src/client/index.js

@@ -7,4 +7,5 @@ export {
   getStorybook,
   forceReRender,
   raw,
+  load,
 } from './preview';

app/rax/src/client/preview/index.js

@@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
 import './globals';
 import render from './render';
 
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
 
 export const {
-  storiesOf,
   setAddon,
   addDecorator,
   addParameters,
@@ -15,5 +14,9 @@ export const {
   raw,
 } = clientApi;
 
+const framework = 'rax';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
 export const { configure } = configApi;
 export { forceReRender };

examples/cra-kitchen-sink/.storybook/config.js

@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/react';
+import { load, addParameters, addDecorator } from '@storybook/react';
 import { create } from '@storybook/theming';
 import { withA11y } from '@storybook/addon-a11y';
 
@@ -22,13 +22,4 @@ addParameters({
   },
 });
 
-function loadStories() {
-  // order of imports will determine the order of the stories unless a storySort is passed to the options object
-  require('../src/stories/welcome');
-
-  // automatically import all story js files that end with *.stories.js
-  const req = require.context('../src/stories', true, /\.stories\.js$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);

examples/cra-kitchen-sink/src/stories/App.stories.js

@@ -1,8 +1,15 @@
 // FIXME: svgr issue @igor-dv
 
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
 import App from '../App';
 
-storiesOf('App', module).add('full app', () => <App />);
+export default {
+  title: 'App',
+};
+
+export const fullApp = () => <App />;
+
+fullApp.story = {
+  name: 'full app',
+};

examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js

@@ -1,5 +1,8 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import LifecycleLogger from '../components/LifecycleLogger';
 
-storiesOf('Lifecycle', module).add('logging', () => <LifecycleLogger />);
+export default {
+  title: 'Lifecycle',
+};
+
+export const logging = () => <LifecycleLogger />;

examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js

@@ -1,9 +1,13 @@
 import React from 'react';
-import { storiesOf, forceReRender } from '@storybook/react';
+import { forceReRender } from '@storybook/react';
 
 let Component;
 
-storiesOf('CRA', module).add('Dynamic import', () => {
+export default {
+  title: 'CRA',
+};
+
+export const story1 = () => {
   if (!Component) {
     import('@storybook/react/demo').then(({ Button }) => {
       Component = Button;
@@ -14,4 +18,6 @@ storiesOf('CRA', module).add('Dynamic import', () => {
   }
 
   return <Component>Hello Button</Component>;
-});
+};
+
+story1.story = { name: 'Dynamic import' };

examples/cra-kitchen-sink/src/stories/force-rerender.stories.js

@@ -1,14 +1,18 @@
 import React from 'react';
-import { storiesOf, forceReRender } from '@storybook/react';
+import { forceReRender } from '@storybook/react';
 
 let count = 0;
 const increment = () => {
   count += 1;
   forceReRender();
 };
 
-storiesOf('Force ReRender', module).add('button', () => (
+export default {
+  title: 'Force ReRender',
+};
+
+export const button = () => (
   <button type="button" onClick={increment}>
     Click me to increment: {count}
   </button>
-));
+);

examples/cra-kitchen-sink/src/stories/index.stories.js

@@ -1,5 +1,5 @@
+/* eslint-disable react/destructuring-assignment */
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withInfo } from '@storybook/addon-info';
 import { Button } from '@storybook/react/demo';
@@ -23,46 +23,61 @@ const InfoButton = () => (
   </span>
 );
 
-storiesOf('Button', module)
-  .addParameters({
+export default {
+  title: 'Button',
+
+  parameters: {
     component: Button,
-  })
-  .add('with text', () => <Button onClick={action('clicked', { depth: 1 })}>Hello Button</Button>, {
+  },
+};
+
+export const story1 = () => <Button onClick={action('clicked', { depth: 1 })}>Hello Button</Button>;
+story1.story = {
+  name: 'with text',
+  parameters: {
+    options: { selectedPanel: 'storybook/actions/panel' },
+  },
+};
+
+export const story2 = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="yolo">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
+story2.story = {
+  name: 'with some emoji',
+  parameters: {
     options: { selectedPanel: 'storybook/actions/panel' },
-  })
-  .add(
-    'with some emoji',
-    () => (
-      <Button onClick={action('clicked')}>
-        <span role="img" aria-label="yolo">
-          😀 😎 👍 💯
-        </span>
-      </Button>
-    ),
-    {
-      options: { selectedPanel: 'storybook/actions/panel' },
-    }
-  )
-  .add('with notes', () => <Button>Check my notes in the notes panel</Button>, {
+  },
+};
+
+export const story3 = () => <Button>Check my notes in the notes panel</Button>;
+story3.story = {
+  name: 'with notes',
+  parameters: {
     notes: 'A very simple button',
     options: { selectedPanel: 'storybook/notes/panel' },
-  })
-  .add(
-    'with new info',
-    context => (
-      <Container>
-        <span>
-          click the <InfoButton /> label in top right for info about "{context.name}"
-        </span>
-      </Container>
-    ),
-    {
-      notes: 'Composition: Info(Notes())',
-      options: { selectedPanel: 'storybook/info/panel' },
-      decorators: [
-        withInfo(
-          'Use the [info addon](https://github.com/storybookjs/storybook/tree/master/addons/info) with its new painless API.'
-        ),
-      ],
-    }
-  );
+  },
+};
+
+export const story4 = context => (
+  <Container>
+    <span>
+      click the <InfoButton /> label in top right for info about "{context.name}"
+    </span>
+  </Container>
+);
+story4.story = {
+  name: 'with new info',
+  parameters: {
+    notes: 'Composition: Info(Notes())',
+    options: { selectedPanel: 'storybook/info/panel' },
+    decorators: [
+      withInfo(
+        'Use the [info addon](https://github.com/storybookjs/storybook/tree/master/addons/info) with its new painless API.'
+      ),
+    ],
+  },
+};

examples/cra-kitchen-sink/src/stories/long-description.stories.js

@@ -1,9 +1,12 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import centered from '@storybook/addon-centered/react';
 import { Button } from '@storybook/react/demo';
 
-storiesOf('Some really long story kind description', module)
-  .addDecorator(centered)
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>);
+export default {
+  title: 'Some really long story kind description',
+  decorators: [centered],
+};
+
+export const story1 = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+story1.story = { name: 'with text' };

examples/cra-kitchen-sink/src/stories/welcome.js

@@ -1,10 +1,14 @@
 import React from 'react';
 import { Welcome } from '@storybook/react/demo';
-import { storiesOf } from '@storybook/react';
 import { linkTo } from '@storybook/addon-links';
 
-storiesOf('Welcome', module)
-  .addParameters({
+export default {
+  title: 'Welcome',
+
+  parameters: {
     component: Welcome,
-  })
-  .add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+  },
+};
+
+export const story1 = () => <Welcome showApp={linkTo('Button')} />;
+story1.title = 'to Storybook';

examples/cra-react15/.storybook/config.js

@@ -1,14 +1,10 @@
-import { configure, addParameters } from '@storybook/react';
+import { load, addParameters } from '@storybook/react';
 import { create } from '@storybook/theming/create';
 
-function loadStories() {
-  require('../src/stories');
-}
-
 addParameters({
   options: {
     theme: create({ colorPrimary: 'hotpink', colorSecondary: 'orangered' }),
   },
 });
 
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);

examples/cra-react15/src/stories/button.stories.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+export default {
+  title: 'Button',
+  parameters: {
+    component: Button,
+  },
+};
+
+export const story1 = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+story1.story = { name: 'with text' };
+
+export const story2 = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
+story2.story = { name: 'with some emoji' };

examples/cra-react15/src/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',
+  parameters: {
+    component: Welcome,
+  },
+};
+
+export const story1 = () => <Welcome showApp={linkTo('Button')} />;
+story1.story = { name: 'to Storybook' };

examples/ember-cli/.storybook/config.js

@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/ember';
+import { load, addParameters, addDecorator } from '@storybook/ember';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -9,11 +9,4 @@ addParameters({
   },
 });
 
-function loadStories() {
-  require('../stories/index.stories');
-
-  const req = require.context('../stories', true, /\.stories\.js$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../stories', true, /\.stories\.js$/), module);