@weing-dev/ui-kit-primitive 0.0.1 → 0.0.2

package/src/components/Table/README.md

@@ -1,162 +0,0 @@
-# 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

@@ -1,23 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,83 +0,0 @@
-@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

@@ -1,147 +0,0 @@
-"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;