@js-empire/emperor-ui 1.3.11 → 1.3.13

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/{dist/src/i18n/types/locale.d.ts → src/i18n/types/locale.ts}

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

package/{dist/src/i18n/types/toasts.d.ts → src/i18n/types/toasts.ts}

@@ -1,2 +1,3 @@
-import { toastsAr, toastsEn } from '..';
+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/index.ts

@@ -0,0 +1,14 @@
+"use client";
+
+import "./styles/globals.css";
+
+export * from "./components";
+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/mocks/constants.ts

@@ -0,0 +1,103 @@
+import { MockItemCategory, MockItemBrand, MockColor } from "@/mocks/types";
+
+export const MOCK_ITEM_CATEGORIES: MockItemCategory[] = [
+  "laptops",
+  "desktops",
+  "monitors",
+  "keyboards",
+  "mice",
+  "headsets",
+  "printers",
+  "storage",
+  "components",
+  "networking",
+];
+
+export const MOCK_ITEM_BRANDS: MockItemBrand[] = [
+  "Apple",
+  "Dell",
+  "HP",
+  "Lenovo",
+  "Asus",
+  "Acer",
+  "MSI",
+  "Razer",
+  "Samsung",
+  "Microsoft",
+];
+
+export const MOCK_COLORS: MockColor[] = [
+  "black",
+  "gray",
+  "white",
+  "silver" as MockColor,
+  "blue",
+  "red",
+];
+
+export const MOCK_BASE_DATE = new Date("2026-02-04T00:00:00.000Z");
+
+export const MOCK_REVIEW_COMMENTS: readonly string[] = [
+  "Excellent performance for the price.",
+  "Very quiet and fast machine.",
+  "Solid build quality and screen.",
+  "Battery life could be better.",
+  "Perfect for gaming and streaming.",
+  "Great value, highly recommended.",
+  "Runs cool even under heavy load.",
+  "Keyboard and trackpad feel premium.",
+  "Display is bright and color-accurate.",
+  "Setup was easy and straightforward.",
+];
+
+export const MOCK_REVIEW_AUTHORS: string[] = [
+  "Ahmed K.",
+  "Sara M.",
+  "Omar A.",
+  "Lina H.",
+  "Mohammed S.",
+  "Nour E.",
+  "Youssef R.",
+  "Fatima D.",
+  "Hassan T.",
+  "Mona L.",
+];
+
+export const MOCK_LISTING_TITLES: string[] = [
+  'Ultrabook Pro 14" Laptop',
+  "Gaming Beast RTX Desktop",
+  "Office Essential Mini PC",
+  'Curved 27" 2K Monitor',
+  "Mechanical RGB Gaming Keyboard",
+  "Wireless Silent Mouse",
+  "Studio USB-C Headset",
+  "All-in-One Color Printer",
+  "1TB NVMe PCIe 4.0 SSD",
+  "High-Airflow ATX Case",
+];
+
+export const MOCK_LISTING_DESCRIPTIONS: string[] = [
+  "Powerful and lightweight device ideal for productivity, study, and everyday use.",
+  "High-end desktop designed for 1440p and 4K gaming with excellent cooling.",
+  "Compact form factor PC optimized for office applications and web browsing.",
+  "High refresh rate display with vivid colors and thin bezels for immersive work.",
+  "Durable keyboard with customizable RGB lighting and fast mechanical switches.",
+  "Ergonomic wireless mouse with precise sensor and long battery life.",
+  "Comfortable over-ear headset with crystal-clear microphone and rich sound.",
+  "Fast wireless printer with automatic duplex printing and mobile support.",
+  "Next-generation SSD with blazing read and write speeds for fast boot times.",
+  "Spacious case with optimized airflow, cable management, and tempered glass.",
+];
+
+export const MOCK_LISTING_IMAGES: string[] = [
+  "https://images.pexels.com/photos/18105/pexels-photo.jpg",
+  "https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg",
+  "https://images.pexels.com/photos/1714341/pexels-photo-1714341.jpeg",
+  "https://images.pexels.com/photos/2047905/pexels-photo-2047905.jpeg",
+  "https://images.pexels.com/photos/163117/keyboard-black-notebook-input-163117.jpeg",
+  "https://images.pexels.com/photos/3829246/pexels-photo-3829246.jpeg",
+  "https://images.pexels.com/photos/3394664/pexels-photo-3394664.jpeg",
+  "https://images.pexels.com/photos/3996439/pexels-photo-3996439.jpeg",
+  "https://images.pexels.com/photos/97077/pexels-photo-97077.jpeg",
+  "https://images.pexels.com/photos/3945650/pexels-photo-3945650.jpeg",
+];

package/src/mocks/deletion-confirmor.ts

@@ -0,0 +1,16 @@
+/** Default delay in ms for mock awaiting delete (e.g. in Storybook). */
+export const MOCK_AWAITING_DELETE_MS = 2000;
+
+/**
+ * Mocks an async delete: returns a function that resolves after a delay then calls onClose.
+ * Used for Storybook to simulate confirm-button loading state.
+ */
+export const mockAwaitingDelete =
+  (onClose: () => void, delayMs = MOCK_AWAITING_DELETE_MS) =>
+  (): Promise<void> =>
+    new Promise((resolve) => {
+      setTimeout(() => {
+        onClose();
+        resolve();
+      }, delayMs);
+    });

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,6 @@
+export * from "./constants";
+export * from "./deletion-confirmor";
+export * from "./header";
+export * from "./listings";
+export * from "./types";
+export * from "./locales";

package/src/mocks/listings.tsx

@@ -0,0 +1,154 @@
+/* eslint-disable react-refresh/only-export-components */
+import { type MockReview, type MockItemType } from "@/mocks/types";
+import {
+  MOCK_REVIEW_COMMENTS,
+  MOCK_REVIEW_AUTHORS,
+  MOCK_BASE_DATE,
+  MOCK_ITEM_CATEGORIES,
+  MOCK_ITEM_BRANDS,
+  MOCK_COLORS,
+  MOCK_LISTING_TITLES,
+  MOCK_LISTING_DESCRIPTIONS,
+  MOCK_LISTING_IMAGES,
+} from "@/mocks/constants";
+import { ItemChipProps } from "@/types";
+import { Star } from "lucide-react";
+
+const createReviewList = (count: number, offset: number): MockReview[] => {
+  return Array.from({ length: count }, (_, index) => {
+    const id = offset + index + 1;
+    const ratingBase = (index % 5) + 1 + (index % 3) * 0.1;
+    const rating = Number(Math.min(5, ratingBase).toFixed(1));
+    const comment = MOCK_REVIEW_COMMENTS[index % MOCK_REVIEW_COMMENTS?.length];
+    const author = MOCK_REVIEW_AUTHORS[index % MOCK_REVIEW_AUTHORS.length];
+
+    return {
+      id,
+      rating,
+      comment,
+      author,
+      createdAt: MOCK_BASE_DATE,
+      updatedAt: MOCK_BASE_DATE,
+    };
+  });
+};
+
+// 10 reviews
+export const MOCK_ITEM_REVIEWS_1: MockReview[] = createReviewList(10, 0);
+
+// 50 reviews
+export const MOCK_ITEM_REVIEWS_2: MockReview[] = createReviewList(50, 10);
+
+// 100 reviews
+export const MOCK_ITEM_REVIEWS_3: MockReview[] = createReviewList(100, 60);
+
+const getListingCategories = (index: number): ItemChipProps[] => {
+  const count = (index % 5) + 1; // from 1 to 5 categories
+  const categories: ItemChipProps[] = [];
+
+  for (let i = 0; i < count; i += 1) {
+    const category: ItemChipProps = {
+      label: MOCK_ITEM_CATEGORIES[(index + i) % MOCK_ITEM_CATEGORIES.length],
+      startContent: <Star className="size-3 fill-current" />,
+    };
+
+    if (!categories.includes(category)) {
+      categories.push(category);
+    }
+  }
+
+  return categories;
+};
+
+const getListingReviews = (index: number): MockReview[] => {
+  if (index < 10) return MOCK_ITEM_REVIEWS_1;
+  if (index < 30) return MOCK_ITEM_REVIEWS_2;
+
+  const maxReviews = 100;
+  const count = index % (maxReviews + 1); // from 0 to 100
+
+  return MOCK_ITEM_REVIEWS_3.slice(0, count);
+};
+
+const getAverageRating = (reviews: MockReview[]): number => {
+  if (!reviews.length) return 0;
+
+  const total = reviews.reduce((sum, review) => sum + review.rating, 0);
+  const average = total / reviews.length;
+
+  return Number(average.toFixed(1));
+};
+
+// 50 listings
+export const MOCK_LISTINGS: MockItemType[] = Array.from(
+  { length: 50 },
+  (_, index) => {
+    const id = index + 1;
+    const brand = MOCK_ITEM_BRANDS[index % MOCK_ITEM_BRANDS.length];
+    const color = MOCK_COLORS[index % MOCK_COLORS.length];
+    const title = MOCK_LISTING_TITLES[index % MOCK_LISTING_TITLES.length];
+    const description =
+      MOCK_LISTING_DESCRIPTIONS[index % MOCK_LISTING_DESCRIPTIONS.length];
+    const image = MOCK_LISTING_IMAGES[index % MOCK_LISTING_IMAGES.length];
+    const priceBase = 300 + (index % 10) * 75;
+    const priceBrandModifier = (index % 3) * 50;
+    const price = priceBase + priceBrandModifier; // always less than 10000
+    const isAvailable = index % 7 !== 0;
+    const isBestSeller = index % 6 === 0;
+    const isTopRated = index % 5 === 0;
+    const reviews = getListingReviews(index);
+    const averageRating = getAverageRating(reviews);
+    const createdAt = new Date(
+      MOCK_BASE_DATE.getTime() - index * 24 * 60 * 60 * 1000,
+    );
+    const updatedAt = createdAt;
+
+    return {
+      id,
+      title,
+      description,
+      image,
+      price,
+      categories: getListingCategories(index),
+      isAvailable,
+      isBestSeller,
+      isTopRated,
+      averageRating,
+      reviews,
+      brand,
+      color,
+      createdAt,
+      updatedAt,
+    };
+  },
+);
+
+export const getListings = async ({
+  page = 1,
+  pageSize = 12,
+}: {
+  page?: number;
+  pageSize?: number;
+}): Promise<{ items: MockItemType[] }> => {
+  const items = MOCK_LISTINGS.slice((page - 1) * pageSize, page * pageSize);
+
+  await new Promise((resolve) => {
+    setTimeout(resolve, 2000);
+  });
+
+  return {
+    items,
+  };
+};
+
+export const getListing = async (): Promise<{
+  item?: MockItemType | null | undefined;
+}> => {
+  await new Promise((resolve) => {
+    setTimeout(resolve, 2000);
+  });
+
+  return {
+    item: MOCK_LISTINGS[0],
+  };
+};

package/src/mocks/locales/index.ts

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

package/src/mocks/locales/uploader.ts

@@ -0,0 +1,33 @@
+import { LangKey, Locale } from "@/i18n";
+
+export const uploaderLocalesMock: Record<
+  LangKey,
+  Partial<Locale["atoms"]["uploader"]>
+> = {
+  [LangKey.ENGLISH]: {
+    dropHere: "Drop your custom file here",
+    selectFile: "Choose a custom file or drag it here",
+    selectionTypes: "PNG, JPG or PDF, max size 5MB (custom localized)",
+    selectBtn: "Browse custom files",
+    errorUploadingFile: "Custom error: please upload at least one file",
+    maxNumImages: "Custom limit reached for uploaded images: ",
+    errorUploadedTypes: "Custom error: allowed file types are only: ",
+    maxSizeExceededError:
+      "Custom error: maximum allowed size is MAX_FILE_SIZE MB, but your file is UPLOADED_FILE_SIZE MB",
+    duplicatesDenied:
+      "Custom error: duplicate file names are not allowed, please rename before uploading",
+  },
+  [LangKey.ARABIC]: {
+    dropHere: "أسقط الملف المخصص هنا",
+    selectFile: "اختر ملفًا مخصصًا أو اسحبه إلى هنا",
+    selectionTypes: "PNG، JPG أو PDF، الحجم الأقصى 5MB (نص مخصص)",
+    selectBtn: "استعراض الملفات المخصصة",
+    errorUploadingFile: "خطأ مخصص: يرجى رفع ملف واحد على الأقل",
+    maxNumImages: "خطأ مخصص: تم الوصول إلى الحد الأقصى للصور المرفوعة: ",
+    errorUploadedTypes: "خطأ مخصص: يمكنك فقط رفع الملفات من الأنواع التالية: ",
+    maxSizeExceededError:
+      "خطأ مخصص: الحد الأقصى المسموح هو MAX_FILE_SIZE ميغابايت، بينما حجم ملفك هو UPLOADED_FILE_SIZE ميغابايت",
+    duplicatesDenied:
+      "خطأ مخصص: لا يمكنك رفع ملفات بأسماء مكررة، يرجى إعادة تسميتها قبل الرفع",
+  },
+};

package/src/mocks/types.ts

@@ -0,0 +1,64 @@
+import { ItemChipProps } from "@/types";
+
+export type MockItemCategory =
+  | "laptops"
+  | "desktops"
+  | "monitors"
+  | "keyboards"
+  | "mice"
+  | "headsets"
+  | "printers"
+  | "storage"
+  | "components"
+  | "networking";
+
+export type MockColor =
+  | "red"
+  | "blue"
+  | "green"
+  | "yellow"
+  | "purple"
+  | "orange"
+  | "pink"
+  | "brown"
+  | "gray"
+  | "black"
+  | "white";
+
+export type MockItemBrand =
+  | "Apple"
+  | "Dell"
+  | "HP"
+  | "Lenovo"
+  | "Asus"
+  | "Acer"
+  | "MSI"
+  | "Razer"
+  | "Samsung"
+  | "Microsoft";
+
+export type MockReview = {
+  id: number; // unique and random UUID
+  rating: number; // from 1 to 5 (float) rounded to 1 decimal place
+  comment: string; // less than 50 characters
+  author: string; // less than 100 characters
+  createdAt: Date; // current date
+  updatedAt: Date; // current date
+};
+
+export type MockItemType = {
+  id: number; // unique and random UUID
+  title: string; // less than 100 characters
+  description: string; // less than 1000 characters
+  image: string; // url (actual image url)
+  price: number; // less than 10000
+  categories: ItemChipProps[]; // from 1 to 5 categories
+  isAvailable: boolean;
+  isBestSeller: boolean;
+  averageRating: number; // from 1 to 5 (float) rounded to 1 decimal place
+  reviews: MockReview[]; // from 0 to 100
+  brand: MockItemBrand;
+  color: MockColor;
+  createdAt: Date; // current date
+  updatedAt: Date; // current date
+};

package/src/providers/config-provider.tsx

@@ -0,0 +1,72 @@
+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({
+  children,
+  config = defaultEmperorUIConfig,
+}: ConfigProviderProps) {
+  const emperorUIProviderValue: ConfigContextState = useMemo(() => {
+    const mergedConfig: EmperorUIConfig = {
+      layout: {
+        ...defaultEmperorUIConfig?.layout,
+        ...config?.layout,
+      },
+      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,
+          }),
+        },
+      },
+      theme: {
+        ...defaultEmperorUIConfig?.theme,
+        ...config?.theme,
+        components: {
+          ...defaultEmperorUIConfig?.theme?.components,
+          ...config?.theme?.components,
+        },
+      },
+    };
+
+    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>
+  );
+}