@js-empire/emperor-ui 1.3.11 → 1.3.13

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

@@ -0,0 +1,64 @@
+"use client";
+
+import { Button } from "@heroui/button";
+import { cn } from "@/utils";
+import { useUploaderContext } from "@/hooks";
+import { Eye, Trash2 } from "lucide-react";
+
+export function UploadFileListing() {
+  const { files, setSelectedFile, handleClearFile, classNames, modal } =
+    useUploaderContext();
+
+  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 null;
+
+        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>
+
+            <Button
+              isIconOnly
+              variant="flat"
+              radius="full"
+              className="size-6 min-w-6"
+              color="danger"
+              onPress={() => handleClearFile(file?.file?.name)}
+              startContent={<Trash2 className="rounded-lg size-3" />}
+            />
+
+            {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/components/uploader-title.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useUploaderContext } from "@/hooks";
+import { ComponentProps } from "react";
+import { cn } from "@/utils";
+
+export function UploaderTitle({ ...props }: ComponentProps<"h3">) {
+  const { title, classNames } = useUploaderContext();
+
+  if (!title) return null;
+
+  return (
+    <h3
+      className={cn("text-lg font-bold", classNames?.title)}
+      data-slot="emperor-uploader-title"
+      {...props}
+    >
+      {title}
+    </h3>
+  );
+}

package/src/components/atoms/uploader/components/uploader.tsx

@@ -0,0 +1,89 @@
+import type { UploaderProps } from "@/types";
+import { cn } from "@/utils";
+import { cva, VariantProps } from "class-variance-authority";
+import { forwardRef, ComponentProps } from "react";
+import { UploaderProvider } from "@/providers";
+import {
+  AvatarLabel,
+  UploadFileLabel,
+  ViewImageModal,
+  UploadFileListing,
+  UploadFileErrorBox,
+  UploadFileInput,
+  UploaderTitle,
+} from "@/components";
+
+const uploaderStyles = cva(["w-full flex flex-col gap-2"], {
+  variants: {},
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+/**
+ * @usage
+ * ```
+ * const uploadProps = useUpload({
+     labelId: "uploaded-file",
+     fileTypes: ["image", "pdf"],
+     isRequired: true,
+     isMulti: true,
+   });
+   
+  <Uploader {...uploadProps} />
+ * ```
+ */
+export const Uploader = forwardRef<
+  HTMLDivElement,
+  ComponentProps<"div"> & VariantProps<typeof uploaderStyles> & UploaderProps
+>(({ className, ...props }, ref) => {
+  const {
+    isAvatar,
+    hideListing,
+    isFileViewable,
+    hideErrorMessage,
+    // Uploader API — must not be forwarded to a DOM element (React warns on unknown props).
+    selectedFile,
+    setSelectedFile,
+    labelId,
+    labelContent,
+    avatarLabelContent,
+    title,
+    errorMessage,
+    isRequired,
+    isDraggable,
+    isLoading,
+    isMulti,
+    placeholderImage,
+    files,
+    fileTypes,
+    onInputChange,
+    handleClearFile,
+    modal,
+    classNames,
+    locales,
+    setFiles,
+    ...divProps
+  } = props;
+
+  return (
+    <UploaderProvider {...props}>
+      <div
+        ref={ref}
+        className={cn(uploaderStyles({ className }))}
+        {...divProps}
+      >
+        <UploaderTitle />
+
+        {isAvatar ? <AvatarLabel /> : <UploadFileLabel />}
+
+        {!hideListing && <UploadFileListing />}
+
+        {!hideErrorMessage && <UploadFileErrorBox />}
+
+        <UploadFileInput />
+
+        {isFileViewable && <ViewImageModal />}
+      </div>
+    </UploaderProvider>
+  );
+});

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

@@ -0,0 +1,41 @@
+"use client";
+
+import { Image } from "@heroui/image";
+import { Modal, ModalBody, ModalContent } from "@heroui/modal";
+import { useEmperorUI, useUploaderContext } from "@/hooks";
+
+export function ViewImageModal() {
+  const { config } = useEmperorUI();
+  const { modal, selectedFile } = useUploaderContext();
+
+  const lang = config?.interLocalization?.lang || "en";
+
+  const src = selectedFile?.view;
+  const alt = selectedFile?.file?.name;
+
+  if (!src || !alt) return null;
+
+  return (
+    <Modal
+      placement="center"
+      isOpen={modal?.isOpen}
+      dir={lang === "ar" ? "rtl" : "ltr"}
+      onClose={modal?.onClose}
+      onOpenChange={modal?.onOpenChange}
+      size="xl"
+      {...modal}
+    >
+      <ModalContent className="px-5">
+        <ModalBody className="h-[60vh]">
+          <Image
+            className="size-full rounded-md object-cover"
+            src={src}
+            alt={alt}
+            width={500}
+            height={500}
+          />
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}

package/src/components/atoms/uploader/index.ts

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

package/src/components/atoms/uploader/stories/uploader.stories.tsx

@@ -0,0 +1,202 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Uploader } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import { useUploader } from "@/hooks";
+import { useDisclosure } from "@heroui/modal";
+import { uploaderLocalesMock } from "@/mocks";
+import { LangKey } from "@/i18n";
+
+const meta: Meta<typeof Uploader> = {
+  title: "Atoms/Uploader",
+  component: Uploader,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+  render: () => {
+    const uploadProps = useUploader({
+      fileTypes: ["sheet"],
+      labelId: "image",
+      isMulti: true,
+    });
+
+    return <Uploader {...uploadProps} />;
+  },
+};
+
+export const MultiFiles: Story = {
+  args: {},
+  render: () => {
+    const uploadProps = useUploader({
+      fileTypes: ["image", "pdf"],
+      labelId: "image",
+      isMulti: true,
+    });
+
+    return <Uploader {...uploadProps} />;
+  },
+};
+
+export const WithMaxCount: Story = {
+  args: {},
+  render: () => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "image",
+      isMulti: true,
+      maxCount: 2,
+    });
+
+    return <Uploader {...uploadProps} />;
+  },
+};
+
+export const Required: Story = {
+  args: {},
+  render: () => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "image",
+      isRequired: true,
+    });
+
+    return <Uploader {...uploadProps} />;
+  },
+};
+
+export const CustomErrorMessage: Story = {
+  args: {},
+  render: () => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "image",
+      isRequired: true,
+    });
+
+    return <Uploader errorMessage="Please upload an image" {...uploadProps} />;
+  },
+};
+
+export const HideListings: Story = {
+  args: {},
+  render: () => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "image",
+    });
+
+    return <Uploader hideListing {...uploadProps} />;
+  },
+};
+
+export const ViewableImages: Story = {
+  args: {},
+  render: () => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "image",
+    });
+
+    const modalProps = useDisclosure();
+
+    return (
+      <Uploader
+        isFileViewable
+        modal={{
+          ...modalProps,
+        }}
+        {...uploadProps}
+      />
+    );
+  },
+};
+
+export const AllowDuplicates: Story = {
+  args: {},
+  render: () => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "image",
+      preventDuplicates: false,
+    });
+
+    return <Uploader {...uploadProps} />;
+  },
+};
+
+export const CompressFiles: Story = {
+  args: {},
+  render: () => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "uncompressed-image",
+      compressFiles: false,
+    });
+
+    const compressedUploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "compressed-image",
+      compressFiles: true,
+    });
+
+    return (
+      <div className="grid grid-cols-2 gap-4">
+        <h3 className="text-lg font-bold">Uncompressed</h3>
+        <h3 className="text-lg font-bold">Compressed</h3>
+
+        <Uploader {...uploadProps} />
+        <Uploader {...compressedUploadProps} />
+
+        <p className="text-sm text-gray-500">
+          File size: {uploadProps.files[0]?.file?.size || "---"}
+        </p>
+        <p className="text-sm text-gray-500">
+          File size: {compressedUploadProps.files[0]?.file?.size || "---"}
+        </p>
+      </div>
+    );
+  },
+};
+
+export const WithTitle: Story = {
+  args: {},
+  render: () => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "image",
+    });
+
+    return <Uploader {...uploadProps} title="Upload your image" />;
+  },
+};
+
+export const WithCustomLocales: Story = {
+  args: {
+    locales: uploaderLocalesMock[LangKey.ENGLISH],
+  },
+  render: (args) => {
+    const uploadProps = useUploader({
+      fileTypes: ["image", "pdf"],
+      labelId: "image",
+      isRequired: true,
+      isMulti: true,
+    });
+
+    return <Uploader {...uploadProps} {...args} />;
+  },
+};

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from "./templates";
+export * from "./molecules";
+export * from "./atoms";
+export * from "./organisms";

package/src/components/molecules/index.ts

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

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

@@ -0,0 +1,3 @@
+export * from "./item-actions-dropdown";
+export * from "./item-actions-buttons";
+export * from "./item-actions-overlay";

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

@@ -0,0 +1,43 @@
+"use client";
+
+import type { ItemCardProps } from "@/types";
+import { cn } from "@/utils";
+import { Button } from "@heroui/button";
+
+type ItemActionsButtonsProps = Pick<
+  ItemCardProps,
+  "actions" | "classNames" | "onActionClick"
+> & {
+  className?: string;
+};
+
+export function ItemActionsButtons({
+  actions,
+  classNames,
+  onActionClick,
+  className,
+}: ItemActionsButtonsProps) {
+  if (!actions || actions.length === 0) return null;
+
+  return (
+    <div
+      data-slot="emperor-ui-item-card-actions-buttons"
+      className={cn("flex flex-wrap gap-2", classNames?.actions, className)}
+    >
+      {actions.map(
+        ({ key, label, className: actionClassName, ...props }, index) => (
+          <Button
+            key={key ?? index}
+            data-slot="emperor-ui-item-card-actions-button"
+            size="sm"
+            className={cn(classNames?.action, actionClassName)}
+            onPress={() => key && onActionClick?.(String(key))}
+            {...props}
+          >
+            {label}
+          </Button>
+        ),
+      )}
+    </div>
+  );
+}

package/src/components/molecules/item-card/components/actions/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/components/actions/item-actions-overlay.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import type { ItemCardProps } from "@/types";
+import { cn } from "@/utils";
+import { Button } from "@heroui/button";
+import { Tooltip } from "@heroui/tooltip";
+
+type ItemActionsOverlayProps = Pick<
+  ItemCardProps,
+  "actions" | "classNames" | "onActionClick" | "orientation"
+>;
+
+export function ItemActionsOverlay({
+  actions,
+  classNames,
+  onActionClick,
+  orientation,
+}: ItemActionsOverlayProps) {
+  if (!actions || actions?.length === 0) return null;
+
+  return (
+    <div
+      data-slot="emperor-ui-item-card-actions-overlay"
+      className={cn(
+        "absolute inset-0 z-20 gap-3 flex items-center justify-center bg-black/60 opacity-0",
+        orientation === "horizontal" ? "flex-row" : "flex-col",
+        "transition-opacity duration-200 group-hover:opacity-100",
+        classNames?.actions,
+      )}
+    >
+      {actions?.map(
+        ({ key, label, className: actionClassName, ...props }, index) => {
+          return (
+            <Tooltip content={label}>
+              <Button
+                key={key ?? index}
+                data-slot="emperor-ui-item-card-actions-overlay-button"
+                isIconOnly
+                radius="full"
+                className={cn(classNames?.action, actionClassName)}
+                onPress={() => key && onActionClick?.(String(key))}
+                {...props}
+              />
+            </Tooltip>
+          );
+        },
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,2 @@
+export * from "./loading-item";
+export * from "./item-banner";

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

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