@team-monolith/cds 0.4.0 → 0.4.3

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

@@ -1,253 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css, useTheme } from "@emotion/react";
-import React, { useContext } from "react";
-import TableVariantContext from "./TableVariantContext";
-import TablePropsContext from "./TablePropsContext";
-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, disabled } = useContext(TablePropsContext);
-  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}
-              disabled={disabled}
-            />
-          )}
-          {isFilterActive !== undefined && (
-            <FilterButton
-              isFilterActive={isFilterActive ?? false}
-              onFilterClick={onFilterClick}
-              ref={filterButttonRef}
-              disabled={disabled}
-            />
-          )}
-        </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>;
-  disabled?: boolean;
-}) => {
-  let sortIcon = <></>;
-  switch (props.sort) {
-    case "asc":
-      sortIcon = <ArrowDownFillIcon />;
-      break;
-    case "desc":
-      sortIcon = <ArrowUpFillIcon />;
-      break;
-    case "none":
-      sortIcon = <ExpandUpDownIcon />;
-      break;
-  }
-
-  return (
-    <button
-      disabled={props.disabled}
-      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>;
-    disabled?: boolean;
-  }
->((props, ref) => {
-  const theme = useTheme();
-  return (
-    <button
-      ref={ref}
-      disabled={props.disabled}
-      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

@@ -1,30 +0,0 @@
-/** @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/TablePropsContext.tsx

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

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

@@ -1,70 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css, useTheme } from "@emotion/react";
-import React, { useContext } from "react";
-import { HOVER } from "../../utils/hover";
-import TablePropsContext from "./TablePropsContext";
-
-export interface TableRowProps {
-  className?: string;
-  component?: React.ElementType;
-
-  /** Table의 내용입니다. 일반적으로 TableCell로 구성됩니다. */
-  children?: React.ReactNode;
-  /** `true`일 때 기본적으로 적용되는 hover 배경색이 비활성화됩니다.  */
-  disableHover?: boolean;
-  /** 이 행이 선택되었음을 결정하는 속성. `true`일때 배경색이 활성화됩니다. */
-  isSelected?: boolean;
-  /** 행을 클릭할 때 호출되는 함수 */
-  onClick?: (event: any) => void;
-}
-
-export default function TableRow(props: TableRowProps) {
-  const {
-    className,
-    component: Component = "tr",
-    isSelected,
-    disableHover,
-    children,
-    onClick,
-  } = props;
-  const theme = useTheme();
-  const { disabled } = useContext(TablePropsContext);
-  return (
-    <Component
-      className={className}
-      onClick={disabled ? undefined : onClick}
-      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};
-          `,
-        disabled
-          ? css`
-              color: ${theme.color.foreground.neutralBaseDisabled};
-            `
-          : css`
-              ${!disableHover &&
-              HOVER(
-                css`
-                  background: ${theme.color.container.primaryContainer};
-                `
-              )}
-              ${onClick &&
-              css`
-                cursor: pointer;
-              `}
-            `,
-      ]}
-    >
-      {children}
-    </Component>
-  );
-}

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

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

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

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

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

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

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

package/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "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/cds/svg.d.ts"],
-  "exclude": ["node_modules", "dist"]
-}