@uniai-fe/ui-legacy 0.1.1

package/src/types/form/common/state.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Form field 상태; 인터랙션 타입
+ * - success: 성공
+ * - error: 에러
+ * - done: 완료
+ * - fail: 실패
+ * - warning: 경고
+ */
+export type FieldStateInteractionType =
+  | "success"
+  | "error"
+  | "done"
+  | "fail"
+  | "warning";
+
+/**
+ * Form field 상태; 읽기 전용 타입
+ * - disabled: 비활성화
+ * - readonly: 읽기 전용
+ */
+export type FieldStateReadonlyType = "disabled" | "readonly";
+/**
+ * Form field 상태; 데이터 통신상태 타입
+ * - loading: 로딩중
+ * - pending: 대기중
+ * - idle: 대기상태
+ * - success: 성공
+ * - error: 에러
+ */
+export type FieldStateQueryType =
+  | "loading"
+  | "pending"
+  | "idle"
+  | "success"
+  | "error"; // React-query status
+
+// export type InputStateCheckButtonStateType = "selected" | "saved" | "empty" | "";
+
+// 기타 상태 관리는 별도로 함
+/**
+ * Form field 상태 타입
+ * - active: 기본 상태
+ * - focused: 입력중
+ * - disabled: 비활성화
+ * - readonly: 읽기 전용
+ * - success: 성공
+ * - error: 에러
+ * - done: 완료
+ * - fail: 실패
+ * - warning: 경고
+ * - loading: 로딩중
+ * - pending: 대기중
+ * - idle: 대기상태
+ */
+export type FieldStateType =
+  | "active" // 기본 상태
+  | "focused" // 입력중
+  | FieldStateReadonlyType
+  | FieldStateInteractionType;
+
+/**
+ * Form field 상태 Props
+ * @property {FieldStateType} default: 기본 상태 (인터랙션에 따라 동적 상태)
+ * @property {FieldStateReadonlyType} fixed: 고정 상태 (특정 상태로 고정이 필요한 경우)
+ * @property {boolean} checked: 체크 상태 (체크박스, 라디오 등에서 사용)
+ */
+export type FormFieldStatePropsType = Partial<{
+  /**
+   * 기본 상태 (인터랙션에 따라 동적 상태)
+   * Form field 상태 타입
+   * - active: 기본 상태
+   * - focused: 입력중
+   * - disabled: 비활성화
+   * - readonly: 읽기 전용
+   * - success: 성공
+   * - error: 에러
+   * - done: 완료
+   * - fail: 실패
+   * - warning: 경고
+   * - loading: 로딩중
+   * - pending: 대기중
+   * - idle: 대기상태
+   */
+  default: FieldStateType;
+  /**
+   * 고정 상태 (특정 상태로 고정이 필요한 경우)
+   * Form field 상태; 읽기 전용 타입
+   * - disabled: 비활성화
+   * - readonly: 읽기 전용
+   */
+  fixed: FieldStateReadonlyType;
+  /**
+   * 체크 상태 (체크박스, 라디오 등에서 사용)
+   */
+  checked: boolean;
+}>;

package/src/types/form/common/validation.d.ts

@@ -0,0 +1,18 @@
+import type { FieldErrors } from "react-hook-form";
+
+export type FormFieldErrorMonitorPropsType = {
+  inputKey: string;
+};
+export type FormFieldErrorMonitorType = ({
+  inputKey,
+}: FormFieldErrorMonitorPropsType) => void;
+
+export type FormFieldMonitorSuccessMessagesType = {
+  [inputKey: string]: string | undefined;
+};
+
+export interface UseErrorMonitorHookPropsType {
+  initFormStatus: InputInitStatusType;
+  formErrors?: FieldErrors;
+  changedValues?: ChangedValuesType;
+}

package/src/types/form/index.d.ts

@@ -0,0 +1,5 @@
+export type * from "./common";
+export type * from "./input";
+export type * from "./select";
+export type * from "./search";
+export type * from "./util";

package/src/types/form/input/index.d.ts

@@ -0,0 +1,7 @@
+// export type * from "./legacy/base";
+// export type * from "./legacy/auto-complete";
+// export type * from "./legacy/find-address";
+// export type * from "./legacy/refer";
+// export type * from "./legacy/select.options";
+
+export type * from "./props";

package/src/types/form/input/legacy/auto-complete.d.ts

@@ -0,0 +1,77 @@
+export interface AutoCompletePartnerDataType extends SelectDataType {
+  name: string;
+  environment?: string | number;
+  owner: string;
+  tel: string;
+  address: string;
+}
+
+export interface AutoCompleteOptionsCommonType {
+  menuName: string | React.ReactNode;
+  data:
+    | FirmOptionsGetAPIDataType
+    | FeedsMedicineEachTypeListAPIDataType
+    | GetQueryOptionsDataType;
+}
+
+export interface AutoCompletePartnerOptionsType
+  extends AutoCompleteOptionsCommonType {
+  data: AutoCompletePartnerDataType[];
+}
+
+export interface InputAutoCompleteClickEventPropsType {
+  menuType: "item" | "custom";
+  menuData?:
+    | GetQueryOptionsDataType
+    | FirmOptionsGetAPIDataType
+    | FeedsMedicineEachTypeListAPIDataType;
+}
+
+export type AutoCompleteCategoryType =
+  | "농장"
+  | "정부기관"
+  | "유통사"
+  | "수의사"
+  | "병성기관"
+  | "부화장"
+  | "도계장"
+  | "사료"
+  | "약품"
+  | "유니아이"
+  | "품종"
+  | "약품"
+  | "의약외품"
+  | "샤료"
+  | "샤료첨가제"
+  | string;
+export interface InputAutoCompleteOptionPropsType {
+  category: AutoCompleteCategoryType;
+  isFirm?: boolean; // 업체 검색시
+  isFeedMedicine?: boolean; // 사료/약품 검색시
+  fmnTypeIdx?: string; // 사료/약품 유형값 1(사료),2(사료첨가제),3(동물의약품),4(동물의약외품)
+  isBioType?: boolean; // 품종 검색시
+  activeSelfInput?: boolean; // 직접입력 활성화 여부
+  activeSelfDataName?: string;
+  dataNameOptions: {
+    // 자동완성으로 맵핑할 데이터 이름
+    idx: string;
+    ownerName?: string;
+    phone?: string;
+    address?: string;
+    userGroup?: string;
+    cageEnvironment?: string;
+    provider?: string;
+  };
+  customModalOption?: ModalStateType;
+}
+
+export interface FirmOptionsGetAPIDataType {
+  [optionDataKey: string]: string | number;
+  idx: number | string;
+  firm_name: string;
+  set_user_group_name: string;
+  set_breed_type_name: string;
+  owner_name: string;
+  mobile: string | number;
+  address: string;
+}

package/src/types/form/input/legacy/base.d.ts

@@ -0,0 +1,159 @@
+// import type { LabelOptionType, MaskType } from "../common";
+
+// export type InputNativeType =
+//   | "text"
+//   | "password"
+//   | "email"
+//   | "search"
+//   | "tel"
+//   | "number"
+//   | "url"
+//   | "date"
+//   | "color"
+//   | "file"
+//   | "range"
+//   | "checkbox"
+//   | "radio"
+//   | "reset"
+//   | string;
+
+// export interface InputHtmlAttrType {
+//   // <input> type 속성 (default: "text")
+//   // 텍스트 계열 ("text" | "password" | "email" | "search" | "tel" | "number" | "url")
+//   // 특수목적 ("date" | "color" | "file" | "range")
+//   inputType?: InputNativeType;
+//   defaultValue?: string; // input default value
+//   maskType?: MaskType;
+//   isTableCell?: boolean;
+//   origin?: React.InputHTMLAttributes<
+//     HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+//   >;
+// }
+
+// export interface InputSelectItemsType {
+//   [dataKey: string]: string | number | boolean | undefined;
+//   key?: string;
+//   value: string | number;
+//   optionName: string;
+//   disabled?: boolean;
+// }
+
+// export interface InputSelectedValueType {
+//   optionName: string;
+//   value: number | string;
+// }
+
+// export interface InputSelectMultipleItemsType extends InputSelectItemsType {
+//   checkId: string;
+//   checked: boolean;
+//   data?: object;
+// }
+
+// // 입력창 유틸리티
+// export interface InputUtilType {
+//   time?: { show: boolean; remain: number | null }; // 입력 제한시간 카운트다운
+//   button?: ButtonDefaultPropsType; // 기능 버튼 (ex. 중복확인, 인증요청)
+//   customBtn?: React.ReactNode; // 라이브러리 패턴 상 버튼 자체를 자체 컴포넌트로 운용해야 하는 경우;
+//   search?: boolean; // 검색 아이콘 여부
+// }
+
+// export type InputStyleType =
+//   | "box"
+//   | "date"
+//   | "time"
+//   | "date-time"
+//   | "textarea"
+//   | "checkbox"
+//   | "check-button"
+//   | "radio"
+//   | "select"
+//   | "switch"
+//   | "auto-complete";
+
+// export type InputContainerBaseProps = {
+//   inputType: InputStyleType;
+//   selectorId: string;
+//   label: LabelOptionType;
+//   children: React.ReactNode;
+// };
+// export type InputWrapperOptionType = Partial<{
+//   state: string;
+//   focus: boolean;
+//   openSelect: boolean;
+// }>;
+// export type InputContainerProps = InputContainerBaseProps &
+//   Partial<{
+//     className: string;
+//     wrapperOptions: InputWrapperOptionType;
+//     status: InputStatusPropsType;
+//     util: InputUtilType;
+//     inputIcon: React.ReactNode;
+//     thumb: React.ReactNode;
+//     dropdown: React.ReactNode;
+//   }>;
+
+// export type InputInteractionStateType =
+//   | "success"
+//   | "error"
+//   | "done"
+//   | "fail"
+//   | "warning";
+
+// export type InputReadonlyType = "disabled" | "readonly";
+// export type InputQueryStateType =
+//   | "loading"
+//   | "pending"
+//   | "idle"
+//   | "success"
+//   | "error"; // React-query status
+// export type InputCheckButtonStateType = "selected" | "saved" | "empty" | "";
+
+// // 기타 상태 관리는 별도로 함
+// export type InputDefaultStateType =
+//   | "active" // 기본 상태
+//   | "focused" // 입력중
+//   | InputReadonlyType
+//   | InputInteractionStateType;
+
+// export interface InputTextComponentStateType {
+//   default: InputDefaultStateType;
+//   focus: boolean;
+//   value: string;
+// }
+
+// // 컴포넌트 상태
+// export interface InputStatePropsType {
+//   fixedState?: InputReadonlyType; // 고정 상태 (ex. readonly, disabled)
+//   default: InputDefaultStateType; // 입력 창의 기본 상태
+//   query?: InputQueryStateType;
+//   checked?: boolean;
+//   checkButtonState?: InputCheckButtonStateType;
+// }
+
+// // 인터렉션 상태
+// export interface InputStatusPropsType {
+//   [inputStatusKey: string]:
+//     | InputDefaultStateType
+//     | ""
+//     | React.ReactNode
+//     | string
+//     | undefined;
+//   status: InputDefaultStateType | "";
+//   utilIcon?: React.ReactNode; // 입력창 우측 아이콘
+//   noticeIcon?: React.ReactNode; // 입력창 하단 아이콘
+//   message?: string | React.ReactNode; // 입력창 하단 메시지
+// }
+
+// export interface InputInitStatusType {
+//   [inputKey: string]: InputStatusPropsType;
+// }
+
+// export interface ErrorMonitorPropsType {
+//   inputKey: string;
+// }
+
+// export type ErrorMonitorType = ({ inputKey }: ErrorMonitorPropsType) => void;
+
+// export interface MonitorSuccessMessagesType {
+//   [inputKey: string]: string | undefined;
+// }

package/src/types/form/input/legacy/find-address.d.ts

@@ -0,0 +1,7 @@
+import { InputProps } from "./base";
+
+export interface InputFindAddressOptionsType {
+  inputOptions: InputProps;
+  addressKey: string;
+  addressDataName: string;
+}

package/src/types/form/input/legacy/refer.d.ts

@@ -0,0 +1,84 @@
+import {
+  FieldError,
+  FieldErrors,
+  RegisterOptions,
+  UseFormRegisterReturn,
+} from "react-hook-form";
+
+import flatpickr from "flatpickr";
+// import { HookKey } from "flatpickr/dist/types/options";
+import { Instance } from "flatpickr/dist/types/instance";
+import type {
+  ErrorMonitorType,
+  InputHtmlAttrType,
+  InputInitStatusType,
+  InputSelectItemsType,
+  InputStatePropsType,
+  InputStatusPropsType,
+  InputUtilType,
+} from "./base";
+import type { InputAutoCompleteOptionPropsType } from "./auto-complete";
+import type { LabelOptionType } from "../common";
+
+// export type InputDateHooksType = {
+//   [hookKey in HookKey | string]: flatpickr.Options.Hook | undefined;
+// };
+
+export interface InputProps {
+  // 입력 값 관리를 위한 Key
+  className?: string;
+  selectorId: string; // (필수) 요소 선택자 id
+  dataName: string; // (필수) <input name={dataName} />
+  label: LabelOptionType; // 입력 값 이름/제목
+  register?: UseFormRegisterReturn; // 입력 값 관리 hook
+  attr?: InputHtmlAttrType; // input HTML 태그 속성 관리
+  util?: InputUtilType; // 입력창 우측 유틸리티 설정
+  state?: InputStatePropsType; // input 컴포넌트 상태
+  status?: InputStatusPropsType; // input 인터랙션 상태
+  selectDefaultName?: string; // select 기본값
+  selectItems?: InputSelectItemsType[];
+  isMultipleSelect?: boolean; // 다중 선택 옵션 활성화
+  textToNumber?: boolean; // 입력값 숫자로 변환
+  autoComplete?: InputAutoCompleteOptionPropsType; // 자동완성 카테고리
+  clickEvent?: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+  keyDownEvent?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  keyUpEvent?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  customBlurEvent?: (e?: FocusEvent<HTMLInputElement>) => void;
+  onDefaultChange?: (e: React.ChangeEvent<HTMLInputElement>) => void; // react-hook-form 기능을 사용하지 않는 변경 이벤트
+  onCustomChange?: (e: React.ChangeEvent<HTMLInputElement>) => void; // react-hook-form 기능과 함께 사용되는 변경 이벤트
+  onTextAreaDefaultChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void; // react-hook-form 기능을 사용하지 않는 변경 이벤트
+  onTextAreaCustomChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void; // react-hook-form 기능과 함께 사용되는 변경 이벤트
+  onSelectDefaultChange?: (
+    el: HTMLSelectElement,
+    // props: ReactDOM.ChangeEvent<HTMLSelectElement> | HTMLSelectElement,
+  ) => void; // react-hook-form 기능을 사용하지 않는 변경 이벤트
+  onSelectCustomChange?: (
+    el: HTMLSelectElement,
+    data?: InputSelectItemsType,
+    // props: ReactDOM.ChangeEvent<HTMLSelectElement> | HTMLSelectElement,
+  ) => void; // react-hook-form 기능과 함께 사용되는 변경 이벤트
+  errorMonitor?: ErrorMonitorType;
+  formError?: FieldError | FieldErrors;
+  inputIcon?: React.ReactNode;
+  thumb?: React.ReactNode;
+  setFocusTableRow?: (isFocus: boolean) => void;
+  // setFocusTableRow?: (dataName: string, isFocus: boolean) => void;
+  updateIsOpenCalendar?: (props: boolean) => void;
+  dateIconOff?: boolean;
+  flatpickrOptions?: flatpickr.Options.Options;
+  flatpickrCustomButtons?: (flatpickr: Instance) => React.ReactNode;
+  dateValidOptions?: RegisterOptions;
+  preventChangeDatePicker?: boolean;
+  onChangeDatePicker?: (
+    dates: Date[],
+    currentDateString: string,
+    self: Instance,
+    data?: unknown,
+  ) => void;
+}
+
+export interface UseErrorMonitorHookPropsType {
+  initFormStatus: InputInitStatusType;
+  formErrors?: FieldErrors;
+  changedValues?: ChangedValuesType;
+}

package/src/types/form/input/legacy/select.options.d.ts

@@ -0,0 +1,123 @@
+export interface GetQueryOptionsDataType {
+  idx: string;
+  value: string;
+}
+
+/**
+ * 사육동 인프라 타입
+ * - "iot": IoT 센서
+ * - "fac": 빌트인 설비, 외부 설비 등
+ * @type {string}
+ */
+export type InfraOptionCategoryType = "iot" | "fac";
+/**
+ * 사육동 인프라의 내/외부 여부 타입
+ * - 0: 내부 in
+ * - 1: 외부 out
+ * @type {number|string}
+ */
+export type InfraOptionInOutType = "0" | "1";
+
+export interface GetQueryInfraOptionsDataType extends GetQueryOptionsDataType {
+  name: string;
+  type: InfraOptionCategoryType;
+  in_out: InfraOptionInOutType;
+}
+
+export interface SelectDataType {
+  key: string;
+  name: string;
+  value: string | number;
+}
+
+export interface SelectDataCollectionType {
+  [dataKey: string]: SelectDataType[];
+}
+
+export interface OrderedSelectDataType extends SelectDataType {
+  priority: number;
+}
+
+export interface SelectLocationDataType extends SelectDataType {
+  scale: "province" | "city";
+  name: { ko: string; en: string };
+}
+
+export interface GenerateSelectOptionDataDefaultOptionType {
+  name: string;
+  value?: string;
+}
+
+export type GetOptionsTableName =
+  | "z_set_user_group" // 업체유형
+  | "z_set_chukjong_a" // 축종 카테고리
+  | "z_set_chukjong_b" // 축종 하위분류
+  | "z_set_business_type" // 사업자유형
+  | "z_set_breed_type" // 사육환경
+  | "z_set_bio_type" // 사육품종
+  | "z_set_req_region_name" // 지역
+  | "z_set_req_member_interest_item" // 서비스문의 관심상품
+  | "z_set_bd_struct" // 빌딩 구조
+  | "z_set_infra" // 인프라 설비
+  | "z_set_remark_category" // 사양관리 비고 (일정관리) 카테고리
+  | "z_set_measure_type" // 사양관리 비고 (일정관리) 계량단위
+  | "z_set_fmn_code" // 사양관리 비고 (일정관리) 사료
+  | "z_set_sani_type" // 사양관리 비고 (일정관리) 위생
+  | "z_set_fmn_type"; // 사료/약품 분류
+
+export interface OptionKeyData {
+  [optionType: string]: GetOptionsTableName;
+}
+export interface PartnersOptionKeyData {
+  [optionType: string]: AutoCompleteCategoryType;
+}
+
+/**
+ * 성별 타입
+ * - 0: 여자 또는 암
+ * - 1: 남자 또는 수
+ * @radio
+ * @type {number|string}
+ */
+export type GenderType = "0" | "1";
+/**
+ * 성별 선택 확장; 특정 성별에 해당하지 않는 값을 포함한 타입
+ * - 0: 여자 또는 암
+ * - 1: 남자 또는 수
+ * - 2: 공용 또는 선택안함
+ * @radio
+ * @type {number|string}
+ */
+export type GenderOptionType = "" | GenderType | "2";
+/**
+ * 수신여부 타입
+ * - 0: 수신안함
+ * - 1: 수신함
+ * @checkbox
+ * @type {number|string}
+ */
+export type ReceiveSNSType = "0" | "1";
+/**
+ * 승인여부 타입
+ * - 0: 거부
+ * - 1: 승인
+ * @radio
+ * @type {number|string}
+ */
+export type ApproveType = "0" | "1";
+/**
+ * 새 깔짚 타입
+ * - 0: 선택안함
+ * - 1: 선택
+ * @checkbox
+ * @type {number|string}
+ */
+export type FlockNewCarpetType = "0" | "1";
+/**
+ * 계군종료 여부
+ * - "true": 계군종료
+ * - "false": 선택안함
+ * @checkbox
+ * @type {boolean|string}
+ */
+export type FlockFinishedType = "true" | "false";