@povio/ui 0.0.2 → 0.0.3

package/src/components/Menu/MenuDesktop.tsx

@@ -0,0 +1,68 @@
+import React, { useRef, useState } from "react";
+import { useHover } from "react-aria";
+import { MenuTrigger as AriaMenuTrigger } from "react-aria-components";
+
+import type { MenuProps } from "#ui/components/Menu/Menu";
+import { MenuPopover } from "#ui/components/Menu/MenuPopover";
+
+const CLOSE_DELAY = 100;
+
+export const MenuDesktop = ({ trigger, items, closeDelay = CLOSE_DELAY, triggerOnHover = false }: MenuProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const isHoveringTrigger = useRef(false);
+
+  const openMenu = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setIsOpen(true);
+  };
+
+  const closeMenu = () => {
+    if (isHoveringTrigger.current) {
+      return;
+    }
+    timeoutRef.current = setTimeout(() => {
+      setIsOpen(false);
+      timeoutRef.current = null;
+    }, closeDelay);
+  };
+
+  const { hoverProps } = useHover({
+    isDisabled: !triggerOnHover,
+    onHoverChange: (isHovering) => {
+      if (isHovering) {
+        isHoveringTrigger.current = true;
+        openMenu();
+      } else {
+        isHoveringTrigger.current = false;
+        closeMenu();
+      }
+    },
+  });
+
+  let triggerComponent = trigger;
+  if (triggerOnHover) {
+    triggerComponent = React.cloneElement(trigger, hoverProps);
+  }
+
+  return (
+    <AriaMenuTrigger
+      isOpen={triggerOnHover ? isOpen : undefined}
+      onOpenChange={setIsOpen}
+    >
+      {triggerComponent}
+      <MenuPopover
+        offset={0}
+        className="pt-2"
+        items={items}
+        isOpen={triggerOnHover ? isOpen : undefined}
+        isNonModal={triggerOnHover}
+        onMouseEnter={triggerOnHover ? openMenu : undefined}
+        onMouseLeave={triggerOnHover ? closeMenu : undefined}
+      />
+    </AriaMenuTrigger>
+  );
+};

package/src/components/Menu/MenuItem.tsx

@@ -0,0 +1,33 @@
+import { clsx } from "clsx";
+import { MenuItem as AriaMenuItem } from "react-aria-components";
+
+import { ArrowRightIcon } from "#ui/assets/icons/ArrowRight";
+import type { MenuItem as MenuItemType } from "#ui/components/Menu/Menu";
+
+type MenuListItemProps = MenuItemType;
+
+export const MenuItem = ({ label, content, children, ...item }: MenuListItemProps) => {
+  const hasSubmenu = !!children && children?.length > 0;
+
+  return (
+    <AriaMenuItem
+      {...item}
+      textValue={label}
+      aria-label={label}
+      className={clsx(menuItemClass, item.className)}
+    >
+      {content ?? label}
+      {hasSubmenu && <ArrowRightIcon className="size-6" />}
+    </AriaMenuItem>
+  );
+};
+
+export const menuItemClass = clsx(
+  "flex cursor-pointer items-center justify-between gap-list-gap-checkbox-to-label px-list-side-item py-list-height-item",
+  "border-b border-b-elevation-outline-default-1 outline-none last:border-b-0",
+  "bg-elevation-fill-default-1 text-interactive-text-secondary-idle",
+  "disabled:cursor-default disabled:text-interactive-text-secondary-disabled",
+  "hover:bg-elevation-fill-default-1 hover:text-interactive-text-secondary-hover",
+  "open:bg-interactive-contained-primary-idle open:text-interactive-text-secondary-idle-inverted",
+  "focus-visible:bg-elevation-fill-default-1 focus-visible:text-interactive-text-secondary-hover",
+);

package/src/components/Menu/MenuMobile.tsx

@@ -0,0 +1,81 @@
+import { clsx } from "clsx";
+import { useRef, useState } from "react";
+import { Button as AriaButton, Menu as AriaMenu } from "react-aria-components";
+
+import { ArrowLeftIcon } from "#ui/assets/icons/ArrowLeft";
+import type { MenuItem as MenuItemType, MenuProps } from "#ui/components/Menu/Menu";
+import { MenuItem, menuItemClass } from "#ui/components/Menu/MenuItem";
+import { BottomSheet } from "#ui/components/overlays/BottomSheet/BottomSheet";
+
+export const MenuMobile = ({ trigger, items }: MenuProps) => {
+  const activeItemRef = useRef<MenuItemType | null>(null);
+  const activeItemParentsRef = useRef<MenuItemType[]>([]);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState<MenuItemType | null>(null);
+
+  const onAction = (item: MenuItemType) => {
+    if (!item.children) {
+      activeItemRef.current = null;
+      activeItemParentsRef.current = [];
+      setActiveItem(null);
+      setIsOpen(false);
+      return;
+    }
+
+    if (activeItemRef.current) {
+      activeItemParentsRef.current.push(activeItemRef.current);
+    }
+    activeItemRef.current = item;
+    setActiveItem(activeItemRef.current);
+  };
+
+  const onClose = () => {
+    if (activeItemRef.current) {
+      return;
+    }
+    setIsOpen(false);
+  };
+
+  const onBack = () => {
+    activeItemRef.current = activeItemParentsRef.current.pop() ?? null;
+    setActiveItem(activeItemRef.current);
+  };
+
+  return (
+    <BottomSheet
+      isOpen={isOpen}
+      onOpenChange={setIsOpen}
+      trigger={trigger}
+      isDismissable
+    >
+      {() => (
+        <>
+          {activeItem && (
+            <AriaButton
+              className={clsx(menuItemClass, "!justify-start w-full font-labels-default")}
+              onPress={onBack}
+            >
+              <ArrowLeftIcon className="size-6" />
+              {activeItem.label}
+            </AriaButton>
+          )}
+          <AriaMenu
+            autoFocus
+            onClose={onClose}
+            className="outline-none"
+          >
+            {(activeItem?.children ?? items).map((item, index) => (
+              <MenuItem
+                // oxlint-disable-next-line react/no-array-index-key
+                key={index}
+                {...item}
+                onAction={() => onAction(item)}
+              />
+            ))}
+          </AriaMenu>
+        </>
+      )}
+    </BottomSheet>
+  );
+};

package/src/components/Menu/MenuPopover.tsx

@@ -0,0 +1,45 @@
+import { clsx } from "clsx";
+import {
+  Menu as AriaMenu,
+  Popover as AriaPopover,
+  type PopoverProps as AriaPopoverProps,
+  SubmenuTrigger as AriaSubmenuTrigger,
+} from "react-aria-components";
+
+import type { MenuProps } from "#ui/components/Menu/Menu";
+import { MenuItem } from "#ui/components/Menu/MenuItem";
+
+export interface MenuPopoverProps extends Pick<MenuProps, "items">, AriaPopoverProps {}
+
+export const MenuPopover = ({ items, ...props }: MenuPopoverProps) => {
+  return (
+    <AriaPopover
+      {...props}
+      className={clsx("outline-none", props.className)}
+    >
+      <div className="overflow-hidden rounded-list-rounding-dropdown border border-elevation-outline-default-1 shadow-5 outline-none">
+        <AriaMenu>
+          {items.map((item, index) =>
+            !item.children || item.children.length === 0 ? (
+              <MenuItem
+                // oxlint-disable-next-line react/no-array-index-key
+                key={index}
+                {...item}
+              />
+            ) : (
+              // oxlint-disable-next-line react/no-array-index-key
+              <AriaSubmenuTrigger key={index}>
+                <MenuItem {...item} />
+                <MenuPopover
+                  offset={0}
+                  className="pl-2"
+                  items={item.children}
+                />
+              </AriaSubmenuTrigger>
+            ),
+          )}
+        </AriaMenu>
+      </div>
+    </AriaPopover>
+  );
+};

package/src/components/buttons/Button/Button.tsx

@@ -0,0 +1,108 @@
+import { clsx } from "clsx";
+import type { ElementType, FC, ReactElement, SVGProps } from "react";
+import {
+  Button as AriaButton,
+  type ButtonProps as AriaButtonProps,
+  Link as AriaLink,
+  type LinkProps as AriaLinkProps,
+  ToggleButton as AriaToggleButton,
+  type ToggleButtonProps as AriaToggleButtonProps,
+} from "react-aria-components";
+
+import { ButtonContent } from "#ui/components/buttons/shared/ButtonContent";
+import type { ButtonContentVariantProps } from "#ui/components/buttons/shared/buttonContent.cva";
+import { TooltipEllipsis } from "#ui/components/overlays/Tooltip/TooltipEllipsis";
+import { UIStyle } from "#ui/config/uiStyle.context";
+
+import {
+  type ButtonVariantProps,
+  button,
+  buttonContent,
+  buttonIconSize,
+  buttonSize,
+  buttonTypography,
+} from "./button.cva";
+
+export type ButtonIconProps<IconOnly extends boolean = false> = {
+  iconOnly?: IconOnly;
+} & (IconOnly extends true
+  ? { icon: FC<SVGProps<SVGSVGElement>> | ReactElement }
+  : { icon?: FC<SVGProps<SVGSVGElement>> | ReactElement });
+
+type ToggleButtonProps = { toggle?: false } | ({ toggle: true; isSelected?: boolean } & AriaToggleButtonProps);
+
+export type ButtonProps<IconOnly extends boolean = false> = ButtonVariantProps &
+  ButtonContentVariantProps &
+  AriaButtonProps &
+  ButtonIconProps<IconOnly> &
+  ToggleButtonProps & {
+    children: string;
+    isLoading?: boolean;
+    link?: AriaLinkProps;
+    noDisableWhenLoading?: boolean;
+    iconClassName?: string;
+    disableTooltip?: boolean;
+  };
+
+export const Button = <IconOnly extends boolean = false>({
+  icon: Icon,
+  iconPosition,
+  children,
+  isLoading,
+  className,
+  link,
+  iconClassName,
+  noDisableWhenLoading,
+  disableTooltip,
+  ...props
+}: ButtonProps<IconOnly>) => {
+  const uiStyle = UIStyle.useConfig();
+  const buttonCva = (uiStyle?.button?.cva ?? button) as unknown as UIStyle.Cva<ButtonVariantProps>;
+  const buttonSizeCva = (uiStyle?.button?.sizeCva ?? buttonSize) as unknown as UIStyle.Cva<
+    ButtonVariantProps & { iconOnly?: boolean }
+  >;
+  const buttonContentCva = (uiStyle?.button?.contentCva ??
+    buttonContent) as unknown as UIStyle.Cva<ButtonContentVariantProps>;
+  const buttonIconSizeCva = (uiStyle?.button?.iconSize ?? buttonIconSize) as unknown as UIStyle.Cva<
+    Pick<ButtonVariantProps, "size">
+  >;
+  const typographyMap = uiStyle?.button?.typography ?? buttonTypography;
+
+  const Component: ElementType = (() => {
+    if (link) {
+      return AriaLink;
+    }
+    if (props.toggle != null) {
+      return AriaToggleButton;
+    }
+    return AriaButton;
+  })();
+
+  return (
+    <TooltipEllipsis
+      text={children}
+      isDisabled={disableTooltip}
+    >
+      {(onContentRef) => (
+        <Component
+          {...props}
+          {...link}
+          isDisabled={props.isDisabled || (isLoading && !noDisableWhenLoading)}
+          className={clsx(buttonCva({ ...props, className }), buttonSizeCva({ ...props }))}
+        >
+          <ButtonContent
+            isLoading={isLoading}
+            icon={Icon}
+            text={children}
+            ref={onContentRef}
+            hideText={props.iconOnly}
+            iconPosition={iconPosition}
+            iconClassName={buttonIconSizeCva({ ...props, className: iconClassName })}
+            className={buttonContentCva({ ...props, iconPosition: !Icon ? "none" : iconPosition })}
+            typography={typographyMap({ ...props })}
+          />
+        </Component>
+      )}
+    </TooltipEllipsis>
+  );
+};