@js-empire/emperor-ui 1.0.1 → 1.2.0

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

@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Uploader } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import { UploaderProps } from "@/types";
+import { useUploader } from "@/hooks";
+import { useDisclosure } from "@heroui/react";
+
+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: (args: UploaderProps) => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "image",
+    });
+
+    return <Uploader {...uploadProps} {...args} />;
+  },
+};
+
+export const MultiFiles: Story = {
+  args: {},
+  render: (args: UploaderProps) => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "image",
+      isMulti: true,
+    });
+
+    return <Uploader {...uploadProps} {...args} />;
+  },
+};
+
+export const WithMaxCount: Story = {
+  args: {},
+  render: (args: UploaderProps) => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "image",
+      isMulti: true,
+      maxCount: 2,
+    });
+
+    return <Uploader {...uploadProps} {...args} />;
+  },
+};
+
+export const Required: Story = {
+  args: {},
+  render: (args: UploaderProps) => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "image",
+      isRequired: true,
+    });
+
+    return <Uploader {...uploadProps} {...args} />;
+  },
+};
+
+export const HideListings: Story = {
+  args: {},
+  render: (args: UploaderProps) => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "image",
+    });
+
+    return <Uploader hideListing {...uploadProps} {...args} />;
+  },
+};
+
+export const ViewableImages: Story = {
+  args: {},
+  render: (args: UploaderProps) => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "image",
+    });
+
+    const modalProps = useDisclosure();
+
+    return (
+      <Uploader
+        isFileViewable
+        modal={{
+          ...modalProps,
+        }}
+        {...uploadProps}
+        {...args}
+      />
+    );
+  },
+};
+
+export const AllowDuplicates: Story = {
+  args: {},
+  render: (args: UploaderProps) => {
+    const uploadProps = useUploader({
+      fileTypes: ["image"],
+      labelId: "image",
+      preventDuplicates: false,
+    });
+
+    return <Uploader {...uploadProps} {...args} />;
+  },
+};
+
+export const CompressFiles: Story = {
+  args: {},
+  render: (args: UploaderProps) => {
+    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} {...args} />
+        <Uploader {...compressedUploadProps} {...args} />
+
+        <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>
+    );
+  },
+};

package/src/components/atoms/uploader/upload-file-error-box.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { cn } from "@heroui/react";
+import { useEmperorUI, useUploaderContext } from "@/hooks";
+import { useMemo } from "react";
+
+export function UploadFileErrorBox() {
+  const { config } = useEmperorUI();
+  const { files, isRequired, classNames } = useUploaderContext();
+
+  const locales = config?.interLocalization?.locales;
+  const lang = config?.interLocalization?.lang;
+
+  const locale = locales?.[lang || "en"];
+
+  const isError = useMemo(
+    () => files?.length === 0 && isRequired,
+    [files, isRequired],
+  );
+
+  if (isError)
+    return (
+      <p className={cn("text-[14px] text-danger", classNames?.error)}>
+        {locale?.errorUploadingFile}
+      </p>
+    );
+
+  return null;
+}

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

@@ -0,0 +1,36 @@
+"use client";
+
+import { cn } from "@heroui/react";
+import { useUploaderContext } from "@/hooks";
+import { fileTypesMapping } from "@/constants";
+
+export function UploadFileInput() {
+  const {
+    fileTypes = [],
+    isMulti,
+    labelId,
+    onInputChange,
+    classNames,
+  } = useUploaderContext();
+
+  const getFileAccepts = (): string => {
+    const acceptedTypes: string[] = [];
+
+    fileTypes?.forEach((fileType) => {
+      acceptedTypes.push(...(fileTypesMapping?.[fileType] || []));
+    });
+
+    return acceptedTypes.join(", ");
+  };
+
+  return (
+    <input
+      id={labelId}
+      type="file"
+      accept={getFileAccepts()}
+      className={cn("hidden", classNames?.input)}
+      onChange={onInputChange}
+      multiple={isMulti}
+    />
+  );
+}

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

@@ -0,0 +1,74 @@
+"use client";
+
+import { Spinner, cn } from "@heroui/react";
+import { useEmperorUI, useUploaderContext } from "@/hooks";
+import { UploadCloud } from "lucide-react";
+import { useState } from "react";
+
+export function UploadFileLabel() {
+  const { config } = useEmperorUI();
+  const [draggableMessage, setDraggableMessage] = useState("");
+  const {
+    labelId,
+    classNames,
+    labelContent,
+    isDraggable,
+    onInputChange,
+    isLoading,
+  } = useUploaderContext();
+
+  const locales = config?.interLocalization?.locales;
+  const lang = config?.interLocalization?.lang;
+
+  const locale = locales?.[lang || "en"];
+
+  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(locale?.dropHere || "");
+  };
+
+  const handleDragLeave = () => {
+    setDraggableMessage("");
+  };
+
+  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">{locale?.selectFile || ""}</p>
+          <p className="opacity-70">{locale?.selectionTypes || ""}</p>
+
+          {draggableMessage && (
+            <p className="text-sm font-bold">{draggableMessage}</p>
+          )}
+        </div>
+      )}
+    </label>
+  );
+}

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

@@ -0,0 +1,55 @@
+"use client";
+
+import { Button, cn } from "@heroui/react";
+import { useUploaderContext } from "@/hooks";
+import { Eye, Trash2 } from "lucide-react";
+
+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";
+
+    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>
+
+          <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" />}
+          />
+
+          {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" />}
+            />
+          )}
+        </div>
+      );
+
+    return null;
+  });
+}

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

@@ -0,0 +1,55 @@
+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,
+} 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}>
+        {isAvatar ? <AvatarLabel /> : <UploadFileLabel />}
+
+        {!hideListing && <UploadFileListing />}
+
+        {!hideErrorMessage && <UploadFileErrorBox />}
+
+        <UploadFileInput />
+
+        {isFileViewable && <ViewImageModal />}
+      </div>
+    </UploaderProvider>
+  );
+});

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

@@ -0,0 +1,40 @@
+"use client";
+
+import { Image, Modal, ModalBody, ModalContent } from "@heroui/react";
+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/index.ts

@@ -1,8 +1,4 @@
-export * from "./filter";
-export * from "./footer";
-export * from "./header";
-export * from "./item-card";
-export * from "./item-details";
-export * from "./listings";
-export * from "./nav-bar";
-export * from "./scaffold";
+export * from "./templates";
+export * from "./molecules";
+export * from "./atoms";
+export * from "./organisms";

package/src/components/{filter → molecules/filter}/filter.tsx

@@ -1,5 +1,5 @@
-import type { FilterProps } from "@types";
-import { cn } from "@utils";
+import type { FilterProps } from "@/types";
+import { cn } from "@/utils";
 
 export function Filter({ className }: FilterProps) {
   return <div className={cn("", className)}>Filter Component</div>;

package/src/components/molecules/index.ts

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

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

@@ -0,0 +1,6 @@
+import type { ItemCardProps } from "@/types";
+import { cn } from "@/utils";
+
+export function ItemCard({ className }: ItemCardProps) {
+  return <div className={cn("", className)}>Item Card Component</div>;
+}

package/src/components/molecules/nav-bar/index.ts

@@ -0,0 +1,3 @@
+export * from "./nav-bar";
+export * from "./sub-items-box";
+export * from "./nav-bar-item";

package/src/components/molecules/nav-bar/nav-bar-item.tsx

@@ -0,0 +1,70 @@
+import { cn } from "@/utils";
+import { VariantProps } from "class-variance-authority";
+import { forwardRef, ComponentProps } from "react";
+import type { NavBarItemProps } from "@/types";
+import { navBarItemClasses, navBarItemStyles } from "./styles";
+import { useEmperorUI, useNavigation } from "@/hooks";
+
+export const NavBarItem = forwardRef<
+  HTMLLIElement,
+  ComponentProps<"li"> &
+    VariantProps<typeof navBarItemClasses> &
+    NavBarItemProps
+>(({ className, item, variant, hoverEffect, ...props }, ref) => {
+  const { config } = useEmperorUI();
+  const {
+    hoveredItemId,
+    subItemsBoxIsHovered,
+    setSubItems,
+    setHoveredItemId,
+    setIsSubItemsBoxOpen,
+  } = useNavigation();
+
+  const primaryColor = config?.theme?.colors?.primary;
+  const foregroundColor = config?.theme?.colors?.foreground;
+
+  const { id, label, Icon, subItems } = item;
+
+  const isHovered = hoveredItemId === id;
+
+  const handleHover = (id: string | null) => {
+    if (id) {
+      setHoveredItemId(id);
+
+      if (subItems && subItems.length > 0) {
+        setSubItems(subItems);
+        setIsSubItemsBoxOpen(true);
+      } else {
+        setIsSubItemsBoxOpen(false);
+      }
+      return;
+    }
+
+    setHoveredItemId(null);
+
+    if (!subItemsBoxIsHovered) {
+      setIsSubItemsBoxOpen(false);
+    }
+  };
+
+  return (
+    <li
+      ref={ref}
+      data-slot="emperor-nav-bar-item"
+      style={navBarItemStyles({
+        foregroundColor,
+        primaryColor,
+        hoverEffect,
+        isHovered,
+        variant,
+      })}
+      className={cn(navBarItemClasses({ hoverEffect, variant }))}
+      onMouseEnter={() => handleHover(id)}
+      onMouseLeave={() => handleHover(null)}
+      {...props}
+    >
+      {Icon && <Icon className="size-4" />}
+      {label && <p>{label}</p>}
+    </li>
+  );
+});

package/src/components/molecules/nav-bar/nav-bar.tsx

@@ -0,0 +1,65 @@
+import { cn } from "@/utils";
+import { VariantProps } from "class-variance-authority";
+import { forwardRef, ComponentProps } from "react";
+import type { NavBarProps } from "@/types";
+import { useEmperorUI } from "@/hooks";
+import {
+  navBarClasses,
+  navBarMenuClasses,
+  navBarMenuStyles,
+  navBarStyles,
+} from "./styles";
+import { NavBarItem, SubItemsBox } from "@/components";
+
+export const NavBar = forwardRef<
+  HTMLDivElement,
+  ComponentProps<"nav"> & VariantProps<typeof navBarClasses> & NavBarProps
+>(
+  (
+    {
+      className,
+      hoverEffect = "default",
+      variant = "default",
+      items = [],
+      subItemsColumns = 3,
+      ...props
+    },
+    ref,
+  ) => {
+    const { config } = useEmperorUI();
+
+    const primaryColor = config?.theme?.colors?.primary;
+    const foregroundColor = config?.theme?.colors?.foreground;
+
+    return (
+      <nav
+        ref={ref}
+        data-slot="emperor-nav-bar"
+        className={cn(navBarClasses({ hoverEffect, variant, className }))}
+        style={navBarStyles({
+          foregroundColor,
+          primaryColor,
+          variant,
+        })}
+        {...props}
+      >
+        <ul
+          className={cn(navBarMenuClasses({ className }))}
+          style={navBarMenuStyles({ hoverEffect, variant })}
+          data-slot="emperor-nav-bar-menu"
+        >
+          {items?.map((item) => (
+            <NavBarItem
+              key={item.id}
+              item={item}
+              variant={variant}
+              hoverEffect={hoverEffect}
+            />
+          ))}
+        </ul>
+
+        <SubItemsBox subItemsColumns={subItemsColumns} />
+      </nav>
+    );
+  },
+);

package/src/components/molecules/nav-bar/stories/hover-effect/nav-bar-hover-effect.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { NavBar } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import { MOCK_HEADER_ITEMS } from "@/mocks";
+
+const meta: Meta<typeof NavBar> = {
+  title: "Molecules/NavBar/HoverEffect",
+  component: NavBar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const SolidHover: Story = {
+  args: {
+    items: MOCK_HEADER_ITEMS,
+    hoverEffect: "solid",
+  },
+};
+
+export const GhostHover: Story = {
+  args: {
+    items: MOCK_HEADER_ITEMS,
+    hoverEffect: "ghost",
+  },
+};
+
+export const BorderedHover: Story = {
+  args: {
+    items: MOCK_HEADER_ITEMS,
+    hoverEffect: "bordered",
+  },
+};
+
+export const UnderlinedHover: Story = {
+  args: {
+    items: MOCK_HEADER_ITEMS,
+    hoverEffect: "underline",
+  },
+};