@team-monolith/cds 0.1.0

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

@@ -0,0 +1,242 @@
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import React, { useContext } from "react";
+import TableVariantContext from "./TableVariantContext";
+import TableSizeContext from "./TableSizeContext";
+import { TableSize } from "./Table";
+import {
+  ArrowDownFillIcon,
+  ArrowUpFillIcon,
+  ExpandUpDownIcon,
+} from "../../icons/arrows";
+import styled from "@emotion/styled";
+import { RESET_BUTTON } from "../../utils/reset";
+import { FilterFillIcon } from "../../icons/system";
+
+export interface TableCellProps {
+  className?: string;
+  component?: React.ElementType;
+
+  /* Cell의 col span 값 */
+  colSpan?: number;
+  /* sort 아이콘을 위한 인자입니다. undefined일때는 아이콘을 그리지 않습니다. */
+  sort?: "asc" | "desc" | "none";
+  /* filter 아이콘을 위한 인자입니다. undefined일때는 아이콘을 그리지 않습니다. */
+  isFilterActive?: boolean;
+  /* Cell을 클릭할 때 호출되는 함수 */
+  onClick?: () => void;
+  /* 정렬 버튼을 클릭할 때 호출되는 함수 */
+  onSortClick?: React.MouseEventHandler<HTMLButtonElement>;
+  /* 필터 버튼을 클릭할 때 호출되는 함수 */
+  onFilterClick?: React.MouseEventHandler<HTMLButtonElement>;
+  /* 필터 버튼의 ref */
+  filterButttonRef?: React.MutableRefObject<HTMLButtonElement | null>;
+  /** Cell의 내용입니다. */
+  children?: React.ReactNode;
+}
+
+const SIZE_TO_STYLES = (size: TableSize) =>
+  ({
+    small: css`
+      padding: 8px 8px;
+    `,
+    medium: css`
+      padding: 12px 8px;
+    `,
+    large: css`
+      padding: 16px 8px;
+    `,
+  }[size]);
+
+export default function TableCell(props: TableCellProps) {
+  const {
+    className,
+    component: Component,
+    children,
+    sort,
+    colSpan,
+    isFilterActive,
+    onFilterClick,
+    onClick,
+    onSortClick,
+    filterButttonRef,
+  } = props;
+  // variant 값에 따라 th 태그로 그릴지, td 태그로 그릴지를 결정합니다.
+  const { variant } = useContext(TableVariantContext);
+  const Element = Component ?? variant === "head" ? "th" : "td";
+  const { size } = useContext(TableSizeContext);
+  const theme = useTheme();
+
+  if (variant === "body") {
+    return (
+      <Element
+        colSpan={colSpan}
+        className={className}
+        onClick={onClick}
+        css={[
+          SIZE_TO_STYLES(size ?? "medium"),
+          css`
+            font-style: normal;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 24px;
+          `,
+          css`
+            display: table-cell;
+            text-align: initial;
+
+            &:first-of-type {
+              padding-left: 16px;
+            }
+
+            &:last-of-type {
+              padding-right: 16px;
+            }
+          `,
+        ]}
+      >
+        {children}
+      </Element>
+    );
+  }
+
+  return (
+    <Element
+      colSpan={colSpan}
+      className={className}
+      onClick={onClick}
+      css={[
+        SIZE_TO_STYLES(size ?? "medium"),
+        Element === "th"
+          ? css`
+              background: ${theme.color.background.neutralAlt};
+              font-style: normal;
+              font-weight: 500;
+              font-size: 14px;
+              line-height: 16px;
+            `
+          : css`
+              font-style: normal;
+              font-weight: 400;
+              font-size: 16px;
+              line-height: 24px;
+            `,
+        css`
+          display: table-cell;
+          text-align: initial;
+
+          &:first-of-type {
+            padding-left: 16px;
+          }
+
+          &:last-of-type {
+            padding-right: 16px;
+          }
+        `,
+      ]}
+    >
+      <Cell>
+        {children}
+        <Buttons>
+          {sort && <SortButton sort={sort} onSortClick={onSortClick} />}
+          {isFilterActive !== undefined && (
+            <FilterButton
+              isFilterActive={isFilterActive ?? false}
+              onFilterClick={onFilterClick}
+              ref={filterButttonRef}
+            />
+          )}
+        </Buttons>
+      </Cell>
+    </Element>
+  );
+}
+
+const Cell = styled.span`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const Buttons = styled.span`
+  display: flex;
+  gap: 4px;
+`;
+
+const SortButton = (props: {
+  sort?: "asc" | "desc" | "none";
+  onSortClick?: React.MouseEventHandler<HTMLButtonElement>;
+}) => {
+  let sortIcon = <></>;
+  switch (props.sort) {
+    case "asc":
+      sortIcon = <ArrowDownFillIcon />;
+      break;
+    case "desc":
+      sortIcon = <ArrowUpFillIcon />;
+      break;
+    case "none":
+      sortIcon = <ExpandUpDownIcon />;
+      break;
+  }
+
+  return (
+    <button
+      onClick={props.onSortClick}
+      css={css`
+        ${RESET_BUTTON}
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 6px;
+
+        cursor: pointer;
+
+        svg {
+          width: 12px;
+          height: 12px;
+        }
+      `}
+    >
+      {sortIcon}
+    </button>
+  );
+};
+
+const FilterButton = React.forwardRef<
+  HTMLButtonElement,
+  {
+    isFilterActive: boolean;
+    onFilterClick?: React.MouseEventHandler<HTMLButtonElement>;
+  }
+>((props, ref) => {
+  const theme = useTheme();
+  return (
+    <button
+      ref={ref}
+      onClick={props.onFilterClick}
+      css={[
+        css`
+          ${RESET_BUTTON}
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 6px;
+
+          cursor: pointer;
+
+          svg {
+            width: 12px;
+            height: 12px;
+          }
+        `,
+        props.isFilterActive &&
+          css`
+            color: ${theme.color.foreground.primary};
+          `,
+      ]}
+    >
+      <FilterFillIcon />
+    </button>
+  );
+});

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

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

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

@@ -0,0 +1,54 @@
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import React from "react";
+import { HOVER } from "../../utils/hover";
+
+export interface TableRowProps {
+  className?: string;
+  component?: React.ElementType;
+
+  /** Table의 내용입니다. 일반적으로 TableCell로 구성됩니다. */
+  children?: React.ReactNode;
+  /** `true`일 때 기본적으로 적용되는 hover 배경색이 비활성화됩니다.  */
+  disableHover?: boolean;
+  /** 이 행이 선택되었음을 결정하는 속성. `true`일때 배경색이 활성화됩니다. */
+  isSelected?: boolean;
+}
+
+export default function TableRow(props: TableRowProps) {
+  const {
+    className,
+    component: Component = "tr",
+    isSelected,
+    disableHover,
+    children,
+  } = props;
+  const theme = useTheme();
+  return (
+    <Component
+      className={className}
+      css={[
+        css`
+          display: table-row;
+          &:not(:first-of-type) {
+            td {
+              border-top: 1px solid ${theme.color.background.neutralAlt};
+            }
+          }
+        `,
+        isSelected &&
+          css`
+            background: ${theme.color.container.primaryContainer};
+          `,
+        !disableHover &&
+          css`
+            ${HOVER(css`
+              background: ${theme.color.container.primaryContainer};
+            `)}
+          `,
+      ]}
+    >
+      {children}
+    </Component>
+  );
+}

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

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

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+
+interface TableVariantContextProps {
+  variant?: "head" | "body";
+}
+
+const TableVariantContext = React.createContext<TableVariantContextProps>({});
+
+export default TableVariantContext;

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

@@ -0,0 +1,15 @@
+import Table, { TableSize, TableProps } from "./Table";
+import TableHead, { TableHeadProps } from "./TableHead";
+import TableBody, { TableBodyProps } from "./TableBody";
+import TableRow, { TableRowProps } from "./TableRow";
+import TableCell, { TableCellProps } from "./TableCell";
+
+export { Table, TableHead, TableBody, TableRow, TableCell };
+export type {
+  TableSize,
+  TableProps,
+  TableHeadProps,
+  TableBodyProps,
+  TableRowProps,
+  TableCellProps,
+};

package/src/cds/utils/hover.tsx

@@ -0,0 +1,24 @@
+import { css } from "@emotion/react";
+import { CSSInterpolation } from "@emotion/serialize";
+
+// https://choi-jinwoo.github.io/post/development/css-media-hover/
+export function HOVER(style: CSSInterpolation) {
+  // -ms-high-contrast: none is for IE11 support.
+  return css`
+    @media (hover: hover), (-ms-high-contrast: none) {
+      &:hover {
+        ${style}
+      }
+    }
+  `;
+}
+
+export function FOCUS(style: CSSInterpolation) {
+  return css`
+    @media (hover: hover), (-ms-high-contrast: none) {
+      &:focus {
+        ${style}
+      }
+    }
+  `;
+}

package/src/cds/utils/reset.tsx

@@ -0,0 +1,19 @@
+import { css } from "@emotion/react";
+
+export const RESET_BUTTON = css`
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  border: none;
+  background: none;
+  font: inherit;
+  text-align: inherit;
+`;
+
+export const RESET_TABLE = css`
+  padding: 0;
+  border: 0;
+  border-spacing: 0px;
+  border-collapse: collapse;
+`;

package/src/cds/utils/zIndex.tsx

@@ -0,0 +1,3 @@
+export const ZINDEX = {
+  inputBase: 1, // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/internal/SwitchBase.js#L35
+};

package/src/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from "react-dom";
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("root")
+);

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "outDir": "./dist",
+    "declaration": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src/cds", "src/react-app-env.d.ts"],
+  "exclude": ["node_modules", "dist"]
+}