@team-monolith/cds 0.1.8 → 0.2.0

package/dist/patterns/Grid/Grid.js

@@ -1,140 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { flexRender, getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
-import { 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 Button from "../../components/Button";
-import DropdownMenu from "../Dropdown/DropdownMenu";
-import { ArrowDropDownFillIcon } from "../../icons/arrows";
-import { Table, TableBody, TableCell, TableHead, TableRow, } from "../Table";
-import EnhancedTableCell from "./EnhancedTableCell";
-// TanStack Table의 기본 Filter 함수들은 단일 Filter 값만 지원하도록 되어있습니다.
-// CDS에서는 여러개 필터값을 선택할 수 있으므로,
-// FilterValue를 Set 형식으로 지정하고, 이 형식에 맞는 Filter 함수를 정의하여
-// 각 columnDef의 인자로 전달하여 적용합니다.
-var MultiFilterFn = function (row, columnId, filterValues) {
-    return filterValues.has(row.getValue(columnId));
-};
-/**
- * CDS Table과 TanStack Table을 이용하여
- * data-processing, state-management 등의 로직이 들어있는 컴포넌트입니다.
- */
-export default function Grid(props) {
-    var _a;
-    var className = props.className, _b = props.component, Component = _b === void 0 ? "div" : _b, gridApiRef = props.gridApiRef, size = props.size, _c = props.fullWidth, fullWidth = _c === void 0 ? true : _c, rowData = props.rowData, columns = props.columns, onCellClicked = props.onCellClicked, resizable = props.resizable, selectedRowMenuProps = props.selectedRowMenuProps, paginationPageSize = props.paginationPageSize, enableRowSelection = props.enableRowSelection;
-    var _d = useState([]), sorting = _d[0], setSorting = _d[1];
-    var _e = useState({}), rowSelection = _e[0], setRowSelection = _e[1];
-    var _f = useState([]), columnFilters = _f[0], setColumnFilters = _f[1];
-    var _g = useState({
-        pageIndex: 0,
-        pageSize: 0,
-    }), pageIndex = _g[0].pageIndex, setPagination = _g[1];
-    var _h = useState(false), selectedRowMenuOpen = _h[0], setSelectedRowMenuOpen = _h[1];
-    // resize가 활성화 되었을 때만 전달되는 Table Option
-    var resizeOption = resizable
-        ? {
-            enableColumnResizing: true,
-            columnResizeMode: "onChange",
-        }
-        : { enableColumnResizing: false };
-    // rowSelection이 활성화 되었을 때만 전달되는 Table Option
-    var rowSelectionOption = enableRowSelection
-        ? {
-            enableRowSelection: true,
-            onRowSelectionChange: setRowSelection,
-        }
-        : {};
-    // rowSelection이 활성화 되었을 때, 다음 column을 가장 처음 열에 추가합니다.
-    var selectColumn = {
-        id: "grid-selectable-column",
-        header: function (_a) {
-            var table = _a.table;
-            return (_jsx(CheckboxInput, { checked: table.getIsAllRowsSelected(), partial: table.getIsSomeRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler() }));
-        },
-        cell: function (_a) {
-            var row = _a.row;
-            return (_jsx(CheckboxInput, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), partial: row.getIsSomeSelected(), onChange: row.getToggleSelectedHandler() }));
-        },
-        enableResizing: false,
-        enableColumnFilter: false,
-        enableSorting: false,
-        size: 0,
-    };
-    // pagination이 활성화 되었을 때만 전달되는 Table Option
-    var paginationOption = paginationPageSize
-        ? {
-            onPaginationChange: setPagination,
-            getPaginationRowModel: getPaginationRowModel(),
-        }
-        : {};
-    var pagination = {
-        pageIndex: pageIndex,
-        pageSize: paginationPageSize !== null && paginationPageSize !== void 0 ? paginationPageSize : 0,
-    };
-    // 여러 값으로 된 필터를 선택할 수 있도록 filterFn을 교체합니다.
-    var columnWithFilterFn = columns.map(function (colDef) { return (__assign(__assign({}, colDef), { filterFn: MultiFilterFn })); });
-    var table = useReactTable(__assign(__assign(__assign(__assign({ data: rowData, columns: enableRowSelection
-            ? __spreadArray([selectColumn], columnWithFilterFn, true) : columnWithFilterFn, state: {
-            columnFilters: columnFilters,
-            sorting: sorting,
-            rowSelection: rowSelection,
-            pagination: pagination,
-        } }, resizeOption), rowSelectionOption), paginationOption), { getCoreRowModel: getCoreRowModel(), onSortingChange: setSorting, getSortedRowModel: getSortedRowModel(), onColumnFiltersChange: setColumnFilters, getFilteredRowModel: getFilteredRowModel(), getFacetedRowModel: getFacetedRowModel(), getFacetedUniqueValues: getFacetedUniqueValues() }));
-    useImperativeHandle(gridApiRef, function () { return ({
-        table: table,
-    }); });
-    var enablePagination = Boolean(paginationPageSize);
-    var menuRef = useRef(null);
-    // selectedRowMenuProps의 onClick 인자에 rows, table, setDropdownOpen을 전달하여
-    // 콜백 내부에서 접근 가능하게 합니다.
-    var itemProps = (_a = selectedRowMenuProps === null || selectedRowMenuProps === void 0 ? void 0 : selectedRowMenuProps.items.map(function (itemProp) {
-        return __assign(__assign({}, itemProp), { onClick: function () {
-                itemProp.onClick({
-                    rows: table.getSelectedRowModel().flatRows,
-                    table: table,
-                    setDropdownOpen: setSelectedRowMenuOpen,
-                });
-            } });
-    })) !== null && _a !== void 0 ? _a : [];
-    return (_jsxs(Component, __assign({ className: className, css: [
-            css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: inline-flex;\n          flex-direction: column;\n        "], ["\n          display: inline-flex;\n          flex-direction: column;\n        "]))),
-            fullWidth && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            width: 100%;\n          "], ["\n            width: 100%;\n          "]))),
-        ] }, { children: [_jsx("div", __assign({ css: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          // Table\uC744 div\uC73C\uB85C \uAC10\uC2F8 overflow \uC18D\uC131\uC744 \uCD94\uAC00\uD558\uC5EC \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD558\uAC8C \uD569\uB2C8\uB2E4.\n          // Table \uC790\uCCB4\uC5D0 css\uB97C \uC801\uC6A9\uD558\uBA74 display: table \uC18D\uC131\uC73C\uB85C \uC778\uD574 \uC801\uC6A9\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.\n          overflow: auto;\n        "], ["\n          // Table\uC744 div\uC73C\uB85C \uAC10\uC2F8 overflow \uC18D\uC131\uC744 \uCD94\uAC00\uD558\uC5EC \uC2A4\uD06C\uB864 \uAC00\uB2A5\uD558\uAC8C \uD569\uB2C8\uB2E4.\n          // Table \uC790\uCCB4\uC5D0 css\uB97C \uC801\uC6A9\uD558\uBA74 display: table \uC18D\uC131\uC73C\uB85C \uC778\uD574 \uC801\uC6A9\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.\n          overflow: auto;\n        "]))) }, { children: _jsxs(Table, __assign({}, { size: size, fullWidth: fullWidth }, { children: [_jsx(TableHead, { children: table.getHeaderGroups().map(function (headerGroup) { return (_jsx(TableRow, { children: headerGroup.headers.map(function (header) { return (_jsx(EnhancedTableCell, { table: table, header: header }, header.id)); }) }, headerGroup.id)); }) }), _jsxs(TableBody, { children: [table.getRowModel().rows.length === 0 && (_jsx(TableRow, __assign({ disableHover: true }, { children: _jsx(TableCell, __assign({ colSpan: table.getAllColumns().length, css: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    text-align: center;\n                  "], ["\n                    text-align: center;\n                  "]))) }, { children: "\uB370\uC774\uD130\uAC00 \uC874\uC7AC\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4." })) }))), table.getRowModel().rows.map(function (row) { return (_jsx(TableRow, __assign({ isSelected: row.getIsSelected() }, { children: row.getVisibleCells().map(function (cell) { return (_jsx(TableCell, __assign({ onClick: function () { return onCellClicked === null || onCellClicked === void 0 ? void 0 : onCellClicked({ cell: cell, table: table }); } }, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }), cell.id)); }) }), row.id)); })] })] })) })), (enableRowSelection || enablePagination) && (_jsxs(TableFooter, __assign({ enableRowSelection: enableRowSelection !== null && enableRowSelection !== void 0 ? enableRowSelection : false, enablePagination: enablePagination }, { children: [enableRowSelection && (_jsxs(_Fragment, { children: [_jsx(Button, { color: "secondary", size: "small", label: "\uC120\uD0DD\uD55C \uD56D\uBAA9\uC744", ref: menuRef, endIcon: _jsx(ArrowDropDownFillIcon, {}), disabled: !(table.getIsAllRowsSelected() ||
-                                    table.getIsSomeRowsSelected()), onClick: function () { return setSelectedRowMenuOpen(true); } }), _jsx(DropdownMenu, { itemsProps: itemProps, open: selectedRowMenuOpen, anchorEl: menuRef.current, onClose: function () { return setSelectedRowMenuOpen(false); } })] })), enablePagination && (_jsx(Pagination, { page: table.getState().pagination.pageIndex + 1, count: table.getPageCount(), onChange: function (event, page) {
-                            table.setPageIndex(page - 1);
-                        } }))] })))] })));
-}
-var TableFooter = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  ", "\n  margin: 16px 12px;\n"], ["\n  display: flex;\n  align-items: center;\n\n  ", "\n  margin: 16px 12px;\n"])), function (_a) {
-    var enableRowSelection = _a.enableRowSelection, enablePagination = _a.enablePagination;
-    return !enablePagination
-        ? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          justify-content: flex-start;\n        "], ["\n          justify-content: flex-start;\n        "]))) : enableRowSelection
-        ? css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          justify-content: space-between;\n        "], ["\n          justify-content: space-between;\n        "]))) : css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          justify-content: center;\n        "], ["\n          justify-content: center;\n        "])));
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/patterns/Grid/index.d.ts

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

package/dist/patterns/Grid/index.js

@@ -1,2 +0,0 @@
-import Grid from "./Grid";
-export default Grid;

package/dist/patterns/Table/TableSizeContext.d.ts

@@ -1,7 +0,0 @@
-import * as React from "react";
-import { TableSize } from "./Table";
-interface TableSizeContextProps {
-    size?: TableSize;
-}
-declare const TableSizeContext: React.Context<TableSizeContextProps>;
-export default TableSizeContext;

package/dist/patterns/Table/TableSizeContext.js

@@ -1,3 +0,0 @@
-import * as React from "react";
-var TableSizeContext = React.createContext({});
-export default TableSizeContext;

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

@@ -1,180 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import {
-  Header,
-  RowData,
-  Table as TableType,
-  flexRender,
-} from "@tanstack/react-table";
-import { ReactNode, useRef, useState } from "react";
-import { css } from "@emotion/react";
-import { DropdownItemProps } from "../Dropdown/DropdownItem";
-import DropdownMenu from "../Dropdown/DropdownMenu";
-import { TableCell } from "../Table";
-import styled from "@emotion/styled";
-
-// 두 Set의 합집합을 구하는 함수
-function union(setA: Set<any>, setB: Set<any>) {
-  const _union = new Set(setA);
-  setB.forEach((elem) => {
-    _union.add(elem);
-  });
-  return _union;
-}
-
-/**
- * Sort, Filter, Resize 등의 기능이 추가된 Cell입니다.
- */
-export default function EnhancedTableCell<TData extends RowData>(props: {
-  table: TableType<TData>;
-  header: Header<TData, unknown>;
-}) {
-  const { table, header } = props;
-  const [open, setOpen] = useState(false);
-  const menuRef = useRef<HTMLButtonElement | null>(null);
-
-  let filterDropdownMenu: ReactNode = null;
-  if (header.column.getCanFilter()) {
-    // 필터 내의 드롭다운 메뉴 아이템 정렬에서 사용할 firstValue 값
-    // 이 값이 number 타입인지, string 타입인지에 따라 아이템 정렬 함수를 다르게 설정합니다.
-    const firstValue = table
-      .getPreFilteredRowModel()
-      .flatRows[0]?.getValue(header.column.id);
-
-    // 한 열에서 중복값이 제거된 고유값들을 받아옵니다.
-    const uniqueValues = header.column.getFacetedUniqueValues().keys();
-
-    const currentFilterValue = header.column.getFilterValue() as
-      | Set<any>
-      | undefined;
-
-    // 열의 고유값의 배열과 현재 필터가 걸려있는 값의 배열들을 합집합시킵니다.
-    const filterMenuValues = Array.from(
-      union(new Set(uniqueValues), currentFilterValue ?? new Set())
-    );
-
-    // 타입에 따라서 필터 메뉴를 오름차순 정렬합니다.
-    const sortedFilterMenuValues =
-      typeof firstValue === "number"
-        ? filterMenuValues.sort((a, b) => Number(a) - Number(b))
-        : filterMenuValues.sort();
-
-    /**
-     * val 값에 해당하는 필터를 토글하는 함수
-     * 모든 값이 해제되었을때, 빈 배열이 아닌 undefined 값을 필터 값으로 설정하여야
-     * 필터가 정상적으로 해제됩니다.
-     */
-    const toggleFilterValue = (val: string) => {
-      if (currentFilterValue?.has(val)) {
-        header.column.setFilterValue((old: Set<any> | undefined) => {
-          if (!old) {
-            return;
-          }
-          const newFilterValue = new Set(old);
-          newFilterValue.delete(val);
-          if (newFilterValue.size === 0) {
-            return undefined;
-          } else {
-            return newFilterValue;
-          }
-        });
-      } else {
-        header.column.setFilterValue((old: Set<any> | undefined) => {
-          if (!old) {
-            return new Set().add(val);
-          }
-          return new Set(old).add(val);
-        });
-      }
-    };
-
-    filterDropdownMenu = (
-      <DropdownMenu
-        itemsProps={sortedFilterMenuValues.map(
-          (val): DropdownItemProps => ({
-            label: val,
-            checkbox: true,
-            checkboxProps: {
-              checked: currentFilterValue?.has(val) ?? false,
-              onChange: (event) => toggleFilterValue(val),
-            },
-            onClick: () => toggleFilterValue(val),
-          })
-        )}
-        open={open}
-        anchorEl={menuRef.current}
-        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
-        transformOrigin={{ vertical: "top", horizontal: "right" }}
-        onClose={() => setOpen(false)}
-      />
-    );
-  }
-
-  // 정렬 옵션, 현재 정렬 상태에 따라 TableCell에 전달할 sort 인자를 계산합니다.
-  const sort =
-    header.column.getIsSorted() ||
-    (header.column.getCanSort() ? "none" : undefined);
-
-  // 필터 옵션, 현재 필터 상태에 따라 TableCell에 전달할 filter 인자를 계산합니다.
-  const isFilterActive =
-    header.column.getIsFiltered() ||
-    (header.column.getCanFilter() ? false : undefined);
-
-  return (
-    <TableCell
-      colSpan={header.colSpan}
-      sort={sort}
-      onSortClick={header.column.getToggleSortingHandler()}
-      isFilterActive={isFilterActive}
-      onFilterClick={() => setOpen(true)}
-      filterButttonRef={menuRef}
-      css={[
-        css`
-          width: ${header.getSize()}px;
-        `,
-        // Resize 관련 속성
-        header.column.getCanResize() &&
-          css`
-            position: relative;
-          `,
-      ]}
-    >
-      {header.isPlaceholder
-        ? null
-        : flexRender(header.column.columnDef.header, header.getContext())}
-      {header.column.getCanResize() && (
-        <Resizer
-          onMouseDown={header.getResizeHandler()}
-          onTouchStart={header.getResizeHandler()}
-        />
-      )}
-      {filterDropdownMenu}
-    </TableCell>
-  );
-}
-
-/**
- * Resize 핸들이 2px일때는 너무 얇아서 클릭이 어렵습니다.
- * 따라서 4px인 클릭 영역을 먼저 만들고
- * &::after 가상선택자를 이용하여 2px인 핸들을 그립니다.
- */
-const Resizer = styled.div(
-  ({ theme }) => css`
-    position: absolute;
-    right: 0;
-    top: calc(50% - 8px);
-    height: 16px;
-    width: 4px;
-
-    cursor: col-resize;
-    user-select: none;
-    touch-action: none;
-    &::after {
-      position: absolute;
-      background: ${theme.color.background.neutralAltActive};
-      content: "";
-      width: 2px;
-      height: 100%;
-      left: calc(50% - 2px);
-    }
-  `
-);