Merge pull request #2379 from FormidableLabs/ts-migrate/victory-axis

TS migrate: victory-axis

packages/victory-axis/package.json

@@ -27,6 +27,10 @@
   "peerDependencies": {
     "react": ">=16.6.0"
   },
+  "devDependencies": {
+    "victory-axis": "*",
+    "victory-chart": "*"
+  },
   "scripts": {
     "###            THESE SCRIPTS ARE GENERATED           ###": "true",
     "###            DO NOT MODIFY THESE MANUALLY          ###": "true",
@@ -151,6 +155,7 @@
       "dependencies": [
         "types:create",
         "../victory-core:types:create",
+        "../victory-chart:types:create",
         "../victory-vendor:types:create",
         "../victory-voronoi:types:create"
       ],
@@ -203,6 +208,7 @@
       "output": [],
       "dependencies": [
         "../victory-core:types:create",
+        "../victory-chart:types:create",
         "../victory-vendor:types:create",
         "../victory-voronoi:types:create"
       ],
@@ -233,6 +239,7 @@
       "output": [],
       "dependencies": [
         "../victory-core:types:create",
+        "../victory-chart:types:create",
         "../victory-vendor:types:create",
         "../victory-voronoi:types:create"
       ],
@@ -251,6 +258,7 @@
       "output": [],
       "dependencies": [
         "build:lib:cjs",
+        "../victory-chart:build:lib:cjs",
         "../victory-vendor:build:lib:cjs",
         "../victory-voronoi:build:lib:cjs"
       ],

packages/victory-axis/src/helper-methods.js → packages/victory-axis/src/helper-methods.tsx

@@ -61,7 +61,7 @@ const getStyleObject = (props) => {
     : specificAxisStyle || generalAxisStyle;
 };
 
-export const getStyles = (props, styleObject) => {
+export const getStyles = (props, styleObject?) => {
   const style = props.style || {};
   styleObject = styleObject || {};
   const parentStyleProps = { height: "100%", width: "100%" };
@@ -552,7 +552,6 @@ export const getBaseProps = (props, fallbackProps) => {
     anchors,
     domain,
     stringTicks,
-    name,
   } = calculatedValues;
   const otherAxis = axis === "x" ? "y" : "x";
   const { width, height, standalone, theme, polar, padding, horizontal } =
@@ -585,7 +584,6 @@ export const getBaseProps = (props, fallbackProps) => {
         height,
         padding,
         domain,
-        name,
       },
       sharedProps,
     ),
@@ -608,7 +606,7 @@ export const getBaseProps = (props, fallbackProps) => {
     const tickLayout = {
       position: getTickPosition(styles, orientation, isVertical),
       transform: getTickTransform(
-        scale[axis](tickValue),
+        scale[axis]?.(tickValue),
         globalTransform,
         isVertical,
       ),
@@ -619,9 +617,9 @@ export const getBaseProps = (props, fallbackProps) => {
       transform: {
         x: isVertical
           ? -gridOffset.x + globalTransform.x
-          : scale[axis](tickValue) + globalTransform.x,
+          : scale[axis]?.(tickValue) + globalTransform.x,
         y: isVertical
-          ? scale[axis](tickValue) + globalTransform.y
+          ? scale[axis]?.(tickValue) + globalTransform.y
           : gridOffset.y + globalTransform.y,
       },
     };

packages/victory-axis/src/index.ts

@@ -0,0 +1 @@
+export * from "./victory-axis";

packages/victory-axis/src/victory-axis.test.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { VictoryAxis } from "victory-axis";
+import { VictoryChart } from "victory-chart";
+import { render, screen } from "@testing-library/react";
+
+describe("components/victory-axis", () => {
+  it("should render two axes by default", () => {
+    const chartProps = {
+      defaultAxes: {
+        independent: <VictoryAxis data-testid="axis" />,
+        dependent: <VictoryAxis data-testid="axis" dependentAxis />,
+      },
+    };
+    render(<VictoryChart {...chartProps} />);
+
+    const axes = screen.getAllByTestId("axis");
+
+    expect(axes).toHaveLength(2);
+  });
+});

packages/victory-axis/src/victory-axis.js → packages/victory-axis/src/victory-axis.tsx

@@ -12,6 +12,13 @@ import {
   addEvents,
   Axis,
   UserProps,
+  DomainPropType,
+  EventPropTypeInterface,
+  OrientationTypes,
+  VictoryAxisCommonProps,
+  VictoryCommonProps,
+  VictorySingleLabelableProps,
+  EventsMixinClass,
 } from "victory-core";
 import { getBaseProps, getStyles } from "./helper-methods";
 
@@ -32,7 +39,31 @@ const options = {
   ],
 };
 
-class VictoryAxis extends React.Component {
+export type VictoryAxisTTargetType =
+  | "axis"
+  | "axisLabel"
+  | "grid"
+  | "ticks"
+  | "tickLabels"
+  | "parent";
+
+export interface VictoryAxisProps
+  extends VictoryAxisCommonProps,
+    VictoryCommonProps,
+    VictorySingleLabelableProps {
+  crossAxis?: boolean;
+  domain?: DomainPropType;
+  events?: EventPropTypeInterface<VictoryAxisTTargetType, number | string>[];
+  fixLabelOverlap?: boolean;
+  offsetX?: number;
+  offsetY?: number;
+  orientation?: OrientationTypes;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface VictoryAxisBase extends EventsMixinClass<VictoryAxisProps> {}
+
+class VictoryAxisBase extends React.Component<VictoryAxisProps> {
   static animationWhitelist = [
     "style",
     "domain",
@@ -143,7 +174,7 @@ class VictoryAxis extends React.Component {
 
   static getDomain = Axis.getDomain;
   static getAxis = Axis.getAxis;
-  static getStyles = (props) => getStyles(props, fallbackProps.style);
+  static getStyles = (props) => getStyles(props);
   static getBaseProps = (props) => getBaseProps(props, fallbackProps);
   static expectedComponents = [
     "axisComponent",
@@ -291,4 +322,4 @@ class VictoryAxis extends React.Component {
   }
 }
 
-export default addEvents(VictoryAxis, options);
+export const VictoryAxis = addEvents(VictoryAxisBase, options);

packages/victory-core/src/victory-util/add-events.tsx

@@ -37,7 +37,7 @@ const defaultComponents: NonNullable<MixinOptions["components"]> = [
 export type MixinOptions = {
   components?: Array<{
     name: string;
-    index?: string;
+    index?: string | number;
   }>;
 };
 
@@ -64,6 +64,12 @@ export interface EventsMixinClass<TProps> {
   getEventState: typeof Events.getEventState;
   renderContinuousData(props: TProps);
   animateComponent(props: TProps, defaultAnimationWhitelist);
+  getComponentProps(
+    component: React.ReactElement,
+    type: string,
+    index: number,
+  ): TProps;
+  dataKeys: string[];
 }
 
 /**