@js-empire/emperor-ui 1.0.0 → 1.1.0

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

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Uploader } from "@components";
+import { getStorybookDecorators } from "@utils";
+import { UploaderProps } from "@types";
+import { useUploader } from "@hooks";
+
+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",
+      maxCount: 1,
+      isRequired: false,
+      compressFiles: true,
+      isMulti: true,
+    });
+
+    return <Uploader {...uploadProps} {...args} />;
+  },
+};

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,53 @@
+"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 text-ellipsis text-xs">{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" />}
+          />
+
+          {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" />}
+            />
+          )}
+        </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,39 @@
+"use client";
+
+import { Image, Modal, ModalBody, ModalContent } from "@heroui/react";
+import { useEmperorUI, useUploaderContext } from "@hooks";
+
+export function ViewImageModal() {
+  const { config } = useEmperorUI();
+  const { isOpen, onClose, onOpenChange, 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={isOpen}
+      dir={lang === "ar" ? "rtl" : "ltr"}
+      onClose={onClose}
+      onOpenChange={onOpenChange}
+      size="xl"
+    >
+      <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/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";
+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",
+  },
+};

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

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NavBar } from "@components";
+import { getStorybookDecorators } from "@utils";
+import { MOCK_HEADER_ITEMS, MOCK_HEADER_ITEMS_WITH_SUB_ITEMS } from "@mocks";
+
+const meta: Meta<typeof NavBar> = {
+  title: "Molecules/NavBar",
+  component: NavBar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    items: MOCK_HEADER_ITEMS,
+  },
+};
+
+export const Solid: Story = {
+  args: {
+    items: MOCK_HEADER_ITEMS,
+    variant: "solid",
+  },
+};
+
+export const Bordered: Story = {
+  args: {
+    items: MOCK_HEADER_ITEMS,
+    variant: "bordered",
+  },
+};
+
+export const WithSubItems: Story = {
+  args: {
+    items: MOCK_HEADER_ITEMS_WITH_SUB_ITEMS,
+  },
+};

package/src/components/molecules/nav-bar/styles/classes.ts

@@ -0,0 +1,68 @@
+import { cva } from "class-variance-authority";
+
+export const navBarClasses = cva(["relative flex items-center gap-3"], {
+  variants: {
+    hoverEffect: {
+      default: [],
+      solid: [],
+      underline: [],
+      ghost: [],
+      bordered: [],
+      none: [],
+    },
+    variant: {
+      default: [],
+      solid: [],
+      bordered: [],
+    },
+  },
+  defaultVariants: {
+    hoverEffect: "default",
+    variant: "default",
+  },
+});
+
+export const navBarMenuClasses = cva(["size-full flex items-center"], {
+  variants: {
+    variant: {
+      default: [],
+      solid: [],
+      bordered: [],
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export const navBarItemClasses = cva(
+  [
+    "relative cursor-pointer px-4 py-2 transition-all font-semibold flex items-center gap-2",
+  ],
+  {
+    variants: {
+      hoverEffect: {
+        default: [],
+        solid: ["hover:opacity-80"],
+        underline: [
+          "relative font-bold",
+          "before:absolute before:bottom-0 before:left-0",
+          "before:h-0.5 before:w-full before:bg-current before:rounded-lg",
+          "before:scale-x-0 before:transition-transform hover:before:scale-x-100",
+        ],
+        ghost: [],
+        bordered: ["last:border-r-2! first:border-l-2!"],
+        none: [],
+      },
+      variant: {
+        default: [],
+        solid: [],
+        bordered: ["last:border-r-2! first:border-l-2!"],
+      },
+    },
+    defaultVariants: {
+      hoverEffect: "default",
+      variant: "default",
+    },
+  },
+);

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

@@ -0,0 +1,2 @@
+export * from "./classes";
+export * from "./styles";