feat: add react-vega-lite storybook

.gitignore

@@ -39,7 +39,7 @@ tmp
 
 # Do not store lock for library
 yarn.lock
-package.json
+package-lock.json
 
 # These files are generated by beemo
 babel.config.js

package.json

@@ -10,7 +10,9 @@
   },
   "private": true,
   "dependencies": {
-    "react": "^16.8.6"
+    "react": "^16.8.6",
+    "react-vega": "^6.0.0",
+    "react-vega-lite": "^3.0.0"
   },
   "devDependencies": {
     "@superset-ui/build-config": "^0.0.8",

packages/react-vega-lite/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "react-vega-lite",
+  "version": "3.0.0",
+  "description": "Convert Vega-lite spec into React class conveniently",
+  "author": "Krist Wongsuphasawat <krist.wongz@gmail.com> (http://kristw.yellowpigz.com)",
+  "keywords": [],
+  "repository": "git@github.com:vega/react-vega.git",
+  "bugs": {
+    "url": "https://github.com/vega/react-vega/issues"
+  },
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "files": [
+    "src",
+    "esm",
+    "lib",
+    "types"
+  ],
+  "dependencies": {
+    "react-vega": "^6.0.0"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0",
+    "vega-lite": "^3.1.0"
+  },
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/react-vega/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "react-vega",
+  "version": "6.0.0",
+  "description": "Convert Vega spec into React class conveniently",
+  "author": "Krist Wongsuphasawat <krist.wongz@gmail.com> (http://kristw.yellowpigz.com)",
+  "keywords": [],
+  "repository": "git@github.com:vega/react-vega.git",
+  "bugs": {
+    "url": "https://github.com/vega/react-vega/issues"
+  },
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "files": [
+    "src",
+    "esm",
+    "lib",
+    "types"
+  ],
+  "dependencies": {
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0",
+    "vega": "^5.3.4"
+  },
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  }
+}

stories/Demo.jsx → stories/ReactVegaDemo.jsx

@@ -4,7 +4,6 @@ import Vega, { createClassFromSpec } from '../packages/react-vega';
 import data1 from './vega/data1.json';
 import spec1 from './vega/spec1';
 import spec2 from './vega/spec2';
-import './style.css';
 
 const BarChart = createClassFromSpec(spec1);
 
@@ -23,8 +22,8 @@ export default class Demo extends React.Component {
     };
 
     this.handleHover = this.handleHover.bind(this);
-    this.toggleSpec = this.handleToggleSpec.bind(this);
-    this.updateData = this.handleUpdateData.bind(this);
+    this.handleToggleSpec = this.handleToggleSpec.bind(this);
+    this.handleUpdateData = this.handleUpdateData.bind(this);
   }
 
   handleHover(...args) {

stories/ReactVegaLiteDemo.jsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import VegaLite, { createClassFromLiteSpec } from '../packages/react-vega-lite';
+
+const data1 = {
+  values: [
+    { a: 'A', b: 20 },
+    { a: 'B', b: 34 },
+    { a: 'C', b: 55 },
+    { a: 'D', b: 19 },
+    { a: 'E', b: 40 },
+    { a: 'F', b: 34 },
+    { a: 'G', b: 91 },
+    { a: 'H', b: 78 },
+    { a: 'I', b: 25 },
+  ],
+};
+
+const data2 = {
+  values: [
+    { a: 'A', b: 28 },
+    { a: 'B', b: 55 },
+    { a: 'C', b: 43 },
+    { a: 'D', b: 91 },
+    { a: 'E', b: 81 },
+    { a: 'F', b: 53 },
+    { a: 'G', b: 19 },
+    { a: 'H', b: 87 },
+    { a: 'I', b: 52 },
+  ],
+};
+
+const spec1 = {
+  description: 'A simple bar chart with embedded data.',
+  encoding: {
+    x: { field: 'a', type: 'ordinal' },
+    y: { field: 'b', type: 'quantitative' },
+  },
+  mark: 'bar',
+};
+
+const spec2 = {
+  description: 'A simple bar chart with embedded data.',
+  encoding: {
+    x: { field: 'b', type: 'quantitative' },
+    y: { field: 'a', type: 'ordinal' },
+  },
+  mark: 'bar',
+};
+
+const BarChart = createClassFromLiteSpec(spec1);
+
+const code1 = `<VegaLite data={this.state.data} spec={this.state.spec} />`;
+
+const code2 = `const BarChart = ReactVegaLite.createClassFromLiteSpec(spec1);
+<BarChart data={this.state.data} />`;
+
+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.handleToggleSpec = this.handleToggleSpec.bind(this);
+    this.handleUpdateData = 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 { data } = this.state;
+    if (data === data1) {
+      this.setState({ data: data2 });
+    } else if (data === data2) {
+      this.setState({ data: data1 });
+    }
+  }
+
+  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;VegaLite&gt;</code> React Component
+        </h3>
+        Will recompile when spec changes and update when data changes.
+        <pre>{code1}</pre>
+        <VegaLite data={data} spec={spec} onSignalHover={this.handleHover} />
+        <h3>
+          <code>ReactVegaLite.createClassFromLiteSpec()</code>
+        </h3>
+        Use the given spec to create a reusable component.
+        <pre>{code2}</pre>
+        <BarChart data={data} onSignalHover={this.handleHover} />
+        {info}
+      </div>
+    );
+  }
+}

stories/index.stories.js

@@ -2,8 +2,11 @@
 import React from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { storiesOf } from '@storybook/react';
-import Demo from './Demo';
+import ReactVegaDemo from './ReactVegaDemo';
+import ReactVegaLiteDemo from './ReactVegaLiteDemo';
+import './style.css';
 
 // storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
 
-storiesOf('react-vega', module).add('Demo', () => <Demo />);
+storiesOf('react-vega', module).add('Demo', () => <ReactVegaDemo />);
+storiesOf('react-vega-lite', module).add('Demo', () => <ReactVegaLiteDemo />);