@js-empire/emperor-ui 1.3.5 → 1.3.7

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

@@ -1,3 +0,0 @@
-export * from "./nav-bar";
-export * from "./sub-items-box";
-export * from "./nav-bar-item";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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";