@uniai-fe/ui-legacy 0.1.1

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

@@ -0,0 +1,156 @@
+import type { LabelOptionType } from "../common";
+import type {
+  FormFieldCommonAttrType,
+  FormFieldComponentProps,
+  FormFieldItemContainerProps,
+  FormFieldItemWrapperOptionType,
+} from "../common/props";
+import flatpickr from "flatpickr";
+import { HookKey } from "flatpickr/dist/types/options";
+import { Instance } from "flatpickr/dist/types/instance";
+import type { LabelHTMLAttributes } from "react";
+
+/**
+ * Input; 템플릿 컨테이너 속성
+ */
+export type InputContainerProps = FormFieldItemContainerProps & {
+  label: LabelOptionType;
+  wrapperOptions?: FormFieldItemWrapperOptionType;
+  readonly?: boolean;
+};
+
+/**
+ * Input; 입력창 속성
+ */
+export type InputAttrType<
+  Field extends
+    | HTMLInputElement
+    | HTMLTextAreaElement
+    | HTMLSelectElement = HTMLInputElement,
+> = FormFieldCommonAttrType<Field> &
+  Partial<{
+    defaultValue: string;
+    /**
+     * @deprecated
+     */
+    isTableCell: boolean;
+  }>;
+
+export type InputUtilTimerOptionType = {
+  show: boolean;
+  remain: number | null;
+};
+
+export type InputUtilType = Partial<{
+  time: InputUtilTimerOptionType; // 입력 제한시간 카운트다운
+  // button: ButtonDefaultPropsType; // 기능 버튼 (ex. 중복확인, 인증요청)
+  // customBtn: React.ReactNode; // 라이브러리 패턴 상 버튼 자체를 자체 컴포넌트로 운용해야 하는 경우;
+  // search: boolean; // 검색 아이콘 여부
+}>;
+
+/**
+ * Input; 입력창 props
+ */
+export type InputProps = FormFieldComponentProps<HTMLInputElement> &
+  Partial<{
+    width: number | string;
+    /**
+     * input 속성
+     */
+    attr: InputAttrType<HTMLInputElement>;
+    /**
+     * input 유틸리티
+     */
+    util: InputUtilType;
+    /**
+     * input 아이콘
+     */
+    icon: React.ReactNode;
+    /**
+     * 아이콘 사이즈
+     * - [width, height]
+     */
+    iconSize: [number, number];
+    /**
+     * unit 표현
+     */
+    unit: React.ReactNode;
+    /**
+     * unit 영역 너비
+     */
+    unitWidth: number | string;
+    /**
+     * 입력값을 숫자로 변환
+     */
+    convertNumber: boolean;
+    // 이벤트
+    clickEvent: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+    keyDownEvent: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    keyUpEvent: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * react-hook-form 덮어쓰기 이벤트
+     */
+    onDefaultChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * react-hook-form과 함께 동작하는 이벤트
+     */
+    onCustomChange: (
+      e: React.ChangeEvent<HTMLInputElement>,
+      data?: SelectMultipleOptionType,
+    ) => void;
+    /**
+     * 추가 데이터
+     */
+    extraData: object;
+  }>;
+
+export type InputDateTimeHooksType = {
+  [hookKey in HookKey | string]: flatpickr.Options.Hook | undefined;
+};
+
+export type InputDateTimeProps = InputProps &
+  Partial<{
+    updateIsOpenCalendar: (props: boolean) => void;
+    flatpickrOptions?: flatpickr.Options.Options;
+    flatpickrCustomButtons?: (flatpickr: Instance) => React.ReactNode;
+    dateValidOptions?: RegisterOptions;
+    preventChangeDatePicker?: boolean;
+    onChangeDatePicker?: (
+      dates: Date[],
+      currentDateString: string,
+      self: Instance,
+      data?: unknown,
+    ) => void;
+  }>;
+
+/**
+ * Input; 파일 props
+ */
+export type InputFileProps = FormFieldComponentProps<HTMLInputElement> & {
+  children: React.ReactNode;
+} & Partial<{
+    /**
+     * input 속성
+     */
+    attr: InputAttrType<HTMLInputElement>;
+    // 이벤트
+    clickEvent: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+    /**
+     * react-hook-form 덮어쓰기 이벤트
+     */
+    onDefaultChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * react-hook-form과 함께 동작하는 이벤트
+     */
+    onCustomChange: (
+      e: React.ChangeEvent<HTMLInputElement>,
+      data?: SelectMultipleOptionType,
+    ) => void;
+    /**
+     * 기본 label 구조 말고 커스텀하는 경우
+     * @desc
+     * - false: label 태그 미사용
+     * - object(attributes): 커스텀된 label 태그 사용
+     */
+    customHTMLLabel: boolean | LabelHTMLAttributes<HTMLLabelElement>;
+  }>;

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

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

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

@@ -0,0 +1,4 @@
+export type SearchFormDataType = {
+  [searchKey: string]: string | number | Date | (string | Date)[];
+  keyword: string;
+};

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

@@ -0,0 +1,2 @@
+export type * from "./option";
+export type * from "./props";

package/src/types/form/select/option.d.ts

@@ -0,0 +1,43 @@
+export type OptionBaseType<ValueType extends string | number = string> = {
+  [optionKey: string]: string;
+  key: string;
+  name: string;
+  value: ValueType;
+};
+
+export type OptionBaseCollectionType = {
+  [categoryKey: string]: OptionBaseType[];
+};
+
+export interface SelectSelectedStateType {
+  [key: string]: string | number | React.ReactElement;
+  value: string | number;
+  optionName: string | React.ReactElement;
+}
+
+export interface SelectOptionType<OptionDataType = unknown> {
+  /**
+   * 렌더링에 필요한 key
+   */
+  key: string;
+  /**
+   * 데이터 실제 value
+   */
+  value: string | number;
+  /**
+   * 데이터 값 표현 명칭
+   */
+  optionName: string | React.ReactElement;
+  /**
+   * 선택 여부
+   */
+  selected: boolean;
+  /**
+   * 비활성화 여부
+   */
+  disabled?: boolean;
+  /**
+   * 임의의 추가 데이터
+   */
+  data?: OptionDataType;
+}

package/src/types/form/select/props.d.ts

@@ -0,0 +1,101 @@
+import type { HTMLAttributes } from "react";
+import type {
+  FormFieldComponentProps,
+  FormFieldItemContainerProps,
+} from "../common/props";
+import type { SelectOptionType } from "./option";
+
+export type SelectContainerProps = FormFieldItemContainerProps & {
+  label: LabelOptionType;
+  wrapperOptions?: FormFieldItemWrapperOptionType;
+};
+
+export type SelectWidthProps =
+  | string
+  | number
+  | Partial<{
+      [elementKey: string]: string | number;
+      parent: string | number;
+      selected: string | number;
+      dropdown: string | number;
+    }>;
+
+export type SelectProps = FormFieldComponentProps &
+  Partial<{
+    defaultName: string; // select 기본값
+    selectItems: SelectOptionType[];
+    width: SelectWidthProps;
+    dropdownPosition: "left" | "right"; // 드롭다운 위치
+    isFetching: boolean; // 데이터 로딩 중 여부
+    children: React.ReactNode;
+  }>;
+
+export type SelectDefaultProps = SelectProps & {
+  selectItems: SelectOptionType[];
+} & Partial<{
+    onDefaultChange: (
+      el: HTMLSelectElement,
+      // props: ReactDOM.ChangeEvent<HTMLSelectElement> | HTMLSelectElement,
+    ) => void; // react-hook-form 기능을 사용하지 않는 변경 이벤트
+    onCustomChange: (
+      el: HTMLSelectElement,
+      data?: SelectOptionType,
+      // props: ReactDOM.ChangeEvent<HTMLSelectElement> | HTMLSelectElement,
+    ) => void; // react-hook-form 기능과 함께 사용되는 변경 이벤트
+  }>;
+
+export type SelectMultipleDefaultOptionType<OptionDataType = unknown> =
+  SelectOptionType<OptionDataType> &
+    Partial<{
+      registerKey: string;
+      attr: HTMLAttributes<HTMLInputElement> & Record<string, string>;
+    }>;
+
+export type SelectMultipleDefaultProps<OptionDataType = unknown> =
+  SelectProps & {
+    selectedNames: React.ReactNode;
+    selectItems: SelectMultipleDefaultOptionType<OptionDataType>[];
+  } & Partial<{
+      onDefaultChange: (
+        e: React.ChangeEvent<HTMLInputElement>,
+        data?: SelectMultipleDefaultOptionType<OptionDataType>,
+        // props: ReactDOM.ChangeEvent<HTMLSelectElement> | HTMLSelectElement,
+      ) => void; // react-hook-form 기능과 함께 사용되는 변경 이벤트
+      onCustomChange: (
+        e: React.ChangeEvent<HTMLInputElement>,
+        data?: SelectMultipleDefaultOptionType<OptionDataType>,
+        // props: ReactDOM.ChangeEvent<HTMLSelectElement> | HTMLSelectElement,
+      ) => void; // react-hook-form 기능과 함께 사용되는 변경 이벤트
+    }>;
+
+export type SelectMultipleCategoryItemOptionType = SelectOptionType & {
+  categoryKey: string;
+  dataKey: string;
+};
+
+export type SelectMultipleCategoryOptionType = {
+  renderKey: string;
+  categoryKey: string;
+  categoryName: React.ReactNode;
+  disabled?: boolean;
+  items: SelectMultipleCategoryItemOptionType[];
+  onChange: (
+    e: React.ChangeEvent<HTMLInputElement>,
+    data?: SelectMultipleCategoryItemOptionType,
+  ) => void; // react-hook-form 기능과 함께 사용되는 변경 이벤트
+};
+
+export type SelectMultipleCategoryProps = Omit<
+  FormFieldComponentProps,
+  "dataKey"
+> & {
+  defaultName: string;
+  dropdownPosition: "left" | "right"; // 드롭다운 위치
+  categoryList: SelectMultipleCategoryOptionType[];
+};
+
+// export type SelectMultipleItemsType = SelectOptionType & {
+//   checkId: string;
+//   checked: boolean;
+//   data?: object;
+// };

package/src/types/form/util/find-address.d.ts

@@ -0,0 +1,7 @@
+export type DaumPostCodeDataType = {
+  address: string;
+  zipCode: string;
+};
+export type DaumPostCodeStateType = {
+  [addressCategoryKey: string]: DaumPostCodeDataType | undefined;
+};

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

@@ -0,0 +1 @@
+export type * from "./find-address";

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

@@ -0,0 +1,2 @@
+export type * from "./sitemap";
+export type * from "./notify";

package/src/types/frame/notify.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+
+export type PageHeaderNotifyDataType = {
+  key: string;
+  content: React.ReactNode;
+  timestamp: string | Date;
+};

package/src/types/frame/sitemap.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import type { SitemapBase } from "@uniai-fe/util-functions";
+import type { SystemLanguageType } from "@uniai-fe/next-devkit/types";
+
+export type SitemapPageOptionsType = {
+  popup?: boolean;
+  auth?: string[];
+  pageStyle?: string;
+};
+
+export type SitemapDataType = SitemapPageOptionsType &
+  SitemapBase & {
+    routeKey: string;
+    // path: string;
+    name: string;
+    depth: SitemapDataType[];
+    icon?: React.ReactNode;
+    navDepthDisabled?: boolean; // 내비게이션 2depth 비활성화
+  };
+
+export type SitemapMatchDataType = {
+  category: SitemapDataType | null;
+  depth: SitemapDataType | null;
+};
+
+export type SitemapDataCollectionType = {
+  [sitemapType: string]: SitemapDataType[];
+};
+
+export type PageRouteDataHookResultType = {
+  categoryRouteData: SitemapDataType | null;
+  depthRouteData: SitemapDataType | null;
+};
+
+export type UseRouteReturnType = {
+  sitemap: SitemapDataType[];
+  locale: SystemLanguageType;
+};

package/src/types/icon/delta.d.ts

@@ -0,0 +1,32 @@
+export type DeltaDirectionType = "up" | "increase" | "down" | "decrease" | "";
+
+/**
+ * 아이콘 props; Delta (optional)
+ * @property {string} [className]
+ * @property {number} [width]
+ * @property {number} [height]
+ * @property {"triangle" | "arrow"} [shape]
+ * @property {"flat" | "rounded"} [edge]
+ * @property {boolean} [disabled]
+ */
+export type IconDeltaOptionalProps = Partial<{
+  className: string;
+  width: number;
+  height: number;
+  shape: "triangle" | "arrow";
+  edge: "flat" | "rounded";
+  disabled: boolean;
+}>;
+
+/**
+ * 아이콘 props; Delta
+ * @property {"up"|"increase"|"down"|"decrease"|""} direction
+ * @property {string} [className]
+ * @property {number} [size]
+ * @property {"triangle" | "arrow"} [shape]
+ * @property {"flat" | "rounded"} [edge]
+ * @property {boolean} [disabled]
+ */
+export type IconDeltaProps = {
+  direction: DeltaDirectionType;
+} & IconDeltaOptionalProps;

package/src/types/icon/fan.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 환기팬 형태 타입
+ * - side: 사이드팬
+ * - tunnel: 터널팬
+ */
+export type FanLayoutType = "side" | "tunnel";
+/**
+ * 환기팬 상태 타입
+ * - open: 열림
+ * - close: 닫힘
+ * - abnormal: 이상
+ */
+export type FanStateType = "open" | "close" | "abnormal";
+/**
+ * 사이드팬 위치 타입
+ */
+export type FanSidePositionType = "left" | "right";

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

@@ -0,0 +1,2 @@
+export type * from "./delta";
+export type * from "./fan";

package/src/types/index.d.ts

@@ -0,0 +1,15 @@
+export type * from "./common";
+export type * from "./button";
+export type * from "./form";
+export type * from "./frame";
+export type * from "./chip";
+export type * from "./icon";
+export type * from "./delta";
+export type * from "./modal";
+export type * from "./chart";
+export type * from "./table";
+export type * from "./tab-menu";
+export type * from "./template";
+export type * from "./weather";
+export type * from "./location";
+export type * from "./style-option";

package/src/types/location/geojson.d.ts

@@ -0,0 +1,59 @@
+import type { GeoJsonObject } from "geojson";
+
+export type GeoCoordinate = {
+  [directionKey: string]: number | null;
+  latitude: number | null;
+  longitude: number | null;
+};
+
+export type GeoJsonFeatureGeometryType = {
+  type: string;
+  coordinates: [number, number][][] | [number, number][];
+};
+
+export type GeoJsonFeaturePropertiesType = {
+  [key: string]: string | number;
+  name: string;
+  base_year: string | number;
+  name_eng: string;
+  code: string | number;
+};
+
+/**
+ * 지도 데이터 geojson 타입
+ */
+export type GeoJsonFeatureType = {
+  type: string;
+  geometry: GeoJsonFeatureGeometryType;
+  properties: GeoJsonFeaturePropertiesType;
+};
+
+/**
+ * 지도 데이터 geojson 컬렉션 타입
+ */
+export type GeoJsonFeatureCollectionType = GeoJsonObject & {
+  // type: string;
+  features: GeoJsonFeatureType[];
+};
+
+/**
+ * geojson export 타입
+ */
+export type GeoJsonCollectionType = {
+  [key: string]: GeoJsonFeatureCollectionType;
+};
+
+/**
+ * geojson 지역명 참조 타입
+ */
+export type GeoJsonNamesType = {
+  name: string;
+  base_year: string | number;
+  name_eng: string;
+  code: string | number;
+};
+
+export type GeoJsonNamesCollectionType = {
+  [key: string]: GeoJsonNamesType[];
+  province: GeoJsonNamesType[];
+};

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

@@ -0,0 +1,2 @@
+export type * from "./geojson";
+export type * from "./region";

package/src/types/location/region.d.ts

@@ -0,0 +1,19 @@
+export type CountyDataType = {
+  key: string;
+  name: string;
+  value: string;
+  province_code: number | string;
+};
+
+export type CountyCollectionType = {
+  [provinceKey: string]: CountyDataType[];
+};
+
+export type ProvinceDataType = {
+  key: string;
+  name_full: string;
+  name_short: string;
+  eng: string;
+  value: string;
+  code: number | string;
+};

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

@@ -0,0 +1,2 @@
+export type * from "./modal";
+export type * from "./modal.options";

package/src/types/modal/modal.d.ts

@@ -0,0 +1,88 @@
+import type { LinkProps } from "next/link";
+import type { ButtonDefaultPropsType } from "../button";
+
+// 모달 활성화 타입
+export type ModalShowType = "init" | boolean;
+
+// 모달 메인 버튼 이벤트
+export type ModalFooterButtonType = {
+  stackKey: string;
+  buttonRole: "close" | string;
+  defaultOptions: ButtonDefaultPropsType;
+  linkOptions?: LinkProps;
+};
+
+// 모달 텍스트 및 클릭 이벤트 데이터
+export type ModalDataType = {
+  headerTitle?: React.ReactNode; // 모달 상단 헤더 타이틀
+  headerCloseBtn?: boolean;
+  body: React.ReactNode; // 모달 내용
+  footerBtns?: (ModalFooterButtonType | null)[]; // 모달 버튼
+};
+
+export type ModalLayoutType =
+  | "dialog-with-header"
+  | "dialog-with-header-fit-width"
+  | "dialog-without-header"
+  | "dialog-without-header-no-buttons"
+  | "dialog-info-without-header"
+  | "dialog-form-with-header"
+  | "dialog-form-without-header"
+  | "form-search"
+  | "form-row"
+  | "form-row-wider"
+  | "form-table-view"
+  | "form-table-view-larger"
+  | "form-table-simple"
+  | "form-table-massive";
+
+// 드래그 위치데이터 타입
+export type ModalPositionDataType = {
+  x: number;
+  y: number;
+};
+
+// 각 모달스택의 상태 관리
+export type ModalPropsType = Partial<{
+  layoutType: ModalLayoutType;
+  width: number;
+  /**
+   * 기본값 true
+   */
+  isHeader: boolean;
+  /**
+   * 타이틀 영역 없음
+   */
+  isNoTitle: boolean;
+  /**
+   * footer 버튼에 따라 footer 추가
+   */
+  isFooter: boolean;
+  initDragPos: ModalPositionDataType;
+  isModalForm: boolean;
+  role: string;
+  show: ModalShowType; // init: 최초 렌더링 시 / on: 활성화 / off: 비활성화
+  showDelay: number;
+  data: ModalDataType;
+}>;
+
+// 모달 스택 jotai atom 타입
+export type ModalStateType = {
+  stackKey: string;
+  modalProps: ModalPropsType;
+};
+
+// 모달 컴포넌트 파라미터를 위한 확장 타입
+export type ModalComponentPropsType = ModalStateType &
+  Partial<{
+    index: number; // 순서에 따른 z-index 부여를 위한 데이터
+    isDraggable: boolean;
+    className: string;
+  }>;
+
+// 모달 닫기 시, 지연시간에 따른 상태 관리를 위한 타입
+export type CloseFlagType = {
+  stackKey: string;
+  showDelay: number;
+  callback?: () => void;
+};

package/src/types/modal/modal.options.d.ts

@@ -0,0 +1,33 @@
+import type { ModalStateType } from "./modal";
+
+export type ModalStackKeyPropertyType = {
+  [stackType: string]: string;
+};
+export type ModalStackKeyCollectionType = {
+  [stackCategory: string]: ModalStackKeyPropertyType;
+};
+
+export type ModalOptionPropsType = Record<{
+  [propKey: string]: unknown;
+  // 모달이 에러메시지를 받는 경우
+  // errorMessages: string | string[];
+}>;
+// export type ModalTableOptionPropsType<T> = Partial<{
+//   // 대부분 동일한 모달 옵션에서, 특정 목적에 따라 일부 옵션이 변경되는 경우
+//   role: ModalRoleType;
+//   data: T;
+// }>;
+
+export type ModalOptionType = (
+  props?: ModalOptionPropsType, // | ModalTableOptionPropsType,
+) => ModalStateType;
+
+// 모달 옵션 객체 타입선언
+export type ModalOptionsCollectionType = {
+  [stackKey: string]: (
+    props?: ModalOptionPropsType, // | ModalTableOptionPropsType,
+  ) => ModalStateType;
+};
+// export type ModalTableOptionsCollectionType = {
+//   [stackCategory: string]: ModalOptionsCollectionType;
+// };