refactor: move component into a single package (#898)

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

@@ -0,0 +1,30 @@
+import { PropsWithChildren, Children, ReactNode, HTMLAttributes } 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,
+  ...props
+}: PropsWithChildren<HTMLAttributes<HTMLTableElement>>) => {
+  const tableLayout = childrenHasEllipsis(children) ? 'fixed' : 'auto';
+
+  return (
+    <StyledTable tableLayout={tableLayout} {...props}>
+      {children}
+    </StyledTable>
+  );
+};
+
+export default Table;

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

@@ -0,0 +1,11 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import { StyledTableBody } from './styles';
+
+export const TableBody = ({
+  children,
+  ...props
+}: PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>) => {
+  return <StyledTableBody {...props}>{children}</StyledTableBody>;
+};
+
+export default TableBody;

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

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

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

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

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

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

packages/component/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 './TableRow';
+export * from './TableHead';
+export * from './TableCell';
+export * from './TableBody';

packages/component/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/component/src/ui/table/styles.ts

@@ -0,0 +1,73 @@
+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',
+    };
+  }
+);
+
+export const StyledTableBody = styled.tbody(() => {
+  return {
+    fontWeight: 400,
+  };
+});
+
+export const StyledTableCell = styled.td<
+  Pick<TableCellProps, 'ellipsis' | 'align' | 'proportion'>
+>(({ align = 'left', ellipsis = false, proportion }) => {
+  const width = proportion ? `${proportion * 100}%` : 'auto';
+  return {
+    width,
+    height: '52px',
+    lineHeight: '52px',
+    padding: '0 30px',
+    boxSizing: 'border-box',
+    textAlign: align,
+    verticalAlign: 'middle',
+    ...(ellipsis ? textEllipsis(1) : {}),
+    overflowWrap: 'break-word',
+  };
+});
+
+export const StyledTableHead = styled.thead(() => {
+  return {
+    fontWeight: 500,
+    tr: {
+      ':hover': {
+        td: {
+          background: 'unset',
+        },
+      },
+    },
+  };
+});
+
+export const StyledTableRow = styled.tr(({ theme }) => {
+  return {
+    td: {
+      transition: 'background .15s',
+    },
+    'td:first-of-type': {
+      borderTopLeftRadius: '10px',
+      borderBottomLeftRadius: '10px',
+    },
+    'td:last-of-type': {
+      borderTopRightRadius: '10px',
+      borderBottomRightRadius: '10px',
+    },
+
+    ':hover': {
+      td: {
+        background: theme.colors.hoverBackground,
+      },
+    },
+  };
+});