@js-empire/emperor-ui 1.2.2 → 1.2.4

package/src/components/atoms/uploader/upload-file-listing.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Button, cn } from "@heroui/react";
+import { Button } from "@heroui/button";
+import { cn } from "@/utils";
 import { useUploaderContext } from "@/hooks";
 import { Eye, Trash2 } from "lucide-react";
 
@@ -8,48 +9,56 @@ export function UploadFileListing() {
   const { files, setSelectedFile, handleClearFile, classNames, modal } =
     useUploaderContext();
 
-  return files?.map((file) => {
-    const isFileViewable =
-      modal?.onOpen && file?.view && file?.file?.name && file?.type === "image";
+  return (
+    <ul className={cn("w-full flex flex-col gap-2", classNames?.listing)}>
+      {files?.map((file) => {
+        const isFileViewable =
+          modal?.onOpen &&
+          file?.view &&
+          file?.file?.name &&
+          file?.type === "image";
 
-    if (file)
-      return (
-        <div
-          key={file?.file?.name}
-          className={cn(
-            "flex justify-between items-center p-2 gap-2 w-full border border-black/30 rounded-lg",
-            classNames?.listing,
-          )}
-        >
-          <p className="w-full line-clamp-1 text-xs max-w-60">
-            {file?.file?.name}
-          </p>
+        if (!file) return null;
 
-          <Button
-            isIconOnly
-            variant="flat"
-            className="size-8 min-w-8 rounded-full"
-            color="danger"
-            onPress={() => handleClearFile(file?.file?.name)}
-            startContent={<Trash2 className="rounded-lg size-4" />}
-          />
+        return (
+          <li
+            key={file?.file?.name}
+            className={cn(
+              "flex justify-between items-center p-2 gap-2 w-full border border-black/30 rounded-lg",
+              classNames?.listingItem,
+            )}
+          >
+            <p className="w-full line-clamp-1 text-xs max-w-60">
+              {file?.file?.name}
+            </p>
 
-          {isFileViewable && (
             <Button
               isIconOnly
               variant="flat"
-              className="size-8 min-w-8 rounded-full"
-              color="primary"
-              onPress={() => {
-                setSelectedFile?.(file);
-                modal?.onOpen?.();
-              }}
-              startContent={<Eye className="rounded-lg size-4" />}
+              radius="full"
+              className="size-6 min-w-6"
+              color="danger"
+              onPress={() => handleClearFile(file?.file?.name)}
+              startContent={<Trash2 className="rounded-lg size-3" />}
             />
-          )}
-        </div>
-      );
 
-    return null;
-  });
+            {isFileViewable && (
+              <Button
+                isIconOnly
+                variant="flat"
+                radius="full"
+                className="size-6 min-w-6"
+                color="primary"
+                onPress={() => {
+                  setSelectedFile?.(file);
+                  modal?.onOpen?.();
+                }}
+                startContent={<Eye className="rounded-lg size-3" />}
+              />
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
 }

package/src/components/atoms/uploader/view-image-modal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Image, Modal, ModalBody, ModalContent } from "@heroui/react";
+import { Image } from "@heroui/image";
+import { Modal, ModalBody, ModalContent } from "@heroui/modal";
 import { useEmperorUI, useUploaderContext } from "@/hooks";
 
 export function ViewImageModal() {

package/src/components/molecules/index.ts

@@ -1,4 +1,3 @@
-export * from "./filter";
 export * from "./item-card";
 export * from "./nav-bar";
 export * from "./side-bar";

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

@@ -1 +1,7 @@
 export * from "./item-card";
+export * from "./loading-item";
+export * from "./item-banner";
+export * from "./item-actions-dropdown";
+export * from "./item-card-header";
+export * from "./item-card-body";
+export * from "./item-card-footer";

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

@@ -0,0 +1,57 @@
+"use client";
+
+import { ItemCardProps } from "@/types";
+import { cn } from "@/utils";
+import { Button } from "@heroui/button";
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+} from "@heroui/dropdown";
+import { EllipsisVertical } from "lucide-react";
+
+export function ItemActionsDropdown({
+  actions,
+  classNames,
+  onActionClick,
+}: Pick<ItemCardProps, "actions" | "classNames" | "onActionClick">) {
+  if (!actions || actions?.length === 0) return null;
+
+  return (
+    <Dropdown placement="bottom-end">
+      <DropdownTrigger data-slot="emperor-ui-item-card-actions-dropdown-trigger">
+        <Button
+          isIconOnly
+          size="sm"
+          variant="flat"
+          radius="full"
+          className={cn(
+            "absolute right-2 top-2 z-10 size-7 min-w-7 backdrop-blur-lg",
+            "border border-default-300",
+            classNames?.dropdown,
+          )}
+        >
+          <EllipsisVertical className="size-4" />
+        </Button>
+      </DropdownTrigger>
+
+      <DropdownMenu
+        data-slot="emperor-ui-item-card-actions-dropdown-menu"
+        aria-label="Card actions"
+        onAction={(key) => onActionClick?.(String(key))}
+        items={actions}
+      >
+        {({ key, label, ...props }) => (
+          <DropdownItem
+            key={key}
+            data-slot="emperor-ui-item-card-actions-dropdown-item"
+            textValue={label}
+            title={label}
+            {...props}
+          />
+        )}
+      </DropdownMenu>
+    </Dropdown>
+  );
+}

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

@@ -0,0 +1,22 @@
+"use client";
+
+import { ItemCardProps } from "@/types";
+import { cn } from "@/utils";
+import { itemBannerClasses } from "./styles";
+
+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/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>
+  );
+}