@js-empire/emperor-ui 1.3.11 → 1.3.12

package/src/components/molecules/side-bar/compact-side-bar.tsx

@@ -0,0 +1,77 @@
+import { createPortal } from "react-dom";
+import { useEffect, useState } from "react";
+import { cn } from "@/utils";
+import { Button } from "@heroui/button";
+import { Divider } from "@heroui/divider";
+import { ScrollShadow } from "@heroui/scroll-shadow";
+import { CompactSideBarProps } from "@/types";
+
+const CompactSideBarContent = ({
+  items = [],
+  isOpen,
+  onOpenChange,
+  triggerProps,
+}: CompactSideBarProps) => {
+  const { content, ...restTriggerProps } = triggerProps || {};
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-4 p-2",
+        "h-[calc(100vh-16px)] bg-gray-200 m-2 rounded-lg overflow-hidden",
+        "transition-width ease-in-out duration-300",
+        isOpen ? "w-[20vw]" : "w-[48px]",
+      )}
+    >
+      <div className="w-fit flex flex-col">
+        <Button
+          variant="light"
+          size="sm"
+          onPress={() => onOpenChange?.(true)}
+          className={cn("min-w-7 w-fit px-0.5")}
+          {...restTriggerProps}
+        >
+          {content}
+        </Button>
+      </div>
+
+      <Divider />
+
+      <ScrollShadow
+        as="ul"
+        hideScrollBar
+        className="max-h-[70vh] flex flex-col gap-4 p-0 overflow-y-auto"
+      >
+        {items?.map(({ id, Icon, label }) => (
+          <li
+            key={id}
+            className="w-fit flex items-center justify-center gap-3 ms-1.5 cursor-pointer"
+          >
+            {Icon && <Icon className="size-5" />}
+
+            {label && isOpen && (
+              <p className={cn("text-sm font-semibold")}>{label}</p>
+            )}
+          </li>
+        ))}
+      </ScrollShadow>
+    </div>
+  );
+};
+
+export const CompactSideBar = (props: CompactSideBarProps) => {
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const element = document.getElementById("emperor-compact-sidebar");
+    setTimeout(() => {
+      setContainer(element);
+    }, 100);
+  }, []);
+
+  if (!container) {
+    return null;
+  }
+
+  return createPortal(<CompactSideBarContent {...props} />, container);
+};

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

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

package/src/components/molecules/side-bar/side-bar-drawer.tsx

@@ -0,0 +1,113 @@
+import { useEmperorUI } from "@/hooks";
+import { useState } from "react";
+import {
+  Drawer,
+  DrawerHeader,
+  DrawerBody,
+  DrawerContent,
+  DrawerFooter,
+} from "@heroui/drawer";
+import { Button } from "@heroui/button";
+import { ScrollShadow } from "@heroui/scroll-shadow";
+import { Divider } from "@heroui/divider";
+import { SideBarProps } from "@/types";
+import { cn } from "@/utils";
+import { sideBarItemClasses, sideBarItemStyles } from "./styles";
+
+export const SideBarDrawer = ({
+  isOpen,
+  onOpenChange,
+  triggerProps,
+  classNames,
+  header,
+  items = [],
+  actions = [],
+  variant = "default",
+}: SideBarProps) => {
+  const { config } = useEmperorUI();
+  const [hoveredItem, setHoveredItem] = useState<string | null>(null);
+  const { content, ...restTriggerProps } = triggerProps || {};
+
+  const dir = config?.interLocalization?.dir;
+
+  const isRTL = dir === "rtl";
+
+  return (
+    <>
+      <Button
+        variant="ghost"
+        isIconOnly
+        size="sm"
+        onPress={() => onOpenChange?.(true)}
+        className={cn(classNames?.trigger)}
+        {...restTriggerProps}
+      >
+        {content}
+      </Button>
+
+      <Drawer
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        placement={isRTL ? "right" : "left"}
+        size="sm"
+        dir={dir}
+        className="p-0"
+      >
+        <DrawerContent className="p-0">
+          <DrawerHeader className={cn("text-xl font-bold", classNames?.title)}>
+            {header}
+          </DrawerHeader>
+
+          <DrawerBody className={cn("p-0 mt-4 h-fit")}>
+            <ScrollShadow
+              as="ul"
+              hideScrollBar
+              data-slot="emperor-side-bar-menu"
+              className={cn("max-h-[60vh] overflow-y-auto", classNames?.menu)}
+            >
+              {items?.map(({ id, label, href, Icon }) => (
+                <li
+                  key={href}
+                  data-slot="emperor-side-bar-item"
+                  style={sideBarItemStyles({
+                    isHovered: hoveredItem === id,
+                    variant,
+                  })}
+                  className={cn(
+                    sideBarItemClasses({ variant }),
+                    classNames?.menuItem,
+                  )}
+                  onMouseEnter={() => setHoveredItem(id)}
+                  onMouseLeave={() => setHoveredItem(null)}
+                >
+                  {Icon && <Icon className="size-4" />}
+                  {label && <p>{label}</p>}
+                </li>
+              ))}
+            </ScrollShadow>
+          </DrawerBody>
+
+          {actions && actions?.length > 0 && (
+            <>
+              <Divider className="m-auto w-11/12" />
+
+              <DrawerFooter className={cn(classNames?.actionsWrapper)}>
+                {actions?.map(({ key, label, ...props }) => (
+                  <Button
+                    key={key}
+                    variant="ghost"
+                    size="sm"
+                    className={cn(classNames?.actionItem)}
+                    {...props}
+                  >
+                    {label}
+                  </Button>
+                ))}
+              </DrawerFooter>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+};

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

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Brand, SideBar } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import { MenuIcon } from "lucide-react";
+import { useDisclosure } from "@heroui/modal";
+import { MOCK_HEADER_ACTIONS, MOCK_HEADER_ITEMS } from "@/mocks";
+import { SideBarProps } from "@/types";
+
+const meta: Meta<typeof SideBar> = {
+  title: "Molecules/SideBar",
+  component: SideBar,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    header: <Brand className="text-white" />,
+    triggerProps: {
+      className: "m-5",
+      startContent: <MenuIcon className="size-4" />,
+    },
+  },
+  render: (args: SideBarProps) => {
+    const { isOpen, onOpenChange } = useDisclosure();
+
+    return <SideBar {...args} isOpen={isOpen} onOpenChange={onOpenChange} />;
+  },
+};
+
+export const WithItems: Story = {
+  args: {
+    header: <Brand className="text-white" />,
+    triggerProps: {
+      className: "m-5",
+      startContent: <MenuIcon className="size-4" />,
+    },
+  },
+  render: (args: SideBarProps) => {
+    const { isOpen, onOpenChange } = useDisclosure();
+
+    return (
+      <SideBar
+        {...args}
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        items={MOCK_HEADER_ITEMS}
+      />
+    );
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    header: <Brand className="text-white" />,
+    triggerProps: {
+      className: "m-5",
+      startContent: <MenuIcon className="size-4" />,
+    },
+  },
+  render: (args: SideBarProps) => {
+    const { isOpen, onOpenChange } = useDisclosure();
+
+    return (
+      <SideBar
+        {...args}
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        items={MOCK_HEADER_ITEMS}
+        actions={MOCK_HEADER_ACTIONS}
+      />
+    );
+  },
+};
+
+export const Compact: Story = {
+  args: {
+    variant: "compact",
+  },
+  render: (args: SideBarProps) => {
+    const { isOpen, onOpenChange } = useDisclosure();
+
+    return (
+      <SideBar
+        {...args}
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        items={MOCK_HEADER_ITEMS}
+        actions={MOCK_HEADER_ACTIONS}
+        triggerProps={{
+          content: (
+            <Brand classNames={{ logo: "size-7" }} isIconOnly={!isOpen} />
+          ),
+        }}
+      />
+    );
+  },
+};

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

@@ -0,0 +1,31 @@
+import { cn } from "@/utils";
+import { VariantProps } from "class-variance-authority";
+import { forwardRef, ComponentProps } from "react";
+import { sideBarClasses } from "./styles";
+import type { SideBarProps } from "@/types";
+import { SideBarDrawer } from "./side-bar-drawer";
+import { CompactSideBar } from "./compact-side-bar";
+
+export const SideBar = forwardRef<
+  HTMLDivElement,
+  ComponentProps<"div"> & VariantProps<typeof sideBarClasses> & SideBarProps
+>((props, ref) => {
+  const { variant = "default", className, classNames } = props;
+
+  return (
+    <div
+      ref={ref}
+      data-slot="emperor-side-bar"
+      className={cn(
+        sideBarClasses({
+          variant,
+          className: cn(className, classNames?.base),
+        }),
+      )}
+      {...props}
+    >
+      {variant === "default" && <SideBarDrawer {...props} />}
+      {variant === "compact" && <CompactSideBar {...props} />}
+    </div>
+  );
+});

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

@@ -0,0 +1,28 @@
+import { cva } from "class-variance-authority";
+
+export const sideBarClasses = cva([""], {
+  variants: {
+    variant: {
+      default: [],
+      compact: [],
+    },
+  },
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const sideBarItemClasses = cva(
+  [
+    "w-full cursor-pointer px-6 py-2 transition-all font-semibold text-sm flex items-center gap-2",
+  ],
+  {
+    variants: {
+      variant: {
+        default: [],
+        compact: [],
+      },
+    },
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);

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

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

package/src/components/molecules/side-bar/styles/styles.ts

@@ -0,0 +1,13 @@
+import { SideBarItemStylesProps } from "@/types";
+import { CSSProperties } from "react";
+
+export const sideBarItemStyles = ({
+  foregroundColor,
+  primaryColor,
+  isHovered,
+}: SideBarItemStylesProps): CSSProperties => {
+  return {
+    color: isHovered ? foregroundColor : "inherit",
+    backgroundColor: isHovered ? primaryColor : "transparent",
+  };
+};

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

@@ -0,0 +1,110 @@
+"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}
+          </Button>
+
+          <Button
+            color="danger"
+            size="sm"
+            startContent={
+              confirmProps?.isLoading
+                ? undefined
+                : (confirmProps?.startContent ?? (
+                    <Trash2 className="size-4" aria-hidden />
+                  ))
+            }
+            {...confirmProps}
+            className={cn(confirmProps?.className, classNames?.confirmButton)}
+          >
+            {confirmProps?.children ?? deletionConfirmorLocale?.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";

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

@@ -0,0 +1,25 @@
+import { Button } from "@heroui/button";
+import { DeletionConfirmorProps } from "@/types";
+import { useState } from "react";
+import { DeletionConfirmor } from "@/components";
+
+export const DeletionConfirmorWithTrigger = (args: DeletionConfirmorProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Button color="danger" onPress={() => setIsOpen(true)}>
+        Delete item
+      </Button>
+
+      <DeletionConfirmor
+        confirmProps={{
+          onPress: () => setIsOpen(false),
+        }}
+        {...args}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { DeletionConfirmor, DeletionConfirmorWithTrigger } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import { DeletionConfirmorProps } from "@/types";
+import { mockAwaitingDelete } from "@/mocks";
+import { Button } from "@heroui/button";
+import { useState } from "react";
+
+const meta: Meta<typeof DeletionConfirmor> = {
+  title: "Organisms/DeletionConfirmor",
+  component: DeletionConfirmor,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "Delete item?",
+    description:
+      "This action cannot be undone. This will permanently delete the item.",
+  },
+  render: (args: DeletionConfirmorProps) => {
+    return <DeletionConfirmorWithTrigger {...args} />;
+  },
+};
+
+export const WithConfirmLoading: Story = {
+  args: {
+    title: "Delete item?",
+    description:
+      "This action cannot be undone. The confirm button will show a loading state for 2 seconds.",
+  },
+  render: (args: DeletionConfirmorProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isConfirmLoading, setIsConfirmLoading] = useState(false);
+
+    const handleConfirm = async () => {
+      setIsConfirmLoading(true);
+
+      await mockAwaitingDelete(() => {
+        setIsOpen(false);
+        setIsConfirmLoading(false);
+      })();
+    };
+
+    return (
+      <div className="flex flex-col gap-4">
+        <Button color="danger" onPress={() => setIsOpen(true)}>
+          Delete item
+        </Button>
+
+        <DeletionConfirmor
+          {...args}
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          confirmProps={{
+            ...args.confirmProps,
+            isLoading: isConfirmLoading,
+            onPress: handleConfirm,
+          }}
+        />
+      </div>
+    );
+  },
+};

package/src/components/organisms/deletion-confirmor/styles/classes.ts

@@ -0,0 +1,28 @@
+import { cva } from "class-variance-authority";
+
+export const deletionConfirmorContentClasses = cva(["p-0"], {
+  variants: {},
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const deletionConfirmorHeaderClasses = cva([], {
+  variants: {},
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const deletionConfirmorBodyClasses = cva([], {
+  variants: {},
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const deletionConfirmorFooterClasses = cva(
+  ["flex gap-2 justify-end flex-wrap"],
+  {
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);

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

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

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

@@ -0,0 +1,4 @@
+import { CSSProperties } from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type, no-empty-pattern
+export const deletionConfirmorStyles = ({}: {}): CSSProperties => ({});

package/src/components/organisms/footer/copy-rights-box.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@/utils";
+import { FooterProps } from "@/types";
+import { copyRightsClasses } from "./styles";
+
+export function CopyRightsBox({ copyRights, classNames }: FooterProps) {
+  return (
+    <section
+      data-slot="emperor-footer-policies"
+      className={cn(
+        copyRightsClasses({
+          className: cn(classNames?.copyRightsWrapper),
+        }),
+      )}
+    >
+      <p
+        className={cn(
+          "flex items-center gap-1 text-sm text-gray-400 text-center",
+          classNames?.copyRightsText,
+        )}
+      >
+        <span>©</span>
+        <span>{copyRights?.year}</span>
+        <span>{copyRights?.text}</span>
+      </p>
+    </section>
+  );
+}