@noya-app/noya-designsystem 0.1.87 → 0.1.88

package/src/components/Toolbar.tsx

@@ -1,465 +1,38 @@
 "use client";
 
-import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
-import React, {
-  ComponentProps,
-  createContext,
-  ReactNode,
-  useContext,
-} from "react";
-
-import { memoGeneric } from "@noya-app/react-utils";
-import { BaseToolbar } from "./BaseToolbar";
-import { Button } from "./Button";
-import { DividerVertical } from "./Divider";
-import { DropdownMenu } from "./DropdownMenu";
-import {
-  getKeyboardShortcutsForMenuItems,
-  isSelectableMenuItem,
-  KeyboardShortcut,
-  MenuItem,
-  PopoverMenuItem,
-  SelectableMenuItem,
-  SubMenuItem,
-} from "./internal/Menu";
-import { Popover } from "./Popover";
-import { Spacer } from "./Spacer";
-import { ToolbarDrawer } from "./ToolbarDrawer";
-import { Tooltip } from "./Tooltip";
-
-const SIDE_OFFSET = 6;
-
-export const ToolbarMenuContext = createContext<{
-  dividerOverflow?: number;
-  /** When true, PopoverMenuItem items show as dialogs on small screens */
-  useDialogOnSmallScreen?: boolean;
-  /** Function to detect if screen is small. Required when useDialogOnSmallScreen is true */
-  isSmallScreen?: boolean;
-  /** Function to open a dialog. Required when useDialogOnSmallScreen is true */
-  openDialog?: (options: {
-    title: ReactNode;
-    className?: string;
-    children: ReactNode | ((props: { close: () => void }) => ReactNode);
-  }) => Promise<void> & { close: () => void };
-}>({});
-
-export const ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown<
-  T extends string,
->({
-  item,
-  onSelectMenuItem,
-  onPopoverOpenChange,
-}: {
-  item: SubMenuItem<T>;
-  onSelectMenuItem?: (value: T) => void;
-  onPopoverOpenChange?: (open: boolean) => void;
-}) {
-  const [open, setOpen] = React.useState(false);
-
-  const handleOpenChange = React.useCallback(
-    (newOpen: boolean) => {
-      setOpen(newOpen);
-      onPopoverOpenChange?.(newOpen);
-    },
-    [onPopoverOpenChange]
-  );
-
-  return (
-    <DropdownMenu
-      open={open}
-      onOpenChange={handleOpenChange}
-      items={item.items}
-      modal={false}
-      onSelect={(value) => {
-        if (onSelectMenuItem && value) {
-          onSelectMenuItem(value);
-        }
-      }}
-    >
-      <Button
-        disabled={item.disabled}
-        active={item.checked || open}
-        icon={item.icon}
-        iconRight={
-          item.icon === "DotsVerticalIcon" || item.icon === "DotsHorizontalIcon"
-            ? undefined
-            : "DropdownChevronIcon"
-        }
-      >
-        {item.title}
-      </Button>
-    </DropdownMenu>
-  );
-});
-
-export const ToolbarShortcut = ({
-  shortcut,
-  label,
-}: {
-  shortcut: string;
-  label?: ReactNode;
-}) => {
-  return (
-    <div className="n-flex n-items-center">
-      {label}
-      <Spacer.Horizontal size={6} />
-      <KeyboardShortcut shortcut={shortcut} />
-    </div>
-  );
-};
-
-export const ToolbarMenuPopover = memoGeneric(function ToolbarMenuPopover({
-  item,
-  portalContainer,
-  onPopoverOpenChange,
-}: {
-  item: PopoverMenuItem;
-  portalContainer?: HTMLElement | null;
-  onPopoverOpenChange?: (open: boolean) => void;
-}) {
-  const {
-    disabled,
-    icon,
-    title,
-    tooltip,
-    content: itemContent,
-    checked,
-    popoverClassName,
-    triggerProps: buttonProps,
-  } = item;
-  const [open, setOpen] = React.useState(false);
-
-  const handleOpenChange = React.useCallback(
-    (newOpen: boolean) => {
-      setOpen(newOpen);
-      onPopoverOpenChange?.(newOpen);
-    },
-    [onPopoverOpenChange]
-  );
-
-  const { useDialogOnSmallScreen, isSmallScreen, openDialog } =
-    useContext(ToolbarMenuContext);
-
-  const shouldUseDialog = useDialogOnSmallScreen && isSmallScreen && openDialog;
-
-  const handleOpenDialog = React.useCallback(() => {
-    if (!openDialog) return;
-
-    handleOpenChange(true);
-    const dialogContent =
-      typeof itemContent === "function" ? (
-        (props: { close: () => void }) => (
-          <div className="-n-m-3">{itemContent(props)}</div>
-        )
-      ) : (
-        <div className="-n-m-3">{itemContent}</div>
-      );
-
-    const dialog = openDialog({
-      title,
-      className: "n-w-[90vw] n-max-w-[360px]",
-      children: dialogContent,
-    });
-    dialog.then(() => handleOpenChange(false));
-  }, [openDialog, itemContent, title, handleOpenChange]);
-
-  const trigger = (
-    <Button
-      disabled={disabled}
-      active={checked || open}
-      icon={icon}
-      iconRight="DropdownChevronIcon"
-      onClick={shouldUseDialog ? handleOpenDialog : undefined}
-      {...buttonProps}
-    >
-      {title}
-    </Button>
-  );
-
-  // On small screens with dialog mode enabled, just render the trigger button
-  if (shouldUseDialog) {
-    return tooltip && !open ? (
-      <Tooltip
-        sideOffset={SIDE_OFFSET}
-        side="top"
-        content={tooltip}
-        portalContainer={portalContainer}
-      >
-        {trigger}
-      </Tooltip>
-    ) : (
-      trigger
-    );
-  }
-
-  const content = (
-    <span>
-      <Popover
-        open={open}
-        onOpenChange={handleOpenChange}
-        side="top"
-        showArrow={false}
-        sideOffset={SIDE_OFFSET}
-        portalContainer={portalContainer}
-        trigger={trigger}
-        className={popoverClassName}
-      >
-        {typeof itemContent === "function"
-          ? itemContent({ close: () => handleOpenChange(false) })
-          : itemContent}
-      </Popover>
-    </span>
-  );
-
-  return tooltip && !open ? (
-    <Tooltip
-      sideOffset={SIDE_OFFSET}
-      side="top"
-      content={tooltip}
-      portalContainer={portalContainer}
-    >
-      {content}
-    </Tooltip>
-  ) : (
-    content
-  );
-});
-
-export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
-  T extends string,
->({
-  item,
-  onSelectMenuItem,
-  as,
-  activeValue,
-  tooltipSide,
-  displayFilter,
-}: {
-  item: SelectableMenuItem<T>;
-  onSelectMenuItem?: (value: T) => void;
-  as?: ComponentProps<typeof Button>["as"];
-  activeValue?: T;
-  tooltipSide?: ComponentProps<typeof Tooltip>["side"];
-  displayFilter?: DisplayFilter;
-}) {
-  const isActive = item.checked || activeValue === item.value;
-
-  const content = (
-    <Button
-      as={as}
-      disabled={item.disabled}
-      active={isActive}
-      icon={displayFilter === "textOnly" ? undefined : item.icon}
-      {...(as === "a" && { href: item.value })}
-      onClick={() => {
-        if (onSelectMenuItem && item.value) {
-          onSelectMenuItem(item.value);
-        }
-      }}
-    >
-      {displayFilter === "iconOnly" ? undefined : item.title}
-    </Button>
-  );
-
-  const tooltip =
-    item.tooltip ??
-    (displayFilter === "iconOnly" && item.title ? item.title : undefined);
-
-  return item.drawer && isActive ? (
-    <ToolbarDrawer trigger={content}>{item.drawer}</ToolbarDrawer>
-  ) : tooltip ? (
-    <Tooltip sideOffset={SIDE_OFFSET} content={tooltip} side={tooltipSide}>
-      {content}
-    </Tooltip>
-  ) : (
-    content
-  );
-});
-
-export const ToolbarMenuItem = memoGeneric(function ToolbarMenuItem<
-  T extends string,
->({
-  item,
-  onSelectMenuItem,
-  buttonAs,
-  activeValue,
-  tooltipSide,
-  portalContainer,
-  displayFilter,
-  dividerOverflow: dividerOverflowProp,
-  onPopoverOpenChange,
-}: {
-  item: MenuItem<T>;
-  onSelectMenuItem?: (value: T) => void;
-  buttonAs?: ComponentProps<typeof Button>["as"];
-  activeValue?: T;
-  tooltipSide?: ComponentProps<typeof Tooltip>["side"];
-  portalContainer?: HTMLElement | null;
-  displayFilter?: DisplayFilter;
-  dividerOverflow?: number;
-  onPopoverOpenChange?: (open: boolean) => void;
-}) {
-  const { dividerOverflow: contextDividerOverflow } =
-    useContext(ToolbarMenuContext);
-
-  const dividerOverflow = dividerOverflowProp ?? contextDividerOverflow ?? 4;
-
-  if (item.type === "sectionHeader") return null;
-
-  if (item.type === "separator") {
-    return <DividerVertical overflow={dividerOverflow} />;
-  }
-
-  if (item.type === "popover") {
-    return (
-      <ToolbarMenuPopover
-        item={item}
-        portalContainer={portalContainer}
-        onPopoverOpenChange={onPopoverOpenChange}
-      />
-    );
-  }
+import React, { forwardRef, HTMLAttributes } from "react";
+import { cx } from "../utils/classNames";
+import { toolbarTransparentStyle } from "./BaseToolbar";
+
+export type ToolbarSize = "small" | "medium";
+
+export interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Controls the spacing between toolbar controls.
+   * @default "medium"
+   */
+  size?: ToolbarSize;
+}
 
-  if (isSelectableMenuItem(item)) {
+export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
+  function Toolbar(
+    { children, className, role = "toolbar", size = "medium", style, ...props },
+    ref
+  ) {
     return (
-      <ToolbarMenuButton
-        item={item}
-        onSelectMenuItem={onSelectMenuItem}
-        as={buttonAs}
-        activeValue={activeValue}
-        tooltipSide={tooltipSide}
-        displayFilter={displayFilter}
-      />
+      <div
+        ref={ref}
+        role={role}
+        className={cx(
+          "n-pointer-events-auto n-flex n-items-center n-rounded n-bg-popover-background n-shadow-popover",
+          size === "small" ? "n-gap-1 n-p-1" : "n-gap-toolbar-separator n-p-2",
+          className
+        )}
+        style={{ ...toolbarTransparentStyle, ...style }}
+        {...props}
+      >
+        {children}
+      </div>
     );
   }
-
-  return (
-    <ToolbarMenuDropdown
-      item={item}
-      onSelectMenuItem={onSelectMenuItem}
-      onPopoverOpenChange={onPopoverOpenChange}
-    />
-  );
-});
-
-type DisplayFilter = "iconOnly" | "iconAndText" | "textOnly";
-
-export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
-  items,
-  onSelectMenuItem,
-  buttonAs,
-  activeValue,
-  tooltipSide,
-  portalContainer,
-  displayFilter = "iconAndText",
-  dividerOverflow,
-  onPopoverOpenChange,
-}: {
-  items: MenuItem<T>[];
-  onSelectMenuItem?: (value: T) => void;
-  buttonAs?: ComponentProps<typeof Button>["as"];
-  activeValue?: T;
-  tooltipSide?: ComponentProps<typeof Tooltip>["side"];
-  portalContainer?: HTMLElement | null;
-  displayFilter?: DisplayFilter;
-  dividerOverflow?: number;
-  onPopoverOpenChange?: (open: boolean) => void;
-}) {
-  return (
-    <>
-      {items.map((item, i) => {
-        return (
-          <ToolbarMenuItem
-            key={i}
-            item={item}
-            onSelectMenuItem={onSelectMenuItem}
-            buttonAs={buttonAs}
-            activeValue={activeValue}
-            tooltipSide={tooltipSide}
-            portalContainer={portalContainer}
-            displayFilter={displayFilter}
-            dividerOverflow={dividerOverflow}
-            onPopoverOpenChange={onPopoverOpenChange}
-          />
-        );
-      })}
-    </>
-  );
-});
-
-export interface ToolbarProps<T extends string = string> {
-  children?: React.ReactNode;
-  logo?: React.ReactNode;
-  leftMenuItems?: MenuItem<T>[];
-  rightMenuItems?: MenuItem<T>[];
-  onSelectMenuItem?: (value: T) => void;
-  /** Whether to bind keyboard shortcuts for menu items. @default true */
-  shouldBindKeyboardShortcuts?: boolean;
-  dividerOverflow?: number;
-}
-
-export function useBindKeyboardShortcutsForMenuItems<T extends string>(
-  items: MenuItem<T>[],
-  onSelectMenuItem?: (value: T) => void
-) {
-  return useKeyboardShortcuts(
-    React.useMemo(
-      () =>
-        onSelectMenuItem
-          ? getKeyboardShortcutsForMenuItems(items, onSelectMenuItem)
-          : {},
-      [items, onSelectMenuItem]
-    )
-  );
-}
-
-export function Toolbar<T extends string = string>({
-  children,
-  logo,
-  leftMenuItems = [],
-  rightMenuItems = [],
-  onSelectMenuItem,
-  shouldBindKeyboardShortcuts = true,
-  dividerOverflow,
-}: ToolbarProps<T>) {
-  // Register keyboard shortcuts for all menu items
-  const allMenuItems = React.useMemo(
-    () => [...leftMenuItems, ...rightMenuItems],
-    [leftMenuItems, rightMenuItems]
-  );
-
-  useBindKeyboardShortcutsForMenuItems(
-    allMenuItems,
-    shouldBindKeyboardShortcuts ? onSelectMenuItem : undefined
-  );
-
-  return (
-    <BaseToolbar
-      logo={logo}
-      left={
-        leftMenuItems.length > 0 && (
-          <div className="n-flex n-gap-2">
-            <ToolbarMenu
-              items={leftMenuItems}
-              onSelectMenuItem={onSelectMenuItem}
-              dividerOverflow={dividerOverflow}
-            />
-          </div>
-        )
-      }
-      right={
-        rightMenuItems.length > 0 && (
-          <div className="n-flex n-gap-2">
-            <ToolbarMenu
-              items={rightMenuItems}
-              onSelectMenuItem={onSelectMenuItem}
-              dividerOverflow={dividerOverflow}
-            />
-          </div>
-        )
-      }
-    >
-      {children}
-    </BaseToolbar>
-  );
-}
+);

package/src/components/__tests__/Card.test.tsx

@@ -0,0 +1,71 @@
+import { afterEach, describe, expect, mock, test } from "bun:test";
+import React, { createRef } from "react";
+
+// `@radix-ui/react-icons` has a nested React 18 copy in node_modules, which
+// creates legacy React elements that React 19 refuses to render under
+// `bun test` (app bundlers alias react, so this only affects tests).
+const actualIcons = await import("@radix-ui/react-icons");
+
+mock.module("@radix-ui/react-icons", () => ({
+  ...actualIcons,
+  ArchiveIcon: (props: React.SVGProps<SVGSVGElement>) => <svg {...props} />,
+  ArrowUpIcon: (props: React.SVGProps<SVGSVGElement>) => <svg {...props} />,
+}));
+
+const { cleanup, render } = await import("@testing-library/react");
+const { Card } = await import("../Card");
+const { StatCard } = await import("../StatCard");
+
+afterEach(cleanup);
+
+describe("Card", () => {
+  test("renders a bordered container and forwards div props", () => {
+    const ref = createRef<HTMLDivElement>();
+    const { getByTestId } = render(
+      <Card ref={ref} className="custom-card" data-testid="card">
+        Content
+      </Card>
+    );
+    const card = getByTestId("card");
+
+    expect(card).toBe(ref.current);
+    expect(card.textContent).toBe("Content");
+    expect(card.className).toContain("n-border");
+    expect(card.className).toContain("n-p-4");
+    expect(card.className).toContain("custom-card");
+  });
+});
+
+describe("StatCard", () => {
+  test("renders its icon, label, value, and upward change", () => {
+    const { container, getByText } = render(
+      <StatCard
+        label="Conversion rate"
+        value="99%"
+        change="10%"
+        trend="up"
+        icon="ArchiveIcon"
+        colorScheme="error"
+      />
+    );
+
+    expect(getByText("Conversion rate")).toBeTruthy();
+    const value = getByText("99%");
+
+    expect(value.tagName).toBe("DIV");
+    expect(value.parentElement?.className).toContain("n-self-stretch");
+    expect(value.parentElement?.className).toContain("n-justify-center");
+    expect(getByText("10%")).toBeTruthy();
+    expect(container.querySelectorAll("svg")).toHaveLength(2);
+    expect(container.querySelector(".n-bg-banner-error-text")).toBeTruthy();
+  });
+
+  test("omits optional icon and change", () => {
+    const { container, queryByText } = render(
+      <StatCard label="Active users" value="1,024" />
+    );
+
+    expect(queryByText("Active users")).toBeTruthy();
+    expect(container.querySelector("svg")).toBeNull();
+  });
+});

package/src/components/__tests__/DialogNavigator.test.tsx

@@ -0,0 +1,88 @@
+import { cleanup, fireEvent, render, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, mock, test } from "bun:test";
+import React from "react";
+
+// `@radix-ui/react-icons` has a nested React 18 copy in node_modules, which
+// creates legacy React elements that React 19 refuses to render under
+// `bun test`. Mock the header icons so everything renders with one React.
+const actualIcons = await import("@radix-ui/react-icons");
+
+mock.module("@radix-ui/react-icons", () => ({
+  ...actualIcons,
+  ArrowLeftIcon: (props: React.SVGProps<SVGSVGElement>) => <svg {...props} />,
+  Cross1Icon: (props: React.SVGProps<SVGSVGElement>) => <svg {...props} />,
+}));
+
+const { createDialogNavigator } = await import("../DialogNavigator");
+
+const TestNavigator = createDialogNavigator<{
+  root: null;
+  details: null;
+}>();
+
+function RootScreen() {
+  const navigation = TestNavigator.useNavigator();
+
+  return <button onClick={() => navigation.push("details")}>Next</button>;
+}
+
+function TestDialogNavigator({
+  onOpenChange,
+}: {
+  onOpenChange: (open: boolean) => void;
+}) {
+  return (
+    <TestNavigator
+      title="Picker dialog"
+      open
+      onOpenChange={onOpenChange}
+      initialRoute="root"
+    >
+      <TestNavigator.Screen
+        name="root"
+        title="Choose an image"
+        showBackButton={false}
+      >
+        <RootScreen />
+      </TestNavigator.Screen>
+      <TestNavigator.Screen name="details" title="Choose a file">
+        <div>Details</div>
+      </TestNavigator.Screen>
+    </TestNavigator>
+  );
+}
+
+afterEach(cleanup);
+
+describe("DialogNavigator", () => {
+  test("renders one header with no dialog padding", () => {
+    const view = render(<TestDialogNavigator onOpenChange={() => {}} />);
+
+    expect(view.getAllByText("Choose an image")).toHaveLength(1);
+    expect(view.getByRole("dialog").className).toContain("n-p-0");
+    expect(view.queryByRole("button", { name: "Back" })).toBeNull();
+    expect(view.getByRole("button", { name: "Close" })).toBeTruthy();
+  });
+
+  test("combines navigation and dialog controls in the header", async () => {
+    const onOpenChange = mock(() => {});
+    const view = render(<TestDialogNavigator onOpenChange={onOpenChange} />);
+
+    fireEvent.click(view.getByRole("button", { name: "Next" }));
+
+    await waitFor(() => {
+      expect(view.getByText("Choose a file")).toBeTruthy();
+    });
+    expect(view.getByRole("button", { name: "Back" })).toBeTruthy();
+    expect(view.getByRole("button", { name: "Close" })).toBeTruthy();
+
+    fireEvent.click(view.getByRole("button", { name: "Back" }));
+
+    await waitFor(() => {
+      expect(view.getByText("Choose an image")).toBeTruthy();
+    });
+
+    fireEvent.click(view.getByRole("button", { name: "Close" }));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});

package/src/components/__tests__/SegmentedControl.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, test } from "bun:test";
+import { snapIndicatorEdgesToDevicePixels } from "../SegmentedControl";
+
+describe("snapIndicatorEdgesToDevicePixels", () => {
+  test("snaps both rounded indicator edges at 1x density", () => {
+    expect(
+      snapIndicatorEdgesToDevicePixels({
+        containerLeft: 548,
+        itemLeft: 623.59375,
+        itemRight: 678.1875,
+        devicePixelRatio: 1,
+      })
+    ).toEqual({
+      left: 76,
+      width: 54,
+    });
+  });
+
+  test("preserves half-pixel edges at 2x density", () => {
+    expect(
+      snapIndicatorEdgesToDevicePixels({
+        containerLeft: 10.25,
+        itemLeft: 20.3,
+        itemRight: 40.8,
+        devicePixelRatio: 2,
+      })
+    ).toEqual({
+      left: 10.25,
+      width: 20.5,
+    });
+  });
+
+  test("falls back to 1x density for an invalid scale", () => {
+    expect(
+      snapIndicatorEdgesToDevicePixels({
+        containerLeft: 0,
+        itemLeft: 1.4,
+        itemRight: 3.6,
+        devicePixelRatio: 0,
+      })
+    ).toEqual({
+      left: 1,
+      width: 3,
+    });
+  });
+});