@js-empire/emperor-ui 1.2.0 → 1.2.2

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,15 @@
+export const atomsAr = {
+  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,15 @@
+export const atomsEn = {
+  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: "You can only upload files within these types: ",
+    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 @@
+export const organismsAr = {};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/i18n/types/index.ts

@@ -0,0 +1,2 @@
+export type * from "./locale";
+export type * from "./toasts";

package/src/i18n/types/locale.ts

@@ -0,0 +1,5 @@
+import { ar, en, i18n } from "@/i18n";
+
+export type Lang = (typeof i18n)["locales"][number];
+
+export type Locale = typeof ar | typeof en;

package/src/i18n/types/toasts.ts

@@ -0,0 +1,3 @@
+import { toastsAr, toastsEn } from "@/i18n";
+
+export type ToastKey = keyof typeof toastsAr & keyof typeof toastsEn;

package/src/i18n/utils/get-locales.ts

@@ -0,0 +1,4 @@
+import { Lang, Locale, ar, en } from "@/i18n";
+
+export const getLocales = (lang: string | Lang): Locale =>
+  (lang === "en" ? en : ar) as Locale;

package/src/i18n/utils/index.ts

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

package/src/i18n/utils/localize.ts

@@ -0,0 +1,15 @@
+import { Lang } from "@/i18n";
+
+export const localize = ({
+  object,
+  lang,
+  key,
+}: {
+  lang: Lang;
+  key: string;
+  object?: Record<string, string> | undefined;
+}): string | null | undefined =>
+  ({
+    ar: object?.[key],
+    en: object?.[key],
+  })[lang] || null;

package/src/mocks/index.ts

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

package/src/mocks/listings.ts

@@ -0,0 +1,200 @@
+export type MockItemType = {
+  id: number;
+  title: string;
+  description: string;
+  image: string;
+};
+
+export const MOCK_LISTINGS: MockItemType[] = [
+  {
+    id: 1,
+    title: "Listing 1",
+    description: "Description 1",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 2,
+    title: "Listing 2",
+    description: "Description 2",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 3,
+    title: "Listing 3",
+    description: "Description 3",
+    image: "https://via.placeholder.com/150",
+  },
+
+  {
+    id: 4,
+    title: "Listing 4",
+    description: "Description 4",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 5,
+    title: "Listing 5",
+    description: "Description 5",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 6,
+    title: "Listing 6",
+    description: "Description 6",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 7,
+    title: "Listing 7",
+    description: "Description 7",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 8,
+    title: "Listing 8",
+    description: "Description 8",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 9,
+    title: "Listing 9",
+    description: "Description 9",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 10,
+    title: "Listing 10",
+    description: "Description 10",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 11,
+    title: "Listing 11",
+    description: "Description 11",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 12,
+    title: "Listing 12",
+    description: "Description 12",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 13,
+    title: "Listing 13",
+    description: "Description 13",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 14,
+    title: "Listing 14",
+    description: "Description 14",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 15,
+    title: "Listing 15",
+    description: "Description 15",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 16,
+    title: "Listing 16",
+    description: "Description 16",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 17,
+    title: "Listing 17",
+    description: "Description 17",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 18,
+    title: "Listing 18",
+    description: "Description 18",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 19,
+    title: "Listing 19",
+    description: "Description 19",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 20,
+    title: "Listing 20",
+    description: "Description 20",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 21,
+    title: "Listing 21",
+    description: "Description 21",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 22,
+    title: "Listing 22",
+    description: "Description 22",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 23,
+    title: "Listing 23",
+    description: "Description 23",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 24,
+    title: "Listing 24",
+    description: "Description 24",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 25,
+    title: "Listing 25",
+    description: "Description 25",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 26,
+    title: "Listing 26",
+    description: "Description 26",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 27,
+    title: "Listing 27",
+    description: "Description 27",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 28,
+    title: "Listing 28",
+    description: "Description 28",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 29,
+    title: "Listing 29",
+    description: "Description 29",
+    image: "https://via.placeholder.com/150",
+  },
+  {
+    id: 30,
+    title: "Listing 30",
+    description: "Description 30",
+    image: "https://via.placeholder.com/150",
+  },
+];
+
+export const getListings = ({
+  page = 1,
+  pageSize = 10,
+}: {
+  page?: number;
+  pageSize?: number;
+}) => {
+  return MOCK_LISTINGS.slice((page - 1) * pageSize, page * pageSize);
+};

package/src/providers/config-provider.tsx

@@ -1,11 +1,13 @@
 import { Scaffold } from "@/components";
 import { defaultEmperorUIConfig } from "@/constants";
 import { EmperorUIContext } from "@/context";
+import { LangKey, Locale } from "@/i18n";
 import type {
   ConfigContextState,
   ConfigProviderProps,
   EmperorUIConfig,
 } from "@/types";
+import { mergeLocales } from "@/utils";
 import { useMemo } from "react";
 
 export function ConfigProvider({
@@ -29,6 +31,22 @@ export function ConfigProvider({
       interLocalization: {
         ...defaultEmperorUIConfig?.interLocalization,
         ...config?.interLocalization,
+        locales: {
+          [LangKey.ENGLISH]: mergeLocales({
+            defaultLocales: defaultEmperorUIConfig?.interLocalization
+              ?.locales?.[LangKey.ENGLISH] as Locale,
+            configLocales: config?.interLocalization?.locales?.[
+              LangKey.ENGLISH
+            ] as Locale,
+          }),
+          [LangKey.ARABIC]: mergeLocales({
+            defaultLocales: defaultEmperorUIConfig?.interLocalization
+              ?.locales?.[LangKey.ARABIC] as Locale,
+            configLocales: config?.interLocalization?.locales?.[
+              LangKey.ARABIC
+            ] as Locale,
+          }),
+        },
       },
     };
 

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

@@ -25,7 +25,7 @@ export type SharedLabelIdType = string;
 export type SharedOnInputChangeType = (
   event: React.ChangeEvent<HTMLInputElement> &
     React.DragEvent<HTMLLabelElement>,
-) => Promise<void>;
+) => Promise<void | string | null>;
 
 export type UseUploadFileProps = {
   labelId: string;
@@ -52,10 +52,7 @@ export type UseUploadFileReturn = {
   isLoading: boolean;
   setFiles: Dispatch<SetStateAction<FileObject[]>>;
   handleClearFile: (fileName?: string) => void;
-  onInputChange: (
-    event: React.ChangeEvent<HTMLInputElement> &
-      React.DragEvent<HTMLLabelElement>,
-  ) => Promise<void | string | null>;
+  onInputChange: SharedOnInputChangeType;
 };
 
 export type UploaderContextState = {
@@ -65,6 +62,8 @@ export type UploaderContextState = {
   labelId: SharedLabelIdType;
   labelContent?: ReactNode;
   avatarLabelContent?: ReactNode;
+  title?: ReactNode;
+  errorMessage?: ReactNode;
 
   isFileViewable?: boolean;
   isRequired?: boolean;
@@ -89,6 +88,7 @@ export type UploaderContextState = {
     listing?: string;
     error?: string;
     input?: string;
+    title?: string;
   };
 };
 

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

@@ -4,6 +4,10 @@ export type ListingsClassnames = {
   base?: string;
 };
 
-export type ListingsProps = SharedComponentProps & {
+export type ListingsVariant = "default";
+
+export type ListingsProps<ListingType> = SharedComponentProps & {
   classNames?: ListingsClassnames;
+  variant?: ListingsVariant;
+  items: ListingType[];
 };

package/src/types/context/config.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
 import { HeroUIProviderProps } from "@heroui/react";
+import { EmperorUITheme, EmperorUIInterLocalization } from "@/types";
 
 export type ConfigContextState = {
   config: EmperorUIConfig;
@@ -10,42 +11,10 @@ export type ConfigProviderProps = {
   config?: EmperorUIConfig;
 };
 
-export type ColorMode = "light" | "dark";
-export type AppDirection = "ltr" | "rtl";
-
-export type ColorsPalette = {
-  primary: string;
-  secondary: string;
-  success: string;
-  danger: string;
-  warning: string;
-  info: string;
-  background: string;
-  foreground: string;
-};
-
-export type EmperorUITheme = {
-  mode: ColorMode;
-  colors: Partial<ColorsPalette>;
-};
-
 export type EmperorUILayout = {
   withScaffold: boolean;
 };
 
-export type EmperorUILang = "en" | "ar";
-
-export type EmperorUILocales = Record<EmperorUILang, Record<string, string>>;
-
-export type EmperorUIInterLocalization = {
-  lang?: EmperorUILang;
-  languages?: EmperorUILang[];
-  defaultLanguage?: EmperorUILang;
-  isMultiLingual?: boolean;
-  dir?: AppDirection;
-  locales?: EmperorUILocales;
-};
-
 export type EmperorUIConfig = {
   theme?: Partial<EmperorUITheme>;
   layout?: Partial<EmperorUILayout>;

package/src/types/context/index.ts

@@ -1,2 +1,4 @@
 export type * from "./config";
 export type * from "./navigation";
+export type * from "./localization";
+export type * from "./theme";

package/src/types/context/localization.ts

@@ -0,0 +1,23 @@
+import { Locale } from "@/i18n";
+
+export type AppDirection = "ltr" | "rtl";
+
+export type EmperorUILang = "en" | "ar";
+
+export type EmperorUILocales = Record<
+  EmperorUILang,
+  Partial<{
+    atoms?: {
+      uploader?: Partial<Locale["atoms"]["uploader"]>;
+    };
+  }>
+>;
+
+export type EmperorUIInterLocalization = {
+  lang?: EmperorUILang;
+  languages?: EmperorUILang[];
+  defaultLanguage?: EmperorUILang;
+  isMultiLingual?: boolean;
+  dir?: AppDirection;
+  locales?: EmperorUILocales;
+};

package/src/types/context/theme.ts

@@ -0,0 +1,17 @@
+export type ColorMode = "light" | "dark";
+
+export type ColorsPalette = {
+  primary: string;
+  secondary: string;
+  success: string;
+  danger: string;
+  warning: string;
+  info: string;
+  background: string;
+  foreground: string;
+};
+
+export type EmperorUITheme = {
+  mode: ColorMode;
+  colors: Partial<ColorsPalette>;
+};

package/src/utils/index.ts

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

package/src/utils/locales.ts

@@ -0,0 +1,54 @@
+import { Locale } from "@/i18n";
+
+/**
+ * Checks if a value is a plain object (not array, null, or other object types).
+ */
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+/**
+ * Deep-merges config locales into default locales. Default values are used as base,
+ * and config values override only the keys they provide. Nested objects are merged
+ * recursively so unrelated keys at any level remain unchanged.
+ */
+export const mergeLocales = ({
+  defaultLocales,
+  configLocales,
+}: {
+  defaultLocales: Locale;
+  configLocales?: Partial<Locale>;
+}): Locale => {
+  const deepMerge = <T extends Record<string, unknown>>(
+    defaultObj: T,
+    configObj: Partial<T> | undefined,
+  ): T => {
+    if (configObj == null || Object.keys(configObj).length === 0) {
+      return defaultObj;
+    }
+
+    const result = { ...defaultObj } as T;
+
+    for (const key of Object.keys(configObj) as (keyof T)[]) {
+      const configVal = configObj[key];
+      const defaultVal = defaultObj[key];
+
+      if (configVal === undefined) continue;
+
+      if (isPlainObject(configVal) && isPlainObject(defaultVal as unknown)) {
+        (result as Record<string, unknown>)[key as string] = deepMerge(
+          defaultVal as Record<string, unknown>,
+          configVal,
+        );
+      } else {
+        (result as Record<string, unknown>)[key as string] = configVal;
+      }
+    }
+
+    return result;
+  };
+
+  return deepMerge(
+    defaultLocales as unknown as Record<string, unknown>,
+    configLocales as Partial<Record<string, unknown>>,
+  ) as Locale;
+};