feat: Cell

Author: shiftpsh

example/src/stories/Table/Cell.stories.tsx

@@ -0,0 +1,28 @@
+import { Cell } from '@solved-ac/ui-react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import React from 'react'
+
+export default {
+  title: 'Components/Table/Cell',
+  component: Cell,
+  argTypes: {
+    children: {
+      control: 'none',
+      description: 'The children to display inside the cell',
+    },
+    padding: {
+      control: {
+        type: 'select',
+        options: ['none', 'normal', 'wide'],
+      },
+      description: 'The padding of the cell',
+    },
+  },
+} as ComponentMeta<typeof Cell>
+
+const Template: ComponentStory<typeof Cell> = (args) => <Cell {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  children: <>Cell</>,
+}

src/components/Table/Cell.tsx

@@ -1,6 +1,8 @@
-import React, { ElementType } from 'react'
+import React, { ElementType, useContext } from 'react'
 import styled from 'styled-components'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+import { TableContext } from './TableContext'
+import { TableRowGroupContext } from './TableRowGroupContext'
 
 const paddingMap = {
   none: 'padding: 0;',
@@ -24,7 +26,13 @@ export interface CellProps {
 
 export const Cell: PC<'td', CellProps> = React.forwardRef(
   <T extends ElementType>(props: PP<T, CellProps>, ref?: PR<T>) => {
-    const { padding = 'normal', as = 'td', ...rest } = props
+    const tableContext = useContext(TableContext)
+    const tableRowGroupContext = useContext(TableRowGroupContext)
+    const {
+      padding = tableContext.padding,
+      as = tableRowGroupContext.header ? 'th' : 'td',
+      ...rest
+    } = props
 
     return <CellContainer padding={padding} ref={ref} as={as} {...rest} />
   }

src/components/Table/Row.tsx

@@ -0,0 +1,36 @@
+import React, { ElementType, useContext } from 'react'
+import styled from 'styled-components'
+import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+import { TableContext } from './TableContext'
+
+interface RowContainerProps {
+  header: boolean
+}
+
+const RowContainer = styled.tr<RowContainerProps>`
+  display: table-row;
+  ${({ header }) => header && 'text-align: center; font-weight: 700;'}
+`
+
+export interface RowProps {
+  header?: boolean
+  padding?: 'none' | 'normal' | 'wide'
+}
+
+export const Row: PC<'tr', RowProps> = React.forwardRef(
+  <T extends ElementType>(props: PP<T, RowProps>, ref?: PR<T>) => {
+    const tableContext = useContext(TableContext)
+    const {
+      header = false,
+      padding = tableContext.padding,
+      as = 'tr',
+      ...rest
+    } = props
+
+    return (
+      <TableContext.Provider value={{ padding }}>
+        <RowContainer header={header} ref={ref} as={as} {...rest} />
+      </TableContext.Provider>
+    )
+  }
+)

src/components/Table/Table.tsx

@@ -0,0 +1,38 @@
+import React, { ElementType } from 'react'
+import styled from 'styled-components'
+import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+import { TableContext } from './TableContext'
+import { TableRowGroupContext } from './TableRowGroupContext'
+
+interface TableContainerProps {
+  fullWidth: boolean
+}
+
+const TableContainer = styled.table<TableContainerProps>`
+  display: table;
+  ${({ fullWidth }) => fullWidth && 'width: 100%;'}
+`
+
+export interface TableProps {
+  fullWidth?: boolean
+  padding?: 'none' | 'normal' | 'wide'
+}
+
+export const Table: PC<'table', TableProps> = React.forwardRef(
+  <T extends ElementType>(props: PP<T, TableProps>, ref?: PR<T>) => {
+    const {
+      fullWidth = false,
+      padding = 'normal',
+      as = 'table',
+      ...rest
+    } = props
+
+    return (
+      <TableContext.Provider value={{ padding }}>
+        <TableRowGroupContext.Provider value={{ header: false }}>
+          <TableContainer fullWidth={fullWidth} ref={ref} as={as} {...rest} />
+        </TableRowGroupContext.Provider>
+      </TableContext.Provider>
+    )
+  }
+)

src/components/Table/TableBody.tsx

@@ -0,0 +1,15 @@
+import React, { ElementType } from 'react'
+import styled from 'styled-components'
+import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+
+const TableBodyContainer = styled.tbody`
+  display: table-row-group;
+`
+
+export const TableBody: PC<'tbody'> = React.forwardRef(
+  <T extends ElementType>(props: PP<T>, ref?: PR<T>) => {
+    const { as = 'tbody', ...rest } = props
+
+    return <TableBodyContainer ref={ref} as={as} {...rest} />
+  }
+)

src/components/Table/TableContext.ts

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export interface TableContextProps {
+  padding: 'none' | 'normal' | 'wide'
+}
+
+export const TableContext = React.createContext<TableContextProps>({
+  padding: 'normal',
+})

src/components/Table/TableFoot.tsx

@@ -0,0 +1,17 @@
+import React, { ElementType } from 'react'
+import styled from 'styled-components'
+import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+
+const TableFootContainer = styled.tfoot`
+  display: table-footer-group;
+  text-align: center;
+  font-weight: 700;
+`
+
+export const TableFoot: PC<'tfoot'> = React.forwardRef(
+  <T extends ElementType>(props: PP<T>, ref?: PR<T>) => {
+    const { as = 'tfoot', ...rest } = props
+
+    return <TableFootContainer ref={ref} as={as} {...rest} />
+  }
+)

src/components/Table/TableHead.tsx

@@ -0,0 +1,22 @@
+import React, { ElementType } from 'react'
+import styled from 'styled-components'
+import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+import { TableRowGroupContext } from './TableRowGroupContext'
+
+const TableHeadContainer = styled.thead`
+  display: table-header-group;
+  text-align: center;
+  font-weight: 700;
+`
+
+export const TableHead: PC<'thead'> = React.forwardRef(
+  <T extends ElementType>(props: PP<T>, ref?: PR<T>) => {
+    const { as = 'thead', ...rest } = props
+
+    return (
+      <TableRowGroupContext.Provider value={{ header: true }}>
+        <TableHeadContainer ref={ref} as={as} {...rest} />
+      </TableRowGroupContext.Provider>
+    )
+  }
+)

src/components/Table/TableRowGroupContext.ts

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export interface TableRowGroupContextProps {
+  header: boolean
+}
+
+export const TableRowGroupContext =
+  React.createContext<TableRowGroupContextProps>({
+    header: false,
+  })

src/components/Table/index.ts

@@ -1,2 +1,7 @@
-export * from './Cell';
+export * from './Cell'
+export * from './Row'
+export * from './Table'
+export * from './TableBody'
+export * from './TableFoot'
+export * from './TableHead'