Add type checking to TS demo application (#2814)

FormidableLabs · Feb 16, 2024 · f0dab31 · f0dab31
1 parent 4ddd5ae
commit f0dab31
Show file tree

Hide file tree

Showing 15 changed files with 76 additions and 111 deletions.
diff --git a/config/webpack/demo/webpack.config.dev.js b/config/webpack/demo/webpack.config.dev.js
@@ -3,17 +3,19 @@
 const path = require("path");
 const glob = require("glob");
 const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
+const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
 
 const ROOT = path.resolve(__dirname, "../../.."); // eslint-disable-line no-undef
-const PKGS = path.join(ROOT, "packages")
-const VICTORY_GLOB = path.join(PKGS, "victory*/package.json").replace(/\\/g, "/");
+const PKGS = path.join(ROOT, "packages");
+const VICTORY_GLOB = path
+  .join(PKGS, "victory*/package.json")
+  .replace(/\\/g, "/");
 // Read all the victory packages and alias.
-const VICTORY_ALIASES = glob.sync(VICTORY_GLOB)
-  .reduce((memo, pkgPath) => {
-    const key = path.dirname(path.relative(PKGS, pkgPath));
-    memo[key] = path.resolve(path.dirname(pkgPath));
-    return memo;
-  }, {});
+const VICTORY_ALIASES = glob.sync(VICTORY_GLOB).reduce((memo, pkgPath) => {
+  const key = path.dirname(path.relative(PKGS, pkgPath));
+  memo[key] = path.resolve(path.dirname(pkgPath));
+  return memo;
+}, {});
 const DEMO = path.resolve("demo");
 const WDS_PORT = 3000;
 
@@ -55,12 +57,17 @@ module.exports = {
     ],
   },
   plugins: [
+    new ForkTsCheckerWebpackPlugin({
+      typescript: {
+        configFile: path.resolve(ROOT, "demo", "ts", "tsconfig.json"),
+      },
+    }),
     new LodashModuleReplacementPlugin({
       shorthands: true,
       currying: true,
       flattening: true,
       paths: true,
       placeholders: true,
     }),
-  ]
+  ],
 };
diff --git a/demo/.eslintrc → demo/ts/.eslintrc b/demo/.eslintrc → demo/ts/.eslintrc
@@ -1,5 +1,5 @@
 {
-  "extends": ["../.eslintrc.js"],
+  "extends": ["../../.eslintrc.js"],
   "rules": {
     "@typescript-eslint/ban-types": "off",
     "@typescript-eslint/explicit-function-return-type": "off",

diff --git a/demo/ts/components/accessibility-demo.tsx b/demo/ts/components/accessibility-demo.tsx
@@ -32,7 +32,7 @@ import {
   accessibilityVoronoiData,
   accessibilityErrorBarData,
   accessibilityCandlestickData,
-} from "../../demo-data";
+} from "../demo-data";
 
 const pageHeadingStyle: React.CSSProperties = {
   display: "flex",
@@ -65,7 +65,7 @@ const chartContainerStyle: React.CSSProperties = {
 };
 
 export const assignIndexValue = (
-  index: number | string,
+  index: number | string | undefined,
   value: number,
 ): number => {
   const determineValidNumber = Number(index);
@@ -180,7 +180,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
                   dataComponent={
                     <Area
                       ariaLabel={({ data }) =>
-                        `area chart stack ${data[0]._stack}`
+                        `area chart stack ${data?.[0]._stack}`
                       }
                       tabIndex={20}
                     />
@@ -192,7 +192,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
                   dataComponent={
                     <Area
                       ariaLabel={({ data }) =>
-                        `area chart stack ${data[0]._stack}`
+                        `area chart stack ${data?.[0]._stack}`
                       }
                       tabIndex={20.1}
                     />
@@ -204,7 +204,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
                   dataComponent={
                     <Area
                       ariaLabel={({ data }) =>
-                        `area chart stack ${data[0]._stack}`
+                        `area chart stack ${data?.[0]._stack}`
                       }
                       tabIndex={20.2}
                     />
@@ -216,7 +216,7 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
                   dataComponent={
                     <Area
                       ariaLabel={({ data }) =>
-                        `area chart stack ${data[0]._stack}`
+                        `area chart stack ${data?.[0]._stack}`
                       }
                       tabIndex={20.3}
                     />
@@ -242,12 +242,14 @@ export default class VictoryAccessibilityDemo extends React.Component<any> {
                 dataComponent={
                   <Curve
                     ariaLabel={({ data }) =>
-                      data.map(
-                        (dataPoint: any, i: number) =>
-                          `data point ${i + 1} x value is ${
-                            dataPoint.x
-                          } and y value is ${dataPoint.y}`,
-                      )
+                      data
+                        ?.map(
+                          (dataPoint: any, i: number) =>
+                            `data point ${i + 1} x value is ${
+                              dataPoint.x
+                            } and y value is ${dataPoint.y}`,
+                        )
+                        .join("") || ""
                     }
                   />
                 }

diff --git a/demo/ts/components/animation-demo.tsx b/demo/ts/components/animation-demo.tsx
@@ -7,9 +7,10 @@ import { VictoryStack } from "victory-stack";
 import { VictoryArea } from "victory-area";
 import { VictoryTheme } from "victory-core";
 
-export default class App extends React.Component {
-  constructor() {
-    super();
+export default class App extends React.Component<any, any> {
+  constructor(props) {
+    super(props);
+
     this.state = {
       data: this.getData(),
       arrayData: this.getArrayData(),
@@ -99,7 +100,7 @@ export default class App extends React.Component {
       parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" },
     };
 
-    const containerStyle = {
+    const containerStyle: React.CSSProperties = {
       display: "flex",
       flexDirection: "row",
       flexWrap: "wrap",

diff --git a/demo/ts/components/canvas-demo.tsx b/demo/ts/components/canvas-demo.tsx
@@ -1,17 +1,18 @@
 /* eslint-disable no-magic-numbers */
 import React from "react";
+
+import { range, random } from "lodash";
+import { VictoryChart } from "victory-chart";
+import { VictoryLine } from "victory-line";
+import { VictoryAxis } from "victory-axis";
+import { VictoryScatter } from "victory-scatter";
+import { VictoryBar } from "victory-bar";
 import {
-  CanvasGroup,
-  CanvasCurve,
-  VictoryAxis,
-  VictoryBar,
   CanvasBar,
-  VictoryChart,
-  VictoryLine,
-  VictoryScatter,
+  CanvasCurve,
+  CanvasGroup,
   CanvasPoint,
-} from "victory";
-import { range, random } from "lodash";
+} from "victory-canvas";
 
 const populationData = [
   {
@@ -213,7 +214,7 @@ const populationData = [
   },
 ];
 
-const containerStyle = {
+const containerStyle: React.CSSProperties = {
   display: "flex",
   flexDirection: "row",
   flexWrap: "wrap",
@@ -239,7 +240,7 @@ const formatPopulation = (value) => {
 };
 
 const getRandomData = (length = 100) => {
-  const data = [];
+  const data: any = [];
   for (let i = 0; i < length; i++) {
     data.push({ x: Math.random(), y: Math.random() });
   }

diff --git a/demo/ts/components/create-container-demo.tsx b/demo/ts/components/create-container-demo.tsx
@@ -23,7 +23,7 @@ const Charts = ({ behaviors }) => {
   const chartStyle = {
     parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" },
   };
-  const CustomContainer = createContainer(behaviors[0], behaviors[1]);
+  const CustomContainer: any = createContainer(behaviors[0], behaviors[1]);
   const behaviorsList = behaviors.map((behavior) => `"${behavior}"`).join(", ");
 
   return (
@@ -211,7 +211,7 @@ const Charts = ({ behaviors }) => {
                 strokeWidth: 2,
               },
             }}
-            size={({ active }) => (active ? 5 : 3)}
+            barWidth={({ active }) => (active ? 5 : 3)}
             data={[
               { x: 1, y: -5 },
               { x: 2, y: 4 },
@@ -230,7 +230,7 @@ const Charts = ({ behaviors }) => {
                 strokeWidth: 2,
               },
             }}
-            size={({ active }) => (active ? 5 : 3)}
+            barWidth={({ active }) => (active ? 5 : 3)}
             data={[
               { x: 1, y: -3 },
               { x: 2, y: 5 },

diff --git a/demo/ts/components/draggable-demo.tsx b/demo/ts/components/draggable-demo.tsx
@@ -8,7 +8,6 @@ import { VictoryBrushLine } from "victory-brush-line";
 import { VictoryScatter } from "victory-scatter";
 import {
   DomainTuple,
-  DomainPropObjectType,
   VictoryClipContainer,
   Point,
   Selection,
@@ -26,7 +25,7 @@ type PointDataType = {
   date: Date;
 };
 
-type ZoomDomainType = DomainPropObjectType;
+type ZoomDomainType = { x?: DomainTuple; y?: DomainTuple };
 
 interface DraggableDemoInterface {
   bars: BarDataType[];

diff --git a/demo/ts/components/external-events-demo.tsx b/demo/ts/components/external-events-demo.tsx
@@ -10,9 +10,10 @@ import { VictoryZoomContainer } from "victory-zoom-container";
 import { VictoryVoronoiContainer } from "victory-voronoi-container";
 import { range } from "lodash";
 
-class App extends React.Component {
-  constructor() {
-    super();
+class App extends React.Component<any, any> {
+  constructor(props) {
+    super(props);
+
     this.state = {
       data: this.getData(),
     };
@@ -77,7 +78,7 @@ class App extends React.Component {
   }
 
   render() {
-    const containerStyle = {
+    const containerStyle: React.CSSProperties = {
       display: "flex",
       flexDirection: "row",
       flexWrap: "wrap",
@@ -240,7 +241,7 @@ class App extends React.Component {
                   strokeWidth: 2,
                 },
               }}
-              size={({ active }) => (active ? 5 : 3)}
+              barWidth={({ active }) => (active ? 5 : 3)}
               data={[
                 { x: 1, y: -5 },
                 { x: 2, y: 4 },
@@ -259,7 +260,7 @@ class App extends React.Component {
                   strokeWidth: 2,
                 },
               }}
-              size={({ active }) => (active ? 5 : 3)}
+              barWidth={({ active }) => (active ? 5 : 3)}
               data={[
                 { x: 1, y: -3 },
                 { x: 2, y: 5 },

diff --git a/demo/ts/components/victory-brush-line-demo.tsx b/demo/ts/components/victory-brush-line-demo.tsx
@@ -117,7 +117,7 @@ class App extends React.Component<any, BrushLineDemoState> {
     };
 
     return this.state.datasets
-      .map((dataset) => (isActive(dataset) ? dataset.name : null))
+      .map((dataset) => (isActive(dataset) ? dataset.name : null) || "")
       .filter(Boolean);
   }
 

diff --git a/demo/ts/components/victory-voronoi-container-demo.tsx b/demo/ts/components/victory-voronoi-container-demo.tsx
@@ -132,44 +132,6 @@ export default class VictoryVoronoiContainerDemo extends React.Component<
             />
           </VictoryChart>
 
-          <VictoryChart
-            style={chartStyle}
-            domain={{ y: [0, 6] }}
-            containerComponent={
-              <VictoryVoronoiContainer
-                voronoiDimension="x"
-                labels={({ datum }) => `y: ${datum.y}`}
-                labelComponent={
-                  <VictoryTooltip
-                    text={({ activePoints }) => {
-                      return activePoints
-                        .map(({ y }) => `value: ${y}`)
-                        .join(" - ");
-                    }}
-                  />
-                }
-              />
-            }
-          >
-            <VictoryScatter
-              style={{ data: { fill: "red" }, labels: { fill: "red" } }}
-              data={[
-                { x: 0, y: 2 },
-                { x: 2, y: 3 },
-                { x: 4, y: 4 },
-                { x: 6, y: 5 },
-              ]}
-            />
-            <VictoryScatter
-              data={[
-                { x: 2, y: 2 },
-                { x: 4, y: 3 },
-                { x: 6, y: 4 },
-                { x: 8, y: 5 },
-              ]}
-            />
-          </VictoryChart>
-
           <VictoryChart
             height={450}
             domain={{ y: [0, 1] }}

diff --git a/demo/demo-data.ts → demo/ts/demo-data.ts b/demo/demo-data.ts → demo/ts/demo-data.ts
diff --git a/demo/ts/tsconfig.json b/demo/ts/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "paths": {
+      "victory*": ["../../packages/victory*"],
+    }
+  }
+}
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
diff --git a/package.json b/package.json
@@ -84,6 +84,7 @@
     "eslint-plugin-react": "^7.0.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-storybook": "^0.6.15",
+    "fork-ts-checker-webpack-plugin": "^8.0.0",
     "fs-extra": "^10.0.0",
     "glob": "8.0.3",
     "immutable": "^3.8.2",