Merge branch 'master' into am-fix-codemod-docs

.eslintrc.js

@@ -19,7 +19,7 @@ module.exports = {
       printWidth: 100,
       tabWidth: 2,
       bracketSpacing: true,
-      trailingComma: 'all',
+      trailingComma: 'es5',
       singleQuote: true,
     }],
     quotes: ['warn', 'single'],

addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "3.0.0-alpha.4",
+  "version": "3.0.0-rc.0",
   "description": "Action Logger addon for storybook",
   "main": "dist/index.js",
   "scripts": {
@@ -19,11 +19,11 @@
   "bugs": {
     "url": "https://github.com/storybooks/storybook/issues"
   },
-  "homepage": "https://github.com/storybooks/storybook/tree/master/packages/addon-actions",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/addons/actions",
   "devDependencies": {
-    "@storybook/addons": "^3.0.0-alpha.0",
-    "@storybook/react": "^3.0.0-alpha.4",
-    "@storybook/ui": "^3.0.0-alpha.0",
+    "@storybook/addons": "^3.0.0-rc.0",
+    "@storybook/react": "^3.0.0-rc.0",
+    "@storybook/ui": "^3.0.0-rc.0",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-test-renderer": "^15.5.4",
@@ -36,7 +36,7 @@
     "react-inspector": "^2.0.0"
   },
   "peerDependencies": {
-    "@storybook/addons": "^3.0.0-alpha.0",
+    "@storybook/addons": "^3.0.0-rc.0",
     "react": "*",
     "react-dom": "*"
   }

addons/centered/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-centered",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-rc.0",
   "description": "Storybook decorator to center components",
   "main": "build/index.js",
   "scripts": {
@@ -12,6 +12,5 @@
     "transform": [
       "babelify"
     ]
-  },
-  "devDependencies": {}
+  }
 }

addons/comments/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@storybook/addon-comments",
-  "version": "3.0.0-alpha.4",
+  "version": "3.0.0-rc.0",
   "description": "Comments addon for Storybook",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybooks/storybook/tree/master/packages/addon-comments",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/addons/comments",
   "bugs": {
     "url": "https://github.com/storybooks/storybook/issues"
   },
@@ -36,17 +36,17 @@
   "devDependencies": {
     "@kadira/storybook-database-cloud": "*",
     "@kadira/storybook-deployer": "*",
-    "@storybook/addons": "^3.0.0-alpha.0",
-    "@storybook/react": "^3.0.0-alpha.4",
-    "@storybook/ui": "^3.0.0-alpha.0",
+    "@storybook/addons": "^3.0.0-rc.0",
+    "@storybook/react": "^3.0.0-rc.0",
+    "@storybook/ui": "^3.0.0-rc.0",
     "git-url-parse": "^6.2.2",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-test-renderer": "^15.5.4",
     "shelljs": "^0.7.7"
   },
   "peerDependencies": {
-    "@storybook/addons": "^3.0.0-alpha.0",
+    "@storybook/addons": "^3.0.0-rc.0",
     "react": "*",
     "react-dom": "*"
   }

addons/comments/src/manager/containers/CommentsPanel/dataStore.js

@@ -53,7 +53,7 @@ export default class DataStore {
       () => {
         this._loadUsers().then(() => this._loadComments());
       },
-      1000 * 60, // Reload for every minute
+      1000 * 60 // Reload for every minute
     );
   }
 

addons/graphql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-graphql",
-  "version": "3.0.0-alpha.4",
+  "version": "3.0.0-rc.0",
   "description": "Storybook addon to display the GraphiQL IDE",
   "main": "dist/index.js",
   "scripts": {
@@ -19,9 +19,9 @@
   "bugs": {
     "url": "https://github.com/storybooks/storybook/issues"
   },
-  "homepage": "https://github.com/storybooks/storybook/tree/master/packages/addon-graphql",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/addons/graphql",
   "devDependencies": {
-    "@storybook/react": "^3.0.0-alpha.4",
+    "@storybook/react": "^3.0.0-rc.0",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "shelljs": "^0.7.7"

addons/info/example/story.js

@@ -6,7 +6,7 @@ import { action } from '@storybook/addon-actions';
 import backgrounds from 'react-storybook-addon-backgrounds';
 
 storiesOf(
-  'Button',
+  'Button'
 ).addWithInfo(
   'simple usage',
   'This is the basic usage with the button with providing a label to show the text.',
@@ -18,7 +18,7 @@ storiesOf(
         Click the "?" mark at top-right to view the info.
       </p>
     </div>
-  ),
+  )
 );
 
 storiesOf('Button').addWithInfo(
@@ -27,7 +27,7 @@ storiesOf('Button').addWithInfo(
       This is the basic usage with the button with providing a label to show the text.
     `,
   () => <Button label="The Button" onClick={action('onClick')} />,
-  { inline: true },
+  { inline: true }
 );
 
 storiesOf('Button').addWithInfo(
@@ -36,7 +36,7 @@ storiesOf('Button').addWithInfo(
       This is the basic usage with the button with providing a label to show the text.
     `,
   () => <Button label="The Button" onClick={action('onClick')} />,
-  { source: false, inline: true },
+  { source: false, inline: true }
 );
 
 storiesOf('Button').addWithInfo(
@@ -45,7 +45,7 @@ storiesOf('Button').addWithInfo(
       This is the basic usage with the button with providing a label to show the text.
     `,
   () => <Button label="The Button" onClick={action('onClick')} />,
-  { header: false, inline: true },
+  { header: false, inline: true }
 );
 
 storiesOf('Button').addWithInfo(
@@ -54,7 +54,7 @@ storiesOf('Button').addWithInfo(
       This is the basic usage with the button with providing a label to show the text.
     `,
   () => <Button label="The Button" onClick={action('onClick')} />,
-  { propTables: false, inline: true },
+  { propTables: false, inline: true }
 );
 
 storiesOf('Button').addWithInfo(
@@ -81,7 +81,7 @@ storiesOf('Button').addWithInfo(
       <br />
     </div>
   ),
-  { inline: true, propTables: [Button] },
+  { inline: true, propTables: [Button] }
 );
 
 storiesOf('Button').addWithInfo(
@@ -111,7 +111,7 @@ storiesOf('Button').addWithInfo(
         Click the "?" mark at top-right to view the info.
       </p>
     </div>
-  ),
+  )
 );
 
 storiesOf('Button').addWithInfo(
@@ -134,7 +134,7 @@ storiesOf('Button').addWithInfo(
     </p>
   </div>,
   () => <Button label="The Button" onClick={action('onClick')} />,
-  { inline: true },
+  { inline: true }
 );
 
 storiesOf('Button')
@@ -155,5 +155,5 @@ storiesOf('Button')
         };
         return stylesheet;
       },
-    },
+    }
   );

addons/info/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-info",
-  "version": "3.0.0-alpha.4",
+  "version": "3.0.0-rc.0",
   "description": "A Storybook addon to show additional information for your stories.",
   "repository": {
     "type": "git",
@@ -13,7 +13,7 @@
     "publish-storybook": "bash .scripts/publish_storybook.sh"
   },
   "devDependencies": {
-    "@storybook/react": "^3.0.0-alpha.4",
+    "@storybook/react": "^3.0.0-rc.0",
     "git-url-parse": "^6.2.2",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",

addons/info/src/components/Props.js

@@ -21,7 +21,7 @@ export default class Props extends React.Component {
       name =>
         name[0] !== '_' &&
         name !== 'children' &&
-        (!defaultProps || props[name] != defaultProps[name]),
+        (!defaultProps || props[name] != defaultProps[name])
     );
 
     const breakIntoNewLines = names.length > 3;
@@ -45,7 +45,7 @@ export default class Props extends React.Component {
             </span>}
 
           {i === names.length - 1 && (breakIntoNewLines ? <br /> : endingSpace)}
-        </span>,
+        </span>
       );
     });
 

addons/knobs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-knobs",
-  "version": "3.0.0-alpha.4",
+  "version": "3.0.0-rc.0",
   "description": "Storybook Addon Prop Editor Component",
   "repository": {
     "type": "git",
@@ -14,7 +14,7 @@
     "publish-storybook": "bash .scripts/publish_storybook.sh"
   },
   "devDependencies": {
-    "@storybook/react": "^3.0.0-alpha.4",
+    "@storybook/react": "^3.0.0-rc.0",
     "@types/node": "^7.0.12",
     "@types/react": "^15.0.21",
     "git-url-parse": "^6.2.2",
@@ -34,6 +34,7 @@
     "babel-runtime": "^6.23.0",
     "deep-equal": "^1.0.1",
     "insert-css": "^1.0.0",
+    "lodash.debounce": "^4.0.8",
     "moment": "^2.18.1",
     "prop-types": "^15.5.8",
     "react-color": "^2.11.4",

addons/knobs/src/KnobManager.js

@@ -65,11 +65,12 @@ export default class KnobManager {
       return;
     }
     this.calling = true;
+    const timestamp = +new Date();
 
     setTimeout(() => {
       this.calling = false;
       // emit to the channel and trigger a panel re-render
-      this.channel.emit('addon:knobs:setKnobs', this.knobStore.getAll());
+      this.channel.emit('addon:knobs:setKnobs', { knobs: this.knobStore.getAll(), timestamp });
     }, PANEL_UPDATE_INTERVAL);
   }
 }

addons/knobs/src/components/Panel.js

@@ -1,8 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import debounce from 'lodash.debounce';
 import PropForm from './PropForm';
 import Types from './types';
 
+const getTimestamp = () => +new Date();
+
 const styles = {
   panelWrapper: {
     width: '100%',
@@ -44,35 +47,52 @@ export default class Panel extends React.Component {
     this.handleChange = this.handleChange.bind(this);
     this.setKnobs = this.setKnobs.bind(this);
     this.reset = this.reset.bind(this);
+    this.setOptions = this.setOptions.bind(this);
 
     this.state = { knobs: {} };
+    this.options = {};
+
+    this.lastEdit = getTimestamp();
     this.loadedFromUrl = false;
     this.props.channel.on('addon:knobs:setKnobs', this.setKnobs);
+    this.props.channel.on('addon:knobs:setOptions', this.setOptions);
   }
 
   componentWillUnmount() {
     this.props.channel.removeListener('addon:knobs:setKnobs', this.setKnobs);
   }
 
-  setKnobs(knobs) {
+  setOptions(options = { debounce: false, timestamps: false }) {
+    this.options = options;
+
+    if (options.debounce) {
+      this.emitChange = debounce(this.emitChange, options.debounce.wait, {
+        leading: options.debounce.leading,
+      });
+    }
+  }
+
+  setKnobs({ knobs, timestamp }) {
     const queryParams = {};
     const { api, channel } = this.props;
 
-    Object.keys(knobs).forEach(name => {
-      const knob = knobs[name];
-      // For the first time, get values from the URL and set them.
-      if (!this.loadedFromUrl) {
-        const urlValue = api.getQueryParam(`knob-${name}`);
-
-        if (urlValue !== undefined) {
-          // If the knob value present in url
-          knob.value = Types[knob.type].deserialize(urlValue);
-          channel.emit('addon:knobs:knobChange', knob);
+    if (!this.options.timestamps || !timestamp || this.lastEdit <= timestamp) {
+      Object.keys(knobs).forEach(name => {
+        const knob = knobs[name];
+        // For the first time, get values from the URL and set them.
+        if (!this.loadedFromUrl) {
+          const urlValue = api.getQueryParam(`knob-${name}`);
+
+          if (urlValue !== undefined) {
+            // If the knob value present in url
+            knob.value = Types[knob.type].deserialize(urlValue);
+            channel.emit('addon:knobs:knobChange', knob);
+          }
         }
-      }
 
-      queryParams[`knob-${name}`] = Types[knob.type].serialize(knob.value);
-    });
+        queryParams[`knob-${name}`] = Types[knob.type].serialize(knob.value);
+      });
+    }
 
     this.loadedFromUrl = true;
     api.setQueryParams(queryParams);
@@ -83,8 +103,13 @@ export default class Panel extends React.Component {
     this.props.channel.emit('addon:knobs:reset');
   }
 
+  emitChange(changedKnob) {
+    this.props.channel.emit('addon:knobs:knobChange', changedKnob);
+  }
+
   handleChange(changedKnob) {
-    const { api, channel } = this.props;
+    this.lastEdit = getTimestamp();
+    const { api } = this.props;
     const { knobs } = this.state;
     const { name, type, value } = changedKnob;
     const newKnobs = { ...knobs };
@@ -99,7 +124,7 @@ export default class Panel extends React.Component {
     queryParams[`knob-${name}`] = Types[type].serialize(value);
 
     api.setQueryParams(queryParams);
-    channel.emit('addon:knobs:knobChange', changedKnob);
+    this.setState({ knobs: newKnobs }, this.emitChange(changedKnob));
   }
 
   render() {