feat: exporting props from components for docs

Docs can properly use controls when the props are exported.
markmcdowell · Aug 16, 2020 · fbdaea5 · fbdaea5
1 parent 1ea1094
commit fbdaea5
Show file tree

Hide file tree

Showing 75 changed files with 4,520 additions and 2,714 deletions.
diff --git a/.eslintrc.yaml b/.eslintrc.yaml
@@ -20,6 +20,9 @@ rules:
     "@typescript-eslint/no-non-null-assertion": off
     "@typescript-eslint/ban-ts-comment": off
     "@typescript-eslint/ban-types": off
+    "@typescript-eslint/no-unused-vars":
+    - error
+    - ignoreRestSiblings: true
     "react/display-name": off
     "react/prop-types": off
     "arrow-spacing": error

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,13 +42,11 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.11.1",
-    "@storybook/addon-actions": "^5.3.19",
-    "@storybook/addon-docs": "^5.3.19",
-    "@storybook/addon-essentials": "^5.3.19",
-    "@storybook/addon-knobs": "^5.3.19",
-    "@storybook/addon-notes": "^5.3.19",
-    "@storybook/react": "^5.3.19",
-    "@storybook/theming": "^5.3.19",
+    "@storybook/addon-actions": "^6.0.10",
+    "@storybook/addon-docs": "^6.0.10",
+    "@storybook/addon-essentials": "^6.0.10",
+    "@storybook/react": "^6.0.10",
+    "@storybook/theming": "^6.0.10",
     "@types/d3-array": "^2.0.0",
     "@types/d3-dsv": "^1.0.36",
     "@types/d3-force": "^1.2.1",

diff --git a/packages/annotations/src/Annotate.tsx b/packages/annotations/src/Annotate.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { GenericChartComponent } from "@react-financial-charts/core";
 
-interface AnnotateProps {
+export interface AnnotateProps {
     readonly className?: string;
     readonly with: React.ElementType;
     readonly when: (value: any, index: number, array: any[]) => boolean;

diff --git a/packages/annotations/src/BarAnnotation.tsx b/packages/annotations/src/BarAnnotation.tsx
@@ -2,7 +2,7 @@ import { functor } from "@react-financial-charts/core";
 import { ScaleContinuousNumeric } from "d3-scale";
 import * as React from "react";
 
-interface BarAnnotationProps {
+export interface BarAnnotationProps {
     readonly className?: string;
     readonly path?: any; // func
     readonly onClick?: (

diff --git a/packages/annotations/src/Label.tsx b/packages/annotations/src/Label.tsx
@@ -3,7 +3,7 @@ import { ScaleContinuousNumeric } from "d3-scale";
 import * as PropTypes from "prop-types";
 import * as React from "react";
 
-interface LabelProps {
+export interface LabelProps {
     readonly className?: string;
     readonly datum?: any;
     readonly fillStyle?:

diff --git a/packages/annotations/src/LabelAnnotation.tsx b/packages/annotations/src/LabelAnnotation.tsx
@@ -2,7 +2,7 @@ import { functor } from "@react-financial-charts/core";
 import { ScaleContinuousNumeric } from "d3-scale";
 import * as React from "react";
 
-interface LabelAnnotationProps {
+export interface LabelAnnotationProps {
     readonly className?: string;
     readonly datum?: any;
     readonly fill?: string | ((datum: any) => string);

diff --git a/packages/annotations/src/SvgPathAnnotation.tsx b/packages/annotations/src/SvgPathAnnotation.tsx
@@ -2,7 +2,7 @@ import { functor } from "@react-financial-charts/core";
 import { ScaleContinuousNumeric } from "d3-scale";
 import * as React from "react";
 
-interface SvgPathAnnotationProps {
+export interface SvgPathAnnotationProps {
     readonly className?: string;
     readonly datum?: any;
     readonly fill?: string | ((datum: any) => string);

diff --git a/packages/axes/src/Axis.tsx b/packages/axes/src/Axis.tsx
@@ -25,7 +25,6 @@ interface AxisProps {
     readonly className?: string;
     readonly domainClassName?: string;
     readonly edgeClip: boolean;
-    readonly fill?: string;
     readonly fontFamily?: string;
     readonly fontSize?: number;
     readonly fontWeight?: number;

diff --git a/packages/axes/src/XAxis.tsx b/packages/axes/src/XAxis.tsx
@@ -3,11 +3,10 @@ import * as PropTypes from "prop-types";
 import * as React from "react";
 import { Axis } from "./Axis";
 
-interface XAxisProps {
+export interface XAxisProps {
     readonly axisAt?: number | "top" | "bottom" | "middle";
     readonly className?: string;
     readonly domainClassName?: string;
-    readonly fill?: string;
     readonly fontFamily?: string;
     readonly fontSize?: number;
     readonly fontWeight?: number;
@@ -46,7 +45,6 @@ export class XAxis extends React.Component<XAxisProps> {
         axisAt: "bottom",
         className: "react-financial-charts-x-axis",
         domainClassName: "react-financial-charts-axis-domain",
-        fill: "none",
         fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
         fontSize: 12,
         fontWeight: 400,

diff --git a/packages/axes/src/YAxis.tsx b/packages/axes/src/YAxis.tsx
@@ -3,11 +3,10 @@ import * as PropTypes from "prop-types";
 import * as React from "react";
 import { Axis } from "./Axis";
 
-interface YAxisProps {
+export interface YAxisProps {
     readonly axisAt?: number | "left" | "right" | "middle";
     readonly className?: string;
     readonly domainClassName?: string;
-    readonly fill?: string;
     readonly fontFamily?: string;
     readonly fontSize?: number;
     readonly fontWeight?: number;
@@ -46,7 +45,6 @@ export class YAxis extends React.Component<YAxisProps> {
         axisAt: "right",
         className: "react-financial-charts-y-axis",
         domainClassName: "react-financial-charts-axis-domain",
-        fill: "none",
         fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
         fontSize: 12,
         fontWeight: 400,

diff --git a/packages/coordinates/src/CrossHairCursor.tsx b/packages/coordinates/src/CrossHairCursor.tsx
@@ -14,7 +14,7 @@ const defaultCustomX = (props: CrossHairCursorProps, moreProps) => {
     return x;
 };
 
-interface CrossHairCursorProps {
+export interface CrossHairCursorProps {
     readonly className?: string;
     readonly customX?: (props: CrossHairCursorProps, moreProps: any) => number;
     readonly snapX?: boolean;

diff --git a/packages/coordinates/src/CurrentCoordinate.tsx b/packages/coordinates/src/CurrentCoordinate.tsx
@@ -1,7 +1,7 @@
 import { getMouseCanvas, GenericChartComponent } from "@react-financial-charts/core";
 import * as React from "react";
 
-interface CurrentCoordinateProps {
+export interface CurrentCoordinateProps {
     readonly className?: string;
     readonly fill?: string | ((dataItem: any) => string);
     readonly r: number;

diff --git a/packages/coordinates/src/Cursor.tsx b/packages/coordinates/src/Cursor.tsx
@@ -11,7 +11,7 @@ import {
 import * as PropTypes from "prop-types";
 import * as React from "react";
 
-interface CursorProps {
+export interface CursorProps {
     readonly className?: string;
     readonly disableYCursor?: boolean;
     readonly opacity?: number;

diff --git a/packages/coordinates/src/EdgeCoordinate.tsx b/packages/coordinates/src/EdgeCoordinate.tsx
@@ -70,7 +70,7 @@ const helper = (props) => {
     };
 };
 
-interface EdgeCoordinateProps {
+export interface EdgeCoordinateProps {
     readonly className?: string;
     readonly type: "vertical" | "horizontal";
     readonly coordinate: any;

diff --git a/packages/coordinates/src/EdgeIndicator.tsx b/packages/coordinates/src/EdgeIndicator.tsx
@@ -12,7 +12,7 @@ import {
 } from "@react-financial-charts/core";
 import { drawOnCanvas } from "./EdgeCoordinateV3";
 
-interface EdgeIndicatorProps {
+export interface EdgeIndicatorProps {
     readonly arrowWidth?: number;
     readonly className?: string;
     readonly displayFormat?: any; // func

diff --git a/packages/coordinates/src/MouseCoordinateX.tsx b/packages/coordinates/src/MouseCoordinateX.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { isNotDefined, getMouseCanvas, GenericChartComponent } from "@react-financial-charts/core";
 import { drawOnCanvas } from "./EdgeCoordinateV3";
 
-interface MouseCoordinateXProps {
+export interface MouseCoordinateXProps {
     readonly at?: "bottom" | "top";
     readonly customX: (props: MouseCoordinateXProps, moreProps: any) => { x: number; coordinate: string };
     readonly displayFormat: (item: any) => string;

diff --git a/packages/coordinates/src/MouseCoordinateY.tsx b/packages/coordinates/src/MouseCoordinateY.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { getMouseCanvas, GenericChartComponent, isNotDefined } from "@react-financial-charts/core";
 import { drawOnCanvas } from "./EdgeCoordinateV3";
 
-interface MouseCoordinateYProps {
+export interface MouseCoordinateYProps {
     readonly arrowWidth?: number;
     readonly at?: "left" | "right";
     readonly displayFormat: any; // func

diff --git a/packages/core/src/CanvasContainer.tsx b/packages/core/src/CanvasContainer.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-interface CanvasContainerProps {
+export interface CanvasContainerProps {
     readonly height: number;
     readonly ratio: number;
     readonly style?: React.CSSProperties;

diff --git a/packages/core/src/Chart.tsx b/packages/core/src/Chart.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 
 import { PureComponent } from "./utils";
 
-interface ChartProps {
+export interface ChartProps {
     readonly flipYScale?: boolean;
     readonly height?: number;
     readonly id: number | string;

diff --git a/packages/core/src/ChartCanvas.tsx b/packages/core/src/ChartCanvas.tsx
@@ -264,7 +264,7 @@ function isInteractionEnabled(xScale, xAccessor, data) {
     return interaction;
 }
 
-interface ChartCanvasProps {
+export interface ChartCanvasProps {
     readonly clamp?:
         | boolean
         | ("left" | "right" | "both")

diff --git a/packages/series/src/AlternatingFillAreaSeries.tsx b/packages/series/src/AlternatingFillAreaSeries.tsx
@@ -1,33 +1,54 @@
 import { strokeDashTypes } from "@react-financial-charts/core";
+import { ScaleContinuousNumeric } from "d3-scale";
+import { CurveFactory } from "d3-shape";
 import * as React from "react";
-
 import { AreaSeries } from "./AreaSeries";
 import { SVGComponent } from "./SVGComponent";
-import { CurveFactory } from "d3-shape";
 
-interface AlternatingFillAreaSeriesProps {
+export interface AlternatingFillAreaSeriesProps {
     readonly baseAt: number;
     readonly className?: string;
+    /**
+     * Color, gradient, or pattern to use for fill.
+     */
     readonly fillStyle?: {
         top: string | CanvasGradient | CanvasPattern;
         bottom: string | CanvasGradient | CanvasPattern;
     };
+    /**
+     * A factory for a curve generator for the area and line.
+     */
     readonly interpolation?: CurveFactory;
+    /**
+     * Color, gradient, or pattern to use for the stroke.
+     */
     readonly strokeStyle?: {
         top: string | CanvasGradient | CanvasPattern;
         bottom: string | CanvasGradient | CanvasPattern;
     };
-    readonly strokeWidth?: {
-        top: number;
-        bottom: number;
-    };
+    /**
+     * Stroke dash.
+     */
     readonly strokeDasharray?: {
         top: strokeDashTypes;
         bottom: strokeDashTypes;
     };
+    /**
+     * Stroke width.
+     */
+    readonly strokeWidth?: {
+        top: number;
+        bottom: number;
+    };
+    /**
+     * Selector for data to plot.
+     */
     readonly yAccessor: (data: any) => number;
 }
 
+/**
+ * `AlternatingFillAreaSeries` component is similar to a `AreaSeries` but with different colors above and below the base.
+ */
 export class AlternatingFillAreaSeries extends React.Component<AlternatingFillAreaSeriesProps> {
     public static defaultProps = {
         className: "react-financial-charts-alternating-area",
@@ -63,14 +84,10 @@ export class AlternatingFillAreaSeries extends React.Component<AlternatingFillAr
             fillStyle = AlternatingFillAreaSeries.defaultProps.fillStyle,
         } = this.props;
 
-        const style1 = { clipPath: `url(#${this.clipPathId1})` };
-        const style2 = { clipPath: `url(#${this.clipPathId2})` };
-
         return (
             <g className={className}>
                 <SVGComponent>{this.renderClip}</SVGComponent>
                 <AreaSeries
-                    style={style1}
                     canvasClip={this.topClip}
                     yAccessor={yAccessor}
                     interpolation={interpolation}
@@ -81,7 +98,6 @@ export class AlternatingFillAreaSeries extends React.Component<AlternatingFillAr
                     strokeWidth={strokeWidth.top}
                 />
                 <AreaSeries
-                    style={style2}
                     canvasClip={this.bottomClip}
                     yAccessor={yAccessor}
                     interpolation={interpolation}
@@ -95,7 +111,7 @@ export class AlternatingFillAreaSeries extends React.Component<AlternatingFillAr
         );
     }
 
-    private readonly baseAt = (yScale) => {
+    private readonly baseAt = (yScale: ScaleContinuousNumeric<number, number>) => {
         return yScale(this.props.baseAt);
     };
 

diff --git a/packages/series/src/AreaOnlySeries.tsx b/packages/series/src/AreaOnlySeries.tsx
@@ -3,24 +3,32 @@ import { area as d3Area, CurveFactory } from "d3-shape";
 import * as React from "react";
 import { ScaleContinuousNumeric } from "d3-scale";
 
-interface AreaOnlySeriesProps {
+export interface AreaOnlySeriesProps {
     readonly base?:
         | number
         | ((yScale: ScaleContinuousNumeric<number, number>, d: [number, number], moreProps: any) => number);
     readonly canvasClip?: (context: CanvasRenderingContext2D, moreProps: any) => void;
-    readonly className?: string;
-    readonly defined?: any; // func
+    /**
+     * The default accessor for defined returns not NaN, thus assumes that the input data is always a number.
+     */
+    readonly defined?: (data: number) => boolean;
+    /**
+     * Color, gradient, or pattern to use for fill.
+     */
     readonly fillStyle?: string | CanvasGradient | CanvasPattern;
+    /**
+     * A factory for a curve generator for the area.
+     */
     readonly interpolation?: CurveFactory;
-    readonly strokeStyle?: string | CanvasGradient | CanvasPattern;
-    readonly style?: React.CSSProperties;
+    /**
+     * Selector for data to plot.
+     */
     readonly yAccessor: (data: any) => number;
 }
 
 export class AreaOnlySeries extends React.Component<AreaOnlySeriesProps> {
     public static defaultProps = {
-        className: "line",
-        defined: (d) => !isNaN(d),
+        defined: (d: number) => !isNaN(d),
         base: (yScale) => first(yScale.range()),
     };
 
@@ -29,7 +37,14 @@ export class AreaOnlySeries extends React.Component<AreaOnlySeriesProps> {
     }
 
     private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps) => {
-        const { fillStyle, strokeStyle, interpolation, canvasClip, yAccessor, defined, base } = this.props;
+        const {
+            fillStyle,
+            interpolation,
+            canvasClip,
+            yAccessor,
+            defined = AreaOnlySeries.defaultProps.defined,
+            base,
+        } = this.props;
 
         const {
             xScale,
@@ -47,10 +62,6 @@ export class AreaOnlySeries extends React.Component<AreaOnlySeriesProps> {
             ctx.fillStyle = fillStyle;
         }
 
-        if (strokeStyle !== undefined) {
-            ctx.strokeStyle = strokeStyle;
-        }
-
         ctx.beginPath();
         const newBase = functor(base);
         const areaSeries = d3Area()