@pixel-point/toolcraft 0.0.2

package/templates/runtime/react/toolbar-panel.test.tsx

@@ -0,0 +1,212 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import * as React from "react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { defineToolcraft } from "../schema/define-toolcraft";
+import { CanvasShell } from "./canvas-shell";
+import { ToolcraftRoot } from "./toolcraft-root";
+import { TOOLCRAFT_THEME_PREFERENCE_STORAGE_KEY } from "./theme-runtime";
+import { ToolbarPanel } from "./toolbar-panel";
+import { useToolcraft } from "./use-toolcraft";
+
+afterEach(() => {
+  cleanup();
+  document.documentElement.classList.remove("dark");
+  document.documentElement.style.colorScheme = "";
+  window.localStorage.clear();
+});
+
+function createSchema() {
+  return defineToolcraft({
+    canvas: { enabled: true },
+    panels: {
+      controls: {
+        sections: [
+          {
+            controls: {
+              opacity: {
+                defaultValue: 75,
+                target: "selectedLayer.opacity",
+                type: "slider",
+              },
+            },
+          },
+        ],
+        title: "Controls",
+      },
+    },
+  });
+}
+
+function StateProbe() {
+  const { dispatch, state } = useToolcraft();
+
+  return (
+    <>
+      <button
+        onClick={() =>
+          dispatch({
+            offset: { x: 24, y: 48 },
+            type: "canvas.setOffset",
+          })
+        }
+        type="button"
+      >
+        Move canvas
+      </button>
+      <button
+        onClick={() =>
+          dispatch({
+            target: "selectedLayer.opacity",
+            type: "controls.setValue",
+            value: 25,
+          })
+        }
+        type="button"
+      >
+        Change value
+      </button>
+      <span data-testid="canvas-offset">
+        {state.canvas.offset.x},{state.canvas.offset.y}
+      </span>
+      <span data-testid="opacity-value">
+        {String(state.values["selectedLayer.opacity"])}
+      </span>
+    </>
+  );
+}
+
+function renderToolbar() {
+  return render(
+    <ToolcraftRoot schema={createSchema()}>
+      <div style={{ height: 320, position: "relative", width: 640 }}>
+        <CanvasShell />
+        <ToolbarPanel framed={false} />
+        <StateProbe />
+      </div>
+    </ToolcraftRoot>,
+  );
+}
+
+describe("ToolbarPanel", () => {
+  it("dispatches zoom commands", () => {
+    renderToolbar();
+
+    expect(screen.getByText("70%")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Zoom out" }));
+    expect(screen.getByText("60%")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Zoom in" }));
+    fireEvent.click(screen.getByRole("button", { name: "Zoom in" }));
+    expect(screen.getByText("80%")).toBeTruthy();
+  });
+
+  it("resets zoom from the zoom label double click", () => {
+    renderToolbar();
+
+    fireEvent.click(screen.getByRole("button", { name: "Zoom in" }));
+    expect(screen.getByText("80%")).toBeTruthy();
+
+    fireEvent.doubleClick(screen.getByText("80%"));
+
+    expect(screen.getByText("70%")).toBeTruthy();
+  });
+
+  it("centers the canvas through the radar command", () => {
+    renderToolbar();
+
+    fireEvent.click(screen.getByRole("button", { name: "Move canvas" }));
+    expect(screen.getByTestId("canvas-offset").textContent).toBe("24,48");
+
+    fireEvent.click(screen.getByRole("button", { name: "Center canvas" }));
+
+    expect(screen.getByTestId("canvas-offset").textContent).toBe("0,0");
+  });
+
+  it("binds undo and redo to runtime history", () => {
+    renderToolbar();
+
+    const undoButton = screen.getByRole("button", { name: "Undo" });
+    const redoButton = screen.getByRole("button", { name: "Redo" });
+
+    expect((undoButton as HTMLButtonElement).disabled).toBe(true);
+    expect((redoButton as HTMLButtonElement).disabled).toBe(true);
+
+    fireEvent.click(screen.getByRole("button", { name: "Change value" }));
+    expect(screen.getByTestId("opacity-value").textContent).toBe("25");
+    expect((undoButton as HTMLButtonElement).disabled).toBe(false);
+
+    fireEvent.click(undoButton);
+    expect(screen.getByTestId("opacity-value").textContent).toBe("75");
+    expect((redoButton as HTMLButtonElement).disabled).toBe(false);
+
+    fireEvent.click(redoButton);
+    expect(screen.getByTestId("opacity-value").textContent).toBe("25");
+  });
+
+  it("toggles the scoped editor theme through the shared runtime", () => {
+    const { container } = renderToolbar();
+
+    const lightButton = screen.getByRole("button", { name: "Light theme" });
+    const themeScope = container.querySelector<HTMLElement>(
+      "[data-toolcraft-theme-scope]",
+    );
+
+    expect(lightButton.querySelector('[data-icon="theme-light"]')).toBeTruthy();
+    expect(themeScope?.dataset.toolcraftTheme).toBe("dark");
+    expect(themeScope?.style.colorScheme).toBe("dark");
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+    expect(document.documentElement.style.colorScheme).toBe("");
+
+    fireEvent.click(lightButton);
+
+    expect(themeScope?.dataset.toolcraftTheme).toBe("light");
+    expect(themeScope?.style.colorScheme).toBe("light");
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+    expect(document.documentElement.style.colorScheme).toBe("");
+    expect(
+      window.localStorage.getItem(TOOLCRAFT_THEME_PREFERENCE_STORAGE_KEY),
+    ).toBe("light");
+    expect(screen.getByRole("button", { name: "Dark theme" })).toBeTruthy();
+    expect(
+      screen
+        .getByRole("button", { name: "Dark theme" })
+        .querySelector('[data-icon="theme-dark"]'),
+    ).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Dark theme" }));
+
+    expect(themeScope?.dataset.toolcraftTheme).toBe("dark");
+    expect(themeScope?.style.colorScheme).toBe("dark");
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+    expect(document.documentElement.style.colorScheme).toBe("");
+    expect(
+      window.localStorage.getItem(TOOLCRAFT_THEME_PREFERENCE_STORAGE_KEY),
+    ).toBe("dark");
+  });
+
+  it("uses toolbar feature defaults from the app schema", () => {
+    render(
+      <ToolcraftRoot
+        schema={defineToolcraft({
+          canvas: { enabled: true },
+          panels: {},
+          toolbar: {
+            history: false,
+            radar: false,
+            theme: false,
+            zoom: false,
+          },
+        })}
+      >
+        <ToolbarPanel framed={false} />
+      </ToolcraftRoot>,
+    );
+
+    expect(screen.queryByRole("button", { name: "Undo" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Center canvas" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Light theme" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Zoom in" })).toBeNull();
+  });
+});

package/templates/runtime/react/toolbar-panel.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import * as React from "react";
+import { TargetIcon } from "@phosphor-icons/react";
+import {
+  Button,
+  PanelSurface,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@repo/ui";
+import { Moon, Redo2, Sun, Undo2, ZoomIn, ZoomOut } from "lucide-react";
+
+import type { ToolcraftPanelState } from "../state/types";
+import { PanelContainer } from "./panel-host";
+import type { PanelPlacement, PanelStateChange } from "./panel-host-types";
+import { useToolcraftTheme } from "./theme-runtime";
+import { useToolcraft } from "./use-toolcraft";
+
+export type ToolbarPanelProps = {
+  className?: string;
+  framed?: boolean;
+  onPanelStateChange?: PanelStateChange;
+  panelPlacement?: PanelPlacement;
+  panelState?: ToolcraftPanelState;
+};
+
+type ToolbarIconButtonProps = {
+  active?: boolean;
+  children: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  label: string;
+  onClick?: () => void;
+};
+
+const toolbarIconButtonSize = "icon";
+const desktopToolbarTightButtonGapClassName = "-mr-px";
+
+function cn(...classNames: Array<string | false | null | undefined>): string {
+  return classNames.filter(Boolean).join(" ");
+}
+
+function ToolbarDivider(): React.JSX.Element {
+  return (
+    <span
+      aria-hidden="true"
+      className="block h-5 w-px shrink-0 rounded-full bg-[color:color-mix(in_oklab,var(--border)_8%,transparent)]"
+      data-slot="desktop-toolbar-divider"
+    />
+  );
+}
+
+function ToolbarIconButton({
+  active = false,
+  children,
+  className,
+  disabled,
+  label,
+  onClick,
+}: ToolbarIconButtonProps): React.JSX.Element {
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+    onClick?.();
+
+    if (typeof event.currentTarget.blur === "function") {
+      event.currentTarget.blur();
+    }
+  };
+
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            aria-label={label}
+            aria-pressed={active}
+            className={cn(
+              "data-[icon-active=true]:text-[color:var(--foreground)]",
+              className,
+            )}
+            data-icon-active={active}
+            disabled={disabled}
+            onClick={handleClick}
+            size={toolbarIconButtonSize}
+            type="button"
+            variant="ghost"
+          />
+        }
+      >
+        {children}
+      </TooltipTrigger>
+      <TooltipContent side="top">{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+export function ToolbarPanel({
+  className,
+  framed = true,
+  onPanelStateChange,
+  panelPlacement,
+  panelState,
+}: ToolbarPanelProps): React.JSX.Element {
+  const { dispatch, state } = useToolcraft();
+  const { resolvedTheme, toggleResolvedTheme } = useToolcraftTheme();
+  const nextTheme = resolvedTheme === "dark" ? "light" : "dark";
+  const canUndo = state.history.undo.length > 0;
+  const canRedo = state.history.redo.length > 0;
+  const historyEnabled = state.schema.toolbar.history;
+  const radarEnabled = state.schema.toolbar.radar;
+  const themeEnabled = state.schema.toolbar.theme;
+  const zoomEnabled = state.schema.toolbar.zoom;
+
+  const toolbarSurface = (
+    <PanelSurface
+      className={cn(
+        "pointer-events-auto flex w-auto items-center justify-start gap-1.5 rounded-lg p-1",
+        !framed && className,
+      )}
+      data-toolcraft-inspect-toolbar="true"
+      data-panel-id="toolbar"
+    >
+      {historyEnabled ? (
+        <>
+          <ToolbarIconButton
+            className={desktopToolbarTightButtonGapClassName}
+            disabled={!canUndo}
+            label="Undo"
+            onClick={() => dispatch({ type: "history.undo" })}
+          >
+            <Undo2 />
+          </ToolbarIconButton>
+          <ToolbarIconButton
+            className={desktopToolbarTightButtonGapClassName}
+            disabled={!canRedo}
+            label="Redo"
+            onClick={() => dispatch({ type: "history.redo" })}
+          >
+            <Redo2 />
+          </ToolbarIconButton>
+          <ToolbarDivider />
+        </>
+      ) : null}
+      {zoomEnabled ? (
+        <>
+          <ToolbarIconButton
+            label="Zoom out"
+            onClick={() => dispatch({ type: "canvas.zoomOut" })}
+          >
+            <ZoomOut />
+          </ToolbarIconButton>
+          <span
+            className="inline-flex h-7 w-[4ch] shrink-0 cursor-default items-center justify-center font-mono text-[12px] leading-[1.125rem] text-[color:color-mix(in_oklab,var(--foreground)_90%,transparent)] tabular-nums select-none"
+            data-panel-drag-ignore=""
+            onDoubleClick={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              dispatch({ type: "canvas.zoomReset" });
+            }}
+          >
+            {state.canvas.zoom}%
+          </span>
+          <ToolbarIconButton
+            label="Zoom in"
+            onClick={() => dispatch({ type: "canvas.zoomIn" })}
+          >
+            <ZoomIn />
+          </ToolbarIconButton>
+          <ToolbarDivider />
+        </>
+      ) : null}
+      {themeEnabled ? (
+        <ToolbarIconButton
+          label={nextTheme === "light" ? "Light theme" : "Dark theme"}
+          onClick={toggleResolvedTheme}
+        >
+          {nextTheme === "light" ? (
+            <Sun data-icon="theme-light" />
+          ) : (
+            <Moon data-icon="theme-dark" />
+          )}
+        </ToolbarIconButton>
+      ) : null}
+      {radarEnabled ? (
+        <ToolbarIconButton
+          label="Center canvas"
+          onClick={() => dispatch({ type: "canvas.center" })}
+        >
+          <TargetIcon />
+        </ToolbarIconButton>
+      ) : null}
+    </PanelSurface>
+  );
+
+  return (
+    <PanelContainer
+      onPanelStateChange={onPanelStateChange}
+      panelState={panelState}
+      panelType="toolbar"
+      placement={panelPlacement ?? (framed ? "frame" : "surface")}
+    >
+      {toolbarSurface}
+    </PanelContainer>
+  );
+}