@js-empire/emperor-ui 1.2.2 → 1.2.4

package/src/components/organisms/listings/empty-listings.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { Locale } from "@/i18n";
+import { Inbox } from "lucide-react";
+import { motion } from "framer-motion";
+import { cn } from "@/utils";
+import { emptyListingsClasses } from "@/components";
+import { useEmperorUI } from "@/hooks";
+import { blinkContainer, blinkItem, floating } from "@/animations";
+
+export function EmptyListings({
+  className,
+  classNames,
+}: {
+  className?: string;
+  classNames?: {
+    wrapper?: string;
+    iconWrapper?: string;
+    title?: string;
+    description?: string;
+  };
+}) {
+  const { config } = useEmperorUI();
+
+  const locales = config?.interLocalization?.locales;
+  const lang = config?.interLocalization?.lang;
+
+  const locale = locales?.[lang || "en"] as Locale;
+  const listingsLocale = locale?.organisms?.listings;
+
+  return (
+    <motion.div
+      data-slot="emperor-ui-empty-listings"
+      className={cn(emptyListingsClasses(), className)}
+      variants={blinkContainer}
+      initial="hidden"
+      animate="visible"
+    >
+      <motion.div
+        className={cn(
+          "flex items-center justify-center rounded-2xl bg-default-100/80 p-6 mb-5",
+          classNames?.iconWrapper,
+        )}
+        variants={blinkItem}
+      >
+        <motion.div
+          variants={floating}
+          animate="animate"
+          className="flex items-center justify-center"
+        >
+          <Inbox
+            className="size-14 text-default-400"
+            strokeWidth={1.25}
+            aria-hidden
+          />
+        </motion.div>
+      </motion.div>
+
+      <motion.h2
+        className={cn(
+          "text-xl font-semibold text-foreground mb-2",
+          classNames?.title,
+        )}
+        variants={blinkItem}
+      >
+        {listingsLocale?.emptyTitle}
+      </motion.h2>
+
+      <motion.p
+        className={cn(
+          "text-sm text-default-500 max-w-sm",
+          classNames?.description,
+        )}
+        variants={blinkItem}
+      >
+        {listingsLocale?.emptyDescription}
+      </motion.p>
+    </motion.div>
+  );
+}

package/src/components/organisms/listings/index.ts

@@ -1 +1,3 @@
 export * from "./listings";
+export * from "./empty-listings";
+export * from "./styles";

package/src/components/organisms/listings/listings.tsx

@@ -1,15 +1,96 @@
-import type { ListingsProps } from "@/types";
-import { listingsClasses, listingsStyles } from "./styles";
+import { EmptyListings, ItemCard, LoadingItem } from "@/components";
+import type { ItemCardOrientation, ListingsProps } from "@/types";
+import { cn } from "@/utils";
+import {
+  listingsClasses,
+  listingsItemClasses,
+  listingsPaginationClasses,
+  listingsStyles,
+} from "./styles";
+import { Pagination } from "@heroui/pagination";
+import { motion } from "framer-motion";
 
-export function Listings<ListingType>({
+export function Listings({
+  items = [],
+  isLoading = false,
   className,
-  variant = "default",
-}: ListingsProps<ListingType>) {
+  classNames,
+  layout = "grid",
+  actions = [],
+  onActionClick,
+  pagination,
+}: ListingsProps) {
+  const orientation: ItemCardOrientation = {
+    grid: "vertical",
+    list: "horizontal",
+    carousel: "vertical",
+  }[layout] as ItemCardOrientation;
+
+  const isEmpty = items?.length === 0;
+
   return (
-    <section
+    <motion.section
       data-slot="emperor-ui-listings"
-      className={listingsClasses({ className, variant })}
-      style={listingsStyles({ variant })}
-    ></section>
+      className={cn(listingsClasses({ className, layout }))}
+      style={listingsStyles({ layout })}
+      initial="hidden"
+      animate="visible"
+    >
+      {isLoading &&
+        Array.from({ length: pagination?.pageSize || 12 }).map((_, index) => (
+          <LoadingItem
+            key={index}
+            className={className}
+            classNames={classNames}
+            orientation={orientation}
+          />
+        ))}
+
+      {!isLoading && isEmpty && <EmptyListings className="col-span-full" />}
+
+      {!isLoading &&
+        !isEmpty &&
+        items?.map(
+          ({
+            item,
+            actions: itemActions,
+            onActionClick: onItemActionClick,
+          }) => (
+            <ItemCard
+              key={item?.key}
+              className={cn(listingsItemClasses({ layout }), classNames?.item)}
+              item={item}
+              isLoading={isLoading}
+              actions={itemActions || actions || []}
+              onActionClick={onItemActionClick || onActionClick}
+              orientation={orientation}
+            />
+          ),
+        )}
+
+      {!isLoading && !isEmpty && pagination && (
+        <Pagination
+          className={cn(
+            listingsPaginationClasses({ layout }),
+            classNames?.pagination,
+          )}
+          classNames={{
+            next: "rtl:rotate-180 cursor-pointer",
+            prev: "rtl:rotate-180 cursor-pointer",
+            item: "cursor-pointer",
+            chevronNext: "rtl:rotate-180 cursor-pointer",
+            forwardIcon: "rtl:rotate-180 cursor-pointer",
+          }}
+          total={pagination?.pagesCount}
+          page={pagination?.page}
+          onChange={pagination?.setPage}
+          variant="faded"
+          showControls
+          color="primary"
+          initialPage={1}
+          showShadow
+        />
+      )}
+    </motion.section>
   );
 }

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

@@ -0,0 +1,153 @@
+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 { usePagination } from "@heroui/pagination";
+
+const meta: Meta<typeof Listings> = {
+  title: "Organisms/Listings/Grid",
+  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: {
+    items: MOCK_LISTINGS.map((item) => ({
+      item: {
+        key: String(item.id),
+        title: item?.title,
+        description: item.description,
+        image: { src: item?.image, alt: item?.title },
+      },
+    })),
+  },
+};
+
+export const WithLoading: Story = {
+  args: {},
+  render: () => {
+    const [items, setItems] = useState<MockItemType[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+      (async () => {
+        const { items } = await getListings({});
+
+        setItems(items);
+        setIsLoading(false);
+      })();
+    }, []);
+
+    return (
+      <Listings
+        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: {
+    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: {},
+  render: () => {
+    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
+        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/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 };
+}