@js-empire/emperor-ui 1.3.11 → 1.3.13

package/src/components/molecules/item-card/components/additions/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 "@/components";
+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/components/card/index.ts

@@ -0,0 +1,4 @@
+export * from "./item-card";
+export * from "./item-card-header";
+export * from "./item-card-body";
+export * from "./item-card-footer";

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

@@ -0,0 +1,74 @@
+"use client";
+
+import type { ItemCardProps } from "@/types";
+import { cn } from "@/utils";
+import {
+  itemBodyClasses,
+  itemDescriptionClasses,
+  itemPriceClasses,
+  itemTitleClasses,
+  ItemActionsDropdown,
+} from "@/components";
+import { CardBody } from "@heroui/card";
+
+export function ItemCardBody({
+  item,
+  orientation,
+  classNames,
+  actions,
+  onActionClick,
+  actionsViewVariant = "dropdown",
+}: Pick<
+  ItemCardProps,
+  | "item"
+  | "orientation"
+  | "classNames"
+  | "actions"
+  | "onActionClick"
+  | "actionsViewVariant"
+>) {
+  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" && actionsViewVariant === "dropdown" && (
+        <ItemActionsDropdown
+          actions={actions}
+          classNames={classNames}
+          onActionClick={onActionClick}
+        />
+      )}
+    </CardBody>
+  );
+}

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

@@ -0,0 +1,79 @@
+"use client";
+
+import type { ItemCardProps } from "@/types";
+import { cn } from "@/utils";
+import {
+  ItemActionsButtons,
+  itemFooterClasses,
+  itemChipsClasses,
+} from "@/components";
+import { CardFooter } from "@heroui/card";
+import { Chip } from "@heroui/chip";
+
+export function ItemCardFooter({
+  item,
+  orientation,
+  classNames,
+  actions,
+  onActionClick,
+  actionsViewVariant = "dropdown",
+}: Pick<
+  ItemCardProps,
+  | "item"
+  | "orientation"
+  | "classNames"
+  | "actions"
+  | "onActionClick"
+  | "actionsViewVariant"
+>) {
+  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>
+      )}
+
+      {actionsViewVariant === "buttons" && actions && actions?.length > 0 && (
+        <ItemActionsButtons
+          actions={actions}
+          classNames={classNames}
+          onActionClick={onActionClick}
+          className="ml-auto"
+        />
+      )}
+    </CardFooter>
+  );
+}

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

@@ -0,0 +1,69 @@
+"use client";
+
+import { CardHeader } from "@heroui/card";
+import { cn } from "@/utils";
+import {
+  itemHeaderClasses,
+  ItemActionsDropdown,
+  itemImageWrapperClasses,
+  ItemBanner,
+} from "@/components";
+import { Image } from "@heroui/image";
+import type { ItemCardProps } from "@/types";
+
+export function ItemCardHeader({
+  item,
+  orientation,
+  classNames,
+  actions,
+  onActionClick,
+  actionsViewVariant = "dropdown",
+}: Pick<
+  ItemCardProps,
+  | "item"
+  | "orientation"
+  | "classNames"
+  | "actions"
+  | "onActionClick"
+  | "actionsViewVariant"
+>) {
+  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" && actionsViewVariant === "dropdown" && (
+        <ItemActionsDropdown
+          actions={actions}
+          classNames={classNames}
+          onActionClick={onActionClick}
+        />
+      )}
+    </CardHeader>
+  );
+}

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

@@ -0,0 +1,123 @@
+"use client";
+
+import type {
+  ItemCardActionsViewVariant,
+  ItemCardOrientation,
+  ItemCardProps,
+} from "@/types";
+import { cn } from "@/utils";
+import { Card } from "@heroui/card";
+import { motion } from "framer-motion";
+import {
+  itemMainWrapperClasses,
+  itemCardMotionClasses,
+  ItemActionsOverlay,
+} from "@/components";
+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",
+  actionsViewVariant = "dropdown",
+}: ItemCardProps) {
+  const { isExtraSmallDevice } = useWindowSize();
+
+  const orientation: ItemCardOrientation = isExtraSmallDevice
+    ? "vertical"
+    : defaultOrientation;
+
+  if (isLoading)
+    return (
+      <LoadingItem
+        className={className}
+        classNames={classNames}
+        orientation={orientation}
+      />
+    );
+
+  const hasActions = actions && actions.length > 0;
+
+  const isDropdownVariant: boolean =
+    (actionsViewVariant as ItemCardActionsViewVariant) === "dropdown";
+
+  const isHoverOverlayVariant: boolean =
+    (actionsViewVariant as ItemCardActionsViewVariant) === "hover-overlay";
+
+  return (
+    <motion.div
+      data-slot="emperor-ui-item-card"
+      className={cn(
+        itemCardMotionClasses({ orientation }),
+        "group",
+        classNames?.base,
+        className,
+      )}
+      variants={variants}
+      {...getCardMotion({ hoverEffect })}
+    >
+      <Card
+        shadow="sm"
+        data-slot="emperor-ui-item-card-main-wrapper"
+        className={cn(
+          itemMainWrapperClasses({ orientation }),
+          "relative overflow-hidden",
+          classNames?.mainWrapper,
+        )}
+      >
+        <ItemCardHeader
+          item={item}
+          orientation={orientation}
+          classNames={classNames}
+          actions={actions}
+          onActionClick={onActionClick}
+          actionsViewVariant={
+            isDropdownVariant ? "dropdown" : actionsViewVariant
+          }
+        />
+
+        <ItemCardBody
+          item={item}
+          orientation={orientation}
+          classNames={classNames}
+          actions={actions}
+          onActionClick={onActionClick}
+          actionsViewVariant={
+            isDropdownVariant ? "dropdown" : actionsViewVariant
+          }
+        />
+
+        <ItemCardFooter
+          item={item}
+          orientation={orientation}
+          classNames={classNames}
+          actions={actions}
+          onActionClick={onActionClick}
+          actionsViewVariant={actionsViewVariant}
+        />
+
+        {isHoverOverlayVariant && hasActions && (
+          <ItemActionsOverlay
+            actions={actions}
+            classNames={classNames}
+            onActionClick={onActionClick}
+            orientation={orientation}
+          />
+        )}
+      </Card>
+    </motion.div>
+  );
+}

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

@@ -0,0 +1,3 @@
+export * from "./additions";
+export * from "./card";
+export * from "./actions";

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

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

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

@@ -0,0 +1,218 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { MockItemType } from "@/mocks";
+import { ItemCard } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import { getListing, MOCK_LISTINGS } from "@/mocks";
+import { useEffect, useState } from "react";
+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 WithDropdownActions: 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 WithButtonsActions: 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,
+    actionsViewVariant: "buttons",
+  },
+};
+
+export const WithHoverOverlayActions: 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?.map((action) => ({
+      ...action,
+      variant: "solid",
+      size: "lg",
+    })),
+    actionsViewVariant: "hover-overlay",
+  },
+};
+
+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}`,
+    },
+  },
+};