@uniai-fe/uds-primitives 0.2.2 → 0.2.4

package/src/components/input/markup/date/footer/UtilContainer.tsx

@@ -0,0 +1,23 @@
+import clsx from "clsx";
+import type { InputCalendarFooterUtilContainerProps } from "../../../types";
+
+/**
+ * FooterTemplate utility button container.
+ * @component
+ * @param {InputCalendarFooterUtilContainerProps} props
+ * @param {React.ReactNode} [props.children] util 버튼(children)
+ * @param {string} [props.className] container className
+ * @example
+ * <InputDateFooterUtilContainer>
+ *   <Input.Date.Button.Clear />
+ *   <Input.Date.Button.Today />
+ * </InputDateFooterUtilContainer>
+ */
+export default function InputDateFooterUtilContainer({
+  children,
+  className,
+}: InputCalendarFooterUtilContainerProps) {
+  return (
+    <div className={clsx("input-date-footer-util", className)}>{children}</div>
+  );
+}

package/src/components/input/markup/date/footer/index.ts

@@ -0,0 +1,3 @@
+export { default as InputDateFooterTemplate } from "./Template";
+export { default as InputDateFooterTemplateContainer } from "./Container";
+export { default as InputDateFooterUtilContainer } from "./UtilContainer";

package/src/components/input/markup/date/index.tsx

@@ -0,0 +1,27 @@
+import "../../styles/date.scss";
+import InputDateTemplate from "./Template";
+import InputDateTrigger from "./Trigger";
+import InputDateApplyButton from "./button/ApplyButton";
+import InputDateClearButton from "./button/ClearButton";
+import InputDateTodayButton from "./button/TodayButton";
+import {
+  InputDateFooterTemplate,
+  InputDateFooterTemplateContainer,
+  InputDateFooterUtilContainer,
+} from "./footer";
+
+// Input.Date 네임스페이스: template/foundation 구성요소 집합
+export const InputDate = {
+  Template: InputDateTemplate,
+  Trigger: InputDateTrigger,
+  Button: {
+    Apply: InputDateApplyButton,
+    Clear: InputDateClearButton,
+    Today: InputDateTodayButton,
+  },
+  Footer: {
+    Template: InputDateFooterTemplate,
+    Container: InputDateFooterTemplateContainer,
+    UtilContainer: InputDateFooterUtilContainer,
+  },
+};

package/src/components/input/markup/index.tsx

@@ -1,13 +1,11 @@
-"use client";
-
 import { InputFoundation } from "./foundation";
 import { InputText } from "./text";
-import { InputCalendar } from "./calendar";
+import { InputDate } from "./date";
 import { InputAddress } from "./address";
 
 export const Input = {
   ...InputFoundation,
   Text: InputText,
-  Calendar: InputCalendar,
+  Date: InputDate,
   Address: InputAddress,
 };

package/src/components/input/styles/date.scss

@@ -0,0 +1,45 @@
+.input-date-field {
+  // Date 입력 영역은 trigger만 관리하고 캘린더 레이어는 calendar 모듈이 담당한다.
+  display: grid;
+  gap: var(--spacing-gap-5);
+  width: 100%;
+}
+
+.input-date-trigger-input {
+  width: 100%;
+}
+
+.input-date-trigger-icon {
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  color: var(--color-label-alternative);
+  // 아이콘 영역 클릭은 input으로 위임한다.
+  pointer-events: none;
+}
+
+.input-date-footer-template {
+  // footer 템플릿은 input 스킨에서만 관리한다.
+  display: grid;
+  gap: var(--spacing-gap-5);
+  width: 100%;
+}
+
+.input-date-footer-util {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-gap-3);
+  width: 100%;
+}
+
+.input-date-action-button {
+  width: auto;
+}
+
+.input-date-apply-button {
+  width: 100%;
+}

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

@@ -0,0 +1,286 @@
+import type { MouseEvent, ReactNode } from "react";
+import type { UseFormRegisterReturn } from "react-hook-form";
+import type {
+  CalendarColumns,
+  CalendarDatePickerProps,
+  CalendarMode,
+  CalendarOnChange,
+  CalendarValue,
+} from "../../calendar";
+
+/**
+ * Calendar trigger(Input) 영역에서 필요한 속성 묶음.
+ * FormField와의 조합을 고려해 label/helper 등을 상위 Template에 위임한다.
+ * @property {string} [id] trigger id (label htmlFor 연동)
+ * @property {string} [name] form name; register 미사용 시 수동 지정
+ * @property {UseFormRegisterReturn} [register] react-hook-form register 결과
+ * @property {(event: MouseEvent<Element>) => void} [onClick] trigger 클릭 핸들러
+ * @property {boolean} [disabled] disabled 여부
+ * @property {string} [placeholder] trigger 내부 placeholder
+ */
+export interface InputCalendarTriggerProps {
+  /**
+   * trigger id (label htmlFor 연동)
+   */
+  id?: string;
+  /**
+   * form name; register 미사용 시 수동 지정
+   */
+  name?: string;
+  /**
+   * react-hook-form register 결과
+   */
+  register?: UseFormRegisterReturn;
+  /**
+   * trigger 클릭 핸들러
+   */
+  onClick?: (event: MouseEvent<Element>) => void;
+  /**
+   * disabled 여부
+   */
+  disabled?: boolean;
+  /**
+   * trigger 내부 placeholder
+   */
+  placeholder?: string;
+}
+
+/**
+ * Trigger view에서만 사용하는 부가 props.
+ * @property {string} [className] trigger root className
+ * @property {string} [displayValue] 표시 값 문자열
+ */
+export interface InputCalendarTriggerViewProps extends InputCalendarTriggerProps {
+  /**
+   * trigger root className
+   */
+  className?: string;
+  /**
+   * 표시 값 문자열
+   */
+  displayValue?: string;
+}
+
+/**
+ * Calendar Root가 커스텀 trigger에 전달하는 렌더 props.
+ * @property {string} [id] trigger id
+ * @property {string} [name] input name
+ * @property {string} [displayValue] 트리거 표시 문자열
+ * @property {string} [placeholder] 트리거 placeholder
+ * @property {boolean} [disabled] disabled 여부
+ * @property {(event: MouseEvent<Element>) => void} [onClick] 트리거 클릭 핸들러
+ */
+export interface InputCalendarTriggerRenderProps {
+  /**
+   * trigger id
+   */
+  id?: string;
+  /**
+   * input name
+   */
+  name?: string;
+  /**
+   * 트리거 표시 문자열
+   */
+  displayValue?: string;
+  /**
+   * 트리거 placeholder
+   */
+  placeholder?: string;
+  /**
+   * disabled 여부
+   */
+  disabled?: boolean;
+  /**
+   * 트리거 클릭 핸들러
+   */
+  onClick?: (event: MouseEvent<Element>) => void;
+}
+
+/**
+ * Input Calendar core props.
+ * @property {CalendarMode} [mode="date"] 날짜/시간 모드
+ * @property {CalendarColumns} [columns=1] 동시에 노출할 달력 열 수
+ * @property {CalendarValue} [value] 제어형 값
+ * @property {CalendarValue} [defaultValue] 비제어 초기값
+ * @property {CalendarOnChange} [onChange] 값 변경 핸들러(직렬화 문자열 기준)
+ * @property {CalendarOnChange} [onValueChange] onChange 별칭(추가 파이프라인용)
+ * @property {boolean} [readOnly] 읽기 전용 여부
+ * @property {boolean} [disabled] disabled 여부
+ * @property {CalendarDatePickerProps} [datePickerProps] Mantine DatePicker 직접 옵션
+ * @property {ReactNode} [header] 커스텀 header 콘텐츠
+ * @property {ReactNode} [footer] 커스텀 footer 콘텐츠
+ * @property {unknown} [timePicker] TimePicker 확장용 예약 슬롯(현재 미구현)
+ * @property {boolean} [calendarOpened] calendar 열림 제어 여부
+ * @property {string} [className] root className
+ * @property {ReactNode} [trigger] 커스텀 trigger 슬롯
+ * @property {(props: InputCalendarTriggerRenderProps) => ReactNode} [renderTrigger] 커스텀 trigger 렌더 함수
+ */
+export interface InputCalendarProps extends InputCalendarTriggerProps {
+  /**
+   * 날짜/시간 모드
+   */
+  mode?: CalendarMode;
+  /**
+   * 동시에 노출할 달력 열 수
+   */
+  columns?: CalendarColumns;
+  /**
+   * 제어형 값
+   */
+  value?: CalendarValue;
+  /**
+   * 비제어 초기값
+   */
+  defaultValue?: CalendarValue;
+  /**
+   * 값 변경 핸들러
+   */
+  onChange?: CalendarOnChange;
+  /**
+   * onChange 별칭; 외부 파이프라인 시 사용
+   */
+  onValueChange?: CalendarOnChange;
+  /**
+   * 읽기 전용 여부
+   */
+  readOnly?: boolean;
+  /**
+   * disabled 여부
+   */
+  disabled?: boolean;
+  /**
+   * Mantine DatePicker 옵션
+   */
+  datePickerProps?: CalendarDatePickerProps;
+  /**
+   * 커스텀 header 콘텐츠
+   */
+  header?: ReactNode;
+  /**
+   * 커스텀 footer 콘텐츠
+   */
+  footer?: ReactNode;
+  /**
+   * TimePicker 확장용 예약 슬롯(현재 미구현).
+   * 추후 Calendar Body 조합 확장 시점에 구체 타입을 확정한다.
+   */
+  timePicker?: unknown;
+  /**
+   * calendar 열림 제어 여부
+   */
+  calendarOpened?: boolean;
+  /**
+   * root className
+   */
+  className?: string;
+  /**
+   * 커스텀 trigger 슬롯
+   */
+  trigger?: ReactNode;
+  /**
+   * 커스텀 trigger 렌더 함수
+   */
+  renderTrigger?: (props: InputCalendarTriggerRenderProps) => ReactNode;
+}
+
+/**
+ * footer 개별 버튼 공용 props.
+ * @property {ReactNode} [children] 버튼 라벨
+ * @property {() => void} [onClick] click 핸들러
+ * @property {boolean} [disabled] disabled 여부
+ * @property {string} [className] 버튼 className
+ */
+export interface InputCalendarInlineButtonProps {
+  /**
+   * 버튼 라벨
+   */
+  children?: ReactNode;
+  /**
+   * click 핸들러
+   */
+  onClick?: () => void;
+  /**
+   * disabled 여부
+   */
+  disabled?: boolean;
+  /**
+   * 버튼 className
+   */
+  className?: string;
+}
+
+/**
+ * Apply 버튼 전용 props.
+ * @extends InputCalendarInlineButtonProps
+ * @property {ReactNode} [label] children 미지정 시 사용할 기본 라벨
+ */
+export interface InputCalendarApplyButtonProps extends InputCalendarInlineButtonProps {
+  /**
+   * 버튼 라벨
+   */
+  label?: ReactNode;
+}
+
+/**
+ * Footer template의 util 버튼 컨테이너 props.
+ * @property {ReactNode} [children] util 버튼(children)
+ * @property {string} [className] container className
+ */
+export interface InputCalendarFooterUtilContainerProps {
+  /**
+   * util 버튼(children)
+   */
+  children?: ReactNode;
+  /**
+   * container className
+   */
+  className?: string;
+}
+
+/**
+ * Footer template의 루트 컨테이너 props.
+ * @property {ReactNode} [children] footer 내부 children
+ * @property {string} [className] container className
+ */
+export interface InputCalendarFooterTemplateContainerProps {
+  /**
+   * footer 내부 children
+   */
+  children?: ReactNode;
+  /**
+   * container className
+   */
+  className?: string;
+}
+
+/**
+ * 기본 FooterTemplate props.
+ * @property {string} [className] root className
+ * @property {() => void} [onClear] clear 버튼 클릭 핸들러
+ * @property {() => void} [onToday] today 버튼 클릭 핸들러
+ * @property {() => void} [onApply] apply 버튼 클릭 핸들러
+ * @property {boolean} [disabled] 전체 버튼 disabled 여부
+ */
+export interface InputCalendarFooterTemplateProps {
+  /**
+   * root className
+   */
+  className?: string;
+  /**
+   * clear 버튼 클릭 핸들러
+   */
+  onClear?: () => void;
+  /**
+   * today 버튼 클릭 핸들러
+   */
+  onToday?: () => void;
+  /**
+   * apply 버튼 클릭 핸들러
+   */
+  onApply?: () => void;
+  /**
+   * 전체 버튼 disabled 여부
+   */
+  disabled?: boolean;
+}

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

@@ -1,6 +1,6 @@
 export type * from "./foundation";
 export type * from "./text";
-export type * from "./calendar";
+export type * from "./date";
 export type * from "./verification";
 export type * from "./hooks";
 export type * from "./address";

package/src/components/input/utils/address.ts

@@ -1,4 +1,4 @@
-import { string as toString } from "@uniai-fe/util-functions";
+import { string } from "@uniai-fe/util-functions";
 import type { Address } from "react-daum-postcode";
 
 import type {
@@ -37,7 +37,7 @@ const isAddressStructureLike = (
 const toAddressParts = (items: unknown[] | undefined): string[] => {
   if (!Array.isArray(items)) return [];
   return items
-    .map(item => toString(item, ""))
+    .map(item => string(item, ""))
     .filter((segment): segment is string => segment.length > 0);
 };
 

package/src/components/input/utils/date.ts

@@ -0,0 +1,61 @@
+import { dayjs } from "../../../init/dayjs";
+import type { CalendarColumns, CalendarValue } from "../../calendar";
+
+const DATE_FORMAT = "YYYY-MM-DD";
+
+/**
+ * Calendar에 빈 값을 선언한다.
+ * @returns {CalendarValue} null 직렬화 값
+ */
+export const createEmptyValue = (): CalendarValue => null;
+
+/**
+ * Date 객체를 YYYY-MM-DD 문자열로 포맷한다.
+ * @param {Date | string | null} date 포맷 대상
+ * @returns {CalendarValue} 포맷 결과
+ */
+const formatDate = (date: Date | string | null) =>
+  date ? dayjs(date).format(DATE_FORMAT) : null;
+
+/**
+ * Mantine DatePicker에 전달할 Date 객체를 만든다.
+ * @param {CalendarValue} value YYYY-MM-DD 문자열
+ * @returns {Date | null} DatePicker value
+ */
+export const mapValueToPicker = (value: CalendarValue) =>
+  value ? dayjs(value).toDate() : null;
+
+/**
+ * DatePicker 반환 값을 문자열로 직렬화한다.
+ * @param {Date | null} value DatePicker 값
+ * @returns {CalendarValue} 직렬화 문자열
+ */
+export const parseValueFromPicker = (value: Date | null) =>
+  formatDate(value ?? null);
+
+/**
+ * 오늘 날짜를 YYYY-MM-DD 문자열로 반환한다.
+ * @returns {CalendarValue} 오늘 값
+ */
+export const getTodayValue = (): CalendarValue => dayjs().format(DATE_FORMAT);
+
+/**
+ * hidden input 직렬화용 문자열.
+ * @param {CalendarValue} value 현재 값
+ * @returns {string} 직렬화된 문자열
+ */
+export const serializeCalendarValue = (value: CalendarValue) => value ?? "";
+
+/**
+ * trigger에 표시할 문자열을 계산한다.
+ * @param {CalendarValue} value 현재 값
+ * @returns {string} 표시 문자열
+ */
+export const formatTriggerValue = (value: CalendarValue) => value ?? "";
+
+/**
+ * columns 값을 Mantine numberOfColumns와 맞춘다.
+ * @param {CalendarColumns} columns 열 개수
+ * @returns {number} numberOfColumns 값
+ */
+export const mapColumnsToNumber = (columns: CalendarColumns) => columns;

package/src/components/input/utils/index.tsx

@@ -1,2 +1,3 @@
 export * from "./verification";
+export * from "./date";
 export * from "./address";

package/src/components/pop-over/index.scss

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

package/src/components/pop-over/index.tsx

@@ -0,0 +1,4 @@
+import "./index.scss";
+
+export * from "./markup";
+export type * from "./types";

package/src/components/pop-over/markup/Content.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import * as PopOverPrimitive from "@radix-ui/react-popover";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type { PopOverContentProps } from "../types";
+
+/**
+ * PopOver Content.
+ * @component
+ * @param {PopOverContentProps} props Content props
+ * @param {React.ReactNode} [props.children] Content 내부 콘텐츠
+ * @param {string} [props.className] Content className
+ * @param {boolean} [props.withPortal=true] Portal 사용 여부
+ * @param {HTMLElement | null} [props.portalContainer] Portal 컨테이너
+ * @param {number} [props.sideOffset=4] Trigger와 Content 간격
+ * @param {PopOverContentWidth} [props.width="fit-content"] Content width 옵션
+ * @example
+ * <PopOver.Content sideOffset={6}>popover content</PopOver.Content>
+ */
+const PopOverContent = forwardRef<HTMLDivElement, PopOverContentProps>(
+  (
+    {
+      children,
+      className,
+      withPortal = true,
+      portalContainer,
+      sideOffset = 4,
+      width = "fit-content",
+      style,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const resolvedWidth =
+      width === "match"
+        ? "var(--radix-popover-trigger-width)"
+        : typeof width === "number"
+          ? `${width}px`
+          : width;
+    const resolvedWidthToken =
+      width === "match" || width === "fit-content" || width === "max-content"
+        ? width
+        : "custom";
+
+    // Content 노드는 portal 여부에 따라 동일 노드를 재사용한다.
+    const contentNode = (
+      <PopOverPrimitive.Content
+        ref={ref}
+        className={clsx("pop-over-content", className)}
+        sideOffset={sideOffset}
+        data-width={resolvedWidthToken}
+        style={{
+          ...style,
+          width: resolvedWidth,
+        }}
+        {...restProps}
+      >
+        {children}
+      </PopOverPrimitive.Content>
+    );
+
+    if (!withPortal) {
+      return contentNode;
+    }
+
+    return (
+      <PopOverPrimitive.Portal container={portalContainer ?? undefined}>
+        {contentNode}
+      </PopOverPrimitive.Portal>
+    );
+  },
+);
+
+PopOverContent.displayName = "PopOverContent";
+
+export default PopOverContent;

package/src/components/pop-over/markup/Root.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as PopOverPrimitive from "@radix-ui/react-popover";
+import type { PopOverRootProps } from "../types";
+
+/**
+ * PopOver Root.
+ * @component
+ * @param {PopOverRootProps} props Root props
+ * @param {React.ReactNode} props.children PopOver 하위 노드
+ * @param {boolean} [props.open] 제어형 open 상태
+ * @param {boolean} [props.defaultOpen] 비제어 초기 open 상태
+ * @param {(open: boolean) => void} [props.onOpenChange] open 상태 변경 핸들러
+ * @param {boolean} [props.modal] Radix modal 모드
+ * @example
+ * <PopOver.Root>
+ *   <PopOver.Trigger asChild><button>open</button></PopOver.Trigger>
+ *   <PopOver.Content>content</PopOver.Content>
+ * </PopOver.Root>
+ */
+export default function PopOverRoot({
+  children,
+  ...restProps
+}: PopOverRootProps) {
+  return (
+    <PopOverPrimitive.Root {...restProps}>{children}</PopOverPrimitive.Root>
+  );
+}

package/src/components/pop-over/markup/Trigger.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import * as PopOverPrimitive from "@radix-ui/react-popover";
+import { forwardRef } from "react";
+import type { PopOverTriggerProps } from "../types";
+
+/**
+ * PopOver Trigger.
+ * @component
+ * @param {PopOverTriggerProps} props Trigger props
+ * @param {React.ReactNode} [props.children] Trigger 콘텐츠
+ * @param {boolean} [props.asChild] child 노드를 Trigger element로 사용할지 여부
+ * @example
+ * <PopOver.Trigger asChild><button>open</button></PopOver.Trigger>
+ */
+const PopOverTrigger = forwardRef<HTMLButtonElement, PopOverTriggerProps>(
+  ({ children, ...restProps }, ref) => (
+    <PopOverPrimitive.Trigger ref={ref} {...restProps}>
+      {children}
+    </PopOverPrimitive.Trigger>
+  ),
+);
+
+PopOverTrigger.displayName = "PopOverTrigger";
+
+export default PopOverTrigger;

package/src/components/pop-over/markup/index.tsx

@@ -0,0 +1,17 @@
+import PopOverContent from "./Content";
+import PopOverRoot from "./Root";
+import PopOverTrigger from "./Trigger";
+
+export { PopOverRoot, PopOverTrigger, PopOverContent };
+
+/**
+ * PopOver namespace.
+ * - Root
+ * - Trigger
+ * - Content
+ */
+export const PopOver = {
+  Root: PopOverRoot,
+  Trigger: PopOverTrigger,
+  Content: PopOverContent,
+};

package/src/components/pop-over/styles/base.scss

@@ -0,0 +1,5 @@
+.pop-over-content {
+  position: relative;
+  z-index: 50;
+  outline: none;
+}

package/src/components/pop-over/styles/content.scss

@@ -0,0 +1,24 @@
+.pop-over-content {
+  // PopOver 공통 surface 스킨(배경/라운드/그림자)은 Content에서 기본 제공한다.
+  width: fit-content;
+  max-width: min(100vw - 24px, max-content);
+  box-sizing: border-box;
+  background-color: var(--color-common-100);
+  border-radius: var(--theme-radius-large-2);
+  overflow: hidden;
+  box-shadow:
+    0 4px 20px rgba(0, 0, 0, 0.16),
+    0 0 2px rgba(0, 0, 0, 0.12);
+}
+
+.pop-over-content[data-width="match"] {
+  width: var(--radix-popover-trigger-width);
+}
+
+.pop-over-content[data-width="fit-content"] {
+  width: fit-content;
+}
+
+.pop-over-content[data-width="max-content"] {
+  width: max-content;
+}

package/src/components/pop-over/styles/index.scss

@@ -0,0 +1,2 @@
+@use "./base.scss";
+@use "./content.scss";