import { createEffect, createSignal, on, onCleanup, onMount } from "solid-js"; import type { Meta, StoryContext, StoryObj } from "openstory/solid"; import { expect, waitFor } from "openstory/test"; import { ReactGrabRenderer } from "react-grab/src/components/renderer.js"; import type { OverlayBounds } from "react-grab/src/types.js"; import { createMenuActions } from "./fixtures.js"; import { noop } from "./noop.js"; const ELEMENT_KEYS = [ "none", "header", "logo", "nav-home", "nav-about", "card-welcome", "card-settings", "btn-start", "btn-save", "input", "footer", ] as const; type ElementKey = (typeof ELEMENT_KEYS)[number]; interface ElementMeta { tagName: string; componentName: string; } const measureElement = (element: HTMLElement | undefined): OverlayBounds | undefined => { if (!element) return undefined; const rect = element.getBoundingClientRect(); const borderRadius = getComputedStyle(element).borderRadius || "0px"; return { x: rect.x, y: rect.y, width: rect.width, height: rect.height, borderRadius, }; }; interface SceneProps { selectedElement: ElementKey; showToolbar: boolean; isActive: boolean; enabled: boolean; isPromptMode: boolean; isPendingDismiss: boolean; showContextMenu: boolean; inputValue: string; filePath: string; } const Scene = (props: SceneProps) => { const elementRefs: Partial> = {}; const [selectionBounds, setSelectionBounds] = createSignal(undefined); const isElementKey = (value: string | undefined): value is ElementKey => { if (value === undefined) return false; for (const candidate of ELEMENT_KEYS) { if (candidate === value) return true; } return false; }; const captureRef = (element: HTMLElement | undefined): void => { if (!element) return; const key = element.dataset.storyId; if (!isElementKey(key)) return; elementRefs[key] = element; }; const recompute = () => { const key = props.selectedElement; if (key === "none") { setSelectionBounds(undefined); return; } setSelectionBounds(measureElement(elementRefs[key])); }; let pendingFrameHandle: number | null = null; const scheduleRecompute = () => { if (pendingFrameHandle !== null) cancelAnimationFrame(pendingFrameHandle); pendingFrameHandle = requestAnimationFrame(() => { pendingFrameHandle = null; recompute(); }); }; onMount(() => { recompute(); window.addEventListener("resize", recompute); onCleanup(() => { window.removeEventListener("resize", recompute); if (pendingFrameHandle !== null) cancelAnimationFrame(pendingFrameHandle); }); }); createEffect(on(() => props.selectedElement, scheduleRecompute, { defer: true })); const elementMeta = (): ElementMeta => { const element = elementRefs[props.selectedElement]; if (!element) return { tagName: "", componentName: "" }; return { tagName: element.tagName.toLowerCase(), componentName: element.dataset.component ?? "", }; }; const hasSelection = (): boolean => props.selectedElement !== "none" && selectionBounds() != null; const mouseX = (): number => { const bounds = selectionBounds(); return bounds ? bounds.x + bounds.width / 2 : 0; }; const contextMenuPosition = () => { if (!props.showContextMenu) return null; const bounds = selectionBounds(); if (!bounds) return null; return { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height + 4 }; }; return (

Acme Dashboard

Welcome

This is a sample dashboard. Select any element using the controls below to see React Grab's overlay.

Settings

Display name

); }; const meta: Meta = { title: "Playground", render: (args) => , play: async ({ canvasElement, args }) => { const selectionLabel = () => canvasElement.querySelector("[data-react-grab-selection-label]"); const toolbar = () => canvasElement.querySelector("[data-react-grab-toolbar]"); await waitFor(() => { if (args.selectedElement === "none") { expect(selectionLabel()).toBeNull(); } else { expect(selectionLabel()).not.toBeNull(); } if (args.showToolbar) { expect(toolbar()).not.toBeNull(); } }); }, args: { selectedElement: "btn-start", showToolbar: true, isActive: true, enabled: true, isPromptMode: false, isPendingDismiss: false, showContextMenu: false, inputValue: "", filePath: "", }, argTypes: { selectedElement: { control: "select", options: [...ELEMENT_KEYS] }, showToolbar: { control: "boolean" }, isActive: { control: "boolean" }, enabled: { control: "boolean" }, isPromptMode: { control: "boolean" }, isPendingDismiss: { control: "boolean" }, showContextMenu: { control: "boolean" }, inputValue: { control: "text" }, filePath: { control: "text" }, }, }; export default meta; type Story = StoryObj; export const Idle: Story = { args: { selectedElement: "btn-start" }, }; export const ContextMenu: Story = { args: { selectedElement: "btn-start", showContextMenu: true, filePath: "src/components/Button.tsx", }, play: async (context) => { if (!meta.play) throw new Error("meta.play is required for shared assertions"); await meta.play(context as StoryContext); await waitFor(() => { expect(context.canvasElement.querySelector("[data-react-grab-context-menu]")).not.toBeNull(); }); }, }; export const CommentInput: Story = { args: { selectedElement: "btn-save", isPromptMode: true, inputValue: "" }, }; export const CommentWithText: Story = { args: { selectedElement: "card-welcome", isPromptMode: true, inputValue: "make it bigger" }, }; export const PendingDismiss: Story = { args: { selectedElement: "btn-save", isPromptMode: true, isPendingDismiss: true }, }; export const NoSelection: Story = { args: { selectedElement: "none" }, };