@js-empire/emperor-ui 1.3.11 → 1.3.12

package/src/components/molecules/item-card/styles/classes.ts

@@ -0,0 +1,141 @@
+import { cva } from "class-variance-authority";
+
+export const itemCardMotionClasses = cva(["w-full relative"], {
+  variants: {
+    orientation: {
+      vertical: "max-w-80",
+      horizontal: "min-w-full max-w-full",
+    },
+  },
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const itemMainWrapperClasses = cva(["size-full"], {
+  variants: {
+    orientation: {
+      vertical: "flex flex-col",
+      horizontal: "grid grid-cols-[200px_auto]",
+    },
+  },
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const itemImageWrapperClasses = cva(
+  ["relative aspect-4/3 overflow-hidden"],
+  {
+    variants: {
+      orientation: {
+        vertical: "w-full",
+        horizontal: "w-fit h-full",
+      },
+    },
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);
+
+export const itemHeaderClasses = cva(["relative p-0"], {
+  variants: {
+    orientation: {
+      vertical: "",
+      horizontal: "row-span-2",
+    },
+  },
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const itemBodyClasses = cva(["relative flex flex-col gap-2 p-4"], {
+  variants: {
+    orientation: {
+      vertical: "",
+      horizontal: "",
+    },
+  },
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const itemFooterClasses = cva(
+  ["flex flex-wrap flex-col p-4 gap-4 items-start"],
+  {
+    variants: {
+      orientation: {
+        vertical: "",
+        horizontal: "justify-end",
+      },
+    },
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);
+
+export const itemTitleClasses = cva(
+  ["line-clamp-1 font-semibold text-foreground"],
+  {
+    variants: {
+      orientation: {
+        vertical: "",
+        horizontal: "w-[calc(100%-30px)]",
+      },
+    },
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);
+
+export const itemPriceClasses = cva(["text-2xl font-bold text-foreground"], {
+  variants: {
+    orientation: {
+      vertical: "",
+      horizontal: "",
+    },
+  },
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const itemDescriptionClasses = cva(
+  ["line-clamp-2 text-sm text-default-600"],
+  {
+    variants: {
+      orientation: {
+        vertical: "",
+        horizontal: "",
+      },
+    },
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);
+
+export const itemChipsClasses = cva(["flex flex-wrap items-center gap-2 p-1"], {
+  variants: {
+    orientation: {
+      vertical: "",
+      horizontal: "",
+    },
+  },
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const itemBannerClasses = cva(
+  [
+    "absolute left-0 top-0 z-10 px-2 py-1 text-xs font-semibold",
+    "bg-primary-500/50 backdrop-blur-sm text-center flex justify-center items-center",
+    "-rotate-45 w-full text-white",
+  ],
+  {
+    variants: {
+      orientation: {
+        vertical: "-translate-x-28 translate-y-7",
+        horizontal: "-translate-x-14 translate-y-7",
+      },
+    },
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);

package/src/components/molecules/item-card/styles/index.ts

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

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,64 @@
+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 { useNavigation } from "@/hooks";
+
+export const NavBarItem = forwardRef<
+  HTMLLIElement,
+  ComponentProps<"li"> &
+    VariantProps<typeof navBarItemClasses> &
+    NavBarItemProps
+>(({ className, item, variant, hoverEffect, ...props }, ref) => {
+  const {
+    hoveredItemId,
+    subItemsBoxIsHovered,
+    setSubItems,
+    setHoveredItemId,
+    setIsSubItemsBoxOpen,
+  } = useNavigation();
+
+  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({
+        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,57 @@
+import { cn } from "@/utils";
+import { VariantProps } from "class-variance-authority";
+import { forwardRef, ComponentProps } from "react";
+import type { NavBarProps } from "@/types";
+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,
+  ) => {
+    return (
+      <nav
+        ref={ref}
+        data-slot="emperor-nav-bar"
+        className={cn(navBarClasses({ hoverEffect, variant, className }))}
+        style={navBarStyles({
+          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-vite";
+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-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,58 @@
+import { cn } from "@/utils";
+import { Link } from "@heroui/link";
+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/index.ts

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

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,23 @@
+import { useEmperorUI } from "@/hooks";
+import type { ScaffoldProps } from "@/types";
+import { cn } from "@/utils";
+import { forwardRef } from "react";
+import { scaffoldClasses } from "@/components";
+
+export const Scaffold = forwardRef<HTMLDivElement, ScaffoldProps>(
+  ({ className, children, ...props }, ref) => {
+    const { config } = useEmperorUI();
+
+    return (
+      <main
+        ref={ref}
+        dir={config?.interLocalization?.dir}
+        data-slot="scaffold"
+        className={cn(scaffoldClasses({ className }), className)}
+        {...props}
+      >
+        {children}
+      </main>
+    );
+  },
+);

package/src/components/molecules/scaffold/styles/index.ts

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

package/src/components/molecules/scaffold/styles/scaffold-classes.ts

@@ -0,0 +1,10 @@
+import { cva } from "class-variance-authority";
+
+export const scaffoldClasses = cva(
+  ["flex flex-col min-h-screen w-full max-w-screen"],
+  {
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);