@js-empire/emperor-ui 1.2.3 → 1.2.4

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

@@ -0,0 +1,68 @@
+"use client";
+
+import type { ItemCardProps } from "@/types";
+import { cn } from "@/utils";
+import {
+  itemBodyClasses,
+  itemDescriptionClasses,
+  itemPriceClasses,
+  itemTitleClasses,
+} from "./styles";
+import { CardBody } from "@heroui/card";
+import { ItemActionsDropdown } from "./item-actions-dropdown";
+
+export function ItemCardBody({
+  item,
+  orientation,
+  classNames,
+  actions,
+  onActionClick,
+}: Pick<
+  ItemCardProps,
+  "item" | "orientation" | "classNames" | "actions" | "onActionClick"
+>) {
+  return (
+    <CardBody
+      data-slot="emperor-ui-item-card-body"
+      className={cn(itemBodyClasses({ orientation }), classNames?.body)}
+    >
+      {item?.title && (
+        <h3
+          data-slot="emperor-ui-item-card-title"
+          className={cn(itemTitleClasses({ orientation }), classNames?.title)}
+        >
+          {item?.title}
+        </h3>
+      )}
+
+      {item?.description && (
+        <p
+          data-slot="emperor-ui-item-card-description"
+          className={cn(
+            itemDescriptionClasses({ orientation }),
+            classNames?.description,
+          )}
+        >
+          {item?.description}
+        </p>
+      )}
+
+      {item?.price && (
+        <p
+          data-slot="emperor-ui-item-card-price"
+          className={cn(itemPriceClasses({ orientation }), classNames?.price)}
+        >
+          {item?.price}
+        </p>
+      )}
+
+      {orientation === "horizontal" && (
+        <ItemActionsDropdown
+          actions={actions}
+          classNames={classNames}
+          onActionClick={onActionClick}
+        />
+      )}
+    </CardBody>
+  );
+}

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

@@ -0,0 +1,55 @@
+"use client";
+
+import type { ItemCardProps } from "@/types";
+import { cn } from "@/utils";
+import { itemFooterClasses, itemChipsClasses } from "./styles";
+import { CardFooter } from "@heroui/card";
+import { Chip } from "@heroui/chip";
+
+export function ItemCardFooter({
+  item,
+  orientation,
+  classNames,
+}: Pick<ItemCardProps, "item" | "orientation" | "classNames">) {
+  return (
+    <CardFooter
+      data-slot="emperor-ui-item-card-footer"
+      className={cn(itemFooterClasses({ orientation }), classNames?.footer)}
+    >
+      {item?.chips && item?.chips?.length > 0 && (
+        <menu
+          data-slot="emperor-ui-item-card-chips"
+          className={cn(itemChipsClasses({ orientation }), classNames?.chips)}
+        >
+          {item?.chips?.map(
+            (
+              {
+                label,
+                className: chipClassName,
+                classNames: chipClassNames,
+                ...props
+              },
+              index,
+            ) => (
+              <Chip
+                key={index}
+                data-slot="emperor-ui-item-card-chip"
+                className={cn(chipClassName, classNames?.chip)}
+                classNames={{
+                  content: "text-xs mx-1",
+                  ...chipClassNames,
+                }}
+                size="sm"
+                variant="flat"
+                color="primary"
+                {...props}
+              >
+                {label}
+              </Chip>
+            ),
+          )}
+        </menu>
+      )}
+    </CardFooter>
+  );
+}

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

@@ -0,0 +1,61 @@
+"use client";
+
+import { CardHeader } from "@heroui/card";
+import { cn } from "@/utils";
+import { itemHeaderClasses } from "./styles";
+import { itemImageWrapperClasses } from "./styles";
+import { Image } from "@heroui/image";
+import { ItemBanner } from "@/components";
+import { ItemActionsDropdown } from "./item-actions-dropdown";
+import type { ItemCardProps } from "@/types";
+
+export function ItemCardHeader({
+  item,
+  orientation,
+  classNames,
+  actions,
+  onActionClick,
+}: Pick<
+  ItemCardProps,
+  "item" | "orientation" | "classNames" | "actions" | "onActionClick"
+>) {
+  return (
+    <CardHeader
+      data-slot="emperor-ui-item-card-header"
+      className={cn(itemHeaderClasses({ orientation }), classNames?.header)}
+    >
+      {item?.image && (
+        <div
+          data-slot="emperor-ui-item-card-image-wrapper"
+          className={cn(
+            itemImageWrapperClasses({ orientation }),
+            classNames?.imageWrapper,
+          )}
+        >
+          <Image
+            data-slot="emperor-ui-item-card-image"
+            src={item?.image?.src}
+            alt={item?.image?.alt}
+            className={cn("size-full object-cover", classNames?.image)}
+            radius="none"
+            removeWrapper
+          />
+        </div>
+      )}
+
+      <ItemBanner
+        item={item}
+        orientation={orientation}
+        classNames={classNames}
+      />
+
+      {orientation === "vertical" && (
+        <ItemActionsDropdown
+          actions={actions}
+          classNames={classNames}
+          onActionClick={onActionClick}
+        />
+      )}
+    </CardHeader>
+  );
+}

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

@@ -1,6 +1,86 @@
-import type { ItemCardProps } from "@/types";
+"use client";
+
+import type { ItemCardOrientation, ItemCardProps } from "@/types";
 import { cn } from "@/utils";
+import { Card } from "@heroui/card";
+import { motion } from "framer-motion";
+import { itemMainWrapperClasses, itemCardMotionClasses } from "./styles";
+import { getCardMotion } from "@/constants";
+import {
+  LoadingItem,
+  ItemCardHeader,
+  ItemCardBody,
+  ItemCardFooter,
+} from "@/components";
+import { useWindowSize } from "@/hooks";
+
+export function ItemCard({
+  variants,
+  isLoading = false,
+  className,
+  classNames,
+  item,
+  actions = [],
+  hoverEffect = "none",
+  onActionClick,
+  orientation: defaultOrientation = "vertical",
+}: ItemCardProps) {
+  const { isExtraSmallDevice } = useWindowSize();
+
+  const orientation: ItemCardOrientation = isExtraSmallDevice
+    ? "vertical"
+    : defaultOrientation;
+
+  if (isLoading)
+    return (
+      <LoadingItem
+        className={className}
+        classNames={classNames}
+        orientation={orientation}
+      />
+    );
+
+  return (
+    <motion.div
+      data-slot="emperor-ui-item-card"
+      className={cn(
+        itemCardMotionClasses({ orientation }),
+        classNames?.base,
+        className,
+      )}
+      variants={variants}
+      {...getCardMotion({ hoverEffect })}
+    >
+      <Card
+        shadow="sm"
+        data-slot="emperor-ui-item-card-main-wrapper"
+        className={cn(
+          itemMainWrapperClasses({ orientation }),
+          classNames?.mainWrapper,
+        )}
+      >
+        <ItemCardHeader
+          item={item}
+          orientation={orientation}
+          classNames={classNames}
+          actions={actions}
+          onActionClick={onActionClick}
+        />
+
+        <ItemCardBody
+          item={item}
+          orientation={orientation}
+          classNames={classNames}
+          actions={actions}
+          onActionClick={onActionClick}
+        />
 
-export function ItemCard({ className }: ItemCardProps) {
-  return <div className={cn("", className)}>Item Card Component</div>;
+        <ItemCardFooter
+          item={item}
+          orientation={orientation}
+          classNames={classNames}
+        />
+      </Card>
+    </motion.div>
+  );
 }

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

@@ -0,0 +1,88 @@
+"use client";
+
+import { cn } from "@/utils";
+import { Card, CardBody, CardFooter, CardHeader } from "@heroui/card";
+import { Skeleton } from "@heroui/skeleton";
+import { motion } from "framer-motion";
+import {
+  itemMainWrapperClasses,
+  itemCardMotionClasses,
+  itemImageWrapperClasses,
+  itemHeaderClasses,
+  itemBodyClasses,
+  itemFooterClasses,
+  itemChipsClasses,
+} from "./styles";
+import { getCardMotion } from "@/constants";
+import type { ItemCardProps } from "@/types";
+
+export function LoadingItem({
+  className,
+  classNames,
+  hoverEffect = "none",
+  orientation = "vertical",
+}: Pick<
+  ItemCardProps,
+  "className" | "classNames" | "hoverEffect" | "orientation"
+>) {
+  return (
+    <motion.div
+      {...getCardMotion({ hoverEffect })}
+      data-slot="emperor-ui-item-card"
+      className={cn(
+        itemCardMotionClasses({ orientation }),
+        classNames?.base,
+        className,
+      )}
+    >
+      <Card
+        shadow="sm"
+        data-slot="emperor-ui-item-card-main-wrapper"
+        className={cn(
+          itemMainWrapperClasses({ orientation }),
+          classNames?.mainWrapper,
+        )}
+      >
+        <CardHeader
+          data-slot="emperor-ui-item-card-header"
+          className={cn(itemHeaderClasses({ orientation }), classNames?.header)}
+        >
+          <Skeleton
+            className={cn(
+              itemImageWrapperClasses({ orientation }),
+              classNames?.imageWrapper,
+            )}
+          />
+        </CardHeader>
+
+        <CardBody
+          data-slot="emperor-ui-item-card-body"
+          className={cn(itemBodyClasses({ orientation }), classNames?.body)}
+        >
+          <div className="flex items-start justify-between gap-2">
+            <Skeleton className="h-5 flex-1 rounded-lg" />
+            <Skeleton className="size-8 shrink-0 rounded-lg" />
+          </div>
+
+          <Skeleton className="h-4 w-4/5 rounded-lg" />
+          <Skeleton className="h-4 w-full rounded-lg" />
+        </CardBody>
+
+        <CardFooter
+          data-slot="emperor-ui-item-card-footer"
+          className={cn(itemFooterClasses({ orientation }), classNames?.footer)}
+        >
+          <menu
+            data-slot="emperor-ui-item-card-chips"
+            className={cn(itemChipsClasses({ orientation }), classNames?.chips)}
+          >
+            {" "}
+            <Skeleton className="h-6 w-16 rounded-full" />
+            <Skeleton className="h-6 w-20 rounded-full" />
+            <Skeleton className="h-6 w-14 rounded-full" />
+          </menu>
+        </CardFooter>
+      </Card>
+    </motion.div>
+  );
+}

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