Shayan/74991/checkbox component ts migration

packages/account/src/Components/personal-details/personal-details.jsx

@@ -562,7 +562,7 @@ const PersonalDetails = ({
                                                                 {title}
                                                             </Text>
                                                         )}
-                                                        withTabIndex='0'
+                                                        withTabIndex={0}
                                                         data-testid='tax_identification_confirm'
                                                     />
                                                 )}

packages/components/src/components/checkbox/checkbox.jsx → packages/components/src/components/checkbox/checkbox.tsx

@@ -1,48 +1,53 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import Icon from '../icon';
 import Text from '../text';
 
-const Checkbox = React.forwardRef(
+type TCheckBoxProps = Omit<React.HTMLProps<HTMLInputElement>, 'value'> & {
+    className?: string;
+    classNameLabel?: string;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    greyDisabled?: boolean;
+    id?: string;
+    label: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLSpanElement>) => void;
+    value?: boolean;
+    withTabIndex?: number;
+};
+
+const Checkbox = React.forwardRef<HTMLInputElement, TCheckBoxProps>(
     (
         {
             className,
             classNameLabel,
-            disabled,
+            disabled = false,
             id,
             label,
             defaultChecked,
             onChange, // This needs to be here so it's not included in `otherProps`
-            value,
-            withTabIndex,
+            value = false,
+            withTabIndex = 0,
             greyDisabled = false,
             ...otherProps
         },
         ref
     ) => {
         const [checked, setChecked] = React.useState(defaultChecked || value);
-        const input_ref = React.useRef();
-
-        const setRef = el_input => {
-            input_ref.current = el_input;
-            if (ref) ref.current = el_input;
-        };
-
         React.useEffect(() => {
             setChecked(defaultChecked || value);
         }, [value, defaultChecked]);
 
-        const onInputChange = e => {
+        const onInputChange: React.ChangeEventHandler<HTMLInputElement> = e => {
             e.persist();
             setChecked(!checked);
             onChange(e);
         };
 
-        const handleKeyDown = e => {
+        const handleKeyDown: React.KeyboardEventHandler<HTMLSpanElement> = e => {
             // Enter or space
             if (!disabled && (e.key === 'Enter' || e.keyCode === 32)) {
-                onChange({ target: { name: input_ref.current.name, checked: !checked } });
+                onChange(e);
                 setChecked(!checked);
             }
         };
@@ -59,11 +64,11 @@ const Checkbox = React.forwardRef(
                     className='dc-checkbox__input'
                     type='checkbox'
                     id={id}
-                    ref={setRef}
+                    ref={ref}
                     disabled={disabled}
                     onChange={onInputChange}
                     defaultChecked={checked}
-                    value={value}
+                    checked={value}
                     {...otherProps}
                 />
                 <span
@@ -72,8 +77,7 @@ const Checkbox = React.forwardRef(
                         'dc-checkbox__box--disabled': disabled,
                         'dc-checkbox--grey-disabled': disabled && greyDisabled,
                     })}
-                    {...(withTabIndex?.length > 0 ? { tabIndex: withTabIndex } : {})}
-                    tabIndex='0'
+                    tabIndex={withTabIndex}
                     onKeyDown={handleKeyDown}
                 >
                     {!!checked && <Icon icon='IcCheckmark' color='active' />}
@@ -88,17 +92,4 @@ const Checkbox = React.forwardRef(
 
 Checkbox.displayName = 'Checkbox';
 
-Checkbox.propTypes = {
-    className: PropTypes.string,
-    classNameLabel: PropTypes.string,
-    defaultChecked: PropTypes.bool,
-    disabled: PropTypes.bool,
-    greyDisabled: PropTypes.bool,
-    id: PropTypes.string,
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    onChange: PropTypes.func,
-    value: PropTypes.bool,
-    withTabIndex: PropTypes.string,
-};
-
 export default Checkbox;

packages/components/src/components/checkbox/index.js → packages/components/src/components/checkbox/index.ts

@@ -1,4 +1,4 @@
-import Checkbox from './checkbox.jsx';
+import Checkbox from './checkbox';
 import './checkbox.scss';
 
 export default Checkbox;

packages/components/src/components/composite-checkbox/composite-checkbox.jsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import Checkbox from '../checkbox/checkbox.jsx';
+import Checkbox from '../checkbox/checkbox';
 import Text from '../text';
 
 const CompositeCheckbox = ({ name, value, onChange, className, label, id, description, children, ...props }) => {