@js-empire/emperor-ui 1.3.6 → 1.3.8

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

@@ -1,92 +0,0 @@
-"use client";
-
-import { Spinner } from "@heroui/spinner";
-import { cn, mergeUploaderLocale } from "@/utils";
-import { useEmperorUI, useUploaderContext } from "@/hooks";
-import { UploadCloud } from "lucide-react";
-import { useState } from "react";
-import { getLocales, Locale } from "@/i18n";
-
-export function UploadFileLabel() {
-  const { config } = useEmperorUI();
-  const [draggableMessage, setDraggableMessage] = useState("");
-  const {
-    labelId,
-    classNames,
-    labelContent,
-    isDraggable,
-    onInputChange,
-    isLoading,
-    isMulti,
-    files,
-    locales,
-  } = useUploaderContext();
-
-  const configLocales = config?.interLocalization?.locales;
-  const lang =
-    config?.interLocalization?.lang ||
-    config?.interLocalization?.defaultLanguage ||
-    "en";
-
-  const defaultLocale = getLocales(lang);
-  const uploaderLocale = mergeUploaderLocale({
-    defaultUploaderLocale: defaultLocale.atoms.uploader,
-    configUploaderLocale: (configLocales?.[lang] as Locale | undefined)?.atoms
-      ?.uploader,
-    contextUploaderLocale: locales,
-  });
-
-  const handleDrop = (
-    event: React.ChangeEvent<HTMLInputElement> &
-      React.DragEvent<HTMLLabelElement>,
-  ) => {
-    event.preventDefault();
-    if (onInputChange) onInputChange(event);
-  };
-
-  const handleDragOver = (
-    event: React.ChangeEvent<HTMLInputElement> &
-      React.DragEvent<HTMLLabelElement>,
-  ) => {
-    event.preventDefault();
-    setDraggableMessage(uploaderLocale.dropHere);
-  };
-
-  const handleDragLeave = () => {
-    setDraggableMessage("");
-  };
-
-  if (!isMulti && files?.length > 0) {
-    return null;
-  }
-
-  if (isLoading)
-    return (
-      <div className={cn("w-full flex mx-auto", classNames?.label)}>
-        <Spinner className="mx-auto" size="lg" />;
-      </div>
-    );
-
-  return (
-    <label
-      className={cn("w-full cursor-pointer mx-auto", classNames?.label)}
-      htmlFor={labelId}
-      onDrop={isDraggable ? handleDrop : () => {}}
-      onDragOver={isDraggable ? handleDragOver : () => {}}
-      onDragLeave={isDraggable ? handleDragLeave : () => {}}
-    >
-      {labelContent || (
-        <div className="pointer-events-none flex size-full flex-col items-center justify-center gap-2 rounded-md border border-dashed bg-primary/10 px-2 py-8 text-xs">
-          <UploadCloud className="size-10 text-primary" />
-
-          <p className="font-bold">{uploaderLocale.selectFile}</p>
-          <p className="opacity-70">{uploaderLocale.selectionTypes}</p>
-
-          {draggableMessage && (
-            <p className="text-sm font-bold">{draggableMessage}</p>
-          )}
-        </div>
-      )}
-    </label>
-  );
-}

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

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

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

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

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

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

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

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

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

package/src/components/molecules/index.ts

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

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

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

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

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

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