refactor(toggle): migrate Toggle from Flow to TypeScript

src/components/toggle/Toggle.stories.js → src/components/toggle/Toggle.stories.tsx

@@ -1,4 +1,3 @@
-// @flow
 /* eslint-disable react-hooks/rules-of-hooks */
 import * as React from 'react';
 

src/components/toggle/Toggle.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import './Toggle.scss';
+
+export interface ToggleProps
+    extends Omit<
+        React.InputHTMLAttributes<HTMLInputElement>,
+        'checked' | 'disabled' | 'onMouseEnter' | 'onMouseLeave'
+    > {
+    /** CSS class for the toggle container */
+    className?: string;
+    /** Optional attribute used for targeting */
+    'data-target-id'?: string;
+    /** Description of the input */
+    description?: React.ReactNode;
+    /** Whether the toggle is disabled. @TODO: eventually call this `disabled` */
+    isDisabled?: boolean;
+    /** Toggle state. @TODO: eventually call this `checked` */
+    isOn?: boolean;
+    /** If set to true, the toggle will be aligned to the right */
+    isToggleRightAligned?: boolean;
+    /** Label displayed for the input */
+    label: React.ReactNode;
+    /** Name of the input */
+    name?: string;
+    /** blur callback function called with event as the argument */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** change callback function called with event as the argument */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** focus callback function called with event as the argument */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** mouse enter callback function called with event as the argument */
+    onMouseEnter?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /** mouse leave callback function called with event as the argument */
+    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /** optional value for the toggles checkbox */
+    value?: React.InputHTMLAttributes<HTMLInputElement>['value'];
+}
+
+const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(
+    (
+        {
+            className = '',
+            'data-target-id': dataTargetId,
+            description,
+            isDisabled,
+            isOn,
+            isToggleRightAligned = false,
+            label,
+            name,
+            onBlur,
+            onChange,
+            onFocus,
+            onMouseEnter,
+            onMouseLeave,
+            ...rest
+        },
+        ref,
+    ) => {
+        const classes = classNames('toggle-container', className, {
+            'is-toggle-right-aligned': isToggleRightAligned,
+        });
+
+        const toggleElements = [
+            <div key="toggle-simple-switch" className="toggle-simple-switch" />,
+            <div key="toggle-simple-label" className="toggle-simple-label">
+                {label}
+            </div>,
+        ];
+        if (isToggleRightAligned) {
+            toggleElements.reverse();
+        }
+
+        return (
+            <div className={classes} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+                <label className="toggle-simple" data-target-id={dataTargetId}>
+                    <input
+                        checked={isOn}
+                        className="toggle-simple-input"
+                        disabled={isDisabled}
+                        name={name}
+                        onBlur={onBlur}
+                        onChange={onChange}
+                        onFocus={onFocus}
+                        ref={ref}
+                        role="switch"
+                        type="checkbox"
+                        {...rest}
+                    />
+                    {toggleElements}
+                </label>
+                {description ? <div className="toggle-simple-description">{description}</div> : null}
+            </div>
+        );
+    },
+);
+Toggle.displayName = 'Toggle';
+
+export default Toggle;

src/components/toggle/ToggleField.js → src/components/toggle/ToggleField.js.flow

@@ -8,7 +8,7 @@ import type { ToggleProps } from './Toggle';
 
 type Props = ToggleProps & FieldProps;
 
-const ToggleField = ({ field, form, ...rest }: Props) => {
+const ToggleField = ({ field, form, meta, ...rest }: Props) => {
     const { value } = field;
     return <TogglePrimitive {...field} {...rest} isOn={!!value} />;
 };

src/components/toggle/ToggleField.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { FieldProps } from 'formik';
+
+import TogglePrimitive from './Toggle';
+import type { ToggleProps } from './Toggle';
+
+export interface ToggleFieldProps extends Omit<ToggleProps, 'form'>, FieldProps {}
+
+const ToggleField = ({
+    field,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- strip Formik form and meta bags from forwarded props
+    form,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- strip Formik form and meta bags from forwarded props
+    meta,
+    ...rest
+}: ToggleFieldProps) => {
+    const { value } = field;
+    return <TogglePrimitive {...field} {...rest} isOn={!!value} />;
+};
+
+export default ToggleField;

src/components/toggle/__tests__/Toggle.test.js → src/components/toggle/__tests__/Toggle.test.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react';
+import { shallow } from 'enzyme';
 import sinon from 'sinon';
 
 import Toggle from '..';
 
 describe('components/toggle/Toggle', () => {
-    const getWrapper = (props = {}) =>
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const getWrapper = (props: any = {}) =>
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         shallow(<Toggle label="Enter things" name="toggle" onChange={() => {}} {...props} />);
 
     test('should correctly render default component', () => {

src/components/toggle/__tests__/ToggleField.test.js → src/components/toggle/__tests__/ToggleField.test.tsx

@@ -1,10 +1,11 @@
-// @flow
-
 import * as React from 'react';
+import { shallow } from 'enzyme';
+
 import ToggleField from '../ToggleField';
 
 describe('components/toggle/ToggleField', () => {
-    const getWrapper = (props = {}) => shallow(<ToggleField {...props} />);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const getWrapper = (props: any = {}) => shallow(<ToggleField {...props} />);
 
     test.each([
         [true, 'value'],

src/components/toggle/index.ts

@@ -0,0 +1,4 @@
+export { default } from './Toggle';
+export { default as ToggleField } from './ToggleField';
+export type { ToggleProps } from './Toggle';
+export type { ToggleFieldProps } from './ToggleField';