@team-monolith/cds 0.4.0 → 0.4.3

package/src/cds/patterns/Dialog/DialogPanelsContext.tsx

@@ -1,9 +0,0 @@
-import React from "react";
-
-export const DialogPanelsContext = React.createContext<{
-  value: string;
-  renderStrategy: "hidden" | "unmount";
-}>({
-  value: "",
-  renderStrategy: "unmount",
-});

package/src/cds/patterns/Dialog/DialogTitle.tsx

@@ -1,55 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css, useTheme } from "@emotion/react";
-import React from "react";
-import SquareButton from "../../components/SquareButton";
-import { CloseFillIcon } from "../../icons/system";
-
-export interface DialogTitleProps {
-  className?: string;
-  component?: React.ElementType;
-
-  /**
-   * 제목의 X 버튼을 누르를 때 호출되는 callback.
-   * 이 속성이 전달되면 X 버튼을 Title 영역에 그립니다.
-   */
-  onClose?: () => void;
-
-  /** Content 내용으로 표기될 값 */
-  children: React.ReactNode;
-}
-
-export function DialogTitle(props: DialogTitleProps) {
-  const { className, component: Component = "div", onClose, children } = props;
-  const theme = useTheme();
-  return (
-    <>
-      <Component
-        className={className}
-        css={css`
-          display: flex;
-          padding: 0px 16px 0px 24px;
-          justify-content: space-between;
-          align-items: center;
-
-          text-align: center;
-          /* Alt/Paragraph/16px-Eb */
-          font-size: 16px;
-          font-family: NanumSquareNeo;
-          font-weight: 800;
-          line-height: 24px;
-          color: ${theme.color.foreground.neutralBase};
-        `}
-      >
-        {children}
-        {onClose && (
-          <SquareButton
-            color="icon"
-            size="small"
-            icon={<CloseFillIcon />}
-            onClick={onClose}
-          />
-        )}
-      </Component>
-    </>
-  );
-}

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

@@ -1,7 +0,0 @@
-export * from "./Dialog";
-export * from "./DialogTitle";
-export * from "./DialogContent";
-export * from "./DialogNavigation";
-export * from "./DialogNavigationItem";
-export * from "./DialogPanels";
-export * from "./DialogPanel";

package/src/cds/patterns/Dropdown/Dropdown.tsx

@@ -1,111 +0,0 @@
-import React, { useRef, useState } from "react";
-import Button, { ButtonColor, ButtonSize } from "../../components/Button";
-import DropdownMenu, { DropdownMenuProps } from "./DropdownMenu";
-import { ArrowDropDownFillIcon } from "../../icons/arrows";
-
-/* 드롭다운 패턴은 버튼 컴포넌트와 드롭다운 메뉴 컴포넌트를 합쳐서 사용합니다.
-드롭다운 메뉴 컴포넌트는 MUI의 Menu 컴포넌트를 사용하며, 드롭다운 아이템의 리스트 형태로 구성됩니다.
-
-<DropdownMenu>
-드롭다운 메뉴는 기본값으로 Mui Modal의 성질을 갖고 있어서 클릭 이벤트가 발생하면 메뉴가 열리고,
-생성된 메뉴 외부 영역을 클릭하면 메뉴가 닫힙니다.
-그런데, 중첩된 드롭다운 메뉴를 구현할 때 이러한 성질이 문제가 됩니다.
-이 생성된 메뉴 외부 영역이 상위 드롭다운 메뉴를 가려서 클릭이 되지 않기 때문입니다.
-그래서 중첩된 메뉴(isNestedMenu)의 경우 이 모달의 position을 적절히 이동시켜 상위 메뉴와 상호작용 할 수 있게 만들었습니다.
-또한 메뉴에서 열려있는 서브메뉴가 최대 하나만 존재하게 하기 위해 selectedIndex 상태를 추가했습니다.
-handleClick을 통해 아이템이 아닌 다른 곳을 클릭하면 메뉴가 닫히도록 했습니다.
-
-<DropdownItem>
-드롭다운 아이템의 서브메뉴가 열리는 조건은 복잡합니다.
-1. 서브메뉴가 존재해야 하고,(isSubMenuExist)
-2. 드롭다운 아이템이 클릭되어 내부 상태(isSubMenuOpen)가 true가 되어야 하며,
-3. 서브메뉴 노출이 허용되어 있어야 합니다.(shouldSubMenuOpen)
-
-드롭다운 메뉴의 handleClick은 드롭다운 메뉴를 닫는 역할을 하므로, 
-드롭다운 아이템의 handleClick은 e.stopPropagation()을 통해 이벤트 전파를 막습니다.
-그리고 드롭다운 아이템을 클릭하면 내부 상태(isSubMenuOpen)를 true로 만들고,
-onClick을 통해 전달된 함수를 통해 드롭다운 메뉴의 selectedIndex 상태를 변경합니다.
-이 selectedIndex 상태를 이용해서 서브메뉴 노출 허용여부(shouldSubMenuOpen)를 전달했습니다.
-이를 통해 서브메뉴는 최대 하나만 열리도록 구현했습니다.
-*/
-
-export interface DropdownProps {
-  className?: string;
-  component?: React.ElementType;
-
-  /** 버튼 비활성화 여부 */
-  disabled?: boolean;
-
-  /** 버튼 컴포넌트 색상 */
-  color?: ButtonColor;
-
-  /** 버튼 컴포넌트 크기 */
-  size?: ButtonSize;
-
-  /** 버튼 컴포넌트 내 좌측에 표기될 아이콘 */
-  startIcon?: React.ReactNode;
-
-  /** 버튼 컴포넌트 내 우측에 표기될 아이콘 */
-  endIcon?: React.ReactNode;
-
-  /** 버튼 컴포넌트 내 표기될 문자열 */
-  label: string;
-
-  /** 버튼 클릭 시 호출될 콜백 함수 */
-  onClick?: () => void;
-
-  /** 드롭다운 메뉴의 props */
-  menuProps: DropdownMenuProps;
-}
-
-/**
- * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=203-95329&t=FwczLZ1IVvskUVbT-0)
- */
-export default function Dropdown(props: DropdownProps) {
-  const {
-    className,
-    component: Component = "div",
-    disabled,
-    color = "primary",
-    size = "medium",
-    startIcon,
-    endIcon = <ArrowDropDownFillIcon />,
-    label,
-    onClick,
-    menuProps,
-  } = props;
-  const buttonProps = {
-    disabled,
-    color,
-    size,
-    startIcon,
-    endIcon,
-  };
-  const menuRef = useRef<HTMLButtonElement | null>(null);
-  const [open, setOpen] = useState(false);
-
-  const handleClick = () => {
-    onClick?.();
-    setOpen(true);
-  };
-  const handleClose = (e: React.MouseEvent<HTMLElement>) => {
-    menuProps.onClose?.(e);
-    setOpen(false);
-  };
-  return (
-    <Component className={className}>
-      <Button
-        ref={menuRef}
-        {...buttonProps}
-        label={label}
-        onClick={handleClick}
-      />
-      <DropdownMenu
-        {...menuProps}
-        open={open}
-        onClose={handleClose}
-        anchorEl={menuRef.current}
-      />
-    </Component>
-  );
-}

package/src/cds/patterns/Dropdown/DropdownItem.tsx

@@ -1,203 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css, Theme } from "@emotion/react";
-import * as React from "react";
-import styled from "@emotion/styled";
-import { MenuItem } from "@mui/material";
-import { HOVER } from "../../utils/hover";
-import CheckboxInput, {
-  CheckboxInputProps,
-} from "../../components/CheckboxInput";
-import { useRef, useState } from "react";
-import DropdownMenu, { DropdownMenuProps } from "./DropdownMenu";
-import { ArrowRightSLineIcon } from "../../icons/arrows";
-
-export type DropdownItemType = "default" | "danger";
-
-export const DROPDOWN_ITEM_WIDTH = 116;
-
-const TYPE_TO_COLOR = (theme: Theme, type: DropdownItemType): string => {
-  return {
-    default: theme.color.foreground.neutralBase,
-    danger: theme.color.foreground.danger,
-  }[type];
-};
-
-export interface DropdownItemProps {
-  className?: string;
-  component?: React.ElementType;
-
-  /** 드롭다운 아이템의 타입 */
-  type?: DropdownItemType;
-  /** 체크박스 노출여부 */
-  checkbox?: boolean;
-  /** 체크박스 설정 props. 초기 체크여부 및 체크박스 값 변경시 호출되는 함수 등을 지정합니다. */
-  checkboxProps?: CheckboxInputProps;
-  /** 시작 아이콘 설정 */
-  startIcon?: React.ReactNode;
-  /** 드롭다운 아이템의 라벨 */
-  label?: string;
-  /** 끝 아이콘 설정. subMenuProps가 없으면 노출되지 않습니다. */
-  endIcon?: React.ReactNode;
-  /** 비활성화 여부 */
-  disabled?: boolean;
-  /** 드롭다운 아이템의 활성화 여부. 서브 메뉴가 노출될 때 true가 됩니다. */
-  active?: boolean;
-  /** 드롭다운 아이템 마우스 호버 시 호출될 콜백 함수 */
-  onMouseEnter?: (e: React.MouseEvent<HTMLElement>) => void;
-  /** 드롭다운 아이템 마우스 아웃 시 호출될 콜백 함수 */
-  onMouseLeave?: (e: React.MouseEvent<HTMLElement>) => void;
-  /** 드롭다운 아이템 클릭 시 호출될 콜백 함수 */
-  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
-  /** 드롭다운 아이템의 서브 메뉴가 열려야 하는지 여부 */
-  shouldSubMenuOpen?: boolean;
-  /** 아이템이 가지는 드롭다운 메뉴 props. 주어지지 않으면 서브메뉴가 없습니다. */
-  subMenuProps?: DropdownMenuProps;
-  /** 드롭다운 아이템의 서브 메뉴가 닫힐 때 실행할 콜백함수 */
-  onSubMenuClose?: (e: React.MouseEvent<HTMLElement>) => void;
-}
-
-/**
- * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=106-1900&t=FwczLZ1IVvskUVbT-0)
- */
-const DropdownItem = React.forwardRef<any, DropdownItemProps>(
-  (props, ref): React.ReactElement => {
-    const {
-      className,
-      component: Component = "div",
-      type = "default",
-      checkbox,
-      checkboxProps = { checked: false },
-      startIcon,
-      label,
-      endIcon = <ArrowRightSLineIcon />,
-      disabled,
-      active,
-      onMouseEnter,
-      onMouseLeave,
-      onClick,
-      shouldSubMenuOpen = false,
-      subMenuProps = {
-        itemsProps: [],
-      },
-      onSubMenuClose,
-      ...other
-    } = props;
-    const itemRef = useRef<HTMLLIElement | null>(null);
-    const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);
-    const handleClick = (e: React.MouseEvent<HTMLElement>) => {
-      e.stopPropagation();
-      setIsSubMenuOpen(true);
-      onClick?.(e);
-    };
-    const handleClose = (e: React.MouseEvent<HTMLElement>) => {
-      setIsSubMenuOpen(false);
-      onSubMenuClose?.(e);
-    };
-    const isSubMenuExist = subMenuProps.itemsProps.length > 0;
-    const isSubMenuShowed =
-      isSubMenuExist && isSubMenuOpen && shouldSubMenuOpen;
-
-    return (
-      <Component
-        className={className}
-        ref={ref}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        onClick={handleClick}
-        {...other}
-      >
-        <StyledMenuItem
-          ref={itemRef}
-          disabled={disabled}
-          selected={isSubMenuShowed || active}
-        >
-          <LeftWrapper>
-            {checkbox && (
-              <StyledCheckboxInput
-                {...checkboxProps}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  checkboxProps.onClick?.(e);
-                }}
-              />
-            )}
-            {startIcon && <IconDiv type={type}>{startIcon}</IconDiv>}
-            <LabelDiv type={type}>{label}</LabelDiv>
-          </LeftWrapper>
-          {isSubMenuExist && <IconDiv type={type}>{endIcon}</IconDiv>}
-        </StyledMenuItem>
-        {isSubMenuExist && (
-          <DropdownMenu
-            {...subMenuProps}
-            open={isSubMenuShowed}
-            anchorEl={itemRef.current}
-            isNestedMenu={true}
-            onClose={handleClose}
-            anchorOrigin={{
-              vertical: "top",
-              horizontal: "right",
-            }}
-          />
-        )}
-      </Component>
-    );
-  }
-);
-
-const StyledCheckboxInput = styled(CheckboxInput)`
-  margin: 4px;
-`;
-
-const IconDiv = styled.div<{ type: DropdownItemType }>(
-  ({ theme, type }) => css`
-    width: 14px;
-    height: 14px;
-    svg {
-      width: 14px;
-      height: 14px;
-      path {
-        fill: ${TYPE_TO_COLOR(theme, type)};
-      }
-    }
-  `
-);
-
-const LabelDiv = styled.div<{ type: DropdownItemType }>`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 14px;
-  color: ${({ theme, type }) => TYPE_TO_COLOR(theme, type)};
-`;
-
-const LeftWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  white-space: nowrap;
-  gap: 4px;
-`;
-
-const StyledMenuItem = styled(MenuItem)(
-  ({ theme }) => css`
-    &.MuiMenuItem-root {
-      background-color: ${theme.color.background.neutralBase};
-      width: ${DROPDOWN_ITEM_WIDTH}px;
-      height: 32px;
-      border-radius: 6px;
-      padding: 4px 8px 4px 8px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      line-height: 14px;
-      ${HOVER(css`
-        background-color: ${theme.color.background.neutralAlt};
-      `)}
-      &.Mui-selected {
-        background-color: ${theme.color.background.neutralAlt};
-      }
-    }
-  `
-);
-
-export default DropdownItem;

package/src/cds/patterns/Dropdown/DropdownMenu.tsx

@@ -1,176 +0,0 @@
-import styled from "@emotion/styled";
-import { css } from "@emotion/react";
-import { Menu } from "@mui/material";
-import React, { useState } from "react";
-import shadows from "../../foundation/shadows";
-import DropdownItem, {
-  DROPDOWN_ITEM_WIDTH,
-  DropdownItemProps,
-} from "./DropdownItem";
-
-interface OriginProps {
-  vertical: "top" | "center" | "bottom";
-  horizontal: "left" | "center" | "right";
-}
-
-const ORIGIN_PROPS_TO_MARGIN = (originProps: OriginProps) => {
-  const { vertical, horizontal } = originProps;
-  return {
-    top: {
-      left: css`
-        margin-right: 12px;
-      `,
-      center: css`
-        margin-bottom: 8px;
-      `,
-      right: css`
-        margin-left: 12px;
-      `,
-    },
-    center: {
-      left: css`
-        margin-right: 12px;
-      `,
-      center: css`
-        margin-bottom: 8px;
-      `,
-      right: css`
-        margin-left: 12px;
-      `,
-    },
-    bottom: {
-      left: css`
-        margin-top: 8px;
-      `,
-      center: css`
-        margin-top: 8px;
-      `,
-      right: css`
-        margin-top: 8px;
-      `,
-    },
-  }[vertical][horizontal];
-};
-
-export const DROPDOWN_MENU_WIDTH = 124;
-export const DROPDOWN_MENU_MAX_HEIGHT = 160;
-export interface DropdownMenuProps {
-  className?: string;
-  // component: React.ElementType; // 불필요한 dom 중첩을 막기 위해 사용하지 않습니다.
-
-  /** 드롭다운 메뉴가 열리는지 여부 */
-  open?: boolean;
-  /** 드롭다운 메뉴의 위치참조 */
-  anchorEl?: HTMLElement | null;
-  /** 드롭다운 메뉴가 닫힐 때 실행될 콜백함수 */
-  onClose?: (e: React.MouseEvent<HTMLElement>) => void;
-  /** 현재 드롭다운 메뉴가 중첩 드롭다운인지 여부. 최상위일 경우 false입니다. */
-  isNestedMenu?: boolean;
-  /** 드롭다운 메뉴 원점이 anchor의 어디에 위치하는지 조정 */
-  anchorOrigin?: OriginProps;
-  /** 드롭다운 메뉴 원점이 메뉴 자신의 어디에 위치하는지 조정 */
-  transformOrigin?: OriginProps;
-  /** 드롭다운 메뉴가 가지는 드롭다운 아이템들의 props 배열 */
-  itemsProps: DropdownItemProps[];
-}
-
-/**
- * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=106-1921&t=FwczLZ1IVvskUVbT-0)
- */
-const DropdownMenu = React.forwardRef<any, DropdownMenuProps>(
-  (props, ref): React.ReactElement => {
-    const {
-      className,
-      open = false,
-      anchorEl,
-      onClose,
-      isNestedMenu = false,
-      anchorOrigin = {
-        vertical: "bottom",
-        horizontal: "left",
-      },
-      transformOrigin,
-      itemsProps,
-      ...other
-    } = props;
-
-    const [selectedIndex, setSelectedIndex] = useState(-1);
-
-    const handleClick = (e: React.MouseEvent<HTMLElement>) => {
-      setSelectedIndex(-1);
-      onClose?.(e);
-    };
-
-    // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Popover/Popover.js#L104
-    // 메뉴를 감싸는 popover의 절대위치를 이동시키기 위해 anchorEl의 위치를 가져옵니다.
-    const anchorRect = anchorEl?.getBoundingClientRect();
-
-    return (
-      <StyledMenu
-        ref={ref}
-        open={open}
-        anchorEl={anchorEl}
-        onClick={handleClick}
-        onClose={onClose}
-        className={className}
-        anchorRect={isNestedMenu ? anchorRect : undefined}
-        anchorOrigin={anchorOrigin}
-        transformOrigin={transformOrigin}
-        hideBackdrop
-        {...other}
-      >
-        {itemsProps?.map((itemProps, index) => (
-          <DropdownItem
-            key={index}
-            {...itemProps}
-            onClick={(e) => {
-              itemProps.onClick?.(e);
-              setSelectedIndex(index);
-            }}
-            shouldSubMenuOpen={open && selectedIndex === index}
-            onSubMenuClose={onClose}
-          />
-        ))}
-      </StyledMenu>
-    );
-  }
-);
-
-const StyledMenu = styled(Menu, {
-  shouldForwardProp: (prop) => prop !== "anchorRect",
-})<{
-  anchorRect?: DOMRect;
-  anchorOrigin: OriginProps;
-}>(
-  ({ anchorRect, anchorOrigin }) => css`
-    .MuiPaper-root {
-      display: block;
-      ${ORIGIN_PROPS_TO_MARGIN(anchorOrigin)}
-      width: ${DROPDOWN_MENU_WIDTH}px;
-      max-height: ${DROPDOWN_MENU_MAX_HEIGHT}px;
-      box-shadow: ${shadows.shadow04};
-      .MuiList-root {
-        display: inline-flex;
-        flex-direction: column;
-        padding: 4px;
-        gap: 2px;
-      }
-      ${anchorRect &&
-      css`
-        position: absolute;
-        top: 0px !important;
-        left: 0px !important;
-      `}
-    }
-    &.MuiModal-root {
-      ${anchorRect &&
-      css`
-        position: absolute;
-        top: ${anchorRect.top}px;
-        left: ${anchorRect.left + DROPDOWN_ITEM_WIDTH}px;
-      `}
-    }
-  `
-);
-
-export default DropdownMenu;

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

@@ -1,2 +0,0 @@
-export * from "./Dropdown";
-export { default } from "./Dropdown";

package/src/cds/patterns/EmptyState/EmptyState.tsx

@@ -1,91 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import React from "react";
-import Button, { ButtonProps } from "../../components/Button";
-import { ReactComponent as EmptyStateIcon } from "./empty-state-icon.svg";
-
-export interface EmptyStateProps {
-  className?: string;
-  component?: React.ElementType;
-
-  /** 상단에 표시되는 텍스트입니다. */
-  title: string;
-
-  /** title 하단에 표시되는 텍스트입니다. */
-  subtitle?: string;
-
-  /** 하단의 영역에 렌더링 될 Button 컴포넌트의 속성 배열입니다. */
-  buttons?: ButtonProps[];
-}
-
-/**
- * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=181-89918&t=J5yAnjojg5Dm1764-0)
- */
-export default function EmptyState(props: EmptyStateProps) {
-  const {
-    className,
-    component: Component = "div",
-    title,
-    subtitle,
-    buttons,
-  } = props;
-  return (
-    <Component
-      className={className}
-      css={css`
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 10px;
-
-        padding: 120px 10px;
-      `}
-    >
-      <EmptyStateIcon />
-      <TextDiv>
-        <Title>{title}</Title>
-        {subtitle && <Subtitle>{subtitle}</Subtitle>}
-        {buttons?.length !== 0 && (
-          <Buttons>
-            {buttons?.map((buttonProps) => (
-              <Button {...buttonProps} />
-            ))}
-          </Buttons>
-        )}
-      </TextDiv>
-    </Component>
-  );
-}
-
-const TextDiv = styled.div(
-  ({ theme }) => css`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 24px 0px;
-    gap: 12px;
-
-    font-style: normal;
-    color: ${theme.color.foreground.neutralBase};
-  `
-);
-
-const Title = styled.div`
-  font-weight: 800;
-  font-size: 36px;
-  line-height: 44px;
-`;
-
-const Subtitle = styled.div`
-  font-weight: 400;
-  font-size: 18px;
-  line-height: 28px;
-`;
-
-const Buttons = styled.div`
-  display: flex;
-  align-items: center;
-  padding: 4px;
-  gap: 8px;
-`;