Merge branch 'master' into patch-1

addons/info/README.md

@@ -80,7 +80,7 @@ setDefaults({
   inline: true, // Displays info inline vs click button to view
   source: true, // Displays the source of story Component
   propTables: [/* Components used in story */], // displays Prop Tables with this components
-  propTablesExclude: [], // Exclude Components from being shoun in Prop Tables section
+  propTablesExclude: [], // Exclude Components from being shown in Prop Tables section
   styles: {}, // Overrides styles of addon
   marksyConf: {}, // Overrides components used to display markdown. Warning! This option's name will be likely deprecated in favor to "components" with the same API in 3.3 release. Follow this PR #1501 for details
   maxPropsIntoLine: 1, // Max props to display per line in source code

addons/knobs/README.md

@@ -231,6 +231,18 @@ const value = date(label, defaultValue);
 
 > Note: the default value must not change - e.g., do not do `date('Label', new Date())` or `date('Label')`
 
+### button
+
+Allows you to include a button and associated handler.
+
+```js
+import { button } from '@storybook/addon-knobs';
+
+const label = 'Do Something';
+const handler = () => doSomething('foobar');
+button(label, handler);
+```
+
 ### withKnobs vs withKnobsOptions
 
 If you feel like this addon is not performing well enough there is an option to use `withKnobsOptions` instead of `withKnobs`.

addons/knobs/package.json

@@ -28,8 +28,8 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@types/node": "^7.0.12",
-    "@types/react": "^16.0.11",
+    "@types/node": "^7.0.46",
+    "@types/react": "^16.0.15",
     "git-url-parse": "^6.2.2",
     "raw-loader": "^0.5.1",
     "react": "^16.0.0",

addons/knobs/src/components/Panel.js

@@ -46,6 +46,7 @@ export default class Panel extends React.Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
+    this.handleClick = this.handleClick.bind(this);
     this.setKnobs = this.setKnobs.bind(this);
     this.reset = this.reset.bind(this);
     this.setOptions = this.setOptions.bind(this);
@@ -133,6 +134,10 @@ export default class Panel extends React.Component {
     this.setState({ knobs: newKnobs }, this.emitChange(changedKnob));
   }
 
+  handleClick(knob) {
+    this.props.channel.emit('addon:knobs:knobClick', knob);
+  }
+
   render() {
     const { knobs } = this.state;
     const knobsArray = Object.keys(knobs)
@@ -146,7 +151,11 @@ export default class Panel extends React.Component {
     return (
       <div style={styles.panelWrapper}>
         <div style={styles.panel}>
-          <PropForm knobs={knobsArray} onFieldChange={this.handleChange} />
+          <PropForm
+            knobs={knobsArray}
+            onFieldChange={this.handleChange}
+            onFieldClick={this.handleClick}
+          />
         </div>
         <button style={styles.resetButton} onClick={this.reset}>
           RESET

addons/knobs/src/components/PropField.js

@@ -46,16 +46,16 @@ export default class PropField extends React.Component {
   }
 
   render() {
-    const { onChange, knob } = this.props;
+    const { onChange, onClick, knob } = this.props;
 
     const InputType = TypeMap[knob.type] || InvalidType;
 
     return (
       <div style={stylesheet.field}>
         <label htmlFor={knob.name} style={stylesheet.label}>
-          {`${knob.name}`}
+          {!knob.hideLabel && `${knob.name}`}
         </label>
-        <InputType knob={knob} onChange={onChange} />
+        <InputType knob={knob} onChange={onChange} onClick={onClick} />
       </div>
     );
   }
@@ -67,4 +67,5 @@ PropField.propTypes = {
     value: PropTypes.any,
   }).isRequired,
   onChange: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
 };

addons/knobs/src/components/PropForm.js

@@ -46,6 +46,7 @@ export default class propForm extends React.Component {
               value={knob.value}
               knob={knob}
               onChange={changeHandler}
+              onClick={this.props.onFieldClick}
             />
           );
         })}
@@ -68,4 +69,5 @@ propForm.propTypes = {
     })
   ),
   onFieldChange: PropTypes.func.isRequired,
+  onFieldClick: PropTypes.func.isRequired,
 };

addons/knobs/src/components/types/Button.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const styles = {
+  height: '26px',
+};
+
+class ButtonType extends React.Component {
+  render() {
+    const { knob, onClick } = this.props;
+    return (
+      <button
+        type="button"
+        id={knob.name}
+        ref={c => {
+          this.input = c;
+        }}
+        style={styles}
+        onClick={() => onClick(knob)}
+      >
+        {knob.name}
+      </button>
+    );
+  }
+}
+
+ButtonType.defaultProps = {
+  knob: {},
+};
+
+ButtonType.propTypes = {
+  knob: PropTypes.shape({
+    name: PropTypes.string,
+  }),
+  onClick: PropTypes.func.isRequired,
+};
+
+ButtonType.serialize = value => value;
+ButtonType.deserialize = value => value;
+
+export default ButtonType;

addons/knobs/src/components/types/index.js

@@ -6,6 +6,7 @@ import ObjectType from './Object';
 import SelectType from './Select';
 import ArrayType from './Array';
 import DateType from './Date';
+import ButtonType from './Button';
 
 export default {
   text: TextType,
@@ -16,4 +17,5 @@ export default {
   select: SelectType,
   array: ArrayType,
   date: DateType,
+  button: ButtonType,
 };

addons/knobs/src/index.js

@@ -58,6 +58,10 @@ export function date(name, value = new Date()) {
   return manager.knob(name, { type: 'date', value: proxyValue });
 }
 
+export function button(name, callback) {
+  return manager.knob(name, { type: 'button', callback, hideLabel: true });
+}
+
 // "Higher order component" / wrapper style API
 // In 3.3, this will become `withKnobs`, once our decorator API supports it.
 //   See https://github.com/storybooks/storybook/pull/1527

addons/knobs/src/react/WrapStory.js

@@ -7,6 +7,7 @@ export default class WrapStory extends React.Component {
   constructor(props) {
     super(props);
     this.knobChanged = this.knobChanged.bind(this);
+    this.knobClicked = this.knobClicked.bind(this);
     this.resetKnobs = this.resetKnobs.bind(this);
     this.setPaneKnobs = this.setPaneKnobs.bind(this);
     this._knobsAreReset = false;
@@ -16,6 +17,8 @@ export default class WrapStory extends React.Component {
   componentDidMount() {
     // Watch for changes in knob editor.
     this.props.channel.on('addon:knobs:knobChange', this.knobChanged);
+    // Watch for clicks in knob editor.
+    this.props.channel.on('addon:knobs:knobClick', this.knobClicked);
     // Watch for the reset event and reset knobs.
     this.props.channel.on('addon:knobs:reset', this.resetKnobs);
     // Watch for any change in the knobStore and set the panel again for those
@@ -31,6 +34,7 @@ export default class WrapStory extends React.Component {
 
   componentWillUnmount() {
     this.props.channel.removeListener('addon:knobs:knobChange', this.knobChanged);
+    this.props.channel.removeListener('addon:knobs:knobClick', this.knobClicked);
     this.props.channel.removeListener('addon:knobs:reset', this.resetKnobs);
     this.props.knobStore.unsubscribe(this.setPaneKnobs);
   }
@@ -45,11 +49,17 @@ export default class WrapStory extends React.Component {
     const { knobStore, storyFn, context } = this.props;
     // Update the related knob and it's value.
     const knobOptions = knobStore.get(name);
+
     knobOptions.value = value;
     knobStore.markAllUnused();
     this.setState({ storyContent: storyFn(context) });
   }
 
+  knobClicked(knob) {
+    const knobOptions = this.props.knobStore.get(knob.name);
+    knobOptions.callback();
+  }
+
   resetKnobs() {
     const { knobStore, storyFn, context } = this.props;
     knobStore.reset();

addons/knobs/src/vue/index.js

@@ -8,10 +8,16 @@ export const vueHandler = (channel, knobStore) => getStory => context => ({
       const { name, value } = change;
       // Update the related knob and it's value.
       const knobOptions = knobStore.get(name);
+
       knobOptions.value = value;
       this.$forceUpdate();
     },
 
+    onKnobClick(knob) {
+      const knobOptions = knobStore.get(knob.name);
+      knobOptions.callback();
+    },
+
     onKnobReset() {
       knobStore.reset();
       this.setPaneKnobs(false);
@@ -26,12 +32,14 @@ export const vueHandler = (channel, knobStore) => getStory => context => ({
   created() {
     channel.on('addon:knobs:reset', this.onKnobReset);
     channel.on('addon:knobs:knobChange', this.onKnobChange);
+    channel.on('addon:knobs:knobClick', this.onKnobClick);
     knobStore.subscribe(this.setPaneKnobs);
   },
 
   beforeDestroy() {
     channel.removeListener('addon:knobs:reset', this.onKnobReset);
     channel.removeListener('addon:knobs:knobChange', this.onKnobChange);
+    channel.removeListener('addon:knobs:knobClick', this.onKnobClick);
     knobStore.unsubscribe(this.setPaneKnobs);
   },
 });

addons/knobs/src/vue/index.test.js

@@ -32,8 +32,9 @@ describe('Vue handler', () => {
     const testStore = new KnobStore();
     new Vue(vueHandler(testChannel, testStore)(testStory)(testContext)).$mount();
 
-    expect(testChannel.on).toHaveBeenCalledTimes(2);
+    expect(testChannel.on).toHaveBeenCalledTimes(3);
     expect(testChannel.on).toHaveBeenCalledWith('addon:knobs:reset', expect.any(Function));
     expect(testChannel.on).toHaveBeenCalledWith('addon:knobs:knobChange', expect.any(Function));
+    expect(testChannel.on).toHaveBeenCalledWith('addon:knobs:knobClick', expect.any(Function));
   });
 });

app/react-native/package.json

@@ -40,7 +40,7 @@
     "babel-plugin-transform-regenerator": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-minify": "^0.2.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
@@ -64,7 +64,7 @@
     "url-parse": "^1.1.9",
     "util-deprecate": "^1.0.2",
     "uuid": "^3.1.0",
-    "webpack": "^3.7.1",
+    "webpack": "^3.8.1",
     "webpack-dev-middleware": "^1.12.0",
     "webpack-hot-middleware": "^2.20.0",
     "ws": "^3.0.0"

app/react/package.json

@@ -34,14 +34,14 @@
     "babel-plugin-react-docgen": "^1.8.0",
     "babel-plugin-transform-regenerator": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.6.0",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-minify": "^0.2.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-react-app": "^3.0.3",
     "babel-preset-stage-0": "^6.24.1",
     "babel-runtime": "^6.26.0",
     "case-sensitive-paths-webpack-plugin": "^2.1.1",
-    "chalk": "^2.1.0",
+    "chalk": "^2.2.0",
     "commander": "^2.11.0",
     "common-tags": "^1.4.0",
     "configstore": "^3.1.1",
@@ -71,7 +71,7 @@
     "url-loader": "^0.6.2",
     "util-deprecate": "^1.0.2",
     "uuid": "^3.1.0",
-    "webpack": "^3.7.1",
+    "webpack": "^3.8.1",
     "webpack-dev-middleware": "^1.12.0",
     "webpack-hot-middleware": "^2.20.0"
   },

app/vue/package.json

@@ -41,7 +41,7 @@
     "babel-preset-stage-0": "^6.24.1",
     "babel-runtime": "^6.26.0",
     "case-sensitive-paths-webpack-plugin": "^2.1.1",
-    "chalk": "^2.1.0",
+    "chalk": "^2.2.0",
     "commander": "^2.11.0",
     "common-tags": "^1.4.0",
     "configstore": "^3.1.1",

dependencies.yml

@@ -29,9 +29,10 @@ collectors:
     bootstrap_command: yarn
   actors:
   # pull requests for updates to our major version
-  - type: js-lerna
+  - type: js-lerna:0.9.0-beta
     versions: "L.Y.Y"
     settings:
+      batch_mode: true
       bootstrap_command: yarn
       github_labels:
       - dependencies:update

docs/package.json

@@ -25,7 +25,7 @@
     "babel-core": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "bootstrap": "^3.3.7",

docs/yarn.lock

@@ -1364,6 +1364,41 @@ babel-preset-env@^1.6.0:
     invariant "^2.2.2"
     semver "^5.3.0"
 
+babel-preset-env@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.1.tgz#a18b564cc9b9afdf4aae57ae3c1b0d99188e6f48"
+  dependencies:
+    babel-plugin-check-es2015-constants "^6.22.0"
+    babel-plugin-syntax-trailing-function-commas "^6.22.0"
+    babel-plugin-transform-async-to-generator "^6.22.0"
+    babel-plugin-transform-es2015-arrow-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoped-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoping "^6.23.0"
+    babel-plugin-transform-es2015-classes "^6.23.0"
+    babel-plugin-transform-es2015-computed-properties "^6.22.0"
+    babel-plugin-transform-es2015-destructuring "^6.23.0"
+    babel-plugin-transform-es2015-duplicate-keys "^6.22.0"
+    babel-plugin-transform-es2015-for-of "^6.23.0"
+    babel-plugin-transform-es2015-function-name "^6.22.0"
+    babel-plugin-transform-es2015-literals "^6.22.0"
+    babel-plugin-transform-es2015-modules-amd "^6.22.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-systemjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-umd "^6.23.0"
+    babel-plugin-transform-es2015-object-super "^6.22.0"
+    babel-plugin-transform-es2015-parameters "^6.23.0"
+    babel-plugin-transform-es2015-shorthand-properties "^6.22.0"
+    babel-plugin-transform-es2015-spread "^6.22.0"
+    babel-plugin-transform-es2015-sticky-regex "^6.22.0"
+    babel-plugin-transform-es2015-template-literals "^6.22.0"
+    babel-plugin-transform-es2015-typeof-symbol "^6.23.0"
+    babel-plugin-transform-es2015-unicode-regex "^6.22.0"
+    babel-plugin-transform-exponentiation-operator "^6.22.0"
+    babel-plugin-transform-regenerator "^6.22.0"
+    browserslist "^2.1.2"
+    invariant "^2.2.2"
+    semver "^5.3.0"
+
 babel-preset-es2015@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz#d44050d6bc2c9feea702aaf38d727a0210538939"

examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap

@@ -1318,6 +1318,13 @@ exports[`Storyshots Button with knobs 1`] = `
   <p>
     Nice to meet you!
   </p>
+  <hr />
+  <p>
+    PS. My shirt pocket contains: 
+  </p>
+  <li>
+    No items!
+  </li>
 </div>
 `;