@team-monolith/cds 0.4.0 → 0.4.3

package/src/cds/components/RadioInput.tsx

@@ -1,226 +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 RadioInputType = "default" | "selected";
-
-const TYPE_TO_ICON_STYLE = (
-  theme: Theme,
-  type: RadioInputType,
-  disabled: boolean
-): SerializedStyles => {
-  return {
-    default: css`
-      path {
-        stroke: ${theme.color.background.neutralAltActive};
-        fill: ${theme.color.background.neutralBase};
-      }
-      ${disabled
-        ? css`
-            cursor: default;
-            path {
-              stroke: ${theme.color.background.primaryDisabled};
-              fill: ${theme.color.background.neutralAlt};
-            }
-          `
-        : css`
-            input[type="radio"]:hover + & {
-              path {
-                stroke: ${theme.color.background.primary};
-              }
-            }
-          `}
-    `,
-    selected: css`
-      path {
-        stroke: ${theme.color.background.primary};
-        fill: ${theme.color.background.neutralBase};
-      }
-      rect {
-        fill: ${theme.color.background.primary};
-      }
-      ${disabled
-        ? css`
-            cursor: default;
-            path {
-              stroke: ${theme.color.background.primaryDisabled};
-              fill: ${theme.color.background.neutralAlt};
-            }
-            rect {
-              fill: ${theme.color.background.primaryDisabled};
-            }
-          `
-        : css`
-            input[type="radio"]:hover + & {
-              path {
-                stroke: ${theme.color.background.primaryActive};
-              }
-              rect {
-                fill: ${theme.color.background.primaryActive};
-              }
-            }
-          `}
-    `,
-  }[type];
-};
-
-export interface RadioInputProps {
-  className?: string;
-  // component: React.ElementType; // 불필요한 dom 중첩을 막기 위해 사용하지 않습니다.
-
-  /** 라디오 버튼의 선택 여부(Controlled) */
-  checked: boolean;
-  /** 라디오 버튼의 라벨 */
-  label?: string;
-  /** 라디오 버튼의 하단 마진(8px) 여부 */
-  spacer?: boolean;
-  /** 라디오 버튼의 비활성화 여부 */
-  disabled?: boolean;
-  /** 라디오 버튼 선택값 변경시 호출되는 함수 */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  /** HTML input 태그에 전달될 props */
-  inputProps?: InputHTMLAttributes<HTMLInputElement>;
-}
-
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=420-3704&t=lvpbJKdtz7Lb8wIQ-0)
- */
-const RadioInput = React.forwardRef<any, RadioInputProps>((props, ref) => {
-  const {
-    className,
-    checked,
-    label,
-    spacer,
-    disabled,
-    onChange,
-    inputProps,
-    ...other
-  } = props;
-
-  if (!label) {
-    return <RadioButton {...props} ref={ref} />;
-  }
-
-  const radioProps = {
-    checked,
-    spacer,
-    disabled,
-    onChange,
-    inputProps,
-  };
-
-  return (
-    <Label className={className} ref={ref} {...other}>
-      <RadioButton {...radioProps} />
-      <span
-        css={css`
-          margin-left: 8px;
-        `}
-      >
-        {label}
-      </span>
-    </Label>
-  );
-});
-
-const RadioButton = React.forwardRef<any, RadioInputProps>((props, ref) => {
-  const {
-    className,
-    checked,
-    label,
-    spacer = false,
-    disabled = false,
-    onChange,
-    inputProps,
-    ...other
-  } = props;
-  const type: RadioInputType = props.checked ? "selected" : "default";
-
-  return (
-    <RadioButtonContainer
-      className={className}
-      spacer={spacer}
-      ref={ref}
-      {...other}
-    >
-      <StyledInput
-        type="radio"
-        {...inputProps}
-        checked={checked}
-        disabled={disabled}
-        onChange={onChange}
-      />
-      <RadioButtonIcon type={type} disabled={disabled} />
-    </RadioButtonContainer>
-  );
-});
-
-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 RadioButtonContainer = styled.span<{
-  spacer: boolean;
-}>(
-  ({ spacer }) => css`
-    display: inline-flex;
-    position: relative;
-    width: 16px;
-    height: 16px;
-    cursor: 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};
-`;
-
-// default와 selected 구조가 유사하여 하나의 컴포넌트로 표현합니다.
-const RadioButtonIcon = (props: {
-  type: RadioInputType;
-  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={TYPE_TO_ICON_STYLE(theme, props.type, props.disabled)}
-    >
-      <path
-        d="M0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8Z"
-        fill="currentColor"
-        stroke="currentColor"
-      />
-      {props.type === "selected" && (
-        <rect x="4" y="4" width="8" height="8" rx="4" fill="currentColor" />
-      )}
-    </svg>
-  );
-};
-
-export default RadioInput;

package/src/cds/components/SquareButton.tsx

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

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