feat: add ui component Table & add initial workspace style

packages/app/src/ui/table/index.ts

@@ -0,0 +1,12 @@
+// 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 './table';
+export * from './table-body';
+export * from './table-cell';
+export * from './table-head';
+export * from './table-row';

packages/app/src/ui/table/interface.ts

@@ -0,0 +1,8 @@
+import { CSSProperties } from 'react';
+
+export type TableCellProps = {
+  align?: 'left' | 'right' | 'center';
+  ellipsis?: boolean;
+  proportion?: number;
+  style?: CSSProperties;
+};

packages/app/src/ui/table/styles.ts

@@ -0,0 +1,66 @@
+import { styled, textEllipsis } from '@/styles';
+import { TableCellProps } from './interface';
+
+export const StyledTable = styled.table<{ tableLayout: 'auto' | 'fixed' }>(
+  ({ theme, tableLayout }) => {
+    return {
+      fontSize: theme.font.base,
+      color: theme.colors.textColor,
+      tableLayout,
+      width: '100%',
+      borderCollapse: 'separate',
+      borderSpacing: '0 25px',
+    };
+  }
+);
+
+export const StyledTableBody = styled.tbody(({ theme }) => {
+  return {
+    fontWeight: 400,
+  };
+});
+
+export const StyledTableCell = styled.td<
+  Pick<TableCellProps, 'ellipsis' | 'align' | 'proportion'>
+>(({ theme, align = 'left', ellipsis = false, proportion }) => {
+  const width = proportion ? `${proportion * 100}%` : 'auto';
+  return {
+    width,
+    height: '54px',
+    lineHeight: '54px',
+    padding: '0 30px',
+    boxSizing: 'border-box',
+    textAlign: align,
+    ...(ellipsis ? textEllipsis(1) : {}),
+    overflowWrap: 'break-word',
+  };
+});
+
+export const StyledTableHead = styled.thead(({ theme }) => {
+  return {
+    fontWeight: 500,
+  };
+});
+
+export const StyledTableRow = styled.tr(({ theme }) => {
+  return {
+    marginBottom: '25px',
+    td: {
+      transition: 'background .15s',
+    },
+    'td:first-child': {
+      borderTopLeftRadius: '10px',
+      borderBottomLeftRadius: '10px',
+    },
+    'td:last-child': {
+      borderTopRightRadius: '10px',
+      borderBottomRightRadius: '10px',
+    },
+
+    ':hover': {
+      td: {
+        background: theme.colors.hoverBackground,
+      },
+    },
+  };
+});

packages/app/src/ui/table/table-body.tsx

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { StyledTableBody } from '@/ui/table/styles';
+
+export const TableBody = ({ children }: PropsWithChildren<{}>) => {
+  return <StyledTableBody>{children}</StyledTableBody>;
+};
+
+export default TableBody;

packages/app/src/ui/table/table-cell.tsx

@@ -0,0 +1,12 @@
+import { PropsWithChildren, useLayoutEffect } from 'react';
+import { TableCellProps } from './interface';
+import { StyledTableCell } from './styles';
+
+export const TableCell = ({
+  children,
+  ...props
+}: PropsWithChildren<TableCellProps>) => {
+  return <StyledTableCell {...props}>{children}</StyledTableCell>;
+};
+
+export default TableCell;

packages/app/src/ui/table/table-head.tsx

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { StyledTableHead } from './styles';
+
+export const TableHead = ({ children }: PropsWithChildren<{}>) => {
+  return <StyledTableHead>{children}</StyledTableHead>;
+};
+
+export default TableHead;

packages/app/src/ui/table/table-row.tsx

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { StyledTableRow } from './styles';
+
+export const TableRow = ({ children }: PropsWithChildren<{}>) => {
+  return <StyledTableRow>{children}</StyledTableRow>;
+};
+
+export default TableRow;

packages/app/src/ui/table/table.tsx

@@ -0,0 +1,23 @@
+import { PropsWithChildren, Children, ReactNode } from 'react';
+import { StyledTable } from './styles';
+
+const childrenHasEllipsis = (children: ReactNode | ReactNode[]): boolean => {
+  return Children.toArray(children).some(child => {
+    if (typeof child === 'object' && 'props' in child) {
+      if (!child.props.ellipsis && child.props.children) {
+        return childrenHasEllipsis(child.props.children);
+      }
+      return child.props.ellipsis ?? false;
+    }
+
+    return false;
+  });
+};
+
+export const Table = ({ children }: PropsWithChildren<{}>) => {
+  const tableLayout = childrenHasEllipsis(children) ? 'fixed' : 'auto';
+
+  return <StyledTable tableLayout={tableLayout}>{children}</StyledTable>;
+};
+
+export default Table;