@team-monolith/cds 0.4.0 → 0.4.3

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;

package/src/cds/components/Input.tsx

@@ -1,171 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { Theme, css } from "@emotion/react";
-import styled from "@emotion/styled";
-import React from "react";
-import {
-  InputBase,
-  InputBaseColor,
-  InputBaseProps,
-  InputBaseSize,
-} from "./InputBase";
-
-export type InputColor = InputBaseColor;
-
-export type InputSize = InputBaseSize;
-
-export interface InputProps extends InputBaseProps {
-  /** Input 컴포넌트 상단에 노출될 문자열 */
-  label?: string;
-
-  /** Input 컴포넌트 하단에 노출될 문자열 */
-  hintText?: string;
-
-  /** hint 영역 좌측에 노출될 아이콘 */
-  hintIcon?: React.ReactNode;
-}
-
-const COLOR_TO_HINT_STYLES = (
-  theme: Theme,
-  color: InputColor,
-  disabled?: boolean
-) =>
-  disabled
-    ? css`
-        color: ${theme.color.foreground.neutralBaseDisabled};
-      `
-    : {
-        default: css`
-          color: ${theme.color.foreground.neutralBaseDisabled};
-        `,
-        activePrimary: css`
-          color: ${theme.color.foreground.neutralBaseDisabled};
-        `,
-        activeDanger: css`
-          color: ${theme.color.foreground.danger};
-        `,
-        activeSuccess: css`
-          color: ${theme.color.foreground.success};
-        `,
-      }[color];
-
-const SIZE_TO_FONT_STYLES = (size: InputSize) =>
-  ({
-    small: css`
-      font-size: 14px;
-      line-height: 20px;
-      svg {
-        width: 16px;
-        height: 16px;
-      }
-    `,
-    medium: css`
-      font-size: 16px;
-      line-height: 24px;
-      svg {
-        width: 16px;
-        height: 16px;
-      }
-    `,
-    large: css`
-      font-size: 18px;
-      line-height: 28px;
-      svg {
-        width: 18px;
-        height: 18px;
-      }
-    `,
-  }[size]);
-
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=26-10284&t=HnIfxpf8uR6WmzMW-0)
- */
-const Input = React.forwardRef<any, InputProps>(
-  (props, ref): React.ReactElement => {
-    const {
-      label,
-      hintText,
-      hintIcon,
-      className,
-      color,
-      size,
-      placeholder,
-      disabled,
-      startIcon,
-      startLabel,
-      endLabel,
-      endIcon,
-      inputProps,
-      inputRef,
-      fullWidth,
-      onChange,
-      onClear,
-      defaultValue,
-      value,
-      ...other
-    } = props;
-
-    const {
-      className: _className,
-      ...inputBaseProps
-    } = props;
-
-    return (
-      <InputWrapper
-        className={props.className}
-        size={props.size}
-        fullWidth={props.fullWidth}
-        ref={ref}
-        {...other}
-      >
-        {label ? (
-          <Label disabled={props.disabled}>
-            {label} <InputBase {...inputBaseProps} />
-          </Label>
-        ) : (
-          <InputBase {...inputBaseProps} />
-        )}
-        {hintText && (
-          <Hint color={props.color} disabled={props.disabled}>
-            {hintIcon}
-            {hintText}
-          </Hint>
-        )}
-      </InputWrapper>
-    );
-  }
-);
-
-const InputWrapper = styled.span<{ size: InputSize; fullWidth?: boolean }>`
-  display: inline-flex;
-  flex-direction: column;
-  gap: 8px;
-  ${({ size }) => SIZE_TO_FONT_STYLES(size)}
-  ${({ fullWidth }) => fullWidth && `width: 100%;`}
-
-  position: relative;
-`;
-
-const Label = styled.label<{ disabled?: boolean }>`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  ${({ theme, disabled }) =>
-    disabled &&
-    css`
-      color: ${theme.color.foreground.neutralBaseDisabled};
-    `}
-`;
-
-const Hint = styled.div<{
-  color: InputColor;
-  disabled?: boolean;
-}>(
-  ({ theme, color, disabled }) => css`
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    ${COLOR_TO_HINT_STYLES(theme, color, disabled)};
-  `
-);
-
-export default Input;