@js-empire/emperor-ui 1.2.3 → 1.2.5

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/index.ts

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

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/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

@@ -20,14 +20,6 @@ export function ConfigProvider({
         ...defaultEmperorUIConfig?.layout,
         ...config?.layout,
       },
-      theme: {
-        ...defaultEmperorUIConfig?.theme,
-        ...config?.theme,
-        colors: {
-          ...defaultEmperorUIConfig?.theme?.colors,
-          ...config?.theme?.colors,
-        },
-      },
       interLocalization: {
         ...defaultEmperorUIConfig?.interLocalization,
         ...config?.interLocalization,

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

@@ -1,7 +1,8 @@
 import { ConfigProviderProps } from "@/types";
 import { ConfigProvider, NavigationProvider } from "@/providers";
-import { HeroUIProvider, ToastProvider } from "@heroui/react";
-import { Fragment } from "react";
+import { HeroUIProvider } from "@heroui/system";
+import { ToastProvider } from "@heroui/toast";
+import { ThemeProvider } from "next-themes";
 
 type EmperorUIProviderProps = ConfigProviderProps & {};
 
@@ -13,10 +14,20 @@ export function EmperorUIProvider({
     <ConfigProvider {...props}>
       <HeroUIProvider>
         <NavigationProvider>
-          <Fragment>
-            <ToastProvider {...props?.config?.toast} />
+          <ThemeProvider>
+            <ToastProvider
+              placement="top-center"
+              toastProps={{
+                radius: "lg",
+                size: "lg",
+                color: "primary",
+                variant: "flat",
+                timeout: 4000,
+              }}
+              {...props?.config?.toast}
+            />
             {children}
-          </Fragment>
+          </ThemeProvider>
         </NavigationProvider>
       </HeroUIProvider>
     </ConfigProvider>

package/src/providers/index.ts

@@ -2,3 +2,4 @@ export * from "./config-provider";
 export * from "./emperor-ui-provider";
 export * from "./navigation-provider";
 export * from "./uploader-provider";
+export * from "./theme-provider";

package/src/providers/theme-provider.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { ReactNode } from "react";
+
+export type ThemeProviderProps = {
+  children: ReactNode;
+};
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  return (
+    <NextThemesProvider attribute="class" defaultTheme="system" enableSystem>
+      {children}
+    </NextThemesProvider>
+  );
+}

package/src/providers/uploader-provider.tsx

@@ -5,7 +5,7 @@ import type {
 } from "@/types";
 import { useMemo, useState } from "react";
 import { UploaderContext } from "@/context";
-import { useDisclosure } from "@heroui/react";
+import { useDisclosure } from "@heroui/modal";
 
 export function UploaderProvider({
   children,

package/src/styles/hero.ts

@@ -1,2 +1,2 @@
-import { heroui } from "@heroui/react";
+import { heroui } from "@heroui/theme";
 export default heroui();

package/src/styles/index.css

@@ -0,0 +1,23 @@
+@import "tailwindcss";
+
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}

package/src/types/components/atoms/color-picker/color-picker.ts

@@ -0,0 +1,12 @@
+import { InputProps } from "@heroui/input";
+import { SelectProps } from "@heroui/select";
+
+export type ColorPickerInputType = "free" | "preset";
+
+export type ColorPickerProps = Omit<
+  InputProps & SelectProps,
+  "onChange" | "children"
+> & {
+  inputType: ColorPickerInputType;
+  presets?: string[];
+};

package/src/types/components/atoms/color-picker/index.ts

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

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

@@ -0,0 +1,9 @@
+import type { SharedComponentProps } from "@/types";
+
+export type FieldClassnames = {
+  base?: string;
+};
+
+export type FieldProps = SharedComponentProps & {
+  classNames?: FieldClassnames;
+};

package/src/types/components/atoms/field/index.ts

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

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

@@ -0,0 +1,43 @@
+import type { SelectFilterProps, SharedComponentProps } from "@/types";
+import { AutocompleteProps } from "@heroui/autocomplete";
+import { CheckboxGroupProps } from "@heroui/checkbox";
+import { CheckboxProps } from "@heroui/checkbox";
+import { DatePickerProps } from "@heroui/date-picker";
+import { InputProps } from "@heroui/input";
+import { RadioProps } from "@heroui/radio";
+import { SelectProps } from "@heroui/select";
+import { SliderProps } from "@heroui/slider";
+import { SwitchProps } from "@heroui/switch";
+
+export type FilterClassnames = {
+  base?: string;
+  field?: string;
+};
+
+export type FilterType =
+  | "search"
+  | "select"
+  | "autocomplete"
+  | "date"
+  | "numeric"
+  | "checkbox"
+  | "checkboxGroup"
+  | "switch"
+  | "range";
+
+export type FilterProps = SharedComponentProps &
+  SelectFilterProps & {
+    classNames?: FilterClassnames;
+    type: FilterType;
+    paramKey: string;
+    searchProps?: InputProps;
+    selectProps?: Omit<SelectProps, "children">;
+    autocompleteProps?: AutocompleteProps;
+    dateProps?: DatePickerProps;
+    numericProps?: InputProps;
+    checkboxProps?: CheckboxProps;
+    checkboxGroupProps?: CheckboxGroupProps;
+    radioProps?: RadioProps;
+    switchProps?: SwitchProps;
+    rangeProps?: SliderProps;
+  };

package/src/types/components/atoms/filter/index.ts

@@ -0,0 +1,2 @@
+export type * from "./filter";
+export type * from "./select-filter";

package/src/types/components/atoms/filter/select-filter.ts

@@ -0,0 +1,8 @@
+export type SelectOption = {
+  key: string;
+  label: string;
+};
+
+export type SelectFilterProps = {
+  options?: SelectOption[];
+};

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

@@ -4,3 +4,6 @@ export * from "./uploader";
 export * from "./column";
 export * from "./row";
 export * from "./container";
+export * from "./filter";
+export * from "./field";
+export * from "./color-picker";

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

@@ -1,5 +1,5 @@
 import type { SharedComponentProps } from "@/types";
-import { ModalProps } from "@heroui/react";
+import { ModalProps } from "@heroui/modal";
 import { Dispatch, ReactNode, SetStateAction } from "react";
 
 export type UploaderProps = SharedComponentProps &

package/src/types/components/index.ts

@@ -1,3 +1,4 @@
 export type * from "./molecules";
 export type * from "./atoms";
 export type * from "./templates";
+export type * from "./organisms";

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

@@ -3,7 +3,7 @@ export type * from "./listings";
 export type * from "./nav-bar";
 export type * from "./side-bar";
 export type * from "./scaffold";
-export type * from "./filter";
 export type * from "./footer";
 export type * from "./item-card";
 export type * from "./item-details";
+export type * from "./theme-switch";

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

@@ -1,9 +1,59 @@
 import type { SharedComponentProps } from "@/types";
+import { ReactNode } from "react";
+import { Variants } from "framer-motion";
+import { ChipProps } from "@heroui/chip";
+import { DropdownItemProps } from "@heroui/dropdown";
 
 export type ItemCardClassnames = {
   base?: string;
+  image?: string;
+  header?: string;
+  footer?: string;
+  imageWrapper?: string;
+  mainWrapper?: string;
+  banner?: string;
+  dropdown?: string;
+  body?: string;
+  title?: string;
+  price?: string;
+  description?: string;
+  chips?: string;
+  chip?: string;
+};
+
+export type ItemCardAction = DropdownItemProps & {
+  key: string;
+  label: string;
+};
+
+export type ItemCardHoverEffect = "none" | "zoom" | "rotate";
+
+export type ItemCardOrientation = "horizontal" | "vertical";
+
+export type ItemChipProps = ChipProps & {
+  label: string;
+};
+
+export type ItemProps = {
+  key: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  image?: {
+    src: string;
+    alt: string;
+  };
+  chips?: ItemChipProps[];
+  banner?: ReactNode;
+  price?: ReactNode;
 };
 
 export type ItemCardProps = SharedComponentProps & {
+  variants?: Variants;
+  isLoading?: boolean;
+  hoverEffect?: ItemCardHoverEffect;
   classNames?: ItemCardClassnames;
+  item: ItemProps;
+  actions?: ItemCardAction[];
+  onActionClick?: (key: string) => void;
+  orientation?: ItemCardOrientation;
 };

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

@@ -1,13 +1,29 @@
-import type { SharedComponentProps } from "@/types";
+import type {
+  ItemCardAction,
+  ItemCardProps,
+  SharedComponentProps,
+} from "@/types";
 
 export type ListingsClassnames = {
   base?: string;
+  item?: string;
+  pagination?: string;
 };
 
-export type ListingsVariant = "default";
+export type ListingsLayout = "grid" | "list" | "carousel";
 
-export type ListingsProps<ListingType> = SharedComponentProps & {
+export type ListingsProps = SharedComponentProps & {
   classNames?: ListingsClassnames;
-  variant?: ListingsVariant;
-  items: ListingType[];
+  layout?: ListingsLayout;
+  items: ItemCardProps[];
+  isLoading?: boolean;
+  actions?: ItemCardAction[];
+  onActionClick?: (key: string) => void;
+  pagination?: {
+    page: number;
+    setPage: (page: number) => void;
+    pageSize: number;
+    totalItemsCount: number;
+    pagesCount: number;
+  };
 };

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

@@ -1,4 +1,4 @@
-import { ButtonProps } from "@heroui/react";
+import { ButtonProps } from "@heroui/button";
 import type { NavigationItem, SharedComponentProps } from "@/types";
 import type { ReactNode } from "react";
 

package/src/types/components/molecules/theme-switch/index.ts

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

package/src/types/components/molecules/theme-switch/theme-switch.ts

@@ -0,0 +1,9 @@
+import type { SharedComponentProps } from "@/types";
+
+export type ThemeSwitchClassnames = {
+  base?: string;
+};
+
+export type ThemeSwitchProps = SharedComponentProps & {
+  classNames?: ThemeSwitchClassnames;
+};