dn-react-router-toolkit 0.1.0 → 0.1.2

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

@@ -0,0 +1,235 @@
+"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/file-kit/client/drop_file_input.tsx
+var drop_file_input_exports = {};
+__export(drop_file_input_exports, {
+  DropFileMessageBox: () => DropFileMessageBox,
+  default: () => drop_file_input_default,
+  useDropFileInput: () => useDropFileInput
+});
+module.exports = __toCommonJS(drop_file_input_exports);
+var import_react = __toESM(require("react"));
+var import_uuid = require("uuid");
+
+// src/cn.ts
+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
+      };
+    }).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) => {
+          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
+});

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

@@ -0,0 +1,205 @@
+// src/file-kit/client/drop_file_input.tsx
+import React, {
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+  useMemo
+} from "react";
+import { v4 } from "uuid";
+
+// src/cn.ts
+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] = useState(
+    defaultValue ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]).map((v) => {
+      return {
+        key: v4(),
+        item: v
+      };
+    }).slice(0, limit ? limit : Infinity) : []
+  );
+  const fileRef = useRef([]);
+  useEffect(() => {
+    fileRef.current = files;
+  }, [files]);
+  const Component = 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] = useState(false);
+      const handleDragEnter = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(true);
+      }, []);
+      const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+      }, []);
+      const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }, []);
+      const handleFiles = 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: 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 = 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 = useRef(null);
+      const handleClick = useCallback(() => {
+        inputRef.current?.click();
+      }, []);
+      const handleKeyDown = useCallback(
+        (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            handleClick();
+          }
+        },
+        [handleClick]
+      );
+      const handleChange = useCallback(
+        (e) => {
+          if (e.target.files && e.target.files.length > 0) {
+            handleFiles(Array.from(e.target.files));
+            e.target.value = "";
+          }
+        },
+        [handleFiles]
+      );
+      return /* @__PURE__ */ React.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__ */ React.createElement("input", { ...props, defaultValue: "", type: "file", hidden: true, ref: inputRef }),
+        /* @__PURE__ */ React.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__ */ React.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 = useMemo(
+    () => loadedFileIdsString.split(",").filter(Boolean),
+    [loadedFileIdsString]
+  );
+  return {
+    fileIds,
+    files,
+    setFiles,
+    Component
+  };
+}
+function DropFileMessageBox() {
+  return /* @__PURE__ */ React.createElement("div", { className: "text-sm pointer-events-none flex justify-center items-center" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center" }, /* @__PURE__ */ React.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;
+export {
+  DropFileMessageBox,
+  drop_file_input_default as default,
+  useDropFileInput
+};

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

@@ -0,0 +1,13 @@
+type FileUploaderOptions = {
+    metadata?: Record<string, unknown>;
+};
+declare class FileUploader {
+    endpoint: string;
+    constructor(endpoint?: string);
+    formatSize: (size: number) => string;
+    uploadFile(file: File, options?: FileUploaderOptions): Promise<any>;
+    uploadBlob(blob: Blob, name?: string, options?: FileUploaderOptions): Promise<any>;
+    deleteFile(fileId: string): Promise<boolean>;
+}
+
+export { FileUploader, type FileUploaderOptions };

package/dist/{esm/file-kit → file-kit}/client/file_uploader.d.ts

@@ -1,7 +1,7 @@
-export type FileUploaderOptions = {
+type FileUploaderOptions = {
     metadata?: Record<string, unknown>;
 };
-export declare class FileUploader {
+declare class FileUploader {
     endpoint: string;
     constructor(endpoint?: string);
     formatSize: (size: number) => string;
@@ -9,3 +9,5 @@ export declare class FileUploader {
     uploadBlob(blob: Blob, name?: string, options?: FileUploaderOptions): Promise<any>;
     deleteFile(fileId: string): Promise<boolean>;
 }
+
+export { FileUploader, type FileUploaderOptions };

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

@@ -0,0 +1,115 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/file-kit/client/file_uploader.ts
+var file_uploader_exports = {};
+__export(file_uploader_exports, {
+  FileUploader: () => FileUploader
+});
+module.exports = __toCommonJS(file_uploader_exports);
+var FileUploader = class {
+  endpoint;
+  constructor(endpoint = "/api/files") {
+    this.endpoint = endpoint;
+  }
+  formatSize = (size) => {
+    if (size < 1024) {
+      return `${size} B`;
+    }
+    if (size < 1024 * 1024) {
+      return `${(size / 1024).toFixed(2)} KB`;
+    }
+    return `${(size / (1024 * 1024)).toFixed(2)} MB`;
+  };
+  uploadFile(file, options = {}) {
+    return this.uploadBlob(file, file.name, options);
+  }
+  async uploadBlob(blob, name = "blob", options = {}) {
+    const { type, size } = blob;
+    const metadataForMedia = await new Promise(
+      (resolve, reject) => {
+        if (blob.type.startsWith("image/")) {
+          const img = new Image();
+          img.src = URL.createObjectURL(blob);
+          img.onload = () => {
+            resolve({
+              ...options.metadata,
+              width: img.width,
+              height: img.height
+            });
+          };
+          img.onerror = reject;
+          return;
+        }
+        if (blob.type.startsWith("video/")) {
+          const video = document.createElement("video");
+          video.src = URL.createObjectURL(blob);
+          video.onloadedmetadata = () => {
+            resolve({
+              ...options.metadata,
+              width: video.videoWidth,
+              height: video.videoHeight,
+              duration: video.duration
+            });
+          };
+          video.onerror = reject;
+          return;
+        }
+        resolve(options.metadata || {});
+      }
+    );
+    const res1 = await fetch(this.endpoint, {
+      method: "POST",
+      body: JSON.stringify({
+        name: name.replace(/ /g, "_"),
+        type,
+        size,
+        metadata: metadataForMedia
+      })
+    });
+    if (!res1.ok) {
+      const message = await res1.json();
+      throw new Error(message);
+    }
+    const result = await res1.json();
+    const { signedUrl, file } = result;
+    const res2 = await fetch(signedUrl, {
+      method: "PUT",
+      body: blob
+    });
+    if (!res2.ok) {
+      throw new Error(await res2.text());
+    }
+    return file;
+  }
+  async deleteFile(fileId) {
+    const res = await fetch(`${this.endpoint}/${fileId}`, {
+      method: "DELETE"
+    });
+    if (!res.ok) {
+      const { message } = await res.json();
+      throw new Error(message);
+    }
+    return true;
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FileUploader
+});

package/dist/file-kit/client/file_uploader.mjs

@@ -0,0 +1,90 @@
+// src/file-kit/client/file_uploader.ts
+var FileUploader = class {
+  endpoint;
+  constructor(endpoint = "/api/files") {
+    this.endpoint = endpoint;
+  }
+  formatSize = (size) => {
+    if (size < 1024) {
+      return `${size} B`;
+    }
+    if (size < 1024 * 1024) {
+      return `${(size / 1024).toFixed(2)} KB`;
+    }
+    return `${(size / (1024 * 1024)).toFixed(2)} MB`;
+  };
+  uploadFile(file, options = {}) {
+    return this.uploadBlob(file, file.name, options);
+  }
+  async uploadBlob(blob, name = "blob", options = {}) {
+    const { type, size } = blob;
+    const metadataForMedia = await new Promise(
+      (resolve, reject) => {
+        if (blob.type.startsWith("image/")) {
+          const img = new Image();
+          img.src = URL.createObjectURL(blob);
+          img.onload = () => {
+            resolve({
+              ...options.metadata,
+              width: img.width,
+              height: img.height
+            });
+          };
+          img.onerror = reject;
+          return;
+        }
+        if (blob.type.startsWith("video/")) {
+          const video = document.createElement("video");
+          video.src = URL.createObjectURL(blob);
+          video.onloadedmetadata = () => {
+            resolve({
+              ...options.metadata,
+              width: video.videoWidth,
+              height: video.videoHeight,
+              duration: video.duration
+            });
+          };
+          video.onerror = reject;
+          return;
+        }
+        resolve(options.metadata || {});
+      }
+    );
+    const res1 = await fetch(this.endpoint, {
+      method: "POST",
+      body: JSON.stringify({
+        name: name.replace(/ /g, "_"),
+        type,
+        size,
+        metadata: metadataForMedia
+      })
+    });
+    if (!res1.ok) {
+      const message = await res1.json();
+      throw new Error(message);
+    }
+    const result = await res1.json();
+    const { signedUrl, file } = result;
+    const res2 = await fetch(signedUrl, {
+      method: "PUT",
+      body: blob
+    });
+    if (!res2.ok) {
+      throw new Error(await res2.text());
+    }
+    return file;
+  }
+  async deleteFile(fileId) {
+    const res = await fetch(`${this.endpoint}/${fileId}`, {
+      method: "DELETE"
+    });
+    if (!res.ok) {
+      const { message } = await res.json();
+      throw new Error(message);
+    }
+    return true;
+  }
+};
+export {
+  FileUploader
+};

package/dist/file-kit/file_service.d.mts

@@ -0,0 +1,26 @@
+import { ObjectStorage } from './object_storage.mjs';
+import { FileRepository } from './repository.mjs';
+import '@aws-sdk/client-s3';
+
+type Params = {
+    userId?: string;
+    name: string;
+    type: string;
+    size: number;
+    metadata?: Record<string, any>;
+};
+declare class FileService<TFile> {
+    prefix: string;
+    repository: FileRepository<TFile>;
+    OBJECT_STORAGE: ObjectStorage;
+    constructor(prefix: string | undefined, { repository, OBJECT_STORAGE, }: {
+        repository: FileRepository<TFile>;
+        OBJECT_STORAGE: ObjectStorage;
+    });
+    generateSignedUrl({ userId, name, type, size, metadata }: Params): Promise<{
+        file: Awaited<TFile>;
+        signedUrl: string;
+    }>;
+}
+
+export { FileService };