dn-react-router-toolkit 0.1.4 → 0.1.6

package/dist/auth-kit/with_auth.d.mts

@@ -6,12 +6,12 @@ import '../file-kit/object_storage.mjs';
 import '@aws-sdk/client-s3';
 import './repository.mjs';
 
-type Fn<T extends LoaderFunctionArgs | ActionFunctionArgs> = (arg: T) => Promise<unknown> | unknown;
-type InputFN = (auth?: JWTPayload) => Fn<LoaderFunctionArgs> | Fn<ActionFunctionArgs>;
-type WithAuthHandler<T extends LoaderFunctionArgs | ActionFunctionArgs> = (fn: InputFN) => Fn<T>;
-declare function createWithAuthHandler<T extends LoaderFunctionArgs | ActionFunctionArgs>({ JWT_MANAGER, AUTH, }: {
+type Handler<T extends LoaderFunctionArgs | ActionFunctionArgs> = (arg: T) => Promise<unknown> | unknown;
+type InputFN = (auth?: JWTPayload) => Handler<LoaderFunctionArgs> | Handler<ActionFunctionArgs>;
+type WithAuthHandler<T extends LoaderFunctionArgs | ActionFunctionArgs> = (fn: InputFN) => Handler<T>;
+declare function createWithAuthHandler<T extends LoaderFunctionArgs | ActionFunctionArgs>({ JWT_MANAGER, AUTH }: {
     JWT_MANAGER: JWTManager;
     AUTH: AuthService;
-}): WithAuthHandler<T>;
+}): <THandler extends Handler<T>>(fn: (auth?: JWTPayload) => THandler) => THandler;
 
 export { type WithAuthHandler, createWithAuthHandler };

package/dist/auth-kit/with_auth.d.ts

@@ -6,12 +6,12 @@ import '../file-kit/object_storage.js';
 import '@aws-sdk/client-s3';
 import './repository.js';
 
-type Fn<T extends LoaderFunctionArgs | ActionFunctionArgs> = (arg: T) => Promise<unknown> | unknown;
-type InputFN = (auth?: JWTPayload) => Fn<LoaderFunctionArgs> | Fn<ActionFunctionArgs>;
-type WithAuthHandler<T extends LoaderFunctionArgs | ActionFunctionArgs> = (fn: InputFN) => Fn<T>;
-declare function createWithAuthHandler<T extends LoaderFunctionArgs | ActionFunctionArgs>({ JWT_MANAGER, AUTH, }: {
+type Handler<T extends LoaderFunctionArgs | ActionFunctionArgs> = (arg: T) => Promise<unknown> | unknown;
+type InputFN = (auth?: JWTPayload) => Handler<LoaderFunctionArgs> | Handler<ActionFunctionArgs>;
+type WithAuthHandler<T extends LoaderFunctionArgs | ActionFunctionArgs> = (fn: InputFN) => Handler<T>;
+declare function createWithAuthHandler<T extends LoaderFunctionArgs | ActionFunctionArgs>({ JWT_MANAGER, AUTH }: {
     JWT_MANAGER: JWTManager;
     AUTH: AuthService;
-}): WithAuthHandler<T>;
+}): <THandler extends Handler<T>>(fn: (auth?: JWTPayload) => THandler) => THandler;
 
 export { type WithAuthHandler, createWithAuthHandler };

package/dist/auth-kit/with_auth.js

@@ -54,12 +54,9 @@ var REFRESH_TOKEN_COOKIE = (0, import_react_router.createCookie)(REFRESH_TOKEN_K
 });
 
 // src/auth-kit/with_auth.ts
-function createWithAuthHandler({
-  JWT_MANAGER,
-  AUTH
-}) {
+function createWithAuthHandler({ JWT_MANAGER, AUTH }) {
   return function(fn) {
-    return async function(arg) {
+    const handler = async function(arg) {
       const cookie = arg.request.headers.get("cookie");
       const accessToken = await ACCESS_TOKEN_COOKIE.parse(cookie);
       if (accessToken) {
@@ -98,6 +95,7 @@ function createWithAuthHandler({
       }
       return fn(void 0)(arg);
     };
+    return handler;
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/auth-kit/with_auth.mjs

@@ -18,12 +18,9 @@ var REFRESH_TOKEN_COOKIE = createCookie(REFRESH_TOKEN_KEY, {
 });
 
 // src/auth-kit/with_auth.ts
-function createWithAuthHandler({
-  JWT_MANAGER,
-  AUTH
-}) {
+function createWithAuthHandler({ JWT_MANAGER, AUTH }) {
   return function(fn) {
-    return async function(arg) {
+    const handler = async function(arg) {
       const cookie = arg.request.headers.get("cookie");
       const accessToken = await ACCESS_TOKEN_COOKIE.parse(cookie);
       if (accessToken) {
@@ -62,6 +59,7 @@ function createWithAuthHandler({
       }
       return fn(void 0)(arg);
     };
+    return handler;
   };
 }
 export {

package/dist/file-kit/client/drop_file_input.d.mts

@@ -11,18 +11,21 @@ type FileInputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTM
 };
 type FileItem<T> = {
     key: string;
+    width?: number;
+    height?: number;
     item?: T;
 };
 type Props<T> = {
     defaultValue?: T | T[];
     options?: FileUploaderOptions;
-    uploadFile?: (file: File, options?: FileUploaderOptions) => Promise<T>;
     onFileInput?: (files: File[]) => void;
     onFileUploaded?: (file: T) => Promise<void>;
-    onChange?: (files: FileItem<T>[]) => void;
+    onChange?: (files: T[]) => void;
     limit?: number;
 };
-declare function useDropFileInput<T>({ defaultValue, options, uploadFile, onFileInput, onFileUploaded, limit, }?: Props<T>): {
+declare function createUseDropFileInput<T>({ uploadFile, }: {
+    uploadFile: (file: File, options?: FileUploaderOptions) => Promise<T>;
+}): ({ defaultValue, options, onChange, onFileInput, onFileUploaded, limit, }?: Props<T>) => {
     fileIds: string[];
     files: FileItem<T>[];
     setFiles: React.Dispatch<React.SetStateAction<FileItem<T>[]>>;
@@ -30,4 +33,4 @@ declare function useDropFileInput<T>({ defaultValue, options, uploadFile, onFile
 };
 declare function DropFileMessageBox(): React.JSX.Element;
 
-export { DropFileMessageBox, type FileInputProps, type FileItem, useDropFileInput as default, useDropFileInput };
+export { DropFileMessageBox, type FileInputProps, type FileItem, createUseDropFileInput as default };

package/dist/file-kit/client/drop_file_input.d.ts

@@ -11,18 +11,21 @@ type FileInputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTM
 };
 type FileItem<T> = {
     key: string;
+    width?: number;
+    height?: number;
     item?: T;
 };
 type Props<T> = {
     defaultValue?: T | T[];
     options?: FileUploaderOptions;
-    uploadFile?: (file: File, options?: FileUploaderOptions) => Promise<T>;
     onFileInput?: (files: File[]) => void;
     onFileUploaded?: (file: T) => Promise<void>;
-    onChange?: (files: FileItem<T>[]) => void;
+    onChange?: (files: T[]) => void;
     limit?: number;
 };
-declare function useDropFileInput<T>({ defaultValue, options, uploadFile, onFileInput, onFileUploaded, limit, }?: Props<T>): {
+declare function createUseDropFileInput<T>({ uploadFile, }: {
+    uploadFile: (file: File, options?: FileUploaderOptions) => Promise<T>;
+}): ({ defaultValue, options, onChange, onFileInput, onFileUploaded, limit, }?: Props<T>) => {
     fileIds: string[];
     files: FileItem<T>[];
     setFiles: React.Dispatch<React.SetStateAction<FileItem<T>[]>>;
@@ -30,4 +33,4 @@ declare function useDropFileInput<T>({ defaultValue, options, uploadFile, onFile
 };
 declare function DropFileMessageBox(): React.JSX.Element;
 
-export { DropFileMessageBox, type FileInputProps, type FileItem, useDropFileInput as default, useDropFileInput };
+export { DropFileMessageBox, type FileInputProps, type FileItem, createUseDropFileInput as default };

package/dist/file-kit/client/drop_file_input.js

@@ -31,8 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var drop_file_input_exports = {};
 __export(drop_file_input_exports, {
   DropFileMessageBox: () => DropFileMessageBox,
-  default: () => drop_file_input_default,
-  useDropFileInput: () => useDropFileInput
+  default: () => createUseDropFileInput
 });
 module.exports = __toCommonJS(drop_file_input_exports);
 var import_react = __toESM(require("react"));
@@ -43,193 +42,256 @@ function cn(...classes) {
   return classes.filter(Boolean).join(" ").trim();
 }
 
-// src/file-kit/client/drop_file_input.tsx
-function useDropFileInput({
-  defaultValue,
-  options,
-  uploadFile,
-  onFileInput,
-  onFileUploaded,
-  limit
-} = {}) {
-  const [files, setFiles] = (0, import_react.useState)(
-    defaultValue ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]).map((v) => {
-      return {
-        key: (0, import_uuid.v4)(),
-        item: v
+// src/file-kit/client/metadata.ts
+function generateMetadata(blob) {
+  return new Promise((resolve, reject) => {
+    if (blob.type.startsWith("image/")) {
+      const img = new Image();
+      img.src = URL.createObjectURL(blob);
+      img.onload = () => {
+        resolve({
+          width: img.width,
+          height: img.height
+        });
       };
-    }).slice(0, limit ? limit : Infinity) : []
-  );
-  const fileRef = (0, import_react.useRef)([]);
-  (0, import_react.useEffect)(() => {
-    fileRef.current = files;
-  }, [files]);
-  const Component = (0, import_react.useCallback)(
-    function Component2({
-      className,
-      container = "border border-dashed border-neutral-300 rounded flex items-center justify-center",
-      draggingClassName,
-      name,
-      hideMessage = false,
-      children,
-      ...props
-    }) {
-      const [isDragging, setIsDragging] = (0, import_react.useState)(false);
-      const handleDragEnter = (0, import_react.useCallback)((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragging(true);
-      }, []);
-      const handleDragLeave = (0, import_react.useCallback)((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragging(false);
-      }, []);
-      const handleDragOver = (0, import_react.useCallback)((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }, []);
-      const handleFiles = (0, import_react.useCallback)(
-        async (files2) => {
-          if (limit && fileRef.current.length >= limit) {
-            alert(`\uD30C\uC77C\uC740 \uCD5C\uB300 ${limit}\uAC1C \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);
-            return;
-          }
-          const filteredFiles = files2.filter((file) => {
-            return true;
-          });
-          if (files2.length !== filteredFiles.length) {
-            alert(`${props.accept} \uD615\uC2DD\uC758 \uD30C\uC77C\uB9CC \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);
-          }
-          const limitedFiles = filteredFiles.slice(
-            0,
-            limit ? limit - fileRef.current.length : Infinity
-          );
-          if (limitedFiles.length === 0) {
-            return;
-          }
-          if (onFileInput) {
-            onFileInput(limitedFiles);
-          }
-          for (const file of limitedFiles) {
-            const fileItem = {
-              key: (0, import_uuid.v4)()
-            };
-            setFiles((prevFiles) => [...prevFiles, fileItem]);
-            uploadFile?.(file, options).then(async (item) => {
-              await onFileUploaded?.(item);
-              setFiles(
-                (prevFiles) => prevFiles.map((f) => {
-                  if (f.key === fileItem.key) {
-                    return {
-                      ...f,
-                      item
-                    };
-                  }
-                  return f;
-                })
-              );
-            });
-          }
-        },
-        [props.accept]
-      );
-      const handleDrop = (0, import_react.useCallback)(
-        (e) => {
+      img.onerror = reject;
+      return;
+    }
+    if (blob.type.startsWith("video/")) {
+      const video = document.createElement("video");
+      video.src = URL.createObjectURL(blob);
+      video.onloadedmetadata = () => {
+        resolve({
+          width: video.videoWidth,
+          height: video.videoHeight,
+          duration: video.duration
+        });
+      };
+      video.onerror = reject;
+      return;
+    }
+    resolve({});
+  });
+}
+
+// src/file-kit/client/drop_file_input.tsx
+function createUseDropFileInput({
+  uploadFile
+}) {
+  return function useDropFileInput({
+    defaultValue,
+    options,
+    onChange,
+    onFileInput,
+    onFileUploaded,
+    limit
+  } = {}) {
+    const [files, setFiles] = (0, import_react.useState)(
+      defaultValue ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]).map((v) => {
+        return {
+          key: (0, import_uuid.v4)(),
+          item: v
+        };
+      }).slice(0, limit ? limit : Infinity) : []
+    );
+    const fileRef = (0, import_react.useRef)([]);
+    (0, import_react.useEffect)(() => {
+      fileRef.current = files;
+      onChange?.(files.map((f) => f.item).filter(Boolean));
+    }, [files]);
+    const Component = (0, import_react.useCallback)(
+      function Component2({
+        className,
+        container = "border border-dashed border-neutral-300 rounded flex items-center justify-center",
+        draggingClassName,
+        name,
+        hideMessage = false,
+        children,
+        ...props
+      }) {
+        const [isDragging, setIsDragging] = (0, import_react.useState)(false);
+        const handleDragEnter = (0, import_react.useCallback)((e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragging(true);
+        }, []);
+        const handleDragLeave = (0, import_react.useCallback)((e) => {
           e.preventDefault();
           e.stopPropagation();
           setIsDragging(false);
-          if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-            handleFiles(Array.from(e.dataTransfer.files));
-            e.dataTransfer.clearData();
-          }
-        },
-        [handleFiles]
-      );
-      const inputRef = (0, import_react.useRef)(null);
-      const handleClick = (0, import_react.useCallback)(() => {
-        inputRef.current?.click();
-      }, []);
-      const handleKeyDown = (0, import_react.useCallback)(
-        (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            handleClick();
-          }
-        },
-        [handleClick]
-      );
-      const handleChange = (0, import_react.useCallback)(
-        (e) => {
-          if (e.target.files && e.target.files.length > 0) {
-            handleFiles(Array.from(e.target.files));
-            e.target.value = "";
-          }
-        },
-        [handleFiles]
-      );
-      return /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          className: cn(
-            className,
-            container,
-            draggingClassName?.(isDragging) || (isDragging ? "bg-neutral-300/25" : "hover:bg-neutral-300/25"),
-            "transition-colors cursor-pointer"
-          ),
-          onDragEnter: handleDragEnter,
-          onDragLeave: handleDragLeave,
-          onDragOver: handleDragOver,
-          onDrop: handleDrop,
-          onClick: handleClick,
-          onChange: handleChange,
-          onKeyDown: handleKeyDown,
-          tabIndex: 0,
-          role: "button"
-        },
-        /* @__PURE__ */ import_react.default.createElement("input", { ...props, defaultValue: "", type: "file", hidden: true, ref: inputRef }),
-        /* @__PURE__ */ import_react.default.createElement(
-          "input",
-          {
-            name,
-            hidden: true,
-            readOnly: true,
-            value: files.map((file) => {
-              if (file.item && typeof file.item === "object" && "id" in file.item) {
-                return file.item.id;
+        }, []);
+        const handleDragOver = (0, import_react.useCallback)((e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }, []);
+        const handleFiles = (0, import_react.useCallback)(
+          async (files2) => {
+            if (limit && fileRef.current.length >= limit) {
+              alert(`\uD30C\uC77C\uC740 \uCD5C\uB300 ${limit}\uAC1C \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);
+              return;
+            }
+            const filteredFiles = files2.filter((file) => {
+              if (!props.accept) {
+                return true;
               }
-              return null;
-            }).filter(Boolean).join(",")
-          }
-        ),
-        children || !(hideMessage && !isDragging) && /* @__PURE__ */ import_react.default.createElement(DropFileMessageBox, null)
-      );
-    },
-    [limit, fileRef, files, options, uploadFile, onFileInput, onFileUploaded]
-  );
-  const loadedFileIds = files.map((file) => {
-    if (file.item && typeof file.item === "object" && "id" in file.item) {
-      return file.item.id;
-    }
-    return null;
-  }).filter(Boolean);
-  const loadedFileIdsString = loadedFileIds.join(",");
-  const fileIds = (0, import_react.useMemo)(
-    () => loadedFileIdsString.split(",").filter(Boolean),
-    [loadedFileIdsString]
-  );
-  return {
-    fileIds,
-    files,
-    setFiles,
-    Component
+              const accepts = props.accept.split(",");
+              for (const accept of accepts) {
+                const trimmedAccept = accept.trim();
+                if (file.type === trimmedAccept || file.type.endsWith(trimmedAccept) || file.name.endsWith(trimmedAccept)) {
+                  return true;
+                }
+                if (trimmedAccept.endsWith("/*")) {
+                  const baseType = trimmedAccept.replace("/*", "");
+                  if (file.type.startsWith(baseType + "/")) {
+                    return true;
+                  }
+                }
+              }
+              return false;
+            });
+            if (files2.length !== filteredFiles.length) {
+              alert(`${props.accept} \uD615\uC2DD\uC758 \uD30C\uC77C\uB9CC \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);
+            }
+            const limitedFiles = filteredFiles.slice(
+              0,
+              limit ? limit - fileRef.current.length : Infinity
+            );
+            if (limitedFiles.length === 0) {
+              return;
+            }
+            if (onFileInput) {
+              onFileInput(limitedFiles);
+            }
+            for (const file of limitedFiles) {
+              const { width, height } = await generateMetadata(file);
+              const fileItem = {
+                key: (0, import_uuid.v4)(),
+                width: Number(width) || void 0,
+                height: Number(height) || void 0
+              };
+              setFiles((prevFiles) => [...prevFiles, fileItem]);
+              uploadFile?.(file, options).then(async (item) => {
+                await onFileUploaded?.(item);
+                setFiles(
+                  (prevFiles) => prevFiles.map((f) => {
+                    if (f.key === fileItem.key) {
+                      return {
+                        ...f,
+                        item
+                      };
+                    }
+                    return f;
+                  })
+                );
+              });
+            }
+          },
+          [props.accept]
+        );
+        const handleDrop = (0, import_react.useCallback)(
+          (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsDragging(false);
+            if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+              handleFiles(Array.from(e.dataTransfer.files));
+              e.dataTransfer.clearData();
+            }
+          },
+          [handleFiles]
+        );
+        const inputRef = (0, import_react.useRef)(null);
+        const handleClick = (0, import_react.useCallback)(() => {
+          inputRef.current?.click();
+        }, []);
+        const handleKeyDown = (0, import_react.useCallback)(
+          (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              handleClick();
+            }
+          },
+          [handleClick]
+        );
+        const handleChange = (0, import_react.useCallback)(
+          (e) => {
+            if (e.target.files && e.target.files.length > 0) {
+              handleFiles(Array.from(e.target.files));
+              e.target.value = "";
+            }
+          },
+          [handleFiles]
+        );
+        return /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: cn(
+              className,
+              container,
+              draggingClassName?.(isDragging) || (isDragging ? "bg-neutral-300/25" : "hover:bg-neutral-300/25"),
+              "transition-colors cursor-pointer"
+            ),
+            onDragEnter: handleDragEnter,
+            onDragLeave: handleDragLeave,
+            onDragOver: handleDragOver,
+            onDrop: handleDrop,
+            onClick: handleClick,
+            onChange: handleChange,
+            onKeyDown: handleKeyDown,
+            tabIndex: 0,
+            role: "button"
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            "input",
+            {
+              ...props,
+              defaultValue: "",
+              type: "file",
+              hidden: true,
+              ref: inputRef
+            }
+          ),
+          /* @__PURE__ */ import_react.default.createElement(
+            "input",
+            {
+              name,
+              hidden: true,
+              readOnly: true,
+              value: files.map((file) => {
+                if (file.item && typeof file.item === "object" && "id" in file.item) {
+                  return file.item.id;
+                }
+                return null;
+              }).filter(Boolean).join(",")
+            }
+          ),
+          children || !(hideMessage && !isDragging) && /* @__PURE__ */ import_react.default.createElement(DropFileMessageBox, null)
+        );
+      },
+      [limit, fileRef, files, options, uploadFile, onFileInput, onFileUploaded]
+    );
+    const loadedFileIds = files.map((file) => {
+      if (file.item && typeof file.item === "object" && "id" in file.item) {
+        return file.item.id;
+      }
+      return null;
+    }).filter(Boolean);
+    const loadedFileIdsString = loadedFileIds.join(",");
+    const fileIds = (0, import_react.useMemo)(
+      () => loadedFileIdsString.split(",").filter(Boolean),
+      [loadedFileIdsString]
+    );
+    return {
+      fileIds,
+      files,
+      setFiles,
+      Component
+    };
   };
 }
 function DropFileMessageBox() {
   return /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm pointer-events-none flex justify-center items-center" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col items-center" }, /* @__PURE__ */ import_react.default.createElement("span", null, "\uD30C\uC77C\uC744 \uC5EC\uAE30\uB85C \uB04C\uC5B4\uB2E4 \uB193\uAC70\uB098 \uD074\uB9AD\uD574\uC11C \uC120\uD0DD\uD574 \uC8FC\uC138\uC694")));
 }
-var drop_file_input_default = useDropFileInput;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  DropFileMessageBox,
-  useDropFileInput
+  DropFileMessageBox
 });