@js-empire/emperor-ui 1.3.6 → 1.3.7

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

@@ -1,77 +0,0 @@
-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

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

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

@@ -1,113 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

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

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

@@ -1,13 +0,0 @@
-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

@@ -1,110 +0,0 @@
-"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

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

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

@@ -1,25 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

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

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

@@ -1,4 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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>
-  );
-}