From 5dd4a96de5291e2a28fa45d3a84a41bc39a6f406 Mon Sep 17 00:00:00 2001 From: Sergii Rudenko Date: Wed, 18 Sep 2019 11:15:02 -0700 Subject: [PATCH 1/6] Rename files from JS/JSX to TS/TSX --- .../vx-tooltip/src/enhancers/{withTooltip.js => withTooltip.tsx} | 0 packages/vx-tooltip/src/{index.js => index.ts} | 0 packages/vx-tooltip/src/tooltips/{Tooltip.jsx => Tooltip.tsx} | 0 .../src/tooltips/{TooltipWithBounds.jsx => TooltipWithBounds.tsx} | 0 packages/vx-tooltip/test/{Tooltip.test.jsx => Tooltip.test.tsx} | 0 .../{TooltipWithBounds.test.jsx => TooltipWithBounds.test.tsx} | 0 .../vx-tooltip/test/{withTooltip.test.js => withTooltip.test.ts} | 0 7 files changed, 0 insertions(+), 0 deletions(-) rename packages/vx-tooltip/src/enhancers/{withTooltip.js => withTooltip.tsx} (100%) rename packages/vx-tooltip/src/{index.js => index.ts} (100%) rename packages/vx-tooltip/src/tooltips/{Tooltip.jsx => Tooltip.tsx} (100%) rename packages/vx-tooltip/src/tooltips/{TooltipWithBounds.jsx => TooltipWithBounds.tsx} (100%) rename packages/vx-tooltip/test/{Tooltip.test.jsx => Tooltip.test.tsx} (100%) rename packages/vx-tooltip/test/{TooltipWithBounds.test.jsx => TooltipWithBounds.test.tsx} (100%) rename packages/vx-tooltip/test/{withTooltip.test.js => withTooltip.test.ts} (100%) diff --git a/packages/vx-tooltip/src/enhancers/withTooltip.js b/packages/vx-tooltip/src/enhancers/withTooltip.tsx similarity index 100% rename from packages/vx-tooltip/src/enhancers/withTooltip.js rename to packages/vx-tooltip/src/enhancers/withTooltip.tsx diff --git a/packages/vx-tooltip/src/index.js b/packages/vx-tooltip/src/index.ts similarity index 100% rename from packages/vx-tooltip/src/index.js rename to packages/vx-tooltip/src/index.ts diff --git a/packages/vx-tooltip/src/tooltips/Tooltip.jsx b/packages/vx-tooltip/src/tooltips/Tooltip.tsx similarity index 100% rename from packages/vx-tooltip/src/tooltips/Tooltip.jsx rename to packages/vx-tooltip/src/tooltips/Tooltip.tsx diff --git a/packages/vx-tooltip/src/tooltips/TooltipWithBounds.jsx b/packages/vx-tooltip/src/tooltips/TooltipWithBounds.tsx similarity index 100% rename from packages/vx-tooltip/src/tooltips/TooltipWithBounds.jsx rename to packages/vx-tooltip/src/tooltips/TooltipWithBounds.tsx diff --git a/packages/vx-tooltip/test/Tooltip.test.jsx b/packages/vx-tooltip/test/Tooltip.test.tsx similarity index 100% rename from packages/vx-tooltip/test/Tooltip.test.jsx rename to packages/vx-tooltip/test/Tooltip.test.tsx diff --git a/packages/vx-tooltip/test/TooltipWithBounds.test.jsx b/packages/vx-tooltip/test/TooltipWithBounds.test.tsx similarity index 100% rename from packages/vx-tooltip/test/TooltipWithBounds.test.jsx rename to packages/vx-tooltip/test/TooltipWithBounds.test.tsx diff --git a/packages/vx-tooltip/test/withTooltip.test.js b/packages/vx-tooltip/test/withTooltip.test.ts similarity index 100% rename from packages/vx-tooltip/test/withTooltip.test.js rename to packages/vx-tooltip/test/withTooltip.test.ts From 548f595b4285ef6013df8da9f6d907197de6ab55 Mon Sep 17 00:00:00 2001 From: Sergii Rudenko Date: Wed, 18 Sep 2019 11:19:24 -0700 Subject: [PATCH 2/6] Run TS Migrate, fix types --- packages/vx-tooltip/package.json | 6 +- .../vx-tooltip/src/enhancers/withTooltip.tsx | 45 +++++++++------ packages/vx-tooltip/src/tooltips/Tooltip.tsx | 15 +++-- .../src/tooltips/TooltipWithBounds.tsx | 57 ++++++++----------- 4 files changed, 65 insertions(+), 58 deletions(-) diff --git a/packages/vx-tooltip/package.json b/packages/vx-tooltip/package.json index 7c80ed8a5..021e91f89 100644 --- a/packages/vx-tooltip/package.json +++ b/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,9 +28,10 @@ }, "homepage": "https://github.com/hshoff/vx#readme", "dependencies": { + "@types/react": "*", + "@types/classnames": "^2.2.9", "@vx/bounds": "0.0.189", - "classnames": "^2.2.5", - "prop-types": "^15.5.10" + "classnames": "^2.2.5" }, "peerDependencies": { "react": "^15.0.0-0 || ^16.0.0-0" diff --git a/packages/vx-tooltip/src/enhancers/withTooltip.tsx b/packages/vx-tooltip/src/enhancers/withTooltip.tsx index 238f47489..52efd05c8 100644 --- a/packages/vx-tooltip/src/enhancers/withTooltip.tsx +++ b/packages/vx-tooltip/src/enhancers/withTooltip.tsx @@ -1,28 +1,40 @@ 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, +type Props = { + tooltipOpen?: boolean; + tooltipLeft?: number; + tooltipTop?: number; + tooltipData?: Object; + updateTooltip?: (args: UpdateTooltipArgs) => void; + showTooltip?: (args: ShowTooltipArgs) => void; + hideTooltip?: () => void; +}; + +type ShowTooltipArgs = { + tooltipLeft?: Props['tooltipLeft']; + tooltipTop?: Props['tooltipTop']; + tooltipData?: Props['tooltipData']; +}; + +type UpdateTooltipArgs = { + tooltipOpen?: Props['tooltipOpen']; + tooltipLeft?: Props['tooltipLeft']; + tooltipTop?: Props['tooltipTop']; + tooltipData?: Props['tooltipData']; }; export default function withTooltip( - BaseComponent, + BaseComponent: React.ComponentType, containerProps = { style: { - position: 'relative', - width: 'inherit', - height: 'inherit', + position: 'relative' as const, + width: 'inherit' as const, + height: 'inherit' as const, }, }, ) { class WrappedComponent extends React.PureComponent { - constructor(props) { + constructor(props: Props) { super(props); this.state = { tooltipOpen: false, @@ -34,7 +46,8 @@ 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 +56,7 @@ export default function withTooltip( tooltipData, })); } - showTooltip({ tooltipLeft, tooltipTop, tooltipData }) { + showTooltip({ tooltipLeft, tooltipTop, tooltipData }: ShowTooltipArgs) { this.updateTooltip({ tooltipOpen: true, tooltipLeft, diff --git a/packages/vx-tooltip/src/tooltips/Tooltip.tsx b/packages/vx-tooltip/src/tooltips/Tooltip.tsx index d35e4ab2a..2c677911d 100644 --- a/packages/vx-tooltip/src/tooltips/Tooltip.tsx +++ b/packages/vx-tooltip/src/tooltips/Tooltip.tsx @@ -1,16 +1,15 @@ 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, +type Props = { + 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 }: Props) { return (
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 +43,7 @@ function TooltipWithBounds({ children, style, ...otherProps -}) { +}: Props) { let left = initialLeft; let top = initialTop; @@ -76,7 +72,4 @@ function TooltipWithBounds({ ); } -TooltipWithBounds.propTypes = propTypes; -TooltipWithBounds.defaultProps = defaultProps; - export default withBoundingRects(TooltipWithBounds); From bccc5c848f34ad7dc99cceb669a0ac0738e92a17 Mon Sep 17 00:00:00 2001 From: Sergii Rudenko Date: Wed, 18 Sep 2019 14:52:35 -0700 Subject: [PATCH 3/6] Made types more explicit, review fixes --- packages/vx-tooltip/package.json | 3 +- .../vx-tooltip/src/enhancers/withTooltip.tsx | 29 ++++++++----------- packages/vx-tooltip/src/tooltips/Tooltip.tsx | 11 +++++-- .../src/tooltips/TooltipWithBounds.tsx | 1 + 4 files changed, 24 insertions(+), 20 deletions(-) diff --git a/packages/vx-tooltip/package.json b/packages/vx-tooltip/package.json index 021e91f89..3cb09b147 100644 --- a/packages/vx-tooltip/package.json +++ b/packages/vx-tooltip/package.json @@ -31,7 +31,8 @@ "@types/react": "*", "@types/classnames": "^2.2.9", "@vx/bounds": "0.0.189", - "classnames": "^2.2.5" + "classnames": "^2.2.5", + "prop-types": "^15.5.10" }, "peerDependencies": { "react": "^15.0.0-0 || ^16.0.0-0" diff --git a/packages/vx-tooltip/src/enhancers/withTooltip.tsx b/packages/vx-tooltip/src/enhancers/withTooltip.tsx index 52efd05c8..4727894f5 100644 --- a/packages/vx-tooltip/src/enhancers/withTooltip.tsx +++ b/packages/vx-tooltip/src/enhancers/withTooltip.tsx @@ -1,6 +1,6 @@ import React from 'react'; -type Props = { +export type WithTooltipProvidedProps = { tooltipOpen?: boolean; tooltipLeft?: number; tooltipTop?: number; @@ -9,21 +9,17 @@ type Props = { showTooltip?: (args: ShowTooltipArgs) => void; hideTooltip?: () => void; }; +type WithTooltipState = Pick< + WithTooltipProvidedProps, + 'tooltipOpen' | 'tooltipLeft' | 'tooltipTop' | 'tooltipData' +>; +type ShowTooltipArgs = Pick; +type UpdateTooltipArgs = Pick< + WithTooltipProvidedProps, + 'tooltipOpen' | 'tooltipLeft' | 'tooltipTop' | 'tooltipData' +>; -type ShowTooltipArgs = { - tooltipLeft?: Props['tooltipLeft']; - tooltipTop?: Props['tooltipTop']; - tooltipData?: Props['tooltipData']; -}; - -type UpdateTooltipArgs = { - tooltipOpen?: Props['tooltipOpen']; - tooltipLeft?: Props['tooltipLeft']; - tooltipTop?: Props['tooltipTop']; - tooltipData?: Props['tooltipData']; -}; - -export default function withTooltip( +export default function withTooltip( BaseComponent: React.ComponentType, containerProps = { style: { @@ -33,7 +29,7 @@ export default function withTooltip( }, }, ) { - class WrappedComponent extends React.PureComponent { + class WrappedComponent extends React.PureComponent { constructor(props: Props) { super(props); this.state = { @@ -46,7 +42,6 @@ export default function withTooltip( this.showTooltip = this.showTooltip.bind(this); this.hideTooltip = this.hideTooltip.bind(this); } - updateTooltip({ tooltipOpen, tooltipLeft, tooltipTop, tooltipData }: UpdateTooltipArgs) { this.setState(prevState => ({ ...prevState, diff --git a/packages/vx-tooltip/src/tooltips/Tooltip.tsx b/packages/vx-tooltip/src/tooltips/Tooltip.tsx index 2c677911d..c068c6f47 100644 --- a/packages/vx-tooltip/src/tooltips/Tooltip.tsx +++ b/packages/vx-tooltip/src/tooltips/Tooltip.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; -type Props = { +export type TooltipProps = { left?: number; top?: number; className?: string; @@ -9,7 +9,14 @@ type Props = { children?: React.ReactNode; }; -export default function Tooltip({ className, top, left, style, children, ...restProps }: Props) { +export default function Tooltip({ + className, + top, + left, + style, + children, + ...restProps +}: TooltipProps) { return (
Date: Wed, 18 Sep 2019 16:48:56 -0700 Subject: [PATCH 4/6] Fixes for types, fix build --- .../vx-tooltip/src/enhancers/withTooltip.tsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/vx-tooltip/src/enhancers/withTooltip.tsx b/packages/vx-tooltip/src/enhancers/withTooltip.tsx index 4727894f5..fbf4d7bd6 100644 --- a/packages/vx-tooltip/src/enhancers/withTooltip.tsx +++ b/packages/vx-tooltip/src/enhancers/withTooltip.tsx @@ -4,7 +4,7 @@ export type WithTooltipProvidedProps = { tooltipOpen?: boolean; tooltipLeft?: number; tooltipTop?: number; - tooltipData?: Object; + tooltipData?: object; updateTooltip?: (args: UpdateTooltipArgs) => void; showTooltip?: (args: ShowTooltipArgs) => void; hideTooltip?: () => void; @@ -13,15 +13,13 @@ type WithTooltipState = Pick< WithTooltipProvidedProps, 'tooltipOpen' | 'tooltipLeft' | 'tooltipTop' | 'tooltipData' >; -type ShowTooltipArgs = Pick; -type UpdateTooltipArgs = Pick< - WithTooltipProvidedProps, - 'tooltipOpen' | 'tooltipLeft' | 'tooltipTop' | 'tooltipData' ->; +type ShowTooltipArgs = Omit; +type UpdateTooltipArgs = WithTooltipState; +type WithTooltipContainerProps = { style: React.CSSProperties }; export default function withTooltip( BaseComponent: React.ComponentType, - containerProps = { + containerProps: WithTooltipContainerProps = { style: { position: 'relative' as const, width: 'inherit' as const, @@ -29,7 +27,7 @@ export default function withTooltip( }, }, ) { - class WrappedComponent extends React.PureComponent { + return class WrappedComponent extends React.PureComponent { constructor(props: Props) { super(props); this.state = { @@ -80,6 +78,5 @@ export default function withTooltip(
); } - } - return WrappedComponent; + }; } From ac76afad960c4715a1f339b395e5b1e6a4e7de9c Mon Sep 17 00:00:00 2001 From: Sergii Rudenko Date: Thu, 19 Sep 2019 15:25:23 -0700 Subject: [PATCH 5/6] Make a better types for the restProps in Tooltip --- packages/vx-tooltip/src/tooltips/Tooltip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vx-tooltip/src/tooltips/Tooltip.tsx b/packages/vx-tooltip/src/tooltips/Tooltip.tsx index c068c6f47..3ee572b06 100644 --- a/packages/vx-tooltip/src/tooltips/Tooltip.tsx +++ b/packages/vx-tooltip/src/tooltips/Tooltip.tsx @@ -16,7 +16,7 @@ export default function Tooltip({ style, children, ...restProps -}: TooltipProps) { +}: TooltipProps & JSX.IntrinsicElements['div']) { return (
Date: Fri, 4 Oct 2019 10:00:36 -0700 Subject: [PATCH 6/6] Simplity as const in withTooltip HOC --- packages/vx-tooltip/src/enhancers/withTooltip.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/vx-tooltip/src/enhancers/withTooltip.tsx b/packages/vx-tooltip/src/enhancers/withTooltip.tsx index fbf4d7bd6..0a9669e09 100644 --- a/packages/vx-tooltip/src/enhancers/withTooltip.tsx +++ b/packages/vx-tooltip/src/enhancers/withTooltip.tsx @@ -21,10 +21,10 @@ export default function withTooltip( BaseComponent: React.ComponentType, containerProps: WithTooltipContainerProps = { style: { - position: 'relative' as const, - width: 'inherit' as const, - height: 'inherit' as const, - }, + position: 'relative', + width: 'inherit', + height: 'inherit', + } as const, }, ) { return class WrappedComponent extends React.PureComponent {