Merge pull request #4 from kadirahq/new-api

Use new storybook addon api

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@kadira/storybook/addons'
+require('../src').register();

.storybook/config.js

@@ -3,10 +3,7 @@
 // This is an auto generated file with React CDK.
 // Do not modify this file.
 
-import { configure, setAddon } from '@kadira/storybook';
-import { addWithKnobs } from '../src';
-
-setAddon({addWithKnobs});
+import { configure } from '@kadira/storybook';
 
 function loadStories() {
   require('../src/stories');

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@kadira/react-storybook-addon-knobs",
+  "name": "@kadira/storybook-addon-knobs",
   "version": "0.0.1",
   "description": "React Storybook Addon Prop Editor Component",
   "repository": {
@@ -8,6 +8,7 @@
   },
   "license": "MIT",
   "scripts": {
+    "start": "./example/prepublish.sh",
     "prepublish": ". ./.scripts/prepublish.sh",
     "lint": "eslint src",
     "lintfix": "eslint src --fix",
@@ -18,7 +19,7 @@
     "publish-storybook": "bash .scripts/publish_storybook.sh"
   },
   "devDependencies": {
-    "@kadira/storybook": "^1.19.0",
+    "@kadira/storybook": "^2.1.0",
     "babel-cli": "^6.5.0",
     "babel-core": "^6.5.0",
     "babel-eslint": "^6.0.2",
@@ -41,15 +42,17 @@
     "raw-loader": "^0.5.1",
     "react": "^15.0.0",
     "react-addons-test-utils": "^15.0.0",
-    "react-dom": "^15.0.0",
     "sinon": "^1.17.3",
     "style-loader": "^0.13.1"
   },
   "peerDependencies": {
-    "react": "^0.14.7 || ^15.0.0"
+    "@kadira/storybook-addons": "^1.3.0",
+    "react": "^0.14.7 || ^15.0.0",
+    "react-dom": "^0.14.7 || ^15.0.0"
   },
   "dependencies": {
-    "babel-runtime": "^6.5.0"
+    "babel-runtime": "^6.5.0",
+    "tosource": "^1.0.0"
   },
   "main": "dist/index.js",
   "engines": {

src/components/Panel.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropForm from './PropForm';
+import tosource from 'tosource';
+
+const styles = {
+  panel: {
+    padding: '5px',
+    backgroundColor: 'rgb(247, 247, 247)',
+    width: '100%',
+  },
+  noKnobs: {
+    fontFamily: `
+      -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",
+      "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif
+    `,
+    display: 'inline',
+    backgroundColor: 'rgb(247, 247, 247)',
+    width: '100%',
+    textAlign: 'center',
+    color: 'rgb(190, 190, 190)',
+    padding: '10px',
+  },
+  resetButton: {
+    color: 'rgb(130, 130, 130)',
+    float: 'right',
+    marginRight: '5px',
+    marginTop: '5px',
+  },
+};
+
+export default class Panel extends React.Component {
+  constructor(props) {
+    super(props);
+    this._handleChange = this.handleChange.bind(this);
+    this._setFields = this.setFields.bind(this);
+    this._reset = this.reset.bind(this);
+    this.state = { fields: {} };
+  }
+
+  componentDidMount() {
+    this.props.channel.on('addon:knobs:setFields', this._setFields);
+    this.props.api.onStory(() => {
+      this.setState({ fields: false });
+    });
+  }
+
+  setFields(_fields) {
+    const fields = _fields;
+    for (const f in fields) {
+      if (fields.hasOwnProperty(f)) {
+        if (fields[f].type === 'object') {
+          fields[f].value = tosource(fields[f].value);
+        }
+      }
+    }
+    this.setState({ fields });
+  }
+
+  reset() {
+    this.props.channel.emit('addon:knobs:reset');
+  }
+
+  handleChange(change) {
+    const { name, value } = change;
+
+    const fields = this.state.fields;
+    const changedField = {};
+    changedField[name] = { ...fields[name], ...{ value } };
+    const newFields = { ...fields, ...changedField };
+    this.setState({ fields: newFields });
+
+    this.props.channel.emit('addon:knobs:propChange', change);
+  }
+
+  render() {
+    if (!this.state.fields) {
+      return (
+        <div style={styles.noKnobs}>NO KNOBS</div>
+      );
+    }
+
+    return (
+      <div style={styles.panel}>
+        <PropForm fields={this.state.fields} onFieldChange={this._handleChange} />
+        <button style={styles.resetButton} onClick={this._reset}>RESET</button>
+      </div>
+    );
+  }
+}
+
+Panel.propTypes = {
+  channel: React.PropTypes.object,
+  onReset: React.PropTypes.object,
+  api: React.PropTypes.object,
+};