dn-react-router-toolkit 0.1.8 → 0.1.10

package/dist/components/client_env.d.mts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+declare function ClientEnv({ dataKey }: {
+    dataKey?: string;
+}): React.JSX.Element;
+
+export { ClientEnv as default };

package/dist/components/client_env.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+declare function ClientEnv({ dataKey }: {
+    dataKey?: string;
+}): React.JSX.Element;
+
+export { ClientEnv as default };

package/dist/components/client_env.js

@@ -0,0 +1,50 @@
+"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/components/client_env.tsx
+var client_env_exports = {};
+__export(client_env_exports, {
+  default: () => ClientEnv
+});
+module.exports = __toCommonJS(client_env_exports);
+var import_react = __toESM(require("react"));
+var import_react_router = require("react-router");
+function ClientEnv({ dataKey = "ENV" }) {
+  const data = (0, import_react_router.useRouteLoaderData)("root");
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, data && /* @__PURE__ */ import_react.default.createElement(
+    "script",
+    {
+      dangerouslySetInnerHTML: {
+        __html: `window.process = ${JSON.stringify({
+          env: data?.[dataKey]
+        })}`
+      }
+    }
+  ));
+}

package/dist/components/client_env.mjs

@@ -0,0 +1,19 @@
+// src/components/client_env.tsx
+import React from "react";
+import { useRouteLoaderData } from "react-router";
+function ClientEnv({ dataKey = "ENV" }) {
+  const data = useRouteLoaderData("root");
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, data && /* @__PURE__ */ React.createElement(
+    "script",
+    {
+      dangerouslySetInnerHTML: {
+        __html: `window.process = ${JSON.stringify({
+          env: data?.[dataKey]
+        })}`
+      }
+    }
+  ));
+}
+export {
+  ClientEnv as default
+};

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

@@ -15,20 +15,20 @@ type FileItem<T> = {
     height?: number;
     item?: T;
 };
-type Props<T> = {
-    defaultValue?: T | T[];
+type Props<TFile> = {
+    defaultValue?: TFile | TFile[];
     options?: FileUploaderOptions;
     onFileInput?: (files: File[]) => void;
-    onFileUploaded?: (file: T) => Promise<void>;
-    onChange?: (files: T[]) => void;
+    onFileUploaded?: (file: TFile) => Promise<void>;
+    onChange?: (files: TFile[]) => void;
     limit?: number;
 };
-declare function createUseDropFileInput<T>({ uploadFile, }: {
-    uploadFile: (file: File, options?: FileUploaderOptions) => Promise<T>;
-}): ({ defaultValue, options, onChange, onFileInput, onFileUploaded, limit, }?: Props<T>) => {
+declare function createUseDropFileInput<TFile>({ uploadFile, }: {
+    uploadFile: (file: File, options?: FileUploaderOptions) => Promise<TFile>;
+}): ({ defaultValue, options, onChange, onFileInput, onFileUploaded, limit, }?: Props<TFile>) => {
     fileIds: string[];
-    files: FileItem<T>[];
-    setFiles: React.Dispatch<React.SetStateAction<FileItem<T>[]>>;
+    files: FileItem<TFile>[];
+    setFiles: React.Dispatch<React.SetStateAction<FileItem<TFile>[]>>;
     Component: ({ className, container, draggingClassName, name, hideMessage, children, ...props }: FileInputProps) => React.JSX.Element;
 };
 declare function DropFileMessageBox(): React.JSX.Element;

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

@@ -15,20 +15,20 @@ type FileItem<T> = {
     height?: number;
     item?: T;
 };
-type Props<T> = {
-    defaultValue?: T | T[];
+type Props<TFile> = {
+    defaultValue?: TFile | TFile[];
     options?: FileUploaderOptions;
     onFileInput?: (files: File[]) => void;
-    onFileUploaded?: (file: T) => Promise<void>;
-    onChange?: (files: T[]) => void;
+    onFileUploaded?: (file: TFile) => Promise<void>;
+    onChange?: (files: TFile[]) => void;
     limit?: number;
 };
-declare function createUseDropFileInput<T>({ uploadFile, }: {
-    uploadFile: (file: File, options?: FileUploaderOptions) => Promise<T>;
-}): ({ defaultValue, options, onChange, onFileInput, onFileUploaded, limit, }?: Props<T>) => {
+declare function createUseDropFileInput<TFile>({ uploadFile, }: {
+    uploadFile: (file: File, options?: FileUploaderOptions) => Promise<TFile>;
+}): ({ defaultValue, options, onChange, onFileInput, onFileUploaded, limit, }?: Props<TFile>) => {
     fileIds: string[];
-    files: FileItem<T>[];
-    setFiles: React.Dispatch<React.SetStateAction<FileItem<T>[]>>;
+    files: FileItem<TFile>[];
+    setFiles: React.Dispatch<React.SetStateAction<FileItem<TFile>[]>>;
     Component: ({ className, container, draggingClassName, name, hideMessage, children, ...props }: FileInputProps) => React.JSX.Element;
 };
 declare function DropFileMessageBox(): React.JSX.Element;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+
+type Props<TFile> = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
+    onUpload?: (files: TFile[]) => Promise<void> | void;
+};
+declare function createFileUploadButton<TFile>({ uploadFile, }: {
+    uploadFile: (file: File) => Promise<TFile>;
+}): ({ onUpload, children, className, style, ...props }: Props<TFile>) => React.JSX.Element;
+
+export { createFileUploadButton as default };

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

@@ -0,0 +1,10 @@
+import React from 'react';
+
+type Props<TFile> = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
+    onUpload?: (files: TFile[]) => Promise<void> | void;
+};
+declare function createFileUploadButton<TFile>({ uploadFile, }: {
+    uploadFile: (file: File) => Promise<TFile>;
+}): ({ onUpload, children, className, style, ...props }: Props<TFile>) => React.JSX.Element;
+
+export { createFileUploadButton as default };

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

@@ -0,0 +1,89 @@
+"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/file_upload_button.tsx
+var file_upload_button_exports = {};
+__export(file_upload_button_exports, {
+  default: () => createFileUploadButton
+});
+module.exports = __toCommonJS(file_upload_button_exports);
+var import_react = __toESM(require("react"));
+var import_react2 = require("react");
+function createFileUploadButton({
+  uploadFile
+}) {
+  return function FileUploadButton({
+    onUpload,
+    children,
+    className,
+    style,
+    ...props
+  }) {
+    const inputRef = (0, import_react2.useRef)(null);
+    const onClick = () => {
+      inputRef.current?.click();
+    };
+    const onChange = async (e) => {
+      const files = e.target.files;
+      if (files && files.length > 0) {
+        if (onUpload) {
+          try {
+            const entities = await Promise.all(
+              Array.from(files).map((file) => uploadFile(file))
+            );
+            await onUpload(entities);
+          } catch (err) {
+            console.error(err);
+            alert("\uD30C\uC77C \uC5C5\uB85C\uB4DC \uC911 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4.");
+          }
+        }
+      }
+      e.target.value = "";
+    };
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+      "input",
+      {
+        ...props,
+        type: "file",
+        ref: inputRef,
+        className: "hidden",
+        onChange
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        className,
+        style,
+        type: "button",
+        onClick
+      },
+      children
+    ));
+  };
+}

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

@@ -0,0 +1,58 @@
+// src/file-kit/client/file_upload_button.tsx
+import React from "react";
+import { useRef } from "react";
+function createFileUploadButton({
+  uploadFile
+}) {
+  return function FileUploadButton({
+    onUpload,
+    children,
+    className,
+    style,
+    ...props
+  }) {
+    const inputRef = useRef(null);
+    const onClick = () => {
+      inputRef.current?.click();
+    };
+    const onChange = async (e) => {
+      const files = e.target.files;
+      if (files && files.length > 0) {
+        if (onUpload) {
+          try {
+            const entities = await Promise.all(
+              Array.from(files).map((file) => uploadFile(file))
+            );
+            await onUpload(entities);
+          } catch (err) {
+            console.error(err);
+            alert("\uD30C\uC77C \uC5C5\uB85C\uB4DC \uC911 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4.");
+          }
+        }
+      }
+      e.target.value = "";
+    };
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        ...props,
+        type: "file",
+        ref: inputRef,
+        className: "hidden",
+        onChange
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className,
+        style,
+        type: "button",
+        onClick
+      },
+      children
+    ));
+  };
+}
+export {
+  createFileUploadButton as default
+};

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

@@ -2,12 +2,11 @@ type FileUploaderOptions = {
     metadata?: Record<string, unknown>;
     convertToWebp?: boolean;
 };
-declare class FileUploader {
+declare class FileUploader<TFile> {
     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>;
+    uploadFile(file: File, options?: FileUploaderOptions): Promise<TFile>;
+    uploadBlob(blob: Blob, name?: string, options?: FileUploaderOptions): Promise<TFile>;
     deleteFile(fileId: string): Promise<boolean>;
 }
 

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

@@ -2,12 +2,11 @@ type FileUploaderOptions = {
     metadata?: Record<string, unknown>;
     convertToWebp?: boolean;
 };
-declare class FileUploader {
+declare class FileUploader<TFile> {
     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>;
+    uploadFile(file: File, options?: FileUploaderOptions): Promise<TFile>;
+    uploadBlob(blob: Blob, name?: string, options?: FileUploaderOptions): Promise<TFile>;
     deleteFile(fileId: string): Promise<boolean>;
 }
 

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

@@ -62,19 +62,30 @@ var FileUploader = class {
   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 = {}) {
+    if (options.convertToWebp && blob.type.startsWith("image/") && blob.type !== "image/webp") {
+      const img = document.createElement("img");
+      img.src = URL.createObjectURL(blob);
+      await img.decode();
+      const canvas = document.createElement("canvas");
+      canvas.width = img.width;
+      canvas.height = img.height;
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        ctx.drawImage(img, 0, 0);
+      }
+      const webpBlob = await new Promise((resolve) => {
+        canvas.toBlob((b) => {
+          resolve(b);
+        }, "image/webp");
+      });
+      if (webpBlob) {
+        blob = webpBlob;
+      }
+    }
     const { type, size } = blob;
     const metadataForMedia = await generateMetadata(blob);
     const metadata = {

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

@@ -36,19 +36,30 @@ var FileUploader = class {
   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 = {}) {
+    if (options.convertToWebp && blob.type.startsWith("image/") && blob.type !== "image/webp") {
+      const img = document.createElement("img");
+      img.src = URL.createObjectURL(blob);
+      await img.decode();
+      const canvas = document.createElement("canvas");
+      canvas.width = img.width;
+      canvas.height = img.height;
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        ctx.drawImage(img, 0, 0);
+      }
+      const webpBlob = await new Promise((resolve) => {
+        canvas.toBlob((b) => {
+          resolve(b);
+        }, "image/webp");
+      });
+      if (webpBlob) {
+        blob = webpBlob;
+      }
+    }
     const { type, size } = blob;
     const metadataForMedia = await generateMetadata(blob);
     const metadata = {

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

@@ -0,0 +1,3 @@
+declare function formatSize(size: number): string;
+
+export { formatSize };

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

@@ -0,0 +1,3 @@
+declare function formatSize(size: number): string;
+
+export { formatSize };

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

@@ -0,0 +1,38 @@
+"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/format_size.ts
+var format_size_exports = {};
+__export(format_size_exports, {
+  formatSize: () => formatSize
+});
+module.exports = __toCommonJS(format_size_exports);
+function 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`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  formatSize
+});

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

@@ -0,0 +1,13 @@
+// src/file-kit/client/format_size.ts
+function 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`;
+}
+export {
+  formatSize
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dn-react-router-toolkit",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.mjs",
   "module": "./dist/index.js",