@team-monolith/cds 0.4.1 → 0.4.4

package/src/cds/patterns/Navigation/NavigationItem.tsx

@@ -1,36 +0,0 @@
-import styled from "@emotion/styled";
-import React from "react";
-import Button from "../../components/Button";
-import { NavigationContext } from "./NavigationContext";
-
-export interface NavigationItemProps {
-  className?: string;
-
-  /** 주로 React Router의 NavLink 입니다. */
-  component: React.ElementType;
-  label: string;
-  to: string;
-}
-
-export function NavigationItem(props: NavigationItemProps): React.ReactElement {
-  const { className, component: Component, label, to } = props;
-
-  const { size, type } = React.useContext(NavigationContext);
-
-  return (
-    <Component className={className} to={to}>
-      {({ isActive }: { isActive: boolean }) => (
-        <StyledButton
-          type={type}
-          size={size}
-          label={label}
-          color={isActive ? "secondary" : "textNeutral"}
-        />
-      )}
-    </Component>
-  );
-}
-
-const StyledButton = styled(Button)<{ type: string }>`
-  ${({ type }) => type === "vertical" && `width: 100%;`}
-`;

package/src/cds/patterns/Navigation/NavigationVertical.tsx

@@ -1,39 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css } from "@emotion/react";
-import { NavigationContext } from "./NavigationContext";
-
-export interface NavigationVerticalProps {
-  className?: string;
-  component?: React.ElementType;
-  children?: React.ReactNode;
-
-  /** 컴포넌트 크기 */
-  size: "small" | "medium";
-
-  /** 전체 너비 유무. Vertical 에서만 동작합니다. */
-  fullWidth?: boolean;
-}
-
-/**
- * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A92757)
- */
-export function NavigationVertical(
-  props: NavigationVerticalProps
-): React.ReactElement {
-  const { className, component: Component = "nav", fullWidth, children } = props;
-  return (
-    <Component
-      className={className}
-      css={css`
-        display: flex;
-        width: ${fullWidth ? "100%" : "240px"};
-        flex-direction: column;
-        gap: 8px;
-      `}
-    >
-      <NavigationContext.Provider value={{ size: props.size, type: "vertical" }}>
-        {children}
-      </NavigationContext.Provider>
-    </Component>
-  );
-}

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

@@ -1,3 +0,0 @@
-export * from "./NavigationHorizontal";
-export * from "./NavigationVertical";
-export * from "./NavigationItem";

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

@@ -1,55 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css } from "@emotion/react";
-import { useContext } from "react";
-import Button, { ButtonProps } from "../../components/Button";
-import shadows from "../../foundation/shadows";
-import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
-import styled from "@emotion/styled";
-
-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 { onClick, ...other } = props;
-
-  const context = useContext(SegmentedControlGroupPropsContext);
-
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
-    context.onClick?.(props.value);
-    onClick?.(e);
-  };
-
-  const isActive = context.multiSelect
-    ? context.value.includes(props.value)
-    : context.value === props.value;
-
-  return (
-    <StyledButton
-      css={css`
-        display: flex;
-        justify-content: center;
-        flex-grow: 1;
-        ${isActive && `box-shadow: ${shadows.shadow04};`}
-      `}
-      {...props}
-      isActive={isActive}
-      color={isActive ? "primary" : "textNeutral"}
-      size={context.size}
-      onClick={handleClick}
-    />
-  );
-}
-
-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

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

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

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

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

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

@@ -1,62 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css, useTheme } from "@emotion/react";
-import React from "react";
-import { RESET_TABLE } from "../../utils/reset";
-import TablePropsContext from "./TablePropsContext";
-
-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;
-
-  /** `true`일 때 상호작용이 불가하며, 글자가 회색 처리됩니다. */
-  disabled?: 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,
-    disabled,
-    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%;
-          `,
-      ]}
-    >
-      <TablePropsContext.Provider value={{ size, disabled }}>
-        {children}
-      </TablePropsContext.Provider>
-    </Component>
-  );
-}

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

@@ -1,30 +0,0 @@
-/** @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>
-  );
-}

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;