@team-monolith/cds 0.1.0

package/src/cds/components/SquareButton.tsx

@@ -0,0 +1,229 @@
+/** @jsxImportSource @emotion/react */
+import { css, SerializedStyles, Theme } from "@emotion/react";
+import styled from "@emotion/styled";
+import React from "react";
+import { HOVER } from "../utils/hover";
+
+export type SquareButtonColor = "danger" | "primary" | "secondary" | "icon";
+
+export type SquareButtonSize = "large" | "medium" | "small" | "xsmall";
+
+export interface SquareButtonProps {
+  className?: string;
+  component?: React.ElementType;
+
+  /** 비활성화 여부 */
+  disabled?: boolean;
+
+  /** 컴포넌트 색상 */
+  color: SquareButtonColor;
+
+  /** 컴포넌트 크기 */
+  size: SquareButtonSize;
+
+  /** 컴포넌트 내 표기될 아이콘 */
+  icon: React.ReactNode;
+
+  /** 컴포넌트 하단에 표기될 문자열 */
+  label?: string;
+
+  /** 전체 너비 유무 */
+  fullWidth?: boolean;
+
+  /** 버튼 클릭 시 호출될 콜백 함수 */
+  onClick?: () => void;
+}
+
+const COLOR_TO_BUTTON_STYLE = (theme: Theme, color: SquareButtonColor) =>
+  ({
+    danger: css`
+      border: none;
+      background: ${theme.color.background.danger};
+      color: ${theme.color.foreground.neutralAlt};
+
+      ${HOVER(css`
+        background: ${theme.color.background.dangerActive};
+      `)}
+      &:disabled {
+        background: ${theme.color.background.dangerDisabled};
+      }
+    `,
+    secondary: css`
+      background: ${theme.color.background.neutralAlt};
+      border: none;
+      color: ${theme.color.foreground.neutralBase};
+
+      ${HOVER(css`
+        background: ${theme.color.background.neutralAltActive};
+        color: ${theme.color.foreground.neutralBase};
+      `)}
+      &:disabled {
+        background: ${theme.color.background.neutralAlt};
+        color: ${theme.color.foreground.neutralBaseDisabled};
+      }
+    `,
+    primary: css`
+      background: ${theme.color.background.primary};
+      border: none;
+      color: ${theme.color.foreground.neutralAlt};
+
+      ${HOVER(css`
+        background: ${theme.color.background.primaryActive};
+      `)}
+      &:disabled {
+        background: ${theme.color.background.primaryDisabled};
+      }
+    `,
+    icon: css`
+      background: none;
+      border: none;
+      color: ${theme.color.foreground.neutralBase};
+
+      ${HOVER(css`
+        background: ${theme.color.background.neutralAltActive};
+        color: ${theme.color.foreground.neutralBase};
+      `)}
+      &:disabled {
+        background: none;
+        color: ${theme.color.foreground.neutralBaseDisabled};
+      }
+    `,
+  }[color]);
+
+const SIZE_TO_BUTTON_STYLE: { [K in SquareButtonSize]: SerializedStyles } = {
+  large: css`
+    width: 56px;
+    height: 56px;
+    padding: 16px;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  `,
+  medium: css`
+    width: 48px;
+    height: 48px;
+    padding: 14px;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  `,
+  small: css`
+    width: 36px;
+    height: 36px;
+    padding: 10px;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  `,
+  xsmall: css`
+    width: 24px;
+    height: 24px;
+    padding: 6px;
+
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+  `,
+};
+
+const SIZE_TO_LABEL_STYLE: { [K in SquareButtonSize]: SerializedStyles } = {
+  large: css`
+    font-size: 18px;
+    line-height: 28px;
+  `,
+  medium: css`
+    font-size: 18px;
+    line-height: 28px;
+  `,
+  small: css`
+    font-size: 18px;
+    line-height: 28px;
+  `,
+  xsmall: css`
+    font-size: 14px;
+    line-height: 22px;
+  `,
+};
+
+/**
+ * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=22-374&t=kTLv3t86qtGalHSS-0)
+ */
+const SquareButton = React.forwardRef<any, SquareButtonProps>(
+  (props, ref): React.ReactElement => {
+    const {
+      className,
+      component: Component = "span",
+      disabled,
+      color,
+      size,
+      icon,
+      label,
+      fullWidth,
+      onClick,
+      ...other
+    } = props;
+    return (
+      <Component
+        {...other}
+        ref={ref}
+        className={className}
+        css={css`
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 8px;
+
+          width: ${fullWidth ? "100%" : "fit-content"};
+        `}
+      >
+        <Button
+          color={color}
+          size={size}
+          disabled={disabled}
+          fullWidth={fullWidth}
+          onClick={onClick}
+        >
+          {icon}
+        </Button>
+        {label && (
+          <Label disabled={disabled} size={size}>
+            {label}
+          </Label>
+        )}
+      </Component>
+    );
+  }
+);
+
+const Button = styled.button<{
+  color: SquareButtonColor;
+  size: SquareButtonSize;
+  fullWidth?: boolean;
+}>`
+  border-radius: 8px;
+  cursor: pointer;
+  &:disabled {
+    cursor: default;
+  }
+  ${({ theme, color }) => COLOR_TO_BUTTON_STYLE(theme, color)}
+  ${({ size }) => SIZE_TO_BUTTON_STYLE[size]}
+  ${({ fullWidth }) => fullWidth && "width: 100%;"}
+`;
+
+const Label = styled.span<{ disabled?: boolean; size: SquareButtonSize }>`
+  font-weight: 400;
+  color: ${({ theme, disabled }) =>
+    disabled
+      ? theme.color.foreground.neutralBaseDisabled
+      : theme.color.foreground.neutralBase};
+  ${({ size }) => SIZE_TO_LABEL_STYLE[size]}
+`;
+
+export default SquareButton;

package/src/cds/components/Switch.tsx

@@ -0,0 +1,129 @@
+/** @jsxImportSource @emotion/react */
+import styled from "@emotion/styled";
+import React from "react";
+import { Switch as MuiSwitch } from "@mui/material";
+import { css } from "@emotion/react";
+
+export type SwitchSize = "small" | "large";
+
+export interface SwitchProps {
+  className?: string;
+  // component: React.ElementType; // MUI Switch에서는 component를 지원하지 않습니다.
+
+  /** 스위치 체크 상태 여부 */
+  checked: boolean;
+
+  /** 스위치 활성화 여부
+   * @default false */
+  disabled?: boolean;
+
+  /** 스위치 크기 */
+  size: SwitchSize;
+
+  /** 스위치 상태 변경 시 호출될 콜백 함수 */
+  onChange?: (
+    event: React.ChangeEvent<HTMLInputElement>,
+    checked: boolean
+  ) => void;
+}
+
+/**
+ * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=36-1577&t=9sDLb4XIOdmF2VMc-0)
+ */
+const Switch = React.forwardRef<any, SwitchProps>(
+  (props, ref): React.ReactElement => {
+    const {
+      className,
+      checked,
+      disabled = false,
+      size,
+      onChange,
+      ...other
+    } = props;
+    return (
+      <StyledSwitch
+        {...other}
+        ref={ref}
+        className={className}
+        checked={checked}
+        disabled={disabled}
+        onChange={onChange}
+        switchSize={size}
+      ></StyledSwitch>
+    );
+  }
+);
+
+const SIZE_TO_SWTICH_SIZE: {
+  [K in SwitchSize]: {
+    width: string;
+    height: string;
+    translateX: string;
+    thumbSize: string;
+  };
+} = {
+  large: {
+    width: "44px",
+    height: "22px",
+    translateX: "22px",
+    thumbSize: "18px",
+  },
+  small: {
+    width: "28px",
+    height: "16px",
+    translateX: "12px",
+    thumbSize: "12px",
+  },
+};
+
+const StyledSwitch = styled(MuiSwitch)<{ switchSize: SwitchSize }>(
+  ({ theme, switchSize }) => css`
+    width: ${SIZE_TO_SWTICH_SIZE[switchSize].width};
+    height: ${SIZE_TO_SWTICH_SIZE[switchSize].height};
+    padding: 0; // 기존 Mui padding 속성 override
+    & .MuiSwitch-switchBase {
+      padding: 2px;
+      &.Mui-checked {
+        transform: translateX(${SIZE_TO_SWTICH_SIZE[switchSize].translateX});
+        color: ${theme.color.foreground.neutralAlt};
+        & + .MuiSwitch-track {
+          opacity: 1;
+          background-color: ${theme.color.background.primary};
+        }
+        &.Mui-disabled + .MuiSwitch-track {
+          opacity: 1;
+          background-color: ${theme.color.background.primaryDisabled};
+        }
+      }
+      &.Mui-disabled + .MuiSwitch-track {
+        opacity: 1;
+        background-color: ${theme.color.background.neutralAltDisabled};
+      }
+      &:hover {
+        background-color: inherit; // 기존 Mui hover 속성 override
+      }
+    }
+    .Mui-disabled .MuiSwitch-thumb {
+      filter: none;
+      box-shadow: none;
+      background-color: ${theme.color.foreground.neutralAltDisabled};
+    }
+
+    .MuiSwitch-thumb {
+      box-shadow: none;
+      filter: drop-shadow(0px 2px 4px rgba(0, 35, 11, 0.2));
+      width: ${SIZE_TO_SWTICH_SIZE[switchSize].thumbSize};
+      height: ${SIZE_TO_SWTICH_SIZE[switchSize].thumbSize};
+      border-radius: 77px;
+      transition: width 300ms;
+    }
+    .MuiSwitch-track {
+      border-radius: 16px;
+      opacity: 1;
+      background-color: ${theme.color.background.neutralAltActive};
+      box-sizing: border-box;
+    }
+  `
+);
+
+export default Switch;

package/src/cds/components/Tag.tsx

@@ -0,0 +1,155 @@
+/** @jsxImportSource @emotion/react */
+import { css, SerializedStyles } from "@emotion/react";
+import styled from "@emotion/styled";
+import React from "react";
+import { CloseFillIcon } from "../icons/system";
+import { Theme, useTheme } from "@emotion/react";
+
+export type TagColor =
+  | "default"
+  | "red"
+  | "teal"
+  | "orange"
+  | "blue"
+  | "green"
+  | "yellow"
+  | "black";
+
+export interface TagProps {
+  className?: string;
+  component?: React.ElementType;
+
+  /** 컴포넌트 내 표기될 문자열 */
+  label: string;
+
+  /** 컴포넌트 좌측에 표기될 아이콘 */
+  icon?: React.ReactNode;
+
+  /** 컴포넌트의 색상 */
+  color?: TagColor;
+
+  /** 컴포넌트 우측에 표기될 닫기 버튼 유무 */
+  close: boolean;
+
+  /** 닫기 버튼 클릭 시 호출될 콜백 함수 */
+  onClick?: () => void;
+}
+
+const COLOR_TO_STYLE = (theme: Theme, color: TagColor): SerializedStyles =>
+  ({
+    default: css`
+      box-sizing: border-box;
+      background: ${theme.color.container.marbleContainer};
+      border: 1px solid ${theme.color.container.marbleOnContainer};
+      color: ${theme.color.container.marbleOnContainer};
+    `,
+    red: css`
+      box-sizing: border-box;
+      background: ${theme.color.container.dangerContainer};
+      border: 1px solid ${theme.color.container.dangerOnContainer};
+      color: ${theme.color.container.dangerOnContainer};
+    `,
+    teal: css`
+      box-sizing: border-box;
+      background: ${theme.color.container.infoContainer};
+      border: 1px solid ${theme.color.container.infoOnContainer};
+      color: ${theme.color.container.infoOnContainer};
+    `,
+    orange: css`
+      box-sizing: border-box;
+      background: ${theme.color.container.secondaryContainer};
+      border: 1px solid ${theme.color.container.secondaryOnContainer};
+      color: ${theme.color.container.secondaryOnContainer};
+    `,
+    blue: css`
+      box-sizing: border-box;
+      background: ${theme.color.container.primaryContainer};
+      border: 1px solid ${theme.color.container.primaryOnContainer};
+      color: ${theme.color.container.primaryOnContainer};
+    `,
+    green: css`
+      box-sizing: border-box;
+      background: ${theme.color.container.successContainer};
+      border: 1px solid ${theme.color.container.successOnContainer};
+      color: ${theme.color.container.successOnContainer};
+    `,
+    yellow: css`
+      box-sizing: border-box;
+      background: ${theme.color.container.warningContainer};
+      border: 1px solid ${theme.color.container.warningOnContainer};
+      color: ${theme.color.container.warningOnContainer};
+    `,
+    black: css`
+      background: ${theme.color.container.obsidianContainer};
+      color: ${theme.color.container.obsidianOnContainer};
+    `,
+  }[color]);
+
+/**
+ * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=42-869&t=HZXCHP0r0tbvMA6v-0)
+ */
+const Tag = React.forwardRef<any, TagProps>(
+  (props, ref): React.ReactElement => {
+    const {
+      className,
+      component: Component = "span",
+      label,
+      icon,
+      color = "default",
+      close,
+      onClick,
+      ...other
+    } = props;
+    const theme = useTheme();
+    return (
+      <Component
+        {...other}
+        ref={ref}
+        className={className}
+        css={[
+          css`
+            box-sizing: border-box;
+            display: flex;
+            // flex가 화면 전체로 확장되지 않고 내부의 아이콘과 텍스트만 포함한다.
+            padding: 1px 8px;
+            align-items: center;
+            gap: 3px;
+            width: fit-content;
+            border-radius: 8px;
+
+            svg {
+              width: 14px;
+              height: 14px;
+            }
+          `,
+          COLOR_TO_STYLE(theme, color),
+          close
+            ? css`
+                cursor: pointer;
+              `
+            : undefined,
+        ]}
+        onClick={onClick}
+      >
+        {icon}
+        <span
+          css={css`
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 20px;
+          `}
+        >
+          {label}
+        </span>
+        {close && <StyledCloseFillIcon />}
+      </Component>
+    );
+  }
+);
+
+const StyledCloseFillIcon = styled(CloseFillIcon)`
+  width: 10px;
+  height: 10px;
+`;
+
+export default Tag;

package/src/cds/components/Tooltip.tsx

@@ -0,0 +1,104 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import React from "react";
+import {
+  Tooltip as MuiTooltip,
+  TooltipProps as MuiTooltipProps,
+} from "@mui/material";
+
+export interface TooltipProps {
+  className?: string;
+  // MUI Tooltip의 component 속성이 CDS에서 기대하는 속성과 다르게 구현되어있고,
+  // Tooltip 컴포넌트에서 component 속성을 사용하는 경우가 많지 않을 것으로 판단,
+  // CDS에서 Tooltip의 component 속성을 구현하지 않습니다.
+  // component?: React.ElementType;
+
+  /** 툴팁에 표시될 제목 텍스트 */
+  title?: string;
+
+  /** 툴팁에 표시될 text 영역 값 */
+  text: React.ReactNode;
+
+  /** `true` 값일때 Tooltip을 오픈합니다. */
+  open?: boolean;
+
+  /** Tooltip이 오픈될 때 호출되는 함수. */
+  onOpen?: (event: React.SyntheticEvent) => void;
+
+  /** Tooltip이 닫힐 때 호출되는 함수. */
+  onClose?: (event: React.SyntheticEvent | Event) => void;
+
+  /**
+   * Tooltip placement.
+   * @default bottom
+   */
+  placement?:
+    | "bottom-end"
+    | "bottom-start"
+    | "bottom"
+    | "left-end"
+    | "left-start"
+    | "left"
+    | "right-end"
+    | "right-start"
+    | "right"
+    | "top-end"
+    | "top-start"
+    | "top";
+
+  /** 툴팁을 표시할 객체입니다. ref를 props로 받을 수 있어야합니다. */
+  children: React.ReactElement<any, any>;
+}
+
+/**
+ * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=172-626&t=aFkKTFgWq2xFFGC5-0)
+ */
+const Tooltip = React.forwardRef<any, TooltipProps>(
+  (props, ref): React.ReactElement => {
+    const { title, text, children, ...restProps } = props;
+    return (
+      <StyledTooltip
+        ref={ref}
+        title={
+          <>
+            {title && <TitleDiv>{title}</TitleDiv>}
+            {text}
+          </>
+        }
+        {...restProps}
+      >
+        {children}
+      </StyledTooltip>
+    );
+  }
+);
+
+// https://mui.com/material-ui/react-tooltip/#customization
+const StyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (
+  <MuiTooltip {...props} classes={{ popper: className }} />
+))(
+  ({ theme }) => css`
+    .MuiTooltip-tooltip {
+      background: ${theme.color.foreground.neutralBase};
+      border-radius: 8px;
+      padding: 6px 10px;
+
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+
+      color: ${theme.color.background.neutralBase};
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+    }
+  `
+);
+
+const TitleDiv = styled.div`
+  font-weight: 700;
+`;
+
+export default Tooltip;

package/src/cds/emotion.d.ts

@@ -0,0 +1,70 @@
+import "@emotion/react";
+
+interface CodleColors {
+  background: {
+    neutralBase: string;
+    neutralAlt: string;
+    neutralAltActive: string;
+    neutralAltDisabled: string;
+    primary: string;
+    primaryActive: string;
+    primaryDisabled: string;
+    secondary: string;
+    secondaryActive: string;
+    secondaryDisabled: string;
+    danger: string;
+    dangerActive: string;
+    dangerDisabled: string;
+    success: string;
+    successActive: string;
+    successDisabled: string;
+    info: string;
+    infoActive: string;
+    infoDisabled: string;
+    warning: string;
+    warningActive: string;
+    warningDisabled: string;
+  };
+  foreground: {
+    neutralBase: string;
+    neutralBaseDisabled: string;
+    neutralAlt: string;
+    neutralAltDisabled: string;
+    primary: string;
+    primaryDisabled: string;
+    secondary: string;
+    secondaryDisabled: string;
+    danger: string;
+    dangerDisabled: string;
+    success: string;
+    successDisabled: string;
+    info: string;
+    infoDisabled: string;
+    warning: string;
+    warningDisabled: string;
+  };
+  container: {
+    primaryContainer: string;
+    primaryOnContainer: string;
+    secondaryContainer: string;
+    secondaryOnContainer: string;
+    dangerContainer: string;
+    dangerOnContainer: string;
+    successContainer: string;
+    successOnContainer: string;
+    infoContainer: string;
+    infoOnContainer: string;
+    warningContainer: string;
+    warningOnContainer: string;
+    obsidianContainer: string;
+    obsidianOnContainer: string;
+    marbleContainer: string;
+    marbleOnContainer: string;
+  };
+}
+
+declare module "@emotion/react" {
+  export interface Theme {
+    color: CodleColors;
+  }
+}