@uniai-fe/ui-legacy 0.1.1

package/src/form-field/input/components/assets/calendar/DateTimePicker.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useAtomValue } from "jotai";
+import { Controller, useFormContext } from "react-hook-form";
+import flatpickr from "flatpickr";
+import DateTimePicker from "react-flatpickr";
+import { Korean } from "flatpickr/dist/l10n/ko";
+import { Japanese } from "flatpickr/dist/l10n/ja";
+
+import type { InputDateTimeProps } from "../../../../../types";
+import { systemLocaleState } from "@uniai-fe/i18n/jotai";
+import { dateFormat, isValidDateType } from "@uniai-fe/util-functions";
+import StyledInputBase from "../../../styles/styled-components/base";
+
+export default function CustomDateTimePicker({
+  selectorId,
+  dataKey,
+  label,
+  attr,
+  state,
+  register,
+  width,
+  updateIsOpenCalendar,
+  flatpickrOptions = {},
+  flatpickrCustomButtons,
+  preventChangeDatePicker,
+  onChangeDatePicker,
+  dateValidOptions,
+  errorMonitor,
+  formError,
+}: InputDateTimeProps) {
+  const locale = useAtomValue(systemLocaleState) || "ko";
+
+  const flatPickrRef = useRef<DateTimePicker | null>(null);
+
+  const styledOptions = useMemo(
+    () => ({
+      $width: width,
+      $icon: true,
+    }),
+    [width],
+  );
+
+  const attrs = {
+    id: selectorId,
+    "aria-label": `${label.name} 날짜/시간 입력`,
+    "table-cell": attr?.isTableCell ? "true" : "false",
+  };
+  if (typeof attr?.origin !== "undefined")
+    Object.assign(attrs, { ...attr.origin });
+
+  const [selectDate, setSelectDate] = useState<Date | string>("");
+  const [isReadonly, setReadonly] = useState<boolean>(false);
+
+  const formMethods = useFormContext();
+
+  // 날짜를 범위지정 하는 경우
+  const isRange = useMemo(
+    () => flatpickrOptions.mode === "range",
+    [flatpickrOptions.mode],
+  );
+
+  const options: flatpickr.Options.Options = useMemo(
+    () => ({
+      clickOpens: !isReadonly,
+      altFormat: "Y. m. d. H:i",
+      dateFormat: "Y. m. d. H:i",
+      monthSelectorType: "static",
+      locale: locale === "jp" ? Japanese : locale === "ko" ? Korean : "en", // 언어 변경에 따른 달력 설정 업데이트
+      time_24hr: true,
+      enableTime: true,
+      ...flatpickrOptions,
+    }),
+    [flatpickrOptions, isReadonly, locale],
+  );
+
+  // readonly에서 열림 방지
+  useEffect(() => {
+    // if (!flatPickrRef.current) return;
+    // flatPickrRef.current.flatpickr.set(
+    const readonly = ["readonly", "disabled"].includes(state?.fixed || "");
+    setReadonly(readonly);
+    // console.log(`readonly`, readonly);
+    // );
+  }, [state?.fixed]);
+
+  // 에러 모니터링
+  useEffect(() => {
+    if (typeof errorMonitor !== "undefined")
+      errorMonitor({ inputKey: dataKey });
+  }, [errorMonitor, dataKey, selectDate, formError]);
+
+  const registerName = useMemo(
+    () => (register?.name ? register.name : dataKey),
+    [dataKey, register?.name],
+  );
+  // console.log(`[${registerName}] options`, options);
+
+  return (
+    <>
+      {typeof formMethods?.control !== "undefined" ? (
+        <Controller
+          name={registerName}
+          control={formMethods.control}
+          rules={dateValidOptions}
+          render={({ field: { onChange, ...fieldProps } }) => (
+            <StyledInputBase.box
+              {...styledOptions}
+              as={DateTimePicker}
+              {...fieldProps}
+              ref={flatPickrRef}
+              {...attrs}
+              options={options}
+              disabled={isReadonly}
+              onOpen={() => {
+                if (typeof updateIsOpenCalendar !== "undefined")
+                  updateIsOpenCalendar(true);
+              }}
+              onClose={() => {
+                if (typeof updateIsOpenCalendar !== "undefined")
+                  updateIsOpenCalendar(false);
+              }}
+              onChange={(selectedDates, ...props) => {
+                if (typeof onChangeDatePicker !== "undefined") {
+                  onChangeDatePicker(selectedDates, ...props);
+                }
+
+                if (!preventChangeDatePicker) {
+                  const updateDate = isRange
+                    ? `${dateFormat(selectedDates[0])} ~ ${
+                        isValidDateType(selectedDates[1])
+                          ? dateFormat(selectedDates[1])
+                          : "----.--.--."
+                      }`
+                    : selectedDates[0];
+
+                  setSelectDate(updateDate);
+                  onChange(
+                    isRange ? selectedDates : selectedDates[0],
+                    ...props,
+                  );
+                }
+              }}
+            />
+          )}
+        />
+      ) : (
+        <StyledInputBase.box
+          as={DateTimePicker}
+          {...styledOptions}
+          ref={flatPickrRef}
+          {...attrs}
+          options={options}
+          disabled={isReadonly}
+          onOpen={() => {
+            if (typeof updateIsOpenCalendar !== "undefined")
+              updateIsOpenCalendar(true);
+          }}
+          onClose={() => {
+            if (typeof updateIsOpenCalendar !== "undefined")
+              updateIsOpenCalendar(false);
+          }}
+          onChange={(selectedDates, ...props) => {
+            if (typeof onChangeDatePicker !== "undefined") {
+              onChangeDatePicker(selectedDates, ...props);
+            }
+            const updateDate = isRange
+              ? `${dateFormat(selectedDates[0])} ~ ${dateFormat(selectedDates[1])}`
+              : selectedDates[0];
+
+            setSelectDate(updateDate);
+          }}
+        />
+      )}
+      {flatpickrCustomButtons &&
+        flatpickrCustomButtons instanceof HTMLElement &&
+        flatPickrRef.current &&
+        flatPickrRef.current.flatpickr?.calendarContainer &&
+        createPortal(
+          flatpickrCustomButtons(flatPickrRef.current.flatpickr),
+          flatPickrRef.current.flatpickr.calendarContainer,
+        )}
+    </>
+  );
+}

package/src/form-field/input/components/assets/calendar/TimePicker.tsx

@@ -0,0 +1,163 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import flatpickr from "flatpickr";
+import DateTimePicker from "react-flatpickr";
+// import { Korean } from "flatpickr/dist/l10n/ko";
+// import { Japanese } from "flatpickr/dist/l10n/ja";
+
+import type { InputDateTimeProps } from "../../../../../types";
+import { dateFormat, isValidDateType } from "@uniai-fe/util-functions";
+import StyledInputBase from "../../../styles/styled-components/base";
+
+// import PrevCalendarIcon from "@img/buttons/calendar/prev.svg";
+// import NextCalendarIcon from "@img/buttons/calendar/next.svg";
+
+export default function CustomTimePicker({
+  selectorId,
+  dataKey,
+  label,
+  attr,
+  state,
+  register,
+  width,
+  updateIsOpenCalendar,
+  flatpickrOptions = {},
+  preventChangeDatePicker,
+  onChangeDatePicker,
+  dateValidOptions,
+  errorMonitor,
+  formError,
+}: InputDateTimeProps) {
+  const flatPickrRef = useRef<DateTimePicker | null>(null);
+
+  const styledOptions = useMemo(
+    () => ({
+      $width: width,
+      $icon: true,
+    }),
+    [width],
+  );
+
+  const attrs = {
+    id: selectorId,
+    "aria-label": `${label.name} 시간 입력`,
+    "table-cell": attr?.isTableCell ? "true" : "false",
+  };
+  if (typeof attr?.origin !== "undefined")
+    Object.assign(attrs, { ...attr.origin });
+
+  const [selectTime, setSelectTime] = useState<Date | string>("");
+  const [isReadonly, setReadonly] = useState<boolean>(false);
+
+  const formMethods = useFormContext();
+
+  const options: flatpickr.Options.Options = useMemo(
+    () => ({
+      clickOpens: !isReadonly,
+      altFormat: "H:i", // "h:i K",
+      dateFormat: "H:i", // "h:i K",
+      // locale: Korean,
+      time_24hr: true,
+      noCalendar: true,
+      enableTime: true,
+      ...flatpickrOptions,
+    }),
+    [flatpickrOptions, isReadonly],
+  );
+  // readonly에서 열림 방지
+  useEffect(() => {
+    // if (!flatPickrRef.current) return;
+    // flatPickrRef.current.flatpickr.set(
+    const readonly = ["readonly", "disabled"].includes(state?.fixed || "");
+    setReadonly(readonly);
+    // console.log(`readonly`, readonly);
+    // );
+  }, [state?.fixed]);
+
+  // 에러 모니터링
+  useEffect(() => {
+    if (typeof errorMonitor !== "undefined")
+      errorMonitor({ inputKey: dataKey });
+  }, [errorMonitor, dataKey, selectTime, formError]);
+
+  const registerName = useMemo(
+    () => (register?.name ? register.name : dataKey),
+    [dataKey, register?.name],
+  );
+  // console.log(`[${registerName}] options`, options);
+
+  return typeof formMethods?.control !== "undefined" ? (
+    <Controller
+      name={registerName}
+      control={formMethods.control}
+      rules={dateValidOptions}
+      render={({ field: { onChange, ...fieldProps } }) => (
+        <StyledInputBase.box
+          {...styledOptions}
+          as={DateTimePicker}
+          {...fieldProps}
+          ref={flatPickrRef}
+          {...attrs}
+          options={options}
+          disabled={isReadonly}
+          onOpen={() => {
+            if (typeof updateIsOpenCalendar !== "undefined")
+              updateIsOpenCalendar(true);
+          }}
+          onClose={() => {
+            if (typeof updateIsOpenCalendar !== "undefined")
+              updateIsOpenCalendar(false);
+          }}
+          onChange={(selectedDates, ...props) => {
+            if (typeof onChangeDatePicker !== "undefined") {
+              onChangeDatePicker(selectedDates, ...props);
+            }
+
+            if (!preventChangeDatePicker) {
+              const isRange = flatpickrOptions.mode === "range";
+
+              const updateDate = isRange
+                ? `${dateFormat(selectedDates[0])} ~ ${
+                    isValidDateType(selectedDates[1])
+                      ? dateFormat(selectedDates[1])
+                      : "----.--.--."
+                  }`
+                : selectedDates[0];
+
+              setSelectTime(updateDate);
+              onChange(isRange ? selectedDates : selectedDates[0], ...props);
+            }
+          }}
+        />
+      )}
+    />
+  ) : (
+    <StyledInputBase.box
+      {...styledOptions}
+      as={DateTimePicker}
+      ref={flatPickrRef}
+      {...attrs}
+      options={options}
+      disabled={isReadonly}
+      onOpen={() => {
+        if (typeof updateIsOpenCalendar !== "undefined")
+          updateIsOpenCalendar(true);
+      }}
+      onClose={() => {
+        if (typeof updateIsOpenCalendar !== "undefined")
+          updateIsOpenCalendar(false);
+      }}
+      onChange={(selectedDates, ...props) => {
+        if (typeof onChangeDatePicker !== "undefined") {
+          onChangeDatePicker(selectedDates, ...props);
+        }
+        const isRange = flatpickrOptions.mode === "range";
+        const updateDate = isRange
+          ? `${dateFormat(selectedDates[0])} ~ ${dateFormat(selectedDates[1])}`
+          : selectedDates[0];
+
+        setSelectTime(updateDate);
+      }}
+    />
+  );
+}

package/src/form-field/input/components/assets/calendar/custom/ButtonContainer.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import StyledCalendar from "../../../../styles/styled-components/calendar";
+
+export default function CustomButtonContainer({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <StyledCalendar.customButtonContainer>
+      {children}
+    </StyledCalendar.customButtonContainer>
+  );
+}

package/src/form-field/input/components/assets/calendar/custom/TodayButton.tsx

@@ -0,0 +1,23 @@
+import { AirtableText } from "@uniai-fe/i18n";
+import ButtonDefault from "../../../../../../button/components/base/Default";
+
+export default function CustomCalendarTodayButton({
+  clickEvent,
+}: {
+  clickEvent: () => void;
+}) {
+  return (
+    <ButtonDefault
+      styleOptions={{
+        priorityType: "neutral",
+        fillType: "solid",
+        sizeType: "small",
+      }}
+      clickEvent={clickEvent}
+    >
+      <span>
+        <AirtableText tKey="date/today" tAlt="오늘" />
+      </span>
+    </ButtonDefault>
+  );
+}

package/src/form-field/input/components/assets/icon/CalendarIcon.tsx

@@ -0,0 +1,14 @@
+import Image from "next/image";
+
+export default function CalendarIcon() {
+  return (
+    // <figure className="date-picker-calendar-icon">
+    <Image
+      src="/img/buttons/calendar/calendar_line.svg"
+      width={24}
+      height={24}
+      alt="날짜선택"
+    />
+    // </figure>
+  );
+}

package/src/form-field/input/components/assets/icon/CheckIcon.tsx

@@ -0,0 +1,14 @@
+import Image from "next/image";
+
+export default function InputCheckIcon({ isChecked }: { isChecked: boolean }) {
+  return (
+    <figure className={`input-check-icon ${isChecked ? "checked" : ""}`}>
+      <Image
+        src="/img/buttons/checkbox_check.svg"
+        width={10}
+        height={8}
+        alt="checked"
+      />
+    </figure>
+  );
+}

package/src/form-field/input/components/assets/icon/ExpandIcon.tsx

@@ -0,0 +1,14 @@
+import Image from "next/image";
+
+export default function ExpandIcon() {
+  return (
+    <figure className="input-arrow">
+      <Image
+        src="/img/buttons/select_arrow.svg"
+        alt="선택메뉴"
+        width={12}
+        height={7}
+      />
+    </figure>
+  );
+}

package/src/form-field/input/components/assets/icon/StatusIcon.tsx

@@ -0,0 +1,17 @@
+/**
+ * 입력창 상태 아이콘 컴포넌트
+ * @property {ReactNode} status 상태 값
+ */
+export default function InputStatusIcon({
+  statusCode,
+  icon,
+}: {
+  statusCode: string;
+  icon: React.ReactNode;
+}) {
+  return (
+    <figure className="input-util-item input-status" status-code={statusCode}>
+      {icon}
+    </figure>
+  );
+}

package/src/form-field/input/components/assets/util/Countdown.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { convert2Digit } from "@uniai-fe/util-functions";
+import StyledInputUtil from "../../../styles/styled-components/util";
+
+/**
+ * 입력 제한시간 카운드다운 컴포넌트
+ * @property {number | null} remainTime 입력 제한시간 값
+ */
+export default function InputCountdown({
+  remainTime,
+}: {
+  remainTime: number | null;
+}) {
+  const convertTime = (sec: number) => {
+    const minutes = Math.floor(sec / 60);
+    const seconds = Math.floor(sec % 60);
+    return `${convert2Digit(minutes)}:${convert2Digit(seconds)}`;
+  };
+  return (
+    remainTime !== null && (
+      <StyledInputUtil.countdown className="input-util-item input-countdown">
+        {remainTime === 0 ? (
+          <span>입력 시간이 초과되었습니다.</span>
+        ) : (
+          <>
+            <span>입력대기 시간</span>
+            <time>{convertTime(remainTime)}</time>
+          </>
+        )}
+      </StyledInputUtil.countdown>
+    )
+  );
+}

package/src/form-field/input/components/assets/util/StatusNotice.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import StyledInputUtil from "../../../styles/styled-components/util";
+
+export default function InputStatusNotice({
+  statusCode,
+  icon,
+  message,
+}: {
+  statusCode: string;
+  icon?: React.ReactNode;
+  message?: string | React.ReactNode;
+}) {
+  return (
+    typeof message !== "undefined" && (
+      <StyledInputUtil.notice className="input-notice" $status={statusCode}>
+        {icon && <figure>{icon}</figure>}
+        <p>{message}</p>
+      </StyledInputUtil.notice>
+    )
+  );
+}

package/src/form-field/input/components/click/Checkbox.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+import InputContainer from "../Container";
+import IconInput from "../../../../icon/components/input";
+
+import StyledInputClick from "../../styles/styled-components/click";
+
+import type { InputProps } from "../../../../types";
+
+/**
+ * input; checkbox
+ * @component
+ * @param {InputProps} props
+ * @property {string} [className]
+ * @property {string} selectorId
+ * @property {string} dataKey
+ * @property {LabelOptionType} label
+ * @property {UseFormRegisterReturn} register react-hook-form의 useForm().register() 메소드
+ * @property {InputAttrType} [attr] HTML 태그 속성
+ * @property {InputUtilType} [util] 유틸리티 기능 설정
+ * @property {FormFieldStatePropsType} [state] 입력요소 상태 설정
+ * @property {Function} [onDefaultChange] react-hook-form 기본 onChange 기능을 덮어씀
+ * @property {Function} [onCustomChange] react-hook-form 기본 onChange 기능과 함께씀
+ * @property {FormFieldErrorMonitorType} [errorMonitor] react-hook-form 기본 onChange 기능과 함께씀
+ * @property {FieldError | FieldErrors} [formError] react-hook-form의 useForm().formState.errors.[dataName]
+ */
+export default function InputCheckbox({
+  className,
+  label,
+  selectorId,
+  dataKey,
+  register,
+  attr,
+  state,
+  onDefaultChange,
+  onCustomChange,
+  errorMonitor,
+  formError,
+}: InputProps) {
+  // 입력 상태 기본값
+  const defaultState = useMemo(
+    () =>
+      state?.fixed ? state.fixed : state?.default ? state.default : "active",
+    [state?.default, state?.fixed],
+  );
+
+  // 전체선택 등의 상태 외부 제어시
+  const [checked, setChecked] = useState<boolean>(false);
+
+  useEffect(() => {
+    setChecked(state?.checked || false);
+  }, [state?.checked]);
+
+  // 에러 모니터링
+  useEffect(() => {
+    if (typeof errorMonitor !== "undefined")
+      errorMonitor({ inputKey: dataKey });
+  }, [errorMonitor, dataKey, checked, formError]);
+
+  return (
+    <InputContainer
+      className={className}
+      fieldType="checkbox"
+      selectorId={selectorId}
+      label={label}
+      readonly={["readonly", "disabled"].includes(defaultState)}
+      wrapperOptions={{ state: defaultState }}
+    >
+      <StyledInputClick.container>
+        <StyledInputClick.checkbox
+          {...attr?.origin}
+          type="checkbox"
+          id={selectorId}
+          aria-label={`${label.name} 체크박스`}
+          name={dataKey}
+          {...register}
+          checked={checked}
+          disabled={["readonly", "disabled"].includes(defaultState)}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            if (typeof onDefaultChange !== "undefined") {
+              onDefaultChange(e);
+              return;
+            }
+
+            register?.onChange(e);
+
+            if (typeof onCustomChange !== "undefined") onCustomChange(e);
+          }}
+        />
+        <IconInput.Checkbox
+          checked={checked}
+          disabled={["readonly", "disabled"].includes(state?.fixed || "active")}
+        />
+      </StyledInputClick.container>
+    </InputContainer>
+  );
+}

package/src/form-field/input/components/click/Radio.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { useMemo } from "react";
+
+import InputContainer from "../Container";
+
+import StyledInputClick from "../../styles/styled-components/click";
+
+import type { InputProps } from "../../../../types";
+import IconInput from "../../../../icon/components/input";
+
+/**
+ * input; radio
+ * @component
+ * @param {InputProps} props
+ * @property {string} [className]
+ * @property {string} selectorId
+ * @property {string} dataKey
+ * @property {LabelOptionType} label
+ * @property {UseFormRegisterReturn} register react-hook-form의 useForm().register() 메소드
+ * @property {InputAttrType} [attr] HTML 태그 속성
+ * @property {InputUtilType} [util] 유틸리티 기능 설정
+ * @property {FormFieldStatePropsType} [state] 입력요소 상태 설정
+ * @property {Function} [onDefaultChange] react-hook-form 기본 onChange 기능을 덮어씀
+ * @property {Function} [onCustomChange] react-hook-form 기본 onChange 기능과 함께씀
+ * @property {FormFieldErrorMonitorType} [errorMonitor] react-hook-form 기본 onChange 기능과 함께씀
+ * @property {FieldError | FieldErrors} [formError] react-hook-form의 useForm().formState.errors.[dataName]
+ */
+export default function InputRadio({
+  className,
+  label,
+  selectorId,
+  dataKey,
+  register,
+  attr,
+  state,
+  onDefaultChange,
+  onCustomChange,
+}: InputProps) {
+  // 입력 상태 기본값
+  const defaultState = useMemo(
+    () =>
+      state?.fixed ? state.fixed : state?.default ? state.default : "active",
+    [state?.default, state?.fixed],
+  );
+
+  return (
+    <InputContainer
+      className={className}
+      fieldType="radio"
+      selectorId={selectorId}
+      label={label}
+      wrapperOptions={{ state: defaultState }}
+    >
+      <StyledInputClick.container>
+        <StyledInputClick.radio
+          type="radio"
+          id={selectorId}
+          aria-label={`${label.name} 선택`}
+          name={dataKey}
+          value={attr?.defaultValue}
+          {...register}
+          disabled={["readonly", "disabled"].includes(state?.fixed || "active")}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            if (typeof onDefaultChange !== "undefined") {
+              onDefaultChange(e);
+              return;
+            }
+            register?.onChange(e);
+            if (typeof onCustomChange !== "undefined") onCustomChange(e);
+          }}
+        />
+        <IconInput.Radio value={label.tooltip || ""} />
+      </StyledInputClick.container>
+    </InputContainer>
+  );
+}