Merge pull request #2278 from FormidableLabs/ts-migration-core

ts-migration: migrated core components to TS

.eslintrc.js

@@ -59,6 +59,8 @@ module.exports = {
             typedefs: false
           }
         ],
+        "no-invalid-this": "off",
+        "@typescript-eslint/no-invalid-this": ["error"],
 
         "@typescript-eslint/no-unsafe-argument": "warn",
         "@typescript-eslint/no-unsafe-assignment": "warn",

package-scripts.js

@@ -82,8 +82,8 @@ module.exports = {
       ci: npsUtils.series.nps(
         "format.ci",
         "lint",
-        "typecheck",
         "build-package-libs",
+        "typecheck",
         "build-package-dists",
         "test-node",
         "jest",
@@ -122,8 +122,8 @@ module.exports = {
     "build-package-libs-vendor":
       "lerna exec --scope victory-vendor -- yarn build",
     "build-package-libs": npsUtils.series.nps(
-      "build-package-libs-core",
-      "build-package-libs-vendor"
+      "build-package-libs-vendor",
+      "build-package-libs-core"
     ),
     "build-dist-dev":
       "webpack --bail --config ../../config/webpack/webpack.config.dev.js",

package.json

@@ -70,7 +70,7 @@
     "@testing-library/react-native": "^9.1.0",
     "@types/jest": "^27.5.1",
     "@types/lodash": "^4.14.149",
-    "@types/react": "^16.9.19",
+    "@types/react": "^16.14.26",
     "@types/react-dom": "^16.9.5",
     "@typescript-eslint/eslint-plugin": "^5.26.0",
     "@typescript-eslint/parser": "^5.26.0",
@@ -107,7 +107,7 @@
     "nps-utils": "^1.5.0",
     "prettier": "^2.6.2",
     "prop-types": "^15.8.1",
-    "react": "^16.13.1",
+    "react": "^16.14.0",
     "react-dom": "^16.13.1",
     "react-hot-loader": "v2.0.0-alpha-4",
     "react-test-renderer": "^16.13.1",
@@ -122,5 +122,8 @@
     "webpack-dev-server": "^4.9.0",
     "webpack-stats-plugin": "^1.0.3"
   },
+  "resolutions": {
+    "@types/react": "^16.14.26"
+  },
   "sideEffects": false
 }

packages/victory-core/src/index.ts

@@ -6,7 +6,7 @@ export { default as VictoryContainer } from "./victory-container/victory-contain
 export { default as VictoryLabel } from "./victory-label/victory-label";
 export { default as VictoryTransition } from "./victory-transition/victory-transition";
 export { default as VictoryClipContainer } from "./victory-clip-container/victory-clip-container";
-export { default as VictoryTheme } from "./victory-theme/victory-theme";
+export * from "./victory-theme/victory-theme";
 export { default as VictoryPortal } from "./victory-portal/victory-portal";
 export { default as Portal } from "./victory-portal/portal";
 export { default as Arc } from "./victory-primitives/arc";

packages/victory-core/src/victory-animation/util.js → packages/victory-core/src/victory-animation/util.ts

@@ -82,8 +82,8 @@ export const interpolateFunction = function (a, b) {
     if (t >= 1) {
       return b;
     }
-    return function () {
-      /* eslint-disable no-invalid-this */
+    return function (this: unknown) {
+      /* eslint-disable no-invalid-this, prefer-rest-params */
       const aval = typeof a === "function" ? a.apply(this, arguments) : a;
       const bval = typeof b === "function" ? b.apply(this, arguments) : b;
       return interpolate(aval, bval)(t);

packages/victory-core/src/victory-animation/victory-animation.js → packages/victory-core/src/victory-animation/victory-animation.tsx

@@ -5,8 +5,81 @@ import * as d3Ease from "victory-vendor/d3-ease";
 import { victoryInterpolator } from "./util";
 import TimerContext from "../victory-util/timer-context";
 import isEqual from "react-fast-compare";
+import type Timer from "../victory-util/timer";
 
-export default class VictoryAnimation extends React.Component {
+/**
+ * Single animation object to interpolate
+ */
+export type AnimationStyle = { [key: string]: string | number };
+/**
+ * Animation styles to interpolate
+ */
+
+export type AnimationData = AnimationStyle | AnimationStyle[];
+export type AnimationEasing =
+  | "back"
+  | "backIn"
+  | "backOut"
+  | "backInOut"
+  | "bounce"
+  | "bounceIn"
+  | "bounceOut"
+  | "bounceInOut"
+  | "circle"
+  | "circleIn"
+  | "circleOut"
+  | "circleInOut"
+  | "linear"
+  | "linearIn"
+  | "linearOut"
+  | "linearInOut"
+  | "cubic"
+  | "cubicIn"
+  | "cubicOut"
+  | "cubicInOut"
+  | "elastic"
+  | "elasticIn"
+  | "elasticOut"
+  | "elasticInOut"
+  | "exp"
+  | "expIn"
+  | "expOut"
+  | "expInOut"
+  | "poly"
+  | "polyIn"
+  | "polyOut"
+  | "polyInOut"
+  | "quad"
+  | "quadIn"
+  | "quadOut"
+  | "quadInOut"
+  | "sin"
+  | "sinIn"
+  | "sinOut"
+  | "sinInOut";
+
+export interface VictoryAnimationProps {
+  children: (style: AnimationStyle, info: AnimationInfo) => React.ReactNode;
+  duration?: number;
+  easing?: AnimationEasing;
+  delay?: number;
+  onEnd?: () => void;
+  data: AnimationData;
+}
+export interface VictoryAnimationState {
+  data: AnimationStyle;
+  animationInfo: AnimationInfo;
+}
+export interface AnimationInfo {
+  progress: number;
+  animating: boolean;
+  terminating?: boolean;
+}
+
+export default class VictoryAnimation extends React.Component<
+  VictoryAnimationProps,
+  VictoryAnimationState
+> {
   static displayName = "VictoryAnimation";
 
   static propTypes = {
@@ -67,6 +140,11 @@ export default class VictoryAnimation extends React.Component {
   };
 
   static contextType = TimerContext;
+  private interpolator: null | ((value: number) => AnimationStyle);
+  private queue: AnimationStyle[];
+  private ease: any;
+  private timer: Timer;
+  private loopID?: number;
 
   constructor(props, context) {
     super(props, context);
@@ -84,11 +162,6 @@ export default class VictoryAnimation extends React.Component {
     this.queue = Array.isArray(this.props.data) ? this.props.data.slice(1) : [];
     /* build easing function */
     this.ease = d3Ease[this.toNewName(this.props.easing)];
-    /*
-      There is no autobinding of this in ES6 classes
-      so we bind functionToBeRunEachFrame to current instance of victory animation class
-    */
-    this.functionToBeRunEachFrame = this.functionToBeRunEachFrame.bind(this);
     this.timer = this.context.animationTimer;
   }
 
@@ -163,21 +236,21 @@ export default class VictoryAnimation extends React.Component {
         setTimeout(() => {
           this.loopID = this.timer.subscribe(
             this.functionToBeRunEachFrame,
-            this.props.duration
+            this.props.duration!
           );
         }, this.props.delay);
       } else {
         this.loopID = this.timer.subscribe(
           this.functionToBeRunEachFrame,
-          this.props.duration
+          this.props.duration!
         );
       }
     } else if (this.props.onEnd) {
       this.props.onEnd();
     }
   }
   /* every frame we... */
-  functionToBeRunEachFrame(elapsed, duration) {
+  functionToBeRunEachFrame = (elapsed, duration) => {
     /*
       step can generate imprecise values, sometimes greater than 1
       if this happens set the state to 1 and return, cancelling the timer
@@ -186,7 +259,7 @@ export default class VictoryAnimation extends React.Component {
     const step = duration ? elapsed / duration : 1;
     if (step >= 1) {
       this.setState({
-        data: this.interpolator(1),
+        data: this.interpolator!(1),
         animationInfo: {
           progress: 1,
           animating: false,
@@ -206,13 +279,13 @@ export default class VictoryAnimation extends React.Component {
       interpolator, which is cached for performance whenever props are received
     */
     this.setState({
-      data: this.interpolator(this.ease(step)),
+      data: this.interpolator!(this.ease(step)),
       animationInfo: {
         progress: step,
         animating: step < 1
       }
     });
-  }
+  };
 
   render() {
     return this.props.children(this.state.data, this.state.animationInfo);

packages/victory-core/src/victory-label/victory-label.tsx

@@ -591,14 +591,15 @@ const VictoryLabel: {
     const currentStyle = getSingleValue(style!, i);
     const capHeightPx = TextSize.convertLengthToPixels(
       `${capHeight}em`,
-      currentStyle.fontSize
+      currentStyle.fontSize as number
     );
     const currentLineHeight = getSingleValue(lineHeight, i);
     return {
       style: currentStyle,
       fontSize: currentStyle.fontSize || defaultStyles.fontSize,
       capHeight: capHeightPx,
       text: line,
+      // @ts-expect-error TODO: This looks like a bug:
       textSize: TextSize.approximateTextSize(line, currentStyle),
       lineHeight: currentLineHeight,
       backgroundPadding: getSingleValue(backgroundPadding, i)

packages/victory-core/src/victory-theme/grayscale.js → packages/victory-core/src/victory-theme/grayscale.tsx

@@ -1,4 +1,5 @@
 import { assign } from "lodash";
+import { VictoryThemeDefinition } from "./victory-theme-definition";
 
 // *
 // * Colors
@@ -49,7 +50,7 @@ const centeredLabelStyles = assign({ textAnchor: "middle" }, baseLabelStyles);
 const strokeLinecap = "round";
 const strokeLinejoin = "round";
 
-export default {
+export const grayscale: VictoryThemeDefinition = {
   area: assign(
     {
       style: {

packages/victory-core/src/victory-theme/material.js → packages/victory-core/src/victory-theme/material.tsx

@@ -1,4 +1,5 @@
 import { assign } from "lodash";
+import { VictoryThemeDefinition } from "./victory-theme-definition";
 
 // *
 // * Colors
@@ -57,7 +58,7 @@ const strokeDasharray = "10, 5";
 const strokeLinecap = "round";
 const strokeLinejoin = "round";
 
-export default {
+export const material: VictoryThemeDefinition = {
   area: assign(
     {
       style: {

packages/victory-core/src/victory-theme/victory-theme.d.ts → packages/victory-core/src/victory-theme/victory-theme-definition.ts

@@ -1,10 +1,6 @@
 import * as React from "react";
-import {
-  CallbackArgs,
-  StringOrNumberOrCallback,
-  VictoryCommonThemeProps,
-  VictoryDatableProps
-} from "../index";
+import { VictoryCommonThemeProps, VictoryDatableProps } from "../index";
+import { CallbackArgs, StringOrNumberOrCallback } from "../types";
 
 export type BlockProps = {
   top?: number;
@@ -263,11 +259,3 @@ export interface VictoryThemeDefinition {
   } & VictoryCommonThemeProps &
     VictoryDatableProps;
 }
-
-export interface VictoryThemeInterface {
-  grayscale: VictoryThemeDefinition;
-  material: VictoryThemeDefinition;
-}
-
-const VictoryTheme: VictoryThemeInterface;
-export default VictoryTheme;

packages/victory-core/src/victory-theme/victory-theme.tsx

@@ -0,0 +1,5 @@
+import { grayscale } from "./grayscale";
+import { material } from "./material";
+export * from "./victory-theme-definition";
+
+export const VictoryTheme = { grayscale, material };