refactor(infra): directory structure (#4615)

packages/frontend/component/src/ui/table/index.ts

@@ -0,0 +1,13 @@
+// import Table from '@mui/material/Table';
+// import TableBody from '@mui/material/TableBody';
+// import TableCell from '@mui/material/TableCell';
+// import TableHead from '@mui/material/TableHead';
+// import TableRow from '@mui/material/TableRow';
+//
+
+export * from './interface';
+export * from './table';
+export * from './table-body';
+export * from './table-cell';
+export * from './table-head';
+export * from './table-row';

packages/frontend/component/src/ui/table/interface.ts

@@ -0,0 +1,10 @@
+import type { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react';
+
+export type TableCellProps = {
+  align?: 'left' | 'right' | 'center';
+  ellipsis?: boolean;
+  proportion?: number;
+  active?: boolean;
+  style?: CSSProperties;
+} & PropsWithChildren &
+  HTMLAttributes<HTMLTableCellElement>;

packages/frontend/component/src/ui/table/styles.ts

@@ -0,0 +1,112 @@
+import { styled, textEllipsis } from '../../styles';
+import type { TableCellProps } from './interface';
+
+export const StyledTable = styled('table')<{ showBorder?: boolean }>(({
+  showBorder,
+}) => {
+  return {
+    fontSize: 'var(--affine-font-base)',
+    color: 'var(--affine-text-primary-color)',
+    tableLayout: 'fixed',
+    width: '100%',
+    borderCollapse: 'collapse',
+    borderSpacing: '0',
+
+    ...(typeof showBorder === 'boolean'
+      ? {
+          thead: {
+            '::after': {
+              display: 'block',
+              position: 'absolute',
+              content: '""',
+              width: '100%',
+              height: '1px',
+              left: 0,
+              background: 'var(--affine-border-color)',
+              transition: 'opacity .15s',
+              opacity: showBorder ? 1 : 0,
+            },
+          },
+        }
+      : {}),
+  };
+});
+
+export const StyledTableBody = styled('tbody')(() => {
+  return {
+    fontWeight: 400,
+  };
+});
+
+export const StyledTableCell = styled('td')<
+  Pick<
+    TableCellProps,
+    'ellipsis' | 'align' | 'proportion' | 'active' | 'onClick'
+  >
+>(({
+  align = 'left',
+  ellipsis = false,
+  proportion,
+  active = false,
+  onClick,
+}) => {
+  const width = proportion ? `${proportion * 100}%` : 'auto';
+  return {
+    width,
+    height: '52px',
+    paddingLeft: '16px',
+    boxSizing: 'border-box',
+    textAlign: align,
+    verticalAlign: 'middle',
+    whiteSpace: 'nowrap',
+    userSelect: 'none',
+    fontSize: 'var(--affine-font-sm)',
+    ...(active ? { color: 'var(--affine-text-primary-color)' } : {}),
+    ...(ellipsis ? textEllipsis(1) : {}),
+    ...(onClick ? { cursor: 'pointer' } : {}),
+  };
+});
+
+export const StyledTableHead = styled('thead')(() => {
+  return {
+    fontWeight: 500,
+    color: 'var(--affine-text-secondary-color)',
+  };
+});
+
+export const StyledTHeadRow = styled('tr')(() => {
+  return {
+    td: {
+      whiteSpace: 'nowrap',
+      // How to set tbody height with overflow scroll
+      // see https://stackoverflow.com/questions/23989463/how-to-set-tbody-height-with-overflow-scroll
+      position: 'sticky',
+      top: 0,
+      background: 'var(--affine-background-primary-color)',
+    },
+  };
+});
+
+export const StyledTBodyRow = styled('tr')(() => {
+  return {
+    td: {
+      transition: 'background .15s',
+    },
+    // Add border radius to table row
+    // see https://stackoverflow.com/questions/4094126/how-to-add-border-radius-on-table-row
+    'td:first-of-type': {
+      borderTopLeftRadius: '10px',
+      borderBottomLeftRadius: '10px',
+    },
+    'td:last-of-type': {
+      borderTopRightRadius: '10px',
+      borderBottomRightRadius: '10px',
+    },
+
+    ':hover': {
+      td: {
+        background: 'var(--affine-hover-color)',
+      },
+    },
+  };
+});

packages/frontend/component/src/ui/table/table-body.tsx

@@ -0,0 +1,4 @@
+import { StyledTableBody } from './styles';
+export const TableBody = StyledTableBody;
+
+export default TableBody;

packages/frontend/component/src/ui/table/table-cell.tsx

@@ -0,0 +1,4 @@
+import { StyledTableCell } from './styles';
+export const TableCell = StyledTableCell;
+
+export default TableCell;

packages/frontend/component/src/ui/table/table-head.tsx

@@ -0,0 +1,5 @@
+import { StyledTableHead } from './styles';
+
+export const TableHead = StyledTableHead;
+
+export default TableHead;

packages/frontend/component/src/ui/table/table-row.tsx

@@ -0,0 +1,5 @@
+import { StyledTBodyRow, StyledTHeadRow } from './styles';
+export const TableHeadRow = StyledTHeadRow;
+export const TableBodyRow = StyledTBodyRow;
+
+export default TableHeadRow;

packages/frontend/component/src/ui/table/table.tsx

@@ -0,0 +1,5 @@
+import { StyledTable } from './styles';
+
+export const Table = StyledTable;
+
+export default Table;