@team-monolith/cds 0.1.8 → 0.2.0

package/src/cds/patterns/Grid/Grid.tsx

@@ -1,360 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import {
-  Cell,
-  ColumnDef,
-  ColumnFiltersState,
-  ColumnResizeMode,
-  Row,
-  RowData,
-  RowSelectionState,
-  SortingState,
-  Table as TableType,
-  flexRender,
-  getCoreRowModel,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-  FilterFn,
-  PaginationState,
-} from "@tanstack/react-table";
-import React, { RefObject, useImperativeHandle, useRef, useState } from "react";
-import styled from "@emotion/styled";
-import { css } from "@emotion/react";
-import Pagination from "../../components/Pagination";
-import CheckboxInput from "../../components/CheckboxInput";
-import { DropdownItemProps } from "../Dropdown/DropdownItem";
-import Button from "../../components/Button";
-import DropdownMenu from "../Dropdown/DropdownMenu";
-import { ArrowDropDownFillIcon } from "../../icons/arrows";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  TableSize,
-} from "../Table";
-import EnhancedTableCell from "./EnhancedTableCell";
-
-// TanStack Table의 기본 Filter 함수들은 단일 Filter 값만 지원하도록 되어있습니다.
-// CDS에서는 여러개 필터값을 선택할 수 있으므로,
-// FilterValue를 Set 형식으로 지정하고, 이 형식에 맞는 Filter 함수를 정의하여
-// 각 columnDef의 인자로 전달하여 적용합니다.
-const MultiFilterFn: FilterFn<any> = (
-  row,
-  columnId: string,
-  filterValues: Set<any>
-) => {
-  return filterValues.has(row.getValue<string | null>(columnId));
-};
-
-// onCellClicked 함수의 인자로 전달되는 값
-export interface CellClickedEvent<TData> {
-  cell: Cell<TData, any>;
-  table: TableType<TData>;
-}
-
-// selectedRowMenuProps의 onClick 함수의 인자로 전달되는 값
-export interface SelectedRowMenuOnClickArgs<TData> {
-  rows: Row<TData>[];
-  table: TableType<TData>;
-  setDropdownOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-export interface GridApi<TData> {
-  table: TableType<TData>;
-}
-
-export interface GridProps<TData> {
-  className?: string;
-  component?: React.ElementType;
-
-  /** Grid API를 담는 Ref 객체 */
-  gridApiRef: RefObject<GridApi<TData>>;
-  /** Table Cell의 크기 옵션*/
-  size: TableSize;
-  /** Table의 fullWidth 여부
-   * @default true */
-  fullWidth?: boolean;
-  /** 행 Data */
-  rowData: TData[];
-  /** 열 정의 객체 */
-  columns: ColumnDef<TData, any>[];
-  /** Table의 열 크기를 resize 할 수 있는지 여부*/
-  resizable?: boolean;
-  /** 한 페이지 당 보여질 row의 갯수. 입력하지 않으면 페이지네이션이 비활성화됩니다. */
-  paginationPageSize?: number;
-  /** Cell을 클릭했을 때 호출되는 콜백 */
-  onCellClicked?: (event: CellClickedEvent<TData>) => void;
-  /** 행 선택 기능 활성화 여부 */
-  enableRowSelection?: boolean;
-  /** 행 선택 기능에서 '선택한 항목을' DropdownMenu 관련 속성 */
-  selectedRowMenuProps?: {
-    items: (Omit<DropdownItemProps, "onClick"> & {
-      onClick: (args: SelectedRowMenuOnClickArgs<TData>) => void;
-    })[];
-  };
-}
-
-/**
- * CDS Table과 TanStack Table을 이용하여
- * data-processing, state-management 등의 로직이 들어있는 컴포넌트입니다.
- */
-export default function Grid<TData extends RowData>(props: GridProps<TData>) {
-  const {
-    className,
-    component: Component = "div",
-    gridApiRef,
-    size,
-    fullWidth = true,
-    rowData,
-    columns,
-    onCellClicked,
-    resizable,
-    selectedRowMenuProps,
-    paginationPageSize,
-    enableRowSelection,
-  } = props;
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const [{ pageIndex }, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 0,
-  });
-  const [selectedRowMenuOpen, setSelectedRowMenuOpen] = useState(false);
-
-  // resize가 활성화 되었을 때만 전달되는 Table Option
-  const resizeOption = resizable
-    ? {
-        enableColumnResizing: true,
-        columnResizeMode: "onChange" as ColumnResizeMode,
-      }
-    : { enableColumnResizing: false };
-
-  // rowSelection이 활성화 되었을 때만 전달되는 Table Option
-  const rowSelectionOption = enableRowSelection
-    ? {
-        enableRowSelection: true,
-        onRowSelectionChange: setRowSelection,
-      }
-    : {};
-  // rowSelection이 활성화 되었을 때, 다음 column을 가장 처음 열에 추가합니다.
-  const selectColumn: ColumnDef<TData> = {
-    id: "grid-selectable-column",
-    header: ({ table }) => (
-      <CheckboxInput
-        checked={table.getIsAllRowsSelected()}
-        partial={table.getIsSomeRowsSelected()}
-        onChange={table.getToggleAllRowsSelectedHandler()}
-      />
-    ),
-    cell: ({ row }) => (
-      <CheckboxInput
-        checked={row.getIsSelected()}
-        disabled={!row.getCanSelect()}
-        partial={row.getIsSomeSelected()}
-        onChange={row.getToggleSelectedHandler()}
-      />
-    ),
-    enableResizing: false,
-    enableColumnFilter: false,
-    enableSorting: false,
-    size: 0,
-  };
-
-  // pagination이 활성화 되었을 때만 전달되는 Table Option
-  const paginationOption = paginationPageSize
-    ? {
-        onPaginationChange: setPagination,
-        getPaginationRowModel: getPaginationRowModel(),
-      }
-    : {};
-  const pagination: PaginationState = {
-    pageIndex,
-    pageSize: paginationPageSize ?? 0,
-  };
-
-  // 여러 값으로 된 필터를 선택할 수 있도록 filterFn을 교체합니다.
-  const columnWithFilterFn: ColumnDef<TData, any>[] = columns.map((colDef) => ({
-    ...colDef,
-    filterFn: MultiFilterFn,
-  }));
-
-  const table = useReactTable<TData>({
-    data: rowData,
-    columns: enableRowSelection
-      ? [selectColumn, ...columnWithFilterFn]
-      : columnWithFilterFn,
-    state: {
-      columnFilters,
-      sorting,
-      rowSelection,
-      pagination,
-    },
-    ...resizeOption,
-    ...rowSelectionOption,
-    ...paginationOption,
-    getCoreRowModel: getCoreRowModel(),
-    onSortingChange: setSorting,
-    getSortedRowModel: getSortedRowModel(),
-    onColumnFiltersChange: setColumnFilters,
-    getFilteredRowModel: getFilteredRowModel(),
-    getFacetedRowModel: getFacetedRowModel(),
-    getFacetedUniqueValues: getFacetedUniqueValues(),
-  });
-
-  useImperativeHandle(gridApiRef, () => ({
-    table,
-  }));
-
-  const enablePagination = Boolean(paginationPageSize);
-
-  const menuRef = useRef<HTMLButtonElement | null>(null);
-  // selectedRowMenuProps의 onClick 인자에 rows, table, setDropdownOpen을 전달하여
-  // 콜백 내부에서 접근 가능하게 합니다.
-  const itemProps =
-    selectedRowMenuProps?.items.map((itemProp) => {
-      return {
-        ...itemProp,
-        onClick: () => {
-          itemProp.onClick({
-            rows: table.getSelectedRowModel().flatRows,
-            table,
-            setDropdownOpen: setSelectedRowMenuOpen,
-          });
-        },
-      };
-    }) ?? [];
-
-  return (
-    <Component
-      className={className}
-      css={[
-        css`
-          display: inline-flex;
-          flex-direction: column;
-        `,
-        fullWidth &&
-          css`
-            width: 100%;
-          `,
-      ]}
-    >
-      <div
-        css={css`
-          // Table을 div으로 감싸 overflow 속성을 추가하여 스크롤 가능하게 합니다.
-          // Table 자체에 css를 적용하면 display: table 속성으로 인해 적용되지 않습니다.
-          overflow: auto;
-        `}
-      >
-        <Table {...{ size, fullWidth }}>
-          <TableHead>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <EnhancedTableCell
-                    table={table}
-                    header={header}
-                    key={header.id}
-                  />
-                ))}
-              </TableRow>
-            ))}
-          </TableHead>
-          <TableBody>
-            {table.getRowModel().rows.length === 0 && (
-              <TableRow disableHover>
-                <TableCell
-                  colSpan={table.getAllColumns().length}
-                  css={css`
-                    text-align: center;
-                  `}
-                >
-                  데이터가 존재하지 않습니다.
-                </TableCell>
-              </TableRow>
-            )}
-            {table.getRowModel().rows.map((row) => (
-              <TableRow key={row.id} isSelected={row.getIsSelected()}>
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell
-                    key={cell.id}
-                    onClick={() => onCellClicked?.({ cell, table })}
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
-      {(enableRowSelection || enablePagination) && (
-        <TableFooter
-          enableRowSelection={enableRowSelection ?? false}
-          enablePagination={enablePagination}
-        >
-          {enableRowSelection && (
-            <>
-              <Button
-                color="secondary"
-                size="small"
-                label="선택한 항목을"
-                ref={menuRef}
-                endIcon={<ArrowDropDownFillIcon />}
-                disabled={
-                  !(
-                    table.getIsAllRowsSelected() ||
-                    table.getIsSomeRowsSelected()
-                  )
-                }
-                onClick={() => setSelectedRowMenuOpen(true)}
-              />
-              <DropdownMenu
-                itemsProps={itemProps}
-                open={selectedRowMenuOpen}
-                anchorEl={menuRef.current}
-                onClose={() => setSelectedRowMenuOpen(false)}
-              />
-            </>
-          )}
-          {enablePagination && (
-            <Pagination
-              page={table.getState().pagination.pageIndex + 1}
-              count={table.getPageCount()}
-              onChange={(event, page) => {
-                table.setPageIndex(page - 1);
-              }}
-            />
-          )}
-        </TableFooter>
-      )}
-    </Component>
-  );
-}
-
-const TableFooter = styled.div<{
-  enableRowSelection: boolean;
-  enablePagination: boolean;
-}>`
-  display: flex;
-  align-items: center;
-
-  ${({ enableRowSelection, enablePagination }) =>
-    !enablePagination
-      ? css`
-          justify-content: flex-start;
-        `
-      : enableRowSelection
-      ? css`
-          justify-content: space-between;
-        `
-      : css`
-          justify-content: center;
-        `}
-  margin: 16px 12px;
-`;

package/src/cds/patterns/Grid/index.tsx

@@ -1,4 +0,0 @@
-import Grid from "./Grid";
-
-export type { GridProps, GridApi, CellClickedEvent } from "./Grid";
-export default Grid;

package/src/cds/patterns/Table/TableSizeContext.tsx

@@ -1,10 +0,0 @@
-import * as React from "react";
-import { TableSize } from "./Table";
-
-interface TableSizeContextProps {
-  size?: TableSize;
-}
-
-const TableSizeContext = React.createContext<TableSizeContextProps>({});
-
-export default TableSizeContext;