@js-empire/emperor-ui 1.3.5 → 1.3.7

package/src/enums/index.ts

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

package/src/enums/placeholders.ts

@@ -1,4 +0,0 @@
-export enum Placeholders {
-  PLACEHOLDER_MALE_AVATAR = "/images/placeholder-male-avatar.png",
-  PLACEHOLDER_FEMALE_AVATAR = "/images/placeholder-female-avatar.png",
-}

package/src/enums/preserved-keys.ts

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

package/src/examples/index.ts

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

package/src/hooks/index.ts

@@ -1,8 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,20 +0,0 @@
-"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

@@ -1,16 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,186 +0,0 @@
-"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

@@ -1,14 +0,0 @@
-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

@@ -1,164 +0,0 @@
-"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

@@ -1,53 +0,0 @@
-"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

@@ -1,7 +0,0 @@
-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

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

package/src/i18n/constants/index.ts

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

package/src/i18n/constants/locales.ts

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

package/src/i18n/index.ts

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

package/src/i18n/locales/ar.ts

@@ -1,15 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

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

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

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

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

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

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

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

package/src/i18n/locales/en.ts

@@ -1,15 +0,0 @@
-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

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

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

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

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

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

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

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

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

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

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

@@ -1,11 +0,0 @@
-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.",
-  },
-};

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

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

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

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