@uniai-fe/uds-primitives 0.10.4 → 0.12.0

package/src/components/input/types/time.ts

@@ -1,22 +1,17 @@
-import type { PopoverProps, ScrollAreaProps } from "@mantine/core";
-import type {
-  TimePickerAmPmLabels,
-  TimePickerFormat,
-  TimePickerPasteSplit,
-  TimePickerPresets,
-} from "@mantine/dates";
 import type { ComponentPropsWithoutRef, FocusEvent, ReactNode } from "react";
 import type { UseFormRegisterReturn } from "react-hook-form";
 import type { FormFieldWidth } from "../../form/types/props";
+import type { TimePickerFormat } from "../../time-picker/types";
 import type { InputPriority, InputSize, InputState } from "./foundation";
 
 /**
- * Input Time icon position.
+ * Input Time icon 위치.
+ * @typedef {"left" | "right"} InputTimeIconPosition
  */
 export type InputTimeIconPosition = "left" | "right";
 
 /**
- * Input TimePicker hidden input props.
+ * Input Time hidden input props.
  */
 export type InputTimeHiddenInputProps = Omit<
   ComponentPropsWithoutRef<"input">,
@@ -24,7 +19,8 @@ export type InputTimeHiddenInputProps = Omit<
 >;
 
 /**
- * Input TimePicker props.
+ * Input Time Template props.
+ * 저장값은 24시간 `HH:mm` 또는 `HH:mm:ss` 문자열을 사용한다.
  * @property {string} [value] 제어형 시간 값
  * @property {string} [defaultValue] 비제어 초기 시간 값
  * @property {(value:string)=>void} [onChange] 값 변경 핸들러
@@ -32,234 +28,179 @@ export type InputTimeHiddenInputProps = Omit<
  * @property {string} [name] form name
  * @property {string} [form] form id
  * @property {UseFormRegisterReturn} [register] react-hook-form register 결과
- * @property {InputPriority} [priority] input priority
- * @property {InputSize} [size] input size
- * @property {InputState} [state] input state
+ * @property {"primary" | "secondary" | "tertiary" | "table"} [priority] input priority
+ * @property {"small" | "medium" | "large"} [size] input size
+ * @property {"default" | "active" | "focused" | "success" | "error" | "disabled" | "loading"} [state] input state
  * @property {boolean} [block] width 100% 여부
- * @property {"full" | "fit" | "fill" | "auto" | number | string} [width] width preset 옵션
+ * @property {"full" | "fit" | "fill" | "auto" | number | string} [width] width preset
  * @property {string} [className] root className
  * @property {boolean} [disabled] disabled 여부
  * @property {boolean} [readOnly] readOnly 여부
  * @property {boolean} [required] required 여부
  * @property {string} [id] root id
- * @property {"12h" | "24h"} [format] 표시/입력 시간 포맷
- * @property {boolean} [withSeconds] seconds 입력 노출 여부
- * @property {boolean} [withDropdown] dropdown 노출 여부
- * @property {boolean} [clearable] clear 버튼 노출 여부
- * @property {string} [min] 최소 시간 값
- * @property {string} [max] 최대 시간 값
- * @property {number} [hoursStep] hour step
- * @property {number} [minutesStep] minute step
- * @property {number} [secondsStep] second step
+ * @property {"12h" | "24h"} [format] 표시 형식
+ * @property {boolean} [withSeconds] 초 field 노출 여부
+ * @property {boolean} [clearable] 삭제 액션 노출 여부
+ * @property {number} [hoursStep] 시 증감 단위
+ * @property {number} [minutesStep] 분 증감 단위
+ * @property {number} [secondsStep] 초 증감 단위
  * @property {ReactNode} [icon] clock icon override
  * @property {"left" | "right"} [iconPosition] clock icon 위치
  * @property {string} [iconLabel] clock icon 접근성 라벨
- * @property {string} [clearButtonLabel] clear 버튼 접근성 라벨
- * @property {PopoverProps} [popoverProps] Mantine Popover 옵션
- * @property {InputTimeHiddenInputProps} [hiddenInputProps] hidden input 옵션
- * @property {string} [hoursInputLabel] hour input aria-label
- * @property {string} [minutesInputLabel] minute input aria-label
- * @property {string} [secondsInputLabel] second input aria-label
- * @property {string} [amPmInputLabel] am/pm input aria-label
- * @property {TimePickerAmPmLabels} [amPmLabels] am/pm 라벨
- * @property {string} [hoursPlaceholder] hour placeholder
- * @property {string} [minutesPlaceholder] minute placeholder
- * @property {string} [secondsPlaceholder] second placeholder
- * @property {TimePickerPasteSplit} [pasteSplit] paste parser
- * @property {TimePickerPresets} [presets] dropdown preset
- * @property {number} [maxDropdownContentHeight] dropdown 최대 높이
- * @property {ScrollAreaProps} [scrollAreaProps] dropdown scroll area 옵션
- * @property {boolean} [reverseTimeControlsList] dropdown control 역순 여부
+ * @property {InputTimeHiddenInputProps} [hiddenInputProps] hidden input props
+ * @property {string} [hoursInputLabel] 시 input 접근성 라벨
+ * @property {string} [minutesInputLabel] 분 input 접근성 라벨
+ * @property {string} [secondsInputLabel] 초 input 접근성 라벨
+ * @property {string} [amPmInputLabel] 오전/오후 접근성 라벨
+ * @property {string} [hoursPlaceholder] 시 placeholder
+ * @property {string} [minutesPlaceholder] 분 placeholder
+ * @property {string} [secondsPlaceholder] 초 placeholder
  * @property {(event:FocusEvent<HTMLInputElement>)=>void} [onFocus] focus 핸들러
  * @property {(event:FocusEvent<HTMLDivElement>)=>void} [onBlur] blur 핸들러
  */
-export interface InputTimePickerProps {
+export interface InputTimeTemplateProps {
   /**
-   * 제어형 시간 값
+   * 제어형 시간 값.
    */
   value?: string;
   /**
-   * 비제어 초기 시간 값
+   * 비제어 초기 시간 값.
    */
   defaultValue?: string;
   /**
-   * 값 변경 핸들러
+   * 값 변경 핸들러.
    */
   onChange?: (value: string) => void;
   /**
-   * 값 변경 별칭
+   * 값 변경 별칭.
    */
   onValueChange?: (value: string) => void;
   /**
-   * form name
+   * form name.
    */
   name?: string;
   /**
-   * form id
+   * form id.
    */
   form?: string;
   /**
-   * react-hook-form register 결과
+   * react-hook-form register 결과.
    */
   register?: UseFormRegisterReturn;
   /**
-   * input priority
+   * "primary" | "secondary" | "tertiary" | "table".
    */
   priority?: InputPriority;
   /**
-   * input size
+   * "small" | "medium" | "large".
    */
   size?: InputSize;
   /**
-   * input state
+   * "default" | "active" | "focused" | "success" | "error" | "disabled" | "loading".
    */
   state?: InputState;
   /**
-   * width 100% 여부
+   * width 100% 여부.
    */
   block?: boolean;
   /**
-   * width preset 옵션
+   * "full" | "fit" | "fill" | "auto" | number | string.
    */
   width?: FormFieldWidth;
   /**
-   * root className
+   * root className.
    */
   className?: string;
   /**
-   * disabled 여부
+   * disabled 여부.
    */
   disabled?: boolean;
   /**
-   * readOnly 여부
+   * readOnly 여부.
    */
   readOnly?: boolean;
   /**
-   * required 여부
+   * required 여부.
    */
   required?: boolean;
   /**
-   * root id
+   * root id.
    */
   id?: string;
   /**
-   * 표시/입력 시간 포맷
+   * "12h" | "24h".
    */
   format?: TimePickerFormat;
   /**
-   * seconds 입력 노출 여부
+   * 초 field 노출 여부.
    */
   withSeconds?: boolean;
   /**
-   * dropdown 노출 여부
-   */
-  withDropdown?: boolean;
-  /**
-   * clear 버튼 노출 여부
+   * 삭제 액션 노출 여부.
    */
   clearable?: boolean;
   /**
-   * 최소 시간 값
-   */
-  min?: string;
-  /**
-   * 최대 시간 값
-   */
-  max?: string;
-  /**
-   * hour step
+   * 시 증감 단위.
    */
   hoursStep?: number;
   /**
-   * minute step
+   * 분 증감 단위.
    */
   minutesStep?: number;
   /**
-   * second step
+   * 초 증감 단위.
    */
   secondsStep?: number;
   /**
-   * clock icon override
+   * clock icon override.
    */
   icon?: ReactNode;
   /**
-   * clock icon 위치
+   * "left" | "right".
    */
   iconPosition?: InputTimeIconPosition;
   /**
-   * clock icon 접근성 라벨
+   * clock icon 접근성 라벨.
    */
   iconLabel?: string;
   /**
-   * clear 버튼 접근성 라벨
-   */
-  clearButtonLabel?: string;
-  /**
-   * Mantine Popover 옵션
-   */
-  popoverProps?: PopoverProps;
-  /**
-   * hidden input 옵션
+   * hidden input props.
    */
   hiddenInputProps?: InputTimeHiddenInputProps;
   /**
-   * hour input aria-label
+   * 시 input 접근성 라벨.
    */
   hoursInputLabel?: string;
   /**
-   * minute input aria-label
+   * 분 input 접근성 라벨.
    */
   minutesInputLabel?: string;
   /**
-   * second input aria-label
+   * 초 input 접근성 라벨.
    */
   secondsInputLabel?: string;
   /**
-   * am/pm input aria-label
+   * 오전/오후 접근성 라벨.
    */
   amPmInputLabel?: string;
   /**
-   * am/pm 라벨
-   */
-  amPmLabels?: TimePickerAmPmLabels;
-  /**
-   * hour placeholder
+   * 시 placeholder.
    */
   hoursPlaceholder?: string;
   /**
-   * minute placeholder
+   * 분 placeholder.
    */
   minutesPlaceholder?: string;
   /**
-   * second placeholder
+   * 초 placeholder.
    */
   secondsPlaceholder?: string;
   /**
-   * paste parser
-   */
-  pasteSplit?: TimePickerPasteSplit;
-  /**
-   * dropdown preset
-   */
-  presets?: TimePickerPresets;
-  /**
-   * dropdown 최대 높이
-   */
-  maxDropdownContentHeight?: number;
-  /**
-   * dropdown scroll area 옵션
-   */
-  scrollAreaProps?: ScrollAreaProps;
-  /**
-   * dropdown control 역순 여부
-   */
-  reverseTimeControlsList?: boolean;
-  /**
-   * focus 핸들러
+   * focus 핸들러.
    */
   onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
   /**
-   * blur 핸들러
+   * blur 핸들러.
    */
   onBlur?: (event: FocusEvent<HTMLDivElement>) => void;
 }

package/src/components/time-picker/img/minus.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM8 11.2002C7.55817 11.2002 7.2002 11.5582 7.2002 12C7.2002 12.4418 7.55817 12.7998 8 12.7998H16C16.4418 12.7998 16.7998 12.4418 16.7998 12C16.7998 11.5582 16.4418 11.2002 16 11.2002H8Z" fill="#3A3C46"/>
+</svg>

package/src/components/time-picker/img/plus.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 7.20508C11.5582 7.20508 11.2002 7.56306 11.2002 8.00488V11.2051H8C7.55817 11.2051 7.2002 11.5631 7.2002 12.0049C7.2002 12.4467 7.55817 12.8047 8 12.8047H11.2002V16.0049C11.2002 16.4467 11.5582 16.8047 12 16.8047C12.4418 16.8047 12.7998 16.4467 12.7998 16.0049V12.8047H16C16.4418 12.8047 16.7998 12.4467 16.7998 12.0049C16.7998 11.5631 16.4418 11.2051 16 11.2051H12.7998V8.00488C12.7998 7.56306 12.4418 7.20508 12 7.20508Z" fill="#3A3C46"/>
+</svg>

package/src/components/time-picker/index.scss

@@ -0,0 +1 @@
+@use "./styles/index.scss";

package/src/components/time-picker/index.tsx

@@ -0,0 +1,11 @@
+/**
+ * TimePicker; 시간 선택 패널 카테고리 배럴.
+ * @desc
+ * - `TimePicker.Template`: 시간·분 선택과 footer action을 제공한다.
+ * - `TimePickerUtils`: 시간 파싱·직렬화·증감 유틸리티다.
+ */
+import "./index.scss";
+
+export * from "./markup";
+export * as TimePickerUtils from "./utils";
+export type * from "./types";

package/src/components/time-picker/markup/Footer.tsx

@@ -0,0 +1,71 @@
+import { Button } from "../../button";
+
+interface TimePickerFooterProps {
+  /**
+   * 삭제 action 노출 여부.
+   */
+  clearable: boolean;
+  /**
+   * 비활성화 여부.
+   */
+  disabled: boolean;
+  /**
+   * 삭제 핸들러.
+   */
+  onClear: () => void;
+  /**
+   * 적용 핸들러.
+   */
+  onApply: () => void;
+}
+
+/**
+ * TimePicker Footer; 삭제와 적용 action을 렌더한다.
+ * @component
+ * @param {TimePickerFooterProps} props
+ * @param {boolean} props.clearable 삭제 action 노출 여부
+ * @param {boolean} props.disabled 비활성화 여부
+ * @param {() => void} props.onClear 삭제 핸들러
+ * @param {() => void} props.onApply 적용 핸들러
+ * @returns {ReactNode} TimePicker footer
+ * @example
+ * <TimePickerFooter
+ *   clearable
+ *   disabled={false}
+ *   onClear={onClear}
+ *   onApply={onApply}
+ * />
+ */
+export default function TimePickerFooter({
+  clearable,
+  disabled,
+  onClear,
+  onApply,
+}: TimePickerFooterProps) {
+  return (
+    <footer className="time-picker-template-footer">
+      {clearable ? (
+        <button
+          type="button"
+          className="time-picker-clear-action"
+          disabled={disabled}
+          onClick={onClear}
+        >
+          삭제하기
+        </button>
+      ) : (
+        <span />
+      )}
+      <Button.Default
+        type="button"
+        priority="primary"
+        fill="solid"
+        size="large"
+        disabled={disabled}
+        onClick={onApply}
+      >
+        적용하기
+      </Button.Default>
+    </footer>
+  );
+}

package/src/components/time-picker/markup/HourSection.tsx

@@ -0,0 +1,99 @@
+import { SegmentedControl } from "../../segmented-control";
+import type { TimePickerFormat, TimePickerPeriod } from "../types";
+
+const HOURS_12 = Array.from({ length: 12 }, (_, index) => index + 1);
+const HOURS_24 = Array.from({ length: 24 }, (_, index) => index);
+const PERIOD_OPTIONS = [
+  { value: "am", label: "오전" },
+  { value: "pm", label: "오후" },
+];
+
+interface TimePickerHourSectionProps {
+  /**
+   * "12h" | "24h".
+   */
+  format: TimePickerFormat;
+  /**
+   * 선택한 표시 시.
+   */
+  selectedHour: number | null;
+  /**
+   * "am" | "pm".
+   */
+  period: TimePickerPeriod;
+  /**
+   * 비활성화 여부.
+   */
+  disabled: boolean;
+  /**
+   * 시 선택 핸들러.
+   */
+  onHourSelect: (hours: number) => void;
+  /**
+   * 오전·오후 변경 핸들러.
+   */
+  onPeriodChange: (period: TimePickerPeriod) => void;
+}
+
+/**
+ * TimePicker Hour Section; 오전·오후와 시 선택 grid를 렌더한다.
+ * @component
+ * @param {TimePickerHourSectionProps} props
+ * @param {"12h" | "24h"} props.format 표시 형식
+ * @param {number | null} props.selectedHour 선택한 표시 시
+ * @param {"am" | "pm"} props.period 오전·오후
+ * @param {boolean} props.disabled 비활성화 여부
+ * @param {(hours: number) => void} props.onHourSelect 시 선택 핸들러
+ * @param {(period: "am" | "pm") => void} props.onPeriodChange 오전·오후 변경 핸들러
+ * @returns {ReactNode} 시간 선택 section
+ * @example
+ * <TimePickerHourSection
+ *   format="12h"
+ *   selectedHour={9}
+ *   period="am"
+ *   disabled={false}
+ *   onHourSelect={onHourSelect}
+ *   onPeriodChange={onPeriodChange}
+ * />
+ */
+export default function TimePickerHourSection({
+  format,
+  selectedHour,
+  period,
+  disabled,
+  onHourSelect,
+  onPeriodChange,
+}: TimePickerHourSectionProps) {
+  const hours = format === "12h" ? HOURS_12 : HOURS_24;
+
+  return (
+    <section className="time-picker-template-section">
+      <h3>시간 선택</h3>
+      {format === "12h" ? (
+        <SegmentedControl
+          className="time-picker-period-control"
+          options={PERIOD_OPTIONS}
+          ariaLabel="오전 또는 오후 선택"
+          value={period}
+          onValueChange={nextPeriod =>
+            onPeriodChange(nextPeriod === "pm" ? "pm" : "am")
+          }
+        />
+      ) : null}
+      <div className="time-picker-option-grid">
+        {hours.map(hour => (
+          <button
+            key={`time-picker/hour/${hour}`}
+            type="button"
+            className="time-picker-option"
+            aria-pressed={selectedHour === hour}
+            disabled={disabled}
+            onClick={() => onHourSelect(hour)}
+          >
+            {hour}:00
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/components/time-picker/markup/MinuteSection.tsx

@@ -0,0 +1,86 @@
+import MinusIcon from "../img/minus.svg";
+import PlusIcon from "../img/plus.svg";
+
+const MINUTES = Array.from({ length: 12 }, (_, index) => index * 5);
+
+interface TimePickerMinuteSectionProps {
+  /**
+   * 선택한 분.
+   */
+  selectedMinute: number | null;
+  /**
+   * 비활성화 여부.
+   */
+  disabled: boolean;
+  /**
+   * 1분 증감 핸들러.
+   */
+  onMinuteStep: (amount: 1 | -1) => void;
+  /**
+   * 분 선택 핸들러.
+   */
+  onMinuteSelect: (minutes: number) => void;
+}
+
+/**
+ * TimePicker Minute Section; 1분 stepper와 5분 선택 grid를 렌더한다.
+ * @component
+ * @param {TimePickerMinuteSectionProps} props
+ * @param {number | null} props.selectedMinute 선택한 분
+ * @param {boolean} props.disabled 비활성화 여부
+ * @param {(amount: 1 | -1) => void} props.onMinuteStep 1분 증감 핸들러
+ * @param {(minutes: number) => void} props.onMinuteSelect 분 선택 핸들러
+ * @returns {ReactNode} 분 선택 section
+ * @example
+ * <TimePickerMinuteSection
+ *   selectedMinute={30}
+ *   disabled={false}
+ *   onMinuteStep={onMinuteStep}
+ *   onMinuteSelect={onMinuteSelect}
+ * />
+ */
+export default function TimePickerMinuteSection({
+  selectedMinute,
+  disabled,
+  onMinuteStep,
+  onMinuteSelect,
+}: TimePickerMinuteSectionProps) {
+  return (
+    <section className="time-picker-template-section">
+      <h3>분 선택</h3>
+      <div className="time-picker-minute-stepper">
+        <button
+          type="button"
+          aria-label="1분 증가"
+          disabled={disabled}
+          onClick={() => onMinuteStep(1)}
+        >
+          <PlusIcon aria-hidden="true" />
+        </button>
+        <strong>{String(selectedMinute ?? 0).padStart(2, "0")}분</strong>
+        <button
+          type="button"
+          aria-label="1분 감소"
+          disabled={disabled}
+          onClick={() => onMinuteStep(-1)}
+        >
+          <MinusIcon aria-hidden="true" />
+        </button>
+      </div>
+      <div className="time-picker-option-grid">
+        {MINUTES.map(minute => (
+          <button
+            key={`time-picker/minute/${minute}`}
+            type="button"
+            className="time-picker-option"
+            aria-pressed={selectedMinute === minute}
+            disabled={disabled}
+            onClick={() => onMinuteSelect(minute)}
+          >
+            {String(minute).padStart(2, "0")}
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/components/time-picker/markup/Summary.tsx

@@ -0,0 +1,24 @@
+interface TimePickerSummaryProps {
+  /**
+   * 선택한 시간 표시값.
+   */
+  summary: string;
+}
+
+/**
+ * TimePicker Summary; 현재 선택한 시간을 표시한다.
+ * @component
+ * @param {TimePickerSummaryProps} props
+ * @param {string} props.summary 선택한 시간 표시값
+ * @returns {ReactNode} 선택 시간 요약
+ * @example
+ * <TimePickerSummary summary="09:30 오전" />
+ */
+export default function TimePickerSummary({ summary }: TimePickerSummaryProps) {
+  return (
+    <div className="time-picker-summary">
+      <span>선택한 시간</span>
+      <strong>{summary}</strong>
+    </div>
+  );
+}