Merge pull request #36 from likhith-deriv/likhith/76945/migrate-wizar…

…d-component-to-ts

Likhith/76945/migrate wizard component to ts

packages/components/src/components/wizard/index.tsx → packages/components/src/components/wizard/index.ts

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

packages/components/src/components/wizard/wizard-step.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Step = ({ children = [], className }: React.PropsWithChildren<{ className?: string }>) => (
+    <div className={classNames('wizard__main-step', className)}>{children}</div>
+);
+
+export default Step;

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

@@ -1,11 +1,27 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-import Step from './wizard-step.jsx';
+import Step from './wizard-step';
+
+type TWizard = {
+    className?: string;
+    initial_step: number;
+    onStepChange?: (prop: { [key: string]: number }) => void;
+    nav: React.ReactNode;
+    selected_step_ref: () => React.MutableRefObject<HTMLElement>;
+};
 
-const Wizard = ({ children, className, initial_step, onStepChange, nav, selected_step_ref }) => {
+const Wizard = ({
+    children = [],
+    className,
+    initial_step = 1,
+    onStepChange,
+    nav = null,
+    selected_step_ref,
+}: React.PropsWithChildren<TWizard>) => {
     const [active_step, setActiveStep] = React.useState(0);
 
+    const getSteps = React.useCallback(() => React.Children.toArray(children), [children]);
+
     React.useEffect(() => {
         const local_initial_step = initial_step - 1;
         const local_children = getSteps();
@@ -15,28 +31,26 @@ const Wizard = ({ children, className, initial_step, onStepChange, nav, selected
         }
     }, [initial_step, getSteps]);
 
-    const onChangeStep = stats => {
+    const onChangeStep = (stats: { [key: string]: number }) => {
         // User callback
-        onStepChange(stats);
+        onStepChange?.(stats);
     };
 
-    const isInvalidStep = next => next < 0 || next >= getTotalSteps();
+    const isInvalidStep = (next: number) => next < 0 || next >= getTotalSteps();
 
-    const onSetActiveStep = next => {
+    const onSetActiveStep = (next: number) => {
         if (active_step === next || isInvalidStep(next)) return;
         setActiveStep(next);
         onChangeStep({
             active_step: next + 1,
         });
     };
 
-    const getSteps = React.useCallback(() => React.Children.toArray(children), [children]);
-
     const getCurrentStep = () => active_step + 1;
 
     const getTotalSteps = () => getSteps().length;
 
-    const goToStep = step => onSetActiveStep(step - 1);
+    const goToStep = (step: number) => onSetActiveStep(step - 1);
 
     const goToFirstStep = () => goToStep(1);
 
@@ -47,7 +61,7 @@ const Wizard = ({ children, className, initial_step, onStepChange, nav, selected
     const goToPreviousStep = () => onSetActiveStep(active_step - 1);
 
     // Allows for using HTML elements as a step
-    const isReactComponent = ({ type }) => typeof type === 'function' || typeof type === 'object';
+    const isReactComponent = ({ type }: any) => typeof type === 'function' || typeof type === 'object';
 
     const properties = {
         getCurrentStep,
@@ -64,14 +78,18 @@ const Wizard = ({ children, className, initial_step, onStepChange, nav, selected
         if (!child) return null;
 
         if (i === active_step)
-            return <Wizard.Step>{isReactComponent(child) ? React.cloneElement(child, properties) : child}</Wizard.Step>;
+            return (
+                <Wizard.Step>
+                    {isReactComponent(child) ? React.cloneElement(<>{child}</>, properties) : child}
+                </Wizard.Step>
+            );
 
         return null;
     });
 
     return (
         <div className={classNames('wizard', className)}>
-            {nav && React.cloneElement(nav, properties)}
+            {nav && React.cloneElement(<>{nav}</>, properties)}
             {childrenWithProps}
         </div>
     );
@@ -80,23 +98,4 @@ const Wizard = ({ children, className, initial_step, onStepChange, nav, selected
 Wizard.displayName = 'Wizard';
 Wizard.Step = Step;
 
-Wizard.defaultProps = {
-    children: [],
-    initial_step: 1,
-    onStepChange: () => {},
-    nav: null,
-};
-
-Wizard.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    initial_step: PropTypes.number,
-    onStepChange: PropTypes.func,
-    nav: PropTypes.node,
-    selected_step_ref: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
-    ]),
-};
-
 export default Wizard;