@js-empire/emperor-ui 1.3.5 → 1.3.7

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,58 +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 } = props;
-
-  return (
-    <UploaderProvider {...props}>
-      <div ref={ref} className={cn(uploaderStyles({ className }))} {...props}>
-        <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,201 +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: ["image", "pdf"],
-      labelId: "image",
-    });
-
-    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";

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";