@sonamu-kit/react-components 0.1.0 → 0.1.2

package/src/hooks/use-toast.ts

@@ -1,189 +0,0 @@
-"use client";
-
-// Inspired by react-hot-toast library
-import * as React from "react";
-
-import type { ToastActionElement, ToastProps } from "../components/ui/toast";
-
-const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 1000000;
-
-type ToasterToast = ToastProps & {
-  id: string;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  action?: ToastActionElement;
-};
-
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const;
-
-let count = 0;
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER;
-  return count.toString();
-}
-
-type ActionType = typeof actionTypes;
-
-type Action =
-  | {
-      type: ActionType["ADD_TOAST"];
-      toast: ToasterToast;
-    }
-  | {
-      type: ActionType["UPDATE_TOAST"];
-      toast: Partial<ToasterToast>;
-    }
-  | {
-      type: ActionType["DISMISS_TOAST"];
-      toastId?: ToasterToast["id"];
-    }
-  | {
-      type: ActionType["REMOVE_TOAST"];
-      toastId?: ToasterToast["id"];
-    };
-
-interface State {
-  toasts: ToasterToast[];
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return;
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId);
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId: toastId,
-    });
-  }, TOAST_REMOVE_DELAY);
-
-  toastTimeouts.set(toastId, timeout);
-};
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      };
-
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
-      };
-
-    case "DISMISS_TOAST": {
-      const { toastId } = action;
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId);
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id);
-        });
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t,
-        ),
-      };
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        };
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      };
-  }
-};
-
-const listeners: Array<(state: State) => void> = [];
-
-let memoryState: State = { toasts: [] };
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action);
-  listeners.forEach((listener) => {
-    listener(memoryState);
-  });
-}
-
-type Toast = Omit<ToasterToast, "id">;
-
-function toast({ ...props }: Toast) {
-  const id = genId();
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    });
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
-
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss();
-      },
-    },
-  });
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  };
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState);
-
-  React.useEffect(() => {
-    listeners.push(setState);
-    return () => {
-      const index = listeners.indexOf(setState);
-      if (index > -1) {
-        listeners.splice(index, 1);
-      }
-    };
-  }, [state]);
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  };
-}
-
-export { useToast, toast };

package/src/icons.d.ts

@@ -1 +0,0 @@
-/// <reference types="unplugin-icons/types/react" />

package/src/index.ts

@@ -1,4 +0,0 @@
-// Main entry point
-export * from "./components";
-export * from "./hooks";
-export * from "./lib";

package/src/lib/caster.ts

@@ -1,66 +0,0 @@
-/** biome-ignore-all lint/suspicious/noExplicitAny: caster 함수에는 any가 필요함 */
-import { z } from "zod";
-
-// optional, nullable 무관하게 ZodNumber 체크
-function isZodNumberAnyway(zodType: z.ZodType<any>) {
-  if (zodType instanceof z.ZodNumber) {
-    return true;
-  } else if (zodType instanceof z.ZodNullable && zodType._def.innerType instanceof z.ZodNumber) {
-    return true;
-  } else if (zodType instanceof z.ZodOptional && zodType._def.innerType instanceof z.ZodNumber) {
-    return true;
-  } else if (
-    zodType instanceof z.ZodOptional &&
-    zodType._def.innerType instanceof z.ZodOptional &&
-    (zodType._def.innerType as any)._def.innerType instanceof z.ZodNumber
-  ) {
-    return true;
-  }
-
-  return false;
-}
-
-// ZodType을 이용해 raw를 Type Coercing
-export function caster(zodType: z.ZodType<any>, raw: any): any {
-  if (isZodNumberAnyway(zodType) && typeof raw === "string") {
-    // number
-    return Number(raw);
-  } else if (zodType instanceof z.ZodUnion) {
-    const options = zodType.options as z.ZodType<any>[];
-    if (options.some((opt) => isZodNumberAnyway(opt))) {
-      // zArrayable Number 케이스 처리
-      if (Array.isArray(raw)) {
-        const numType = options.find((opt) => opt instanceof z.ZodNumber);
-        if (!numType) {
-          throw new Error("Expected to find a number type in union");
-        }
-        return raw.map((elem: any) => caster(numType, elem));
-      } else {
-        return Number(raw);
-      }
-    }
-  } else if (zodType instanceof z.ZodBoolean && (raw === "true" || raw === "false")) {
-    // boolean
-    return raw === "true";
-  } else if (zodType instanceof z.ZodArray) {
-    // array
-    return raw.map((elem: any) => caster(zodType.element as z.ZodType<any>, elem));
-  } else if (zodType instanceof z.ZodObject && typeof raw === "object") {
-    // object
-    return Object.keys(raw).reduce((r, rawKey) => {
-      r[rawKey] = caster(zodType.shape[rawKey], raw[rawKey]);
-      return r;
-    }, {} as any);
-  } else if (zodType instanceof z.ZodOptional) {
-    return caster(zodType._def.innerType as z.ZodType<any>, raw);
-  }
-
-  // 나머지는 처리 안함
-  return raw;
-}
-
-export function fastifyCaster(schema: z.ZodObject<any>) {
-  return z.preprocess((raw: any) => {
-    return caster(schema, raw);
-  }, schema);
-}

package/src/lib/helpers.ts

@@ -1,394 +0,0 @@
-/** biome-ignore-all lint/suspicious/noExplicitAny: 파싱 결과이므로 any 허용 */
-
-import { useNavigate, useRouter, useSearch } from "@tanstack/react-router";
-import equal from "fast-deep-equal";
-import qs from "qs";
-import { get, isObject, set, unique } from "radashi";
-import React, { type ReactElement, useEffect, useState } from "react";
-import { z } from "zod";
-import { caster } from "./caster";
-
-// radashi에 intersection이 없으므로 직접 구현
-function intersection<T>(arr1: T[], arr2: T[]): T[] {
-  return arr1.filter((item) => arr2.includes(item));
-}
-
-// shadcn/ui용 타입 정의 (semantic-ui-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 function hidden(condition: boolean | undefined): string {
-  return condition === true ? "hidden" : "";
-}
-
-export function searchParamsToParams<T extends z.ZodType<any>>(
-  searchParams: URLSearchParams,
-  paramsSchema: T,
-): z.infer<T> {
-  const obj = qs.parse(searchParams.toString());
-  return caster(paramsSchema, obj);
-}
-
-export function paramsToSearchParams<T>(params: T): {
-  [key in string]: string | string[];
-} {
-  return Object.fromEntries(
-    // biome-ignore lint/complexity/useFlatMap: 여기는 flatMap 사용하면 깨짐
-    Object.entries(params as any)
-      .filter(([, value]) => {
-        return value !== undefined;
-      })
-      .map(([key, value]) => {
-        if (Array.isArray(value)) {
-          return [[`${key}[]`, value]];
-        } else if (isObject(value)) {
-          return Object.keys(value).map((subKey) => {
-            return [`${key}[${subKey}]`, String(value[subKey as keyof typeof value])];
-          });
-        } else {
-          return [[key, String(value)]];
-        }
-      })
-      .flat(),
-  );
-}
-
-export type ErrorObj = {
-  content: string;
-  pointing?: "above" | "below" | "left" | "right";
-};
-
-export function useTypeForm<T extends z.ZodObject<any> | z.ZodArray<any>, U extends z.infer<T>>(
-  zType: T,
-  defaultValue: U,
-) {
-  const [form, setForm] = useState<z.infer<T>>(defaultValue);
-  const [errorObjs, setErrorObjs] = useState<Map<string, ErrorObj>>(new Map());
-
-  function getEmptyStringTo(zType: T, objPath: string): "normal" | "nullable" | "optional" {
-    const zTypeObjPath = objPath
-      .replace(/\./g, ".shape.")
-      .replace(/\[[^\]]+\]/g, ".element")
-      .replace(/^\.element/, "element");
-
-    let targetZType: unknown;
-    if (zType instanceof z.ZodObject) {
-      targetZType = get(zType.shape, zTypeObjPath);
-    } else if (zType instanceof z.ZodArray) {
-      targetZType = get(zType, zTypeObjPath);
-    }
-
-    if (targetZType === undefined) {
-      return "normal";
-    } else if (targetZType instanceof z.ZodOptional) {
-      return "optional";
-    } else if (targetZType instanceof z.ZodNullable) {
-      return "nullable";
-    }
-    return "normal";
-  }
-
-  return {
-    form,
-    setForm,
-    register: (objPath: string, _emptyStringTo?: "normal" | "nullable" | "optional"): any => {
-      const emptyStringTo = _emptyStringTo ?? getEmptyStringTo(zType, objPath);
-      const srcValue = get(form, objPath) as unknown;
-
-      const error = errorObjs.get(objPath);
-
-      // 공통 업데이트 로직
-      const updateValue = (newValue: any) => {
-        if (error !== undefined) {
-          setErrorObjs((p) => {
-            const newP = new Map(p);
-            newP.delete(objPath);
-            return newP;
-          });
-        }
-
-        let processedValue = newValue;
-        if (emptyStringTo === "nullable") {
-          processedValue = newValue === "" ? null : newValue;
-        } else if (emptyStringTo === "optional") {
-          processedValue = newValue === "" ? undefined : newValue;
-        }
-
-        setForm(set(form, objPath, processedValue));
-      };
-
-      const result: Record<string, any> = {
-        value: srcValue === undefined || srcValue === null ? "" : srcValue,
-        onValueChange: (value: any) => updateValue(value),
-      };
-
-      // error가 있으면 추가
-      if (error) {
-        result.error = error;
-      }
-
-      return result;
-    },
-    addError: (objPath: string, errorMessage: string | ErrorObj): void => {
-      setErrorObjs((p) => {
-        const newP = new Map(p);
-        newP.set(
-          objPath,
-          typeof errorMessage === "string" ? { content: errorMessage } : errorMessage,
-        );
-        return newP;
-      });
-    },
-    removeError: (objPath: string): void => {
-      setErrorObjs((p) => {
-        const newP = new Map(p);
-        newP.delete(objPath);
-        return newP;
-      });
-    },
-    clearError: (): void => {
-      setErrorObjs(new Map());
-    },
-    reset: (): void => {
-      setForm(defaultValue);
-    },
-  };
-}
-
-type ZodKeys<T extends z.ZodType<any>> = keyof z.infer<T>;
-
-export function useListParams<U extends z.ZodType<any>, T extends Partial<z.infer<U>>>(
-  zType: U,
-  defaultValue: T,
-  options?: {
-    disableSearchParams?: boolean;
-  },
-) {
-  const search = useSearch({ strict: false }) as Record<string, unknown>;
-  const navigate = useNavigate();
-
-  // URL에서 파라미터 파싱
-  const listParams = (() => {
-    if (options?.disableSearchParams) {
-      return defaultValue;
-    }
-
-    const parsed = zType.safeParse(search);
-    if (parsed.success) {
-      return { ...defaultValue, ...parsed.data };
-    }
-    return defaultValue;
-  })() as T;
-
-  const setListParams = (newParams: T) => {
-    if (equal(listParams, newParams)) {
-      return;
-    }
-
-    navigate({
-      search: newParams as any,
-    });
-  };
-
-  // 함수 오버로드
-  function register(name: "page"): { value: number; onValueChange: (page: number) => void };
-  function register(name: Exclude<ZodKeys<U>, "page">): {
-    value: string;
-    onValueChange: (value: any) => void;
-  };
-  function register(name: ZodKeys<U>) {
-    if (name === "page") {
-      return {
-        value: (listParams as any).page ?? 1,
-        onValueChange: (page: number) => {
-          setListParams({ ...listParams, page } as T);
-        },
-      };
-    } else {
-      const currentValue = (listParams as any)[name];
-      return {
-        value: currentValue ?? "",
-        onValueChange: (value: any) => {
-          setListParams({
-            ...listParams,
-            page: 1,
-            [name]: value === "" ? undefined : value,
-          } as T);
-        },
-      };
-    }
-  }
-
-  return {
-    listParams,
-    setListParams,
-    register,
-  };
-}
-
-export function useGoBack() {
-  const router = useRouter();
-
-  const goBack = () => {
-    router.history.back();
-  };
-
-  return { goBack };
-}
-
-export function useSelection<T>(allKeys: T[], defaultSelectedKeys: T[] = []) {
-  const [selection, setSelection] = useState<Map<T, boolean>>(
-    new Map(allKeys.map((key) => [key, defaultSelectedKeys.includes(key)])),
-  );
-  const [lastIndex, setLastIndex] = useState<number>(0);
-
-  // 전체 키가 바뀔 때마다 validation하여 갱신된 전체 키에 포함된 키만 유지
-  useEffect(() => {
-    const selectionKeys = Array.from(selection.keys());
-    if (intersection(allKeys, selectionKeys).length === selectionKeys.length) {
-      return;
-    }
-
-    setSelection(new Map(Array.from(selection).filter(([key, _value]) => allKeys.includes(key))));
-  }, [allKeys, selection]);
-
-  const selectedKeys = Array.from(selection)
-    .filter(([key, value]) => allKeys.includes(key) && value === true)
-    .map(([key]) => key);
-
-  return {
-    getSelected: (key: T) => selection.get(key) ?? false,
-    toggle: (key: T) => {
-      setSelection((selection) => {
-        return new Map([...selection, [key, !(selection.get(key) ?? false)]]);
-      });
-    },
-    selectedKeys,
-    deselectAll: () => setSelection(new Map(allKeys.map((key) => [key, false]))),
-    selectAll: () => setSelection(new Map(allKeys.map((key) => [key, true]))),
-    isAllSelected: selectedKeys.length === allKeys.length,
-    handleCheckboxClick: (e: React.MouseEvent<HTMLInputElement, MouseEvent>, index: number) => {
-      const input = e.currentTarget.getElementsByTagName("input");
-      if (e.shiftKey && input[0]?.checked === false) {
-        const [begin, end] = (() => {
-          if (lastIndex < index) {
-            return [lastIndex, index];
-          } else {
-            return [index + 1, lastIndex];
-          }
-        })();
-        setSelection(
-          new Map(unique([...selectedKeys, ...allKeys.slice(begin, end)]).map((k: T) => [k, true])),
-        );
-      } else {
-        setLastIndex(index);
-      }
-    },
-  };
-}
-
-export function sqlDateToDateString(sqlDateString: string | null) {
-  if (sqlDateString === null) {
-    return null;
-  } else {
-    return sqlDateString.slice(0, 10);
-  }
-}
-
-export function numF(num: number | null | undefined): string | number | undefined | null {
-  return num && new Intl.NumberFormat().format(num);
-}
-
-export function dateF(dateValue: string | Date | null | undefined): string | null {
-  if (dateValue === null || dateValue === undefined) {
-    return null;
-  } else if (dateValue instanceof Date) {
-    return dateValue.toISOString().slice(0, 10);
-  } else {
-    return dateValue.slice(0, 10);
-  }
-}
-export function datetimeF(dateValue: string | Date | null | undefined): string | null {
-  if (dateValue === null || dateValue === undefined) {
-    return null;
-  } else if (dateValue instanceof Date) {
-    return dateValue.toISOString().slice(0, 19).replace("T", " ");
-  } else {
-    return dateValue.slice(0, 19);
-  }
-}
-
-export function arrayableToArray<T extends number | string | boolean>(
-  val: T | T[] | undefined,
-): T[] {
-  return val ? (Array.isArray(val) ? val : [val]) : [];
-}
-
-export type ControlledModalProps = {
-  open: boolean;
-  close: () => void;
-};
-
-export function useModal<T extends object>(
-  ModalComponent: (props: T & ControlledModalProps) => React.ReactElement,
-  defaultProps: T,
-) {
-  const [modalProps, setModalProps] = useState<T & { open: boolean }>({
-    ...defaultProps,
-    open: false,
-  });
-
-  const close = () => {
-    setModalProps({
-      ...modalProps,
-      open: false,
-    });
-  };
-
-  return {
-    open: (newProps: T) => {
-      setModalProps({
-        ...newProps,
-        open: true,
-        close,
-      });
-    },
-    modal: React.createElement(ModalComponent, {
-      ...modalProps,
-      close,
-    }),
-  };
-}
-
-export function caller<T extends Function>() {
-  let savedFunc: T | null = null;
-  return {
-    set: (func: T) => {
-      savedFunc = func;
-    },
-    call: ((...args: unknown[]) => {
-      if (savedFunc) {
-        savedFunc.call(args);
-      }
-    }) as unknown as T,
-  };
-}
-
-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 keyof any> = T extends any ? Omit<T, K> : never;
-
-export type Override<T, U> = Omit<T, keyof U> & U;

package/src/lib/index.ts

@@ -1,31 +0,0 @@
-export { Pagination } from "../components/ui/pagination";
-export { caster, fastifyCaster } from "./caster";
-export {
-  arrayableToArray,
-  // Types
-  type ControlledModalProps,
-  caller,
-  type DistributiveOmit,
-  dateF,
-  datetimeF,
-  type ErrorObj,
-  // Utilities
-  hidden,
-  numF,
-  type Override,
-  type PaginationProps,
-  paramsToSearchParams,
-  type SonamuCol,
-  searchParamsToParams,
-  sqlDateToDateString,
-  type TableColumnWidth,
-  // Navigation & Selection
-  useGoBack,
-  useListParams,
-  useModal,
-  useSelection,
-  useTypeForm,
-} from "./helpers";
-export { lazyUpload } from "./lazy-upload";
-export { useIsMobile } from "./use-mobile";
-export { cn } from "./utils";

package/src/lib/use-mobile.ts

@@ -1,19 +0,0 @@
-import * as React from "react";
-
-const MOBILE_BREAKPOINT = 768;
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-
-  return !!isMobile;
-}

package/src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}