@js-empire/emperor-ui 1.2.3 → 1.2.5

package/src/components/organisms/listings/stories/list-listings.stories.tsx

@@ -0,0 +1,171 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Listings } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import { getListings, MOCK_LISTINGS } from "@/mocks";
+import type { MockItemType } from "@/mocks";
+import { useMemo, useState } from "react";
+import { useEffect } from "react";
+import { ListingsProps } from "@/types";
+import { usePagination } from "@heroui/pagination";
+
+const meta: Meta<typeof Listings> = {
+  title: "Organisms/Listings/List",
+  component: Listings,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    layout: "list",
+  },
+  render: (args: ListingsProps) => {
+    return (
+      <main className="w-screen container mx-auto p-5">
+        <Listings
+          {...args}
+          items={MOCK_LISTINGS.map((item) => ({
+            item: {
+              key: String(item.id),
+              title: item?.title,
+              description: item.description,
+              image: { src: item?.image, alt: item?.title },
+            },
+          }))}
+        />
+      </main>
+    );
+  },
+};
+
+export const WithLoading: Story = {
+  args: {
+    layout: "list",
+  },
+  render: (args: ListingsProps) => {
+    const [items, setItems] = useState<MockItemType[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+      (async () => {
+        const { items } = await getListings({});
+
+        setItems(items);
+        setIsLoading(false);
+      })();
+    }, []);
+
+    return (
+      <Listings
+        {...args}
+        isLoading={isLoading}
+        items={items.map((item) => ({
+          item: {
+            key: String(item.id),
+            title: item?.title,
+            description: item.description,
+            image: { src: item?.image, alt: item?.title },
+          },
+        }))}
+      />
+    );
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    layout: "list",
+    items: MOCK_LISTINGS.map((item) => ({
+      item: {
+        key: String(item.id),
+        title: item?.title,
+        description: item.description,
+        image: { src: item?.image, alt: item?.title },
+      },
+      actions: [
+        { key: "view", label: "View details" },
+        { key: "edit", label: "Edit" },
+        { key: "delete", label: "Delete" },
+      ],
+    })),
+  },
+};
+
+export const WithPagination: Story = {
+  args: {
+    layout: "list",
+  },
+  render: (args: ListingsProps) => {
+    const [items, setItems] = useState<MockItemType[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+
+    const pageSize = 6;
+    const totalItemsCount = MOCK_LISTINGS.length;
+    const pagesCount = useMemo(
+      () => Math.ceil(totalItemsCount / pageSize),
+      [totalItemsCount, pageSize],
+    );
+
+    const { activePage: page, setPage } = usePagination({
+      total: pagesCount,
+      initialPage: 1,
+    });
+
+    useEffect(() => {
+      (async () => {
+        setIsLoading(true);
+
+        const { items } = await getListings({
+          page,
+          pageSize,
+        });
+
+        setItems(items);
+        setIsLoading(false);
+      })();
+    }, [page]);
+
+    return (
+      <Listings
+        {...args}
+        isLoading={isLoading}
+        items={items.map((item) => ({
+          item: {
+            key: String(item.id),
+            title: item?.title,
+            description: item.description,
+            image: { src: item?.image, alt: item?.title },
+            banner: item?.isBestSeller ? "Best Seller" : undefined,
+            chips: item?.categories || [],
+          },
+        }))}
+        pagination={{
+          page,
+          setPage,
+          pageSize,
+          totalItemsCount,
+          pagesCount,
+        }}
+      />
+    );
+  },
+};
+
+export const EmptyListings: Story = {
+  args: {
+    items: [],
+  },
+};

package/src/components/organisms/listings/styles/classes.ts

@@ -1,11 +1,49 @@
 import { cva } from "class-variance-authority";
 
-export const listingsClasses = cva([], {
+export const listingsClasses = cva(["w-full p-4 gap-4 relative"], {
   variants: {
-    variant: {
-      default: [],
+    layout: {
+      grid: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+      list: "flex flex-col gap-4",
+      carousel: "flex flex-col gap-4",
     },
   },
   defaultVariants: {},
   compoundVariants: [],
 });
+
+export const listingsItemClasses = cva([""], {
+  variants: {
+    layout: {
+      grid: "size-full",
+      list: "w-full h-fit",
+      carousel: "",
+    },
+  },
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const listingsPaginationClasses = cva(["mx-auto my-5 col-span-full"], {
+  variants: {
+    layout: {
+      grid: "",
+      list: "",
+      carousel: "",
+    },
+  },
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const emptyListingsClasses = cva(
+  [
+    "flex flex-col items-center justify-center min-h-[280px] w-full py-12 px-4",
+    "text-center",
+  ],
+  {
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);

package/src/constants/animations.ts

@@ -0,0 +1,14 @@
+/* eslint-disable no-empty-pattern */
+import { ItemCardHoverEffect } from "@/types";
+import { MotionProps } from "framer-motion";
+
+export const getCardMotion = ({}: {
+  hoverEffect: ItemCardHoverEffect;
+}): MotionProps => ({
+  initial: { opacity: 0, y: 12 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.3, ease: "easeOut" as const },
+  whileHover: {
+    y: -4,
+  },
+});

package/src/constants/card.tsx

@@ -0,0 +1,26 @@
+import { Eye, Pencil, Trash2 } from "lucide-react";
+import { ItemCardAction } from "@/types";
+
+export const ITEM_CARD_ACTIONS: ItemCardAction[] = [
+  {
+    key: "view",
+    label: "View details",
+    color: "primary",
+    variant: "flat",
+    startContent: <Eye className="size-4" />,
+  },
+  {
+    key: "edit",
+    label: "Edit",
+    color: "secondary",
+    variant: "flat",
+    startContent: <Pencil className="size-4" />,
+  },
+  {
+    key: "delete",
+    label: "Delete",
+    color: "danger",
+    variant: "flat",
+    startContent: <Trash2 className="size-4" />,
+  },
+];

package/src/constants/defaults.ts

@@ -1,22 +1,7 @@
 import { en, ar } from "@/i18n";
-import type { ColorsPalette, EmperorUIConfig } from "@/types";
-
-export const defaultColorsPalette: ColorsPalette = {
-  primary: "#006FEE",
-  secondary: "#9353d3",
-  background: "#3f3f46",
-  foreground: "#ECEDEE",
-  success: "#17c964",
-  warning: "#f5a524",
-  danger: "#f31260",
-  info: "#3B82F6",
-};
+import type { EmperorUIConfig } from "@/types";
 
 export const defaultEmperorUIConfig: EmperorUIConfig = {
-  theme: {
-    mode: "dark",
-    colors: defaultColorsPalette,
-  },
   layout: {
     withScaffold: true,
   },

package/src/constants/index.ts

@@ -2,3 +2,5 @@ export * from "./defaults";
 export * from "./fake";
 export * from "./uploader";
 export * from "./footer";
+export * from "./animations";
+export * from "./card";

package/src/hooks/index.ts

@@ -1,4 +1,7 @@
 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";

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 } = useSearchParamsHandler();
+
+  const filters = useMemo(() => {
+    if (!Object.keys(allParams).length) {
+      return null;
+    }
+
+    return allParams as unknown as FiltersType;
+  }, [allParams]);
+
+  return { filters };
+}

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.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { addToast } from "@heroui/react";
+import { addToast } from "@heroui/toast";
 import { FileObject, UseUploadFileProps, UseUploadFileReturn } from "@/types";
 import { useState } from "react";
 import { useEmperorUI } from "@/hooks";

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/locales/atoms/ar.ts

@@ -1,4 +1,7 @@
 export const atomsAr = {
+  colorPicker: {
+    invalidColorFormat: "يرجى إدخال لون صالح (مثال: #000000 أو #fff)",
+  },
   uploader: {
     dropHere: "أسقط الملف هنا",
     selectFile: "حدد ملفًا أو اسحبه وأفلته هنا",

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

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

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

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

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

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