feat: Table stories

Author: shiftpsh

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

@@ -13,7 +13,7 @@ export default {
     padding: {
       control: {
         type: 'select',
-        options: ['none', 'normal', 'wide'],
+        options: ['none', 'dense', 'normal', 'wide'],
       },
       description: 'The padding of the cell',
     },

example/src/stories/Table/Row.stories.tsx

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

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

@@ -0,0 +1,84 @@
+import { Cell, Row, Table, TableBody, TableHead } from '@solved-ac/ui-react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import React from 'react'
+
+export default {
+  title: 'Components/Table/Table',
+  component: Table,
+  argTypes: {
+    children: {
+      control: 'none',
+      description: 'The content to display inside the table',
+    },
+    padding: {
+      control: {
+        type: 'select',
+        options: ['none', 'dense', 'normal', 'wide'],
+      },
+      description: 'The padding of the cell',
+    },
+    fullWidth: {
+      control: {
+        type: 'boolean',
+      },
+      description:
+        'Whether the table should take up the full width of the container',
+    },
+  },
+} as ComponentMeta<typeof Table>
+
+const Template: ComponentStory<typeof Table> = (args) => <Table {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  children: (
+    <>
+      <TableHead>
+        <Row>
+          <Cell>#</Cell>
+          <Cell>Title</Cell>
+          <Cell>Solved</Cell>
+          <Cell>Tries</Cell>
+        </Row>
+      </TableHead>
+      <TableBody>
+        <Row>
+          <Cell>1000</Cell>
+          <Cell>A+B</Cell>
+          <Cell numeric>179,871</Cell>
+          <Cell numeric>2.37</Cell>
+        </Row>
+        <Row>
+          <Cell>1001</Cell>
+          <Cell>A-B</Cell>
+          <Cell numeric>150,867</Cell>
+          <Cell numeric>1.40</Cell>
+        </Row>
+        <Row>
+          <Cell>1002</Cell>
+          <Cell>Turrets</Cell>
+          <Cell numeric>26,390</Cell>
+          <Cell numeric>4.59</Cell>
+        </Row>
+        <Row>
+          <Cell>1003</Cell>
+          <Cell>Fibonacci Function</Cell>
+          <Cell numeric>35,585</Cell>
+          <Cell numeric>3.18</Cell>
+        </Row>
+        <Row>
+          <Cell>1004</Cell>
+          <Cell>Le Petit Prince</Cell>
+          <Cell numeric>8,769</Cell>
+          <Cell numeric>2.34</Cell>
+        </Row>
+        <Row>
+          <Cell>1005</Cell>
+          <Cell>ACM Craft</Cell>
+          <Cell numeric>8,364</Cell>
+          <Cell numeric>3.92</Cell>
+        </Row>
+      </TableBody>
+    </>
+  ),
+}

src/components/Table/Cell.tsx

@@ -6,22 +6,27 @@ import { TableRowGroupContext } from './TableRowGroupContext'
 
 const paddingMap = {
   none: 'padding: 0;',
+  dense: 'padding: 8px;',
   normal: 'padding: 16px;',
   wide: 'padding: 32px;',
 }
 
 interface CellContainerProps {
-  padding: 'none' | 'normal' | 'wide'
+  padding: 'none' | 'dense' | 'normal' | 'wide'
+  numeric: boolean
 }
 
 const CellContainer = styled.td<CellContainerProps>`
   display: table-cell;
   border-bottom: ${({ theme }) => theme.styles.border()};
   ${({ padding }) => paddingMap[padding]}
+  ${({ numeric }) =>
+    numeric && "text-align: right; font-feature-settings: 'tnum';"}
 `
 
 export interface CellProps {
-  padding?: 'none' | 'normal' | 'wide'
+  padding?: 'none' | 'dense' | 'normal' | 'wide'
+  numeric?: boolean
 }
 
 export const Cell: PC<'td', CellProps> = React.forwardRef(
@@ -31,9 +36,18 @@ export const Cell: PC<'td', CellProps> = React.forwardRef(
     const {
       padding = tableContext.padding,
       as = tableRowGroupContext.header ? 'th' : 'td',
+      numeric = false,
       ...rest
     } = props
 
-    return <CellContainer padding={padding} ref={ref} as={as} {...rest} />
+    return (
+      <CellContainer
+        padding={padding}
+        numeric={numeric}
+        ref={ref}
+        as={as}
+        {...rest}
+      />
+    )
   }
 )

src/components/Table/Row.tsx

@@ -14,7 +14,7 @@ const RowContainer = styled.tr<RowContainerProps>`
 
 export interface RowProps {
   header?: boolean
-  padding?: 'none' | 'normal' | 'wide'
+  padding?: 'none' | 'dense' | 'normal' | 'wide'
 }
 
 export const Row: PC<'tr', RowProps> = React.forwardRef(

src/components/Table/Table.tsx

@@ -15,7 +15,7 @@ const TableContainer = styled.table<TableContainerProps>`
 
 export interface TableProps {
   fullWidth?: boolean
-  padding?: 'none' | 'normal' | 'wide'
+  padding?: 'none' | 'dense' | 'normal' | 'wide'
 }
 
 export const Table: PC<'table', TableProps> = React.forwardRef(

src/components/Table/TableContext.ts

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