Merge pull request #504 from Rudeg/sr--typescript-vx-tooltip

typescript(vx-tooltip): re-write package in TypeScript

packages/vx-tooltip/package.json

@@ -5,6 +5,7 @@
   "sideEffects": false,
   "main": "lib/index.js",
   "module": "esm/index.js",
+  "types": "lib/index.d.ts",
   "files": [
     "lib",
     "esm"
@@ -27,6 +28,8 @@
   },
   "homepage": "https://github.com/hshoff/vx#readme",
   "dependencies": {
+    "@types/react": "*",
+    "@types/classnames": "^2.2.9",
     "@vx/bounds": "0.0.192",
     "classnames": "^2.2.5",
     "prop-types": "^15.5.10"

packages/vx-tooltip/src/enhancers/withTooltip.js → packages/vx-tooltip/src/enhancers/withTooltip.tsx

@@ -1,28 +1,34 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-export const withTooltipPropTypes = {
-  tooltipOpen: PropTypes.bool,
-  tooltipLeft: PropTypes.number,
-  tooltipTop: PropTypes.number,
-  tooltipData: PropTypes.object,
-  updateTooltip: PropTypes.func,
-  showTooltip: PropTypes.func,
-  hideTooltip: PropTypes.func,
+export type WithTooltipProvidedProps = {
+  tooltipOpen?: boolean;
+  tooltipLeft?: number;
+  tooltipTop?: number;
+  tooltipData?: object;
+  updateTooltip?: (args: UpdateTooltipArgs) => void;
+  showTooltip?: (args: ShowTooltipArgs) => void;
+  hideTooltip?: () => void;
 };
+type WithTooltipState = Pick<
+  WithTooltipProvidedProps,
+  'tooltipOpen' | 'tooltipLeft' | 'tooltipTop' | 'tooltipData'
+>;
+type ShowTooltipArgs = Omit<WithTooltipState, 'tooltipOpen'>;
+type UpdateTooltipArgs = WithTooltipState;
+type WithTooltipContainerProps = { style: React.CSSProperties };
 
-export default function withTooltip(
-  BaseComponent,
-  containerProps = {
+export default function withTooltip<Props extends object = {}>(
+  BaseComponent: React.ComponentType<Props>,
+  containerProps: WithTooltipContainerProps = {
     style: {
       position: 'relative',
       width: 'inherit',
       height: 'inherit',
-    },
+    } as const,
   },
 ) {
-  class WrappedComponent extends React.PureComponent {
-    constructor(props) {
+  return class WrappedComponent extends React.PureComponent<Props, WithTooltipState> {
+    constructor(props: Props) {
       super(props);
       this.state = {
         tooltipOpen: false,
@@ -34,7 +40,7 @@ export default function withTooltip(
       this.showTooltip = this.showTooltip.bind(this);
       this.hideTooltip = this.hideTooltip.bind(this);
     }
-    updateTooltip({ tooltipOpen, tooltipLeft, tooltipTop, tooltipData }) {
+    updateTooltip({ tooltipOpen, tooltipLeft, tooltipTop, tooltipData }: UpdateTooltipArgs) {
       this.setState(prevState => ({
         ...prevState,
         tooltipOpen,
@@ -43,7 +49,7 @@ export default function withTooltip(
         tooltipData,
       }));
     }
-    showTooltip({ tooltipLeft, tooltipTop, tooltipData }) {
+    showTooltip({ tooltipLeft, tooltipTop, tooltipData }: ShowTooltipArgs) {
       this.updateTooltip({
         tooltipOpen: true,
         tooltipLeft,
@@ -72,6 +78,5 @@ export default function withTooltip(
         </div>
       );
     }
-  }
-  return WrappedComponent;
+  };
 }

packages/vx-tooltip/src/tooltips/Tooltip.jsx → packages/vx-tooltip/src/tooltips/Tooltip.tsx

@@ -1,16 +1,22 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
 
-Tooltip.propTypes = {
-  left: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  top: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  className: PropTypes.string,
-  style: PropTypes.object,
-  children: PropTypes.any,
+export type TooltipProps = {
+  left?: number;
+  top?: number;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
 };
 
-export default function Tooltip({ className, top, left, style, children, ...restProps }) {
+export default function Tooltip({
+  className,
+  top,
+  left,
+  style,
+  children,
+  ...restProps
+}: TooltipProps & JSX.IntrinsicElements['div']) {
   return (
     <div
       className={cx('vx-tooltip-portal', className)}

packages/vx-tooltip/src/tooltips/TooltipWithBounds.jsx → packages/vx-tooltip/src/tooltips/TooltipWithBounds.tsx

@@ -1,44 +1,41 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+// @ts-ignore This line could be removed after bounds migration to the TS
 import { withBoundingRects } from '@vx/bounds';
 
 import Tooltip from './Tooltip';
 
-const rectShape = PropTypes.shape({
-  top: PropTypes.number.isRequired,
-  right: PropTypes.number.isRequired,
-  bottom: PropTypes.number.isRequired,
-  left: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-});
-
-const withBoundingRectsProps = {
-  getRects: PropTypes.func,
-  rect: rectShape,
-  parentRect: rectShape,
+type RectShape = {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+  width: number;
+  height: number;
 };
 
-const tooltipProps = {
-  left: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  top: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  className: PropTypes.string,
-  style: PropTypes.object,
-  children: PropTypes.any,
+type WithBoundingRectsProps = {
+  getRects?: () => RectShape;
+  rect?: RectShape;
+  parentRect?: RectShape;
 };
 
-const propTypes = {
-  ...withBoundingRectsProps,
-  ...tooltipProps,
-  offsetLeft: PropTypes.number,
-  offsetTop: PropTypes.number,
+type TooltipProps = {
+  left?: number;
+  top?: number;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
 };
 
-const defaultProps = {};
+type Props = {
+  offsetLeft?: number;
+  offsetTop?: number;
+} & TooltipProps &
+  WithBoundingRectsProps;
 
 function TooltipWithBounds({
-  left: initialLeft,
-  top: initialTop,
+  left: initialLeft = 0,
+  top: initialTop = 0,
   offsetLeft = 10,
   offsetTop = 10,
   rect,
@@ -47,7 +44,7 @@ function TooltipWithBounds({
   children,
   style,
   ...otherProps
-}) {
+}: Props) {
   let left = initialLeft;
   let top = initialTop;
 
@@ -76,7 +73,4 @@ function TooltipWithBounds({
   );
 }
 
-TooltipWithBounds.propTypes = propTypes;
-TooltipWithBounds.defaultProps = defaultProps;
-
 export default withBoundingRects(TooltipWithBounds);