@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Table/README.md

@@ -0,0 +1,162 @@
+# Table UI
+
+## Contents List
+
+0. [Information](#Information)
+1. [Quick Start](#QuickStart)
+2. [Reference](#Reference)
+3. [Example](#Example)
+
+## Information
+
+- 테이블 UI는 `@tanstack/react-table` 라이브러리를 사용하여 구현합니다.
+- 테이블 컴포넌트는 기본스타일이 적용되어 있는 기본 HTML Table 태그들로 구성되어 있습니다.
+- 테이블 컴포넌트는 Root, Header, Body, Row, Cell, HeaderCell 컴포넌트로 구성되어 있습니다.
+- 테이블 자산화는 컴포넌트로서의 기능은 기본 스타일만 적용되어 있는 것 외에는 없으며 `Column`과 `Row`의 구현방법을 예시로서 제시합니다.
+- 해당 자산화에서 사용된 `zustand` 라이브러리는 `@tanstack/react-table`에 종속되지 않습니다.
+
+## Quick Start
+
+```ts
+import { Table } from "@weing-dev/ui-kit-primitive";
+import {
+  useReactTable,
+  getCoreRowModel,
+  ColumnDef,
+} from "@tanstack/react-table";
+
+type Person = {
+  id: string;
+  name: string;
+};
+
+const components = () => {
+  const data = [
+    { id: "1", name: "John Doe" },
+    { id: "2", name: "Jane Smith" },
+    { id: "3", name: "Bob Johnson" },
+  ];
+
+  const columns: ColumnDef<Person>[] = [
+    {
+      header: "ID",
+      accessorKey: "id",
+    },
+    {
+      header: "Name",
+      accessorKey: "name",
+    },
+  ];
+
+  const table = useReactTable<Person>({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <Table.Root>
+      <Table.Header>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <Table.Row key={headerGroup.id}>
+            {headerGroup.headers.map((header) => (
+              <Table.HeaderCell key={header.id}>
+                {flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                )}
+              </Table.HeaderCell>
+            ))}
+          </Table.Row>
+        ))}
+      </Table.Header>
+      <Table.Body>
+        {table.getRowModel().rows.map((row) => (
+          <Table.Row key={row.id}>
+            {row.getVisibleCells().map((cell) => (
+              <Table.Cell key={cell.id}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </Table.Cell>
+            ))}
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table.Root>
+  );
+};
+```
+
+## Reference
+
+### Root
+
+| Prop                       |                 Type                 | Required | Default Value |
+| :------------------------- | :----------------------------------: | :------: | :-----------: |
+| [variant](#Root-variant)   |    [TableVariant](#TableVariant)     |    -     |   "default"   |
+| [children](#Root-children) |           React.ReactNode            |    -     |       -       |
+| [rest](#Root-rest)         | React.JSX.IntrinsicElements["table"] |    -     |       -       |
+
+#### Root-variant
+
+`Table`의 스타일을 변경하는 속성입니다. 기본값은 `default`입니다.
+
+변경 가능한 값은 아래와 같습니다.
+
+##### TableVariant
+
+```ts
+type TableVariant =
+  | "default" // 기본 스타일
+  | "bordered" // 테두리가 있는 스타일
+  | "striped" // 줄무늬 패턴
+  | "minimal" // 최소한의 스타일
+  | "compact"; // 좁은 패딩
+```
+
+#### Root-children
+
+`Table`의 자식 컴포넌트를 전달하기 위한 속성입니다.
+
+#### Root-rest
+
+`Table.Root`은 `HTML`의 `table`태그로 기본으로 구성되어 있어 `table`태그의 기본 속성들을 전달하기 위한 속성입니다.
+
+이곳에는 `className`, `style`, `ref` 등의 속성들을 전달 할 수 있습니다.
+
+### Header
+
+`Table.Header`는 `HTML`의 `thead`태그로 기본으로 구성되어 있어 `thead`태그의 기본 속성들을 전달할 수 있습니다.
+
+### Body
+
+`Table.Body`는 `HTML`의 `tbody`태그로 기본으로 구성되어 있어 `tbody`태그의 기본 속성들을 전달할 수 있습니다.
+
+### Row
+
+`Table.Row`는 `HTML`의 `tr`태그로 기본으로 구성되어 있어 `tr`태그의 기본 속성들을 전달할 수 있습니다.
+
+### Cell
+
+`Table.Cell`는 `HTML`의 `td`태그로 기본으로 구성되어 있어 `td`태그의 기본 속성들을 전달할 수 있습니다.
+
+`Cell`의 크기는 `size` 속성을 통해 전달하여 넓이를 조정합니다.
+
+### HeaderCell
+
+`Table.HeaderCell`는 `HTML`의 `th`태그로 기본으로 구성되어 있어 `th`태그의 기본 속성들을 전달할 수 있습니다.
+
+`HeaderCell`의 크기는 `size` 속성을 통해 전달하여 넓이를 조정합니다.
+
+## Example
+
+아래의 예제들은 `@tanstack/react-table` 의 공식 예제들을 참고하여 작성되었습니다.
+
+아래의 예제외에 다양한 기능은 `@tanstack/react-table` 의 [공식 문서](https://tanstack.com/table/latest/docs/introduction)를 참고해주세요.
+
+### Column
+
+프로젝트를 실행하고 해당 [Link](http://localhost:3000/users/table/column)에서 확인할 수 있습니다.
+
+### Row
+
+프로젝트를 실행하고 해당 [Link](http://localhost:3000/users/table/row)에서 확인할 수 있습니다.

package/src/components/Table/Table.context.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+type TableVariant =
+  | "default" // 기본 스타일
+  | "bordered" // 테두리가 있는 스타일
+  | "striped" // 줄무늬 패턴
+  | "compact"; // 좁은 패딩
+
+export interface TableContextType {
+  variant?: TableVariant;
+}
+
+const initialState: TableContextType = {
+  variant: "default",
+};
+
+export const TableContext = React.createContext<TableContextType>(initialState);
+
+export type TableProviderProps = React.PropsWithChildren<
+  TableContextType & {
+    className?: string;
+  }
+>;

package/src/components/Table/Table.hook.ts

@@ -0,0 +1,51 @@
+import React from "react";
+import { Table } from "@tanstack/react-table";
+
+export const useRowResize = <TData extends object>(table: Table<TData>) => {
+  const [columnsSize, setColumnsSize] = React.useState(
+    Array.from(
+      { length: table.getRowModel().rows.length + 1 },
+      () => table.options.defaultColumn?.size ?? 150
+    )
+  );
+
+  const [isResizing, setIsResizing] = React.useState(false);
+
+  const handleResize = (columnIndex: number) => {
+    const startSize = columnsSize[columnIndex];
+    let startX: number;
+
+    const onMouseMove = (e: MouseEvent) => {
+      if (!startX) {
+        startX = e.clientX;
+        return;
+      }
+
+      const currentX = e.clientX;
+      const diff = currentX - startX;
+      const newSize = Math.max(50, startSize + diff);
+
+      setColumnsSize((prev) => {
+        const newSizes = [...prev];
+        newSizes[columnIndex] = newSize;
+        return newSizes;
+      });
+    };
+
+    const onMouseUp = () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+      setIsResizing(false);
+    };
+
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    setIsResizing(true);
+  };
+
+  return {
+    columnsSize,
+    isResizing,
+    handleResize,
+  };
+};

package/src/components/Table/Table.module.scss

@@ -0,0 +1,83 @@
+@layer Table {
+  .Cell {
+    background-color: #fff;
+    padding: 12px;
+    border-bottom: 1px dashed var(--grey-20, rgba(145, 158, 171, 0.2));
+    color: var(--Text-Primary, #1c252e);
+    text-align: center;
+    @include bodyRegularSmall;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &.bordered {
+      border: 1px solid #ddd;
+    }
+
+    &.compact {
+      padding: 8px;
+    }
+  }
+
+  .HeaderCell {
+    color: var(--Text-Secondary, #637381);
+    text-align: center;
+    @include bodyBoldSmall;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 12px;
+    position: relative;
+    background-color: var(--grey-8, rgba(145, 158, 171, 0.08));
+
+    &.bordered {
+      border: 1px solid #ddd;
+    }
+
+    &.compact {
+      padding: 8px;
+    }
+  }
+
+  .Row {
+    &:hover {
+      .Cell:not(.isSelected) {
+        background-color: var(--grey-4, rgba(145, 158, 171, 0.04));
+      }
+    }
+
+    &.striped:nth-child(even) {
+      .Cell:not(.isSelected) {
+        background-color: var(--grey-4, rgba(145, 158, 171, 0.04));
+      }
+    }
+
+    .Cell.isSelected {
+      background-color: var(--primary-4, rgba(0, 167, 111, 0.04));
+    }
+
+    &:first-child {
+      .HeaderCell:not(.bordered) {
+        &:first-child {
+          border-top-left-radius: 8px;
+        }
+
+        &:last-child {
+          border-top-right-radius: 8px;
+        }
+      }
+    }
+  }
+
+  .Root {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+
+    & * {
+      box-sizing: border-box;
+    }
+  }
+}

package/src/components/Table/Table.tsx

@@ -0,0 +1,147 @@
+"use client";
+/* eslint-disable react-refresh/only-export-components */
+
+import React from "react";
+import cn from "classnames/bind";
+import styles from "./Table.module.scss";
+import { TableContext, TableProviderProps } from "./Table.context";
+import { useRowResize } from "./Table.hook";
+
+const cx = cn.bind(styles);
+
+type TableRowProps = React.PropsWithChildren<React.JSX.IntrinsicElements["tr"]>;
+
+const Row = (props: TableRowProps) => {
+  const { className, children, ref, ...rest } = props;
+  const { variant } = React.use(TableContext);
+
+  return (
+    <tr {...rest} className={cx("Row", variant, className)} ref={ref}>
+      {children}
+    </tr>
+  );
+};
+
+type TableCellProps = React.PropsWithChildren<
+  {
+    size?: number;
+    isSelected?: boolean;
+  } & React.JSX.IntrinsicElements["td"]
+>;
+
+const Cell = (props: TableCellProps) => {
+  const { className, children, size, ref, isSelected, ...rest } = props;
+  const { variant } = React.use(TableContext);
+
+  return (
+    <td
+      {...rest}
+      ref={ref}
+      className={cx("Cell", variant, className, {
+        isSelected,
+      })}
+      style={{
+        ...rest.style,
+        ...(size ? { width: size } : {}),
+      }}
+    >
+      {children}
+    </td>
+  );
+};
+
+type TableBodyProps = React.PropsWithChildren<
+  React.JSX.IntrinsicElements["tbody"]
+>;
+
+const Body = (props: TableBodyProps) => {
+  const { className, children, ref, ...rest } = props;
+
+  return (
+    <tbody {...rest} ref={ref} className={cx("Body", className)}>
+      {children}
+    </tbody>
+  );
+};
+
+type TableHeaderCellProps = React.PropsWithChildren<
+  {
+    size?: number;
+  } & React.JSX.IntrinsicElements["th"]
+>;
+
+const HeaderCell = (props: TableHeaderCellProps) => {
+  const { className, children, size, ref, ...rest } = props;
+  const { variant } = React.use(TableContext);
+
+  return (
+    <th
+      {...rest}
+      ref={ref}
+      className={cx("HeaderCell", variant, className)}
+      style={{
+        ...rest.style,
+        ...(size ? { width: size } : {}),
+      }}
+    >
+      {children}
+    </th>
+  );
+};
+
+type TableHeaderProps = React.PropsWithChildren<
+  React.JSX.IntrinsicElements["thead"]
+>;
+
+const Header = (props: TableHeaderProps) => {
+  const { className, children, ref, ...rest } = props;
+
+  return (
+    <thead {...rest} ref={ref} className={cx("Header", className)}>
+      {children}
+    </thead>
+  );
+};
+
+type TableRootProps = TableProviderProps & React.JSX.IntrinsicElements["table"];
+
+const Root = (props: TableRootProps) => {
+  const { children, className, variant = "default", ...rest } = props;
+
+  const contextValue = React.useMemo(
+    () => ({
+      variant,
+    }),
+    [variant]
+  );
+
+  return (
+    <TableContext value={contextValue}>
+      <table {...rest} className={cx("Root", className)}>
+        {children}
+      </table>
+    </TableContext>
+  );
+};
+
+interface ITable {
+  Root: typeof Root;
+  Header: typeof Header;
+  Body: typeof Body;
+  Row: typeof Row;
+  Cell: typeof Cell;
+  HeaderCell: typeof HeaderCell;
+  useRowResize: typeof useRowResize;
+}
+
+export type { TableRootProps };
+
+export default {
+  Root,
+  Header,
+  Body,
+  Row,
+  Cell,
+  HeaderCell,
+  useRowResize,
+} as ITable;