@weing-dev/ui-kit-primitive 0.0.0 → 0.0.2

package/src/components/TimeInput/TimeInput.module.scss

@@ -1,211 +0,0 @@
-$Basis: 105px;
-
-@layer TimeInput {
-  .InputWrapper {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 4px;
-    border-radius: 8px;
-    border: 1px solid var(--border-color, var(--componentTextfieldOutline));
-    color: var(--color, var(--textPrimary, #1c252e));
-    background-color: var(--background-color, transparent);
-    height: 40px;
-    flex: 1;
-    @include bodyRegularSmall;
-
-    &.row {
-      flex-direction: row;
-      flex-grow: 1;
-    }
-
-    &.contained {
-      background-color: var(--componentTextfieldFilled, #edeff2);
-    }
-
-    &.large {
-      @include bodyRegularMedium;
-      height: 48px;
-    }
-
-    &.error {
-      border-color: var(--textError, #f5222d);
-    }
-
-    &.warning {
-      border-color: var(--textWarning, #ffab00);
-    }
-
-    &.success {
-      border-color: var(--textSuccess, #1cc95c);
-    }
-
-    &.focused {
-      border-color: var(--border-color, var(--componentTextfieldOutline));
-    }
-
-    &.disabled {
-      cursor: not-allowed;
-    }
-
-    .Input {
-      border: none;
-      outline: none;
-      background: none;
-      font: inherit;
-      text-align: center;
-      appearance: none;
-      display: inline-block;
-      flex: 1;
-      color: var(--color, inherit);
-
-      &::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-      }
-
-      &::placeholder {
-        color: var(--placeholder-color, var(--textTertiary, #919eab));
-        font: inherit;
-      }
-
-      &.error {
-        color: var(--textError, #f5222d);
-
-        &::placeholder {
-          color: var(--textError, #f5222d);
-        }
-      }
-
-      // &.warning {
-      //   color: var(--textWarning, #ffab00);
-
-      //   &::placeholder {
-      //     color: var(--textWarning, #ffab00);
-      //   }
-      // }
-
-      // &.success {
-      //   color: var(--textSuccess, #1cc95c);
-
-      //   &::placeholder {
-      //     color: var(--textSuccess, #1cc95c);
-      //   }
-      // }
-
-      &.readOnly {
-        cursor: default;
-      }
-
-      &.disabled {
-        cursor: not-allowed;
-        color: var(--textDisabled, #c4cdd5);
-        &::placeholder {
-          color: var(--textDisabled, #c4cdd5);
-        }
-      }
-    }
-
-    .TimeRange {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      flex: 1;
-    }
-  }
-
-  .Colon {
-    color: #919eab;
-    &.error {
-      color: var(--textError, #f5222d);
-    }
-    &.warning {
-      color: var(--textWarning, #ffab00);
-    }
-    &.success {
-      color: var(--textSuccess, #1cc95c);
-    }
-    &.disabled {
-      color: var(--textDisabled, #c4cdd5);
-    }
-  }
-
-  .Separator {
-    color: #919eab;
-
-    &.error {
-      color: var(--textError, #f5222d);
-    }
-    &.warning {
-      color: var(--textWarning, #ffab00);
-    }
-    &.success {
-      color: var(--textSuccess, #1cc95c);
-    }
-    &.disabled {
-      color: var(--textDisabled, #c4cdd5);
-    }
-  }
-
-  .HelperText {
-    color: var(--textTertiary, #919eab);
-    &.error {
-      color: var(--textError, #f5222d);
-    }
-    &.warning {
-      color: var(--textWarning, #ffab00);
-    }
-    &.success {
-      color: var(--textSuccess, #1cc95c);
-    }
-  }
-
-  .TimeInputLabel {
-    @include captionBoldMedium;
-    color: var(--textSecondary, #637381);
-    margin-bottom: 4px;
-
-    &.focused {
-      color: var(--actionAction);
-    }
-
-    &.error {
-      color: var(--textError, #f5222d);
-    }
-
-    &.warning {
-      color: var(--textWarning, #ffab00);
-    }
-
-    &.success {
-      color: var(--textSuccess, #1cc95c);
-    }
-
-    &.row {
-      margin-bottom: 0;
-      margin-right: 8px;
-      flex: 0 0 var(--basis, $Basis);
-    }
-
-    &.large,
-    &.row.small {
-      @include bodyBoldSmall;
-    }
-
-    &.row.large {
-      @include bodyBoldMedium;
-    }
-  }
-
-  .TimeInputRoot {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    width: 100%;
-
-    &.row {
-      flex-direction: row;
-      align-items: center;
-    }
-  }
-}

package/src/components/TimeInput/TimeInput.tsx

@@ -1,411 +0,0 @@
-"use client";
-import React from "react";
-import styles from "./TimeInput.module.scss";
-import cn from "classnames/bind";
-import { TimeInputContext, TimeInputContextType } from "./TimeInput.context";
-import HelperTextComponent from "../HelperText/HelperText";
-import useTimeInputColors from "./TimeInput.colors";
-
-const cx = cn.bind(styles);
-
-type InputProps = {
-  index: number;
-  placeholder: string;
-} & React.JSX.IntrinsicElements["input"];
-const Input = (props: InputProps) => {
-  const { index, placeholder, ...rest } = props;
-  const {
-    inputRefs,
-    status,
-    disabled,
-    readOnly,
-    focused,
-    handleChange,
-    handleBlur,
-    handleKeyDown,
-    handleFocus,
-  } = React.use(TimeInputContext);
-  const max = index % 2 === 0 ? 23 : 59;
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    const numValue = parseInt(value);
-
-    // 빈 값이거나 NaN인 경우 그대로 통과
-    if (!value || isNaN(numValue)) {
-      handleChange?.(e, index);
-      return;
-    }
-
-    // 최대값을 초과하는 경우 최대값으로 설정
-    if (numValue > max) {
-      e.target.value = max.toString();
-    }
-
-    handleChange?.(e, index);
-
-    // 두 자리 수가 입력되면 다음 입력으로 포커스
-    if (value.length === 2 && index < 3) {
-      inputRefs?.current[index + 1]?.focus();
-    }
-  };
-
-  return (
-    <input
-      {...rest}
-      className={cx("Input", rest.className, status, {
-        disabled,
-        readOnly,
-        focused,
-      })}
-      type="number"
-      ref={(el) => {
-        if (el) inputRefs!.current[index] = el;
-      }}
-      onChange={handleInputChange}
-      onBlur={() => handleBlur?.(inputRefs!.current[index].value, max, index)}
-      onFocus={handleFocus}
-      placeholder={placeholder}
-      onKeyDown={(e) => handleKeyDown?.(e, index)}
-      readOnly={readOnly}
-      disabled={disabled}
-      min={0}
-      max={max}
-    />
-  );
-};
-
-type TimeRangeProps = React.PropsWithChildren<
-  React.JSX.IntrinsicElements["div"]
->;
-const TimeRange = (props: TimeRangeProps) => {
-  const { children, ...rest } = props;
-  return (
-    <div {...rest} className={cx("TimeRange", rest.className)}>
-      {children}
-    </div>
-  );
-};
-
-type ColonProps = React.JSX.IntrinsicElements["span"];
-const Colon = (props: ColonProps) => {
-  const { ...rest } = props;
-  const { status, disabled } = React.use(TimeInputContext);
-  return (
-    <span
-      {...rest}
-      className={cx("Colon", rest.className, status, { disabled })}
-    >
-      :
-    </span>
-  );
-};
-
-type SeparatorProps = React.JSX.IntrinsicElements["span"];
-const Separator = (props: SeparatorProps) => {
-  const { ...rest } = props;
-  const { status, disabled } = React.use(TimeInputContext);
-  return (
-    <span
-      {...rest}
-      className={cx("Separator", rest.className, status, { disabled })}
-    >
-      -
-    </span>
-  );
-};
-
-type HelperTextProps = React.PropsWithChildren<{
-  className?: string;
-  warningColor?: string;
-  errorColor?: string;
-  successColor?: string;
-  defaultColor?: string;
-  infoColor?: string;
-  size?: number;
-  iconVisible?: boolean;
-}>;
-
-const HelperText = (props: HelperTextProps) => {
-  const { children, ...rest } = props;
-  const { status, disabled } = React.use(TimeInputContext);
-
-  if (!status || disabled) return null;
-
-  return (
-    <HelperTextComponent {...rest} status={status}>
-      {children ?? "종료 시간이 시작 시간보다 커야 합니다."}
-    </HelperTextComponent>
-  );
-};
-
-type InputWrapperProps = React.PropsWithChildren<
-  React.JSX.IntrinsicElements["div"]
->;
-const InputWrapper = (props: InputWrapperProps) => {
-  const { children, ...rest } = props;
-  const { size, variant, status, focused, disabled, direction } =
-    React.use(TimeInputContext);
-  const timeInputColors = useTimeInputColors();
-  const colorSet = timeInputColors[variant ?? "outlined"];
-
-  return (
-    <div
-      {...rest}
-      className={cx(
-        "InputWrapper",
-        rest.className,
-        size,
-        variant,
-        status,
-        direction,
-        {
-          focused,
-          disabled,
-        }
-      )}
-      style={{
-        "--background-color": disabled
-          ? colorSet.disabled.backgroundColor
-          : colorSet.inactive.backgroundColor,
-        "--border-color": focused
-          ? colorSet.focused.borderColor
-          : colorSet.inactive.borderColor,
-        "--color": disabled ? colorSet.disabled.color : colorSet.inactive.color,
-      }}
-    >
-      {children}
-    </div>
-  );
-};
-
-type LabelProps = React.PropsWithChildren<{
-  className?: string;
-  focusedColor?: string;
-}>;
-
-const Label = (props: LabelProps) => {
-  const { className, children, focusedColor } = props;
-  const { focused, status, size, direction, flexBasis } =
-    React.use(TimeInputContext);
-
-  return (
-    <span
-      className={cx("TimeInputLabel", className, status, size, direction, {
-        focused,
-      })}
-      style={{
-        color: focused ? focusedColor : undefined,
-        ...(flexBasis ? { "--basis": flexBasis } : {}),
-      }}
-    >
-      {children}
-    </span>
-  );
-};
-
-type RootProps = React.PropsWithChildren<
-  Omit<
-    TimeInputContextType,
-    "inputRefs" | "handleChange" | "handleBlur" | "handleKeyDown"
-  > & {
-    className?: string;
-  }
->;
-
-const Root = (props: RootProps) => {
-  const {
-    children,
-    className,
-    value = "",
-    size = "small",
-    disabled = false,
-    readOnly = false,
-    focused: externalFocused,
-    variant = "outlined",
-    direction = "column",
-    flexBasis,
-    status: externalStatus,
-    onChange,
-  } = props;
-
-  const [time, setTime] = React.useState<string>(value);
-  const [internalStatus, setInternalStatus] = React.useState<
-    "error" | "warning" | "success"
-  >();
-  const [internalFocused, setInternalFocused] = React.useState(externalFocused);
-  const inputRefs = React.useRef<HTMLInputElement[]>([]);
-
-  const padTime = (value: string, max: number) => {
-    if (!value) return "";
-    const numValue = parseInt(value);
-    return numValue <= max ? String(numValue).padStart(2, "0") : "";
-  };
-
-  const handleFocus = React.useCallback(() => {
-    if (disabled || readOnly) return;
-    setInternalFocused(true);
-  }, [disabled, readOnly]);
-
-  const handleBlur = React.useCallback(
-    (value: string, max: number, index: number) => {
-      const newTime = padTime(value, max);
-      setTime(newTime);
-      inputRefs.current[index].value = newTime;
-      setInternalFocused(false);
-    },
-    []
-  );
-
-  const handleKeyDown = React.useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
-      const currentInput = inputRefs.current[index];
-      const currentValue = currentInput.value;
-
-      switch (e.key) {
-        case "Backspace":
-          // 현재 입력이 비어있고, 이전 입력이 존재할 때만 이전으로 이동
-          if (currentValue === "" && index > 0) {
-            e.preventDefault();
-            inputRefs.current[index - 1].focus();
-          }
-          break;
-
-        case "Tab":
-          if (e.shiftKey) {
-            if (index > 0) {
-              e.preventDefault();
-              inputRefs.current[index - 1].focus();
-            }
-          } else {
-            if (index < 3) {
-              e.preventDefault();
-              // 현재 값이 한 자리 수일 경우 두 자리로 패딩
-              if (currentValue && currentValue.length === 1) {
-                const max = index % 2 === 0 ? 23 : 59;
-                handleBlur(currentValue, max, index);
-              }
-              inputRefs.current[index + 1].focus();
-            }
-          }
-          break;
-      }
-    },
-    [handleBlur]
-  );
-
-  const validateTimeRange = React.useCallback(() => {
-    const time = inputRefs.current.map((el) => el.value);
-    const startTime = `${time[0]}:${time[1]}`;
-    const endTime = `${time[2]}:${time[3]}`;
-
-    if (parseInt(time[2] + time[3]) <= parseInt(time[0] + time[1])) {
-      setInternalStatus("error");
-    } else {
-      setInternalStatus(undefined);
-      if (onChange) onChange({ start: startTime, end: endTime });
-    }
-  }, [onChange]);
-
-  const handleChange = React.useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
-      const value = e.target.value;
-      setTime(value);
-
-      // 값이 비어있지 않고 두 자리 수인 경우에만 다음 입력으로 포커스
-      if (value && value.length === 2 && index < 3) {
-        const max = index % 2 === 0 ? 23 : 59;
-        const numValue = parseInt(value);
-
-        // 최대값을 초과하는 경우 최대값으로 설정
-        if (numValue > max) {
-          inputRefs.current[index].value = max.toString();
-        }
-
-        inputRefs.current[index + 1].focus();
-      }
-
-      // 모든 입력값이 있을 때만 검증 실행
-      if (inputRefs.current.every((input) => input.value)) {
-        validateTimeRange();
-      } else if (inputRefs.current.every((input) => input.value === "")) {
-        if (onChange) onChange({ start: "", end: "" });
-        setInternalStatus(undefined);
-      }
-    },
-    [validateTimeRange, onChange]
-  );
-
-  const contextValue = React.useMemo<TimeInputContextType>(
-    () => ({
-      value: time,
-      disabled,
-      readOnly,
-      inputRefs,
-      status: externalStatus ?? internalStatus,
-      size,
-      variant,
-      focused: internalFocused,
-      direction,
-      flexBasis,
-      onChange,
-      handleChange,
-      handleBlur,
-      handleKeyDown,
-      handleFocus,
-    }),
-    [
-      time,
-      disabled,
-      readOnly,
-      size,
-      variant,
-      internalFocused,
-      direction,
-      flexBasis,
-      externalStatus,
-      internalStatus,
-      onChange,
-      handleChange,
-      handleBlur,
-      handleKeyDown,
-      handleFocus,
-    ]
-  );
-
-  React.useEffect(() => {
-    setInternalFocused(externalFocused);
-  }, [externalFocused]);
-
-  return (
-    <TimeInputContext.Provider value={contextValue}>
-      <div className={cx("TimeInputRoot", className, direction)}>
-        {children}
-      </div>
-    </TimeInputContext.Provider>
-  );
-};
-
-interface ITimeInput {
-  Root: typeof Root;
-  Label: typeof Label;
-  Input: typeof Input;
-  TimeRange: typeof TimeRange;
-  Colon: typeof Colon;
-  Separator: typeof Separator;
-  HelperText: typeof HelperText;
-  InputWrapper: typeof InputWrapper;
-}
-
-const TimeInput = {
-  Root,
-  Label,
-  Input,
-  TimeRange,
-  Colon,
-  Separator,
-  HelperText,
-  InputWrapper,
-} as ITimeInput;
-
-export default TimeInput;

package/src/components/WeeklyCalendar/WeeklyCalendar.context.tsx

@@ -1,88 +0,0 @@
-import React from "react";
-
-export interface EventItem {
-  id: string;
-  startTime: string; // 예: "2025-01-15 22:00"
-  endTime?: string; // 예: "2025-01-16 02:00"
-  createdAt: string; // 예: "2025-01-10 09:00"
-  isAllDay?: boolean;
-  title?: string;
-}
-
-export type EventItemAsProps<T extends EventItem = EventItem> = {
-  id: string;
-  startTime: string;
-  endTime?: string;
-  title: string;
-  style?: React.CSSProperties;
-  onMouseEnter?: () => void;
-  onMouseLeave?: () => void;
-  ref?: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
-} & Omit<T, keyof EventItem>;
-
-export type EventItemPopperAsProps<T extends EventItem = EventItem> = {
-  id: string;
-  popperRef: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;
-  popperStyle: React.CSSProperties;
-  popperAttributes: {
-    [key: string]: string;
-  };
-  title: string;
-  realStartTime?: string;
-  realEndTime?: string;
-  arrowRef: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;
-  arrowStyle: React.CSSProperties;
-  arrowAttributes: {
-    [key: string]: string;
-  };
-  onMouseEnter?: () => void;
-  onMouseLeave?: () => void;
-} & Omit<T, keyof EventItem>;
-
-export type WeeklyCalendarContextType<T extends EventItem> = {
-  /** start hour (하루 최소 시간)*/
-  minHour: number;
-  /** end hour (하루 최대 시간) */
-  maxHour: number;
-  /** current date */
-  currentDate?: string;
-  /** date count */
-  columnCount: number;
-  /** min step */
-  step: number;
-  /** Event List */
-  events?: Array<T>;
-  /** 새 일정 생성을 위한 드래그 기능 활성화 */
-  enableCreateByDrag?: boolean;
-  /** 기존 일정 이동을 위한 드래그 기능 활성화 */
-  enableMoveByDrag?: boolean;
-  /** 이벤트 아이템 컴포넌트 */
-  eventItemAs?: (props: EventItemAsProps<T>) => React.ReactNode;
-  /** 이벤트 아이템 popper 컴포넌트 */
-  eventItemPopperAs?: (props: EventItemPopperAsProps<T>) => React.ReactNode;
-  /** 이벤트 아이템 높이 */
-  itemHeight?: number;
-  /** 타입 */
-  type?: "default" | "noLines";
-  /** 툴팁 숨김 지연 시간 */
-  popperHideDelay?: number;
-  /** 툴팁 오프셋 */
-  popperOffset?: [number, number];
-};
-
-export const initialState: WeeklyCalendarContextType<EventItem> = {
-  minHour: 0,
-  maxHour: 24,
-  columnCount: 5,
-  step: 15,
-  enableCreateByDrag: true,
-  enableMoveByDrag: true,
-  popperHideDelay: 200,
-  popperOffset: [0, 0],
-};
-
-export const WeeklyCalendarContext =
-  React.createContext<WeeklyCalendarContextType<any>>(initialState);
-
-export type WeeklyCalendarProviderProps<T extends EventItem> =
-  React.PropsWithChildren<WeeklyCalendarContextType<T>>;