@team-monolith/cds 0.4.0 → 0.4.3

package/src/cds/components/InputBase.tsx

@@ -1,226 +0,0 @@
-import { Theme, css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { InputHTMLAttributes } from "react";
-import { CloseCircleFillIcon } from "../icons/system";
-import { RESET_BUTTON } from "../utils/reset";
-
-export type InputBaseColor =
-  | "default"
-  | "activePrimary"
-  | "activeDanger"
-  | "activeSuccess";
-
-export type InputBaseSize = "large" | "medium" | "small";
-
-export interface InputBaseProps {
-  className?: string;
-  // component?: React.ElementType; Input은 component를 받지 않습니다.
-
-  /** 컴포넌트 색상 */
-  color: InputBaseColor;
-
-  /** 컴포넌트 크기 */
-  size: InputBaseSize;
-
-  /** 입력되기 전 Input 컴포넌트에 노출될 문자열 */
-  placeholder?: string;
-
-  /** 비활성화 여부 */
-  disabled?: boolean;
-
-  /** Input 컴포넌트 내의 좌측 영역에 노출될 아이콘 */
-  startIcon?: React.ReactNode;
-
-  /** Input 컴포넌트 내의 좌측 영역에 노출될 텍스트.
-   * `startIcon` 보다 우측에 노출됩니다. */
-  startLabel?: string;
-
-  /** Input 컴포넌트 내의 우측 영역에 노출될 텍스트.
-   * `endIcon` 보다 좌측에 노출됩니다. */
-  endLabel?: string;
-
-  /** Input 컴포넌트 내의 우측 영역에 노출될 아이콘 */
-  endIcon?: React.ReactNode;
-
-  /** HTML input 태그에 전달될 ref */
-  inputRef?: React.LegacyRef<HTMLInputElement>;
-
-  /** HTML input 태그에 전달될 props */
-  inputProps?: InputHTMLAttributes<HTMLInputElement>;
-
-  /** true일 경우, Input이 상위 요소의 전체 길이를 차지하게 됩니다. */
-  fullWidth?: boolean;
-
-  /** 값이 변경될때 호출될 콜백 함수 */
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-
-  /**
-   * Clear Button을 클릭했을 때의 콜백 함수.
-   * 설정하면, Input 컴포넌트 내의 우측 영역에 Clear Button이 노출됩니다.
-   */
-  onClear?: () => void;
-
-  /** input의 value의 초기값 (UnControlled Component) */
-  defaultValue?: any;
-
-  /** input의 value (Controlled Component) */
-  value?: any;
-}
-
-const COLOR_TO_INPUT_STYLES = (
-  theme: Theme,
-  color: InputBaseColor,
-  disabled: boolean
-) => {
-  if (disabled) {
-    return css`
-      border: none;
-      background: ${theme.color.foreground.neutralBaseDisabled};
-      color: ${theme.color.background.neutralAlt};
-    `;
-  }
-  return {
-    default: css`
-      border: none;
-      background: ${theme.color.background.neutralAlt};
-      color: ${theme.color.foreground.neutralBase};
-    `,
-    activePrimary: css`
-      border: 2px solid ${theme.color.foreground.primary};
-      background: ${theme.color.background.neutralBase};
-      color: ${theme.color.foreground.neutralBase};
-    `,
-    activeDanger: css`
-      border: 2px solid ${theme.color.foreground.danger};
-      background: ${theme.color.background.neutralBase};
-      color: ${theme.color.foreground.neutralBase};
-    `,
-    activeSuccess: css`
-      border: 2px solid ${theme.color.foreground.success};
-      background: ${theme.color.background.neutralBase};
-      color: ${theme.color.foreground.neutralBase};
-    `,
-  }[color];
-};
-
-const SIZE_TO_STYLES = (size: InputBaseSize) =>
-  ({
-    small: css`
-      padding-top: 8px;
-      padding-bottom: 8px;
-      width: 300px;
-      height: 36px;
-    `,
-    medium: css`
-      padding-top: 12px;
-      padding-bottom: 12px;
-      width: 375px;
-      height: 48px;
-    `,
-    large: css`
-      padding-top: 14px;
-      padding-bottom: 14px;
-      width: 375px;
-      height: 56px;
-    `,
-  }[size]);
-
-export function InputBase(props: InputBaseProps): React.ReactElement {
-  const {
-    className,
-    color,
-    size,
-    placeholder,
-    disabled = false,
-    startIcon,
-    startLabel,
-    endLabel,
-    endIcon,
-    inputProps,
-    inputRef,
-    fullWidth = false,
-    onChange,
-    onClear,
-    defaultValue,
-    value,
-  } = props;
-
-  return (
-    <InputContainer
-      className={className}
-      disabled={disabled}
-      color={color}
-      inputSize={size}
-      fullWidth={fullWidth}
-    >
-      {startIcon}
-      {startLabel && <span>{startLabel}</span>}
-      <StyledInput
-        {...inputProps}
-        ref={inputRef}
-        onChange={onChange}
-        placeholder={placeholder}
-        disabled={disabled}
-        defaultValue={defaultValue}
-        value={value}
-      />
-      {endLabel && <span>{endLabel}</span>}
-      {endIcon}
-      {onClear && (
-        <ClearButton onClick={onClear} disabled={disabled} tabIndex={-1}>
-          <CloseCircleFillIcon />
-        </ClearButton>
-      )}
-    </InputContainer>
-  );
-}
-
-const InputContainer = styled.div<{
-  color: InputBaseColor;
-  inputSize: InputBaseSize;
-  disabled: boolean;
-  fullWidth: boolean;
-}>(
-  ({ theme, color, inputSize, disabled, fullWidth }) => css`
-    display: flex;
-    align-items: center;
-    gap: 16px;
-
-    box-sizing: border-box;
-    padding: 14px 16px;
-    border-radius: 8px;
-    ${COLOR_TO_INPUT_STYLES(theme, color, disabled)}
-    ${SIZE_TO_STYLES(inputSize)}
-    ${fullWidth && `width: inherit;`} // InputWrapper의 width를 따릅니다.
-  `
-);
-
-const StyledInput = styled.input(
-  ({ theme }) => css`
-    appearance: none;
-    flex: 1;
-    min-width: 0;
-    border: none;
-    padding: 0;
-    background-color: transparent;
-    font: inherit;
-    color: currentColor;
-
-    &:focus-visible {
-      outline: none;
-    }
-    &::placeholder {
-      color: ${theme.color.foreground.neutralBaseDisabled};
-    }
-  `
-);
-
-const ClearButton = styled.button`
-  ${RESET_BUTTON}
-  color: currentColor;
-  &:not(:disabled) {
-    cursor: pointer;
-  }
-  display: flex;
-  align-items: center;
-`;

package/src/cds/components/Pagination.tsx

@@ -1,99 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css } from "@emotion/react";
-import * as React from "react";
-import styled from "@emotion/styled";
-import { Pagination as MuiPagination } from "@mui/material";
-import { HOVER } from "../utils/hover";
-
-export interface PaginationProps {
-  className?: string;
-  // component: React.ElementType; // 불필요한 dom 중첩을 막기 위해 사용하지 않습니다.
-  /** 시작과 끝에 오는 페이지의 수 */
-  boundaryCount?: number;
-  /** 전체 페이지의 수 */
-  count?: number;
-  /** 기본 페이지 (UnControlled) */
-  defaultPage?: number;
-  /** 비활성화 여부 */
-  disabled?: boolean;
-  /** 다음 페이지로 이동하는 버튼 숨김여부 */
-  hideNextButton?: boolean;
-  /** 이전 페이지로 이동하는 버튼 숨김여부 */
-  hidePrevButton?: boolean;
-  /** 페이지가 변경되었을 때 콜백함수 */
-  onChange?: (event: React.ChangeEvent<unknown>, page: number) => void;
-  /** 현재 페이지 전후로 나타나는 페이지의 수 */
-  siblingCount?: number;
-  /** 현재 페이지 */
-  page: number;
-}
-
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=35-798&t=6OdVgm0hiYaq5PFw-0)
- */
-const Pagination = React.forwardRef<any, PaginationProps>(
-  (props, ref): React.ReactElement => (
-    <StyledPagination siblingCount={2} shape="rounded" {...props} ref={ref} />
-));
-
-const StyledPagination = styled(MuiPagination)(
-  ({ theme }) => css`
-    &.MuiPagination-root {
-      & .MuiPagination-ul {
-        li {
-          width: 32px;
-          height: 32px;
-          margin-left: 4px;
-          margin-right: 4px;
-          button {
-            padding: 0;
-            margin: 0;
-          }
-        }
-      }
-      & .MuiPaginationItem-root {
-        ${HOVER(css`
-          background-color: ${theme.color.background.neutralAlt};
-        `)}
-      }
-      & .MuiPaginationItem-text {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-        border-radius: 8px;
-        color: ${theme.color.foreground.neutralBase};
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 24px;
-        padding: 1px 7px;
-        margin: 0;
-      }
-      & .Mui-selected {
-        border: 2px solid ${theme.color.background.primary};
-        background-color: transparent;
-        color: ${theme.color.background.primary};
-        font-weight: 700;
-        ${HOVER(css`
-          background-color: transparent;
-        `)}
-      }
-      & .Mui-disabled {
-        background-color: transparent;
-        color: ${theme.color.foreground.neutralBaseDisabled};
-      }
-      & .Mui-disabled.Mui-selected {
-        border: 2px solid ${theme.color.background.primaryDisabled};
-        background-color: transparent;
-        color: ${theme.color.background.primaryDisabled};
-      }
-      & .MuiPaginationItem-ellipsis {
-        ${HOVER(css`
-          background-color: transparent;
-        `)}
-      }
-    }
-  `
-);
-
-export default Pagination;

package/src/cds/components/PinInput.tsx

@@ -1,322 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { Theme, css } from "@emotion/react";
-import styled from "@emotion/styled";
-import React, { useRef, useState } from "react";
-import { InputBase } from "./InputBase";
-
-export type PinInputColor =
-  | "default"
-  | "activePrimary"
-  | "activeDanger"
-  | "activeSuccess";
-
-export type PinInputSize = "large" | "medium" | "small";
-
-export interface PinInputProps {
-  className?: string;
-  // component?: React.ElementType; Input은 component를 받지 않습니다.
-
-  /** `true` 값일 때 첫번째 Input에 자동으로 포커싱합니다. */
-  autoFocus?: boolean;
-
-  /** 컴포넌트 크기 */
-  size: PinInputSize;
-
-  /** 입력되기 전 PinInput 컴포넌트에 노출될 문자열 */
-  placeholder?: string;
-
-  /** Input 컴포넌트 상단에 노출될 문자열 */
-  label?: string;
-
-  /** Input 컴포넌트 하단에 노출될 문자열 */
-  hintText?: string;
-
-  /** hint 영역 좌측에 노출될 아이콘 */
-  hintIcon?: React.ReactNode;
-
-  /** 비활성화 여부 */
-  disabled?: boolean;
-
-  /** 에러 상태 여부 */
-  error?: boolean;
-
-  /** 성공 상태 여부 */
-  positive?: boolean;
-
-  /** 값이 변경될때 호출될 콜백 함수 */
-  onChange: (e: {
-    values: string[];
-    event: React.ChangeEvent<HTMLInputElement>;
-  }) => void;
-
-  /** PinInput의 value (Controlled Component) */
-  values: string[];
-}
-
-const SIZE_TO_STYLES = (size: PinInputSize) =>
-  ({
-    small: css`
-      width: 36px;
-    `,
-    medium: css`
-      width: 48px;
-    `,
-    large: css`
-      width: 56px;
-    `,
-  }[size]);
-
-const COLOR_TO_HINT_STYLES = (
-  theme: Theme,
-  color: PinInputColor,
-  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: PinInputSize) =>
-  ({
-    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]);
-
-/** i번째 값을 value로 바꾸는 setState Wrapper 함수  */
-function updateFocus(
-  value: boolean,
-  i: number,
-  setFocus: React.Dispatch<React.SetStateAction<boolean[]>>
-) {
-  setFocus((prevFocus) => {
-    const newFocus = prevFocus.slice();
-    newFocus[i] = value;
-    return newFocus;
-  });
-}
-
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=26-11031&t=n7a8XP4k8R2TGmiO-0)
- */
-const PinInput = React.forwardRef<any, PinInputProps>(
-  (props, ref): React.ReactElement => {
-    const {
-      className,
-      autoFocus,
-      size,
-      placeholder,
-      label,
-      hintText,
-      hintIcon,
-      disabled = false,
-      error,
-      positive,
-      onChange,
-      values,
-      ...other
-    } = props;
-
-    return (
-      <PinInputWrapper className={className} size={size} ref={ref} {...other}>
-        {label ? (
-          <Label disabled={disabled}>
-            {label} <PinInputComponent {...props} />
-          </Label>
-        ) : (
-          <PinInputComponent {...props} />
-        )}
-        {hintText && (
-          <Hint
-            color={
-              error ? "activeDanger" : positive ? "activeSuccess" : "default"
-            }
-            disabled={disabled}
-          >
-            {hintIcon}
-            {hintText}
-          </Hint>
-        )}
-      </PinInputWrapper>
-    );
-  }
-);
-
-function PinInputComponent(props: PinInputProps) {
-  const {
-    autoFocus,
-    size,
-    placeholder,
-    disabled = false,
-    error,
-    positive,
-    onChange,
-    values,
-  } = props;
-
-  const [focus, setFocus] = useState<boolean[]>([]);
-  const refs = useRef<(HTMLInputElement | null)[]>([]);
-
-  return (
-    <PinInputContainer>
-      {values.map((value, i) => (
-        <SqaureInput
-          key={i}
-          color={
-            error
-              ? "activeDanger"
-              : positive
-              ? "activeSuccess"
-              : focus[i]
-              ? "activePrimary"
-              : "default"
-          }
-          inputRef={(element) => {
-            refs.current[i] = element;
-          }}
-          onChange={(event) => {
-            const eventValue = event.target.value;
-
-            if (eventValue.length > 2) {
-              // 복붙으로 입력을 입력한 경우
-              if (
-                eventValue.length === values.length &&
-                eventValue.match(/^[0-9]+$/)
-              ) {
-                onChange({ values: eventValue.split(""), event });
-              }
-              return;
-            }
-
-            // 값을 지웠을 때
-            if (eventValue === "") {
-              const newValues = values.slice();
-              newValues[i] = "";
-              onChange({ values: newValues, event });
-              return;
-            }
-
-            // 원래 값이 있었고, 새 값을 입력했을 때
-            // 입력 완료된 값(2자리)으로부터 새로 입력한 숫자를 추출한다.
-            const currentValue = values[i];
-            let newValue = eventValue;
-            if (currentValue[0] === eventValue[0]) {
-              // 예) 이전 값: '2', 입력된 상태: '23' 인 경우
-              newValue = eventValue[1]; // 뒷 자리가 새로 입력된 숫자
-            } else if (currentValue[0] === eventValue[1]) {
-              // 예) 이전 값: '2', 입력된 상태: '32' 인 경우
-              newValue = eventValue[0]; // 앞 자리가 새로 입력된 숫자
-            }
-
-            // 새로 입력된 값이 숫자일때만 onChange를 실행
-            if (newValue.match(/^[0-9]$/)) {
-              const newValues = values.slice();
-              newValues[i] = newValue;
-              onChange({ values: newValues, event });
-              // 자동으로 다음 input으로 포커스 이동시킴.
-              if (i < values.length - 1) {
-                refs.current[i + 1]?.focus();
-              }
-            }
-          }}
-          placeholder={focus[i] ? "" : placeholder}
-          disabled={disabled}
-          size={size}
-          inputProps={{
-            autoFocus: autoFocus ? i === 0 : false,
-            onBlur: () => updateFocus(false, i, setFocus),
-            onFocus: () => updateFocus(true, i, setFocus),
-            onKeyDown: (e) => {
-              // Backspace 키로 이전 input으로의 포커스 이동
-              if (e.key === "Backspace" && values[i] === "" && i > 0) {
-                refs.current[i - 1]?.focus();
-              }
-            },
-          }}
-          fullWidth={true}
-          value={value}
-        />
-      ))}
-    </PinInputContainer>
-  );
-}
-
-const PinInputWrapper = styled.span<{ size: PinInputSize }>`
-  display: inline-flex;
-  flex-direction: column;
-  gap: 8px;
-  ${({ size }) => SIZE_TO_FONT_STYLES(size)}
-`;
-
-const PinInputContainer = styled.span`
-  display: inline-flex;
-  gap: 8px;
-`;
-
-const SqaureInput = styled(InputBase)<{ size: PinInputSize }>`
-  ${({ size }) => SIZE_TO_STYLES(size)}
-  padding: 0;
-  input {
-    text-align: center;
-  }
-`;
-
-const Hint = styled.div<{
-  color: PinInputColor;
-  disabled: boolean;
-}>(
-  ({ theme, color, disabled }) => css`
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    ${COLOR_TO_HINT_STYLES(theme, color, disabled)};
-  `
-);
-
-const Label = styled.label<{ disabled: boolean }>`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  ${({ theme, disabled }) =>
-    disabled &&
-    css`
-      color: ${theme.color.foreground.neutralBaseDisabled};
-    `}
-`;
-
-export default PinInput;