@js-empire/emperor-ui 1.0.1 → 1.2.0

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

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+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";

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

@@ -0,0 +1,85 @@
+import {
+  NavBarItemStylesProps,
+  NavBarMenuStylesProps,
+  NavBarStylesProps,
+} from "@/types";
+import { CSSProperties } from "react";
+
+export const navBarStyles = ({
+  primaryColor,
+  foregroundColor,
+  variant,
+}: NavBarStylesProps): CSSProperties => {
+  if (variant === "solid") {
+    return {
+      backgroundColor: primaryColor,
+      color: foregroundColor,
+    };
+  }
+
+  return {};
+};
+
+// eslint-disable-next-line no-empty-pattern
+export const navBarMenuStyles = ({}: NavBarMenuStylesProps): CSSProperties => {
+  return {};
+};
+
+export const navBarItemStyles = ({
+  foregroundColor,
+  hoverEffect,
+  primaryColor,
+  isHovered,
+  variant,
+}: NavBarItemStylesProps): CSSProperties => {
+  if (hoverEffect === "solid") {
+    return {
+      color: foregroundColor,
+      backgroundColor: primaryColor,
+    };
+  }
+
+  if (hoverEffect === "underline") {
+    return {
+      // color: primaryColor,
+    };
+  }
+
+  if (hoverEffect === "ghost") {
+    return {
+      color: isHovered ? primaryColor : foregroundColor,
+      backgroundColor: isHovered ? "transparent" : primaryColor,
+      borderColor: isHovered ? primaryColor : "transparent",
+      borderWidth: "2px",
+      borderStyle: "solid",
+    };
+  }
+
+  if (hoverEffect === "bordered") {
+    return {
+      color: isHovered ? foregroundColor : primaryColor,
+      backgroundColor: isHovered ? primaryColor : "transparent",
+      borderColor: isHovered ? "transparent" : primaryColor,
+      borderTopWidth: "2px",
+      borderBottomWidth: "2px",
+      borderRightWidth: "1px",
+      borderLeftWidth: "1px",
+      borderStyle: "solid",
+    };
+  }
+
+  if (variant === "bordered") {
+    return {
+      color: primaryColor,
+      backgroundColor: "transparent",
+      borderColor: primaryColor,
+      borderTopWidth: "2px",
+      borderBottomWidth: "2px",
+      borderRightWidth: "1px",
+      borderLeftWidth: "1px",
+      borderStyle: "solid",
+    };
+  }
+
+  return {};
+};

package/src/components/molecules/nav-bar/sub-items-box.tsx

@@ -0,0 +1,57 @@
+import { cn, Link } from "@heroui/react";
+import { useNavigation } from "@/hooks";
+import { SubItemsBoxProps } from "@/types";
+
+export const SubItemsBox = ({ subItemsColumns = 3 }: SubItemsBoxProps) => {
+  const {
+    hoveredItemId,
+    subItems,
+    isSubItemsBoxOpen,
+    subItemsBoxIsHovered,
+    setSubItemsBoxIsHovered,
+    setIsSubItemsBoxOpen,
+  } = useNavigation();
+
+  const isOpen = isSubItemsBoxOpen || subItemsBoxIsHovered;
+
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 w-full overflow-hidden bg-background",
+        "transition-all duration-300 ease-in-out z-50",
+      )}
+      style={{
+        maxHeight: isOpen
+          ? `${Number(subItems.length / subItemsColumns) * 70}px`
+          : "0px",
+      }}
+      onMouseEnter={() => {
+        setSubItemsBoxIsHovered(true);
+        setIsSubItemsBoxOpen(true);
+      }}
+      onMouseLeave={() => {
+        setSubItemsBoxIsHovered(false);
+        if (!hoveredItemId) setIsSubItemsBoxOpen(false);
+      }}
+    >
+      <ul
+        className="grid border border-gray-200"
+        style={{ gridTemplateColumns: `repeat(${subItemsColumns}, 1fr)` }}
+      >
+        {subItems?.map(({ id, href, label, Icon }) => (
+          <Link
+            key={id}
+            href={href}
+            className={cn(
+              " w-full flex items-center gap-2 text-foreground p-2 transition-all duration-300 ease-in-out",
+              "hover:text-background hover:bg-primary",
+            )}
+          >
+            {Icon && <Icon className="size-4" />}
+            {label && <p>{label}</p>}
+          </Link>
+        ))}
+      </ul>
+    </div>
+  );
+};

package/src/components/molecules/scaffold/scaffold.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Scaffold } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+
+const meta: Meta<typeof Scaffold> = {
+  title: "Molecules/Scaffold",
+  component: Scaffold,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({}),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/molecules/scaffold/scaffold.tsx

@@ -0,0 +1,36 @@
+import { useEmperorUI } from "@/hooks";
+import type { ScaffoldProps } from "@/types";
+import { cn } from "@/utils";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+
+const scaffoldStyles = cva(["flex flex-col min-h-screen w-full max-w-screen"], {
+  variants: {},
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const Scaffold = forwardRef<HTMLDivElement, ScaffoldProps>(
+  ({ className, children, ...props }, ref) => {
+    const { config } = useEmperorUI();
+
+    const backgroundColor = config?.theme?.colors?.background;
+    const foregroundColor = config?.theme?.colors?.foreground;
+
+    return (
+      <div
+        ref={ref}
+        dir={config?.interLocalization?.dir}
+        data-slot="scaffold"
+        className={cn(scaffoldStyles({ className }), className)}
+        style={{
+          backgroundColor: backgroundColor,
+          color: foregroundColor,
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,75 @@
+import { createPortal } from "react-dom";
+import { useEffect, useState } from "react";
+import { cn } from "@/utils";
+import { Button, Divider, ScrollShadow } from "@heroui/react";
+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,124 @@
+import { useEmperorUI } from "@/hooks";
+import { useState } from "react";
+import {
+  Button,
+  Drawer,
+  DrawerHeader,
+  DrawerBody,
+  DrawerContent,
+  ScrollShadow,
+  Divider,
+  DrawerFooter,
+} from "@heroui/react";
+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 backgroundColor = config?.theme?.colors?.background;
+  const primaryColor = config?.theme?.colors?.primary;
+  const foregroundColor = config?.theme?.colors?.foreground;
+
+  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"
+          style={{ backgroundColor, color: foregroundColor }}
+        >
+          <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({
+                    foregroundColor,
+                    primaryColor,
+                    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"
+                style={{ backgroundColor: foregroundColor + "20" }}
+              />
+
+              <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/react";
+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";