@team-monolith/cds 0.4.1 → 0.4.4

package/src/cds/components/Banner.tsx

@@ -1,176 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css, SerializedStyles, Theme, useTheme } from "@emotion/react";
-import styled from "@emotion/styled";
-import React from "react";
-import COLOR from "../foundation/color";
-import { CloseFillIcon } from "../icons/system";
-import { RESET_BUTTON } from "../utils/reset";
-
-export type BannerColor = "red" | "blue" | "green" | "yellow";
-
-export interface BannerProps {
-  className?: string;
-  component?: React.ElementType;
-
-  /** 컴포넌트 내 헤드라인으로 표기될 문자열 */
-  headline?: string;
-
-  /** 컴포넌트 내용으로 표기될 값 */
-  content?: React.ReactNode;
-
-  /** 컴포넌트 좌측에 표기될 아이콘 */
-  icon?: React.ReactNode;
-
-  /** 컴포넌트의 색상 */
-  color: BannerColor;
-
-  /** 컴포넌트 우측에 표기될 버튼의 라벨 */
-  buttonLabel?: string;
-
-  /** 컴포넌트 우측 버튼 클릭 시 호출될 콜백 함수 */
-  onButtonClick?: () => void;
-
-  /** 컴포넌트 우측에 표기될 닫기 버튼 유무 */
-  close?: boolean;
-
-  /** 닫기 버튼 클릭 시 호출될 콜백 함수 */
-  onClose?: () => void;
-
-  /** 전체 너비 유무 */
-  fullWidth?: boolean;
-}
-
-const COLOR_TO_STYLE = (theme: Theme, color: BannerColor): SerializedStyles =>
-  ({
-    red: css`
-      background: ${theme.color.container.dangerContainer};
-      color: ${theme.color.container.dangerOnContainer};
-    `,
-    blue: css`
-      background: ${theme.color.container.primaryContainer};
-      color: ${theme.color.container.primaryOnContainer};
-    `,
-    green: css`
-      background: ${theme.color.container.successContainer};
-      color: ${theme.color.container.successOnContainer};
-    `,
-    yellow: css`
-      background: ${theme.color.container.warningContainer};
-      color: ${theme.color.container.warningOnContainer};
-    `,
-  }[color]);
-
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=44-2847&t=bhnL1ombbddld3RQ-0)
- */
-const Banner = React.forwardRef<any, BannerProps>(
-  (props, ref): React.ReactElement => {
-    const {
-      className,
-      component: Component = "div",
-      headline,
-      content,
-      icon,
-      color,
-      buttonLabel,
-      onButtonClick,
-      close,
-      onClose,
-      fullWidth,
-      ...other
-    } = props;
-    const theme = useTheme();
-    return (
-      <Component
-        {...other}
-        ref={ref}
-        className={className}
-        css={[
-          css`
-            box-sizing: border-box;
-            display: flex;
-            align-items: center;
-            color: ${COLOR.white};
-            line-height: 125%;
-          `,
-          COLOR_TO_STYLE(theme, color),
-          fullWidth
-            ? css`
-                width: 100%;
-              `
-            : css`
-                border-radius: 12px;
-                width: fit-content;
-                min-width: 343px;
-              `,
-        ]}
-      >
-        {icon && <IconDiv>{icon}</IconDiv>}
-        <TextContainer setPaddingRight={!close && !buttonLabel}>
-          {headline && <HeadlineDiv>{headline}</HeadlineDiv>}
-          {content && <div>{content}</div>}
-        </TextContainer>
-        {buttonLabel && (
-          <BannerButton onClick={onButtonClick}>{buttonLabel}</BannerButton>
-        )}
-        {close && (
-          <CloseButton onClick={onClose}>
-            <StyledCloseFillIcon />
-          </CloseButton>
-        )}
-      </Component>
-    );
-  }
-);
-
-const StyledCloseFillIcon = styled(CloseFillIcon)`
-  display: block;
-  padding: 14px;
-  width: 20px;
-  height: 20px;
-
-  color: currentColor;
-`;
-
-const IconDiv = styled.div`
-  display: flex;
-  align-items: center;
-  padding: 16px 0px 16px 16px;
-`;
-
-const HeadlineDiv = styled.div`
-  font-weight: 700;
-`;
-
-const TextContainer = styled.div<{ setPaddingRight: boolean }>`
-  flex: 1;
-
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 16px 0px 16px 16px;
-  gap: 4px;
-  ${(props) =>
-    props.setPaddingRight &&
-    css`
-      padding-right: 16px;
-    `};
-`;
-
-const BannerButton = styled.button`
-  ${RESET_BUTTON}
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 10px 12px;
-  cursor: pointer;
-  color: currentColor;
-`;
-
-const CloseButton = styled.button`
-  ${RESET_BUTTON}
-  cursor: pointer;
-  color: currentColor;
-`;
-
-export default Banner;

package/src/cds/components/Button.tsx

@@ -1,256 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css, SerializedStyles, Theme, useTheme } from "@emotion/react";
-import styled from "@emotion/styled";
-import React from "react";
-import { HOVER } from "../utils/hover";
-import { PolymorphicProps } from "@mui/base";
-
-export type ButtonColor =
-  | "primary"
-  | "secondary"
-  | "danger"
-  | "textNeutral"
-  | "textDanger"
-  | "textPrimary";
-
-export type ButtonSize = "large" | "medium" | "small" | "xsmall";
-
-const COLOR_TO_BUTTON_STYLE = (theme: Theme, color: ButtonColor) =>
-  ({
-    primary: css`
-      background: ${theme.color.background.primary};
-      color: ${theme.color.foreground.neutralAlt};
-
-      ${HOVER(css`
-        background: ${theme.color.background.primaryActive};
-      `)}
-      &:disabled {
-        background: ${theme.color.background.primaryDisabled};
-      }
-    `,
-    secondary: css`
-      background: ${theme.color.background.neutralAlt};
-      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};
-      }
-    `,
-    danger: css`
-      background: ${theme.color.background.danger};
-      color: ${theme.color.foreground.neutralAlt};
-
-      ${HOVER(css`
-        background: ${theme.color.background.dangerActive};
-      `)}
-      &:disabled {
-        background: ${theme.color.background.dangerDisabled};
-      }
-    `,
-    textNeutral: css`
-      background: 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};
-      }
-    `,
-    textDanger: css`
-      background: none;
-      color: ${theme.color.foreground.danger};
-
-      ${HOVER(css`
-        background: ${theme.color.background.neutralAltActive};
-        color: ${theme.color.foreground.danger};
-      `)}
-      &:disabled {
-        background: none;
-        color: ${theme.color.foreground.dangerDisabled};
-      }
-    `,
-    textPrimary: css`
-      background: none;
-      color: ${theme.color.foreground.primary};
-
-      ${HOVER(css`
-        background: ${theme.color.background.neutralAltActive};
-        color: ${theme.color.foreground.primary};
-      `)}
-      &:disabled {
-        background: none;
-        color: ${theme.color.foreground.primaryDisabled};
-      }
-    `,
-  }[color]);
-
-const SIZE_TO_BUTTON_STYLE: { [K in ButtonSize]: SerializedStyles } = {
-  large: css`
-    padding: 16px 20px;
-    gap: 10px;
-
-    svg {
-      width: 24px;
-      height: 24px;
-    }
-  `,
-  medium: css`
-    padding: 14px 16px;
-    gap: 8px;
-
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-  `,
-  small: css`
-    padding: 10px 12px;
-    gap: 8px;
-
-    svg {
-      width: 16px;
-      height: 16px;
-    }
-  `,
-  xsmall: css`
-    padding: 6px 8px;
-    gap: 4px;
-
-    svg {
-      width: 12px;
-      height: 12px;
-    }
-  `,
-};
-
-const SIZE_TO_LABEL_STYLE: { [K in ButtonSize]: SerializedStyles } = {
-  large: css`
-    font-size: 20px;
-    line-height: 24px;
-  `,
-  medium: css`
-    font-size: 18px;
-    line-height: 20px;
-  `,
-  small: css`
-    font-size: 14px;
-    line-height: 16px;
-  `,
-  xsmall: css`
-    font-size: 14px;
-    line-height: 16px;
-  `,
-};
-
-export interface ButtonOwnProps<RootComponentType extends React.ElementType> {
-  className?: string;
-  component?: RootComponentType;
-
-  /** 비활성화 여부 */
-  disabled?: boolean;
-
-  /** 컴포넌트 색상 */
-  color: ButtonColor;
-
-  /** 컴포넌트 크기 */
-  size: ButtonSize;
-
-  /** 컴포넌트 좌측에 표기될 아이콘 */
-  startIcon?: React.ReactNode;
-
-  /** 컴포넌트 우측에 표기될 아이콘 */
-  endIcon?: React.ReactNode;
-
-  /** 컴포넌트 내 표기될 문자열 */
-  label: string;
-}
-
-export type ButtonProps<
-  RootComponentType extends React.ElementType = ButtonTypeMap["defaultComponent"]
-> = PolymorphicProps<ButtonTypeMap<RootComponentType>, RootComponentType>;
-
-export interface ButtonTypeMap<
-  RootComponentType extends React.ElementType = "button"
-> {
-  props: ButtonOwnProps<RootComponentType>;
-  defaultComponent: RootComponentType;
-}
-
-type ButtonComponent = <RootComponentType extends React.ElementType = "button">(
-  props: ButtonProps<RootComponentType>
-) => React.ReactElement | null;
-
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=20-173&t=cXcCv3QijbX7MkoC-0)
- */
-const Button: ButtonComponent = React.forwardRef(function Button<
-  RootComponentType extends React.ElementType = "button"
->(
-  props: ButtonProps<RootComponentType>,
-  ref: React.ComponentPropsWithRef<RootComponentType>['ref']
-): React.ReactElement {
-  const {
-    className,
-    component: Component = "button",
-    disabled,
-    color,
-    size,
-    startIcon,
-    endIcon,
-    label,
-    ...other
-  } = props;
-  const theme = useTheme();
-
-  return (
-    <Component
-      type="button"
-      {...other}
-      className={className}
-      ref={ref}
-      css={[
-        css`
-          display: inline-flex;
-          align-items: center;
-          gap: 8px;
-
-          border: none;
-          border-radius: 8px;
-
-          cursor: pointer;
-          &:disabled {
-            cursor: default;
-            pointer-events: none;
-          }
-
-          font: inherit;
-          text-decoration: none;
-        `,
-        COLOR_TO_BUTTON_STYLE(theme, color),
-        SIZE_TO_BUTTON_STYLE[size],
-      ]}
-      disabled={disabled}
-    >
-      {startIcon}
-      <Label size={size}>{label}</Label>
-      {endIcon}
-    </Component>
-  );
-});
-
-const Label = styled.span<{ size: ButtonSize }>`
-  font-weight: 400;
-  white-space: nowrap;
-  ${({ size }) => SIZE_TO_LABEL_STYLE[size]}
-`;
-
-export default Button;

package/src/cds/components/CheckboxInput.tsx

@@ -1,270 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { SerializedStyles, css, Theme, useTheme } from "@emotion/react";
-import * as React from "react";
-import styled from "@emotion/styled";
-import { ZINDEX } from "../utils/zIndex";
-import { InputHTMLAttributes } from "react";
-
-export type CheckboxInputType = "default" | "checked" | "partial";
-
-const CHECKBOX_ICON_STYLE = (
-  theme: Theme,
-  type: CheckboxInputType,
-  disabled: boolean
-): SerializedStyles => {
-  return {
-    default: css`
-      rect {
-        fill: ${theme.color.background.neutralBase};
-        stroke: ${theme.color.background.neutralAltActive};
-      }
-      ${disabled
-        ? css`
-            rect {
-              fill: ${theme.color.background.neutralAlt};
-              stroke: ${theme.color.background.neutralAltActive};
-            }
-          `
-        : css`
-            input[type="checkbox"]:hover + & {
-              rect {
-                stroke: ${theme.color.background.primary};
-              }
-            }
-          `}
-    `,
-    checked: css`
-      rect {
-        fill: ${theme.color.background.primary};
-        stroke: ${theme.color.background.primary};
-      }
-      path {
-        fill: ${theme.color.background.neutralBase};
-      }
-      ${disabled
-        ? css`
-            rect {
-              fill: ${theme.color.background.neutralAlt};
-              stroke: ${theme.color.background.primaryDisabled};
-            }
-            path {
-              fill: ${theme.color.background.primaryDisabled};
-            }
-          `
-        : css`
-            input[type="checkbox"]:hover + & {
-              rect {
-                fill: ${theme.color.background.primaryActive};
-                stroke: ${theme.color.background.primaryActive};
-              }
-            }
-          `}
-    `,
-    partial: css`
-      rect {
-        fill: ${theme.color.background.neutralBase};
-        stroke: ${theme.color.background.primary};
-      }
-      rect + rect {
-        fill: ${theme.color.background.primary};
-        stroke: none;
-      }
-      ${disabled
-        ? css`
-            rect {
-              fill: ${theme.color.background.neutralAlt};
-              stroke: ${theme.color.background.primaryDisabled};
-            }
-            rect + rect {
-              fill: ${theme.color.background.primaryDisabled};
-              stroke: none;
-            }
-          `
-        : css`
-            input[type="checkbox"]:hover + & {
-              rect {
-                stroke: ${theme.color.background.primaryActive};
-              }
-              rect + rect {
-                fill: ${theme.color.background.primaryActive};
-                stroke: none;
-              }
-            }
-          `}
-    `,
-  }[type];
-};
-
-export interface CheckboxInputProps {
-  className?: string;
-  // component: React.ElementType; // 불필요한 dom 중첩을 막기 위해 사용하지 않습니다.
-
-  /** 체크박스의 체크 여부(Controlled) */
-  checked: boolean;
-  /** 체크박스의 라벨 */
-  label?: string;
-  /** 체크박스의 하단 마진(8px) 여부 */
-  spacer?: boolean;
-  /** 체크박스의 비활성화 여부 */
-  disabled?: boolean;
-  /** 체크박스의 partial 여부. 체크여부가 우선합니다. */
-  partial?: boolean;
-  /** 체크박스 값 변경시 호출되는 함수 */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  /** 체크박스 클릭시 호출되는 함수 */
-  onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
-  /** HTML input 태그에 전달될 props */
-  inputProps?: InputHTMLAttributes<HTMLInputElement>;
-}
-
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=36-907&t=G4t39O7uXZvsGQ9u-0)
- */
-const CheckboxInput = React.forwardRef<any, CheckboxInputProps>(
-  (props, ref) => {
-    const {
-      className,
-      checked,
-      label,
-      spacer,
-      disabled,
-      partial,
-      onChange,
-      onClick,
-      ...other
-    } = props;
-    if (!label) {
-      return <Checkbox {...props} ref={ref} />;
-    }
-
-    const checkboxProps = { checked, spacer, disabled, partial, onChange };
-    return (
-      <Label className={className} ref={ref} {...other}>
-        <Checkbox {...checkboxProps} />
-        <span
-          css={css`
-            margin-left: 8px;
-          `}
-        >
-          {label}
-        </span>
-      </Label>
-    );
-  }
-);
-
-const Checkbox = React.forwardRef<any, CheckboxInputProps>((props, ref) => {
-  const {
-    className,
-    checked,
-    partial,
-    disabled = false,
-    spacer = false,
-    onChange,
-    onClick,
-    inputProps,
-    ...other
-  } = props;
-  const type: CheckboxInputType = checked
-    ? "checked"
-    : partial
-    ? "partial"
-    : "default";
-
-  return (
-    <CheckboxContainer
-      className={className}
-      spacer={spacer}
-      disabled={disabled}
-      ref={ref}
-      {...other}
-    >
-      <StyledInput
-        type="checkbox"
-        {...inputProps}
-        checked={checked}
-        disabled={disabled}
-        onClick={onClick}
-        onChange={onChange}
-      />
-      <CheckboxIcon type={type} disabled={disabled} />
-    </CheckboxContainer>
-  );
-});
-
-const CheckboxContainer = styled.span<{
-  spacer: boolean;
-  disabled: boolean;
-}>(
-  ({ spacer, disabled }) => css`
-    display: inline-block;
-    position: relative;
-    width: 16px;
-    height: 16px;
-    cursor: ${disabled ? "default" : "pointer"};
-    margin-bottom: ${spacer ? "8px" : "0"};
-  `
-);
-
-const StyledInput = styled.input`
-  cursor: inherit;
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  padding: 0;
-  // input 컴포넌트는 보이지 않지만, 클릭이 가능하게 z-index를 설정합니다.
-  z-index: ${ZINDEX.inputBase};
-`;
-
-const Label = styled.label`
-  display: flex;
-  position: relative;
-  width: fit-content;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 16px;
-  color: ${({ theme }) => theme.color.foreground.neutralBase};
-  align-self: center;
-`;
-
-const CheckboxIcon = (props: {
-  type: CheckboxInputType;
-  disabled: boolean;
-}) => {
-  const theme = useTheme();
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      css={CHECKBOX_ICON_STYLE(theme, props.type, props.disabled)}
-    >
-      <rect
-        x="0.5"
-        y="0.5"
-        width="15"
-        height="15"
-        rx="1.5"
-        fill="currentColor"
-        stroke="currentColor"
-      />
-      {props.type === "checked" && (
-        <path
-          d="M7.10545 12.6041L7.08783 12.6217L2.68799 8.22185L4.12067 6.78917L7.10551 9.77402L11.8795 5L13.3122 6.43268L7.12313 12.6218L7.10545 12.6041Z"
-          fill="currentColor"
-        />
-      )}
-      {props.type === "partial" && (
-        <rect x="4" y="4" width="8" height="8" fill="currentColor" />
-      )}
-    </svg>
-  );
-};
-
-export default CheckboxInput;