feat(tab,tabbody,tabs): convert to TypeScript and export types

Author: WesSouza

src/Tab/Tab.spec.js renamed to src/Tab/Tab.spec.tsx

@@ -1,7 +1,5 @@
-import React from 'react';
-
 import { renderWithTheme } from '../../test/utils';
-import Tab from './Tab';
+import { Tab } from './Tab';
 
 describe('<Tab />', () => {
   describe('prop: children', () => {

src/Tab/Tab.js renamed to src/Tab/Tab.tsx

@@ -1,11 +1,21 @@
-import React from 'react';
-import propTypes from 'prop-types';
-
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
+
 import { createBorderStyles, createBoxStyles, focusOutline } from '../common';
 import { blockSizes } from '../common/system';
+import { CommonStyledProps } from '../types';
+
+type TabProps = {
+  children?: React.ReactNode;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>, value: any) => void;
+  selected?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value?: any;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'value'> &
+  CommonStyledProps;
 
-const StyledTab = styled.button`
+const StyledTab = styled.button<TabProps>`
   ${createBoxStyles()}
   ${createBorderStyles()}
   position: relative;
@@ -59,34 +69,22 @@ const StyledTab = styled.button`
   }
 `;
 
-const Tab = React.forwardRef(function Tab(props, ref) {
-  const { value, onClick, selected, children, ...otherProps } = props;
-
+const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(
+  { value, onClick, selected = false, children, ...otherProps },
+  ref
+) {
   return (
     <StyledTab
-      selected={selected}
       aria-selected={selected}
-      onClick={e => onClick(e, value)}
-      role='tab'
+      selected={selected}
+      onClick={(e: React.MouseEvent<HTMLButtonElement>) => onClick?.(e, value)}
       ref={ref}
+      role='tab'
       {...otherProps}
     >
       {children}
     </StyledTab>
   );
 });
 
-Tab.defaultProps = {
-  onClick: () => {},
-  selected: false,
-  children: null
-};
-
-Tab.propTypes = {
-  // eslint-disable-next-line react/require-default-props, react/forbid-prop-types
-  value: propTypes.any,
-  onClick: propTypes.func,
-  selected: propTypes.bool,
-  children: propTypes.node
-};
-export default Tab;
+export { Tab, TabProps };

src/TabBody/TabBody.spec.js renamed to src/TabBody/TabBody.spec.tsx

@@ -1,7 +1,5 @@
-import React from 'react';
-
 import { renderWithTheme } from '../../test/utils';
-import TabBody from './TabBody';
+import { TabBody } from './TabBody';
 
 describe('<TabBody />', () => {
   describe('prop: children', () => {

src/TabBody/TabBody.js renamed to src/TabBody/TabBody.tsx

@@ -1,8 +1,13 @@
-import React from 'react';
-import propTypes from 'prop-types';
+import React, { forwardRef } from 'react';
 
 import styled from 'styled-components';
 import { createBorderStyles, createBoxStyles } from '../common';
+import { CommonStyledProps } from '../types';
+
+type TabBodyProps = {
+  children: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement> &
+  CommonStyledProps;
 
 const StyledTabBody = styled.div`
   ${createBoxStyles()}
@@ -13,20 +18,15 @@ const StyledTabBody = styled.div`
   padding: 16px;
   font-size: 1rem;
 `;
-const TabBody = React.forwardRef(function TabBody(props, ref) {
-  const { children, ...otherProps } = props;
+const TabBody = forwardRef<HTMLDivElement, TabBodyProps>(function TabBody(
+  { children, ...otherProps },
+  ref
+) {
   return (
     <StyledTabBody ref={ref} {...otherProps}>
       {children}
     </StyledTabBody>
   );
 });
 
-TabBody.defaultProps = {
-  children: null
-};
-
-TabBody.propTypes = {
-  children: propTypes.node
-};
-export default TabBody;
+export { TabBody, TabBodyProps };

src/Tabs/Tabs.js

@@ -3,27 +3,27 @@ name: Tabs
 menu: Components
 ---
 
-import Tabs from './Tabs'
-import Tab from '../Tab/Tab'
-import TabBody from '../TabBody/TabBody'
-import Fieldset from '../Fieldset/Fieldset'
-import Window from '../Window/Window'
-import WindowHeader from '../WindowHeader/WindowHeader'
-import NumberField from '../NumberField/NumberField'
-import Checkbox from '../Checkbox/Checkbox'
-import WindowContent from '../WindowContent/WindowContent'
+import { Tabs } from './Tabs';
+import { Tab } from '../Tab/Tab';
+import { TabBody } from '../TabBody/TabBody';
+import Fieldset from '../Fieldset/Fieldset';
+import Window from '../Window/Window';
+import WindowHeader from '../WindowHeader/WindowHeader';
+import NumberField from '../NumberField/NumberField';
+import Checkbox from '../Checkbox/Checkbox';
+import WindowContent from '../WindowContent/WindowContent';
 
 # Tabs
 
 ## Usage
 
 <Playground>
   {() => {
-    const [activeTab, setActiveTab] = React.useState(0)
-    const handleChange = value => {
-      setActiveTab(value)
-    }
-    const a11yProps = (index) => ({
+    const [activeTab, setActiveTab] = React.useState(0);
+    const handleChange = (event, value) => {
+      setActiveTab(value);
+    };
+    const a11yProps = index => ({
       id: `tab-${index}`,
       'aria-controls': `tabpanel-${index}`
     });

src/Tabs/Tabs.mdx

@@ -1,9 +1,8 @@
-import React from 'react';
 import { fireEvent } from '@testing-library/react';
 
 import { renderWithTheme } from '../../test/utils';
 import { Tab } from '..';
-import Tabs from './Tabs';
+import { Tabs } from './Tabs';
 
 describe('<Tabs />', () => {
   describe('prop: children', () => {
@@ -112,7 +111,7 @@ describe('<Tabs />', () => {
       const rowElements = getAllByTestId('tab-row');
       const selectedTab = container.querySelector('[aria-selected=true]');
 
-      expect(rowElements.pop().contains(selectedTab)).toBe(true);
+      expect(rowElements?.pop()?.contains(selectedTab)).toBe(true);
     });
   });
 });

src/Tabs/Tabs.spec.js renamed to src/Tabs/Tabs.spec.tsx

@@ -1,18 +1,18 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-
+import { ComponentMeta } from '@storybook/react';
+import { useState } from 'react';
 import {
-  Tabs,
+  Anchor,
+  Checkbox,
+  Fieldset,
+  NumberField,
   Tab,
   TabBody,
+  Tabs,
   Window,
-  WindowHeader,
   WindowContent,
-  Fieldset,
-  NumberField,
-  Checkbox,
-  Anchor
+  WindowHeader
 } from 'react95';
+import styled from 'styled-components';
 
 const Wrapper = styled.div`
   padding: 5rem;
@@ -24,14 +24,17 @@ export default {
   component: Tabs,
   subcomponents: { Tab, TabBody },
   decorators: [story => <Wrapper>{story()}</Wrapper>]
-};
+} as ComponentMeta<typeof Tabs>;
 
 export function Default() {
   const [state, setState] = useState({
     activeTab: 0
   });
 
-  const handleChange = (e, value) => setState({ activeTab: value });
+  const handleChange = (
+    _: React.MouseEvent<HTMLButtonElement>,
+    value: number
+  ) => setState({ activeTab: value });
 
   const { activeTab } = state;
   return (
@@ -85,7 +88,10 @@ export function MultiRow() {
     activeTab: 'Shoes'
   });
 
-  const handleChange = (e, value) => setState({ activeTab: value });
+  const handleChange = (
+    _: React.MouseEvent<HTMLButtonElement>,
+    value: number
+  ) => setState({ activeTab: value });
 
   const { activeTab } = state;
   return (