feat!: separating code into packages

BREAKING CHANGE: first stage of refactor breaking the code down.
markmcdowell · Jul 8, 2020 · 670537f · 670537f
1 parent 4cdae2f
commit 670537f
Show file tree

Hide file tree

Showing 275 changed files with 2,549 additions and 1,557 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,13 @@
 # React Financial Charts
 
-[![CircleCI](https://circleci.com/gh/reactivemarkets/react-financial-charts/tree/master.svg?style=shield)](https://circleci.com/gh/reactivemarkets/react-financial-charts/tree/master)
+> **Note:** this repo is a fork of [react-stockcharts](https://github.com/rrag/react-stockcharts), renamed, converted to typescript and bug fixes applied due to the original project being unmaintained.
+
+> **Note:** v1 is a fully breaking change with large parts, if not all, rewritten. Do not expect the same API! although the same features should exist.
+
+![ci](https://github.com/reactivemarkets/react-financial-charts/workflows/ci/badge.svg)
 [![codecov](https://codecov.io/gh/reactivemarkets/react-financial-charts/branch/master/graph/badge.svg)](https://codecov.io/gh/reactivemarkets/react-financial-charts)
 [![Dependabot Status](https://api.dependabot.com/badges/status?host=github&repo=reactivemarkets/react-financial-charts)](https://dependabot.com) [![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://github.com/reactivemarkets/react-financial-charts/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/react-financial-charts.svg?style=flat)](https://www.npmjs.com/package/react-financial-charts)
 
-> **Note:** this repo is a fork of [react-stockcharts](https://github.com/rrag/react-stockcharts), renamed, converted to typescript and bug fixes applied due to the original project being unmaintained.
-
 Charts dedicated to finance.
 
 The aim with this project is create financial charts that work out of the box.
@@ -92,14 +94,15 @@ npm start
 - [x] Implement PRs from react-stockcharts
 - [x] Add all typings
 - [x] Move examples to storybook
+- [x] Add all series' to storybook
+- [x] Split project into multiple packages
 - [ ] 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
-- [ ] Split project into multiple packages
+
 
 ## LICENSE
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,6 +6,17 @@
     "postinstall": "npm run bootstrap",
     "bootstrap": "lerna bootstrap",
     "build": "lerna run build",
+    "build:annotations": "lerna run build --scope='*/annotations'",
+    "build:axes": "lerna run build --scope='*/axes'",
+    "build:charts": "lerna run build --scope='react-financial-charts'",
+    "build:coordinates": "lerna run build --scope='*/coordinates'",
+    "build:core": "lerna run build --scope='*/core'",
+    "build:indicators": "lerna run build --scope='*/indicators'",
+    "build:interactive": "lerna run build --scope='*/interactive'",
+    "build:scales": "lerna run build --scope='*/scales'",
+    "build:series": "lerna run build --scope='*/series'",
+    "build:tooltip": "lerna run build --scope='*/tooltip'",
+    "build:utils": "lerna run build --scope='*/utils'",
     "clean": "run-s clean:packages clean:modules",
     "clean:packages": "lerna run clean",
     "clean:modules": "lerna clean --yes",
@@ -66,7 +77,17 @@
     "typescript": "^3.8.3"
   },
   "dependencies": {
+    "@react-financial-charts/annotations": "file:packages/annotations",
+    "@react-financial-charts/axes": "file:packages/axes",
+    "@react-financial-charts/coordinates": "file:packages/coordinates",
+    "@react-financial-charts/core": "file:packages/core",
+    "@react-financial-charts/indicators": "file:packages/indicators",
+    "@react-financial-charts/interactive": "file:packages/interactive",
+    "@react-financial-charts/scales": "file:packages/scales",
+    "@react-financial-charts/series": "file:packages/series",
     "@react-financial-charts/stories": "file:packages/stories",
+    "@react-financial-charts/tooltip": "file:packages/tooltip",
+    "@react-financial-charts/utils": "file:packages/utils",
     "react-financial-charts": "file:packages/charts"
   }
 }
diff --git a/packages/annotations/LICENSE b/packages/annotations/LICENSE
@@ -0,0 +1,24 @@
+The MIT License (MIT)
+https://github.com/reactivemarkets/react-financial-charts
+
+Copyright (c) 2015-2018 Ragu Ramaswamy
+Copyright (c) 2016 Julien Renaux
+Copyright (c) 2019 Reactive Markets
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/packages/annotations/README.md b/packages/annotations/README.md
@@ -0,0 +1,5 @@
+# Annotations
+
+```bash
+npm i @react-finanical-charts/annotations
+```
diff --git a/packages/annotations/jest.config.js b/packages/annotations/jest.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+    preset: "ts-jest",
+    collectCoverage: true,
+    coverageReporters: ["text", "json"],
+    errorOnDeprecated: true,
+    testMatch: ["**/__tests__/**/*.+(ts|tsx)"],
+};
diff --git a/packages/annotations/package.json b/packages/annotations/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "@react-financial-charts/annotations",
+  "version": "0.5.1",
+  "description": "Annotations for react-financial-charts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./lib/index.js",
+  "typings": "./lib/index.d.ts",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "sideEffects": false,
+  "author": "Reactive Markets",
+  "keywords": [
+    "charts",
+    "charting",
+    "stockcharts",
+    "finance",
+    "financial",
+    "finance-chart",
+    "react",
+    "d3"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/reactivemarkets/react-financial-charts.git"
+  },
+  "bugs": {
+    "url": "https://github.com/reactivemarkets/react-financial-charts/issues"
+  },
+  "scripts": {
+    "build": "npm run clean && npm run compile",
+    "clean": "rimraf lib",
+    "compile": "tsc -p tsconfig.json",
+    "test": "jest",
+    "watch": "tsc -p tsconfig.json --watch --preserveWatchOutput"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "dependencies": {
+    "@react-financial-charts/core": "file:../core",
+    "prop-types": "^15.7.2"
+  }
+}
diff --git a/packages/charts/src/annotation/Annotate.tsx → packages/annotations/src/Annotate.tsx b/packages/charts/src/annotation/Annotate.tsx → packages/annotations/src/Annotate.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
-
-import GenericChartComponent from "../GenericChartComponent";
+import { GenericChartComponent } from "@react-financial-charts/core";
 
 interface AnnotateProps {
     readonly className?: string;

diff --git a/.../charts/src/annotation/BackgroundText.tsx → packages/annotations/src/BackgroundText.tsx b/.../charts/src/annotation/BackgroundText.tsx → packages/annotations/src/BackgroundText.tsx
@@ -1,8 +1,6 @@
 import * as PropTypes from "prop-types";
 import * as React from "react";
-
-import { colorToRGBA, isDefined } from "../utils";
-import { PureComponent } from "../utils/PureComponent";
+import { colorToRGBA } from "@react-financial-charts/core";
 
 interface BackgroundTextProps {
     readonly x: number;
@@ -17,7 +15,7 @@ interface BackgroundTextProps {
     readonly children: (interval: number) => string;
 }
 
-class BackgroundText extends PureComponent<BackgroundTextProps> {
+class BackgroundText extends React.PureComponent<BackgroundTextProps> {
     public static defaultProps = {
         opacity: 0.3,
         fill: "#9E7523",
@@ -35,7 +33,7 @@ class BackgroundText extends PureComponent<BackgroundTextProps> {
     };
 
     public componentDidMount() {
-        if (this.context.chartCanvasType !== "svg" && isDefined(this.context.getCanvasContexts)) {
+        if (this.context.chartCanvasType !== "svg" && this.context.getCanvasContexts !== undefined) {
             const contexts = this.context.getCanvasContexts();
             if (contexts) {
                 this.drawOnCanvas(contexts.bg, this.props, this.context, this.props.children);

diff --git a/...s/charts/src/annotation/BarAnnotation.tsx → packages/annotations/src/BarAnnotation.tsx b/...s/charts/src/annotation/BarAnnotation.tsx → packages/annotations/src/BarAnnotation.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { functor } from "../utils";
+import { functor } from "@react-financial-charts/core";
 
 interface BarAnnotationProps {
     readonly className?: string;

diff --git a/packages/charts/src/annotation/Label.tsx → packages/annotations/src/Label.tsx b/packages/charts/src/annotation/Label.tsx → packages/annotations/src/Label.tsx
@@ -1,8 +1,6 @@
 import * as PropTypes from "prop-types";
 import * as React from "react";
-import GenericComponent from "../GenericComponent";
-
-import { colorToRGBA, functor, isDefined } from "../utils";
+import { colorToRGBA, functor, GenericComponent } from "@react-financial-charts/core";
 import { helper, LabelAnnotation } from "./LabelAnnotation";
 
 interface LabelProps {
@@ -80,7 +78,7 @@ function drawOnCanvas2(ctx: CanvasRenderingContext2D, props, context, moreProps)
     ctx.setTransform(1, 0, 0, 1, 0, 0);
     ctx.scale(ratio, ratio);
 
-    if (isDefined(canvasOriginX)) {
+    if (canvasOriginX !== undefined) {
         ctx.translate(canvasOriginX, canvasOriginY);
     } else {
         ctx.translate(margin.left + 0.5 * ratio, margin.top + 0.5 * ratio);

diff --git a/...charts/src/annotation/LabelAnnotation.tsx → packages/annotations/src/LabelAnnotation.tsx b/...charts/src/annotation/LabelAnnotation.tsx → packages/annotations/src/LabelAnnotation.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { functor } from "../utils";
+import { functor } from "@react-financial-charts/core";
 
 interface LabelAnnotationProps {
     readonly className?: string;

diff --git a/...arts/src/annotation/SvgPathAnnotation.tsx → ...ges/annotations/src/SvgPathAnnotation.tsx b/...arts/src/annotation/SvgPathAnnotation.tsx → ...ges/annotations/src/SvgPathAnnotation.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { functor } from "../utils";
+import { functor } from "@react-financial-charts/core";
 
 interface SvgPathAnnotationProps {
     readonly className?: string;

diff --git a/packages/charts/src/annotation/index.ts → packages/annotations/src/index.ts b/packages/charts/src/annotation/index.ts → packages/annotations/src/index.ts
diff --git a/packages/annotations/tsconfig.json b/packages/annotations/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
+        "declaration": true,
+        "experimentalDecorators": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react",
+        "module": "esnext",
+        "moduleResolution": "node",
+        "noImplicitAny": false,
+        "noImplicitThis": true,
+        "noUnusedLocals": true,
+        "outDir": "lib",
+        "sourceMap": true,
+        "strict": true,
+        "target": "es2017"
+    },
+    "include": [
+        "src"
+    ],
+    "exclude": [
+        "lib",
+        "**/__tests__/**"
+    ]
+}
diff --git a/packages/axes/LICENSE b/packages/axes/LICENSE
@@ -0,0 +1,24 @@
+The MIT License (MIT)
+https://github.com/reactivemarkets/react-financial-charts
+
+Copyright (c) 2015-2018 Ragu Ramaswamy
+Copyright (c) 2016 Julien Renaux
+Copyright (c) 2019 Reactive Markets
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/packages/axes/README.md b/packages/axes/README.md
@@ -0,0 +1,5 @@
+# Axes
+
+```bash
+npm i @react-finanical-charts/axes
+```
diff --git a/packages/axes/jest.config.js b/packages/axes/jest.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+    preset: "ts-jest",
+    collectCoverage: true,
+    coverageReporters: ["text", "json"],
+    errorOnDeprecated: true,
+    testMatch: ["**/__tests__/**/*.+(ts|tsx)"],
+};
diff --git a/packages/axes/package.json b/packages/axes/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "@react-financial-charts/axes",
+  "version": "0.5.1",
+  "description": "Axes for react-financial-charts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./lib/index.js",
+  "typings": "./lib/index.d.ts",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "sideEffects": false,
+  "author": "Reactive Markets",
+  "keywords": [
+    "charts",
+    "charting",
+    "stockcharts",
+    "finance",
+    "financial",
+    "finance-chart",
+    "react",
+    "d3"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/reactivemarkets/react-financial-charts.git"
+  },
+  "bugs": {
+    "url": "https://github.com/reactivemarkets/react-financial-charts/issues"
+  },
+  "scripts": {
+    "build": "npm run clean && npm run compile",
+    "clean": "rimraf lib",
+    "compile": "tsc -p tsconfig.json",
+    "test": "jest",
+    "watch": "tsc -p tsconfig.json --watch --preserveWatchOutput"
+  },
+  "dependencies": {
+    "@react-financial-charts/core": "file:../core",
+    "d3-array": "^2.4.0",
+    "d3-force": "^2.0.1",
+    "d3-selection": "1.4.1"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  }
+}