Add basic chart with grid story + Fix all build config

.storybook/webpack.config.js

@@ -10,9 +10,29 @@ module.exports = {
   plugins: [
     // your custom plugins
   ],
+  resolve: {
+    // Add `.ts` and `.tsx` as a resolvable extension.
+    extensions: ['.ts', '.tsx', '.js']
+  },
   module: {
     rules: [
-      // add your custom rules.
+      { test: /\.js$/, loader: 'babel-loader' },
+      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
+      { test: /\.tsx?$/, loader: 'babel-loader!ts-loader' },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
         ],
       },
+    ]
+  },
 };

package.json

@@ -49,6 +49,7 @@
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.2",
     "babel-plugin-module-resolver": "^2.4.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
     "babel-preset-env": "^1.6.1",
     "babel-preset-es2015": "6.18.0",
     "babel-preset-es2017": "^6.24.1",
@@ -62,6 +63,7 @@
     "canvas-prebuilt": "^1.6.0",
     "copy-webpack-plugin": "^4.4.1",
     "coveralls": "^2.0.0",
+    "css-loader": "^0.28.11",
     "enzyme": "^2.8.2",
     "eslint": "^3.13.1",
     "eslint-config-uber-es2015": "^3.0.1",
@@ -82,6 +84,7 @@
     "react-test-renderer": "^15.5.4",
     "react-vis": "^1.9.4",
     "rimraf": "^2.0.0",
+    "style-loader": "^0.21.0",
     "stylelint": "^7.7.1",
     "stylelint-config-standard": "^15.0.1",
     "tape": "^4.6.3",

stories/ChartWithGrid.js

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import {
+  XYPlot,
+  XAxis,
+  YAxis,
+  HorizontalGridLines,
+  VerticalGridLines,
+  LineSeries
+} from 'react-vis';
+import GridArea from '../src/grid-area';
+import '../node_modules/react-vis/dist/style.css';
+
+const MSEC_DAILY = 86400000;
+
+export default class BasicChartWithGrid extends React.Component {
+  render() {
+    const timestamp = new Date('September 9 2017').getTime();
+    return (
+      <XYPlot
+        xType="time"
+        width={500}
+        height={300}>
+        <HorizontalGridLines />
+        <VerticalGridLines />
+        <GridArea 
+        direction={'vertical'} 
+        style={{fill:"rgba(0,255,0,0.4)"}}
+        highlightRegion={[[4, 5.76], [8.5, 11.25]]}
+        />
+
+        <XAxis title="X Axis" />
+        <YAxis title="Y Axis" />
+        
+        <LineSeries
+          data={[
+            {x: timestamp + MSEC_DAILY, y: 3},
+            {x: timestamp + MSEC_DAILY * 2, y: 5},
+            {x: timestamp + MSEC_DAILY * 3, y: 15},
+            {x: timestamp + MSEC_DAILY * 4, y: 12}
+          ]}/>
+        <LineSeries
+          data={null}/>
+        <LineSeries
+          data={[
+            {x: timestamp + MSEC_DAILY, y: 10},
+            {x: timestamp + MSEC_DAILY * 2, y: 4},
+            {x: timestamp + MSEC_DAILY * 3, y: 2},
+            {x: timestamp + MSEC_DAILY * 4, y: 15}
+          ]}/>
+      </XYPlot>
+    );
+  }
+}

stories/index.stories.js

@@ -5,6 +5,7 @@ import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
 import { Button, Welcome } from '@storybook/react/demo';
+import ChartWithGrid from './ChartWithGrid';
 
 storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
 
@@ -17,3 +18,7 @@ storiesOf('Button', module)
       </span>
     </Button>
   ));
+
+storiesOf('Grid', module)
+  .add('basic', () => <ChartWithGrid onClick={action('clicked')} />)
+

webpack.config.js

@@ -18,7 +18,21 @@ module.exports = {
     rules: [
       { test: /\.js$/, loader: 'babel-loader' },
       // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
-      { test: /\.tsx?$/, loader: 'babel-loader!ts-loader' }
+      { test: /\.tsx?$/, loader: 'babel-loader!ts-loader' },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+        ],
+      },
     ]
   },
   plugins: [

yarn.lock

@@ -1029,7 +1029,7 @@ babel-plugin-syntax-class-properties@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
 
-babel-plugin-syntax-decorators@^6.13.0:
+babel-plugin-syntax-decorators@^6.1.18, babel-plugin-syntax-decorators@^6.13.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz#312563b4dbde3cc806cee3e416cceeaddd11ac0b"
 
@@ -1102,6 +1102,14 @@ babel-plugin-transform-class-properties@^6.24.1:
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
 
+babel-plugin-transform-decorators-legacy@^1.3.5:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-decorators-legacy/-/babel-plugin-transform-decorators-legacy-1.3.5.tgz#0e492dffa0edd70529072887f8aa86d4dd8b40a1"
+  dependencies:
+    babel-plugin-syntax-decorators "^6.1.18"
+    babel-runtime "^6.2.0"
+    babel-template "^6.3.0"
+
 babel-plugin-transform-decorators@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-decorators/-/babel-plugin-transform-decorators-6.24.1.tgz#788013d8f8c6b5222bdf7b344390dfd77569e24d"
@@ -1588,14 +1596,14 @@ babel-register@^6.18.0, babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@6.x.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0, babel-runtime@^6.9.2:
+babel-runtime@6.x.x, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0, babel-runtime@^6.9.2:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
 
-babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0:
+babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0, babel-template@^6.3.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
   dependencies:
@@ -9006,6 +9014,13 @@ style-loader@^0.20.3:
     loader-utils "^1.1.0"
     schema-utils "^0.4.5"
 
+style-loader@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.21.0.tgz#68c52e5eb2afc9ca92b6274be277ee59aea3a852"
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^0.4.5"
+
 style-search@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"