feat: moving examples to storybook

Examples are now moved to storybook to reduce code and create static site.
Packages renamed in preparation of multiple packages.

README.md

@@ -87,13 +87,14 @@ npm start
 - [x] Fix passive scrolling issues
 - [x] Implement PRs from react-stockcharts
 - [x] Add all typings
-- [ ] Move examples to storybook
+- [x] Move examples to storybook
 - [ ] Correct all class props
 - [ ] Fix issues with empty datasets
 - [ ] Migrate to new React Context API
 - [ ] Remove all UNSAFE methods
+- [ ] Add all series' to storybook
+- [ ] Add documentation to storybook
 - [ ] Add full test suite
-- [ ] Generate documentation from typings
 - [ ] Split project into multiple packages
 
 ## LICENSE

package.json

@@ -6,18 +6,17 @@
     "postinstall": "npm run bootstrap",
     "bootstrap": "lerna bootstrap",
     "build": "lerna run build",
-    "build:charts": "lerna run build --scope=react-financial-charts",
-    "build:examples": "lerna run build --scope=*-examples",
     "clean": "run-s clean:packages clean:modules",
     "clean:packages": "lerna run clean",
     "clean:modules": "lerna clean --yes",
     "convert": "run-s link bootstrap",
+    "docs": "lerna run docs",
     "link": "lerna link convert",
     "lint": "lerna run lint",
-    "start": "run-p watch start:examples",
-    "start:examples": "lerna run start --stream",
+    "start": "run-p watch start:stories",
+    "start:stories": "lerna run start",
     "test": "lerna run test --stream",
-    "prestart": "npm run build:charts",
+    "prestart": "npm run build",
     "prepublishOnly": "npm run build",
     "publish": "lerna publish from-package --no-git-reset --yes",
     "release": "lerna version --no-push",
@@ -27,6 +26,9 @@
     "packages/*"
   ],
   "devDependencies": {
+    "@babel/core": "^7.6.0",
+    "@storybook/addon-knobs": "^5.1.11",
+    "@storybook/react": "^5.1.11",
     "@types/d3-array": "^2.0.0",
     "@types/d3-collection": "^1.0.8",
     "@types/d3-dsv": "^1.0.36",
@@ -43,28 +45,19 @@
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@types/react-virtualized-auto-sizer": "^1.0.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^3.2.0",
-    "file-loader": "^4.2.0",
-    "html-webpack-plugin": "^3.2.0",
-    "html-webpack-template": "^6.2.0",
+    "@types/storybook__addon-knobs": "^5.0.3",
+    "@types/storybook__react": "^4.0.2",
+    "babel-loader": "^8.0.6",
     "jest": "^24.9.0",
     "lerna": "^3.14.1",
-    "mini-css-extract-plugin": "^0.8.0",
     "npm-run-all": "^4.1.5",
-    "postcss-loader": "^3.0.0",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
     "rimraf": "^3.0.0",
     "ts-loader": "^6.0.4",
     "tslint": "^5.19.0",
-    "typescript": "^3.6.2",
-    "webpack": "^4.39.3",
-    "webpack-cli": "^3.3.7",
-    "webpack-dev-server": "^3.8.0"
+    "typescript": "^3.6.2"
   },
   "dependencies": {
-    "react-financial-charts": "file:packages/react-financial-charts",
-    "react-financial-charts-examples": "file:packages/react-financial-charts-examples"
+    "@react-financial-charts/stories": "file:packages/stories",
+    "react-financial-charts": "file:packages/charts"
   }
 }

packages/react-financial-charts/src/tooltip/ToolTipText.tsx → packages/charts/src/tooltip/ToolTipText.tsx

@@ -7,7 +7,7 @@ export class ToolTipText extends React.Component<ToolTipTextProps> {
 
     public static defaultProps = {
         className: "react-financial-charts-tooltip",
-        fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+        fontFamily: "'Helvetica Neue', Ubuntu, sans-serif",
         fontSize: 11,
     };
 

packages/stories/.storybook/config.js

@@ -0,0 +1,10 @@
+import { configure } from "@storybook/react";
+
+function loadStories() {
+    const req = require.context("../src", true, /.stories.tsx$/);
+    req
+        .keys()
+        .forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

packages/stories/.storybook/preview-head.html

@@ -0,0 +1,20 @@
+<style>
+    body {
+        margin: 0;
+        height: 100vh;
+        display: flex;
+    }
+
+    #root {
+        flex: 1;
+        display: flex;
+    }
+
+    .center {
+        align-items: center;
+        display: flex;
+        flex: 1;
+        justify-content: center;
+    }
+
+</style>

packages/stories/.storybook/webpack.config.js

@@ -0,0 +1,12 @@
+module.exports = ({ config }) => {
+    config.module.rules.push({
+        test: /\.(tsx?)$/,
+        use: [
+            {
+                loader: require.resolve('ts-loader'),
+            },
+        ],
+    });
+    config.resolve.extensions.push('.ts', '.tsx');
+    return config;
+};

packages/react-financial-charts-examples/package.json → packages/stories/package.json

@@ -1,22 +1,22 @@
 {
-  "name": "react-financial-charts-examples",
+  "name": "@react-financial-charts/stories",
   "version": "0.0.0",
-  "description": "Example charts",
+  "description": "Stories for react financial charts",
   "private": true,
   "author": "reactivemarkets",
   "license": "MIT",
   "scripts": {
-    "clean": "rimraf dist",
-    "build": "webpack --config webpack.config.js",
-    "start": "webpack-dev-server --progress --config webpack.config.js"
+    "clean": "rimraf ../docs lib",
+    "docs": "build-storybook -c .storybook -o ../../docs",
+    "start": "start-storybook"
   },
   "dependencies": {
     "d3-dsv": "^1.1.1",
     "d3-format": "^1.4.1",
     "d3-time-format": "^2.1.3",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-financial-charts": "file:../react-financial-charts",
+    "react-financial-charts": "file:../charts",
     "react-virtualized-auto-sizer": "^1.0.2"
   }
 }

packages/stories/src/data/index.ts

@@ -0,0 +1,3 @@
+export * from "./iOHLCData";
+export * from "./withOHLCData";
+export * from "./withSize";