@team-monolith/cds 0.1.0

package/src/cds/components/CheckboxInput.tsx

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

@@ -0,0 +1,166 @@
+/** @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;
+
+    return (
+      <InputWrapper
+        className={props.className}
+        size={props.size}
+        fullWidth={props.fullWidth}
+        ref={ref}
+        {...other}
+      >
+        {label ? (
+          <Label disabled={props.disabled}>
+            {label} <InputBase {...props} />
+          </Label>
+        ) : (
+          <InputBase {...props} />
+        )}
+        {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;

package/src/cds/components/InputBase.tsx

@@ -0,0 +1,226 @@
+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}>
+          <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;
+`;