Add dist.

dist/KnobManager.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _WrapStory = require('./components/WrapStory');
+
+var _WrapStory2 = _interopRequireDefault(_WrapStory);
+
+var _KnobStore = require('./KnobStore');
+
+var _KnobStore2 = _interopRequireDefault(_KnobStore);
+
+var _deepEqual = require('deep-equal');
+
+var _deepEqual2 = _interopRequireDefault(_deepEqual);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var KnobManager = function () {
+  function KnobManager() {
+    (0, _classCallCheck3.default)(this, KnobManager);
+
+    this.knobStore = null;
+    this.knobStoreMap = {};
+  }
+
+  (0, _createClass3.default)(KnobManager, [{
+    key: 'knob',
+    value: function knob(name, options) {
+      var knobStore = this.knobStore;
+      var 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
+      // that value instead.
+      if (existingKnob && (0, _deepEqual2.default)(options.value, existingKnob.defaultValue)) {
+        return existingKnob.value;
+      }
+
+      var defaultValue = options.value;
+      var knobInfo = (0, _extends3.default)({}, options, {
+        name: name,
+        defaultValue: defaultValue
+      });
+
+      knobStore.set(name, knobInfo);
+      return knobStore.get(name).value;
+    }
+  }, {
+    key: 'wrapStory',
+    value: function wrapStory(channel, storyFn, context) {
+      var key = context.kind + ':::' + context.story;
+      var knobStore = this.knobStoreMap[key];
+
+      if (!knobStore) {
+        knobStore = this.knobStoreMap[key] = new _KnobStore2.default();
+      }
+      this.knobStore = knobStore;
+
+      var props = { context: context, storyFn: storyFn, channel: channel, knobStore: knobStore };
+      return _react2.default.createElement(_WrapStory2.default, props);
+    }
+  }]);
+  return KnobManager;
+}();
+
+exports.default = KnobManager;

dist/KnobStore.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require("babel-runtime/helpers/createClass");
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var KnobStore = function () {
+  function KnobStore() {
+    (0, _classCallCheck3.default)(this, KnobStore);
+
+    this.store = {};
+    this.callbacks = [];
+  }
+
+  (0, _createClass3.default)(KnobStore, [{
+    key: "has",
+    value: function has(key) {
+      return this.store[key] !== undefined;
+    }
+  }, {
+    key: "set",
+    value: function set(key, value) {
+      this.store[key] = value;
+      this.callbacks.forEach(function (cb) {
+        return cb();
+      });
+    }
+  }, {
+    key: "get",
+    value: function get(key) {
+      return this.store[key];
+    }
+  }, {
+    key: "getAll",
+    value: function getAll() {
+      return this.store;
+    }
+  }, {
+    key: "reset",
+    value: function reset() {
+      this.store = {};
+    }
+  }, {
+    key: "subscribe",
+    value: function subscribe(cb) {
+      this.callbacks.push(cb);
+    }
+  }, {
+    key: "unsubscribe",
+    value: function unsubscribe(cb) {
+      var index = this.callbacks.indexOf(cb);
+      this.callbacks.splice(index, 1);
+    }
+  }]);
+  return KnobStore;
+}();
+
+exports.default = KnobStore;

dist/components/Panel.js

@@ -0,0 +1,202 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _keys = require('babel-runtime/core-js/object/keys');
+
+var _keys2 = _interopRequireDefault(_keys);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _PropForm = require('./PropForm');
+
+var _PropForm2 = _interopRequireDefault(_PropForm);
+
+var _types = require('./types');
+
+var _types2 = _interopRequireDefault(_types);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = {
+  panel: {
+    padding: '5px',
+    width: 380,
+    position: 'relative'
+  },
+  noKnobs: {
+    fontFamily: '\n      -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",\n      "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif\n    ',
+    display: 'inline',
+    width: '100%',
+    textAlign: 'center',
+    color: 'rgb(190, 190, 190)',
+    padding: '10px'
+  },
+  resetButton: {
+    position: 'absolute',
+    bottom: 11,
+    right: 10,
+    border: 'none',
+    borderTop: 'solid 1px rgba(0, 0, 0, 0.2)',
+    borderLeft: 'solid 1px rgba(0, 0, 0, 0.2)',
+    background: 'rgba(255, 255, 255, 0.5)',
+    padding: '5px 10px',
+    borderRadius: '4px 0 0 0',
+    color: 'rgba(0, 0, 0, 0.5)',
+    outline: 'none'
+  }
+};
+
+var Panel = function (_React$Component) {
+  (0, _inherits3.default)(Panel, _React$Component);
+
+  function Panel(props) {
+    (0, _classCallCheck3.default)(this, Panel);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (Panel.__proto__ || (0, _getPrototypeOf2.default)(Panel)).call(this, props));
+
+    _this.handleChange = _this.handleChange.bind(_this);
+    _this.setKnobs = _this.setKnobs.bind(_this);
+    _this.reset = _this.reset.bind(_this);
+
+    _this.state = { knobs: {} };
+    _this.loadedFromUrl = false;
+    _this.props.channel.on('addon:knobs:setKnobs', _this.setKnobs);
+    return _this;
+  }
+
+  (0, _createClass3.default)(Panel, [{
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.props.channel.removeListener('addon:knobs:setKnobs', this.setKnobs);
+    }
+  }, {
+    key: 'setKnobs',
+    value: function setKnobs(knobs) {
+      var _this2 = this;
+
+      var queryParams = {};
+      var _props = this.props;
+      var api = _props.api;
+      var channel = _props.channel;
+
+
+      (0, _keys2.default)(knobs).forEach(function (name) {
+        var knob = knobs[name];
+        // For the first time, get values from the URL and set them.
+        if (!_this2.loadedFromUrl) {
+          var urlValue = api.getQueryParam('knob-' + name);
+
+          if (urlValue !== undefined) {
+            // If the knob value present in url
+            knob.value = _types2.default[knob.type].deserialize(urlValue);
+            channel.emit('addon:knobs:knobChange', knob);
+          }
+        }
+
+        queryParams['knob-' + name] = _types2.default[knob.type].serialize(knob.value);
+      });
+
+      this.loadedFromUrl = true;
+      api.setQueryParams(queryParams);
+      this.setState({ knobs: knobs });
+    }
+  }, {
+    key: 'reset',
+    value: function reset() {
+      this.props.channel.emit('addon:knobs:reset');
+    }
+  }, {
+    key: 'handleChange',
+    value: function handleChange(changedKnob) {
+      var _props2 = this.props;
+      var api = _props2.api;
+      var channel = _props2.channel;
+      var knobs = this.state.knobs;
+      var name = changedKnob.name;
+      var type = changedKnob.type;
+      var value = changedKnob.value;
+
+      var newKnobs = (0, _extends3.default)({}, knobs);
+      newKnobs[name] = (0, _extends3.default)({}, newKnobs[name], changedKnob);
+
+      this.setState({ knobs: newKnobs });
+
+      var queryParams = {};
+      queryParams['knob-' + name] = _types2.default[type].serialize(value);
+
+      api.setQueryParams(queryParams);
+      channel.emit('addon:knobs:knobChange', changedKnob);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var knobs = this.state.knobs;
+
+      var knobsArray = (0, _keys2.default)(knobs).map(function (key) {
+        return knobs[key];
+      });
+
+      if (knobsArray.length === 0) {
+        return _react2.default.createElement(
+          'div',
+          { style: styles.noKnobs },
+          'NO KNOBS'
+        );
+      }
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(
+          'div',
+          { style: styles.panel },
+          _react2.default.createElement(_PropForm2.default, { knobs: knobsArray, onFieldChange: this.handleChange })
+        ),
+        _react2.default.createElement(
+          'button',
+          { style: styles.resetButton, onClick: this.reset },
+          'RESET'
+        )
+      );
+    }
+  }]);
+  return Panel;
+}(_react2.default.Component);
+
+exports.default = Panel;
+
+
+Panel.propTypes = {
+  channel: _react2.default.PropTypes.object,
+  onReset: _react2.default.PropTypes.object,
+  api: _react2.default.PropTypes.object
+};

dist/components/PropField.js

@@ -0,0 +1,128 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _types = require('./types');
+
+var _types2 = _interopRequireDefault(_types);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var InvalidType = function InvalidType() {
+  return _react2.default.createElement(
+    'span',
+    null,
+    'Invalid Type'
+  );
+};
+
+var stylesheet = {
+  field: {
+    display: 'table-row',
+    padding: '5px'
+  },
+  label: {
+    display: 'table-cell',
+    boxSizing: 'border-box',
+    verticalAlign: 'top',
+    paddingRight: 5,
+    paddingTop: 7,
+    textAlign: 'right',
+    width: 20,
+    fontSize: 10,
+    color: 'rgb(68, 68, 68)',
+    textTransform: 'uppercase',
+    fontWeight: 600
+  }
+};
+
+stylesheet.textarea = (0, _extends3.default)({}, stylesheet.input, {
+  height: '100px'
+});
+
+stylesheet.checkbox = (0, _extends3.default)({}, stylesheet.input, {
+  width: 'auto'
+});
+
+var PropField = function (_React$Component) {
+  (0, _inherits3.default)(PropField, _React$Component);
+
+  function PropField(props) {
+    (0, _classCallCheck3.default)(this, PropField);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (PropField.__proto__ || (0, _getPrototypeOf2.default)(PropField)).call(this, props));
+
+    _this._onChange = _this.onChange.bind(_this);
+    return _this;
+  }
+
+  (0, _createClass3.default)(PropField, [{
+    key: 'onChange',
+    value: function onChange(e) {
+      this.props.onChange(e.target.value);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props;
+      var onChange = _props.onChange;
+      var knob = _props.knob;
+
+
+      var InputType = _types2.default[knob.type] || InvalidType;
+
+      return _react2.default.createElement(
+        'div',
+        { style: stylesheet.field },
+        _react2.default.createElement(
+          'label',
+          { htmlFor: knob.name, style: stylesheet.label },
+          '' + knob.name
+        ),
+        _react2.default.createElement(InputType, {
+          knob: knob,
+          onChange: onChange
+        })
+      );
+    }
+  }]);
+  return PropField;
+}(_react2.default.Component);
+
+exports.default = PropField;
+
+
+PropField.propTypes = {
+  onChange: _react2.default.PropTypes.func.isRequired,
+  knob: _react2.default.PropTypes.object
+};

dist/components/PropForm.js

@@ -0,0 +1,101 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _PropField = require('./PropField');
+
+var _PropField2 = _interopRequireDefault(_PropField);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var stylesheet = {
+  propForm: {
+    fontFamily: '\n      -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",\n      "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif\n    ',
+    display: 'table',
+    boxSizing: 'border-box',
+    width: '100%',
+    maxWidth: '500px',
+    borderCollapse: 'separate',
+    borderSpacing: '5px'
+  }
+};
+
+var propForm = function (_React$Component) {
+  (0, _inherits3.default)(propForm, _React$Component);
+
+  function propForm() {
+    (0, _classCallCheck3.default)(this, propForm);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (propForm.__proto__ || (0, _getPrototypeOf2.default)(propForm)).call(this));
+
+    _this._onFieldChange = _this.onFieldChange.bind(_this);
+    return _this;
+  }
+
+  (0, _createClass3.default)(propForm, [{
+    key: 'onFieldChange',
+    value: function onFieldChange(name, type, value) {
+      var change = { name: name, type: type, value: value };
+      this.props.onFieldChange(change);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var knobs = this.props.knobs;
+
+      return _react2.default.createElement(
+        'form',
+        { style: stylesheet.propForm },
+        knobs.map(function (knob) {
+          return _react2.default.createElement(_PropField2.default, {
+            key: knob.name,
+            name: knob.name,
+            type: knob.type,
+            value: knob.value,
+            knob: knob,
+            onChange: _this2._onFieldChange.bind(null, knob.name, knob.type)
+          });
+        })
+      );
+    }
+  }]);
+  return propForm;
+}(_react2.default.Component);
+
+exports.default = propForm;
+
+
+propForm.displayName = 'propForm';
+
+propForm.propTypes = {
+  knobs: _react2.default.PropTypes.array.isRequired,
+  onFieldChange: _react2.default.PropTypes.func.isRequired
+};

dist/components/WrapStory.js

@@ -0,0 +1,124 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var WrapStory = function (_React$Component) {
+  (0, _inherits3.default)(WrapStory, _React$Component);
+
+  function WrapStory(props) {
+    (0, _classCallCheck3.default)(this, WrapStory);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (WrapStory.__proto__ || (0, _getPrototypeOf2.default)(WrapStory)).call(this, props));
+
+    _this.knobChanged = _this.knobChanged.bind(_this);
+    _this.resetKnobs = _this.resetKnobs.bind(_this);
+    _this.setPaneKnobs = _this.setPaneKnobs.bind(_this);
+    _this._knobsAreReset = false;
+    _this.state = {};
+    return _this;
+  }
+
+  (0, _createClass3.default)(WrapStory, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      // Watch for changes in knob editor.
+      this.props.channel.on('addon:knobs:knobChange', this.knobChanged);
+      // 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
+      // changes.
+      this.props.knobStore.subscribe(this.setPaneKnobs);
+      // Set knobs in the panel for the first time.
+      this.setPaneKnobs();
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.props.channel.removeListener('addon:knobs:knobChange', this.knobChanged);
+      this.props.channel.removeListener('addon:knobs:reset', this.resetKnobs);
+      this.props.knobStore.unsubscribe(this.setPaneKnobs);
+    }
+  }, {
+    key: 'setPaneKnobs',
+    value: function setPaneKnobs() {
+      var _props = this.props;
+      var channel = _props.channel;
+      var knobStore = _props.knobStore;
+
+      channel.emit('addon:knobs:setKnobs', knobStore.getAll());
+    }
+  }, {
+    key: 'knobChanged',
+    value: function knobChanged(change) {
+      var name = change.name;
+      var value = change.value;
+      var knobStore = this.props.knobStore;
+      // Update the related knob and it's value.
+
+      var knobOptions = knobStore.get(name);
+      knobOptions.value = value;
+      this.forceUpdate();
+    }
+  }, {
+    key: 'resetKnobs',
+    value: function resetKnobs() {
+      var knobStore = this.props.knobStore;
+
+      knobStore.reset();
+      this.forceUpdate();
+      this.setPaneKnobs();
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props2 = this.props;
+      var storyFn = _props2.storyFn;
+      var context = _props2.context;
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        storyFn(context)
+      );
+    }
+  }]);
+  return WrapStory;
+}(_react2.default.Component);
+
+exports.default = WrapStory;
+
+
+WrapStory.propTypes = {
+  context: _react2.default.PropTypes.object,
+  storyFn: _react2.default.PropTypes.func,
+  channel: _react2.default.PropTypes.object,
+  knobStore: _react2.default.PropTypes.object
+};

dist/components/types/Boolean.js

@@ -0,0 +1,92 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = {
+  display: 'table-cell',
+  boxSizing: 'border-box',
+  verticalAlign: 'top',
+  height: 21,
+  width: '100%',
+  outline: 'none',
+  border: '1px solid #ececec',
+  fontSize: '12px',
+  color: '#555'
+};
+
+var BooleanType = function (_React$Component) {
+  (0, _inherits3.default)(BooleanType, _React$Component);
+
+  function BooleanType() {
+    (0, _classCallCheck3.default)(this, BooleanType);
+    return (0, _possibleConstructorReturn3.default)(this, (BooleanType.__proto__ || (0, _getPrototypeOf2.default)(BooleanType)).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(BooleanType, [{
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props;
+      var knob = _props.knob;
+      var _onChange = _props.onChange;
+
+
+      return _react2.default.createElement('input', {
+        id: knob.name,
+        ref: 'input',
+        style: styles,
+        type: 'checkbox',
+        onChange: function onChange() {
+          return _onChange(_this2.refs.input.checked);
+        },
+        checked: knob.value
+      });
+    }
+  }]);
+  return BooleanType;
+}(_react2.default.Component);
+
+BooleanType.propTypes = {
+  knob: _react2.default.PropTypes.object,
+  onChange: _react2.default.PropTypes.func
+};
+
+BooleanType.serialize = function (value) {
+  return String(value);
+};
+
+BooleanType.deserialize = function (value) {
+  if (!value) return false;
+  return value.trim() === 'true';
+};
+
+exports.default = BooleanType;

dist/components/types/Number.js

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = {
+  display: 'table-cell',
+  boxSizing: 'border-box',
+  verticalAlign: 'middle',
+  height: '26px',
+  width: '100%',
+  outline: 'none',
+  border: '1px solid #f7f4f4',
+  borderRadius: 2,
+  fontSize: 11,
+  padding: '5px',
+  color: '#444'
+};
+
+var NumberType = function (_React$Component) {
+  (0, _inherits3.default)(NumberType, _React$Component);
+
+  function NumberType() {
+    (0, _classCallCheck3.default)(this, NumberType);
+    return (0, _possibleConstructorReturn3.default)(this, (NumberType.__proto__ || (0, _getPrototypeOf2.default)(NumberType)).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(NumberType, [{
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props;
+      var knob = _props.knob;
+      var _onChange = _props.onChange;
+
+
+      return _react2.default.createElement('input', {
+        id: knob.name,
+        ref: 'input',
+        style: styles,
+        value: knob.value,
+        type: 'number',
+        onChange: function onChange() {
+          return _onChange(parseFloat(_this2.refs.input.value));
+        }
+      });
+    }
+  }]);
+  return NumberType;
+}(_react2.default.Component);
+
+NumberType.propTypes = {
+  knob: _react2.default.PropTypes.object,
+  onChange: _react2.default.PropTypes.func
+};
+
+NumberType.serialize = function (value) {
+  return String(value);
+};
+
+NumberType.deserialize = function (value) {
+  return parseFloat(value);
+};
+
+exports.default = NumberType;

dist/components/types/Object.js

@@ -0,0 +1,163 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactTextareaAutosize = require('react-textarea-autosize');
+
+var _reactTextareaAutosize2 = _interopRequireDefault(_reactTextareaAutosize);
+
+var _deepEqual = require('deep-equal');
+
+var _deepEqual2 = _interopRequireDefault(_deepEqual);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = {
+  display: 'table-cell',
+  boxSizing: 'border-box',
+  verticalAlign: 'middle',
+  width: '100%',
+  outline: 'none',
+  border: '1px solid #f7f4f4',
+  borderRadius: 2,
+  fontSize: 11,
+  padding: '5px',
+  color: '#555',
+  fontFamily: 'monospace'
+};
+
+var ObjectType = function (_React$Component) {
+  (0, _inherits3.default)(ObjectType, _React$Component);
+
+  function ObjectType() {
+    var _ref;
+
+    (0, _classCallCheck3.default)(this, ObjectType);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (_ref = ObjectType.__proto__ || (0, _getPrototypeOf2.default)(ObjectType)).call.apply(_ref, [this].concat(args)));
+
+    _this.state = {};
+    return _this;
+  }
+
+  (0, _createClass3.default)(ObjectType, [{
+    key: 'getJSONString',
+    value: function getJSONString() {
+      var _state = this.state;
+      var json = _state.json;
+      var jsonString = _state.jsonString;
+      var knob = this.props.knob;
+
+      // If there is an error in the JSON, we need to give that errored JSON.
+
+      if (this.failed) return jsonString;
+
+      // If the editor value and the knob value is the same, we need to return the
+      // editor value as it allow user to add new fields to the JSON.
+      if ((0, _deepEqual2.default)(json, knob.value)) return jsonString;
+
+      // If the knob's value is different from the editor, it seems like
+      // there's a outside change and we need to get that.
+      return (0, _stringify2.default)(knob.value, null, 2);
+    }
+  }, {
+    key: 'handleChange',
+    value: function handleChange(e) {
+      var onChange = this.props.onChange;
+
+      var newState = {
+        jsonString: e.target.value
+      };
+
+      try {
+        newState.json = JSON.parse(e.target.value.trim());
+        onChange(newState.json);
+        this.failed = false;
+      } catch (err) {
+        this.failed = true;
+      }
+
+      this.setState(newState);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var knob = this.props.knob;
+
+      var jsonString = this.getJSONString();
+      var extraStyle = {};
+
+      if (this.failed) {
+        extraStyle.border = '1px solid #fadddd';
+        extraStyle.backgroundColor = '#fff5f5';
+      }
+
+      return _react2.default.createElement(_reactTextareaAutosize2.default, {
+        id: knob.name,
+        ref: 'input',
+        style: (0, _extends3.default)({}, styles, extraStyle),
+        value: jsonString,
+        onChange: function onChange(e) {
+          return _this2.handleChange(e);
+        }
+      });
+    }
+  }]);
+  return ObjectType;
+}(_react2.default.Component);
+
+ObjectType.propTypes = {
+  knob: _react2.default.PropTypes.object,
+  onChange: _react2.default.PropTypes.func
+};
+
+ObjectType.serialize = function (object) {
+  return (0, _stringify2.default)(object);
+};
+
+ObjectType.deserialize = function (value) {
+  if (!value) return {};
+  return JSON.parse(value);
+};
+
+exports.default = ObjectType;

dist/components/types/Text.js

@@ -0,0 +1,94 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactTextareaAutosize = require('react-textarea-autosize');
+
+var _reactTextareaAutosize2 = _interopRequireDefault(_reactTextareaAutosize);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = {
+  display: 'table-cell',
+  boxSizing: 'border-box',
+  verticalAlign: 'middle',
+  height: '26px',
+  width: '100%',
+  outline: 'none',
+  border: '1px solid #f7f4f4',
+  borderRadius: 2,
+  fontSize: 11,
+  padding: '5px',
+  color: '#555'
+};
+
+var TextType = function (_React$Component) {
+  (0, _inherits3.default)(TextType, _React$Component);
+
+  function TextType() {
+    (0, _classCallCheck3.default)(this, TextType);
+    return (0, _possibleConstructorReturn3.default)(this, (TextType.__proto__ || (0, _getPrototypeOf2.default)(TextType)).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(TextType, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props;
+      var knob = _props.knob;
+      var _onChange = _props.onChange;
+
+
+      return _react2.default.createElement(_reactTextareaAutosize2.default, {
+        id: knob.name,
+        ref: 'input',
+        style: styles,
+        value: knob.value,
+        onChange: function onChange(e) {
+          return _onChange(e.target.value);
+        }
+      });
+    }
+  }]);
+  return TextType;
+}(_react2.default.Component);
+
+TextType.propTypes = {
+  knob: _react2.default.PropTypes.object,
+  onChange: _react2.default.PropTypes.func
+};
+
+TextType.serialize = function (value) {
+  return value;
+};
+
+TextType.deserialize = function (value) {
+  return value;
+};
+
+exports.default = TextType;

dist/components/types/index.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Text = require('./Text');
+
+var _Text2 = _interopRequireDefault(_Text);
+
+var _Number = require('./Number');
+
+var _Number2 = _interopRequireDefault(_Number);
+
+var _Boolean = require('./Boolean');
+
+var _Boolean2 = _interopRequireDefault(_Boolean);
+
+var _Object = require('./Object');
+
+var _Object2 = _interopRequireDefault(_Object);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = {
+  text: _Text2.default,
+  number: _Number2.default,
+  boolean: _Boolean2.default,
+  object: _Object2.default
+};

dist/index.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.knob = knob;
+exports.text = text;
+exports.boolean = boolean;
+exports.number = number;
+exports.object = object;
+exports.withKnobs = withKnobs;
+
+var _storybookAddons = require('@kadira/storybook-addons');
+
+var _storybookAddons2 = _interopRequireDefault(_storybookAddons);
+
+var _KnobManager = require('./KnobManager');
+
+var _KnobManager2 = _interopRequireDefault(_KnobManager);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var manager = new _KnobManager2.default();
+
+function knob(name, options) {
+  return manager.knob(name, options);
+}
+
+function text(name, value) {
+  return manager.knob(name, { type: 'text', value: value });
+}
+
+function boolean(name, value) {
+  return manager.knob(name, { type: 'boolean', value: value });
+}
+
+function number(name, value) {
+  return manager.knob(name, { type: 'number', value: value });
+}
+
+function object(name, value) {
+  return manager.knob(name, { type: 'object', value: value });
+}
+
+function withKnobs(storyFn, context) {
+  var channel = _storybookAddons2.default.getChannel();
+  return manager.wrapStory(channel, storyFn, context);
+}

dist/register.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _storybookAddons = require('@kadira/storybook-addons');
+
+var _storybookAddons2 = _interopRequireDefault(_storybookAddons);
+
+var _Panel = require('./components/Panel');
+
+var _Panel2 = _interopRequireDefault(_Panel);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_storybookAddons2.default.register('kadirahq/storybook-addon-knobs', function (api) {
+  var channel = _storybookAddons2.default.getChannel();
+
+  _storybookAddons2.default.addPanel('kadirahq/storybook-addon-knobs', {
+    title: 'Knobs',
+    render: function render() {
+      return _react2.default.createElement(_Panel2.default, { channel: channel, api: api, key: 'knobs-panel' });
+    }
+  });
+});