Start conversion to TS

package.json

@@ -8,6 +8,10 @@
     "@reach/dialog": "^0.16.2",
     "@reach/menu-button": "^0.16.2",
     "@reach/visually-hidden": "^0.16.0",
+    "@types/jest": "^29.0.0",
+    "@types/node": "^18.7.16",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^18.0.6",
     "classnames": "^2.3.1",
     "color": "^4.2.3",
     "formik": "^2.2.9",
@@ -18,9 +22,10 @@
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "5.0.0",
+    "react-scripts": "5.0.1",
     "react-select": "^5.2.2",
     "sass": "^1.50.0",
+    "typescript": "^4.8.2",
     "sass-color-helpers": "^2.1.1",
     "yup": "^0.32.11"
   },

src/components/Breadcrumbs.jsx → src/components/Breadcrumbs.tsx

@@ -1,31 +1,36 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-export const Breadcrumbs = ({ children, className }) => {
+interface BreadcrumbsProps {
+    className?: string;
+}
+
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children, className }) => {
     return (
         <nav aria-label="breadcrumb" className={classnames(className)}>
             <ol className="breadcrumb">{children}</ol>
         </nav>
     );
 };
 
-Breadcrumbs.propTypes = {
-    children: PropTypes.node.isRequired,
-    className: PropTypes.string
-};
+interface BreadcrumbItemProps {
+    current?: boolean;
+    as?: React.ElementType;
+    to?: string;
+    href?: string;
+}
 
-export const BreadcrumbItem = ({ children = null, current = false, as: Comp = 'a', ...props }) => {
+export const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
+    children = null,
+    current = false,
+    as = 'a',
+    ...props
+}) => {
+    const Comp = as;
     return (
         <li className={classnames('breadcrumb-item', { active: current })} aria-current={current ? 'page' : undefined}>
             {current && children}
             {!current && <Comp {...props}>{children}</Comp>}
         </li>
     );
 };
-
-BreadcrumbItem.propTypes = {
-    children: PropTypes.node.isRequired,
-    current: PropTypes.bool,
-    as: PropTypes.elementType
-};

src/components/Code.jsx → src/components/Code.tsx

@@ -14,12 +14,14 @@ hljs.registerLanguage('json', js_n);
 hljs.registerLanguage('scss', scss);
 
 const Code = ({ code, lang, className = '' }) => {
-    const el = useRef();
+    const el = useRef<HTMLElement>(null);
+
     useEffect(() => {
-        if (code) {
+        if (code && el.current) {
             hljs.highlightElement(el.current);
         }
     }, [code]);
+
     return (
         <div className={classNames('code-block', className)}>
             <pre>

src/components/ConfirmButton.jsx → src/components/ConfirmButton.tsx

@@ -1,31 +1,42 @@
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { FiCheck } from 'react-icons/fi';
 import useTimeoutFn from '../hooks/useTimeout';
 
-const CONFIRM_STATES = {
-    CONFIRM: 'confirm',
-    DONE: 'done',
-    READY: null
-};
+enum CONFIRM_STATES {
+    CONFIRM = 'confirm',
+    DONE = 'done',
+    READY = 'ready'
+}
+
+interface ConfirmButtonProps {
+    className?: string;
+    disabled?: boolean;
+    label?: string;
+    confirmLabel?: string;
+    successLabel?: string;
+    defaultClass?: string;
+    successClass?: string;
+    confirmClass?: string;
+    timeout?: number | false;
+    onConfirm?: () => void;
+}
 
-const ConfirmButton = ({
+const ConfirmButton: React.FC<ConfirmButtonProps> = ({
     className = '',
     disabled = false,
 
     label = 'Submit',
     confirmLabel = 'Are you sure?',
     successLabel = 'Thanks!',
 
-    type = 'submit',
     defaultClass = 'btn-primary',
     successClass = 'btn-success',
     confirmClass = 'btn-danger',
     timeout = 3000,
     onConfirm = () => {}
 }) => {
-    const [buttonState, setButtonState] = useState(null);
+    const [buttonState, setButtonState] = useState(CONFIRM_STATES.READY);
 
     const isConfirm = [CONFIRM_STATES.CONFIRM, CONFIRM_STATES.DONE].includes(buttonState);
 
@@ -80,16 +91,4 @@ const ConfirmButton = ({
     );
 };
 
-ConfirmButton.propTypes = {
-    label: PropTypes.string,
-    confirmLabel: PropTypes.string,
-    successLabel: PropTypes.string,
-
-    defaultClass: PropTypes.string,
-    confirmClass: PropTypes.string,
-    successClass: PropTypes.string,
-
-    onConfirm: PropTypes.func.isRequired
-};
-
 export default ConfirmButton;

src/components/DisplayFormikState.jsx → src/components/DisplayFormikState.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Code from './Code';
-const DisplayFormikState = (props) => (
+
+const DisplayFormikState = (props: React.PropsWithChildren<object>) => (
     <div>
         <label>Formik State</label>
         <Code lang="json" code={JSON.stringify(props, null, 4)} />

src/components/FormattedCurrency.tsx

@@ -0,0 +1,9 @@
+interface FormattedCurrencyProps {
+    value: number;
+    currency?: string;
+}
+
+const FormattedCurrency = ({ value = 0, currency = 'USD' }: FormattedCurrencyProps) =>
+    new window.Intl.NumberFormat('en-US', { style: 'currency', currency }).format(value);
+
+export default FormattedCurrency;

src/components/FormattedPlural.tsx

@@ -0,0 +1,9 @@
+interface FormattedPluralProps {
+    value: number;
+    one: string;
+    many: string;
+}
+
+const FormattedPlural = ({ value, one, many }: FormattedPluralProps) => (value === 1 ? one : many);
+
+export default FormattedPlural;

src/components/Loading.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface LoadingProps {
+    inline?: boolean;
+    invert?: false;
+}
+
+const Loading: React.FC<LoadingProps> = ({ inline = false, invert = false }) => (
+    <span
+        className={classNames('loading-wrapper', {
+            'loading-inline': inline
+        })}
+    >
+        <span
+            className={classNames('loading', {
+                inverted: invert
+            })}
+        />
+    </span>
+);
+
+export default Loading;

src/components/Modal.jsx → src/components/Modal.tsx

@@ -1,10 +1,20 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { DialogOverlay, DialogContent } from '@reach/dialog';
 import VisuallyHidden from '@reach/visually-hidden';
 
-const Modal = ({
+interface ModalProps {
+    visible: boolean;
+    label: string;
+    onClose: () => void;
+    disableOverlayClick?: boolean;
+    children: React.ReactNode;
+    showClose?: boolean;
+    innerClassName?: string;
+    center?: boolean;
+}
+
+const Modal: React.FC<ModalProps> = ({
     center = false,
     children = [],
     disableOverlayClick = false,
@@ -35,14 +45,4 @@ const Modal = ({
     );
 };
 
-Modal.propTypes = {
-    visible: PropTypes.bool.isRequired,
-    label: PropTypes.string.isRequired,
-    onClose: PropTypes.func.isRequired,
-    children: PropTypes.node.isRequired,
-    showClose: PropTypes.bool,
-    innerClassName: PropTypes.string,
-    center: PropTypes.bool
-};
-
 export default Modal;