@js-empire/emperor-ui 1.1.0 → 1.2.0

package/src/types/components/molecules/scaffold/scaffold.ts

@@ -1,4 +1,4 @@
-import type { SharedComponentProps } from "@types";
+import type { SharedComponentProps } from "@/types";
 
 export type ScaffoldClassnames = {
   base?: string;

package/src/types/components/molecules/side-bar/side-bar.ts

@@ -1,5 +1,5 @@
 import { ButtonProps } from "@heroui/react";
-import type { NavigationItem, SharedComponentProps } from "@types";
+import type { NavigationItem, SharedComponentProps } from "@/types";
 import type { ReactNode } from "react";
 
 export type SideBarVariant = "default" | "compact";

package/src/types/components/templates/landing-page.ts

@@ -1,4 +1,4 @@
-import type { SharedComponentProps } from "@types";
+import type { SharedComponentProps } from "@/types";
 
 export type LandingPageClassnames = {
   base?: string;

package/src/types/context/navigation.ts

@@ -1,4 +1,4 @@
-import { NavigationItem } from "@types";
+import { NavigationItem } from "@/types";
 import { ReactNode } from "react";
 
 export type NavigationContextState = {

package/src/utils/compress-images.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { FileObject } from "@types";
+import { FileObject } from "@/types";
 /**
  * Compress an image to reduce its size
  *

package/src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from "./cn";
 export * from "./storybook";
 export * from "./compress-images";
+export * from "./uploader";

package/src/utils/storybook.tsx

@@ -1,6 +1,6 @@
-import { EmperorUIProvider } from "@providers";
-import { defaultEmperorUIConfig } from "@constants";
-import { EmperorUIConfig } from "@types";
+import { EmperorUIProvider } from "@/providers";
+import { defaultEmperorUIConfig } from "@/constants";
+import { EmperorUIConfig } from "@/types";
 
 export const getStorybookDecorators = ({
   config = defaultEmperorUIConfig,

package/src/utils/uploader.ts

@@ -0,0 +1,148 @@
+import {
+  ALLOWED_DOC_TYPES,
+  ALLOWED_IMAGES_TYPES,
+  ALLOWED_PDF_TYPES,
+  ONE_MEGABYTE,
+} from "@/constants";
+import { FileObject, FileType } from "@/types";
+import { addToast } from "@heroui/react";
+import { compressImage } from "@/utils";
+import { Dispatch, SetStateAction } from "react";
+
+// get the corresponding FileType giving the extension of the uploaded file
+export const mapFileType = (fileType: string): FileType | null => {
+  if (ALLOWED_IMAGES_TYPES.includes(fileType)) return "image";
+  if (ALLOWED_PDF_TYPES.includes(fileType)) return "pdf";
+  if (ALLOWED_DOC_TYPES.includes(fileType)) return "doc";
+
+  return null;
+};
+
+// get the allowed file types according to the specified types from the 'fileTypes' array
+export const getAllowedTypes = (fileTypes: FileType[]): string[] => {
+  const allowedTypes: string[] = [];
+
+  fileTypes.forEach((fileType) => {
+    if (fileType === "image") allowedTypes.push(...ALLOWED_IMAGES_TYPES);
+    if (fileType === "doc") allowedTypes.push(...ALLOWED_DOC_TYPES);
+    if (fileType === "pdf") allowedTypes.push(...ALLOWED_PDF_TYPES);
+  });
+
+  return allowedTypes;
+};
+
+export const isFileDuplicated = ({
+  files,
+  fileName,
+}: {
+  files: FileObject[];
+  fileName: string;
+}): boolean => files?.filter(({ file }) => file?.name === fileName)?.length > 0;
+
+// check if the file size exceeds the maxFileSize
+export const isMaxFileSizeExceeded = ({
+  fileSize,
+  maxFileSize,
+}: {
+  fileSize: number;
+  maxFileSize: number;
+}): boolean => fileSize > maxFileSize * 1024;
+
+export async function validateUploadedFiles({
+  uploadedFiles,
+  maxFileSize = ONE_MEGABYTE * 10,
+  compressFiles,
+  locale,
+  preventDuplicates,
+  files,
+}: {
+  uploadedFiles: File[];
+  maxFileSize?: number;
+  compressFiles?: boolean;
+  locale?: Record<string, string> | undefined;
+  preventDuplicates?: boolean;
+  files: FileObject[];
+}) {
+  let isInValid = false;
+
+  const compressedFiles = await Promise.all(
+    uploadedFiles?.map(async (file) => {
+      if (isMaxFileSizeExceeded({ fileSize: file?.size, maxFileSize })) {
+        addToast({
+          title: locale?.maxSizeExceededError
+            .replace("MAX_FILE_SIZE", (maxFileSize / 1024 || 0)?.toString())
+            .replace(
+              "UPLOADED_FILE_SIZE",
+              (file?.size / 1024 / 1024 || 0)?.toFixed(1)?.toString(),
+            ),
+        });
+
+        if (compressFiles) {
+          return (await compressImage({ file }))?.file;
+        } else {
+          isInValid = true;
+          return file;
+        }
+      }
+
+      if (
+        preventDuplicates &&
+        isFileDuplicated({ fileName: file?.name, files })
+      ) {
+        addToast({
+          title: locale?.duplicatesDenied,
+        });
+        isInValid = true;
+      }
+
+      return file;
+    }),
+  );
+
+  return {
+    compressedFiles,
+    isInValid,
+  };
+}
+
+export async function refineUploadedFiles({
+  uploadedFiles,
+  locale,
+  allowedTypes,
+  isMulti,
+  setFiles,
+}: {
+  uploadedFiles: (File | undefined)[];
+  locale?: Record<string, string> | undefined;
+  allowedTypes: string[];
+  isMulti: boolean;
+  setFiles: Dispatch<SetStateAction<FileObject[]>>;
+}) {
+  return uploadedFiles?.map((uploadedFile) => {
+    if (uploadedFile) {
+      // validate the file extension according to the allowed extensions
+      const fileType = mapFileType(uploadedFile?.type);
+      if (!fileType) {
+        addToast({
+          title: `${locale?.errorUploadedTypes} ${allowedTypes.join(", ")}`,
+        });
+        return;
+      }
+
+      // set the file to be utilized, and the image to be viewed
+      const reader = new FileReader();
+      reader.onload = () => {
+        setFiles((prevFiles) => [
+          ...(isMulti ? prevFiles : []),
+          {
+            file: uploadedFile,
+            view: reader.result as string,
+            type: fileType,
+            url: URL.createObjectURL(uploadedFile),
+          },
+        ]);
+      };
+      reader.readAsDataURL(uploadedFile);
+    }
+  });
+}

package/tsconfig.app.json

@@ -25,16 +25,7 @@
 
     "baseUrl": ".",
     "paths": {
-      "@utils": ["./src/utils"],
-      "@components": ["./src/components"],
-      "@constants": ["./src/constants"],
-      "@hooks": ["./src/hooks"],
-      "@context": ["./src/context"],
-      "@examples": ["./src/examples"],
-      "@providers": ["./src/providers"],
-      "@types": ["./src/types"],
-      "@mocks": ["./src/mocks"],
-      "@enums": ["./src/enums"]
+      "@/*": ["./src/*"]
     }
   },
   "include": [

package/vite.config.ts

@@ -20,16 +20,7 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      "@utils": path.resolve(__dirname, "./src/utils"),
-      "@components": path.resolve(__dirname, "./src/components"),
-      "@types": path.resolve(__dirname, "./src/types"),
-      "@providers": path.resolve(__dirname, "./src/providers"),
-      "@constants": path.resolve(__dirname, "./src/constants"),
-      "@hooks": path.resolve(__dirname, "./src/hooks"),
-      "@context": path.resolve(__dirname, "./src/context"),
-      "@examples": path.resolve(__dirname, "./src/examples"),
-      "@mocks": path.resolve(__dirname, "./src/mocks"),
-      "@enums": path.resolve(__dirname, "./src/enums"),
+      "@": path.resolve(__dirname, "./src"),
     },
   },
   build: {

package/vitest.shims.d.ts

@@ -1 +1 @@
-/// <reference types="@vitest/browser-playwright" />
+/// <reference types="@vitest/browser-playwright" />