@js-empire/emperor-ui 1.3.6 → 1.3.7

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

@@ -1,22 +0,0 @@
-"use client";
-
-import { ItemCardProps } from "@/types";
-import { cn } from "@/utils";
-import { itemBannerClasses } from "@/components";
-
-export function ItemBanner({
-  item,
-  orientation,
-  classNames,
-}: Pick<ItemCardProps, "item" | "orientation" | "classNames">) {
-  if (!item?.banner) return null;
-
-  return (
-    <div
-      data-slot="emperor-ui-item-card-banner"
-      className={cn(itemBannerClasses({ orientation }), classNames?.banner)}
-    >
-      {item?.banner}
-    </div>
-  );
-}

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

@@ -1,88 +0,0 @@
-"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

@@ -1,4 +0,0 @@
-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

@@ -1,74 +0,0 @@
-"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

@@ -1,79 +0,0 @@
-"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

@@ -1,69 +0,0 @@
-"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

@@ -1,123 +0,0 @@
-"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

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

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

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

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

@@ -1,218 +0,0 @@
-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 "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 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}`,
-    },
-  },
-};