@weing-dev/ui-kit-primitive 0.0.1 → 0.0.2

package/dist/components/Calendar/dayjs.util.d.ts

@@ -0,0 +1,99 @@
+import { default as dayjs, Dayjs } from 'dayjs';
+type DayjsType = "year" | "month" | "week" | "day";
+export type LangType = "ko" | "en" | "ja" | "zh" | "vi" | "fr" | "de" | "es" | "it" | "ru";
+/**
+ *
+ * @param {*} date  {string} - 날짜
+ * @param {*} param1 {
+ *  type {string} - "month" | "week" | "year" | "day",
+ *  value {number} - 빼는 값
+ * }
+ * @summary 날짜를 뺀다.
+ */
+export declare const subtractCalendar: (date: string, { type, value }: {
+    type: DayjsType;
+    value: number;
+}) => dayjs.Dayjs;
+/**
+ *  @param {*} date  {string} - 날짜
+ * @param {*} param1 {
+ * type {string} - "month" | "week" | "year" | "day",
+ * value {number} - 더하는 값
+ * }
+ * @summary 날짜를 더한다.
+ */
+export declare const addCalendar: (date: string, { type, value }: {
+    type: DayjsType;
+    value: number;
+}) => dayjs.Dayjs;
+/**
+ *
+ * @param {*} date {string} - 날짜
+ * @param {*} lang {string} - "ko" | "en" | "ja" | "zh" | "vi" | "fr" | "de" | "es" | "it" | "ru"
+ * @returns {string} - 년월 텍스트
+ * @example getYearAndMonthText("2024-08-07", "ko") // "2024년 08월"
+ * @example getYearAndMonthText("2024-08-07", "en") // "Aug 2024"
+ * @author @sangheon-kim (ksj8367@gmail.com)
+ */
+export declare const getYearAndMonthText: (date: string, lang?: string) => string;
+/**
+ * @description 달력의 컬럼을 채우는 함수
+ * @param {*} columns {dayjs.Dayjs[]} - 달력의 컬럼
+ * @param {*} start {dayjs.Dayjs} - 시작 날짜
+ * @param {*} end {dayjs.Dayjs} - 끝 날짜
+ * @return {dayjs.Dayjs[]} - 채워진 컬럼
+ * @author @sangheon-kim (ksj8367@gmail.com)
+ */
+export declare const fillEmptyColumns: ({ columns, start, end, isMondayStart, isWeekDay, isWeekend, }: {
+    columns: Dayjs[];
+    start: Dayjs;
+    end: Dayjs;
+    isMondayStart: boolean;
+    isWeekDay: boolean;
+    isWeekend: boolean;
+}) => dayjs.Dayjs[];
+/**
+ *
+ * @description 달력의 컬럼을 생성하는 함수
+ * @param {*} date {string} - 현재 날짜
+ * @param {*} isFill {boolean} - 빈 날짜를 채울지 여부
+ * @return {dayjs.Dayjs[]} - 달력의 컬럼
+ * @author @sangheon-kim (ksj8367@gmail.com)
+ */
+export declare const getCalendarColumns: ({ date, isWeekDay, isWeekend, isMondayStart, }: {
+    date: string;
+    isWeekDay: boolean;
+    isWeekend: boolean;
+    isMondayStart: boolean;
+}) => dayjs.Dayjs[];
+/**
+ * @description 한주의 컬럼을 생성하는 함수
+ * @param {*} nowDate {string} - 현재 날짜
+ * @param {*} isWeekDay {boolean} - 평일 여부
+ * @param {*} isWeekend {boolean} - 주말 여부
+ * @param {*} startMon {boolean} - 월요일부터 시작할지 여부
+ * @return {dayjs.Dayjs[]} - 한주의 컬럼
+ * @author @sangheon-kim (ksj8367@gmail.com)
+ *
+ */
+export declare const getWeekdayColumns: ({ date, isWeekDay, isWeekend, isMondayStart, }: {
+    date: string;
+    isWeekDay: boolean;
+    isWeekend: boolean;
+    isMondayStart: boolean;
+}) => dayjs.Dayjs[];
+/**
+ * @description 요일 텍스트를 가져오는 함수
+ * @param {*} day {number} - 요일
+ * @param {*} lang {string} - "ko" | "en" | "ja" | "zh" | "vi" | "fr" | "de" | "es" | "it" | "ru"
+ * @return {string} - 요일 텍스트
+ * @author @sangheon-kim (ksj8367@gmail.com)
+ */
+export declare const getDayText: (day: number, lang?: LangType) => string | undefined;
+/**
+ * @description 요일 색상을 가져오는 함수
+ * @param {*} day {number} - 요일
+ * @return {string} - 요일 색상
+ */
+export declare const getDayColor: (day: number) => "#e67639" | "#5872d1" | "#2b2b2b";
+export {};

package/dist/components/Cascader/Cacader.data.d.ts

@@ -0,0 +1,6 @@
+import { CascaderOption } from './Cascader';
+export declare const defaultOptions: CascaderOption[];
+export declare const disabledOptions: CascaderOption[];
+export declare const titleViewOptions: CascaderOption[];
+export declare const dividerViewOptions: CascaderOption[];
+export declare const CustomizedCascaderOptions: CascaderOption[];

package/dist/components/Cascader/Cascader.context.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+export type CascaderOption = {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    role?: "title" | "divider";
+    children?: CascaderOption[];
+    [key: string]: unknown;
+};
+export type OnSelectProps = {
+    option: CascaderOption;
+    level: number;
+};
+type CascaderContextType = {
+    options: CascaderOption[];
+    activeOptions?: CascaderOption[];
+    selectedOptions?: CascaderOption[][];
+    showChildrenCount?: boolean;
+    columnPositionFromParent?: boolean;
+    columnOpenAnimation?: boolean;
+    maxColumnView?: number;
+    onSelect?: (props: OnSelectProps) => void;
+    selectedOptionTop?: number[];
+    setSelectedOptionTop?: React.Dispatch<React.SetStateAction<number[]>>;
+};
+export declare const CascaderContext: React.Context<CascaderContextType>;
+export type CascaderProviderProps = React.PropsWithChildren<CascaderContextType & {
+    className?: string;
+}>;
+export declare const CascaderProvider: (props: CascaderProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Cascader/Cascader.d.ts

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+import { CascaderProviderProps, CascaderOption, OnSelectProps } from './Cascader.context';
+import { useCascader } from './Cascader.hook';
+type ItemAsProps = {
+    ref: React.RefObject<HTMLDivElement | null>;
+    option: CascaderOption;
+    level: number;
+    disabled?: boolean;
+    role?: CascaderOption["role"];
+    isSelected?: boolean;
+    showChildrenCount?: boolean;
+    defaultClassName: string;
+    onClick: () => void;
+};
+type ItemProps = React.PropsWithChildren<{
+    option: CascaderOption;
+    level: number;
+    as?: (props: ItemAsProps) => React.ReactNode;
+} & React.ComponentProps<"div">>;
+declare const Item: (props: ItemProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+type ColumnAsProps = {
+    defaultClassName: string;
+    maxColumnView?: number;
+    columnPositionFromParent?: boolean;
+    selectedOptionTop?: number[];
+    index?: number;
+    topOffset?: number;
+};
+type ColumnProps = React.PropsWithChildren<{
+    index: number;
+    as?: (props: ColumnAsProps) => React.ReactNode;
+} & React.ComponentProps<"div">>;
+declare const Column: (props: React.PropsWithoutRef<ColumnProps>) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+type MenuAsProps = {
+    defaultClassName: string;
+};
+type MenuProps = React.PropsWithChildren<{
+    as?: (props: MenuAsProps) => React.ReactNode;
+} & React.ComponentProps<"div">>;
+declare const Menu: (props: React.PropsWithoutRef<MenuProps>) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+type RootProps = Omit<CascaderProviderProps, "selectedOptionTop" | "setSelectedOptionTop"> & Omit<React.ComponentProps<"div">, "onSelect">;
+declare const Root: (props: React.PropsWithoutRef<RootProps>) => import("react/jsx-runtime").JSX.Element;
+interface ICascader {
+    Root: typeof Root;
+    Menu: typeof Menu;
+    Column: typeof Column;
+    Item: typeof Item;
+    useCascader: typeof useCascader;
+    OnSelectProps: OnSelectProps;
+    CascaderOption: CascaderOption;
+}
+export type { OnSelectProps, CascaderOption };
+declare const _default: ICascader;
+export default _default;

package/dist/components/Cascader/Cascader.hook.d.ts

@@ -0,0 +1,95 @@
+import { OnSelectProps, CascaderOption } from './Cascader';
+interface UseCascaderProps {
+    options: CascaderOption[];
+    multiple?: boolean;
+}
+export interface UseCascaderReturn {
+    /**
+     * 활성화(active)된 옵션들
+     */
+    activeOptions: CascaderOption[];
+    /**
+     * 선택된 옵션들
+     */
+    selectedOptions: CascaderOption[][];
+    /**
+     * 활성화(active)된 옵션들을 기반으로 각 레벨별 선택 가능한 옵션들의 배열을 생성합니다.
+     *
+     * returns
+     *
+     * - 각 레벨별 옵션 배열을 포함하는 2차원 배열
+     *
+     * - 첫 번째 레벨(index 0)은 항상 최상위 옵션들을 포함
+     *
+     * - 이후 레벨들은 활성화된 옵션의 자식들을 순차적으로 포함
+     *
+     */
+    columns: CascaderOption[][];
+    /**
+     * 선택된 옵션들 중 자식이 없는 최종 옵션들만 필터링하여 반환
+     *
+     * returns: [{ id: "gangnam", ... }, { id: "yeoksam1", ... }, { id: "yeoksam2", ... }]
+     */
+    selectedResult: CascaderOption[];
+    /**
+     * 옵션 클릭 시 처리하는 핸들러
+     *
+     * 해당 메소드를 Cascader.Root에 전달하여 사용합니다.
+     *
+     * params - 클릭된 옵션과 레벨 정보 { option: CascaderOption, level: number }
+     *
+     * example - selectHandler({ option: { id: "korea", ... }, level: 0 })
+     */
+    selectHandler: (params: OnSelectProps) => void;
+    /**
+     * 특정 옵션을 선택하는 핸들러
+     *
+     * 해당 옵션을 통해 선택하면 해당 옵션과 그 부모 옵션들을 선택하거나 해제합니다.
+     *
+     * 만약 해당 옵션을 제거했을때 선택된 부모까지 전부 체크해서 선택되어있는 최종옵션이 없으면 상위의 부모옵션도 선택을 해제합니다.
+     *
+     * 토글식으로 작동됩니다.
+     *
+     *  params - 선택할 옵션의 ID { id: string }
+     *
+     * example - selectByIdHandler({ id: "gangnam" })
+     */
+    selectByIdHandler: (params: {
+        id: string;
+    }) => void;
+    /**
+     * 모든 옵션을 초기화하는 핸들러
+     *
+     * params - 초기화할 옵션 종류 { active: boolean, selected: boolean }
+     *
+     * example - resetAll({ active: true, selected: true })
+     */
+    resetAll: (params?: {
+        active?: boolean;
+        selected?: boolean;
+    }) => void;
+    /**
+     * 특정 옵션과 해당 특정옵션의 자식중 선택되어 있는 옵션을 초기화하는 핸들러
+     *
+     * 해당 옵션을 초기화했을때 부모옵션까지 탐색해서 선택된 자식이 없을 경우 부모옵션도 초기화합니다.
+     *
+     * params - 초기화할 옵션의 ID { id: string }
+     *
+     * example - resetSelectedById({ id: "gangnam" })
+     */
+    resetSelectedById: (params: {
+        id: string;
+    }) => void;
+    /**
+     * 특정 레벨까지 활성화(active)된 옵션들을 초기화하는 핸들러
+     *
+     * params - 초기화할 레벨 { level: number }
+     *
+     * example - resetActiveOptions({ level: 1 })
+     */
+    resetActiveOptions: (params?: {
+        level?: number;
+    }) => void;
+}
+export declare function useCascader(props: UseCascaderProps): UseCascaderReturn;
+export {};

package/dist/components/Chart/Chart.d.ts

@@ -0,0 +1,19 @@
+import { ChartData } from 'chart.js';
+type LineChartData = ChartData<"line">;
+type BarChartData = ChartData<"bar">;
+type BubbleChartData = ChartData<"bubble">;
+type DoughnutChartData = ChartData<"doughnut">;
+type PieChartData = ChartData<"pie">;
+type PolarAreaChartData = ChartData<"polarArea">;
+type RadarChartData = ChartData<"radar">;
+type ScatterChartData = ChartData<"scatter">;
+type FunnelChartData = ChartData;
+type ChartType = {
+    type: "line" | "bar" | "bubble" | "doughnut" | "pie" | "polarArea" | "radar" | "scatter" | "funnel";
+    data: LineChartData | BarChartData | BubbleChartData | DoughnutChartData | PieChartData | PolarAreaChartData | RadarChartData | ScatterChartData | FunnelChartData;
+    options?: object;
+    width?: number;
+    height?: number;
+};
+declare const Chart: (props: ChartType) => import("react/jsx-runtime").JSX.Element;
+export default Chart;

package/dist/components/Chips/Chips.colors.d.ts

@@ -0,0 +1,171 @@
+declare const useChipsColors: () => {
+    primary: {
+        contained: {
+            backgroundColor: "#00a76f";
+            color: "#ffffff";
+            borderColor: string;
+            hover: {
+                backgroundColor: "#007867";
+                color: "#ffffff";
+                borderColor: string;
+            };
+        };
+        outlined: {
+            backgroundColor: string;
+            color: "#00a76f";
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: "#00a76f";
+                borderColor: "#00a76f";
+            };
+        };
+        soft: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+        text: {
+            backgroundColor: string;
+            color: "#00a76f";
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+    };
+    inherit: {
+        contained: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+        outlined: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+        soft: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+        text: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+    };
+    disabled: {
+        contained: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+        outlined: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+        soft: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+        text: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+    };
+    dual: {
+        contained: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: "#00a76f";
+                color: string;
+                borderColor: string;
+            };
+        };
+        outlined: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: "#00a76f";
+                borderColor: "#00a76f";
+            };
+        };
+        soft: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+        text: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+    };
+};
+export default useChipsColors;

package/dist/components/Chips/Chips.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+type ChipsProps = React.PropsWithChildren<{
+    className?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    value?: string | string[];
+    id?: string;
+    onClick?: (...args: any) => void;
+    onChange?: (...args: any) => void;
+    size?: "small" | "medium" | "large";
+    variant?: "contained" | "outlined" | "soft" | "text";
+    colorType?: "primary" | "inherit" | "dual";
+    shapeType?: "square" | "round";
+}>;
+declare const Chips: (props: ChipsProps) => import("react/jsx-runtime").JSX.Element;
+export default Chips;

package/dist/components/Comment/Comment.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export declare const Status: readonly ["error", "warning", "success", "info", "default"];
+type CommentProps = React.PropsWithChildren<{
+    className?: string;
+    /** 상태 */
+    status?: (typeof Status)[number];
+    /** 경고 색상 */
+    warningColor?: string;
+    /** 에러 색상 */
+    errorColor?: string;
+    /** 성공 색상 */
+    successColor?: string;
+    /** 기본 색상 */
+    defaultColor?: string;
+    /** 정보 색상 */
+    infoColor?: string;
+    /** 아이콘 크기 */
+    size?: number;
+}>;
+declare const Comment: (props: CommentProps) => import("react/jsx-runtime").JSX.Element;
+export default Comment;

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,13 @@
+type DividerProps = {
+    /** className */
+    className?: string;
+    /** divider color */
+    color?: string;
+    /** size */
+    size?: "small" | "large" | number;
+    /** 위 아래 간격 */
+    verticalGap?: number;
+};
+/** Divider Component */
+declare const Divider: (props: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export default Divider;

package/dist/components/Editor/Editor.context.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { default as Quill } from 'quill';
+export interface EditorContextValue {
+    quill: Quill | null;
+    isLoading: boolean;
+    editorRef: React.RefObject<HTMLDivElement | null>;
+}
+export declare const EditorContext: React.Context<EditorContextValue | null>;

package/dist/components/Editor/Editor.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+declare const EditorSkeleton: () => import("react/jsx-runtime").JSX.Element | null;
+declare const EditorInput: () => import("react/jsx-runtime").JSX.Element;
+type EditorRootProps = React.PropsWithChildren<{
+    initialValue?: string;
+    onChange?: (content: string) => void;
+}>;
+declare const EditorRoot: (props: EditorRootProps) => import("react/jsx-runtime").JSX.Element;
+interface EditorComposition {
+    Root: typeof EditorRoot;
+    Input: typeof EditorInput;
+    Skeleton: typeof EditorSkeleton;
+}
+export type { EditorRootProps as EditorProps };
+declare const Editor: EditorComposition;
+export default Editor;

package/dist/components/Form/CheckBox/CheckBox.context.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+type InputStatus = "error" | "warning" | "success" | undefined;
+type CheckBoxContextType = {
+    /** input value */
+    value: string | string[];
+    /** checked */
+    checked?: boolean;
+    /** onChange */
+    onChange?: (...args: any) => void;
+    /** name */
+    name?: string;
+    /** isIndeterminate (보통 여러개 선택해야하는 경우) */
+    indeterminated?: boolean;
+    /** Disabled */
+    disabled?: boolean;
+    /** readOnly */
+    readOnly?: boolean;
+    /** status */
+    status?: InputStatus;
+    /** ID */
+    id: string;
+};
+export declare const CheckBoxContext: React.Context<CheckBoxContextType>;
+export type CheckBoxProviderProps = React.PropsWithChildren<Partial<Omit<CheckBoxContextType, "">>> & {
+    className?: string;
+};
+export declare const CheckBoxProvider: React.FC<CheckBoxProviderProps>;
+export {};

package/dist/components/Form/CheckBox/CheckBox.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+import { CheckBoxProviderProps } from './CheckBox.context';
+import { default as HelperTextComponent } from '../../HelperText/HelperText';
+type AsProps = {
+    checked?: boolean;
+    value?: string | string[];
+    indeterminated?: boolean;
+    className?: string;
+    id?: string;
+    disabled?: boolean;
+};
+type TriggerProps = React.PropsWithChildren<{
+    as?: (props: AsProps) => React.ReactNode;
+    className?: string;
+    checkedClassName?: string;
+    id?: string;
+    indeterminated?: boolean;
+}>;
+declare const Trigger: (props: TriggerProps) => import("react/jsx-runtime").JSX.Element;
+type LabelProps = React.PropsWithChildren<{
+    className?: string;
+    checkedColor?: string;
+}>;
+declare const Label: (props: LabelProps) => import("react/jsx-runtime").JSX.Element;
+declare const Root: (props: CheckBoxProviderProps) => import("react/jsx-runtime").JSX.Element;
+interface ICheckBoxInput {
+    Root: typeof Root;
+    Label: typeof Label;
+    HelperText: typeof HelperTextComponent;
+    Trigger: typeof Trigger;
+}
+declare const _default: ICheckBoxInput;
+export default _default;

package/dist/components/Form/CheckBox/Checkbox.colors.d.ts

@@ -0,0 +1,33 @@
+declare const useCheckboxColors: () => {
+    selected: {
+        backgroundColor: "#00a76f";
+        color: string;
+        borderColor: string;
+        hover: {
+            backgroundColor: "#007867";
+            color: string;
+            borderColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+    };
+    unselected: {
+        backgroundColor: string;
+        color: string;
+        borderColor: string;
+        hover: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+    };
+};
+export default useCheckboxColors;