@js-empire/emperor-ui 1.2.6 → 1.2.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@js-empire/emperor-ui",
   "description": "They provide the atoms, we provide the empire.",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "author": "JS Empire - Mustafa Alhasanat",
   "license": "ISC",
   "type": "module",
@@ -73,6 +73,7 @@
     "@heroui/system": "^2.4.27",
     "@heroui/theme": "^2.4.25",
     "@heroui/toast": "^2.0.21",
+    "@heroui/tooltip": "^2.2.28",
     "@hookform/resolvers": "^5.2.2",
     "@internationalized/date": "^3.11.0",
     "@storybook/react": "^10.1.8",

package/src/components/atoms/uploader/{avatar-label.tsx → components/avatar-label.tsx}

@@ -3,13 +3,15 @@
 import { Placeholders } from "@/enums";
 import { Avatar } from "@heroui/avatar";
 import { Spinner } from "@heroui/spinner";
-import { cn } from "@/utils";
+import { cn, mergeUploaderLocale } from "@/utils";
 import { useEmperorUI, useUploaderContext } from "@/hooks";
 import { useState } from "react";
+import { getLocales, Locale } from "@/i18n";
 
 export function AvatarLabel() {
   const { config } = useEmperorUI();
   const [draggableMessage, setDraggableMessage] = useState<string | null>(null);
+
   const {
     labelId,
     classNames,
@@ -21,12 +23,22 @@ export function AvatarLabel() {
     files,
     isLoading,
     isMulti,
+    locales,
   } = useUploaderContext();
 
-  const locales = config?.interLocalization?.locales;
-  const lang = config?.interLocalization?.lang;
+  const configLocales = config?.interLocalization?.locales;
+  const lang =
+    config?.interLocalization?.lang ||
+    config?.interLocalization?.defaultLanguage ||
+    "en";
 
-  const locale = locales?.[lang || "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> &
@@ -41,7 +53,7 @@ export function AvatarLabel() {
       React.DragEvent<HTMLLabelElement>,
   ) => {
     event.preventDefault();
-    setDraggableMessage(locale?.atoms?.uploader?.dropHere || "");
+    setDraggableMessage(uploaderLocale.dropHere);
   };
 
   const handleDragLeave = () => {

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

@@ -0,0 +1,8 @@
+export * from "./uploader";
+export * from "./avatar-label";
+export * from "./upload-file-label";
+export * from "./view-image-modal";
+export * from "./upload-file-listing";
+export * from "./upload-file-error-box";
+export * from "./upload-file-input";
+export * from "./uploader-title";

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

@@ -0,0 +1,40 @@
+"use client";
+
+import { cn, mergeUploaderLocale } from "@/utils";
+import { useEmperorUI, useUploaderContext } from "@/hooks";
+import { useMemo } from "react";
+import { getLocales, Locale } from "@/i18n";
+
+export function UploadFileErrorBox() {
+  const { config } = useEmperorUI();
+  const { files, isRequired, classNames, errorMessage, 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 isError = useMemo(
+    () => files?.length === 0 && isRequired,
+    [files, isRequired],
+  );
+
+  if (isError)
+    return (
+      <p className={cn("text-[14px] text-danger", classNames?.error)}>
+        {errorMessage ?? uploaderLocale.errorUploadingFile}
+      </p>
+    );
+
+  return null;
+}

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

@@ -1,10 +1,11 @@
 "use client";
 
 import { Spinner } from "@heroui/spinner";
-import { cn } from "@/utils";
+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();
@@ -18,12 +19,22 @@ export function UploadFileLabel() {
     isLoading,
     isMulti,
     files,
+    locales,
   } = useUploaderContext();
 
-  const locales = config?.interLocalization?.locales;
-  const lang = config?.interLocalization?.lang;
+  const configLocales = config?.interLocalization?.locales;
+  const lang =
+    config?.interLocalization?.lang ||
+    config?.interLocalization?.defaultLanguage ||
+    "en";
 
-  const locale = locales?.[lang || "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> &
@@ -38,7 +49,7 @@ export function UploadFileLabel() {
       React.DragEvent<HTMLLabelElement>,
   ) => {
     event.preventDefault();
-    setDraggableMessage(locale?.atoms?.uploader?.dropHere || "");
+    setDraggableMessage(uploaderLocale.dropHere);
   };
 
   const handleDragLeave = () => {
@@ -68,12 +79,8 @@ export function UploadFileLabel() {
         <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?.atoms?.uploader?.selectFile || ""}
-          </p>
-          <p className="opacity-70">
-            {locale?.atoms?.uploader?.selectionTypes || ""}
-          </p>
+          <p className="font-bold">{uploaderLocale.selectFile}</p>
+          <p className="opacity-70">{uploaderLocale.selectionTypes}</p>
 
           {draggableMessage && (
             <p className="text-sm font-bold">{draggableMessage}</p>

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

@@ -1,8 +1 @@
-export * from "./uploader";
-export * from "./avatar-label";
-export * from "./upload-file-label";
-export * from "./view-image-modal";
-export * from "./upload-file-listing";
-export * from "./upload-file-error-box";
-export * from "./upload-file-input";
-export * from "./uploader-title";
+export * from "./components";

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

@@ -3,6 +3,7 @@ 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> = {
@@ -17,16 +18,6 @@ const meta: Meta<typeof Uploader> = {
       layout: {
         withScaffold: false,
       },
-      interLocalization: {
-        locales: {
-          [LangKey.ENGLISH]: {
-            atoms: {
-              uploader: {},
-            },
-          },
-          [LangKey.ARABIC]: {},
-        },
-      },
     },
   }),
 };
@@ -192,3 +183,19 @@ export const WithTitle: Story = {
     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/molecules/item-card/index.ts

@@ -2,6 +2,8 @@ export * from "./item-card";
 export * from "./loading-item";
 export * from "./item-banner";
 export * from "./item-actions-dropdown";
+export * from "./item-actions-buttons";
+export * from "./item-actions-overlay";
 export * from "./item-card-header";
 export * from "./item-card-body";
 export * from "./item-card-footer";

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

@@ -0,0 +1,41 @@
+"use client";
+
+import type { ItemCardProps } from "@/types";
+import { cn } from "@/utils";
+import { Button } from "@heroui/button";
+
+type ItemActionsOverlayProps = Pick<
+  ItemCardProps,
+  "actions" | "classNames" | "onActionClick"
+>;
+
+export function ItemActionsOverlay({
+  actions,
+  classNames,
+  onActionClick,
+}: ItemActionsOverlayProps) {
+  if (!actions || actions.length === 0) return null;
+
+  return (
+    <div
+      data-slot="emperor-ui-item-card-actions-overlay-buttons"
+      className={cn("flex flex-col items-center gap-3", classNames?.actions)}
+    >
+      {actions?.map(
+        ({ key, label, className: actionClassName, ...props }, index) => {
+          return (
+            <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}
+            />
+          );
+        },
+      )}
+    </div>
+  );
+}

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

@@ -17,9 +17,15 @@ export function ItemCardBody({
   classNames,
   actions,
   onActionClick,
+  actionsViewVariant = "dropdown",
 }: Pick<
   ItemCardProps,
-  "item" | "orientation" | "classNames" | "actions" | "onActionClick"
+  | "item"
+  | "orientation"
+  | "classNames"
+  | "actions"
+  | "onActionClick"
+  | "actionsViewVariant"
 >) {
   return (
     <CardBody
@@ -56,7 +62,7 @@ export function ItemCardBody({
         </p>
       )}
 
-      {orientation === "horizontal" && (
+      {orientation === "horizontal" && actionsViewVariant === "dropdown" && (
         <ItemActionsDropdown
           actions={actions}
           classNames={classNames}

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

@@ -5,12 +5,24 @@ import { cn } from "@/utils";
 import { itemFooterClasses, itemChipsClasses } from "./styles";
 import { CardFooter } from "@heroui/card";
 import { Chip } from "@heroui/chip";
+import { ItemActionsButtons } from "./item-actions-buttons";
 
 export function ItemCardFooter({
   item,
   orientation,
   classNames,
-}: Pick<ItemCardProps, "item" | "orientation" | "classNames">) {
+  actions,
+  onActionClick,
+  actionsViewVariant = "dropdown",
+}: Pick<
+  ItemCardProps,
+  | "item"
+  | "orientation"
+  | "classNames"
+  | "actions"
+  | "onActionClick"
+  | "actionsViewVariant"
+>) {
   return (
     <CardFooter
       data-slot="emperor-ui-item-card-footer"
@@ -50,6 +62,15 @@ export function ItemCardFooter({
           )}
         </menu>
       )}
+
+      {actionsViewVariant === "buttons" && actions && actions.length > 0 && (
+        <ItemActionsButtons
+          actions={actions}
+          classNames={classNames}
+          onActionClick={onActionClick}
+          className="ml-auto"
+        />
+      )}
     </CardFooter>
   );
 }

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

@@ -15,9 +15,15 @@ export function ItemCardHeader({
   classNames,
   actions,
   onActionClick,
+  actionsViewVariant = "dropdown",
 }: Pick<
   ItemCardProps,
-  "item" | "orientation" | "classNames" | "actions" | "onActionClick"
+  | "item"
+  | "orientation"
+  | "classNames"
+  | "actions"
+  | "onActionClick"
+  | "actionsViewVariant"
 >) {
   return (
     <CardHeader
@@ -49,7 +55,7 @@ export function ItemCardHeader({
         classNames={classNames}
       />
 
-      {orientation === "vertical" && (
+      {orientation === "vertical" && actionsViewVariant === "dropdown" && (
         <ItemActionsDropdown
           actions={actions}
           classNames={classNames}

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

@@ -1,6 +1,10 @@
 "use client";
 
-import type { ItemCardOrientation, ItemCardProps } from "@/types";
+import type {
+  ItemCardActionsViewVariant,
+  ItemCardOrientation,
+  ItemCardProps,
+} from "@/types";
 import { cn } from "@/utils";
 import { Card } from "@heroui/card";
 import { motion } from "framer-motion";
@@ -13,6 +17,7 @@ import {
   ItemCardFooter,
 } from "@/components";
 import { useWindowSize } from "@/hooks";
+import { ItemActionsOverlay } from "./item-actions-overlay";
 
 export function ItemCard({
   variants,
@@ -24,6 +29,7 @@ export function ItemCard({
   hoverEffect = "none",
   onActionClick,
   orientation: defaultOrientation = "vertical",
+  actionsViewVariant = "dropdown",
 }: ItemCardProps) {
   const { isExtraSmallDevice } = useWindowSize();
 
@@ -40,11 +46,18 @@ export function ItemCard({
       />
     );
 
+  const hasActions = actions && actions.length > 0;
+  const isDropdownVariant: boolean =
+    (actionsViewVariant as ItemCardActionsViewVariant) === "dropdown";
+  const isHoverOverlayVariant: boolean =
+    (actionsViewVariant as ItemCardActionsViewVariant) === "hover-overlay";
+
   return (
     <motion.div
       data-slot="emperor-ui-item-card"
       className={cn(
         itemCardMotionClasses({ orientation }),
+        "group",
         classNames?.base,
         className,
       )}
@@ -56,6 +69,7 @@ export function ItemCard({
         data-slot="emperor-ui-item-card-main-wrapper"
         className={cn(
           itemMainWrapperClasses({ orientation }),
+          "relative overflow-hidden",
           classNames?.mainWrapper,
         )}
       >
@@ -65,6 +79,9 @@ export function ItemCard({
           classNames={classNames}
           actions={actions}
           onActionClick={onActionClick}
+          actionsViewVariant={
+            isDropdownVariant ? "dropdown" : actionsViewVariant
+          }
         />
 
         <ItemCardBody
@@ -73,13 +90,34 @@ export function ItemCard({
           classNames={classNames}
           actions={actions}
           onActionClick={onActionClick}
+          actionsViewVariant={
+            isDropdownVariant ? "dropdown" : actionsViewVariant
+          }
         />
 
         <ItemCardFooter
           item={item}
           orientation={orientation}
           classNames={classNames}
+          actions={actions}
+          onActionClick={onActionClick}
+          actionsViewVariant={actionsViewVariant}
         />
+        {isHoverOverlayVariant && hasActions && (
+          <div
+            data-slot="emperor-ui-item-card-actions-hover-overlay"
+            className={cn(
+              "pointer-events-none absolute inset-0 z-20 flex items-center justify-center bg-black/60 opacity-0",
+              "transition-opacity duration-200 group-hover:opacity-100",
+            )}
+          >
+            <ItemActionsOverlay
+              actions={actions}
+              classNames={classNames}
+              onActionClick={onActionClick}
+            />
+          </div>
+        )}
       </Card>
     </motion.div>
   );

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

@@ -117,6 +117,42 @@ export const WithActions: Story = {
   },
 };
 
+export const WithButtonsActions: Story = {
+  args: {
+    item: {
+      key: String(MOCK_LISTINGS[0]?.id),
+      title: MOCK_LISTINGS[0]?.title,
+      description: MOCK_LISTINGS[0]?.description,
+      image: {
+        src: MOCK_LISTINGS[0]?.image || "",
+        alt: MOCK_LISTINGS[0]?.title || "",
+      },
+    },
+    actions: ITEM_CARD_ACTIONS,
+    actionsViewVariant: "buttons",
+  },
+};
+
+export const WithHoverOverlayActions: Story = {
+  args: {
+    item: {
+      key: String(MOCK_LISTINGS[0]?.id),
+      title: MOCK_LISTINGS[0]?.title,
+      description: MOCK_LISTINGS[0]?.description,
+      image: {
+        src: MOCK_LISTINGS[0]?.image || "",
+        alt: MOCK_LISTINGS[0]?.title || "",
+      },
+    },
+    actions: ITEM_CARD_ACTIONS?.map((action) => ({
+      ...action,
+      variant: "solid",
+      size: "lg",
+    })),
+    actionsViewVariant: "hover-overlay",
+  },
+};
+
 export const WithChips: Story = {
   args: {
     item: {

package/src/components/organisms/deletion-confirmor/deletion-confirmor.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { Button } from "@heroui/button";
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from "@heroui/modal";
+import { Trash2 } from "lucide-react";
+import { Locale } from "@/i18n";
+import { useEmperorUI } from "@/hooks";
+import { cn } from "@/utils";
+import type { DeletionConfirmorProps } from "@/types";
+import {
+  deletionConfirmorBodyClasses,
+  deletionConfirmorContentClasses,
+  deletionConfirmorFooterClasses,
+  deletionConfirmorHeaderClasses,
+} from "./styles";
+
+export function DeletionConfirmor({
+  isOpen,
+  onClose,
+  title,
+  description,
+  className,
+  classNames,
+  confirmProps,
+  declineProps,
+}: DeletionConfirmorProps) {
+  const { config } = useEmperorUI();
+
+  const lang = config?.interLocalization?.lang ?? "en";
+  const locale = config?.interLocalization?.locales?.[lang] as
+    | Locale
+    | undefined;
+  const deletionConfirmorLocale = locale?.organisms?.deletionConfirmor;
+
+  const handleDecline = (e?: unknown) => {
+    if (typeof declineProps?.onPress === "function") {
+      (declineProps.onPress as (e?: unknown) => void)(e);
+    }
+    onClose();
+  };
+
+  return (
+    <Modal
+      placement="center"
+      isOpen={isOpen}
+      onClose={onClose}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+      dir={lang === "ar" ? "rtl" : "ltr"}
+      classNames={
+        className || classNames?.base
+          ? { base: cn(className, classNames?.base) }
+          : undefined
+      }
+    >
+      <ModalContent
+        className={cn(deletionConfirmorContentClasses(), classNames?.content)}
+      >
+        <ModalHeader
+          className={cn(deletionConfirmorHeaderClasses(), classNames?.header)}
+        >
+          {title}
+        </ModalHeader>
+
+        <ModalBody
+          className={cn(deletionConfirmorBodyClasses(), classNames?.body)}
+        >
+          {description}
+        </ModalBody>
+
+        <ModalFooter
+          className={cn(deletionConfirmorFooterClasses(), classNames?.footer)}
+        >
+          <Button
+            variant="flat"
+            size="sm"
+            {...declineProps}
+            onPress={handleDecline}
+            className={cn(declineProps?.className, classNames?.declineButton)}
+          >
+            {declineProps?.children ??
+              deletionConfirmorLocale?.decline ??
+              "Decline"}
+          </Button>
+
+          <Button
+            color="danger"
+            size="sm"
+            {...confirmProps}
+            className={cn(confirmProps?.className, classNames?.confirmButton)}
+            startContent={
+              confirmProps?.isLoading
+                ? undefined
+                : (confirmProps?.startContent ?? (
+                    <Trash2 className="size-4" aria-hidden />
+                  ))
+            }
+          >
+            {confirmProps?.children ??
+              deletionConfirmorLocale?.confirm ??
+              "Confirm"}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

package/src/components/organisms/deletion-confirmor/index.ts

@@ -0,0 +1,3 @@
+export * from "./deletion-confirmor";
+export * from "./styles";
+export * from "./stories/components";