Migrate victory-tooltip to typescript

.changeset/tender-bees-talk.md

@@ -0,0 +1,6 @@
+---
+"victory-core": patch
+"victory-tooltip": patch
+---
+
+Migrate victory-tooltip to typescript

packages/victory-core/src/exports.test.ts

@@ -408,6 +408,7 @@ describe("victory-core", () => {
             "getTransitionPropsFactory": [Function],
           },
           "UserProps": Object {
+            "assert": [Function],
             "getSafeUserProps": [Function],
             "withSafeUserProps": [Function],
           },

packages/victory-core/src/types/callbacks.ts

@@ -1,4 +1,4 @@
-import { D3Scale, Datum, ID } from "./prop-types";
+import { D3Scale, Datum, ID, ScalePropType } from "./prop-types";
 import { BlockProps, OrientationTypes } from "../victory-theme/types";
 
 /**
@@ -16,10 +16,13 @@ export interface CallbackArgs {
   index?: ID;
   x?: number;
   y?: number;
-  scale?: {
-    x?: D3Scale;
-    y?: D3Scale;
-  };
+  scale?:
+    | ScalePropType
+    | D3Scale
+    | {
+        x?: ScalePropType | D3Scale;
+        y?: ScalePropType | D3Scale;
+      };
   tick?: any;
   ticks?: any;
   text?: any;

packages/victory-core/src/victory-util/user-props.ts

@@ -55,6 +55,20 @@ const testIfSafeProp = (key: string): key is SafeAttribute => {
   return false;
 };
 
+/**
+ * Asserts that value is not null or undefined, throwing an error if it is.
+ * @param value The value to assert
+ * @param message The error message to throw
+ */
+export function assert<T>(
+  value: T,
+  message?: string,
+): asserts value is NonNullable<T> {
+  if (value === undefined || value === null) {
+    throw new Error(message);
+  }
+}
+
 /**
  * getSafeUserProps - function that takes in a props object and removes any
  * key-value entries that do not match filter strings in the USER_PROPS_SAFELIST

packages/victory-tooltip/package.json

@@ -24,6 +24,9 @@
     "prop-types": "^15.8.1",
     "victory-core": "^36.8.2"
   },
+  "devDependencies": {
+    "victory-tooltip": "*"
+  },
   "peerDependencies": {
     "react": ">=16.6.0"
   },

packages/victory-tooltip/src/flyout.test.js → packages/victory-tooltip/src/flyout.test.tsx

@@ -1,6 +1,8 @@
 import React from "react";
-import { Flyout } from "victory-tooltip";
 import { render } from "@testing-library/react";
+import { Flyout } from "victory-tooltip";
+
+import { SVGWrapper } from "../../../test/helpers";
 
 describe("victory-primitives/flyout", () => {
   const baseProps = {
@@ -17,7 +19,7 @@ describe("victory-primitives/flyout", () => {
   describe("rendering", () => {
     it("renders a flyout path", () => {
       const { container } = render(<Flyout {...baseProps} />, {
-        wrapper: "svg",
+        wrapper: SVGWrapper,
       });
       const path = container.querySelector("path");
 

packages/victory-tooltip/src/flyout.js → packages/victory-tooltip/src/flyout.tsx

@@ -1,17 +1,67 @@
-/* eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2] }]*/
 import React from "react";
-import PropTypes from "prop-types";
-import { Helpers, CommonProps, Path, UserProps } from "victory-core";
-import { isPlainObject, assign } from "lodash";
+import {
+  Helpers,
+  Path,
+  UserProps,
+  VictoryCommonProps,
+  OrientationTypes,
+  VictoryStyleObject,
+  StringOrNumberOrCallback,
+} from "victory-core";
 
-const getVerticalPath = (props) => {
+export interface FlyoutProps extends VictoryCommonProps {
+  active?: boolean;
+  center?: {
+    x: number;
+    y: number;
+  };
+  className?: string;
+  clipPath?: string;
+  cornerRadius?: number;
+  data?: any[];
+  datum?: object;
+  dx?: number;
+  dy?: number;
+  events?: object;
+  id?: StringOrNumberOrCallback;
+  index?: number;
+  orientation?: OrientationTypes;
+  pathComponent?: React.ReactElement;
+  pointerLength?: number;
+  pointerWidth?: number;
+  role?: string;
+  shapeRendering?: string;
+  style?: VictoryStyleObject;
+  transform?: string;
+  x?: number;
+  y?: number;
+}
+
+interface FlyoutPathProps {
+  center: {
+    x: number;
+    y: number;
+  };
+  cornerRadius: number;
+  dx?: number;
+  dy?: number;
+  height: number;
+  orientation: OrientationTypes;
+  pointerLength: number;
+  pointerWidth: number;
+  width: number;
+  x: number;
+  y: number;
+}
+
+const getVerticalPath = (props: FlyoutPathProps) => {
   const { pointerWidth, cornerRadius, orientation, width, height, center } =
     props;
   const sign = orientation === "bottom" ? 1 : -1;
   const x = props.x + (props.dx || 0);
   const y = props.y + (props.dy || 0);
-  const centerX = isPlainObject(center) && center.x;
-  const centerY = isPlainObject(center) && center.y;
+  const centerX = center.x;
+  const centerY = center.y;
   const pointerEdge = centerY + sign * (height / 2);
   const oppositeEdge = centerY - sign * (height / 2);
   const rightEdge = centerX + width / 2;
@@ -35,14 +85,14 @@ const getVerticalPath = (props) => {
     z`;
 };
 
-const getHorizontalPath = (props) => {
+const getHorizontalPath = (props: FlyoutPathProps) => {
   const { pointerWidth, cornerRadius, orientation, width, height, center } =
     props;
   const sign = orientation === "left" ? 1 : -1;
   const x = props.x + (props.dx || 0);
   const y = props.y + (props.dy || 0);
-  const centerX = isPlainObject(center) && center.x;
-  const centerY = isPlainObject(center) && center.y;
+  const centerX = center.x;
+  const centerY = center.y;
   const pointerEdge = centerX - sign * (width / 2);
   const oppositeEdge = centerX + sign * (width / 2);
   const bottomEdge = centerY + height / 2;
@@ -66,14 +116,14 @@ const getHorizontalPath = (props) => {
     z`;
 };
 
-const getFlyoutPath = (props) => {
+const getFlyoutPath = (props: FlyoutPathProps) => {
   const orientation = props.orientation || "top";
   return orientation === "left" || orientation === "right"
     ? getHorizontalPath(props)
     : getVerticalPath(props);
 };
 
-const evaluateProps = (props) => {
+const evaluateProps = (props: FlyoutProps) => {
   /**
    * Potential evaluated props are:
    * `id`
@@ -82,7 +132,7 @@ const evaluateProps = (props) => {
   const id = Helpers.evaluateProp(props.id, props);
   const style = Helpers.evaluateStyle(props.style, props);
 
-  return assign({}, props, { id, style });
+  return { ...props, id, style };
 };
 
 const defaultProps = {
@@ -91,38 +141,40 @@ const defaultProps = {
   shapeRendering: "auto",
 };
 
-const Flyout = (initialProps) => {
+export const Flyout: React.FC<FlyoutProps> = (initialProps) => {
   const props = evaluateProps({ ...defaultProps, ...initialProps });
   const userProps = UserProps.getSafeUserProps(props);
 
-  return React.cloneElement(props.pathComponent, {
+  // check for required props for this subcomponent
+  // they should be passed in from the wrapper
+  UserProps.assert(props.height, "Flyout props[height] is undefined");
+  UserProps.assert(props.width, "Flyout props[width] is undefined");
+  UserProps.assert(props.x, "Flyout props[x] is undefined");
+  UserProps.assert(props.y, "Flyout props[y] is undefined");
+
+  const flyoutPathProps: FlyoutPathProps = {
+    center: props.center || { x: 0, y: 0 },
+    cornerRadius: props.cornerRadius || 0,
+    dx: props.dx,
+    dy: props.dy,
+    height: props.height,
+    orientation: props.orientation || "top",
+    pointerLength: props.pointerLength || 0,
+    pointerWidth: props.pointerWidth || 0,
+    width: props.width,
+    x: props.x,
+    y: props.y,
+  };
+
+  return React.cloneElement(props.pathComponent!, {
     ...props.events,
     ...userProps,
     style: props.style,
-    d: getFlyoutPath(props),
+    d: getFlyoutPath(flyoutPathProps),
     className: props.className,
     shapeRendering: props.shapeRendering,
     role: props.role,
     transform: props.transform,
     clipPath: props.clipPath,
   });
 };
-
-Flyout.propTypes = {
-  ...CommonProps.primitiveProps,
-  center: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }),
-  cornerRadius: PropTypes.number,
-  datum: PropTypes.object,
-  dx: PropTypes.number,
-  dy: PropTypes.number,
-  height: PropTypes.number,
-  orientation: PropTypes.oneOf(["top", "bottom", "left", "right"]),
-  pathComponent: PropTypes.element,
-  pointerLength: PropTypes.number,
-  pointerWidth: PropTypes.number,
-  width: PropTypes.number,
-  x: PropTypes.number,
-  y: PropTypes.number,
-};
-
-export default Flyout;

packages/victory-tooltip/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./victory-tooltip";
+export * from "./flyout";

packages/victory-tooltip/src/victory-tooltip.test.js → packages/victory-tooltip/src/victory-tooltip.test.tsx

@@ -1,13 +1,12 @@
 import React from "react";
-import { Flyout, VictoryTooltip } from "victory-tooltip";
-import { VictoryContainer, VictoryLabel } from "victory-core";
 import { fireEvent, screen, render } from "@testing-library/react";
+import { VictoryContainer, VictoryLabel } from "victory-core";
+import { Flyout, VictoryTooltip } from "victory-tooltip";
 
 describe("components/victory-tooltip", () => {
   const flyoutId = "flyout-1";
   const labelId = "label-1";
 
-  /** @type {VictoryTooltipProps} */
   const baseProps = {
     x: 0,
     y: 0,