@uniai-fe/uds-primitives 0.2.2 → 0.2.3

package/src/components/calendar/markup/Root.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { PopOver } from "../../pop-over";
+import type { CalendarRootProps } from "../types";
+import CalendarContainer from "./layout/Container";
+import CalendarCore from "./Core";
+
+/**
+ * Calendar Root; Header/Body/Footer + Grid 조합 템플릿.
+ * @component
+ * @param {CalendarRootProps} props root props
+ * @param {string} [props.className] Trigger element className override
+ * @param {CalendarValue} props.value 현재 선택 값(YYYY-MM-DD)
+ * @param {CalendarOnChange} props.onChange 값 변경 핸들러
+ * @param {CalendarColumns} [props.columns=1] Root 레이아웃 컬럼 상태
+ * @param {CalendarDatePickerProps} [props.datePickerProps] Mantine DatePicker 옵션
+ * @param {React.ReactNode} [props.header] Calendar Header 슬롯
+ * @param {React.ReactNode} [props.footer] Calendar Footer 슬롯
+ * @param {CalendarMode} [props.mode="date"] calendar 모드
+ * @param {boolean} [props.disabled] 비활성화 상태
+ * @param {boolean} [props.readOnly] 읽기 전용 상태
+ * @param {React.ReactNode} props.children Trigger 슬롯(children)
+ * @param {boolean} [props.open] 제어형 open 상태
+ * @param {boolean} [props.defaultOpen] 비제어 초기 open 상태
+ * @param {(open: boolean) => void} [props.onOpenChange] open 상태 변경 핸들러
+ * @param {"top" | "right" | "bottom" | "left"} [props.side="bottom"] Content 배치 방향
+ * @param {"start" | "center" | "end"} [props.align="start"] Content 정렬 기준
+ * @param {number} [props.sideOffset=4] Trigger와 Content 간격
+ * @param {number} [props.alignOffset] Content 정렬 보정값
+ * @param {boolean} [props.withPortal=true] Portal 사용 여부
+ * @param {HTMLElement | null} [props.portalContainer] Portal 컨테이너
+ * @example
+ * <Calendar.Root value={value} onChange={setValue} />
+ */
+const CalendarRoot = forwardRef<HTMLElement, CalendarRootProps>(
+  (
+    {
+      className,
+      value,
+      onChange,
+      columns = 1,
+      datePickerProps,
+      header,
+      footer,
+      mode = "date",
+      disabled,
+      readOnly,
+      children,
+      open,
+      defaultOpen,
+      onOpenChange,
+      side = "bottom",
+      align = "start",
+      sideOffset = 4,
+      alignOffset,
+      withPortal = true,
+      portalContainer,
+    },
+    ref,
+  ) => {
+    // disabled/readOnly 상태에서는 PopOver 토글을 막는다.
+    const isInteractive = !disabled && !readOnly;
+
+    const calendarNode = (
+      <CalendarContainer
+        ref={ref}
+        header={header}
+        footer={footer}
+        mode={mode}
+        columns={columns}
+        disabled={disabled}
+        readOnly={readOnly}
+        body={
+          <CalendarCore
+            value={value}
+            onChange={onChange}
+            datePickerProps={datePickerProps}
+          />
+        }
+      />
+    );
+
+    return (
+      <PopOver.Root
+        open={isInteractive ? open : false}
+        defaultOpen={isInteractive ? defaultOpen : false}
+        onOpenChange={nextOpen => {
+          if (!isInteractive) {
+            onOpenChange?.(false);
+            return;
+          }
+          onOpenChange?.(nextOpen);
+        }}
+        modal={false}
+      >
+        {/* Trigger 래퍼 div를 두지 않고 children 노드에 직접 trigger props를 주입한다. */}
+        <PopOver.Trigger
+          asChild
+          disabled={!isInteractive}
+          className={clsx("calendar-trigger", className)}
+        >
+          {/* children은 asChild 계약상 단일 element여야 하며, 해당 요소가 props를 DOM으로 전달해야 한다. */}
+          {children}
+        </PopOver.Trigger>
+        <PopOver.Content
+          className="calendar-pop-over-content"
+          side={side}
+          align={align}
+          sideOffset={sideOffset}
+          alignOffset={alignOffset}
+          withPortal={withPortal}
+          portalContainer={portalContainer}
+        >
+          {/* calendar 스킨 class는 content 내부에 고정한다. */}
+          <div className="calendar-root">{calendarNode}</div>
+        </PopOver.Content>
+      </PopOver.Root>
+    );
+  },
+);
+
+CalendarRoot.displayName = "CalendarRoot";
+
+export default CalendarRoot;

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

@@ -1,4 +1,26 @@
+import CalendarContainer from "./layout/Container";
+import CalendarHeader from "./layout/Header";
+import CalendarBody from "./layout/Body";
+import CalendarFooter from "./layout/Footer";
+import CalendarCore from "./Core";
+import CalendarRoot from "./Root";
+import { CalendarIcon } from "./Icon";
+
 /**
- * TODO(calendar): SOT 및 사용자 제약에 따라 컴포넌트를 구현한다.
+ * Calendar namespace.
+ * - Root
+ * - Container
+ * - Header
+ * - Body
+ * - Footer
+ * - Core
  */
-export {};
+export const Calendar = {
+  Root: CalendarRoot,
+  Container: CalendarContainer,
+  Header: CalendarHeader,
+  Body: CalendarBody,
+  Footer: CalendarFooter,
+  Core: CalendarCore,
+  Icon: CalendarIcon,
+};

package/src/components/calendar/markup/layout/Body.tsx

@@ -0,0 +1,12 @@
+import type { CalendarSectionProps } from "../../types";
+
+/**
+ * Calendar Body.
+ * @component
+ * @param {CalendarSectionProps} props body children
+ * @example
+ * <Calendar.Body>{grid}</Calendar.Body>
+ */
+export default function CalendarBody({ children }: CalendarSectionProps) {
+  return <div className="calendar-body">{children}</div>;
+}

package/src/components/calendar/markup/layout/Container.tsx

@@ -0,0 +1,43 @@
+import { forwardRef } from "react";
+import type { CalendarContainerProps } from "../../types";
+import CalendarBody from "./Body";
+import CalendarFooter from "./Footer";
+import CalendarHeader from "./Header";
+
+/**
+ * Calendar Layout Container.
+ * @component
+ * @param {CalendarContainerProps} props layout props
+ * @param {React.ReactNode} [props.header] 상단 header 콘텐츠
+ * @param {React.ReactNode} props.body 본문 콘텐츠(Calendar Core 포함)
+ * @param {React.ReactNode} [props.footer] 하단 footer 콘텐츠
+ * @param {CalendarMode} [props.mode="date"] calendar 모드
+ * @param {CalendarColumns} [props.columns=1] 동시 렌더링 컬럼 수
+ * @param {boolean} [props.disabled] 비활성화 상태
+ * @param {boolean} [props.readOnly] 읽기 전용 상태
+ * @example
+ * <Calendar.Container body={<Calendar.Grid value={value} onChange={setValue} />} />
+ */
+const CalendarContainer = forwardRef<HTMLElement, CalendarContainerProps>(
+  (
+    { header, body, footer, mode = "date", columns = 1, disabled, readOnly },
+    ref,
+  ) => (
+    <section
+      ref={ref}
+      className="calendar-container"
+      data-mode={mode}
+      data-columns={columns}
+      data-disabled={disabled ? "true" : undefined}
+      data-readonly={readOnly ? "true" : undefined}
+    >
+      {header ? <CalendarHeader>{header}</CalendarHeader> : null}
+      <CalendarBody>{body}</CalendarBody>
+      {footer ? <CalendarFooter>{footer}</CalendarFooter> : null}
+    </section>
+  ),
+);
+
+CalendarContainer.displayName = "CalendarContainer";
+
+export default CalendarContainer;

package/src/components/calendar/markup/layout/Footer.tsx

@@ -0,0 +1,12 @@
+import type { CalendarSectionProps } from "../../types";
+
+/**
+ * Calendar Footer.
+ * @component
+ * @param {CalendarSectionProps} props footer children
+ * @example
+ * <Calendar.Footer>{footerNode}</Calendar.Footer>
+ */
+export default function CalendarFooter({ children }: CalendarSectionProps) {
+  return <footer className="calendar-footer">{children}</footer>;
+}

package/src/components/calendar/markup/layout/Header.tsx

@@ -0,0 +1,12 @@
+import type { CalendarSectionProps } from "../../types";
+
+/**
+ * Calendar Header.
+ * @component
+ * @param {CalendarSectionProps} props header children
+ * @example
+ * <Calendar.Header>Custom Header</Calendar.Header>
+ */
+export default function CalendarHeader({ children }: CalendarSectionProps) {
+  return <header className="calendar-header">{children}</header>;
+}

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

@@ -0,0 +1,2 @@
+@use "./layout.scss";
+@use "./mantine-calendar.scss";

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

@@ -0,0 +1,21 @@
+.calendar-root {
+  width: fit-content;
+  max-width: 100%;
+}
+
+.calendar-trigger {
+  width: 100%;
+}
+
+.calendar-container {
+  display: grid;
+  gap: var(--spacing-gap-3);
+  width: fit-content;
+  max-width: 100%;
+}
+
+.calendar-body,
+.calendar-grid {
+  width: fit-content;
+  max-width: 100%;
+}

package/src/components/calendar/styles/mantine-calendar.scss

@@ -0,0 +1,240 @@
+.calendar-root,
+.calendar-grid {
+  // Calendar 기준 폭/패딩/컬럼 간격을 모듈 내부에서 고정한다.
+  --calendar-width: 375px;
+  --calendar-inline-padding: var(--spacing-padding-6);
+  --calendar-body-width: calc(
+    var(--calendar-width) - (var(--calendar-inline-padding) * 2)
+  );
+}
+
+.calendar-root {
+  // Calendar 내부 레이아웃 스킨(표면 스타일은 PopOver.Content가 담당).
+  padding: var(--spacing-padding-10) var(--spacing-padding-6)
+    var(--spacing-padding-6);
+  display: grid;
+  gap: var(--spacing-gap-3);
+  width: var(--calendar-width);
+  min-width: var(--calendar-width);
+  max-width: min(100vw - (var(--spacing-padding-5) * 2), 420px);
+  box-sizing: border-box;
+  z-index: 30;
+}
+
+.calendar-header {
+  margin-bottom: var(--spacing-gap-2);
+}
+
+.calendar-body {
+  display: grid;
+  gap: var(--spacing-gap-5);
+}
+
+.calendar-grid {
+  width: var(--calendar-body-width);
+}
+
+.calendar-grid table {
+  width: auto;
+}
+
+.calendar-month-level {
+  width: 100%;
+}
+
+.calendar-month-level > [data-month-level="true"],
+.calendar-month-level > [data-year-level="true"],
+.calendar-month-level > [data-decade-level="true"] {
+  width: 100%;
+}
+
+.calendar-header-row {
+  display: grid;
+  grid-template-columns: 44px 1fr 44px;
+  align-items: center;
+  width: 100%;
+  max-width: none;
+  column-gap: var(--spacing-gap-5);
+  padding: 0 var(--spacing-padding-9);
+  margin-bottom: var(--spacing-gap-5);
+  --dch-fz: var(--font-heading-small-size) !important;
+}
+
+.calendar-header-control {
+  width: 44px;
+  height: 44px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-label-alternative);
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.calendar-header-control[data-direction="previous"] {
+  justify-self: start;
+}
+
+.calendar-header-control[data-direction="next"] {
+  justify-self: end;
+}
+
+.calendar-header-level {
+  justify-self: center;
+  font-size: var(--font-heading-small-size);
+  font-weight: var(--font-heading-small-weight);
+  text-align: center;
+  white-space: nowrap;
+  writing-mode: horizontal-tb;
+  letter-spacing: 0.2px;
+  /* Month/Year 헤더 텍스트는 디자인 기준에 맞춰 strong 컬러를 사용한다. */
+  color: var(--color-label-strong);
+}
+
+.calendar-header-control:where(:not([data-disabled="true"])):hover {
+  background-color: var(--color-tertiary-default);
+  color: var(--color-label-standard);
+}
+
+.calendar-month-table {
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  table-layout: fixed;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.calendar-month-cell {
+  width: 46px;
+  padding: 1px;
+}
+
+.calendar-months-list {
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  table-layout: fixed;
+  border-collapse: separate;
+  border-spacing: var(--spacing-gap-3);
+}
+
+.calendar-months-list-cell {
+  padding: 0;
+}
+
+.calendar-months-list-control {
+  width: 100%;
+  min-width: 0;
+  height: 44px;
+  padding: 0 var(--spacing-padding-2);
+  border: none;
+  border-radius: var(--theme-radius-medium-3);
+  font-size: var(--font-body-medium-size);
+  font-weight: var(--font-body-medium-weight);
+  line-height: 1.5;
+  color: var(--color-label-standard);
+  text-transform: none;
+}
+
+.calendar-months-list-control[data-selected="true"] {
+  background-color: var(--color-primary-default);
+  color: var(--color-common-100);
+}
+
+.calendar-months-list-control:where(
+    :not([data-disabled="true"], [data-selected="true"])
+  ):hover {
+  background-color: var(--color-secondary-default);
+}
+
+.calendar-years-list {
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  table-layout: fixed;
+  border-collapse: separate;
+  border-spacing: var(--spacing-gap-3);
+}
+
+.calendar-years-list-cell {
+  padding: 0;
+}
+
+.calendar-years-list-control {
+  width: 100%;
+  min-width: 0;
+  height: 44px;
+  padding: 0 var(--spacing-padding-2);
+  border: none;
+  border-radius: var(--theme-radius-medium-3);
+  font-size: var(--font-body-medium-size);
+  font-weight: var(--font-body-medium-weight);
+  line-height: 1.5;
+  color: var(--color-label-standard);
+  text-transform: none;
+}
+
+.calendar-years-list-control[data-selected="true"] {
+  background-color: var(--color-primary-default);
+  color: var(--color-common-100);
+}
+
+.calendar-years-list-control:where(
+    :not([data-disabled="true"], [data-selected="true"])
+  ):hover {
+  background-color: var(--color-secondary-default);
+}
+
+.calendar-weekdays {
+  text-transform: none;
+  --wr-fz: var(--font-heading-xxsmall-size) !important;
+  --wr-spacing: 10px !important;
+}
+
+.calendar-weekday {
+  text-transform: none;
+  width: 46px;
+  min-width: 46px;
+  height: 30px;
+  padding-bottom: 5px;
+  font-size: var(--font-heading-xxsmall-size);
+  font-weight: var(--font-heading-xxsmall-weight);
+  line-height: 1.5;
+  letter-spacing: 0.2px;
+  color: var(--color-label-alternative);
+  text-align: center;
+  vertical-align: middle;
+}
+
+.calendar-day {
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: none;
+  border-radius: var(--theme-radius-large-1);
+  font-size: var(--font-body-medium-size);
+  color: var(--color-label-standard);
+}
+
+.calendar-day[data-outside="true"] {
+  color: var(--color-label-alternative);
+}
+
+.calendar-day[data-selected="true"],
+.calendar-day[data-focused="true"] {
+  background-color: var(--color-primary-default);
+  color: var(--color-common-100);
+}
+
+.calendar-day:where(:not([data-disabled="true"])):hover {
+  background-color: var(--color-secondary-default);
+  color: var(--color-label-standard);
+  border: none;
+}
+
+.calendar-footer {
+  width: 100%;
+}