Jim/74978/accordion component ts migration

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

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { usePrevious } from '../../hooks';
 import Icon from '../icon';
+import { TAccordionProps } from '../types';
 
-const Accordion = ({ className, icon_close, icon_open, list }) => {
-    const [open_idx, setOpenIdx] = React.useState(null);
+const Accordion = ({ className, icon_close, icon_open, list }: TAccordionProps) => {
+    const [open_idx, setOpenIdx] = React.useState<number | null>(null);
 
     const prev_list = usePrevious(list);
 
@@ -14,7 +14,7 @@ const Accordion = ({ className, icon_close, icon_open, list }) => {
     }, [list, prev_list]);
 
     // close if clicking the accordion that's open, otherwise open the new one
-    const onClick = index => setOpenIdx(index === open_idx ? null : index);
+    const onClick = (index: number) => setOpenIdx(index === open_idx ? null : index);
 
     return (
         <div className={classNames('dc-accordion__wrapper', className)}>
@@ -47,11 +47,4 @@ const Accordion = ({ className, icon_close, icon_open, list }) => {
     );
 };
 
-Accordion.propTypes = {
-    className: PropTypes.string,
-    icon_close: PropTypes.string,
-    icon_open: PropTypes.string,
-    list: PropTypes.arrayOf(PropTypes.object),
-};
-
 export default Accordion;

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

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

packages/components/src/components/types/accordion.types.ts

@@ -0,0 +1,11 @@
+export type TAccordionItem = Array<{
+    header: string;
+    content: React.ReactNode;
+}>;
+
+export type TAccordionProps = {
+    className?: string;
+    icon_close?: string;
+    icon_open?: string;
+    list: TAccordionItem;
+};

packages/components/src/components/types/index.ts

@@ -1,3 +1,4 @@
 import { TIconsManifest, TIconProps } from './icons.types';
+import { TAccordionProps, TAccordionItem } from './accordion.types';
 
-export type { TIconsManifest, TIconProps };
+export type { TIconsManifest, TIconProps, TAccordionProps, TAccordionItem };