Merge branch 'master' into release/3.3

# Conflicts: # addons/comments/src/manager/components/CommentItem/index.js # addons/comments/src/manager/containers/CommentsPanel/dataStore.js # addons/comments/src/manager/containers/CommentsPanel/index.js # addons/info/src/components/PropTable.js # lib/cli/bin/generate.js # lib/cli/generators/UPDATE_PACKAGE_ORGANIZATIONS/index.js # lib/ui/src/modules/ui/components/addon_panel/index.test.js # scripts/test.js
storybookjs · Nov 2, 2017 · f20d860 · f20d860
2 parents e365f8d + 526f9e9
commit f20d860
Show file tree

Hide file tree

Showing 41 changed files with 98 additions and 74 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,7 +1,7 @@
 defaults: &defaults
   working_directory: /tmp/storybook
   docker:
-    - image: circleci/node:latest
+    - image: circleci/node:8.9
 
 version: 2
 dependencies:

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -74,6 +74,7 @@ module.exports = {
     'jsx-a11y/accessible-emoji': ignore,
     'jsx-a11y/href-no-hash': ignore,
     'jsx-a11y/label-has-for': ignore,
+    'jsx-a11y/click-events-have-key-events': warn,
     'jsx-a11y/anchor-is-valid': [warn, { aspects: ['invalidHref'] }],
     'react/no-unescaped-entities': ignore,
   },

diff --git a/.github/stale.yml b/.github/stale.yml
@@ -1,7 +1,7 @@
 # Number of days of inactivity before an issue becomes stale
-daysUntilStale: 85
+daysUntilStale: 45
 # Number of days of inactivity before a stale issue is closed
-daysUntilClose: 5
+daysUntilClose: 15
 # Issues with these labels will never be considered stale
 exemptLabels:
   - bug

diff --git a/addons/info/src/components/Node.js b/addons/info/src/components/Node.js
@@ -31,7 +31,7 @@ function getData(element) {
   }
 
   data.children = element.props.children;
-  const type = element.type;
+  const { type } = element;
 
   if (typeof type === 'string') {
     data.name = type;

diff --git a/addons/info/src/components/PropVal.js b/addons/info/src/components/PropVal.js
@@ -76,7 +76,7 @@ function previewObject(val, maxPropObjectKeys) {
 
 export default function PropVal(props) {
   const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = props;
-  let val = props.val;
+  let { val } = props;
   let braceWrap = true;
   let content = null;
 

diff --git a/addons/info/src/components/Props.js b/addons/info/src/components/Props.js
@@ -11,7 +11,7 @@ const stylesheet = {
 export default function Props(props) {
   const { maxPropsIntoLine, maxPropArrayLength, maxPropObjectKeys, maxPropStringLength } = props;
   const nodeProps = props.node.props;
-  const defaultProps = props.node.type.defaultProps;
+  const { defaultProps } = props.node.type;
   if (!nodeProps || typeof nodeProps !== 'object') {
     return <span />;
   }

diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js
@@ -12,7 +12,7 @@ import Node from './Node';
 import { Pre } from './markdown';
 
 global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || [];
-const STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES;
+const { STORYBOOK_REACT_CLASSES } = global;
 
 const stylesheet = {
   link: {

diff --git a/addons/info/src/index.test.js b/addons/info/src/index.test.js
@@ -35,7 +35,7 @@ describe('addon Info', () => {
         obj={{ a: 'a', b: 'b' }}
         array={[1, 2, 3]}
         number={7}
-        string={'seven'}
+        string="seven"
         bool
       />
     </div>

diff --git a/addons/knobs/src/KnobManager.js b/addons/knobs/src/KnobManager.js
@@ -17,7 +17,7 @@ export default class KnobManager {
   knob(name, options) {
     this._mayCallChannel();
 
-    const knobStore = this.knobStore;
+    const { knobStore } = this;
     const existingKnob = knobStore.get(name);
     // We need to return the value set by the knob editor via this.
     // But, if the user changes the code for the defaultValue we should set

diff --git a/addons/knobs/src/components/PropForm.js b/addons/knobs/src/components/PropForm.js
@@ -31,7 +31,7 @@ export default class propForm extends React.Component {
   }
 
   render() {
-    const knobs = this.props.knobs;
+    const { knobs } = this.props;
 
     return (
       <form style={stylesheet.propForm}>

diff --git a/addons/storyshots/src/index.js b/addons/storyshots/src/index.js
@@ -26,7 +26,7 @@ global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || {};
 
 const babel = require('babel-core');
 
-const pkg = readPkgUp.sync().pkg;
+const { pkg } = readPkgUp.sync();
 
 const hasDependency = name =>
   (pkg.devDependencies && pkg.devDependencies[name]) ||

diff --git a/app/react-native/src/manager/components/PreviewHelp.js b/app/react-native/src/manager/components/PreviewHelp.js
@@ -30,9 +30,9 @@ const PreviewHelp = () => (
     <h1>Welcome to storybook</h1>
     <p>This is a UI component dev environment for your app.</p>
     <p>
-      We've added some basic stories inside the <span style={styles.code}>
-        storybook/stories
-      </span>{' '}
+      We've added some basic stories inside the {
+        <span style={styles.code}>storybook/stories</span>
+      }{' '}
       directory. A story is a single state of one or more UI components. You can have as many
       stories as you want. Basically a story is like a visual test case.
     </p>

diff --git a/app/react-native/src/manager/provider.js b/app/react-native/src/manager/provider.js
@@ -16,7 +16,7 @@ export default class ReactProvider extends Provider {
       this.channel = undefined;
     }
 
-    const secured = options.secured;
+    const { secured } = options;
     const websocketType = secured ? 'wss' : 'ws';
     let url = `${websocketType}://${domain}`;
     if (options.manualId) {

diff --git a/app/react-native/src/preview/index.js b/app/react-native/src/preview/index.js
@@ -75,7 +75,7 @@ export default class Preview {
         const port = params.port !== false ? `:${params.port || 7007}` : '';
 
         const query = params.query || '';
-        const secured = params.secured;
+        const { secured } = params;
         const websocketType = secured ? 'wss' : 'ws';
         const httpType = secured ? 'https' : 'http';
 

diff --git a/app/react-native/src/server/middleware.js b/app/react-native/src/server/middleware.js
@@ -29,7 +29,7 @@ export default function({ projectDir, configDir, ...options }) {
   const config = loadConfig(environment, currentWebpackConfig, projectDir, configDir);
 
   // remove the leading '/'
-  let publicPath = config.output.publicPath;
+  let { publicPath } = config.output;
   if (publicPath[0] === '/') {
     publicPath = publicPath.slice(1);
   }

diff --git a/app/react/src/client/index.js b/app/react/src/client/index.js
@@ -4,13 +4,7 @@ import deprecate from 'util-deprecate';
 import { action as deprecatedAction } from '@storybook/addon-actions';
 import { linkTo as deprecatedLinkTo } from '@storybook/addon-links';
 
-import * as previewApi from './preview';
-
-export const storiesOf = previewApi.storiesOf;
-export const setAddon = previewApi.setAddon;
-export const addDecorator = previewApi.addDecorator;
-export const configure = previewApi.configure;
-export const getStorybook = previewApi.getStorybook;
+export { storiesOf, setAddon, addDecorator, configure, getStorybook } from './preview';
 
 export const action = deprecate(
   deprecatedAction,

diff --git a/app/react/src/client/manager/provider.js b/app/react/src/client/manager/provider.js
@@ -1,5 +1,4 @@
-/* global location */
-
+import { location } from 'global';
 import qs from 'qs';
 import React from 'react';
 import { Provider } from '@storybook/ui';

diff --git a/app/react/src/client/preview/reducer.js b/app/react/src/client/preview/reducer.js
@@ -29,7 +29,7 @@ export default function reducer(state = {}, action) {
       const { storyKindList } = action;
       if (!newState.selectedKind && storyKindList.length > 0) {
         newState.selectedKind = storyKindList[0].kind;
-        newState.selectedStory = storyKindList[0].stories[0];
+        [newState.selectedStory] = storyKindList[0].stories;
       }
       return newState;
     }

diff --git a/app/react/src/server/config/WatchMissingNodeModulesPlugin.js b/app/react/src/server/config/WatchMissingNodeModulesPlugin.js
@@ -19,7 +19,7 @@ function WatchMissingNodeModulesPlugin(nodeModulesPath) {
 WatchMissingNodeModulesPlugin.prototype.apply = function apply(compiler) {
   compiler.plugin('emit', (compilation, callback) => {
     const missingDeps = compilation.missingDependencies;
-    const nodeModulesPath = this.nodeModulesPath;
+    const { nodeModulesPath } = this;
 
     // If any missing files are expected to appear in node_modules...
     if (missingDeps.some(file => file.indexOf(nodeModulesPath) !== -1)) {

diff --git a/app/react/src/server/middleware.js b/app/react/src/server/middleware.js
@@ -21,7 +21,7 @@ export default function(configDir) {
   const middlewareFn = getMiddleware(configDir);
 
   // remove the leading '/'
-  let publicPath = config.output.publicPath;
+  let { publicPath } = config.output;
   if (publicPath[0] === '/') {
     publicPath = publicPath.slice(1);
   }

diff --git a/app/vue/src/client/index.js b/app/vue/src/client/index.js
@@ -4,13 +4,7 @@
 // import { action as deprecatedAction } from '@storybook/addon-actions';
 // import { linkTo as deprecatedLinkTo } from '@storybook/addon-links';
 
-import * as previewApi from './preview';
-
-export const storiesOf = previewApi.storiesOf;
-export const setAddon = previewApi.setAddon;
-export const addDecorator = previewApi.addDecorator;
-export const configure = previewApi.configure;
-export const getStorybook = previewApi.getStorybook;
+export { storiesOf, setAddon, addDecorator, configure, getStorybook } from './preview';
 
 // export const action = deprecate(
 //   deprecatedAction,

diff --git a/app/vue/src/client/manager/provider.js b/app/vue/src/client/manager/provider.js
@@ -1,5 +1,4 @@
-/* global location */
-
+import { location } from 'global';
 import qs from 'qs';
 import React from 'react';
 import { Provider } from '@storybook/ui';

diff --git a/app/vue/src/client/preview/reducer.js b/app/vue/src/client/preview/reducer.js
@@ -29,7 +29,7 @@ export default function reducer(state = {}, action) {
       const { storyKindList } = action;
       if (!newState.selectedKind && storyKindList.length > 0) {
         newState.selectedKind = storyKindList[0].kind;
-        newState.selectedStory = storyKindList[0].stories[0];
+        [newState.selectedStory] = storyKindList[0].stories;
       }
       return newState;
     }

diff --git a/app/vue/src/server/config/WatchMissingNodeModulesPlugin.js b/app/vue/src/server/config/WatchMissingNodeModulesPlugin.js
@@ -19,7 +19,7 @@ function WatchMissingNodeModulesPlugin(nodeModulesPath) {
 WatchMissingNodeModulesPlugin.prototype.apply = function apply(compiler) {
   compiler.plugin('emit', (compilation, callback) => {
     const missingDeps = compilation.missingDependencies;
-    const nodeModulesPath = this.nodeModulesPath;
+    const { nodeModulesPath } = this;
 
     // If any missing files are expected to appear in node_modules...
     if (missingDeps.some(file => file.indexOf(nodeModulesPath) !== -1)) {

diff --git a/app/vue/src/server/middleware.js b/app/vue/src/server/middleware.js
@@ -21,7 +21,7 @@ export default function(configDir) {
   const middlewareFn = getMiddleware(configDir);
 
   // remove the leading '/'
-  let publicPath = config.output.publicPath;
+  let { publicPath } = config.output;
   if (publicPath[0] === '/') {
     publicPath = publicPath.slice(1);
   }

diff --git a/docs/gatsby-browser.js b/docs/gatsby-browser.js
@@ -1,6 +1,4 @@
-const global = require('global');
-
-const document = global.document;
+const { document } = require('global');
 
 exports.onRouteUpdate = location => {
   if (location.hash) {

diff --git a/docs/loaders/markdown-loader/index.js b/docs/loaders/markdown-loader/index.js
@@ -48,7 +48,7 @@ module.exports = function markdownLoader(content) {
 
   const query = loaderUtils.parseQuery(this.query);
   const linkPrefix = query.config.linkPrefix || '';
-  const shouldPrefix = query.shouldPrefix;
+  const { shouldPrefix } = query;
 
   const meta = frontMatter(content);
   const body = md(linkPrefix, shouldPrefix).render(meta.body);

diff --git a/docs/stories/implementations.js b/docs/stories/implementations.js
@@ -39,15 +39,15 @@ export default {
       sections={docsData.sections}
       selectedItem={docsData.selectedItem}
       categories={docsData.categories}
-      selectedCatId={'cat-2'}
+      selectedCatId="cat-2"
     />
   ),
   'Docs.docs-container': (
     <DocsContainer
       sections={docsData.sections}
       selectedItem={docsData.selectedItem}
       categories={docsData.categories}
-      selectedCatId={'cat-2'}
+      selectedCatId="cat-2"
     />
   ),
   'Docs.docs-content': (

diff --git a/examples/cra-kitchen-sink/src/stories/index.stories.js b/examples/cra-kitchen-sink/src/stories/index.stories.js
@@ -57,7 +57,7 @@ storiesOf('Button', module)
   ))
   .add('with notes', () => (
     // deprecated usage
-    <WithNotes notes={'A very simple button'}>
+    <WithNotes notes="A very simple button">
       <Button>
         {setOptions({ selectedAddonPanel: 'storybook/notes/panel' })}
         Check my notes in the notes panel

diff --git a/examples/crna-kitchen-sink/storybook/index.js b/examples/crna-kitchen-sink/storybook/index.js
@@ -1,3 +1,5 @@
+import { AppRegistry } from 'react-native';
+import React, { Component } from 'react';
 import { getStorybookUI, configure } from '@storybook/react-native';
 import { setOptions } from '@storybook/addon-options';
 
@@ -7,10 +9,7 @@ configure(() => {
   require('./stories');
 }, module);
 
-const StorybookUI = getStorybookUI({
-  port: 7007,
-  onDeviceUI: true,
-});
+const StorybookUIRoot = getStorybookUI({ port: 7007, onDeviceUI: true });
 
 setTimeout(
   () =>
@@ -21,4 +20,13 @@ setTimeout(
   100
 );
 
-export default StorybookUI;
+// react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
+// eslint-disable-next-line react/prefer-stateless-function
+class StorybookUIHMRRoot extends Component {
+  render() {
+    return <StorybookUIRoot />;
+  }
+}
+
+AppRegistry.registerComponent('crna-kitchen-sink', () => StorybookUIHMRRoot);
+export default StorybookUIHMRRoot;
diff --git a/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/index.js b/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/index.js
@@ -1,3 +1,6 @@
+/* eslint-disable global-require */
+import React, { Component } from 'react';
+import { AppRegistry } from 'react-native';
 import { getStorybookUI, configure } from '@storybook/react-native';
 
 // import stories
@@ -7,5 +10,16 @@ configure(() => {
 
 // This assumes that storybook is running on the same host as your RN packager,
 // to set manually use, e.g. host: 'localhost' option
-const StorybookUI = getStorybookUI({ port: 7007, onDeviceUI: true });
-export default StorybookUI;
+const StorybookUIRoot = getStorybookUI({ port: 7007, onDeviceUI: true });
+
+// react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
+// https://github.com/storybooks/storybook/issues/2081
+// eslint-disable-next-line react/prefer-stateless-function
+class StorybookUIHMRRoot extends Component {
+  render() {
+    return <StorybookUIRoot />;
+  }
+}
+
+AppRegistry.registerComponent('%APP_NAME%', () => StorybookUIHMRRoot);
+export default StorybookUIHMRRoot;
diff --git a/lib/cli/test/snapshots/react_native_scripts/storybook/index.js b/lib/cli/test/snapshots/react_native_scripts/storybook/index.js
@@ -1,3 +1,6 @@
+/* eslint-disable global-require */
+import React, { Component } from 'react';
+import { AppRegistry } from 'react-native';
 import { getStorybookUI, configure } from '@storybook/react-native';
 
 // import stories
@@ -7,5 +10,16 @@ configure(() => {
 
 // This assumes that storybook is running on the same host as your RN packager,
 // to set manually use, e.g. host: 'localhost' option
-const StorybookUI = getStorybookUI({ port: 7007, onDeviceUI: true });
-export default StorybookUI;
+const StorybookUIRoot = getStorybookUI({ port: 7007, onDeviceUI: true });
+
+// react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
+// https://github.com/storybooks/storybook/issues/2081
+// eslint-disable-next-line react/prefer-stateless-function
+class StorybookUIHMRRoot extends Component {
+  render() {
+    return <StorybookUIRoot />;
+  }
+}
+
+AppRegistry.registerComponent('%APP_NAME%', () => StorybookUIHMRRoot);
+export default StorybookUIHMRRoot;
diff --git a/lib/codemod/src/transforms/update-addon-info.js b/lib/codemod/src/transforms/update-addon-info.js
@@ -57,7 +57,7 @@ export default function transformer(file, api) {
    * @returns {CallExpression} the new withInfo function
    */
   const withInfo = addWithInfoExpression => {
-    const node = addWithInfoExpression.node;
+    const { node } = addWithInfoExpression;
     const args = node.arguments;
 
     // if optional description string is not supplied, the story component becomes second arg

diff --git a/lib/ui/src/modules/ui/components/addon_panel/index.js b/lib/ui/src/modules/ui/components/addon_panel/index.js
@@ -14,7 +14,7 @@ class AddonPanel extends Component {
       this.props.onPanelSelect(name);
     };
 
-    let title = panel.title;
+    let { title } = panel;
     if (typeof title === 'function') {
       title = title();
     }