@sonamu-kit/react-components 0.1.4 → 0.1.5

package/README.md

@@ -35,8 +35,8 @@ src/
 ## 설치
 
 ```bash
-cd packages/react-components
-yarn install
+cd modules/react-components
+pnpm install
 ```
 
 ## 사용
@@ -50,9 +50,9 @@ import { useTypeForm } from "@sonamu-kit/react-components/hooks";
 
 ## 개발
 
-- `yarn dev`: TypeScript watch 모드
-- `yarn build`: 빌드
-- `yarn lint`: 린팅
+- `pnpm dev`: TypeScript watch 모드
+- `pnpm build`: 빌드
+- `pnpm lint`: 린팅
 
 ## 향후 계획
 

package/dist/components/index.d.ts

@@ -27,18 +27,16 @@ export { DateSelectorMultiple } from './ui/date-selector-multiple';
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from './ui/dialog';
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, } from './ui/drawer';
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from './ui/dropdown-menu';
+export type { FileInputProps } from './ui/file-input';
+export { FileInput } from './ui/file-input';
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField, } from './ui/form';
 export { HoverCard, HoverCardContent, HoverCardTrigger } from './ui/hover-card';
-export type { ImageUploaderProps } from './ui/image-uploader';
-export { ImageUploader } from './ui/image-uploader';
-export { Input } from './ui/input';
+export { Input, type InputProps } from './ui/input';
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, } from './ui/input-otp';
 export { Label } from './ui/label';
 export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, } from './ui/menubar';
 export type { MonthPickerValue } from './ui/month-picker-multiple';
 export { MonthPickerMultiple } from './ui/month-picker-multiple';
-export type { MultiImageUploaderProps } from './ui/multi-image-uploader';
-export { MultiImageUploader } from './ui/multi-image-uploader';
 export type { MultiSelectOption, MultiSelectProps, MultiSelectRef, } from './ui/multi-select';
 export { MultiSelect } from './ui/multi-select';
 export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle, } from './ui/navigation-menu';

package/dist/components/ui/common-modal.d.ts

@@ -4,6 +4,8 @@ type ExtendedModalProps = {
     description?: string;
     className?: string;
     onCompleted?: (data?: unknown) => void;
+    onControlledOpen?: () => void;
+    onControlledClose?: () => void;
 };
 export declare const commonModalAtom: import('jotai').PrimitiveAtom<{
     open: boolean;

package/dist/components/ui/date-input.d.ts

@@ -1,4 +1,4 @@
-import { Override } from '../../lib/helpers';
+import { Override } from '../../lib/types';
 type DateInputProps = Override<React.ComponentProps<"input">, {
     value: Date | null;
     onValueChange: (value: Date | null) => void;

package/dist/components/ui/file-input.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { SonamuFile } from '../../contexts';
+export type PreviewSize = "sm" | "md" | "lg" | "xl";
+type BaseProps = {
+    uploadMode: "eager" | "lazy";
+    viewMode: "image" | "file";
+    placeholder?: string;
+    accept?: string;
+    disabled?: boolean;
+    className?: string;
+    previewSize?: PreviewSize;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+};
+type SingleModeProps = BaseProps & {
+    multiple?: false;
+    value: SonamuFile | File | null;
+    onValueChange?: (value: SonamuFile | File | null) => void;
+};
+type MultipleModeProps = BaseProps & {
+    multiple: true;
+    value: (SonamuFile | File)[] | null;
+    onValueChange?: (value: (SonamuFile | File)[]) => void;
+    maxFiles?: number;
+};
+export type FileInputProps = SingleModeProps | MultipleModeProps;
+export declare function FileInput(props: FileInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/input.d.ts

@@ -1,4 +1,4 @@
-import { Override } from '../../lib/helpers';
+import { Override } from '../../lib/types';
 import * as React from "react";
 export type InputProps = Override<React.ComponentProps<"input">, {
     onValueChange?: (value: string) => void;

package/dist/components/ui/select.d.ts

@@ -1,4 +1,4 @@
-import { Override } from '../../lib/helpers';
+import { Override } from '../../lib/types';
 import * as SelectPrimitive from "@radix-ui/react-select";
 import * as React from "react";
 type SelectProps = Override<React.ComponentProps<typeof SelectPrimitive.Root>, {

package/dist/components/ui/table.d.ts

@@ -7,7 +7,9 @@ type TableCol<T> = {
     className?: string;
     align?: TableAlign;
 };
-declare function Table({ className, ...props }: React.ComponentProps<"table">): import("react/jsx-runtime").JSX.Element;
+declare function Table({ className, containerClassName, ...props }: React.ComponentProps<"table"> & {
+    containerClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;
 declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): import("react/jsx-runtime").JSX.Element;
 declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): import("react/jsx-runtime").JSX.Element;
 declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/textarea.d.ts

@@ -1,4 +1,4 @@
-import { Override } from '../../lib/helpers';
+import { Override } from '../../lib/types';
 import * as React from "react";
 export type TextareaProps = Override<React.ComponentProps<"textarea">, {
     onValueChange?: (value: string) => void;

package/dist/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export { type SonamuContextValue, SonamuProvider, useSonamuContext, } from './sonamu-context';
+export type { SonamuAuth, SonamuFile } from './types';

package/dist/contexts/sonamu-context.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { Dictionary, SDReturnType, SonamuAuth, SonamuFile } from './types';
+export interface SonamuContextValue<D extends Dictionary = Dictionary> {
+    uploader?: (files: File[]) => Promise<SonamuFile[]>;
+    auth?: SonamuAuth;
+    SD: <K extends keyof D>(key: K) => SDReturnType<D, K>;
+}
+export interface SonamuProviderProps<D extends Dictionary = Dictionary> extends SonamuContextValue<D> {
+    children: ReactNode;
+}
+export declare function SonamuProvider<D extends Dictionary = Dictionary>({ children, ...value }: SonamuProviderProps<D>): import("react/jsx-runtime").JSX.Element;
+export declare function useSonamuContext<D extends Dictionary = Dictionary>(): Required<SonamuContextValue<D>>;

package/dist/contexts/types.d.ts

@@ -0,0 +1,26 @@
+/** biome-ignore-all lint/suspicious/noExplicitAny: 제네릭 기본값으로 any 사용 */
+/**
+ * ⚠️ 이 타입은 sonamu/types.ts와 동기화되어야 함
+ */
+export type SonamuFile = {
+    name: string;
+    url: string;
+    mime_type: string;
+    size: number;
+};
+export type SonamuAuth<TUser = any, TLoginParams = any> = {
+    user: TUser | null;
+    loading: boolean;
+    login: (params: TLoginParams) => void;
+    logout: () => void;
+    refetch: () => void;
+};
+export type Dictionary = Record<string, string | ((...args: any[]) => string)>;
+/**
+ * SD 반환 타입 - 제네릭으로 키에 따라 정확한 타입 반환
+ *
+ * 주의: union type (string | function)을 반환하므로, 함수로 호출할 때는 타입 단언 필요
+ * @example (SD("key") as unknown as (param) => string)(param)
+ * (이는 TypeScript가 union type을 직접 호출할 수 없기 때문)
+ */
+export type SDReturnType<D extends Dictionary, K extends keyof D> = D[K] extends (...args: infer P) => string ? ((...args: P) => string) | string : string;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
+export * from './contexts';
 export * from './hooks';
 export * from './lib';

package/dist/lib/base-helpers.d.ts

@@ -0,0 +1,15 @@
+import { z } from 'zod';
+export declare function hidden(condition: boolean | undefined): string;
+export declare function searchParamsToParams<T extends z.ZodType<any>>(searchParams: URLSearchParams, paramsSchema: T): z.infer<T>;
+export declare function paramsToSearchParams<T>(params: T): {
+    [key in string]: string | string[];
+};
+export declare function sqlDateToDateString(sqlDateString: string | null): string | null;
+export declare function numF(num: number | null | undefined): string | number | undefined | null;
+export declare function dateF(dateValue: string | Date | null | undefined): string | null;
+export declare function datetimeF(dateValue: string | Date | null | undefined): string | null;
+export declare function arrayableToArray<T extends number | string | boolean>(val: T | T[] | undefined): T[];
+export declare function caller<T extends Function>(): {
+    set: (func: T) => void;
+    call: T;
+};

package/dist/lib/form-helpers.d.ts

@@ -0,0 +1,12 @@
+import { z } from 'zod';
+import { ErrorObj } from './types';
+export declare function useTypeForm<T extends z.ZodObject<any> | z.ZodArray<any>, U extends z.infer<T>>(zType: T, defaultValue: U): {
+    form: z.core.output<T>;
+    setForm: import('react').Dispatch<import('react').SetStateAction<z.core.output<T>>>;
+    register: (objPath: string, _emptyStringTo?: "normal" | "nullable" | "optional") => any;
+    submit: <R>(callback: (formData: z.infer<T>) => Promise<R>) => () => Promise<R>;
+    addError: (objPath: string, errorMessage: string | ErrorObj) => void;
+    removeError: (objPath: string) => void;
+    clearError: () => void;
+    reset: () => void;
+};

package/dist/lib/index.d.ts

@@ -1,6 +1,8 @@
-export { Pagination } from '../components/ui/pagination';
+export { arrayableToArray, caller, dateF, datetimeF, hidden, numF, paramsToSearchParams, searchParamsToParams, sqlDateToDateString, } from './base-helpers';
 export { caster, fastifyCaster } from './caster';
-export { arrayableToArray, type ControlledModalProps, caller, type DistributiveOmit, dateF, datetimeF, type ErrorObj, hidden, numF, type Override, type PaginationProps, paramsToSearchParams, type SonamuCol, searchParamsToParams, sqlDateToDateString, type TableColumnWidth, useListParams, useModal, useSelection, useTypeForm, } from './helpers';
-export { lazyUpload } from './lazy-upload';
+export { useTypeForm } from './form-helpers';
+export { useListParams, useSelection } from './list-helpers';
+export { useModal } from './modal-helpers';
+export type { ControlledModalProps, DistributiveOmit, ErrorObj, Override, PaginationProps, SonamuCol, TableColumnWidth, } from './types';
 export { useIsMobile } from './use-mobile';
 export { cn } from './utils';

package/dist/lib/list-helpers.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { z } from 'zod';
+type ZodKeys<T extends z.ZodType<any>> = keyof z.infer<T>;
+export declare function useListParams<U extends z.ZodType<any>, T extends Partial<z.infer<U>>>(zType: U, defaultValue: T, options?: {
+    disableSearchParams?: boolean;
+}): {
+    listParams: T;
+    setListParams: (newParams: T) => void;
+    register: (name: ZodKeys<U>) => any;
+};
+export declare function useSelection<T>(allKeys: T[], defaultSelectedKeys?: T[]): {
+    getSelected: (key: T) => boolean;
+    toggle: (key: T) => void;
+    selectedKeys: T[];
+    deselectAll: () => void;
+    selectAll: () => void;
+    isAllSelected: boolean;
+    handleCheckboxClick: (e: React.MouseEvent<HTMLInputElement, MouseEvent>, index: number) => void;
+};
+export {};

package/dist/lib/modal-helpers.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { ControlledModalProps } from './types';
+export declare function useModal<T extends object>(ModalComponent: (props: T & ControlledModalProps) => React.ReactElement, defaultProps: T): {
+    open: (newProps: T) => void;
+    modal: React.FunctionComponentElement<T & ControlledModalProps>;
+};

package/dist/lib/types.d.ts

@@ -0,0 +1,26 @@
+import { ReactElement } from 'react';
+export type PaginationProps = {
+    activePage?: number;
+    totalPages?: number;
+};
+export type TableColumnWidth = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
+export type ErrorObj = {
+    content: string;
+    pointing?: "above" | "below" | "left" | "right";
+};
+export type ControlledModalProps = {
+    open: boolean;
+    close: () => void;
+};
+export type SonamuCol<T> = {
+    label: string;
+    th?: ReactElement;
+    tc: (row: T, index: number) => ReactElement;
+    className?: string;
+    collapsing?: boolean;
+    width?: TableColumnWidth;
+    hidden?: boolean;
+    parentLabel?: string;
+};
+export type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+export type Override<T, U> = Omit<T, keyof U> & U;

package/dist/lib/utils.d.ts

@@ -1,2 +1,17 @@
 import { ClassValue } from 'clsx';
 export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * useObjectUrls 훅
+ *
+ * 로컬 File 객체 배열을 받아서 브라우저 메모리 기반 미리보기용 Object URL을 생성하고,
+ * 컴포넌트가 언마운트되거나 파일이 변경될 때 자동으로 메모리를 해제합니다.
+ *
+ * **동작 방식**:
+ * 1. File 배열을 받아서 각 파일마다 `URL.createObjectURL()`로 임시 URL 생성
+ * 2. 생성된 URL은 `blob:http://...` 형태로, 브라우저 메모리를 직접 참조
+ * 3. 컴포넌트 언마운트나 파일 변경 시 cleanup 함수가 `URL.revokeObjectURL()`로 메모리 해제
+ *
+ * @param files - 미리보기할 File 객체 배열
+ * @returns 생성된 Object URL 문자열 배열
+ */
+export declare function useObjectUrls(files: File[]): string[];