@uniai-fe/ui-legacy 0.1.1

package/src/types/chart/props.d.ts

@@ -0,0 +1,271 @@
+import type { TooltipProps, XAxisProps, YAxisProps } from "recharts";
+import type { CategoricalChartProps } from "recharts/types/chart/generateCategoricalChart";
+import type {
+  NameType,
+  ValueType,
+} from "recharts/types/component/DefaultTooltipContent";
+import type { Props as ResponsiveContainerProps } from "recharts/types/component/ResponsiveContainer";
+
+import type { ChartYAxisDataType } from "./axis";
+import type { ChartCoreDataAxisType, ChartCoreDataSingleType } from "./data";
+import type { AreaGradientProps, ChartLegendBaseType } from "./legend";
+import type { Props as PieProps } from "recharts/types/polar/Pie";
+import type { Props as LineProps } from "recharts/types/cartesian/Line";
+import type { Props as BarProps } from "recharts/types/cartesian/Bar";
+import type { Props as CellProps } from "recharts/types/component/Cell";
+
+/**
+ * 차트 Props; 1차원 차트 데이터
+ * @property {ChartCoreDataSingleType[]} chartData - 차트 렌더링 데이터
+ */
+export type ChartDataSingleProps = {
+  /**
+   * 차트 렌더링 데이터
+   * @property {string | number | null} 임의 데이터
+   * @property {string} name - 데이터 명칭
+   * @property {string} value - 데이터 값
+   * @property {string} unit - 데이터 단위
+   * @property {string} fill - 데이터 색상
+   */
+  chartData: ChartCoreDataSingleType[];
+};
+
+/**
+ * 차트 Props; 2차원 차트 데이터
+ * @property {ChartCoreDataAxisType[]} chartData - 차트 렌더링 데이터
+ */
+export type ChartDataAxisProps = {
+  /**
+   * 차트 렌더링 데이터
+   * @property {string | number | null} 데이터
+   */
+  chartData: ChartCoreDataAxisType[];
+};
+
+/**
+ * 차트 Props; 레전드 데이터
+ * - 레전드 항목수 대로 <Line />, <Bar /> 등을 렌더링
+ * @property {ChartLegendBaseType[]} legendData - 차트 레전드 데이터
+ */
+export type ChartDataLegendDefaultProps = {
+  /**
+   * 차트 레전드 데이터
+   * @property {string} key - 렌더링 키
+   * @property {string} axisCategory - y축 id
+   * @property {string} code - 데이터 키
+   * @property {string} name - 데이터 명칭
+   * @property {string} unit - 데이터 단위
+   * @property {string} color - 데이터 컬러
+   * @property {boolean} active - 데이터 활성화 여부 (레전드 토글 등)
+   * @property {boolean} [highlight] - 포커스 구분
+   */
+  legendData: ChartLegendBaseType[];
+};
+
+/**
+ * 차트 Props; Y축 렌더링 데이터
+ * @property {ChartYAxisDataType[]} yAxisData - y축 카테고리별 생성 데이터
+ */
+export type ChartDataYAxisProps = {
+  /**
+   * y축 카테고리별 생성 데이터
+   * @property {string} key - 렌더링 키
+   * @property {string} axisCategory - y축 id
+   */
+  yAxisData: ChartYAxisDataType[];
+};
+
+/**
+ * 차트 Props; recharts 렌더링 공통 옵션
+ * @property {CategoricalChartProps} chartLayoutOptions - 형태별 차트 렌더링 옵션
+ * @property {TooltipProps<ValueType, NameType>} tooltipOptions - 툴팁 렌더링 옵션
+ * @property {ResponsiveContainerProps} containerOptions - <ResponsiveContainer /> 렌더링 옵션
+ * @property {React.ReactNode} children - 추가 차트요소
+ */
+export type ChartOptionCommonProps = Partial<{
+  /**
+   * 차트 렌더링 옵션
+   * <LineChart />, <BarChart /> 등 차트 속성에 적용
+   * @type {CategoricalChartProps}
+   */
+  chartLayoutOptions: CategoricalChartProps;
+  /**
+   * 툴팁 렌더링 옵션
+   * @type {TooltipProps<ValueType, NameType>}
+   */
+  tooltipOptions: TooltipProps<ValueType, NameType>;
+  /**
+   * <ResponsiveContainer /> 렌더링 옵션
+   * @type {ResponsiveContainerProps}
+   */
+  containerOptions: Omit<ResponsiveContainerProps, "children">;
+  /**
+   * DOM ClassName
+   */
+  className: string;
+  /**
+   * 추가 차트요소
+   * @type {React.ReactNode}
+   */
+  children: React.ReactNode;
+}>;
+
+/**
+ * 차트 Props; recharts axis 렌더링 옵션
+ * @property {XAxisProps} [xAxisOptions] - x축 렌더링 옵션
+ * @property {YAxisProps} [yAxisOptions] - y축 렌더링 옵션
+ * @property {boolean} [isHideGrid] - 그리드 숨김 옵션
+ */
+export type ChartOptionAxisProps = Partial<{
+  /**
+   * x축 렌더링 옵션
+   * @type {XAxisProps}
+   */
+  xAxisOptions: XAxisProps;
+  /**
+   * y축 렌더링 옵션
+   * @type {YAxisProps}
+   */
+  yAxisOptions: YAxisProps;
+  /**
+   * 그리드 렌더링 여부
+   * - 기본값 undefined
+   */
+  isHideGrid: boolean;
+}>;
+
+export type ChartAreaDataLegendProps = ChartLegendBaseType &
+  Partial<{
+    /**
+     * <Area /> 차트 컬러 - 단식
+     */
+    areaColor: string;
+    /**
+     * <Area /> 차트 컬러 - 그라디언트
+     */
+    areaGradient: AreaGradientProps;
+  }>;
+
+/**
+ * 차트 Props; 레전드 데이터; <Area /> 레전드
+ * @property {ChartAreaDataLegendProps[]} legendData - 차트 레전드 데이터
+ */
+export type ChartDataLegendAreaProps = {
+  /**
+   * 차트 레전드 데이터
+   * @property {string} key - 렌더링 키
+   * @property {string} axisCategory - y축 id
+   * @property {string} code - 데이터 키
+   * @property {string} name - 데이터 명칭
+   * @property {string} unit - 데이터 단위
+   * @property {string} color - 데이터 컬러
+   * @property {boolean} active - 데이터 활성화 여부 (레전드 토글 등)
+   * @property {boolean} [highlight] - 포커스 구분
+   * @property {string} [areaColor] - <Area /> 차트 컬러 - 단색
+   * @property {AreaGradientProps} [areaGradient] - <Area /> 차트 컬러 - 그라디언트
+   */
+  legendData: ChartAreaDataLegendProps[];
+};
+
+/**
+ * 차트 Props; 영역 차트
+ */
+export type ChartAreaProps = ChartDataAxisProps &
+  ChartDataLegendAreaProps &
+  ChartDataYAxisProps &
+  ChartOptionCommonProps &
+  ChartOptionAxisProps;
+
+/**
+ * Recharts Props; Line
+ */
+export type RechartLineProps = LineProps;
+/**
+ * 차트 Props; <Line /> 옵션
+ */
+export type ChartLineOptions = Partial<{ lineOptions: RechartLineProps }>;
+/**
+ * 차트 Props; 라인 차트
+ */
+export type ChartLineProps = ChartDataAxisProps &
+  ChartDataLegendAreaProps &
+  ChartDataYAxisProps &
+  ChartOptionCommonProps &
+  ChartOptionAxisProps &
+  ChartLineOptions;
+
+/**
+ * Recharts Props; Bar
+ */
+export type RechartsBarProps = Partial<BarProps>;
+/**
+ * Recharts Props; Cell
+ */
+export type RechartsCellProps = Partial<CellProps>;
+/**
+ * 차트 Props; <Bar /> 옵션
+ */
+export type ChartBarOptions = Partial<{
+  barOptions: RechartsBarProps;
+  cellOptions: RechartsCellProps;
+}>;
+/**
+ * 차트 Props; 막대 차트
+ */
+export type ChartBarProps = ChartDataAxisProps &
+  ChartDataLegendAreaProps &
+  ChartDataYAxisProps &
+  ChartOptionCommonProps &
+  ChartOptionAxisProps &
+  Partial<{
+    /**
+     * 막대 너비
+     */
+    barSize: number;
+    /**
+     * 서로 다른 x축 분포를 나타내는 경우
+     */
+    isUseCell: boolean;
+  }> &
+  ChartBarOptions;
+
+/**
+ * 차트 Props; 도넛차트 렌더링 옵션
+ */
+export type ChartOptionDoughnutProps = Partial<{
+  /**
+   * 도넛차트 width
+   */
+  width: number;
+  /**
+   * 도넛차트 height
+   */
+  height: number;
+  /**
+   * 도넛차트 두께
+   */
+  thickness: number;
+  /**
+   * 도넛차트 시작 각도
+   */
+  startAngle: number;
+  /**
+   * 도넛차트 종료 각도
+   */
+  endAngle: number;
+}>;
+
+/**
+ * 차트 Props; <Pie /> 렌더링 옵션
+ */
+export type ChartOptionPieProps = Partial<{
+  pieOptions: PieProps;
+}>;
+
+/**
+ * 차트 Props; 도넛 차트
+ */
+export type ChartDoughnutProps = ChartDataSingleProps &
+  ChartOptionCommonProps &
+  ChartOptionDoughnutProps &
+  ChartOptionPieProps;

package/src/types/chart/tick.d.ts

@@ -0,0 +1,30 @@
+import type { XAxisProps } from "recharts";
+
+/**
+ * recharts XAxis Tick 커스텀 Props
+ */
+export type RechartsXAxisTickProps = XAxisProps & {
+  // <text> 기본 속성
+  verticalAnchor: "start" | "middle" | "end";
+  // 추가 기본 정보; width, height, index, visibleTicksCount,
+  index: number;
+  // payload - 각 x의 y 데이터; coordinate, value, index, offset, tickCoord, isShow
+  payload: {
+    coordinate: number;
+    value: number | string | null;
+    index: number;
+    offset: number;
+    tickCoord: number;
+    isShow: boolean;
+  };
+};
+
+export type ChartTickXAxisProps = {
+  xAxisProps: RechartsXAxisTickProps;
+} & Partial<{
+  className: string;
+  children: React.ReactNode;
+  tSpanPos: React.SVGProps<SVGTSpanElement>;
+  customValue: React.ReactNode;
+  groupProps: React.SVGProps<SVGGElement>;
+}>;

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

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

package/src/types/chip/props.d.ts

@@ -0,0 +1,14 @@
+export interface ChipStyleOptionsType {
+  className?: string;
+}
+
+export interface ChipDefaultStyleOptionsType extends ChipStyleOptionsType {
+  priorityType: StylePriorityType;
+  fillType: StyleFillType;
+  sizeType: StyleSizeType;
+}
+
+export interface ChipPropsType {
+  chipName: string;
+  styleOptions?: ChipStyleOptionsType;
+}

package/src/types/common.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 컴포넌트 기본 Props
+ * @property {React.ReactNode} children - 컴포넌트 자식 요소
+ * @property {string} [className] - 컴포넌트 클래스 이름
+ * @property {Function} [clickEvent] - 클릭 이벤트 핸들러
+ */
+export type ComponentBaseProps<ClickElement extends Element = HTMLElement> = {
+  children: React.ReactNode;
+} & Partial<{
+  className: string;
+  clickEvent: (e?: React.SyntheticEvent<ClickElement>) => void;
+}>;
+
+export type HTMLCustomAttrProps = {
+  [htmlAttr: string]: string;
+};

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

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

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

@@ -0,0 +1,57 @@
+/**
+ * UI > Delta; 컬러 옵션
+ * @desc
+ * - hex
+ * - rgb / rgba
+ */
+export type DeltaColorOptions = {
+  /**
+   * 양수값 텍스트 컬러
+   */
+  colorUp: string;
+  /**
+   * 음수값 텍스트 컬러
+   */
+  colorDown: string;
+  /**
+   * 양수값 배경 컬러
+   */
+  bgUp: string;
+  /**
+   * 음수값 배경 컬러
+   */
+  bgDown: string;
+};
+
+export type DeltaSizeOptions = {
+  /**
+   * 델타 칩 높이
+   */
+  height: number | string;
+  /**
+   * 델타 칩 바깥 간격
+   */
+  margin: number | string;
+  /**
+   * 델타값 텍스트 크기
+   */
+  textSize: number | string;
+};
+
+export type DeltaDataOptions = {
+  /**
+   * 소수점 자리수
+   */
+  digit: number;
+};
+
+export type DeltaDisplayOptions = {
+  /**
+   * 아이콘 사용 여부
+   */
+  noIcon: boolean;
+  /**
+   * 부호 사용 여부
+   */
+  sign: boolean;
+};

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

@@ -0,0 +1,15 @@
+/**
+ * 텍스트 값 마스킹 타입
+ * @see /Users/uniai/projects/uniai/dev-factory/packages/ui/src/form-field/common/utils/convertInputToMask.ts
+ * - phone: 전화번호
+ * - residentCode: 주민등록번호 (000000-0000000)
+ * - businessCode: 사업자등록번호 (000-00-00000)
+ * - date: 날짜 (YYYY-MM-DD)
+ * - comma: 숫자에 쉼표 추가 (예: 1,000,000)
+ */
+export type MaskType =
+  | "phone"
+  | "residentCode"
+  | "businessCode"
+  | "date"
+  | "comma";

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

@@ -0,0 +1,74 @@
+import type { UseFormRegisterReturn } from "react-hook-form";
+import type { MaskType } from "./format";
+import type { FormFieldStatePropsType } from "./state";
+
+/**
+ * Form-Field Hook; 입력변경 이벤트
+ * @property {FormFieldStatePropsType} state - Form field 상태 Props
+ * @property {FieldStateType} state.default: 기본 상태 (인터랙션에 따라 동적 상태)
+ * @property {FieldStateReadonlyType} state.fixed: 고정 상태 (특정 상태로 고정이 필요한 경우)
+ * @property {boolean} state.checked: 체크 상태 (체크박스, 라디오 등에서 사용)
+ * @property {boolean} convertNumber - 숫자 변환 여부
+ * @property {MaskType} maskType - 입력 마스크 타입
+ * @property {UseFormRegisterReturn} register - React Hook Form 등록 정보
+ * @property {Function} onDefaultChange - 기본 입력 변경 이벤트 핸들러
+ * @property {Function} onCustomChange - 커스텀 입력 변경 이벤트 핸들러
+ */
+export type UseFieldChangeEvents<
+  Field extends
+    | HTMLInputElement
+    | HTMLTextAreaElement
+    | HTMLSelectElement = HTMLInputElement,
+> = {
+  /**
+   * 입력 상태
+   * @property {FieldStateType} default: 기본 상태 (인터랙션에 따라 동적 상태)
+   * @property {FieldStateReadonlyType} fixed: 고정 상태 (특정 상태로 고정이 필요한 경우)
+   * @property {boolean} checked: 체크 상태 (체크박스, 라디오 등에서 사용)
+   */
+  state: FormFieldStatePropsType;
+  /**
+   * 숫자 변환 여부
+   */
+  convertNumber: boolean;
+  /**
+   * 입력 마스크 타입
+   * @see /Users/uniai/projects/uniai/dev-factory/packages/ui/src/form-field/common/utils/convertInputToMask.ts
+   * - phone: 전화번호
+   * - residentCode: 주민등록번호 (000000-0000000)
+   * - businessCode: 사업자등록번호 (000-00-00000)
+   * - date: 날짜 (YYYY-MM-DD)
+   * - comma: 숫자에 쉼표 추가 (예: 1,000,000)
+   */
+  maskType: MaskType;
+  /**
+   * React Hook Form 등록 정보
+   */
+  register: UseFormRegisterReturn;
+  /**
+   * 기본 입력 변경 이벤트 핸들러
+   */
+  onDefaultChange: (e: React.ChangeEvent<Field>) => void;
+  /**
+   * 커스텀 입력 변경 이벤트 핸들러
+   */
+  onCustomChange: (e: React.ChangeEvent<Field>) => void;
+};
+
+/**
+ * Input Hook; 파일첨부 이벤트
+ * @property {string} selectorId - <input type="file" />의 id
+ * @property {Function} uploadCallback - 파일 업로드 콜백 함수
+ */
+export type UseInputFileProps = {
+  /**
+   * 파일 업로드 콜백 함수
+   * @param {File[]} files - 선택된 파일 목록
+   */
+  uploadCallback: (files: File[]) => void;
+} & Partial<{
+  /**
+   * <input type="file" />의 id
+   */
+  selectorId: string;
+}>;

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

@@ -0,0 +1,6 @@
+export type * from "./format";
+export type * from "./state";
+export type * from "./validation";
+export type * from "./label";
+export type * from "./props";
+export type * from "./hook";

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

@@ -0,0 +1,11 @@
+export type LabelTopAlignType = "left" | "center" | "right";
+export type LabelPositionType = "top" | "left" | "right";
+
+export type LabelOptionType = {
+  name: React.ReactNode;
+} & Partial<{
+  hide: boolean;
+  tooltip: string;
+  position: LabelPositionType;
+  topAlign: LabelTopAlignType;
+}>;

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

@@ -0,0 +1,136 @@
+import type {
+  FieldError,
+  FieldErrors,
+  UseFormRegisterReturn,
+} from "react-hook-form";
+import type { LabelOptionType } from "./label";
+import type { FormFieldErrorMonitorType } from "./validation";
+import type { FormFieldStatePropsType } from "./state";
+import type { ComponentBaseProps } from "../../common";
+import type { MaskType } from "./format";
+
+/**
+ * Form Field 속성 구성
+ * @property {React.InputHTMLAttributes<Field>} [origin] HTML 태그 네이티브 속성
+ * @property {MaskType} [maskType] 입력값 마스킹 타입
+ */
+export type FormFieldCommonAttrType<
+  Field extends
+    | HTMLInputElement
+    | HTMLSelectElement
+    | HTMLTextAreaElement = HTMLInputElement,
+> = Partial<{
+  /**
+   * HTML 내이티브 속성
+   * @type {React.InputHTMLAttributes<Field>}
+   */
+  origin: InputHTMLAttributes<Field>;
+  /**
+   * 입력값 마스킹 타입
+   * "phone": 전화번호 형식
+   * "residentCode": 주민등록번호 형식
+   * "businessCode": 사업자등록번호 형식
+   * "date": 날짜 형식
+   * "comma": 숫자에 콤마 추가
+   */
+  maskType: MaskType;
+}>;
+
+/**
+ * Form Field 컴포넌트 공통 props
+ * - selectorId: input 태그의 id 속성
+ * - dataKey: 데이터 상태관리를 위한 데이터 프로퍼티 키
+ */
+export type FormFieldComponentProps<
+  Field extends
+    | HTMLInputElement
+    | HTMLSelectElement
+    | HTMLTextAreaElement = HTMLInputElement,
+> = {
+  /**
+   * @example
+   * ```tsx
+   * <input id={selectorId} ... />
+   * <label htmlFor={selectorId}>...</label>
+   * ```
+   */
+  selectorId: string;
+  /**
+   * 데이터 상태관리를 위한 데이터 프로퍼티 키
+   */
+  dataKey: string;
+  /**
+   * 레이블 옵션
+   */
+  label: LabelOptionType;
+} & Partial<{
+  className: string;
+  /**
+   * react-hook-form; register
+   * - 필드 입력값 context 관리
+   * @example
+   * ```tsx
+   * const { register } = useFormContext();
+   * <FormFieldItem register={register("데이터 객체 프로퍼티 키", {
+   *  ...검증옵션 등,
+   * })} ... />
+   * ```
+   */
+  register: UseFormRegisterReturn;
+  /**
+   * 컴포넌트 속성
+   * - 커스텀 옵션
+   * - origin: HTML 태그 옵션
+   */
+  attr: FormFieldCommonAttrType<Field>;
+  /**
+   * 입력 상태
+   */
+  state: FormFieldStatePropsType;
+  // 입력 검증
+  /**
+   * react-hook-form 기반 검증 오류상태 관리; 모니터링 적용
+   */
+  errorMonitor: FormFieldErrorMonitorType;
+  /**
+   * react-hook-form 기반 검증 오류상태 관리; 오류 상태
+   */
+  formError: FieldError | FieldErrors;
+}>;
+
+export type FormFieldType =
+  | "box"
+  | "date"
+  | "time"
+  | "date-time"
+  | "textarea"
+  | "checkbox"
+  | "check-button"
+  | "radio"
+  | "select"
+  | "switch"
+  | "file"
+  | "auto-complete";
+
+export type FormFieldItemContainerProps = ComponentBaseProps & {
+  fieldType: FormFieldType;
+  selectorId: string;
+} & Partial<{
+    labelName: string;
+    labelHide: boolean;
+    icon: boolean;
+    thumb: boolean;
+    readonly: boolean;
+    useHtmlLabel: boolean;
+  }>;
+
+export type FormFieldItemWrapperOptionType = Partial<{
+  state: string;
+  focus: boolean;
+  openSelect: boolean;
+}>;
+
+export type FormFieldItemWrapperProps = ComponentBaseProps &
+  FormFieldItemWrapperOptionType;
+
+export type FormFieldItemLabelProps = LabelOptionType;