@js-empire/emperor-ui 1.2.2 → 1.2.4

package/src/components/molecules/item-card/stories/item-card.stories.tsx

@@ -0,0 +1,182 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ItemCard } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import { getListing, MOCK_LISTINGS } from "@/mocks";
+import type { MockItemType } from "@/mocks";
+import { useEffect, useState } from "storybook/internal/preview-api";
+import { ItemCardProps } from "@/types";
+import { ITEM_CARD_ACTIONS } from "@/constants";
+
+const meta: Meta<typeof ItemCard> = {
+  title: "Molecules/Item Card",
+  component: ItemCard,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    item: {
+      key: String(MOCK_LISTINGS[0]?.id),
+      title: MOCK_LISTINGS[0]?.title,
+      description: MOCK_LISTINGS[0]?.description,
+      image: {
+        src: MOCK_LISTINGS[0]?.image || "",
+        alt: MOCK_LISTINGS[0]?.title || "",
+      },
+    },
+  },
+};
+
+export const WithLoading: Story = {
+  args: {},
+  render: () => {
+    const [item, setItem] = useState<MockItemType | null | undefined>(null);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+      (async () => {
+        const { item } = await getListing();
+
+        setItem(item);
+        setIsLoading(false);
+      })();
+    }, []);
+
+    return (
+      <ItemCard
+        isLoading={isLoading}
+        item={{
+          key: String(item?.id),
+          title: item?.title,
+          description: item?.description,
+          image: { src: item?.image || "", alt: item?.title || "" },
+        }}
+      />
+    );
+  },
+};
+
+export const WithHorizontalLoading: Story = {
+  args: {
+    orientation: "horizontal",
+  },
+  render: (args: ItemCardProps) => {
+    const [item, setItem] = useState<MockItemType | null | undefined>(null);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+      (async () => {
+        const { item } = await getListing();
+
+        setItem(item);
+        setIsLoading(false);
+      })();
+    }, []);
+
+    return (
+      <ItemCard
+        {...args}
+        isLoading={isLoading}
+        item={{
+          key: String(item?.id),
+          title: item?.title,
+          description: item?.description,
+          image: { src: item?.image || "", alt: item?.title || "" },
+        }}
+      />
+    );
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    item: {
+      key: String(MOCK_LISTINGS[0]?.id),
+      title: MOCK_LISTINGS[0]?.title,
+      description: MOCK_LISTINGS[0]?.description,
+      image: {
+        src: MOCK_LISTINGS[0]?.image || "",
+        alt: MOCK_LISTINGS[0]?.title || "",
+      },
+    },
+    actions: ITEM_CARD_ACTIONS,
+  },
+};
+
+export const WithChips: Story = {
+  args: {
+    item: {
+      key: String(MOCK_LISTINGS[2]?.id),
+      title: MOCK_LISTINGS[2]?.title,
+      description: MOCK_LISTINGS[2]?.description,
+      image: {
+        src: MOCK_LISTINGS[2]?.image || "",
+        alt: MOCK_LISTINGS[2]?.title || "",
+      },
+      chips: MOCK_LISTINGS[2]?.categories,
+    },
+  },
+};
+
+export const WithBanner: Story = {
+  args: {
+    item: {
+      key: String(MOCK_LISTINGS[0]?.id),
+      title: MOCK_LISTINGS[0]?.title,
+      description: MOCK_LISTINGS[0]?.description,
+      image: {
+        src: MOCK_LISTINGS[0]?.image || "",
+        alt: MOCK_LISTINGS[0]?.title || "",
+      },
+      banner: MOCK_LISTINGS[0]?.isBestSeller ? "Best Seller" : undefined,
+    },
+  },
+};
+
+export const WithPrice: Story = {
+  args: {
+    item: {
+      key: String(MOCK_LISTINGS[0]?.id),
+      title: MOCK_LISTINGS[0]?.title,
+      description: MOCK_LISTINGS[0]?.description,
+      price: `$ ${MOCK_LISTINGS[0]?.price}`,
+      image: {
+        src: MOCK_LISTINGS[0]?.image || "",
+        alt: MOCK_LISTINGS[0]?.title || "",
+      },
+    },
+  },
+};
+
+export const Horizontal: Story = {
+  args: {
+    orientation: "horizontal",
+    actions: ITEM_CARD_ACTIONS,
+    item: {
+      key: String(MOCK_LISTINGS[0]?.id),
+      title: MOCK_LISTINGS[0]?.title,
+      description: MOCK_LISTINGS[0]?.description,
+      image: {
+        src: MOCK_LISTINGS[0]?.image || "",
+        alt: MOCK_LISTINGS[0]?.title || "",
+      },
+      banner: MOCK_LISTINGS[0]?.isBestSeller ? "Best Seller" : undefined,
+      chips: MOCK_LISTINGS[0]?.categories,
+      price: `$ ${MOCK_LISTINGS[0]?.price}`,
+    },
+  },
+};

package/src/components/molecules/item-card/styles/classes.ts

@@ -0,0 +1,138 @@
+import { cva } from "class-variance-authority";
+
+export const itemCardMotionClasses = cva(["w-full relative"], {
+  variants: {
+    orientation: {
+      vertical: "max-w-80",
+      horizontal: "min-w-full max-w-full",
+    },
+  },
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const itemMainWrapperClasses = cva(["size-full"], {
+  variants: {
+    orientation: {
+      vertical: "flex flex-col",
+      horizontal: "grid grid-cols-[200px_auto]",
+    },
+  },
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const itemImageWrapperClasses = cva(
+  ["relative aspect-4/3 overflow-hidden"],
+  {
+    variants: {
+      orientation: {
+        vertical: "w-full",
+        horizontal: "w-fit h-full",
+      },
+    },
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);
+
+export const itemHeaderClasses = cva(["relative p-0"], {
+  variants: {
+    orientation: {
+      vertical: "",
+      horizontal: "row-span-2",
+    },
+  },
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const itemBodyClasses = cva(["relative flex flex-col gap-2 p-4"], {
+  variants: {
+    orientation: {
+      vertical: "",
+      horizontal: "",
+    },
+  },
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const itemFooterClasses = cva(["flex items-center p-4"], {
+  variants: {
+    orientation: {
+      vertical: "",
+      horizontal: "justify-end",
+    },
+  },
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const itemTitleClasses = cva(
+  ["line-clamp-1 font-semibold text-foreground"],
+  {
+    variants: {
+      orientation: {
+        vertical: "",
+        horizontal: "w-[calc(100%-30px)]",
+      },
+    },
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);
+
+export const itemPriceClasses = cva(["text-2xl font-bold text-foreground"], {
+  variants: {
+    orientation: {
+      vertical: "",
+      horizontal: "",
+    },
+  },
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const itemDescriptionClasses = cva(
+  ["line-clamp-2 text-sm text-default-600"],
+  {
+    variants: {
+      orientation: {
+        vertical: "",
+        horizontal: "",
+      },
+    },
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);
+
+export const itemChipsClasses = cva(["flex flex-wrap items-center gap-2 p-1"], {
+  variants: {
+    orientation: {
+      vertical: "",
+      horizontal: "",
+    },
+  },
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const itemBannerClasses = cva(
+  [
+    "absolute left-0 top-0 z-10 px-2 py-1 text-xs font-semibold",
+    "bg-primary-500/50 backdrop-blur-sm text-center flex justify-center items-center",
+    "-rotate-45 w-full text-white",
+  ],
+  {
+    variants: {
+      orientation: {
+        vertical: "-translate-x-28 translate-y-7",
+        horizontal: "-translate-x-14 translate-y-7",
+      },
+    },
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);

package/src/components/molecules/item-card/styles/index.ts

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

package/src/components/molecules/nav-bar/sub-items-box.tsx

@@ -1,4 +1,5 @@
-import { cn, Link } from "@heroui/react";
+import { cn } from "@/utils";
+import { Link } from "@heroui/link";
 import { useNavigation } from "@/hooks";
 import { SubItemsBoxProps } from "@/types";
 

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

@@ -1 +1,2 @@
 export * from "./scaffold";
+export * from "./styles";

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";