Set up React Flow and add a base Diagram component #10

[handreyrc]

Closes #10

Summary

This PR sets up react flow lib and introduces the Diagram component allowing to render, visualize and interact with a hardcoded sample workflow.

Changes

• Added reacflow lib to the catalog.
• Added Diagram component to contain and consume the react flow lib.
• Upated DiagramEditor component to load the Diagram component.
• Updated storybook to showcase the DiagramEditor component rendering a sample workflow.
• Updated test setings and tests to work with react flow.

[Copilot]

Pull request overview

Sets up React Flow (@xyflow/react) in the diagram editor package and introduces a baseline Diagram component so the editor can render and interact with a simple hardcoded node/edge workflow (as a wiring/smoke test for the diagram layer).

Changes:

• Added @xyflow/react to the workspace catalog and the serverless-workflow-diagram-editor package dependencies.
• Introduced src/react-flow/diagram/Diagram (with CSS) and updated DiagramEditor to render it.
• Updated Storybook + Vitest setup/tests to accommodate React Flow rendering requirements (e.g., DOM mocks).

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
pnpm-workspace.yaml	Adds @xyflow/react to the central pnpm catalog.
pnpm-lock.yaml	Locks @xyflow/react and its transitive deps; includes incidental lock updates.
packages/serverless-workflow-diagram-editor/package.json	Adds @xyflow/react as a runtime dependency via catalog:.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx	New baseline React Flow diagram rendering + interactions.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css	Adds diagram container/background styling used by React Flow.
packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx	Replaces placeholder UI with Diagram embedding + (placeholder) imperative API.
packages/serverless-workflow-diagram-editor/stories/DiagramEditor.tsx	Ensures Storybook story provides height for React Flow to render.
packages/serverless-workflow-diagram-editor/stories/DiagramEditor.stories.ts	Updates story args to match the new DiagramEditor props.
packages/serverless-workflow-diagram-editor/tests/setupTests.ts	Adds global DOM mocks (ResizeObserver/DOMMatrix/PointerEvent) for React Flow tests.
packages/serverless-workflow-diagram-editor/tests/react-flow/diagram/Diagram.test.tsx	Adds a basic render smoke test for diagram node labels.
packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx	Updates editor test to assert the diagram container renders.
packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.story.test.tsx	Updates story test to assert the diagram container renders.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[fantonangeli]

Thanks a lot @handreyrc for your PR. I only have a few comments, but this PR already looks great

[Copilot]

Pull request overview

Copilot reviewed 11 out of 12 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[lornakelly]

LGTM