@js-empire/emperor-ui 1.3.5 → 1.3.7

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}`,
-    },
-  },
-};

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

@@ -1,141 +0,0 @@
-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 flex-wrap flex-col p-4 gap-4 items-start"],
-  {
-    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

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