feat(table,tablebody,tabledatacell,tablehead,tableheadcell,tablerow): convert to TypeScript and export types

Author: WesSouza

src/Table/Table.mdx

@@ -3,22 +3,22 @@ name: Table
 menu: Components
 ---
 
-import Table from './Table'
-import TableBody from '../TableBody/TableBody'
-import TableHead from '../TableHead/TableHead'
-import TableRow from '../TableRow/TableRow'
-import TableHeadCell from '../TableHeadCell/TableHeadCell'
-import TableDataCell from '../TableDataCell/TableDataCell'
-import Window from '../Window/Window'
-import WindowHeader from '../WindowHeader/WindowHeader'
-import WindowContent from '../WindowContent/WindowContent'
+import { Table } from './Table';
+import { TableBody } from '../TableBody/TableBody';
+import { TableHead } from '../TableHead/TableHead';
+import { TableRow } from '../TableRow/TableRow';
+import { TableHeadCell } from '../TableHeadCell/TableHeadCell';
+import { TableDataCell } from '../TableDataCell/TableDataCell';
+import Window from '../Window/Window';
+import WindowHeader from '../WindowHeader/WindowHeader';
+import WindowContent from '../WindowContent/WindowContent';
 
 # Table
 
 ## Usage
 
 <Playground>
-    <Window style={{ width: 320 }}>
+  <Window style={{ width: 320 }}>
     <WindowHeader>Pokedex.exe</WindowHeader>
     <WindowContent>
       <Table>

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

@@ -1,15 +1,13 @@
-import React from 'react';
-
 import { renderWithTheme } from '../../test/utils';
 
-import Table from './Table';
+import { Table } from './Table';
 
 describe('<Table />', () => {
   it('renders Table', () => {
     const { container } = renderWithTheme(<Table />);
-    const list = container.firstChild;
+    const table = container.firstElementChild;
 
-    expect(list).toBeInTheDocument();
+    expect(table).toBeInTheDocument();
   });
   it('renders table element', () => {
     const { getByRole } = renderWithTheme(<Table />);

src/Table/Table.stories.js renamed to src/Table/Table.stories.tsx

@@ -1,17 +1,16 @@
-import React from 'react';
-import styled from 'styled-components';
-
+import { ComponentMeta } from '@storybook/react';
 import {
   Table,
   TableBody,
+  TableDataCell,
   TableHead,
-  TableRow,
   TableHeadCell,
-  TableDataCell,
+  TableRow,
   Window,
-  WindowHeader,
-  WindowContent
+  WindowContent,
+  WindowHeader
 } from 'react95';
+import styled from 'styled-components';
 
 const Wrapper = styled.div`
   padding: 5rem;
@@ -30,7 +29,7 @@ export default {
     TableDataCell
   },
   decorators: [story => <Wrapper>{story()}</Wrapper>]
-};
+} as ComponentMeta<typeof Table>;
 
 export function Default() {
   return (
@@ -39,7 +38,7 @@ export function Default() {
       <WindowContent>
         <Table>
           <TableHead>
-            <TableRow head>
+            <TableRow>
               <TableHeadCell>Type</TableHeadCell>
               <TableHeadCell>Name</TableHeadCell>
               <TableHeadCell disabled>Level</TableHeadCell>

src/Table/Table.js renamed to src/Table/Table.tsx

@@ -1,8 +1,12 @@
-import React from 'react';
-import propTypes from 'prop-types';
-
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { StyledCutout } from '../Cutout/Cutout';
+import { CommonStyledProps } from '../types';
+
+type TableProps = {
+  children?: React.ReactNode;
+} & React.TableHTMLAttributes<HTMLTableElement> &
+  CommonStyledProps;
 
 const StyledTable = styled.table`
   display: table;
@@ -18,9 +22,10 @@ const Wrapper = styled(StyledCutout)`
   }
 `;
 
-const Table = React.forwardRef(function Table(props, ref) {
-  const { children, ...otherProps } = props;
-
+const Table = forwardRef<HTMLTableElement, TableProps>(function Table(
+  { children, ...otherProps },
+  ref
+) {
   return (
     <Wrapper>
       <StyledTable ref={ref} {...otherProps}>
@@ -30,12 +35,4 @@ const Table = React.forwardRef(function Table(props, ref) {
   );
 });
 
-Table.defaultProps = {
-  children: null
-};
-
-Table.propTypes = {
-  children: propTypes.node
-};
-
-export default Table;
+export { Table, TableProps };

src/TableBody/TableBody.js

@@ -2,13 +2,13 @@ import React from 'react';
 
 import { renderWithTheme } from '../../test/utils';
 
-import TableBody from './TableBody';
+import { TableBody } from './TableBody';
 
 describe('<TableBody />', () => {
-  function mountInTable(node) {
+  function mountInTable(node: React.ReactNode) {
     const { container, getByTestId } = renderWithTheme(<table>{node}</table>);
     return {
-      tbody: container.querySelector('table').firstChild,
+      tbody: container.querySelector('table')?.firstElementChild,
       getByTestId
     };
   }
@@ -17,7 +17,7 @@ describe('<TableBody />', () => {
     const { tbody } = mountInTable(<TableBody />);
 
     expect(tbody).toBeInTheDocument();
-    expect(tbody.tagName).toBe('TBODY');
+    expect(tbody?.tagName).toBe('TBODY');
   });
 
   it('renders children', () => {

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

@@ -0,0 +1,28 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { insetShadow } from '../common';
+import { CommonStyledProps } from '../types';
+
+type TableBodyProps = {
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLTableSectionElement> &
+  CommonStyledProps;
+
+const StyledTableBody = styled.tbody`
+  background: ${({ theme }) => theme.canvas};
+  display: table-row-group;
+  box-shadow: ${insetShadow};
+  overflow-y: auto;
+`;
+
+const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  function TableBody({ children, ...otherProps }, ref) {
+    return (
+      <StyledTableBody ref={ref} {...otherProps}>
+        {children}
+      </StyledTableBody>
+    );
+  }
+);
+
+export { TableBody, TableBodyProps };

src/TableBody/TableBody.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 import { renderWithTheme } from '../../test/utils';
 
-import TableDataCell from './TableDataCell';
+import { TableDataCell } from './TableDataCell';
 
 describe('<TableDataCell />', () => {
-  function mountInTable(node) {
+  function mountInTable(node: React.ReactNode) {
     const { container, getByText } = renderWithTheme(
       <table>
         <tbody>
@@ -14,14 +14,14 @@ describe('<TableDataCell />', () => {
       </table>
     );
     return {
-      td: container.querySelector('tr').firstChild,
+      td: container.querySelector('tr')?.firstElementChild,
       getByText
     };
   }
 
   it('renders TableDataCell', () => {
     const { td } = mountInTable(<TableDataCell />);
-    expect(td.tagName).toBe('TD');
+    expect(td?.tagName).toBe('TD');
   });
 
   it('renders children', () => {

src/TableDataCell/TableDataCell.js

@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { CommonStyledProps } from '../types';
+
+type TableDataCellProps = {
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLTableCellElement> &
+  CommonStyledProps;
+
+const StyledTd = styled.td`
+  padding: 0 8px;
+`;
+
+const TableDataCell = forwardRef<HTMLTableCellElement, TableDataCellProps>(
+  function TableDataCell({ children, ...otherProps }, ref) {
+    return (
+      <StyledTd ref={ref} {...otherProps}>
+        {children}
+      </StyledTd>
+    );
+  }
+);
+
+export { TableDataCell, TableDataCellProps };

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

@@ -2,13 +2,13 @@ import React from 'react';
 
 import { renderWithTheme } from '../../test/utils';
 
-import TableHead from './TableHead';
+import { TableHead } from './TableHead';
 
 describe('<TableHead />', () => {
-  function mountInTable(node) {
+  function mountInTable(node: React.ReactNode) {
     const { container, getByTestId } = renderWithTheme(<table>{node}</table>);
     return {
-      tbody: container.querySelector('table').firstChild,
+      tbody: container.querySelector('table')?.firstElementChild,
       getByTestId
     };
   }
@@ -17,7 +17,7 @@ describe('<TableHead />', () => {
     const { tbody } = mountInTable(<TableHead />);
 
     expect(tbody).toBeInTheDocument();
-    expect(tbody.tagName).toBe('THEAD');
+    expect(tbody?.tagName).toBe('THEAD');
   });
 
   it('renders children', () => {

src/TableDataCell/TableDataCell.tsx

@@ -0,0 +1,23 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { CommonStyledProps } from '../types';
+
+type TableHeadProps = {
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLTableSectionElement> &
+  CommonStyledProps;
+
+const StyledTableHead = styled.thead`
+  display: table-header-group;
+`;
+const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(
+  function TableHead({ children, ...otherProps }, ref) {
+    return (
+      <StyledTableHead ref={ref} {...otherProps}>
+        {children}
+      </StyledTableHead>
+    );
+  }
+);
+
+export { TableHead, TableHeadProps };