From cf246a1778e3ae87722e511e1de751bed90e9e1a Mon Sep 17 00:00:00 2001 From: Abhas Bhattacharya Date: Thu, 28 Jun 2018 14:04:45 +0530 Subject: [PATCH] Add basic chart with grid story + Fix all build config --- .storybook/webpack.config.js | 24 ++++++++++++++-- package.json | 3 ++ stories/ChartWithGrid.js | 54 ++++++++++++++++++++++++++++++++++++ stories/index.stories.js | 5 ++++ webpack.config.js | 16 ++++++++++- yarn.lock | 21 ++++++++++++-- 6 files changed, 117 insertions(+), 6 deletions(-) create mode 100644 stories/ChartWithGrid.js diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index e010e2f..a478693 100644 --- a/.storybook/webpack.config.js +++ b/.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, + }, + }, + ], + }, + ] }, }; diff --git a/package.json b/package.json index 544b690..50ab9c8 100644 --- a/package.json +++ b/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", diff --git a/stories/ChartWithGrid.js b/stories/ChartWithGrid.js new file mode 100644 index 0000000..94848c4 --- /dev/null +++ b/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 ( + + + + + + + + + + + + + ); + } +} \ No newline at end of file diff --git a/stories/index.stories.js b/stories/index.stories.js index aa04241..773db11 100644 --- a/stories/index.stories.js +++ b/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', () => ); @@ -17,3 +18,7 @@ storiesOf('Button', module) )); + +storiesOf('Grid', module) + .add('basic', () => ) + diff --git a/webpack.config.js b/webpack.config.js index c37c10f..06af127 100644 --- a/webpack.config.js +++ b/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: [ diff --git a/yarn.lock b/yarn.lock index b97a5fe..1e15638 100644 --- a/yarn.lock +++ b/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"