@js-empire/emperor-ui 1.0.0 → 1.1.0

package/src/hooks/use-uploader.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import { addToast } from "@heroui/react";
+import {
+  FileObject,
+  FileType,
+  UseUploadFileProps,
+  UseUploadFileReturn,
+} from "@types";
+import { useState } from "react";
+import { useEmperorUI } from "@hooks";
+import { compressImage } from "@utils";
+import {
+  ALLOWED_IMAGES_TYPES,
+  ALLOWED_PDF_TYPES,
+  ALLOWED_DOC_TYPES,
+  ONE_MEGABYTE,
+} from "@constants";
+
+export const useUploader = ({
+  labelContent,
+  labelId,
+  fileTypes,
+  isRequired = true,
+  isDraggable = true,
+  isMulti = false,
+  preventDuplicates = true,
+  maxCount = 5,
+  maxFileSize = ONE_MEGABYTE * 10,
+  compressFiles = false,
+  onChange = () => {},
+}: UseUploadFileProps): UseUploadFileReturn => {
+  const { config } = useEmperorUI();
+  const [files, setFiles] = useState<FileObject[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const locales = config?.interLocalization?.locales;
+  const lang = config?.interLocalization?.lang;
+
+  const locale = locales?.[lang || "en"];
+
+  // remove all uploaded files
+  const handleClearFile = (fileName?: string) => {
+    setFiles((prev) => prev?.filter((file) => file?.file?.name !== fileName));
+  };
+
+  // get the corresponding FileType giving the extension of the uploaded file
+  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
+  const getAllowedTypes = (): 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;
+  };
+
+  // check if the file size exceeds the maxFileSize
+  const isMaxFileSizeExceeded = (fileSize: number): boolean =>
+    fileSize > maxFileSize * 1024;
+
+  const isDuplicated = (name: string): boolean =>
+    files?.filter(({ file }) => file?.name === name)?.length > 0;
+
+  // handle the uploading process including the window upload and the drag-and-drop upload
+  const onInputChange = async (
+    event: React.ChangeEvent<HTMLInputElement> &
+      React.DragEvent<HTMLLabelElement>,
+  ): Promise<void> => {
+    if (
+      (!event.target.files || !event.target.files?.[0]) &&
+      (!event?.dataTransfer?.files || !event?.dataTransfer?.files[0])
+    ) {
+      addToast({
+        title: locale?.errorUploadingFile,
+      });
+      return;
+    }
+
+    // validate the file type according to the given allowed types
+    const allowedTypes = getAllowedTypes();
+
+    // verify if the files exist
+    if (!event.target.files && !event.dataTransfer.files) return;
+
+    // get the uploaded files
+    const uploadedFiles = Array.from(
+      event.target.files || event.dataTransfer.files,
+    );
+
+    // validate the files' length and prevent exceeded files only in the multiple-mode
+    if (
+      isMulti &&
+      (uploadedFiles?.length > maxCount ||
+        files?.length + uploadedFiles?.length > maxCount)
+    ) {
+      addToast({
+        title: `${locale?.maxNumImages} ${maxCount}`,
+      });
+      return;
+    }
+
+    // validate the files' types according to the given allowed types
+    if (
+      !uploadedFiles
+        ?.map((file) => file?.type)
+        ?.every((type) => allowedTypes.includes(type))
+    ) {
+      addToast({
+        title: `${locale?.errorUploadedTypes} ${allowedTypes.join(", ")}`,
+      });
+      return;
+    }
+
+    // validate the files' sizes if none of them exceeds the maximum allowed size
+    // validate files' names to ensure there are no duplicates if specified
+    let isInValid = false;
+
+    const compressedFiles = await Promise.all(
+      uploadedFiles?.map(async (file) => {
+        if (isMaxFileSizeExceeded(file?.size)) {
+          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 && isDuplicated(file?.name)) {
+          addToast({
+            title: locale?.duplicatesDenied,
+          });
+          isInValid = true;
+        }
+
+        return file;
+      }),
+    );
+
+    if (isInValid) return;
+
+    setIsLoading(true);
+
+    await Promise.all(
+      compressedFiles?.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);
+        }
+      }),
+    ).finally(() => {
+      setIsLoading(false);
+    });
+
+    setTimeout(() => {
+      onChange();
+    }, 200);
+  };
+
+  return {
+    files,
+    fileTypes,
+    labelId,
+    isRequired,
+    labelContent,
+    isDraggable,
+    isMulti,
+    handleClearFile,
+    onInputChange,
+    setFiles,
+    isLoading,
+  };
+};

package/src/index.ts

@@ -1,8 +1,12 @@
+import "./styles/globals.css";
+
 export * from "./components";
-export type * from "./types";
-export * from "./utils";
-export * from "./providers";
-export * from "./context";
-export * from "./hooks";
 export * from "./constants";
+export * from "./context";
 export * from "./examples";
+export * from "./hooks";
+export * from "./providers";
+export type * from "./types";
+export * from "./utils";
+export * from "./mocks";
+export * from "./enums";

package/src/main.tsx

@@ -0,0 +1,3 @@
+export function Main() {
+  return <div>Main</div>;
+}

package/src/mocks/header.tsx

@@ -0,0 +1,118 @@
+import { SideBarAction, NavigationItem } from "@types";
+import {
+  HelpCircleIcon,
+  HomeIcon,
+  InfoIcon,
+  LifeBuoyIcon,
+  LogOutIcon,
+  MailIcon,
+  ServerIcon,
+  SettingsIcon,
+} from "lucide-react";
+
+export const MOCK_HEADER_SUB_ITEMS: NavigationItem[] = [
+  {
+    id: "info",
+    label: "Info",
+    href: "#info",
+    Icon: InfoIcon,
+  },
+  {
+    id: "contact",
+    label: "Contact",
+    href: "#contact",
+    Icon: MailIcon,
+  },
+  {
+    id: "services",
+    label: "Services",
+    href: "#services",
+    Icon: ServerIcon,
+  },
+  {
+    id: "settings",
+    label: "Settings",
+    href: "#settings",
+    Icon: SettingsIcon,
+  },
+  {
+    id: "help",
+    label: "Help",
+    href: "#help",
+    Icon: HelpCircleIcon,
+  },
+  {
+    id: "support",
+    label: "Support",
+    href: "#support",
+    Icon: LifeBuoyIcon,
+  },
+];
+
+export const MOCK_HEADER_ITEMS: NavigationItem[] = [
+  {
+    id: "home",
+    label: "Home",
+    href: "#home",
+    Icon: HomeIcon,
+  },
+  {
+    id: "about",
+    label: "About",
+    href: "#about",
+    Icon: InfoIcon,
+  },
+  {
+    id: "contact",
+    label: "Contact",
+    href: "#contact",
+    Icon: MailIcon,
+  },
+  {
+    id: "services",
+    label: "Services",
+    href: "#services",
+    Icon: ServerIcon,
+  },
+];
+
+export const MOCK_HEADER_ITEMS_WITH_SUB_ITEMS: NavigationItem[] = [
+  {
+    id: "home",
+    label: "Home",
+    href: "#home",
+    Icon: HomeIcon,
+    subItems: MOCK_HEADER_SUB_ITEMS,
+  },
+  {
+    id: "about",
+    label: "About",
+    href: "#about",
+    Icon: InfoIcon,
+    subItems: MOCK_HEADER_SUB_ITEMS,
+  },
+  {
+    id: "contact",
+    label: "Contact",
+    href: "#contact",
+    Icon: MailIcon,
+    subItems: MOCK_HEADER_SUB_ITEMS,
+  },
+  {
+    id: "services",
+    label: "Services",
+    href: "#services",
+    Icon: ServerIcon,
+    subItems: MOCK_HEADER_SUB_ITEMS,
+  },
+];
+
+export const MOCK_HEADER_ACTIONS: SideBarAction[] = [
+  {
+    key: "logout",
+    label: "Logout",
+    color: "danger",
+    onPress: () => console.log("logout"),
+    startContent: <LogOutIcon />,
+  },
+];

package/src/mocks/index.ts

@@ -0,0 +1 @@
+export * from "./header";

package/src/providers/config-provider.tsx

@@ -0,0 +1,54 @@
+import { Scaffold } from "@components";
+import { defaultEmperorUIConfig } from "@constants";
+import { EmperorUIContext } from "@context";
+import type {
+  ConfigContextState,
+  ConfigProviderProps,
+  EmperorUIConfig,
+} from "@types";
+import { useMemo } from "react";
+
+export function ConfigProvider({
+  children,
+  config = defaultEmperorUIConfig,
+}: ConfigProviderProps) {
+  const emperorUIProviderValue: ConfigContextState = useMemo(() => {
+    const mergedConfig: EmperorUIConfig = {
+      layout: {
+        ...defaultEmperorUIConfig?.layout,
+        ...config?.layout,
+      },
+      theme: {
+        ...defaultEmperorUIConfig?.theme,
+        ...config?.theme,
+        colors: {
+          ...defaultEmperorUIConfig?.theme?.colors,
+          ...config?.theme?.colors,
+        },
+      },
+      interLocalization: {
+        ...defaultEmperorUIConfig?.interLocalization,
+        ...config?.interLocalization,
+      },
+    };
+
+    return {
+      config: mergedConfig,
+    };
+  }, [config]);
+
+  const withScaffold = config.layout?.withScaffold ?? true;
+
+  if (withScaffold)
+    return (
+      <EmperorUIContext.Provider value={emperorUIProviderValue}>
+        <Scaffold>{children}</Scaffold>
+      </EmperorUIContext.Provider>
+    );
+
+  return (
+    <EmperorUIContext.Provider value={emperorUIProviderValue}>
+      {children}
+    </EmperorUIContext.Provider>
+  );
+}

package/src/providers/emperor-ui-provider.tsx

@@ -1,31 +1,24 @@
-import type { EmperorUIContextState, EmperorUIProviderProps } from "@types";
-import { useMemo } from "react";
-import { EmperorUIContext } from "@context";
-import { defaultEmperorUIConfig } from "@constants";
-import { Scaffold } from "@components";
+import { ConfigProviderProps } from "@types";
+import { ConfigProvider, NavigationProvider } from "@providers";
+import { HeroUIProvider, ToastProvider } from "@heroui/react";
+import { Fragment } from "react";
+
+type EmperorUIProviderProps = ConfigProviderProps & {};
 
 export function EmperorUIProvider({
   children,
-  config = defaultEmperorUIConfig,
+  ...props
 }: EmperorUIProviderProps) {
-  const emperorUIProviderValue: EmperorUIContextState = useMemo(() => {
-    return {
-      config,
-    };
-  }, [config]);
-
-  const withScaffold = config.layout?.withScaffold ?? true;
-
-  if (withScaffold)
-    return (
-      <EmperorUIContext.Provider value={emperorUIProviderValue}>
-        <Scaffold>{children}</Scaffold>
-      </EmperorUIContext.Provider>
-    );
-
   return (
-    <EmperorUIContext.Provider value={emperorUIProviderValue}>
-      {children}
-    </EmperorUIContext.Provider>
+    <ConfigProvider {...props}>
+      <HeroUIProvider>
+        <NavigationProvider>
+          <Fragment>
+            <ToastProvider {...props?.config?.toast} />
+            {children}
+          </Fragment>
+        </NavigationProvider>
+      </HeroUIProvider>
+    </ConfigProvider>
   );
 }

package/src/providers/index.ts

@@ -1 +1,4 @@
+export * from "./config-provider";
 export * from "./emperor-ui-provider";
+export * from "./navigation-provider";
+export * from "./uploader-provider";

package/src/providers/navigation-provider.tsx

@@ -0,0 +1,42 @@
+import type {
+  NavigationProviderProps,
+  NavigationContextState,
+  NavigationItem,
+} from "@types";
+import { useMemo, useState } from "react";
+import { NavigationContext } from "@context";
+import { PreservedKeys } from "@enums";
+
+export function NavigationProvider({ children }: NavigationProviderProps) {
+  const [hoveredItemId, setHoveredItemId] = useState<string | null>(null);
+  const [subItems, setSubItems] = useState<NavigationItem[]>([]);
+  const [isSubItemsBoxOpen, setIsSubItemsBoxOpen] = useState(false);
+  const [subItemsBoxIsHovered, setSubItemsBoxIsHovered] = useState(false);
+
+  const navigationProviderValue: NavigationContextState = useMemo(() => {
+    return {
+      hoveredItemId,
+      subItems,
+      isSubItemsBoxOpen,
+      subItemsBoxIsHovered,
+      setHoveredItemId,
+      setSubItems,
+      setIsSubItemsBoxOpen,
+      setSubItemsBoxIsHovered,
+    };
+  }, [hoveredItemId, subItems, isSubItemsBoxOpen, subItemsBoxIsHovered]);
+
+  return (
+    <NavigationContext.Provider
+      value={navigationProviderValue}
+      data-slot="emperor-navigation-provider"
+    >
+      <div
+        id={PreservedKeys.COMPACT_SIDEBAR_ID}
+        data-slot="emperor-compact-sidebar"
+      />
+
+      {children}
+    </NavigationContext.Provider>
+  );
+}

package/src/providers/uploader-provider.tsx

@@ -0,0 +1,53 @@
+import type {
+  UploaderProviderProps,
+  UploaderContextState,
+  FileObject,
+} from "@types";
+import { useMemo, useState } from "react";
+import { UploaderContext } from "@context";
+import { useDisclosure } from "@heroui/react";
+
+export function UploaderProvider({
+  children,
+  ...props
+}: UploaderProviderProps) {
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
+  const [selectedFile, setSelectedFile] = useState<FileObject | null>(null);
+
+  const isFileViewable = useMemo(
+    () =>
+      !!selectedFile?.view &&
+      !!selectedFile?.file?.name &&
+      selectedFile?.type === "image",
+    [selectedFile],
+  );
+
+  const uploaderProviderValue: UploaderContextState = useMemo(() => {
+    return {
+      isOpen,
+      onOpen,
+      onOpenChange,
+      selectedFile,
+      setSelectedFile,
+      isFileViewable,
+      ...props,
+    };
+  }, [
+    isOpen,
+    isFileViewable,
+    selectedFile,
+    onOpen,
+    onOpenChange,
+    setSelectedFile,
+    props,
+  ]);
+
+  return (
+    <UploaderContext.Provider
+      value={uploaderProviderValue}
+      data-slot="emperor-uploader-provider"
+    >
+      {children}
+    </UploaderContext.Provider>
+  );
+}

package/src/styles/globals.css

@@ -0,0 +1,13 @@
+@import "tailwindcss";
+@plugin './hero.ts';
+@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
+@custom-variant dark (&:is(.dark *));
+
+.scrollbar-hide {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}

package/src/styles/hero.ts

@@ -0,0 +1,2 @@
+import { heroui } from "@heroui/react";
+export default heroui();

package/src/types/components/atoms/brand.ts

@@ -0,0 +1,13 @@
+import { SharedComponentProps } from "@types";
+
+export type BrandProps = SharedComponentProps & {
+  src?: string;
+  alt?: string;
+  name?: string;
+  isIconOnly?: boolean;
+  classNames?: {
+    base?: string;
+    logo?: string;
+    name?: string;
+  };
+};

package/src/types/components/atoms/column.ts

@@ -0,0 +1,3 @@
+import type { SharedComponentProps } from "@types";
+
+export type ColumnProps = SharedComponentProps & {};

package/src/types/components/atoms/container.ts

@@ -0,0 +1,3 @@
+import type { SharedComponentProps } from "@types";
+
+export type ContainerProps = SharedComponentProps & {};

package/src/types/components/atoms/index.ts

@@ -0,0 +1,6 @@
+export * from "./brand";
+export * from "./portal";
+export * from "./uploader";
+export * from "./column";
+export * from "./row";
+export * from "./container";

package/src/types/components/atoms/portal.ts

@@ -0,0 +1,6 @@
+import { SharedComponentProps } from "@types";
+
+export type PortalProps = SharedComponentProps & {
+  containerId: string;
+  isVisible?: boolean;
+};

package/src/types/components/atoms/row.ts

@@ -0,0 +1,3 @@
+import type { SharedComponentProps } from "@types";
+
+export type RowProps = SharedComponentProps & {};