@wheeparam/library 0.0.1

package/dist/react/index.cjs

@@ -0,0 +1,134 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react/index.ts
+var react_exports = {};
+__export(react_exports, {
+  nl2br: () => nl2br,
+  useFormLayer: () => useFormLayer,
+  useSortLayer: () => useSortLayer
+});
+module.exports = __toCommonJS(react_exports);
+
+// src/react/useFormLayer.ts
+var import_react = require("react");
+function useFormLayer() {
+  const [opened, setOpened] = (0, import_react.useState)(false);
+  const [mode, setMode] = (0, import_react.useState)(null);
+  const [id, setId] = (0, import_react.useState)(null);
+  const [parentId, setParentId] = (0, import_react.useState)(null);
+  const [payload, setPayload] = (0, import_react.useState)(null);
+  const open = (0, import_react.useCallback)(
+    (args) => {
+      setMode(args.mode);
+      setId(args.id ?? null);
+      setParentId(args.parentId ?? null);
+      setPayload(args.payload ?? null);
+      setOpened(true);
+    },
+    []
+  );
+  const openCreate = (0, import_react.useCallback)((pId, pl) => {
+    open({ mode: "create", parentId: pId ?? null, id: null, payload: pl ?? null });
+  }, [open]);
+  const openEdit = (0, import_react.useCallback)((editId, pId, pl) => {
+    open({ mode: "edit", id: editId, parentId: pId ?? null, payload: pl ?? null });
+  }, [open]);
+  const close = (0, import_react.useCallback)(() => {
+    setOpened(false);
+    setMode(null);
+    setId(null);
+    setParentId(null);
+    setPayload(null);
+  }, []);
+  return {
+    opened,
+    mode,
+    id,
+    parentId,
+    payload,
+    open,
+    openCreate,
+    openEdit,
+    close,
+    setOpened,
+    setId,
+    setParentId,
+    setMode,
+    setPayload
+  };
+}
+
+// src/react/useSortLayer.ts
+var import_react2 = require("react");
+function useSortLayer(props) {
+  const { list, setList, onSave, clone } = props;
+  const [enabled, setEnabled] = (0, import_react2.useState)(false);
+  const backupRef = (0, import_react2.useRef)(null);
+  const cloneFn = (0, import_react2.useMemo)(() => {
+    return clone ?? ((items) => items.slice());
+  }, [clone]);
+  const start = (0, import_react2.useCallback)(() => {
+    backupRef.current = cloneFn(list);
+    setEnabled(true);
+  }, [cloneFn, list]);
+  const cancel = (0, import_react2.useCallback)(() => {
+    if (backupRef.current) {
+      setList(backupRef.current);
+    }
+    backupRef.current = null;
+    setEnabled(false);
+  }, [setList]);
+  const save = (0, import_react2.useCallback)(() => {
+    setEnabled(false);
+    backupRef.current = null;
+    onSave?.(cloneFn(list));
+  }, [cloneFn, list, onSave]);
+  return { start, cancel, save, enabled };
+}
+
+// src/react/nl2br.tsx
+var import_jsx_runtime = __toESM(require("react/jsx-runtime"), 1);
+function nl2br(text) {
+  const newlineRegex = /(\r\n|\r|\n)/g;
+  if (!text) return "";
+  const props = {};
+  return text.split(newlineRegex).map(function(line, index) {
+    if (line.match(newlineRegex)) {
+      return import_jsx_runtime.default.jsx("br", { key: index, ...props });
+    }
+    return line;
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  nl2br,
+  useFormLayer,
+  useSortLayer
+});

package/dist/react/index.d.cts

@@ -0,0 +1,178 @@
+import * as react from 'react';
+import { Dispatch, SetStateAction } from 'react';
+
+/**
+ * @packageDocumentation
+ * 모달/레이어 상태(열림 여부 + 컨텍스트 파라미터)를 관리하는 React Hook
+ */
+/**
+ * 레이어(모달)의 동작 모드
+ * - create: 생성 모드
+ * - edit: 수정 모드
+ */
+type FormLayerMode = "create" | "edit";
+/**
+ * useFormLayer가 반환하는 제어 객체 타입
+ *
+ * @template T id/parentId의 타입 (string | number)
+ * @template P payload 타입 (추가 컨텍스트가 필요할 때 사용)
+ */
+type UseFormLayerReturn<T extends string | number, P> = {
+    /** 모달 열림 여부 */
+    opened: boolean;
+    /** 현재 모달 모드(create/edit). 닫혀있으면 null */
+    mode: FormLayerMode | null;
+    /** edit 모드에서 주로 쓰는 PK. create 모드일 때는 보통 null */
+    id: T | null;
+    /** 부모 컨텍스트가 있는 경우 사용 (예: 트리에서 특정 노드 아래 생성) */
+    parentId: T | null;
+    /** 모달을 열 때 함께 넘기고 싶은 추가 컨텍스트 (선택) */
+    payload: P | null;
+    /**
+     * 모달을 연다(일반형)
+     * @example
+     * layer.open({ mode: "edit", id: 10 })
+     * layer.open({ mode: "create", parentId: 5 })
+     */
+    open: (args: {
+        mode: FormLayerMode;
+        id?: T | null;
+        parentId?: T | null;
+        payload?: P | null;
+    }) => void;
+    /** 모달을 닫고 내부 상태(id/parentId/payload 등)를 초기화한다 */
+    close: () => void;
+    /**
+     * 생성 모드로 모달을 연다(단축형)
+     * @example
+     * layer.openCreate()
+     * layer.openCreate(3) // parentId=3 아래 생성
+     */
+    openCreate: (parentId?: T | null, payload?: P | null) => void;
+    /**
+     * 수정 모드로 모달을 연다(단축형)
+     * @example
+     * layer.openEdit(10)
+     * layer.openEdit(10, 3) // id=10 편집, parentId=3 컨텍스트
+     */
+    openEdit: (id: T, parentId?: T | null, payload?: P | null) => void;
+    /** 필요 시 수동 제어를 위한 raw setter들 */
+    setOpened: React.Dispatch<React.SetStateAction<boolean>>;
+    setId: React.Dispatch<React.SetStateAction<T | null>>;
+    setParentId: React.Dispatch<React.SetStateAction<T | null>>;
+    setMode: React.Dispatch<React.SetStateAction<FormLayerMode | null>>;
+    setPayload: React.Dispatch<React.SetStateAction<P | null>>;
+};
+/**
+ * 모달/레이어 상태를 관리하는 React 훅
+ *
+ * “모달 open state + 전달 파라미터 state”를 매번 만들기 귀찮을 때 쓰는 목적에 최적화되어 있다.
+ * create/edit 모드, id/parentId, payload(선택)를 한 번에 관리한다.
+ *
+ * @returns 레이어 제어 객체
+ *
+ * @example
+ * const layer = useFormLayer<number>()
+ * layer.openCreate()
+ * layer.openEdit(10)
+ */
+declare function useFormLayer<T extends string | number = string, P = never>(): UseFormLayerReturn<T, P>;
+
+/**
+ * @packageDocumentation
+ * 목록의 “정렬 모드”를 관리하는 React Hook
+ *
+ * - start(): 현재 list를 백업하고 정렬모드(enabled=true)로 진입
+ * - cancel(): 백업본으로 list를 복구하고 정렬모드 종료
+ * - save(): 정렬모드를 종료하고 onSave(list)를 호출
+ */
+
+/**
+ * useSortLayer 입력 Props
+ *
+ * @template T 목록 아이템 타입
+ */
+type UseSortLayerProps<T> = {
+    /** 현재 목록 */
+    list: T[];
+    /** 목록 setter */
+    setList: Dispatch<SetStateAction<T[]>>;
+    /** 저장 콜백(선택) */
+    onSave?: (items: T[]) => void;
+    /**
+     * 스냅샷 복사 방식 (기본 shallow)
+     * - shallow: [...list]
+     * - deep: structuredClone(list) (브라우저 지원 필요)
+     * - custom: (items) => ...
+     */
+    clone?: (items: T[]) => T[];
+};
+/**
+ * useSortLayer 반환 타입
+ */
+type UseSortLayerReturn = {
+    /** 정렬모드 시작 (현재 list 스냅샷 백업) */
+    start: () => void;
+    /** 정렬모드 취소 (백업본으로 복구) */
+    cancel: () => void;
+    /** 정렬모드 저장(종료) */
+    save: () => void;
+    /** 정렬모드 여부 */
+    enabled: boolean;
+};
+/**
+ * 목록 정렬 모드를 관리하는 훅
+ *
+ * start() 호출 시 현재 목록을 백업하고 정렬모드로 진입한다.
+ * cancel() 호출 시 원래 상태로 복구된다.
+ * save() 호출 시 onSave가 실행된다.
+ *
+ * @example
+ * const sort = useSortLayer({ list, setList, onSave })
+ * sort.start()
+ * // ... drag & drop 등으로 list 순서 변경 ...
+ * sort.cancel()
+ * // 또는
+ * sort.save()
+ */
+declare function useSortLayer<T>(props: UseSortLayerProps<T>): UseSortLayerReturn;
+
+/**
+ * 문자열의 줄바꿈(\n)을 `<br />` 요소로 변환한다.
+ *
+ * 서버 컴포넌트 / 클라이언트 컴포넌트 모두에서 안전하게 사용 가능하다.
+ *
+ * @param text 줄바꿈을 포함할 수 있는 문자열
+ * @returns ReactNode 배열 (문자열 + `<br />`)
+ *
+ * @example 기본 사용
+ * ```tsx
+ * import { nl2br } from "@your-scope/toolkit/react";
+ *
+ * export default function Page() {
+ *   return (
+ *     <div>
+ *       {nl2br("첫줄\n둘째줄\n셋째줄")}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example API 에러 메시지 출력
+ * ```tsx
+ * Swal.fire({
+ *   title: "오류 발생",
+ *   html: nl2br(message),
+ * });
+ * ```
+ *
+ * @example textarea 미리보기
+ * ```tsx
+ * <div className="preview">
+ *   {nl2br(form.content)}
+ * </div>
+ * ```
+ */
+declare function nl2br(text: string | null | undefined): "" | (string | react.ReactElement<unknown, string | react.JSXElementConstructor<any>>)[];
+
+export { type FormLayerMode, type UseFormLayerReturn, type UseSortLayerProps, type UseSortLayerReturn, nl2br, useFormLayer, useSortLayer };

package/dist/react/index.d.ts

@@ -0,0 +1,178 @@
+import * as react from 'react';
+import { Dispatch, SetStateAction } from 'react';
+
+/**
+ * @packageDocumentation
+ * 모달/레이어 상태(열림 여부 + 컨텍스트 파라미터)를 관리하는 React Hook
+ */
+/**
+ * 레이어(모달)의 동작 모드
+ * - create: 생성 모드
+ * - edit: 수정 모드
+ */
+type FormLayerMode = "create" | "edit";
+/**
+ * useFormLayer가 반환하는 제어 객체 타입
+ *
+ * @template T id/parentId의 타입 (string | number)
+ * @template P payload 타입 (추가 컨텍스트가 필요할 때 사용)
+ */
+type UseFormLayerReturn<T extends string | number, P> = {
+    /** 모달 열림 여부 */
+    opened: boolean;
+    /** 현재 모달 모드(create/edit). 닫혀있으면 null */
+    mode: FormLayerMode | null;
+    /** edit 모드에서 주로 쓰는 PK. create 모드일 때는 보통 null */
+    id: T | null;
+    /** 부모 컨텍스트가 있는 경우 사용 (예: 트리에서 특정 노드 아래 생성) */
+    parentId: T | null;
+    /** 모달을 열 때 함께 넘기고 싶은 추가 컨텍스트 (선택) */
+    payload: P | null;
+    /**
+     * 모달을 연다(일반형)
+     * @example
+     * layer.open({ mode: "edit", id: 10 })
+     * layer.open({ mode: "create", parentId: 5 })
+     */
+    open: (args: {
+        mode: FormLayerMode;
+        id?: T | null;
+        parentId?: T | null;
+        payload?: P | null;
+    }) => void;
+    /** 모달을 닫고 내부 상태(id/parentId/payload 등)를 초기화한다 */
+    close: () => void;
+    /**
+     * 생성 모드로 모달을 연다(단축형)
+     * @example
+     * layer.openCreate()
+     * layer.openCreate(3) // parentId=3 아래 생성
+     */
+    openCreate: (parentId?: T | null, payload?: P | null) => void;
+    /**
+     * 수정 모드로 모달을 연다(단축형)
+     * @example
+     * layer.openEdit(10)
+     * layer.openEdit(10, 3) // id=10 편집, parentId=3 컨텍스트
+     */
+    openEdit: (id: T, parentId?: T | null, payload?: P | null) => void;
+    /** 필요 시 수동 제어를 위한 raw setter들 */
+    setOpened: React.Dispatch<React.SetStateAction<boolean>>;
+    setId: React.Dispatch<React.SetStateAction<T | null>>;
+    setParentId: React.Dispatch<React.SetStateAction<T | null>>;
+    setMode: React.Dispatch<React.SetStateAction<FormLayerMode | null>>;
+    setPayload: React.Dispatch<React.SetStateAction<P | null>>;
+};
+/**
+ * 모달/레이어 상태를 관리하는 React 훅
+ *
+ * “모달 open state + 전달 파라미터 state”를 매번 만들기 귀찮을 때 쓰는 목적에 최적화되어 있다.
+ * create/edit 모드, id/parentId, payload(선택)를 한 번에 관리한다.
+ *
+ * @returns 레이어 제어 객체
+ *
+ * @example
+ * const layer = useFormLayer<number>()
+ * layer.openCreate()
+ * layer.openEdit(10)
+ */
+declare function useFormLayer<T extends string | number = string, P = never>(): UseFormLayerReturn<T, P>;
+
+/**
+ * @packageDocumentation
+ * 목록의 “정렬 모드”를 관리하는 React Hook
+ *
+ * - start(): 현재 list를 백업하고 정렬모드(enabled=true)로 진입
+ * - cancel(): 백업본으로 list를 복구하고 정렬모드 종료
+ * - save(): 정렬모드를 종료하고 onSave(list)를 호출
+ */
+
+/**
+ * useSortLayer 입력 Props
+ *
+ * @template T 목록 아이템 타입
+ */
+type UseSortLayerProps<T> = {
+    /** 현재 목록 */
+    list: T[];
+    /** 목록 setter */
+    setList: Dispatch<SetStateAction<T[]>>;
+    /** 저장 콜백(선택) */
+    onSave?: (items: T[]) => void;
+    /**
+     * 스냅샷 복사 방식 (기본 shallow)
+     * - shallow: [...list]
+     * - deep: structuredClone(list) (브라우저 지원 필요)
+     * - custom: (items) => ...
+     */
+    clone?: (items: T[]) => T[];
+};
+/**
+ * useSortLayer 반환 타입
+ */
+type UseSortLayerReturn = {
+    /** 정렬모드 시작 (현재 list 스냅샷 백업) */
+    start: () => void;
+    /** 정렬모드 취소 (백업본으로 복구) */
+    cancel: () => void;
+    /** 정렬모드 저장(종료) */
+    save: () => void;
+    /** 정렬모드 여부 */
+    enabled: boolean;
+};
+/**
+ * 목록 정렬 모드를 관리하는 훅
+ *
+ * start() 호출 시 현재 목록을 백업하고 정렬모드로 진입한다.
+ * cancel() 호출 시 원래 상태로 복구된다.
+ * save() 호출 시 onSave가 실행된다.
+ *
+ * @example
+ * const sort = useSortLayer({ list, setList, onSave })
+ * sort.start()
+ * // ... drag & drop 등으로 list 순서 변경 ...
+ * sort.cancel()
+ * // 또는
+ * sort.save()
+ */
+declare function useSortLayer<T>(props: UseSortLayerProps<T>): UseSortLayerReturn;
+
+/**
+ * 문자열의 줄바꿈(\n)을 `<br />` 요소로 변환한다.
+ *
+ * 서버 컴포넌트 / 클라이언트 컴포넌트 모두에서 안전하게 사용 가능하다.
+ *
+ * @param text 줄바꿈을 포함할 수 있는 문자열
+ * @returns ReactNode 배열 (문자열 + `<br />`)
+ *
+ * @example 기본 사용
+ * ```tsx
+ * import { nl2br } from "@your-scope/toolkit/react";
+ *
+ * export default function Page() {
+ *   return (
+ *     <div>
+ *       {nl2br("첫줄\n둘째줄\n셋째줄")}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example API 에러 메시지 출력
+ * ```tsx
+ * Swal.fire({
+ *   title: "오류 발생",
+ *   html: nl2br(message),
+ * });
+ * ```
+ *
+ * @example textarea 미리보기
+ * ```tsx
+ * <div className="preview">
+ *   {nl2br(form.content)}
+ * </div>
+ * ```
+ */
+declare function nl2br(text: string | null | undefined): "" | (string | react.ReactElement<unknown, string | react.JSXElementConstructor<any>>)[];
+
+export { type FormLayerMode, type UseFormLayerReturn, type UseSortLayerProps, type UseSortLayerReturn, nl2br, useFormLayer, useSortLayer };

package/dist/react/index.js

@@ -0,0 +1,95 @@
+// src/react/useFormLayer.ts
+import { useCallback, useState } from "react";
+function useFormLayer() {
+  const [opened, setOpened] = useState(false);
+  const [mode, setMode] = useState(null);
+  const [id, setId] = useState(null);
+  const [parentId, setParentId] = useState(null);
+  const [payload, setPayload] = useState(null);
+  const open = useCallback(
+    (args) => {
+      setMode(args.mode);
+      setId(args.id ?? null);
+      setParentId(args.parentId ?? null);
+      setPayload(args.payload ?? null);
+      setOpened(true);
+    },
+    []
+  );
+  const openCreate = useCallback((pId, pl) => {
+    open({ mode: "create", parentId: pId ?? null, id: null, payload: pl ?? null });
+  }, [open]);
+  const openEdit = useCallback((editId, pId, pl) => {
+    open({ mode: "edit", id: editId, parentId: pId ?? null, payload: pl ?? null });
+  }, [open]);
+  const close = useCallback(() => {
+    setOpened(false);
+    setMode(null);
+    setId(null);
+    setParentId(null);
+    setPayload(null);
+  }, []);
+  return {
+    opened,
+    mode,
+    id,
+    parentId,
+    payload,
+    open,
+    openCreate,
+    openEdit,
+    close,
+    setOpened,
+    setId,
+    setParentId,
+    setMode,
+    setPayload
+  };
+}
+
+// src/react/useSortLayer.ts
+import { useCallback as useCallback2, useMemo, useRef, useState as useState2 } from "react";
+function useSortLayer(props) {
+  const { list, setList, onSave, clone } = props;
+  const [enabled, setEnabled] = useState2(false);
+  const backupRef = useRef(null);
+  const cloneFn = useMemo(() => {
+    return clone ?? ((items) => items.slice());
+  }, [clone]);
+  const start = useCallback2(() => {
+    backupRef.current = cloneFn(list);
+    setEnabled(true);
+  }, [cloneFn, list]);
+  const cancel = useCallback2(() => {
+    if (backupRef.current) {
+      setList(backupRef.current);
+    }
+    backupRef.current = null;
+    setEnabled(false);
+  }, [setList]);
+  const save = useCallback2(() => {
+    setEnabled(false);
+    backupRef.current = null;
+    onSave?.(cloneFn(list));
+  }, [cloneFn, list, onSave]);
+  return { start, cancel, save, enabled };
+}
+
+// src/react/nl2br.tsx
+import jsxRuntime from "react/jsx-runtime";
+function nl2br(text) {
+  const newlineRegex = /(\r\n|\r|\n)/g;
+  if (!text) return "";
+  const props = {};
+  return text.split(newlineRegex).map(function(line, index) {
+    if (line.match(newlineRegex)) {
+      return jsxRuntime.jsx("br", { key: index, ...props });
+    }
+    return line;
+  });
+}
+export {
+  nl2br,
+  useFormLayer,
+  useSortLayer
+};