@js-empire/emperor-ui 1.2.3 → 1.2.4

package/src/components/molecules/scaffold/scaffold.tsx

@@ -1,36 +1,23 @@
 import { useEmperorUI } from "@/hooks";
 import type { ScaffoldProps } from "@/types";
 import { cn } from "@/utils";
-import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
-
-const scaffoldStyles = cva(["flex flex-col min-h-screen w-full max-w-screen"], {
-  variants: {},
-  defaultVariants: {},
-  compoundVariants: [],
-});
+import { scaffoldClasses } from "@/components";
 
 export const Scaffold = forwardRef<HTMLDivElement, ScaffoldProps>(
   ({ className, children, ...props }, ref) => {
     const { config } = useEmperorUI();
 
-    const backgroundColor = config?.theme?.colors?.background;
-    const foregroundColor = config?.theme?.colors?.foreground;
-
     return (
-      <div
+      <main
         ref={ref}
         dir={config?.interLocalization?.dir}
         data-slot="scaffold"
-        className={cn(scaffoldStyles({ className }), className)}
-        style={{
-          backgroundColor: backgroundColor,
-          color: foregroundColor,
-        }}
+        className={cn(scaffoldClasses({ className }), className)}
         {...props}
       >
         {children}
-      </div>
+      </main>
     );
   },
 );

package/src/components/molecules/scaffold/styles/index.ts

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

package/src/components/molecules/scaffold/styles/scaffold-classes.ts

@@ -0,0 +1,10 @@
+import { cva } from "class-variance-authority";
+
+export const scaffoldClasses = cva(
+  ["flex flex-col min-h-screen w-full max-w-screen"],
+  {
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);

package/src/components/molecules/side-bar/compact-side-bar.tsx

@@ -1,7 +1,9 @@
 import { createPortal } from "react-dom";
 import { useEffect, useState } from "react";
 import { cn } from "@/utils";
-import { Button, Divider, ScrollShadow } from "@heroui/react";
+import { Button } from "@heroui/button";
+import { Divider } from "@heroui/divider";
+import { ScrollShadow } from "@heroui/scroll-shadow";
 import { CompactSideBarProps } from "@/types";
 
 const CompactSideBarContent = ({

package/src/components/molecules/side-bar/side-bar-drawer.tsx

@@ -1,15 +1,15 @@
 import { useEmperorUI } from "@/hooks";
 import { useState } from "react";
 import {
-  Button,
   Drawer,
   DrawerHeader,
   DrawerBody,
   DrawerContent,
-  ScrollShadow,
-  Divider,
   DrawerFooter,
-} from "@heroui/react";
+} from "@heroui/drawer";
+import { Button } from "@heroui/button";
+import { ScrollShadow } from "@heroui/scroll-shadow";
+import { Divider } from "@heroui/divider";
 import { SideBarProps } from "@/types";
 import { cn } from "@/utils";
 import { sideBarItemClasses, sideBarItemStyles } from "./styles";
@@ -29,9 +29,6 @@ export const SideBarDrawer = ({
   const { content, ...restTriggerProps } = triggerProps || {};
 
   const dir = config?.interLocalization?.dir;
-  const backgroundColor = config?.theme?.colors?.background;
-  const primaryColor = config?.theme?.colors?.primary;
-  const foregroundColor = config?.theme?.colors?.foreground;
 
   const isRTL = dir === "rtl";
 
@@ -56,10 +53,7 @@ export const SideBarDrawer = ({
         dir={dir}
         className="p-0"
       >
-        <DrawerContent
-          className="p-0"
-          style={{ backgroundColor, color: foregroundColor }}
-        >
+        <DrawerContent className="p-0">
           <DrawerHeader className={cn("text-xl font-bold", classNames?.title)}>
             {header}
           </DrawerHeader>
@@ -76,8 +70,6 @@ export const SideBarDrawer = ({
                   key={href}
                   data-slot="emperor-side-bar-item"
                   style={sideBarItemStyles({
-                    foregroundColor,
-                    primaryColor,
                     isHovered: hoveredItem === id,
                     variant,
                   })}
@@ -97,10 +89,7 @@ export const SideBarDrawer = ({
 
           {actions && actions?.length > 0 && (
             <>
-              <Divider
-                className="m-auto w-11/12"
-                style={{ backgroundColor: foregroundColor + "20" }}
-              />
+              <Divider className="m-auto w-11/12" />
 
               <DrawerFooter className={cn(classNames?.actionsWrapper)}>
                 {actions?.map(({ key, label, ...props }) => (

package/src/components/molecules/side-bar/side-bar.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Brand, SideBar } from "@/components";
 import { getStorybookDecorators } from "@/utils";
 import { MenuIcon } from "lucide-react";
-import { useDisclosure } from "@heroui/react";
+import { useDisclosure } from "@heroui/modal";
 import { MOCK_HEADER_ACTIONS, MOCK_HEADER_ITEMS } from "@/mocks";
 import { SideBarProps } from "@/types";
 

package/src/components/organisms/filters/filters.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Filter, Filters } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+
+const meta: Meta<typeof Filters> = {
+  title: "Organisms/Filters",
+  component: Filters,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+  render: () => (
+    <Filters>
+      <Filter type="search" paramKey="search" />
+    </Filters>
+  ),
+};

package/src/components/organisms/filters/filters.tsx

@@ -0,0 +1,36 @@
+import { cn } from "@/utils";
+import { FilterProps, FiltersProps } from "@/types";
+import { filtersClasses } from "./styles";
+import { Children, isValidElement, ReactElement } from "react";
+import { Filter } from "@/components";
+
+export function Filters({
+  className,
+  classNames,
+  children,
+  ...props
+}: FiltersProps) {
+  const childArray = Children.toArray(children).filter(
+    isValidElement,
+  ) as ReactElement<FilterProps, typeof Filter>[];
+
+  childArray.forEach((child) => {
+    const type = child.type;
+
+    if (type !== Filter) {
+      throw new Error(
+        `Allowed children for <Filters /> must be of type <Filter />. Got ${type} instead.`,
+      );
+    }
+  });
+
+  return (
+    <nav
+      data-slot="emperor-ui-filters"
+      className={cn(filtersClasses({}), className)}
+      {...props}
+    >
+      <ul className="flex items-center gap-2">{children}</ul>
+    </nav>
+  );
+}

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

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

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

@@ -0,0 +1,9 @@
+import { cva } from "class-variance-authority";
+
+export const filtersClasses = cva([""], {
+  variants: {
+    variant: {},
+  },
+  defaultVariants: {},
+  compoundVariants: [],
+});

package/src/components/organisms/filters/styles/index.ts

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

package/src/components/organisms/footer/copy-rights-box.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@heroui/react";
+import { cn } from "@/utils";
 import { FooterProps } from "@/types";
 import { copyRightsClasses } from "./styles";
 

package/src/components/organisms/footer/footer.tsx

@@ -9,7 +9,7 @@ import {
   SocialLinksBox,
   CopyRightsBox,
 } from "@/components";
-import { Divider } from "@heroui/react";
+import { Divider } from "@heroui/divider";
 
 export const Footer = forwardRef<
   HTMLElement,

package/src/components/organisms/footer/policies-box.tsx

@@ -1,4 +1,5 @@
-import { cn, Link } from "@heroui/react";
+import { cn } from "@/utils";
+import { Link } from "@heroui/link";
 import { FooterProps } from "@/types";
 import { policiesClasses } from "./styles";
 

package/src/components/organisms/footer/quick-links-box.tsx

@@ -1,4 +1,5 @@
-import { cn, Link } from "@heroui/react";
+import { cn } from "@/utils";
+import { Link } from "@heroui/link";
 import { FooterProps } from "@/types";
 import { quickLinksClasses } from "./styles";
 

package/src/components/organisms/footer/social-links-box.tsx

@@ -1,4 +1,5 @@
-import { cn, Link } from "@heroui/react";
+import { cn } from "@/utils";
+import { Link } from "@heroui/link";
 import { FooterProps } from "@/types";
 import { socialLinksClasses } from "./styles";
 

package/src/components/organisms/footer/stories/footer.stories.tsx

@@ -11,7 +11,7 @@ import {
   contacts,
   socialLinks,
 } from "@/constants";
-import { Button } from "@heroui/react";
+import { Button } from "@heroui/button";
 
 const meta: Meta<typeof Footer> = {
   title: "Organisms/Footer",

package/src/components/organisms/header/header.tsx

@@ -1,11 +1,10 @@
-import { useEmperorUI } from "@/hooks";
 import type { HeaderProps, NavBarHoverEffect, NavBarVariant } from "@/types";
 import { cn } from "@/utils";
 import { VariantProps } from "class-variance-authority";
 import { ComponentProps, forwardRef } from "react";
 import { Brand, NavBar, SideBar } from "@/components";
 import { headerClasses, headerStyles } from "./styles";
-import { useDisclosure } from "@heroui/react";
+import { useDisclosure } from "@heroui/modal";
 import { MOCK_HEADER_ITEMS, MOCK_HEADER_ACTIONS } from "@/mocks";
 import { SegmentedHeaderContent } from "./segmented-header-content";
 
@@ -17,12 +16,8 @@ export const Header = forwardRef<
     { className, variant = "default", glassEffect, children, ...props },
     ref,
   ) => {
-    const { config } = useEmperorUI();
     const { isOpen, onOpenChange } = useDisclosure();
 
-    const primaryColor = config?.theme?.colors?.primary;
-    const foregroundColor = config?.theme?.colors?.foreground;
-
     const content = children || (
       <>
         <SideBar
@@ -74,8 +69,6 @@ export const Header = forwardRef<
         data-slot="emperor-header"
         className={cn(headerClasses({ variant, className }))}
         style={headerStyles({
-          primaryColor,
-          foregroundColor,
           variant,
           glassEffect,
         })}

package/src/components/organisms/index.ts

@@ -2,3 +2,4 @@ export * from "./item-details";
 export * from "./listings";
 export * from "./footer";
 export * from "./header";
+export * from "./filters";

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: [],
+  },
+};