feat: update default table style

apps/mibao-ui-docs/src/app/pages/table.stories.tsx

@@ -25,11 +25,7 @@ export default {
       control: { type: 'select' }
     },
     variant: {
-      options: ['unstyled', 'simple', 'striped'],
-      control: { type: 'select' }
-    },
-    theadVariant: {
-      options: ['filled', 'unstyled'],
+      options: ['unstyled', 'simple', 'striped', 'filled'],
       control: { type: 'select' }
     }
   }
@@ -39,14 +35,13 @@ const args = {
   size: 'md',
   isNumeric: false,
   placement: 'bottom' as 'top' | 'bottom',
-  variant: 'simple',
-  theadVariant: 'filled' as 'filled' | 'unstyled'
+  variant: 'simple'
 }
 
 const Template: Story<typeof args> = (args) => <MibaoProvider>
   <MibaoTable size={args.size} variant={args.variant} colorScheme="primary">
     <TableCaption placement={args.placement}>Imperial to metric conversion factors</TableCaption>
-    <Thead variant={args.theadVariant}>
+    <Thead>
       <Tr>
         <Th>Type</Th>
         <Th>Order</Th>

libs/mibao-ui/src/lib/table/table.tsx

@@ -1,59 +1,82 @@
 import './table.module.scss'
 
 import {
-  Table,
-  Thead as RowThead,
+  Table as RawTable,
+  Thead,
   Tbody,
   Tfoot,
   Tr,
-  Th as RowTh,
+  Th,
   Td,
-  TableCaption as RowTableCaption,
+  TableCaption,
   TableHeadProps,
   TableBodyProps,
-  TableProps,
+  TableProps as RawTableProps,
   TableRowProps,
   TableColumnHeaderProps,
   TableCellProps,
   TableCaptionProps
 } from '@chakra-ui/react'
 import React from 'react'
+import styled from '@emotion/styled'
 
 export {
-  Table,
+  Thead,
   Tbody,
   Tfoot,
   Tr,
+  Th,
   Td,
+  TableCaption,
   TableHeadProps,
   TableBodyProps,
-  TableProps,
   TableRowProps,
   TableColumnHeaderProps,
   TableCellProps,
   TableCaptionProps
 }
 
-export const Thead: React.FC<TableHeadProps & { variant: 'filled' | 'unstyled' }> = (props) => {
-  const variant = props.variant ?? 'unstyled'
-  return <RowThead
-    bg={variant === 'filled' ? 'var(--chakra-colors-primary-100)' : undefined}
-    {...props}
-  >{props.children}</RowThead>
+export interface TableProps extends RawTableProps {
+  variant: RawTableProps['variant'] | 'filled'
 }
 
-export const Th: React.FC<TableColumnHeaderProps> = (props) => {
-  return (
-    <RowTh
-      textTransform="none"
-    >{props.children}</RowTh>
-  )
+const TableStyled = styled(RawTable)`
+  ${({ _variant }: TableProps & { _variant?: TableProps['variant'] }) => _variant === 'filled'
+    ? `
+thead, tfoot {
+  th {
+    background-color: var(--chakra-colors-primary-100);
+  }
+}
+thead {
+  th:first-child {
+    border-top-left-radius: 6px;
+  }
+  th:last-child {
+    border-top-right-radius: 6px;
+  }
 }
+tfoot {
+  th:first-child {
+    border-bottom-left-radius: 6px;
+  }
+  th:last-child {
+    border-bottom-right-radius: 6px;
+  }
+}
+`
+    : undefined
+  }
+`
 
-export const TableCaption: React.FC<TableCaptionProps> = (props) => {
-  return (
-    <RowTableCaption
-      textTransform="none"
-    >{props.children}</RowTableCaption>
-  )
+export const Table: React.FC<TableProps> = ({
+  children,
+  variant = 'simple',
+  ...props
+}) => {
+  return <TableStyled
+    variant={variant === 'filled' ? 'simple' : variant}
+    _variant={variant}
+    {...props}
+    >{children}</TableStyled>
 }

libs/mibao-ui/src/theme.tsx

@@ -41,6 +41,32 @@ export const mibaoTheme = extendTheme({
   fallbacks: {
     avatar: FALL_BACK_SRC,
     nft: FALL_BACK_SRC
+  },
+  components: {
+    Table: {
+      baseStyle: {
+        th: {
+          textTransform: 'none'
+        }
+      },
+      sizes: {
+        sm: {
+          td: {
+            fontSize: '12px'
+          }
+        },
+        md: {
+          td: {
+            fontSize: '14px'
+          }
+        },
+        lg: {
+          td: {
+            fontSize: '14px'
+          }
+        }
+      }
+    }
   }
 })