feat: add storybook

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /\.stories\.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

package.json

@@ -30,7 +30,13 @@
     "lint-staged": "^8.0.4",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "vega": "^5.3.4"
+    "vega": "^5.3.4",
+    "@storybook/react": "^5.0.6",
+    "@storybook/addon-actions": "^5.0.6",
+    "@storybook/addon-links": "^5.0.6",
+    "@storybook/addons": "^5.0.6",
+    "@babel/core": "^7.4.3",
+    "babel-loader": "^8.0.5"
   },
   "engines": {
     "node": ">=8.10.0"
@@ -75,6 +81,8 @@
     "type": "NODE_ENV=production beemo typescript --noEmit",
     "type:dts": "NODE_ENV=production beemo typescript --emitDeclarationOnly",
     "lint": "beemo create-config prettier && beemo eslint \"./{src,test,storybook}/**/*.{js,jsx,ts,tsx}\"",
-    "lint:fix": "beemo create-config prettier && beemo eslint --fix \"./{src,test,storybook}/**/*.{js,jsx,ts,tsx}\""
+    "lint:fix": "beemo create-config prettier && beemo eslint --fix \"./{src,test,storybook}/**/*.{js,jsx,ts,tsx}\"",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   }
 }

stories/Demo.jsx

@@ -0,0 +1,93 @@
+/* eslint-disable no-magic-numbers */
+import React from 'react';
+import data1 from './vega/data1.json';
+import spec1 from './vega/spec1';
+import spec2 from './vega/spec2';
+import Vega, { createClassFromSpec } from '../src/index';
+import './style.css';
+
+const BarChart = createClassFromSpec(spec1);
+
+const code1 = `<Vega data={this.state.data} spec={this.state.spec} onSignalHover={this.handleHover} />`;
+
+const code2 = `const BarChart = ReactVega.createClassFromSpec(barSpec);
+<BarChart data={this.state.data} onSignalHover={this.handleHover} />`;
+
+export default class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: data1,
+      info: '',
+      spec: spec1,
+    };
+
+    this.handleHover = this.handleHover.bind(this);
+    this.toggleSpec = this.handleToggleSpec.bind(this);
+    this.updateData = this.handleUpdateData.bind(this);
+  }
+
+  handleHover(...args) {
+    this.setState({
+      info: JSON.stringify(args),
+    });
+  }
+
+  handleToggleSpec() {
+    const { spec } = this.state;
+    if (spec === spec1) {
+      this.setState({ spec: spec2 });
+    } else {
+      this.setState({ spec: spec1 });
+    }
+  }
+
+  handleUpdateData() {
+    const table = [];
+    for (let i = 1; i <= 20; i += 1) {
+      table.push({
+        amount: Math.round(Math.random() * 100),
+        category: String.fromCharCode(65 + i),
+      });
+    }
+    this.setState({ data: { table } });
+  }
+
+  render() {
+    const { data, spec, info } = this.state;
+
+    return (
+      <div>
+        <div style={{ float: 'right' }}>
+          <iframe
+            title="star"
+            src="https://ghbtns.com/github-btn.html?user=vega&repo=react-vega&type=star&count=true"
+            frameBorder="0"
+            scrolling="0"
+            width="100px"
+            height="20px"
+          />
+        </div>
+        <button type="button" onClick={this.handleToggleSpec}>
+          Toggle Spec
+        </button>
+        <button type="button" onClick={this.handleUpdateData}>
+          Update data
+        </button>
+        <h3>
+          <code>&lt;Vega&gt;</code> React Component
+        </h3>
+        Will recompile when spec changes and update when data changes.
+        <pre>{code1}</pre>
+        <Vega data={data} spec={spec} onSignalTooltip={this.handleHover} />
+        <h3>
+          <code>ReactVega.createClassFromSpec()</code>
+        </h3>
+        Use the given spec to create a reusable component.
+        <pre>{code2}</pre>
+        <BarChart data={data} onSignalTooltip={this.handleHover} />
+        {info}
+      </div>
+    );
+  }
+}

stories/index.stories.js

@@ -0,0 +1,9 @@
+/* eslint-disable react/jsx-filename-extension */
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { storiesOf } from '@storybook/react';
+import Demo from './Demo';
+
+// storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+
+storiesOf('react-vega', module).add('Demo', () => <Demo />);