Likhith/76940/ts migrate toggle switch toast tick progress

packages/components/src/components/tick-progress/index.js → packages/components/src/components/tick-progress/index.ts

@@ -1,4 +1,4 @@
-import TickProgress from './tick-progress.jsx';
+import TickProgress from './tick-progress';
 import './tick-progress.scss';
 
 export default TickProgress;

packages/components/src/components/tick-progress/tick-progress.jsx → packages/components/src/components/tick-progress/tick-progress.tsx

@@ -1,8 +1,15 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 
-const Tick = ({ is_on }) => {
+type TTickProgress = {
+    className?: string;
+    columns?: number;
+    value?: number;
+    rows?: number;
+    size?: number;
+};
+
+const Tick = ({ is_on }: { is_on?: boolean }) => {
     return (
         <div
             className={classNames('dc-tick-progress__tick', {
@@ -12,7 +19,7 @@ const Tick = ({ is_on }) => {
     );
 };
 
-const TickProgress = ({ className, rows, columns, size, value }) => {
+const TickProgress = ({ className, rows = 2, columns = 5, size = 10, value = 0 }: TTickProgress) => {
     return (
         <div
             className={classNames('dc-tick-progress', className)}
@@ -21,26 +28,11 @@ const TickProgress = ({ className, rows, columns, size, value }) => {
                 gridTemplateColumns: `repeat(${columns}, 1fr)`,
             }}
         >
-            {new Array(size).fill(null).map((item, index) => {
+            {new Array(size).fill(null).map((_, index) => {
                 return <Tick is_on={index < value} key={index} />;
             })}
         </div>
     );
 };
 
-TickProgress.defaultProps = {
-    columns: 5,
-    rows: 2,
-    size: 10,
-    value: 0,
-};
-
 export default TickProgress;
-
-TickProgress.propTypes = {
-    className: PropTypes.string,
-    columns: PropTypes.number,
-    value: PropTypes.number,
-    rows: PropTypes.number,
-    size: PropTypes.number,
-};

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

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

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

@@ -3,7 +3,24 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 
-const Toast = ({ children, className, is_open = true, onClose, onClick, type = 'info', timeout = 0 }) => {
+type TToast = {
+    className?: string;
+    is_open?: boolean;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onClose?: () => void;
+    type?: 'error' | 'info';
+    timeout?: number;
+};
+
+const Toast = ({
+    children,
+    className,
+    is_open = true,
+    onClose,
+    onClick,
+    type = 'info',
+    timeout = 0,
+}: React.PropsWithChildren<TToast>) => {
     const [is_visible, setVisible] = React.useState(false);
 
     React.useEffect(() => {
@@ -42,7 +59,7 @@ const Toast = ({ children, className, is_open = true, onClose, onClick, type = '
                     [`dc-toast__${type}`]: type,
                 })}
                 onMouseDown={e => {
-                    // To prevent clickoutside for modal
+                    // To prevent click outside for modal
                     e.nativeEvent.preventDefault();
                     e.nativeEvent.stopPropagation();
                     e.nativeEvent.stopImmediatePropagation();
@@ -56,14 +73,4 @@ const Toast = ({ children, className, is_open = true, onClose, onClick, type = '
     );
 };
 
-Toast.propTypes = {
-    className: PropTypes.string,
-    is_open: PropTypes.bool,
-    onClick: PropTypes.func,
-    onClose: PropTypes.func,
-    type: PropTypes.oneOf(['error', 'info']),
-    timeout: PropTypes.number,
-    children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
-};
-
 export default Toast;

packages/components/src/components/toggle-switch/index.js → packages/components/src/components/toggle-switch/index.ts

@@ -1,4 +1,4 @@
-import ToggleSwitch from './toggle-switch.jsx';
+import ToggleSwitch from './toggle-switch';
 import './toggle-switch.scss';
 
 export default ToggleSwitch;

packages/components/src/components/toggle-switch/toggle-switch.jsx → packages/components/src/components/toggle-switch/toggle-switch.tsx

@@ -1,8 +1,16 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-const ToggleSwitch = ({ className, classNameButton, classNameLabel, handleToggle, id, is_enabled }) => {
+type TToggleSwitch = {
+    className?: string;
+    classNameButton?: string;
+    classNameLabel?: string;
+    handleToggle: () => void;
+    id: string;
+    is_enabled: boolean;
+};
+
+const ToggleSwitch = ({ className, classNameButton, classNameLabel, handleToggle, id, is_enabled }: TToggleSwitch) => {
     return (
         <React.Fragment>
             <input
@@ -19,13 +27,4 @@ const ToggleSwitch = ({ className, classNameButton, classNameLabel, handleToggle
     );
 };
 
-ToggleSwitch.propTypes = {
-    className: PropTypes.string,
-    classNameButton: PropTypes.string,
-    classNameLabel: PropTypes.string,
-    handleToggle: PropTypes.func.isRequired,
-    id: PropTypes.string.isRequired,
-    is_enabled: PropTypes.bool.isRequired,
-};
-
 export default ToggleSwitch;