@react-fabric/core 1.0.0-beta.0

package/src/components/menu/Menu.tsx

@@ -0,0 +1,278 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {
+  autoUpdate,
+  flip,
+  FloatingFocusManager,
+  FloatingList,
+  FloatingNode,
+  FloatingOverlay,
+  FloatingPortal,
+  FloatingTree,
+  offset,
+  safePolygon,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useFloatingNodeId,
+  useFloatingParentNodeId,
+  useFloatingTree,
+  useHover,
+  useInteractions,
+  useListNavigation,
+  useRole,
+  useTypeahead,
+} from "@floating-ui/react";
+import { mergeRefs } from "@react-fabric/utilities";
+import classNames from "classnames";
+import {
+  Children,
+  cloneElement,
+  Fragment,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { CoreIcons } from "../../types/icons";
+import { nodeCheck } from "../../utils";
+import { MenuItem } from "./MenuItem";
+import { type MenuProps } from "./types";
+
+// FIXME: refactor menu implementation to differentiate between static and floating menus, implement context wrapper for each menu level
+
+const MenuComponent = ({
+  children,
+  minimal,
+  menuClassName,
+  onClick,
+  // @ts-expect-error ignore
+  ref,
+  ...rest
+}: Partial<MenuProps>) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const elementsRef = useRef<Array<HTMLElement | null>>([]);
+  const labelsRef = useRef<Array<string | null>>([]);
+
+  const tree = useFloatingTree();
+  const nodeId = useFloatingNodeId();
+  const parentId = useFloatingParentNodeId();
+
+  const isNested = parentId !== null;
+
+  const { floatingStyles, refs, context } = useFloating<HTMLButtonElement>({
+    nodeId,
+    open: !isNested || isOpen,
+    onOpenChange(open, event, reason) {
+      isNested && setIsOpen(open);
+    },
+    placement: isNested ? "right-start" : "bottom-start",
+    middleware: [
+      offset({ mainAxis: isNested ? 0 : 4, alignmentAxis: isNested ? -4 : 0 }),
+      flip(),
+      shift(),
+    ],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const hover = useHover(context, {
+    delay: { open: 75 },
+    handleClose: safePolygon({ blockPointerEvents: true }),
+  });
+  const click = useClick(context, {
+    toggle: true,
+    ignoreMouse: true,
+  });
+  const role = useRole(context, { role: "menu" });
+  const dismiss = useDismiss(context, { bubbles: true });
+  const listNavigation = useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    nested: isNested,
+    onNavigate: setActiveIndex,
+  });
+  const typeahead = useTypeahead(context, {
+    listRef: labelsRef,
+    onMatch: isOpen ? setActiveIndex : undefined,
+    activeIndex,
+  });
+
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
+    [click, hover, role, dismiss, listNavigation, typeahead],
+  );
+
+  // Event emitter allows you to communicate across tree components.
+  // This effect closes all menus when an item gets clicked anywhere
+  // in the tree.
+  useEffect(() => {
+    if (!tree || !parentId) return;
+
+    function handleTreeClick() {
+      setIsOpen(false);
+    }
+
+    function onSubMenuOpen(event: { nodeId: string; parentId: string }) {
+      if (event.nodeId !== nodeId && event.parentId === parentId) {
+        setIsOpen(false);
+      }
+    }
+
+    tree.events.on("click", handleTreeClick);
+    tree.events.on("close", handleTreeClick);
+    tree.events.on("menuopen", onSubMenuOpen);
+
+    return () => {
+      tree.events.off("click", handleTreeClick);
+      tree.events.off("close", handleTreeClick);
+      tree.events.off("menuopen", onSubMenuOpen);
+    };
+  }, [tree, nodeId, parentId]);
+
+  useEffect(() => {
+    if (isOpen && tree) {
+      tree.events.emit("menuopen", { parentId, nodeId });
+    }
+  }, [tree, isOpen, nodeId, parentId]);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      const el = e.target as HTMLElement;
+      if (el.dataset.id) {
+        onClick?.(el.dataset.id);
+      }
+    },
+    [onClick],
+  );
+
+  const Wrapper = isNested ? FloatingPortal : Fragment;
+  const wrapperProps = isNested
+    ? {
+        root:
+          refs.domReference.current?.closest<HTMLElement>(".theme-base") ??
+          undefined,
+      }
+    : {};
+
+  useEffect(() => {
+    setTimeout(
+      () =>
+        refs.floating.current
+          ?.querySelector(`[data-active="true"]`)
+          ?.scrollIntoView({ block: "nearest" }),
+      100,
+    );
+  }, [isOpen]);
+
+  return (
+    <FloatingNode id={nodeId}>
+      {isNested && (
+        <MenuItem
+          {...(getReferenceProps({
+            ...rest,
+            id: undefined,
+            "data-dropdown-dismiss": false,
+            onClick: (e: AnyObject) => {
+              e.stopPropagation();
+              return false;
+            },
+          } as AnyObject) as AnyObject)}
+          data-open={isOpen}
+          minimal={minimal}
+          altIcon={CoreIcons.chevronRight}
+          ref={mergeRefs(refs.setReference, ref)}
+        />
+      )}
+      <FloatingList elementsRef={elementsRef} labelsRef={labelsRef}>
+        {(!isNested || isOpen) && (
+          <Wrapper {...wrapperProps}>
+            {isNested && <FloatingOverlay />}
+            <FloatingFocusManager
+              context={context}
+              modal={!isNested}
+              initialFocus={isNested ? -1 : 0}
+              returnFocus={!isNested}
+            >
+              <div
+                className={classNames(
+                  menuClassName,
+                  "flex flex-col bg-base p-1 menu-list",
+                  isNested &&
+                    "outline shadow-lg rounded-capped max-h-96 overflow-auto scroll-thin z-[var(--z-popover)]",
+                )}
+                autoFocus
+                ref={mergeRefs(refs.setFloating, isNested ? undefined : ref)}
+                {...getFloatingProps({
+                  onClick: isNested ? undefined : handleClick,
+                })}
+                // @ts-expect-error ignore
+                {...{ style: !isNested ? rest.style : floatingStyles }}
+              >
+                {Children.map(children, (child: AnyObject, index) => {
+                  if (child) {
+                    labelsRef.current[index] = child.props.label;
+                    return cloneElement(
+                      child,
+                      nodeCheck(child, MenuItem, Menu, MenuComponent)
+                        ? {
+                            minimal: !isNested && minimal,
+                            "data-focus": activeIndex === index,
+                            ref: (el: HTMLElement) =>
+                              (elementsRef.current[index] = el),
+                            ...getItemProps({
+                              onClick: child.props.onClick,
+                              tabIndex: activeIndex === index ? 0 : -1,
+                            }),
+                          }
+                        : {},
+                    );
+                  }
+                })}
+              </div>
+            </FloatingFocusManager>
+          </Wrapper>
+        )}
+      </FloatingList>
+    </FloatingNode>
+  );
+};
+
+export const Menu = (props: MenuProps) => {
+  const parentId = useFloatingParentNodeId();
+
+  if (parentId === null) {
+    return (
+      <FloatingTree>
+        <MenuComponent
+          {...(props as AnyObject)}
+          menuClassName={props.className}
+        />
+      </FloatingTree>
+    );
+  }
+
+  return <MenuComponent {...props} />;
+};

package/src/components/menu/MenuItem.tsx

@@ -0,0 +1,162 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useFloatingTree } from "@floating-ui/react";
+import { iconToken } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { Fragment, useCallback, useMemo } from "react";
+import { HotKeyLabel } from "../../hotkeys/HotKeyLabel";
+import { Tooltip } from "../../overlays";
+import { type PolymorphicProps } from "../../types";
+import { Badge, getBadgeProps } from "../badge/Badge";
+import { Icon } from "../icon/Icon";
+import classes from "./Menu.module.css";
+import { type MenuItemProps } from "./types";
+
+export const MenuItem = <Tag extends React.ElementType = "button">({
+  as,
+  label,
+  color = "primary",
+  className,
+  icon,
+  iconBg,
+  iconColor,
+  appendLabel,
+  rtlFlip,
+  altIcon,
+  id,
+  active,
+  disabled,
+  onClick,
+  badge,
+  hotKey,
+  // @ts-expect-error ignore
+  minimal,
+  // @ts-expect-error ignore
+  "data-open": childOpen,
+  // @ts-expect-error ignore
+  ref,
+  ...aria
+}: MenuItemProps & PolymorphicProps<Tag>) => {
+  const tree = useFloatingTree();
+  const badgeProps = useMemo(() => {
+    return getBadgeProps(badge);
+  }, [badge]);
+
+  const iconEl = useMemo(() => {
+    let path = icon;
+    if (minimal && !path) {
+      path = iconToken(label);
+    }
+    return (
+      <Icon
+        className={classNames(classes.menuIcon, minimal && classes.minimal)}
+        icon={path ?? ""}
+        bg={iconBg}
+        color={iconColor}
+        rtlFlip={rtlFlip}
+      />
+    );
+  }, [icon, iconBg, iconColor, rtlFlip, minimal, label]);
+
+  const Wrapper = useCallback(
+    ({ children, ...rest }: AnyObject) => {
+      return minimal ? (
+        <Tooltip
+          content={label}
+          placement="right"
+          disabled={childOpen}
+          {...rest}
+        >
+          {children}
+        </Tooltip>
+      ) : (
+        <Fragment>{children}</Fragment>
+      );
+    },
+    [minimal, label, childOpen],
+  );
+
+  const menuLabel = useMemo(() => {
+    return (
+      <div className="flex flex-nowrap text-start items-center">
+        {iconEl}
+        {!minimal && (
+          <label className="flex-1 pe-4 py-[0.375em] truncate">{label}</label>
+        )}
+        {appendLabel && (
+          <span
+            className={classNames(
+              "font-bold whitespace-nowrap text-center leading-none mx-1",
+              minimal && "absolute inset-x-0 bottom-0 overflow-clip",
+              minimal ? "text-[0.5rem]" : "text-[0.625rem]",
+              active ? "text-white/50" : "text-tint-600/50",
+            )}
+          >
+            {appendLabel}
+          </span>
+        )}
+        {badge && (
+          <Badge
+            {...badgeProps}
+            placement={minimal ? "end" : ""}
+            className={classNames("me-1", badgeProps.className)}
+          />
+        )}
+        {hotKey && <HotKeyLabel keyCombo={hotKey} />}
+        {!minimal && altIcon && (
+          <Icon className="text-muted px-1" icon={altIcon} rtlFlip />
+        )}
+      </div>
+    );
+  }, [iconEl, minimal, appendLabel, label, badge, badgeProps, hotKey, active]);
+
+  const E = as ?? "button";
+  return (
+    <Wrapper {...aria}>
+      <E
+        ref={ref}
+        data-dropdown-dismiss
+        data-color={color}
+        className={classNames(
+          classes.menuItem,
+          className,
+          active && classes.active,
+          minimal && classes.minimal,
+          disabled && classes.disabled,
+          "rounded-capped relative max-w-[50vw] my-0.5",
+        )}
+        data-active={active}
+        data-open={childOpen}
+        disabled={disabled}
+        data-id={id}
+        onClick={(e) => {
+          onClick?.(e) !== false && tree?.events.emit("click");
+        }}
+        {...(minimal ? {} : aria)}
+      >
+        {menuLabel}
+      </E>
+    </Wrapper>
+  );
+};

package/src/components/menu/types.ts

@@ -0,0 +1,100 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { type ElementType } from "react";
+import {
+  type AriaProps,
+  type BadgeType,
+  type CallbackReturn,
+  type ChildrenProp,
+  type ColorType,
+  type CssProp,
+  type IconProps,
+  type TestProps,
+} from "../../types";
+
+export interface MenuItemProps
+  extends CssProp,
+    AriaProps,
+    TestProps,
+    IconProps {
+  /**
+   * menu id passed via menu.onClick
+   */
+  id?: string;
+  /**
+   * item label
+   */
+  label: string;
+  /**
+   * append label badge text
+   */
+  appendLabel?: string | false;
+  /**
+   * menu color
+   */
+  color?: ColorType;
+  /**
+   * item active
+   */
+  active?: boolean;
+  /**
+   * item disabled
+   */
+  disabled?: boolean;
+  /**
+   * badge
+   */
+  badge?: string | number | BadgeType;
+  /**
+   * keyboard shortcut label
+   */
+  hotKey?: string;
+  /**
+   * alternate icon align end (caret, arrow)
+   */
+  altIcon?: string;
+  /**
+   * click handler
+   */
+  onClick?: () => CallbackReturn;
+}
+
+export interface MenuRootProps extends CssProp {
+  label?: never;
+  minimal?: boolean;
+  menuClassName?: never;
+  onClick?: (id: string) => CallbackReturn;
+}
+
+export interface MenuInnerProps extends MenuItemProps {
+  label: string;
+  minimal?: never;
+  /**
+   * floating menu className
+   */
+  menuClassName?: string;
+}
+
+export type MenuProps = ChildrenProp<ElementType<MenuItemProps>> &
+  (MenuRootProps | MenuInnerProps);

package/src/components/meter/Meter.module.css

@@ -0,0 +1,116 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer comp {
+  .meter {
+    & .meterBar {
+      flex: 1 1 1rem;
+
+      min-width: 1rem;
+      max-width: 12rem;
+      height: 0.5em;
+
+      line-height: 1;
+
+      &::after {
+        width: var(--width);
+      }
+    }
+
+    & > label {
+      font-size: max(0.75rem, 0.5em);
+      line-height: 1;
+    }
+
+    & .meterBar[data-active="true"] {
+      &:nth-child(1),
+      &:nth-child(2),
+      &:nth-child(3),
+      &:nth-child(4),
+      &:nth-child(5),
+      &:nth-child(6) {
+        &::after {
+          opacity: 0.85;
+          background-color: currentColor;
+        }
+      }
+
+      &:nth-child(1) {
+        color: #eb5e28;
+      }
+
+      &:nth-child(2) {
+        color: #f9a03f;
+      }
+
+      &:nth-child(3) {
+        color: #f3c053;
+      }
+
+      &:nth-child(4) {
+        color: #a1c349;
+      }
+
+      &:nth-child(5) {
+        color: #87a330;
+      }
+
+      &:nth-child(6) {
+        color: #6a8532;
+      }
+    }
+
+    &[class*="text-primary"] .meterBar[data-active="true"],
+    &[class*="text-accent"] .meterBar[data-active="true"],
+    &[class*="text-info"] .meterBar[data-active="true"],
+    &[class*="text-danger"] .meterBar[data-active="true"],
+    &[class*="text-success"] .meterBar[data-active="true"],
+    &[class*="text-warning"] .meterBar[data-active="true"] {
+      color: currentColor;
+
+      &:nth-child(1)::after {
+        opacity: 0.2;
+      }
+
+      &:nth-child(2)::after {
+        opacity: 0.35;
+      }
+
+      &:nth-child(3)::after {
+        opacity: 0.5;
+      }
+
+      &:nth-child(4)::after {
+        opacity: 0.65;
+      }
+
+      &:nth-child(5)::after {
+        opacity: 0.8;
+      }
+
+      &:nth-child(6)::after {
+        opacity: 0.95;
+      }
+    }
+  }
+}