refactor(image-tooltip): migrate ImageTooltip from Flow to TypeScript

src/components/image-tooltip/ImageTooltip.stories.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 
 import Button, { ButtonType } from '../button/Button';
 
-// @ts-ignore flow import
 import testImageSrc from './getTestImageSrc';
 import ImageTooltip from './ImageTooltip';
 import notes from './ImageTooltip.stories.md';

src/components/image-tooltip/ImageTooltip.tsx

@@ -1,16 +1,12 @@
 import * as React from 'react';
 import classNames from 'classnames';
 
-// @ts-ignore flow import
-import Tooltip, { TooltipProps, TooltipTheme } from '../tooltip';
+import Tooltip, { TooltipTheme, type TooltipProps } from '../tooltip';
 import ImageTooltipContent from './ImageTooltipContent';
 
 import './ImageTooltip.scss';
 
-// We manually set "text" with our specific visual tooltip content.
-type OtherTooltipProps = Omit<TooltipProps, 'text'>;
-
-export type ImageTooltipProps = {
+export interface ImageTooltipProps extends Omit<TooltipProps, 'text'> {
     /** A React element to put the tooltip on */
     children: React.ReactChild;
     /** A string to be used in the tooltip's paragraph content */
@@ -19,7 +15,7 @@ export type ImageTooltipProps = {
     image: React.ReactElement;
     /** A string to be used in the tooltip's title heading */
     title: string;
-} & OtherTooltipProps;
+}
 
 const ImageTooltip = ({ children, className, content, image, title, ...otherTooltipProps }: ImageTooltipProps) => {
     // State to track if the image has been loaded before displaying the tooltip

src/components/image-tooltip/ImageTooltipContent.tsx

@@ -3,20 +3,18 @@ import classNames from 'classnames';
 
 import './ImageTooltipContent.scss';
 
-type OnImageLoad = () => void;
-
-export type ImageTooltipContentProps = {
+interface ImageTooltipContentProps {
     /** A React component representing the image used in the visual tooltip */
     children: React.ReactElement;
     /** A string to be used in the tooltip's paragraph content */
     content: string;
     /** A callback triggered onLoad for the image element */
-    onImageLoad: OnImageLoad;
+    onImageLoad: () => void;
     /** A string to be used in the tooltip's title heading */
     title: string;
-};
+}
 
-function cloneTooltipChildWithNewProps(child: React.ReactElement, onImageLoad: OnImageLoad): React.ReactElement {
+const cloneTooltipChildWithNewProps = (child: React.ReactElement, onImageLoad: () => void): React.ReactElement => {
     const {
         props: { className: existingClasses },
     } = child;
@@ -26,7 +24,7 @@ function cloneTooltipChildWithNewProps(child: React.ReactElement, onImageLoad: O
         className,
         onLoad: onImageLoad,
     });
-}
+};
 
 const ImageTooltipContent = ({ children, content, onImageLoad, title }: ImageTooltipContentProps) => (
     <div className="bdl-ImageTooltipContent">

src/components/image-tooltip/__tests__/ImageTooltip.test.tsx

@@ -3,7 +3,6 @@ import { shallow, ShallowWrapper } from 'enzyme';
 
 import Button from '../../button/Button';
 import ImageTooltip from '../ImageTooltip';
-// @ts-ignore flow import
 import testImageSrc from '../getTestImageSrc';
 
 describe('components/image-tooltip/ImageTooltip', () => {

src/components/image-tooltip/__tests__/ImageTooltipContent.test.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 
 import ImageTooltipContent from '../ImageTooltipContent';
-// @ts-ignore flow import
 import testImageSrc from '../getTestImageSrc';
 
 describe('components/image-tooltip/ImageTooltipContent', () => {

src/components/image-tooltip/getTestImageSrc.ts

@@ -0,0 +1,4 @@
+// @ts-ignore png import has no type declaration
+import testImageSrc from './__tests__/test-image.png';
+
+export default testImageSrc;

src/components/image-tooltip/index.ts

@@ -1 +1,2 @@
 export { default } from './ImageTooltip';
+export type { ImageTooltipProps } from './ImageTooltip';