@uniai-fe/uds-primitives 0.2.2 → 0.2.4

package/src/components/pop-over/types/index.ts

@@ -0,0 +1 @@
+export type * from "./pop-over";

package/src/components/pop-over/types/pop-over.ts

@@ -0,0 +1,86 @@
+import type {
+  PopoverContentProps as RadixPopOverContentProps,
+  PopoverProps as RadixPopOverProps,
+  PopoverTriggerProps as RadixPopOverTriggerProps,
+} from "@radix-ui/react-popover";
+import type { ReactNode } from "react";
+
+/**
+ * PopOver Content width 옵션.
+ * @property {"match"} width trigger width와 동일
+ * @property {"fit-content"} width 콘텐츠 기준 폭
+ * @property {"max-content"} width 최대 콘텐츠 폭
+ * @property {number} width px 단위 폭
+ * @property {string} width CSS width 문자열
+ */
+export type PopOverContentWidth =
+  | "match"
+  | "fit-content"
+  | "max-content"
+  | number
+  | string;
+
+/**
+ * PopOver Root props.
+ * @property {ReactNode} children PopOver 하위 노드
+ * @property {boolean} [open] 제어형 open 상태
+ * @property {boolean} [defaultOpen] 비제어 초기 open 상태
+ * @property {(open: boolean) => void} [onOpenChange] open 상태 변경 핸들러
+ * @property {boolean} [modal] Radix modal 모드
+ * @see Radix PopoverProps
+ */
+export interface PopOverRootProps extends RadixPopOverProps {
+  /**
+   * PopOver 하위 노드
+   */
+  children: ReactNode;
+}
+
+/**
+ * PopOver Trigger props.
+ * @property {ReactNode} [children] Trigger 콘텐츠
+ * @property {boolean} [asChild] child 노드를 trigger로 사용할지 여부
+ * @see Radix PopoverTriggerProps
+ */
+export interface PopOverTriggerProps extends RadixPopOverTriggerProps {
+  /**
+   * Trigger 콘텐츠
+   */
+  children?: ReactNode;
+}
+
+/**
+ * PopOver Content props.
+ * @property {ReactNode} [children] Content 내부 콘텐츠
+ * @property {string} [className] Content className
+ * @property {boolean} [withPortal=true] Portal 사용 여부
+ * @property {HTMLElement | null} [portalContainer] Portal 컨테이너
+ * @property {number} [sideOffset=4] trigger와 content 사이 간격
+ * @property {PopOverContentWidth} [width="fit-content"] content width 옵션
+ * @see Radix PopoverContentProps
+ */
+export interface PopOverContentProps extends Omit<
+  RadixPopOverContentProps,
+  "children"
+> {
+  /**
+   * Content 내부 콘텐츠
+   */
+  children?: ReactNode;
+  /**
+   * Content className
+   */
+  className?: string;
+  /**
+   * Portal 사용 여부
+   */
+  withPortal?: boolean;
+  /**
+   * Portal 컨테이너
+   */
+  portalContainer?: HTMLElement | null;
+  /**
+   * content width 옵션
+   */
+  width?: PopOverContentWidth;
+}

package/src/index.scss

@@ -6,6 +6,7 @@
 @use "./components/chip";
 @use "./components/drawer";
 @use "./components/dropdown";
+@use "./components/pop-over";
 @use "./components/label";
 @use "./components/input";
 @use "./components/select";

package/src/index.tsx

@@ -1,5 +1,6 @@
-// dayjs 초기화를 가장 먼저 수행해 날짜 계열 컴포넌트가 동일 컨텍스트를 사용한다.
+// Mantine 날짜 생태계와 dayjs 설정을 한 번만 초기화한다.
 import "./init/dayjs";
+import "./init/mantine";
 // ThemeProvider는 foundation provider에서만 export한다(one-source 규칙).
 
 // 루트 배럴: 카테고리별 export를 집계한다.
@@ -12,6 +13,7 @@ export * from "./components/select";
 export * from "./components/tab";
 export * from "./components/navigation";
 export * from "./components/dropdown";
+export * from "./components/pop-over";
 export * from "./components/drawer";
 export * from "./components/scrollbar";
 export * from "./components/calendar";

package/src/init/mantine.css

@@ -0,0 +1,5 @@
+@import url("@mantine/core/styles/default-css-variables.css");
+@import url("@mantine/core/styles/global.css");
+@import url("@mantine/dates/styles.css");
+
+/* Mantine DatePicker/시간 컴포넌트에 대한 추가 override가 필요하면 이 파일에서 정의한다. */

package/src/init/mantine.ts

@@ -0,0 +1,2 @@
+// Mantine Date 계열 CSS를 한 번만 import해 전역 스타일 충돌을 방지한다.
+import "./mantine.css";

package/src/components/input/markup/calendar/Base.tsx

@@ -1,329 +0,0 @@
-"use client";
-
-import {
-  DatePicker,
-  type DatePickerStylesNames,
-  type DatePickerType,
-} from "@mantine/dates";
-import { useUncontrolled } from "@mantine/hooks";
-import type { ChangeEvent, FocusEvent } from "react";
-import { forwardRef, useCallback, useMemo } from "react";
-import { Button } from "../../../button";
-import ChevronLeftIcon from "../../img/calendar/chevron-left.svg";
-import ChevronRightIcon from "../../img/calendar/chevron-right.svg";
-import type {
-  InputCalendarActionButtonProps,
-  InputCalendarProps,
-  InputCalendarValue,
-} from "../../types";
-import { dayjs } from "../../../../init/dayjs";
-
-const DATE_FORMAT = "YYYY-MM-DD";
-type CalendarValue = InputCalendarValue<DatePickerType>;
-
-const DATE_PICKER_CLASS_NAMES = {
-  calendar: "input-calendar-panel",
-  datePickerRoot: "input-calendar-root",
-  calendarHeader: "input-calendar-header",
-  calendarHeaderControl: "input-calendar-header-control",
-  calendarHeaderLevel: "input-calendar-header-level",
-  day: "input-calendar-day",
-  weekday: "input-calendar-weekday",
-  weekdaysRow: "input-calendar-weekdays",
-  monthRow: "input-calendar-month-row",
-  monthCell: "input-calendar-month-cell",
-  month: "input-calendar-month",
-  monthThead: "input-calendar-month-thead",
-  monthTbody: "input-calendar-month-tbody",
-} as Partial<Record<DatePickerStylesNames, string>>;
-
-const DEFAULT_ACTION_LABELS: Record<"clear" | "today" | "apply", string> = {
-  clear: "삭제",
-  today: "오늘",
-  apply: "적용하기",
-};
-
-const createEmptyValue = (type: DatePickerType): CalendarValue => {
-  if (type === "range") {
-    return [null, null];
-  }
-  if (type === "multiple") {
-    return [];
-  }
-  return null;
-};
-
-const serializeValue = (value: CalendarValue, type: DatePickerType) => {
-  if (type === "range" || type === "multiple") {
-    return JSON.stringify(value ?? createEmptyValue(type));
-  }
-  return (value as string) ?? "";
-};
-
-const formatDate = (date: Date | string | null) =>
-  date ? dayjs(date).format(DATE_FORMAT) : null;
-
-const mapValueToPicker = (value: CalendarValue, type: DatePickerType) => {
-  if (type === "range") {
-    const [start, end] = (value ?? [null, null]) as InputCalendarValue<"range">;
-    return [
-      start ? dayjs(start).toDate() : null,
-      end ? dayjs(end).toDate() : null,
-    ];
-  }
-  if (type === "multiple") {
-    return ((value ?? []) as InputCalendarValue<"multiple">).map(entry =>
-      entry ? dayjs(entry).toDate() : null,
-    );
-  }
-  if (typeof value === "string" && value) {
-    return dayjs(value).toDate();
-  }
-  return null;
-};
-
-const parseValueFromPicker = (
-  value: unknown,
-  type: DatePickerType,
-): CalendarValue => {
-  if (type === "range") {
-    const [start, end] = (value as [Date | null, Date | null]) ?? [null, null];
-    return [formatDate(start), formatDate(end)] as CalendarValue;
-  }
-  if (type === "multiple") {
-    return ((value as (Date | null)[]) || []).map(entry =>
-      formatDate(entry),
-    ) as CalendarValue;
-  }
-  return formatDate((value as Date | null) ?? null);
-};
-
-const getTodayValue = (type: DatePickerType): CalendarValue => {
-  const today = dayjs().format(DATE_FORMAT);
-  if (type === "range") {
-    return [today, today];
-  }
-  if (type === "multiple") {
-    return [today];
-  }
-  return today;
-};
-
-const resolveAction = (
-  action: InputCalendarActionButtonProps | undefined,
-  key: keyof typeof DEFAULT_ACTION_LABELS,
-) => {
-  const visible = action?.visible ?? true;
-  if (!visible) return null;
-  return {
-    label: action?.label ?? DEFAULT_ACTION_LABELS[key],
-    disabled: action?.disabled ?? false,
-  };
-};
-
-const InputCalendarBase = forwardRef<
-  HTMLDivElement,
-  InputCalendarProps<DatePickerType>
->(
-  // DatePickerType 유니언을 명시해 range/multiple 비교 로직 타입 오류를 방지한다.
-  (props, ref) => {
-    const {
-      mode = "date",
-      type = "default",
-      columns = 1,
-      value,
-      defaultValue,
-      onChange,
-      onValueChange,
-      onClear,
-      onToday,
-      onApply,
-      readOnly,
-      disabled,
-      datePickerProps,
-      actions,
-      name,
-      register,
-    } = props;
-
-    const [calendarValue, setCalendarValue] = useUncontrolled<CalendarValue>({
-      value,
-      defaultValue,
-      finalValue: createEmptyValue(type),
-      onChange: changedValue => {
-        onChange?.(changedValue as InputCalendarValue<typeof type>);
-        onValueChange?.(changedValue as InputCalendarValue<typeof type>);
-      },
-    });
-
-    const serializedValue = useMemo(
-      () => serializeValue(calendarValue, type),
-      [calendarValue, type],
-    );
-
-    const emitRegisterChange = useCallback(
-      (nextValue: CalendarValue) => {
-        if (!register?.onChange) {
-          return;
-        }
-
-        const syntheticEvent = {
-          target: {
-            name: register.name,
-            value: serializeValue(nextValue, type),
-          },
-          currentTarget: {
-            name: register.name,
-            value: serializeValue(nextValue, type),
-          },
-        } as unknown as ChangeEvent<HTMLInputElement>;
-
-        register.onChange(syntheticEvent);
-      },
-      [register, type],
-    );
-
-    const updateValue = useCallback(
-      (nextValue: CalendarValue) => {
-        setCalendarValue(nextValue as InputCalendarValue<typeof type>);
-        emitRegisterChange(nextValue);
-      },
-      [emitRegisterChange, setCalendarValue],
-    );
-
-    const handleDateChange = useCallback(
-      (next: unknown) => {
-        const normalized = parseValueFromPicker(next, type);
-        updateValue(normalized);
-      },
-      [type, updateValue],
-    );
-
-    const handleClear = () => {
-      updateValue(createEmptyValue(type));
-      onClear?.();
-    };
-
-    const handleToday = () => {
-      updateValue(getTodayValue(type));
-      onToday?.();
-    };
-
-    const handleApply = () => {
-      onApply?.(calendarValue as InputCalendarValue<typeof type>);
-    };
-
-    const resolvedClear = resolveAction(actions?.clear, "clear");
-    const resolvedToday = resolveAction(actions?.today, "today");
-    const resolvedApply = resolveAction(actions?.apply, "apply");
-
-    const isInteractive = !(readOnly || disabled);
-    const hiddenName = register?.name ?? name;
-
-    const handleHiddenRef = useCallback(
-      (node: HTMLInputElement | null) => {
-        if (register?.ref) {
-          register.ref(node);
-        }
-      },
-      [register],
-    );
-
-    const handleHiddenBlur = (event: FocusEvent<HTMLInputElement>) => {
-      register?.onBlur?.(event);
-    };
-
-    if (mode !== "date" && process.env.NODE_ENV !== "production") {
-      console.warn("InputCalendarBase: 현재 date 모드만 지원합니다.");
-    }
-
-    const singleRangeProps =
-      type === "range"
-        ? {
-            allowSingleDateInRange: true,
-          }
-        : {};
-
-    return (
-      <div
-        ref={ref}
-        className="input-calendar"
-        data-mode={mode}
-        data-type={type}
-        data-columns={columns}
-        data-disabled={disabled ? "true" : undefined}
-      >
-        {hiddenName ? (
-          <input
-            type="hidden"
-            name={hiddenName}
-            value={serializedValue}
-            readOnly
-            ref={handleHiddenRef}
-            onBlur={handleHiddenBlur}
-          />
-        ) : null}
-        <div className="input-calendar-container">
-          <DatePicker
-            classNames={DATE_PICKER_CLASS_NAMES}
-            value={mapValueToPicker(calendarValue, type) as never}
-            onChange={handleDateChange as never}
-            type={type}
-            numberOfColumns={columns}
-            nextIcon={<ChevronRightIcon />}
-            previousIcon={<ChevronLeftIcon />}
-            // Mantine DatePicker에는 disabled prop이 없어 data-disabled로 상단에서 제어한다.
-            {...(datePickerProps ?? {})}
-            {...singleRangeProps}
-          />
-          <div className="input-calendar-footer">
-            <div className="input-calendar-footer-actions">
-              {resolvedClear ? (
-                <Button.Default
-                  fill="outlined"
-                  size="small"
-                  priority="tertiary"
-                  disabled={!isInteractive || resolvedClear.disabled}
-                  onClick={handleClear}
-                  className="input-calendar-action-button"
-                >
-                  {resolvedClear.label}
-                </Button.Default>
-              ) : (
-                <span />
-              )}
-              {resolvedToday ? (
-                <Button.Default
-                  fill="outlined"
-                  size="small"
-                  priority="secondary"
-                  disabled={!isInteractive || resolvedToday.disabled}
-                  onClick={handleToday}
-                  className="input-calendar-action-button"
-                >
-                  {resolvedToday.label}
-                </Button.Default>
-              ) : null}
-            </div>
-            {resolvedApply ? (
-              <Button.Default
-                fill="solid"
-                size="large"
-                priority="primary"
-                disabled={!isInteractive || resolvedApply.disabled}
-                onClick={handleApply}
-                className="input-calendar-apply"
-              >
-                {resolvedApply.label}
-              </Button.Default>
-            ) : null}
-          </div>
-        </div>
-      </div>
-    );
-  },
-);
-
-InputCalendarBase.displayName = "InputCalendarBase";
-
-export { InputCalendarBase };

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

@@ -1,8 +0,0 @@
-"use client";
-
-import "../../styles/calendar.scss";
-import { InputCalendarBase } from "./Base";
-
-export const InputCalendar = {
-  Base: InputCalendarBase,
-};

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

@@ -1,110 +0,0 @@
-.input-calendar {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-6, 20px);
-  width: 100%;
-
-  &[data-disabled="true"] {
-    opacity: 0.6;
-  }
-}
-
-.input-calendar-container {
-  background-color: var(--color-common-100, #fff);
-  border-radius: var(--theme-radius-large-3, 16px);
-  box-shadow:
-    0 4px 20px rgba(0, 0, 0, 0.16),
-    0 0 2px rgba(0, 0, 0, 0.12);
-  padding: var(--spacing-padding-10, 32px) var(--spacing-padding-6, 16px)
-    var(--spacing-padding-6, 16px);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-5, 16px);
-}
-
-.input-calendar-root {
-  width: 100%;
-}
-
-.input-calendar-panel {
-  width: 100%;
-  border-radius: var(--theme-radius-large-1, 12px);
-  background-color: transparent;
-}
-
-.input-calendar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-inline: var(--spacing-padding-6, 16px);
-  margin-bottom: var(--spacing-gap-4, 12px);
-}
-
-.input-calendar-header-control {
-  width: 24px;
-  height: 24px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  background: transparent;
-  color: var(--color-label-strong, #18191b);
-}
-
-.input-calendar-header-level {
-  font-size: var(--font-heading-small-size, 19px);
-  font-weight: var(--font-heading-small-weight, 600);
-}
-
-.input-calendar-weekdays {
-  display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-  padding-bottom: var(--spacing-padding-2, 4px);
-}
-
-.input-calendar-weekday {
-  text-transform: none;
-  font-size: var(--font-heading-xxsmall-size, 15px);
-  color: var(--color-label-alternative, #afb1b6);
-  text-align: center;
-}
-
-.input-calendar-day {
-  width: 44px;
-  height: 44px;
-  border-radius: var(--theme-radius-large-1, 12px);
-  justify-self: center;
-  font-size: var(--font-body-medium-size, 17px);
-  color: var(--color-label-strong, #3d3f43);
-}
-
-.input-calendar-footer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-4, 12px);
-  width: 100%;
-}
-
-.input-calendar-footer-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-gap-3, 8px);
-}
-
-.input-calendar-action-button {
-  width: 100%;
-}
-
-.input-calendar-footer-actions > :first-child {
-  flex: 1 1 auto;
-}
-
-.input-calendar-footer-actions > :last-child {
-  flex: 1 1 auto;
-  justify-content: flex-end;
-}
-
-.input-calendar-apply {
-  width: 100%;
-}