@js-empire/emperor-ui 1.3.11 → 1.3.13

package/src/context/uploader-context.ts

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

package/src/enums/index.ts

@@ -0,0 +1,2 @@
+export * from "./preserved-keys";
+export * from "./placeholders";

package/src/enums/placeholders.ts

@@ -0,0 +1,5 @@
+/** Stable external URLs so the published package does not ship image assets. */
+export enum Placeholders {
+  PLACEHOLDER_MALE_AVATAR = "https://api.dicebear.com/7.x/avataaars/svg?seed=male",
+  PLACEHOLDER_FEMALE_AVATAR = "https://api.dicebear.com/7.x/avataaars/svg?seed=female",
+}

package/src/enums/preserved-keys.ts

@@ -0,0 +1,3 @@
+export enum PreservedKeys {
+  COMPACT_SIDEBAR_ID = "emperor-compact-sidebar",
+}

package/src/examples/index.ts

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

package/src/hooks/index.ts

@@ -0,0 +1,8 @@
+export * from "./use-emperor-ui";
+export * from "./use-navigation";
+export * from "./use-search-params-handler";
+export * from "./use-uploader-context";
+export * from "./use-uploader";
+export * from "./use-window-size";
+export * from "./use-filters";
+export * from "./use-form-builder-context";

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

@@ -0,0 +1,12 @@
+import { EmperorUIContext } from "@/context";
+import { useContext } from "react";
+
+export function useEmperorUI() {
+  const context = useContext(EmperorUIContext);
+
+  if (!context) {
+    throw new Error("useEmperorUI must be used within a EmperorUIProvider");
+  }
+
+  return context;
+}

package/src/hooks/use-filters.ts

@@ -0,0 +1,20 @@
+"use client";
+
+import { useMemo } from "react";
+import { useSearchParamsHandler } from "@/hooks";
+
+export function useFilters<
+  FiltersType extends Record<string, string | number | boolean>,
+>() {
+  const { allParams, clearParams } = useSearchParamsHandler();
+
+  const filters = useMemo(() => {
+    if (!Object.keys(allParams).length) {
+      return null;
+    }
+
+    return allParams as unknown as FiltersType;
+  }, [allParams]);
+
+  return { filters, clearFilters: clearParams };
+}

package/src/hooks/use-form-builder-context.ts

@@ -0,0 +1,16 @@
+import { FormBuilderContext } from "@/context";
+import { FormBuilderValue } from "@/types";
+import { useContext } from "react";
+import { FieldValues } from "react-hook-form";
+
+export function useFormBuilder<TSchema extends FieldValues>() {
+  const context = useContext(FormBuilderContext) as FormBuilderValue<TSchema>;
+
+  if (!context) {
+    throw new Error(
+      "'useFormBuilder' must be used within a 'FormBuilderProvider', make sure to wrap 'Field' components with 'FormBuilder' as well.",
+    );
+  }
+
+  return context;
+}

package/src/hooks/use-navigation.ts

@@ -0,0 +1,12 @@
+import { NavigationContext } from "@/context";
+import { useContext } from "react";
+
+export function useNavigation() {
+  const context = useContext(NavigationContext);
+
+  if (!context) {
+    throw new Error("useNavigation must be used within a NavigationProvider");
+  }
+
+  return context;
+}

package/src/hooks/use-search-params-handler.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+const URL_SEARCH_PARAMS_CHANGE_EVENT = "URLSearchParamsChange";
+
+export function useSearchParamsHandler() {
+  const getAllParams = useCallback((): Record<string, string> => {
+    if (typeof window === "undefined") {
+      return {};
+    }
+
+    const currentSearchParams = new URLSearchParams(window.location.search);
+
+    return Array.from(currentSearchParams.entries()).reduce<
+      Record<string, string>
+    >((paramsRecord, [key, value]) => {
+      paramsRecord[key] = value;
+      return paramsRecord;
+    }, {});
+  }, []);
+
+  const [allParams, setAllParams] = useState<Record<string, string>>(() =>
+    getAllParams(),
+  );
+
+  const updateUrlSearchParams = useCallback(
+    ({ searchParams }: { searchParams: URLSearchParams }) => {
+      if (typeof window === "undefined") return;
+
+      const searchParamsString = searchParams.toString();
+      const searchPath = searchParamsString ? `?${searchParamsString}` : "";
+      const newPath = `${window.location.pathname}${searchPath}${window.location.hash}`;
+      const currentPath = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+
+      if (newPath === currentPath) return;
+
+      window.history.replaceState(window.history.state, "", newPath);
+      window.dispatchEvent(new Event(URL_SEARCH_PARAMS_CHANGE_EVENT));
+    },
+    [],
+  );
+
+  const setParams = useCallback(
+    ({
+      params,
+      options = { replace: true },
+    }: {
+      params: Record<string, string | number | boolean | undefined | null>;
+      options?: { replace?: boolean };
+    }) => {
+      if (typeof window === "undefined") return;
+
+      const nextSearchParams = new URLSearchParams(window.location.search);
+      let hasChanges = false;
+
+      Object.entries(params).forEach(([key, value]) => {
+        if (value === undefined || value === null || value === "") {
+          const hasKey = nextSearchParams.has(key);
+          nextSearchParams.delete(key);
+          if (hasKey) {
+            hasChanges = true;
+          }
+          return;
+        }
+
+        const serializedValue = String(value);
+
+        if (options.replace) {
+          const existingValues = nextSearchParams.getAll(key);
+          const isAlreadyReplaced =
+            existingValues.length === 1 &&
+            existingValues[0] === serializedValue;
+
+          if (isAlreadyReplaced) {
+            return;
+          }
+
+          nextSearchParams.delete(key);
+          nextSearchParams.append(key, serializedValue);
+          hasChanges = true;
+          return;
+        }
+
+        const existingValues = nextSearchParams.getAll(key);
+        const hasMatchingValue = existingValues.some(
+          (existingValue) => existingValue === serializedValue,
+        );
+
+        if (!hasMatchingValue) {
+          nextSearchParams.append(key, serializedValue);
+          hasChanges = true;
+        }
+      });
+
+      if (!hasChanges) return;
+
+      updateUrlSearchParams({ searchParams: nextSearchParams });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const deleteParam = useCallback(
+    ({ key }: { key: string }) => {
+      if (typeof window === "undefined") {
+        return;
+      }
+
+      const nextSearchParams = new URLSearchParams(window.location.search);
+      nextSearchParams.delete(key);
+      updateUrlSearchParams({ searchParams: nextSearchParams });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const deleteParams = useCallback(
+    ({ keys }: { keys: string[] }) => {
+      if (typeof window === "undefined") return;
+
+      const nextSearchParams = new URLSearchParams(window.location.search);
+      let hasChanges = false;
+      keys.forEach((key) => {
+        const hasKey = nextSearchParams.has(key);
+        nextSearchParams.delete(key);
+        if (hasKey) {
+          hasChanges = true;
+        }
+      });
+
+      if (!hasChanges) {
+        return;
+      }
+
+      updateUrlSearchParams({ searchParams: nextSearchParams });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const clearParams = useCallback(() => {
+    if (typeof window === "undefined") return;
+
+    if (!window.location.search) {
+      return;
+    }
+
+    updateUrlSearchParams({ searchParams: new URLSearchParams() });
+  }, [updateUrlSearchParams]);
+
+  const getParam = useCallback((name: string) => {
+    if (typeof window === "undefined") return null;
+
+    const currentSearchParams = new URLSearchParams(window.location.search);
+    return currentSearchParams.get(name);
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const syncAllParams = () => {
+      setAllParams(getAllParams());
+    };
+
+    syncAllParams();
+    window.addEventListener("popstate", syncAllParams);
+    window.addEventListener(URL_SEARCH_PARAMS_CHANGE_EVENT, syncAllParams);
+
+    return () => {
+      window.removeEventListener("popstate", syncAllParams);
+      window.removeEventListener(URL_SEARCH_PARAMS_CHANGE_EVENT, syncAllParams);
+    };
+  }, [getAllParams]);
+
+  return {
+    getParam,
+    allParams,
+    setParams,
+    deleteParam,
+    deleteParams,
+    clearParams,
+  };
+}

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

@@ -0,0 +1,14 @@
+import { UploaderContext } from "@/context";
+import { useContext } from "react";
+
+export function useUploaderContext() {
+  const context = useContext(UploaderContext);
+
+  if (!context) {
+    throw new Error(
+      "useUploaderContext must be used within a UploaderProvider",
+    );
+  }
+
+  return context;
+}

package/src/hooks/use-uploader.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { addToast } from "@heroui/toast";
+import { FileObject, UseUploadFileProps, UseUploadFileReturn } from "@/types";
+import { useState } from "react";
+import { useEmperorUI } from "@/hooks";
+import {
+  validateUploadedFiles,
+  getAllowedTypes,
+  refineUploadedFiles,
+  mergeUploaderLocale,
+} from "@/utils";
+import { ONE_MEGABYTE } from "@/constants";
+import { Locale, getLocales } from "@/i18n";
+
+export const useUploader = ({
+  labelContent,
+  labelId,
+  fileTypes,
+  isRequired = false,
+  isDraggable = true,
+  isMulti = false,
+  preventDuplicates = true,
+  maxCount = 10,
+  maxFileSize = ONE_MEGABYTE * 10,
+  compressFiles = false,
+  onChange = () => {},
+  locales,
+}: UseUploadFileProps): UseUploadFileReturn => {
+  const { config } = useEmperorUI();
+  const [files, setFiles] = useState<FileObject[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const configLocales = config?.interLocalization?.locales;
+  const lang =
+    config?.interLocalization?.lang ||
+    config?.interLocalization?.defaultLanguage ||
+    "en";
+
+  const defaultLocale = getLocales(lang);
+  const uploaderLocale = mergeUploaderLocale({
+    defaultUploaderLocale: defaultLocale.atoms.uploader,
+    configUploaderLocale: (configLocales?.[lang] as Locale | undefined)?.atoms
+      ?.uploader,
+    contextUploaderLocale: locales,
+  });
+
+  // remove a specific uploaded file
+  const handleClearFile = (fileName?: string) => {
+    setFiles((prev) => prev?.filter((file) => file?.file?.name !== fileName));
+
+    // Reset the input value to allow re-uploading the same file
+    if (labelId) {
+      const input = document.getElementById(labelId) as HTMLInputElement;
+      if (input) {
+        input.value = "";
+      }
+    }
+  };
+
+  // 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 | string | null> => {
+    console.log("files: ", event.target.files);
+
+    if (
+      (!event.target.files || !event.target.files?.[0]) &&
+      (!event?.dataTransfer?.files || !event?.dataTransfer?.files[0])
+    ) {
+      return addToast({
+        title: uploaderLocale.errorUploadingFile,
+      });
+    }
+
+    // validate the file type according to the given allowed types
+    const allowedTypes = getAllowedTypes(fileTypes);
+
+    // 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: `${uploaderLocale.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: uploaderLocale.errorUploadedTypes,
+      });
+      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
+    const { compressedFiles, isInValid } = await validateUploadedFiles({
+      uploadedFiles,
+      maxFileSize,
+      compressFiles,
+      preventDuplicates,
+      files,
+      uploaderLocale,
+    });
+
+    if (isInValid) return;
+
+    setIsLoading(true);
+
+    await Promise.all(
+      await refineUploadedFiles({
+        uploadedFiles: compressedFiles,
+        uploaderLocale,
+        allowedTypes,
+        isMulti,
+        setFiles,
+      }),
+    ).finally(() => {
+      setIsLoading(false);
+    });
+
+    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 {
+    files,
+    fileTypes,
+    labelId,
+    isRequired,
+    labelContent,
+    isDraggable,
+    isMulti,
+    handleClearFile,
+    onInputChange,
+    setFiles,
+    isLoading,
+    locales,
+  };
+};

package/src/hooks/use-window-size.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+const SCREENS = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+};
+
+export const useWindowSize = () => {
+  const [size, setSize] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    function updateSize() {
+      setSize({ width: window.innerWidth, height: window.innerHeight });
+    }
+    window.addEventListener("resize", updateSize);
+    updateSize();
+
+    return () => window.removeEventListener("resize", updateSize);
+  }, []);
+
+  const currentScreen: "base" | "sm" | "md" | "lg" | "xl" | "2xl" =
+    useMemo(() => {
+      if (size?.width > SCREENS?.["2xl"]) return "2xl";
+      else if (size?.width > SCREENS?.xl) return "xl";
+      else if (size?.width > SCREENS?.lg) return "lg";
+      else if (size?.width > SCREENS?.md) return "md";
+      else if (size?.width > SCREENS?.sm) return "sm";
+      else return "base";
+    }, [size]);
+
+  const isSmallDevice = useMemo(
+    () => ["base", "sm", "md"].includes(currentScreen),
+    [currentScreen],
+  );
+
+  const isExtraSmallDevice = useMemo(
+    () => ["base"].includes(currentScreen),
+    [currentScreen],
+  );
+
+  return {
+    viewportWidth: size.width,
+    viewportHeight: size.height,
+    currentScreen,
+    isSmallDevice,
+    isExtraSmallDevice,
+  };
+};

package/src/i18n/configs/i18n.ts

@@ -0,0 +1,7 @@
+import { LangKey } from "@/i18n/constants/locales"; //! never change this until you solve the circular dependency issue
+
+export const i18n = {
+  defaultLocale: "en",
+  locales: [LangKey.ARABIC, LangKey.ENGLISH],
+  localDetection: true,
+};

package/src/i18n/configs/index.ts

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

package/src/i18n/constants/index.ts

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

package/src/i18n/constants/locales.ts

@@ -0,0 +1,4 @@
+export enum LangKey {
+  ARABIC = "ar",
+  ENGLISH = "en",
+}

package/src/i18n/index.ts

@@ -0,0 +1,5 @@
+export * from "./configs";
+export * from "./types";
+export * from "./utils";
+export * from "./constants";
+export * from "./locales";

package/src/i18n/locales/ar.ts

@@ -0,0 +1,15 @@
+import { commonAr } from "./common";
+import { toastsAr } from "./toasts";
+import { atomsAr } from "./atoms";
+import { moleculesAr } from "./molecules";
+import { organismsAr } from "./organisms";
+import { templatesAr } from "./templates";
+
+export const ar = {
+  common: commonAr,
+  toasts: toastsAr,
+  atoms: atomsAr,
+  molecules: moleculesAr,
+  organisms: organismsAr,
+  templates: templatesAr,
+};

package/src/i18n/locales/atoms/ar.ts

@@ -0,0 +1,18 @@
+export const atomsAr = {
+  colorPicker: {
+    invalidColorFormat: "يرجى إدخال لون صالح (مثال: #000000 أو #fff)",
+  },
+  uploader: {
+    dropHere: "أسقط الملف هنا",
+    selectFile: "حدد ملفًا أو اسحبه وأفلته هنا",
+    selectionTypes: "JPG, PNG أو PDF، حجم الملف لا يزيد عن 10MB",
+    selectBtn: "حدد ملف",
+    errorUploadingFile: "لم يتم تحميل أي ملف",
+    maxNumImages: "تم تجاوز الحد الأقصى للصور المرفوعة: ",
+    errorUploadedTypes: "نوع الملف المرفوع غير مسموح به",
+    maxSizeExceededError:
+      "يمكنك فقط رفع ملفات/صور بحجم أقل من MAX_FILE_SIZE ميغابايت، بينما حجم الملف الذي رفعته هو UPLOADED_FILE_SIZE ميغابايت",
+    duplicatesDenied:
+      "لا يمكنك رفع صور تحمل نفس الاسم، يمكنك إعادة تسميتها قبل عملية الرفع",
+  },
+};

package/src/i18n/locales/atoms/en.ts

@@ -0,0 +1,18 @@
+export const atomsEn = {
+  colorPicker: {
+    invalidColorFormat: "Please enter a valid color (e.g., #000000 or #fff)",
+  },
+  uploader: {
+    dropHere: "Drop file here",
+    selectFile: "Select a file or drag and drop here",
+    selectionTypes: "JPG, PNG or PDF, file size no more than 10MB",
+    selectBtn: "Select file",
+    errorUploadingFile: "No file was uploaded",
+    maxNumImages: "Maximum number of uploaded images exceeded: ",
+    errorUploadedTypes: "The uploaded file type is not allowed.",
+    maxSizeExceededError:
+      "You can only upload files/images with less than MAX_FILE_SIZE Mega Bytes, you're file's size is UPLOADED_FILE_SIZE Mega Bytes",
+    duplicatesDenied:
+      "You can't upload images with duplicate names, you may rename them before the upload process",
+  },
+};

package/src/i18n/locales/atoms/index.ts

@@ -0,0 +1,2 @@
+export * from "./ar";
+export * from "./en";

package/src/i18n/locales/common/ar.ts

@@ -0,0 +1 @@
+export const commonAr = {};

package/src/i18n/locales/common/en.ts

@@ -0,0 +1 @@
+export const commonEn = {};

package/src/i18n/locales/common/index.ts

@@ -0,0 +1,2 @@
+export * from "./ar";
+export * from "./en";

package/src/i18n/locales/en.ts

@@ -0,0 +1,15 @@
+import { commonEn } from "./common";
+import { toastsEn } from "./toasts";
+import { atomsEn } from "./atoms";
+import { moleculesEn } from "./molecules";
+import { organismsEn } from "./organisms";
+import { templatesEn } from "./templates";
+
+export const en = {
+  common: commonEn,
+  toasts: toastsEn,
+  atoms: atomsEn,
+  molecules: moleculesEn,
+  organisms: organismsEn,
+  templates: templatesEn,
+};

package/src/i18n/locales/index.ts

@@ -0,0 +1,4 @@
+export * from "./ar";
+export * from "./en";
+export * from "./common";
+export * from "./toasts";

package/src/i18n/locales/molecules/ar.ts

@@ -0,0 +1 @@
+export const moleculesAr = {};

package/src/i18n/locales/molecules/en.ts

@@ -0,0 +1 @@
+export const moleculesEn = {};

package/src/i18n/locales/molecules/index.ts

@@ -0,0 +1,2 @@
+export * from "./ar";
+export * from "./en";

package/src/i18n/locales/organisms/ar.ts

@@ -0,0 +1,11 @@
+export const organismsAr = {
+  deletionConfirmor: {
+    confirm: "تأكيد",
+    decline: "إلغاء",
+  },
+  listings: {
+    emptyTitle: "لا توجد عناصر",
+    emptyDescription:
+      "لم نجد أي عناصر تطابق بحثك. جرّب تعديل الفلاتر أو البحث لاحقاً.",
+  },
+};

package/src/i18n/locales/organisms/en.ts

@@ -0,0 +1,11 @@
+export const organismsEn = {
+  deletionConfirmor: {
+    confirm: "Confirm",
+    decline: "Decline",
+  },
+  listings: {
+    emptyTitle: "No listings found",
+    emptyDescription:
+      "We couldn't find any listings matching your search. Try adjusting your filters or check back later.",
+  },
+};