@js-empire/emperor-ui 1.1.0 → 1.2.0

package/src/constants/footer.tsx

@@ -0,0 +1,157 @@
+import {
+  CopyRights,
+  Contacts,
+  QuickLink,
+  QuickLinkCollection,
+  SocialLink,
+} from "@/types";
+
+import {
+  FacebookIcon,
+  InstagramIcon,
+  LinkedinIcon,
+  TwitterIcon,
+  YoutubeIcon,
+} from "lucide-react";
+
+export const quickLinks: QuickLinkCollection[] = [
+  {
+    title: "Products",
+    links: [
+      {
+        label: "Product 1",
+        href: "/product-1",
+      },
+      {
+        label: "Product 2",
+        href: "/product-2",
+      },
+      {
+        label: "Product 3",
+        href: "/product-3",
+      },
+    ],
+  },
+  {
+    title: "Services",
+    links: [
+      {
+        label: "Service 1",
+        href: "/service-1",
+      },
+      {
+        label: "Service 2",
+        href: "/service-2",
+      },
+      {
+        label: "Service 3",
+        href: "/service-3",
+      },
+      {
+        label: "Service 4",
+        href: "/service-4",
+      },
+    ],
+  },
+  {
+    title: "Resources",
+    links: [
+      {
+        label: "Resource 1",
+        href: "/resource-1",
+      },
+    ],
+  },
+  {
+    title: "Company",
+    links: [
+      {
+        label: "About Us",
+        href: "/about-us",
+      },
+      {
+        label: "Careers",
+        href: "/careers",
+      },
+      {
+        label: "Blog",
+        href: "/blog",
+      },
+    ],
+  },
+  {
+    title: "Support",
+    links: [
+      {
+        label: "Contact Us",
+        href: "/contact-us",
+      },
+    ],
+  },
+];
+
+export const policies: QuickLink[] = [
+  {
+    label: "Privacy Policy",
+    href: "/privacy-policy",
+  },
+  {
+    label: "Terms of Service",
+    href: "/terms-of-service",
+  },
+  {
+    label: "Cookie Policy",
+    href: "/cookie-policy",
+  },
+];
+
+export const copyRights: CopyRights = {
+  year: 2026,
+  text: "All rights reserved - Emperor UI",
+};
+
+export const contacts: Contacts = {
+  mobile: "+964 770 000 0000",
+  email: "contact@emperorui.com",
+  website: "https://jsempire.com",
+  workingHours: "Monday - Friday: 9:00 AM - 5:00 PM",
+  addresses: [
+    {
+      country: "Jordan",
+      street: "Amman, Jordan",
+      city: "Amman",
+      state: "Amman",
+      zip: "11111",
+    },
+    {
+      country: "Saudi Arabia",
+      street: "Riyadh, Saudi Arabia",
+      city: "Riyadh",
+      state: "Riyadh",
+      zip: "11111",
+    },
+  ],
+};
+
+export const socialLinks: SocialLink[] = [
+  {
+    href: "https://facebook.com",
+    icon: <FacebookIcon />,
+  },
+  {
+    href: "https://twitter.com",
+    icon: <TwitterIcon />,
+  },
+  {
+    href: "https://instagram.com",
+    icon: <InstagramIcon />,
+  },
+  {
+    href: "https://linkedin.com",
+    icon: <LinkedinIcon />,
+  },
+  {
+    href: "https://youtube.com",
+    icon: <YoutubeIcon />,
+  },
+];

package/src/constants/index.ts

@@ -1,3 +1,4 @@
 export * from "./defaults";
 export * from "./fake";
 export * from "./uploader";
+export * from "./footer";

package/src/context/emperor-ui-context.ts

@@ -1,4 +1,4 @@
-import type { ConfigContextState } from "@types";
+import type { ConfigContextState } from "@/types";
 import { createContext } from "react";
 
 export const EmperorUIContext = createContext<ConfigContextState | undefined>(

package/src/context/navigation-context.ts

@@ -1,4 +1,4 @@
-import type { NavigationContextState } from "@types";
+import type { NavigationContextState } from "@/types";
 import { createContext } from "react";
 
 export const NavigationContext = createContext<

package/src/context/uploader-context.ts

@@ -1,4 +1,4 @@
-import type { UploaderContextState } from "@types";
+import type { UploaderContextState } from "@/types";
 import { createContext } from "react";
 
 export const UploaderContext = createContext<UploaderContextState | undefined>(

package/src/hooks/use-emperor-ui.ts

@@ -1,4 +1,4 @@
-import { EmperorUIContext } from "@context";
+import { EmperorUIContext } from "@/context";
 import { useContext } from "react";
 
 export function useEmperorUI() {

package/src/hooks/use-navigation.ts

@@ -1,4 +1,4 @@
-import { NavigationContext } from "@context";
+import { NavigationContext } from "@/context";
 import { useContext } from "react";
 
 export function useNavigation() {

package/src/hooks/use-uploader-context.ts

@@ -1,4 +1,4 @@
-import { UploaderContext } from "@context";
+import { UploaderContext } from "@/context";
 import { useContext } from "react";
 
 export function useUploaderContext() {

package/src/hooks/use-uploader.tsx

@@ -1,31 +1,25 @@
 "use client";
 
 import { addToast } from "@heroui/react";
-import {
-  FileObject,
-  FileType,
-  UseUploadFileProps,
-  UseUploadFileReturn,
-} from "@types";
+import { FileObject, UseUploadFileProps, UseUploadFileReturn } from "@/types";
 import { useState } from "react";
-import { useEmperorUI } from "@hooks";
-import { compressImage } from "@utils";
+import { useEmperorUI } from "@/hooks";
 import {
-  ALLOWED_IMAGES_TYPES,
-  ALLOWED_PDF_TYPES,
-  ALLOWED_DOC_TYPES,
-  ONE_MEGABYTE,
-} from "@constants";
+  validateUploadedFiles,
+  getAllowedTypes,
+  refineUploadedFiles,
+} from "@/utils";
+import { ONE_MEGABYTE } from "@/constants";
 
 export const useUploader = ({
   labelContent,
   labelId,
   fileTypes,
-  isRequired = true,
+  isRequired = false,
   isDraggable = true,
   isMulti = false,
   preventDuplicates = true,
-  maxCount = 5,
+  maxCount = 10,
   maxFileSize = ONE_MEGABYTE * 10,
   compressFiles = false,
   onChange = () => {},
@@ -39,57 +33,37 @@ export const useUploader = ({
 
   const locale = locales?.[lang || "en"];
 
-  // remove all uploaded files
+  // remove a specific uploaded file
   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;
+    // Reset the input value to allow re-uploading the same file
+    if (labelId) {
+      const input = document.getElementById(labelId) as HTMLInputElement;
+      if (input) {
+        input.value = "";
+      }
+    }
   };
 
-  // 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> => {
+  ): Promise<void | string | null> => {
+    console.log("files: ", event.target.files);
+
     if (
       (!event.target.files || !event.target.files?.[0]) &&
       (!event?.dataTransfer?.files || !event?.dataTransfer?.files[0])
     ) {
-      addToast({
+      return addToast({
         title: locale?.errorUploadingFile,
       });
-      return;
     }
 
     // validate the file type according to the given allowed types
-    const allowedTypes = getAllowedTypes();
+    const allowedTypes = getAllowedTypes(fileTypes);
 
     // verify if the files exist
     if (!event.target.files && !event.dataTransfer.files) return;
@@ -125,70 +99,26 @@ export const useUploader = ({
 
     // 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;
-      }),
-    );
+    const { compressedFiles, isInValid } = await validateUploadedFiles({
+      uploadedFiles,
+      maxFileSize,
+      compressFiles,
+      preventDuplicates,
+      files,
+      locale,
+    });
 
     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);
-        }
+      await refineUploadedFiles({
+        uploadedFiles: compressedFiles,
+        locale,
+        allowedTypes,
+        isMulti,
+        setFiles,
       }),
     ).finally(() => {
       setIsLoading(false);
@@ -197,6 +127,12 @@ export const useUploader = ({
     setTimeout(() => {
       onChange();
     }, 200);
+
+    // Reset the input value to allow re-uploading the same file
+    // Only reset for input change events, not drag events
+    if (event.target && "value" in event.target && event.target.files) {
+      (event.target as HTMLInputElement).value = "";
+    }
   };
 
   return {

package/src/main.tsx

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

package/src/mocks/header.tsx

@@ -1,4 +1,4 @@
-import { SideBarAction, NavigationItem } from "@types";
+import { SideBarAction, NavigationItem } from "@/types";
 import {
   HelpCircleIcon,
   HomeIcon,

package/src/providers/config-provider.tsx

@@ -1,11 +1,11 @@
-import { Scaffold } from "@components";
-import { defaultEmperorUIConfig } from "@constants";
-import { EmperorUIContext } from "@context";
+import { Scaffold } from "@/components";
+import { defaultEmperorUIConfig } from "@/constants";
+import { EmperorUIContext } from "@/context";
 import type {
   ConfigContextState,
   ConfigProviderProps,
   EmperorUIConfig,
-} from "@types";
+} from "@/types";
 import { useMemo } from "react";
 
 export function ConfigProvider({

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

@@ -1,5 +1,5 @@
-import { ConfigProviderProps } from "@types";
-import { ConfigProvider, NavigationProvider } from "@providers";
+import { ConfigProviderProps } from "@/types";
+import { ConfigProvider, NavigationProvider } from "@/providers";
 import { HeroUIProvider, ToastProvider } from "@heroui/react";
 import { Fragment } from "react";
 

package/src/providers/navigation-provider.tsx

@@ -2,10 +2,10 @@ import type {
   NavigationProviderProps,
   NavigationContextState,
   NavigationItem,
-} from "@types";
+} from "@/types";
 import { useMemo, useState } from "react";
-import { NavigationContext } from "@context";
-import { PreservedKeys } from "@enums";
+import { NavigationContext } from "@/context";
+import { PreservedKeys } from "@/enums";
 
 export function NavigationProvider({ children }: NavigationProviderProps) {
   const [hoveredItemId, setHoveredItemId] = useState<string | null>(null);

package/src/providers/uploader-provider.tsx

@@ -2,9 +2,9 @@ import type {
   UploaderProviderProps,
   UploaderContextState,
   FileObject,
-} from "@types";
+} from "@/types";
 import { useMemo, useState } from "react";
-import { UploaderContext } from "@context";
+import { UploaderContext } from "@/context";
 import { useDisclosure } from "@heroui/react";
 
 export function UploaderProvider({

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { SharedComponentProps } from "@types";
+import { SharedComponentProps } from "@/types";
 
 export type PortalProps = SharedComponentProps & {
   containerId: string;

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

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

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

@@ -1,4 +1,5 @@
-import type { SharedComponentProps } from "@types";
+import type { SharedComponentProps } from "@/types";
+import { ModalProps } from "@heroui/react";
 import { Dispatch, ReactNode, SetStateAction } from "react";
 
 export type UploaderProps = SharedComponentProps &
@@ -54,15 +55,10 @@ export type UseUploadFileReturn = {
   onInputChange: (
     event: React.ChangeEvent<HTMLInputElement> &
       React.DragEvent<HTMLLabelElement>,
-  ) => Promise<void>;
+  ) => Promise<void | string | null>;
 };
 
 export type UploaderContextState = {
-  isOpen?: boolean;
-  onClose?: () => void;
-  onOpen?: () => void;
-  onOpenChange?: (isOpen: boolean) => void;
-
   selectedFile?: FileObject | null;
   setSelectedFile?: (file: FileObject | null) => void;
 
@@ -84,11 +80,8 @@ export type UploaderContextState = {
   onInputChange: SharedOnInputChangeType;
   handleClearFile: (fileName?: string) => void;
 
-  modal?: {
-    isOpen?: boolean;
+  modal?: Omit<ModalProps, "children"> & {
     onOpen?: () => void;
-    onClose?: () => void;
-    onOpenChange?: (isOpen: boolean) => void;
   };
   classNames?: {
     label?: string;

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

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

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

@@ -1,9 +1,68 @@
-import type { SharedComponentProps } from "@types";
+import type { SharedComponentProps } from "@/types";
+import { ReactNode } from "react";
 
 export type FooterClassnames = {
   base?: string;
+  content?: string;
+  policiesWrapper?: string;
+  policy?: string;
+  quickLinksWrapper?: string;
+  quickLinksTitle?: string;
+  quickLinksList?: string;
+  quickLinksItem?: string;
+  quickLinksLink?: string;
+  socialLinksWrapper?: string;
+  socialLink?: string;
+  copyRightsWrapper?: string;
+  copyRightsText?: string;
+  contactsWrapper?: string;
+  contact?: string;
+};
+
+export type QuickLink = {
+  label: string;
+  href: string;
+  isExternal?: boolean;
+};
+
+export type QuickLinkCollection = {
+  title?: string;
+  links: QuickLink[];
+};
+
+export type SocialLink = {
+  label?: string;
+  href: string;
+  icon?: ReactNode;
+  isExternal?: boolean;
+};
+
+export type Address = {
+  country?: string;
+  street?: string;
+  city?: string;
+  state?: string;
+  zip?: string;
+};
+
+export type CopyRights = {
+  year: number;
+  text: string;
+};
+
+export type Contacts = {
+  mobile?: string;
+  email?: string;
+  addresses?: Address[];
+  website?: string;
+  workingHours?: string;
 };
 
 export type FooterProps = SharedComponentProps & {
   classNames?: FooterClassnames;
+  policies?: QuickLink[];
+  quickLinks?: QuickLinkCollection[];
+  socialLinks?: SocialLink[];
+  copyRights?: CopyRights;
+  contacts?: Contacts;
 };

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

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

package/src/types/components/molecules/item-card/item-card.ts

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

package/src/types/components/molecules/item-details/item-details.ts

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

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

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

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

@@ -2,7 +2,7 @@ import type {
   ComponentRadius,
   ComponentSize,
   SharedComponentProps,
-} from "@types";
+} from "@/types";
 import type { ElementType } from "react";
 
 export type NavBarClassnames = {
@@ -34,6 +34,7 @@ export type NavBarStylesProps = {
   variant?: NavBarVariant;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export type NavBarMenuStylesProps = {};
 
 export type NavBarItemStylesProps = {