@team-monolith/cds 0.1.0

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

@@ -0,0 +1,360 @@
+/** @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

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

package/src/cds/patterns/SegmentedControl/SegmentedControlButton.tsx

@@ -0,0 +1,41 @@
+/** @jsxImportSource @emotion/react */
+import styled from "@emotion/styled";
+import { useContext } from "react";
+import Button, { ButtonProps } from "../../components/Button";
+import shadows from "../../foundation/shadows";
+import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
+
+export interface SegmentedControlButtonProps extends Omit<ButtonProps, "color" | "size"> {
+  value: string;
+}
+
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
+ */
+export function SegmentedControlButton(props: SegmentedControlButtonProps) {
+  const context = useContext(SegmentedControlGroupPropsContext);
+
+  const isActive = context.multiSelect ? context.value.includes(props.value) : context.value === props.value;
+
+  return (
+    <StyledButton
+      {...props}
+      isActive={isActive}
+      color={isActive ? "primary" : "textNeutral"}
+      size={context.size}
+      onClick={() => {
+        context.onClick?.(props.value);
+        props.onClick?.();
+      }}
+    />
+  );
+}
+
+const StyledButton = styled(Button, {
+  shouldForwardProp: (prop) => prop !== "isActive",
+})<{ isActive: boolean }>`
+  display: flex;
+  justify-content: center;
+  flex-grow: 1;
+  ${({ isActive }) => isActive && `box-shadow: ${shadows.shadow04};`}
+`;

package/src/cds/patterns/SegmentedControl/SegmentedControlGroup.tsx

@@ -0,0 +1,81 @@
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import { ButtonSize } from "../../components/Button";
+import { SquareButtonSize } from "../../components/SquareButton";
+import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
+
+export type SegmentedControlGroupProps = {
+  className?: string;
+  component?: React.ElementType;
+  children?: React.ReactNode;
+
+  /** 컴포넌트 크기 */
+  size: ButtonSize | SquareButtonSize;
+
+  /** 전체 너비 유무 */
+  fullWidth?: boolean;
+} & (
+  | {
+      /** 중복 선택 가능 유무 */
+      multiSelect?: false;
+      /** 선택된 값 */
+      value: string | undefined;
+      onChange?: (newValue: string) => void;
+    }
+  | {
+      multiSelect: true;
+      value: string[];
+      onChange?: (newValue: string[]) => void;
+    }
+);
+
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
+ */
+export function SegmentedControlGroup(props: SegmentedControlGroupProps) {
+  const {
+    component: Component = "div",
+    className,
+    children,
+    fullWidth,
+    multiSelect,
+  } = props;
+
+  const theme = useTheme();
+
+  return (
+    <Component
+      className={className}
+      css={css`
+        display: flex;
+        gap: 4px;
+
+        width: ${fullWidth ? "100%" : "fit-content"};
+        background-color: ${theme.color.background.neutralAlt};
+        border-radius: 8px;
+        border: 1px solid ${theme.color.background.neutralAltActive};
+      `}
+    >
+      <SegmentedControlGroupPropsContext.Provider
+        value={{
+          ...props,
+          onClick: (newValue: string) => {
+            if (multiSelect) {
+              if (props.value.includes(newValue)) {
+                props.onChange?.(
+                  props.value.filter((value) => value !== newValue)
+                );
+              } else {
+                props.onChange?.([...props.value, newValue]);
+              }
+            } else {
+              props.onChange?.(newValue);
+            }
+          },
+        }}
+      >
+        {children}
+      </SegmentedControlGroupPropsContext.Provider>
+    </Component>
+  );
+}

package/src/cds/patterns/SegmentedControl/SegmentedControlGroupPropsContext.tsx

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+import { SegmentedControlGroupProps } from "./SegmentedControlGroup";
+
+export const SegmentedControlGroupPropsContext = createContext<SegmentedControlGroupProps & {
+  onClick?: (newValue: string) => void;
+}>({
+  value: undefined,
+  size: "medium",
+});

package/src/cds/patterns/SegmentedControl/SegmentedControlSquareButton.tsx

@@ -0,0 +1,51 @@
+/** @jsxImportSource @emotion/react */
+import styled from "@emotion/styled";
+import { useContext } from "react";
+import SquareButton, { SquareButtonProps } from "../../components/SquareButton";
+import shadows from "../../foundation/shadows";
+import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
+
+export interface SegmentedControlSquareButtonProps
+  extends Omit<SquareButtonProps, "color" | "size"> {
+  value: string;
+}
+
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
+ */
+export function SegmentedControlSquareButton(
+  props: SegmentedControlSquareButtonProps
+) {
+  const context = useContext(SegmentedControlGroupPropsContext);
+
+  const isActive = context.multiSelect
+    ? context.value.includes(props.value)
+    : context.value === props.value;
+
+  return (
+    <StyledSquareButton
+      {...props}
+      isActive={isActive}
+      color={isActive ? "primary" : "icon"}
+      size={context.size}
+      fullWidth={context.fullWidth}
+      onClick={() => {
+        if (context.onClick) {
+          context.onClick(props.value);
+          props.onClick?.();
+        }
+      }}
+    />
+  );
+}
+
+const StyledSquareButton = styled(SquareButton, {
+  shouldForwardProp: (prop) => prop !== "isActive",
+})<{ isActive: boolean }>`
+  display: flex;
+  justify-content: center;
+  flex-grow: 1;
+  button {
+    ${({ isActive }) => isActive && `box-shadow: ${shadows.shadow04};`}
+  }
+`;

package/src/cds/patterns/SegmentedControl/index.ts

@@ -0,0 +1,3 @@
+export * from './SegmentedControlGroup';
+export * from './SegmentedControlButton';
+export * from './SegmentedControlSquareButton';

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

@@ -0,0 +1,56 @@
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import React from "react";
+import { RESET_TABLE } from "../../utils/reset";
+import TableSizeContext from "./TableSizeContext";
+
+export type TableSize = "large" | "medium" | "small";
+export interface TableProps {
+  className?: string;
+  component?: React.ElementType;
+
+  /** Table의 내용입니다. 일반적으로 `TableHead`와 `TableBody`로 구성됩니다. */
+  children?: React.ReactNode;
+
+  /** Table Row 사이즈 */
+  size: TableSize;
+
+  /** fullWidth 여부 */
+  fullWidth?: boolean;
+}
+
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=181-91732&t=07ngLzGHuU3xxg4S-0)
+ */
+export default function Table(props: TableProps) {
+  const {
+    className,
+    component: Component = "table",
+    children,
+    size,
+    fullWidth,
+  } = props;
+  const theme = useTheme();
+  return (
+    <Component
+      className={className}
+      css={[
+        RESET_TABLE,
+        css`
+          border-collapse: separate;
+
+          background: ${theme.color.background.neutralBase};
+          border: 1px solid ${theme.color.background.neutralAlt};
+          color: ${theme.color.foreground.neutralBase};
+          border-radius: 4px;
+        `,
+        fullWidth &&
+          css`
+            width: 100%;
+          `,
+      ]}
+    >
+      <TableSizeContext.Provider value={{ size }}>{children}</TableSizeContext.Provider>
+    </Component>
+  );
+}

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

@@ -0,0 +1,30 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import React from "react";
+import TableVariantContext from "./TableVariantContext";
+
+export interface TableBodyProps {
+  className?: string;
+  component?: React.ElementType;
+
+  /** Table의 내용입니다. 일반적으로 TableRow로 구성됩니다. */
+  children?: React.ReactNode;
+}
+
+export default function TableBody(props: TableBodyProps) {
+  const { className, component: Component = "tbody", children } = props;
+  return (
+    <Component
+      className={className}
+      css={[
+        css`
+          display: table-row-group;
+        `,
+      ]}
+    >
+      <TableVariantContext.Provider value={{ variant: "body" }}>
+        {children}
+      </TableVariantContext.Provider>
+    </Component>
+  );
+}