Set up React Flow and add a base Diagram component #10 by handreyrc · Pull Request #47 · serverlessworkflow/editor

handreyrc · 2026-03-25T23:41:35Z

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.

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

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.

packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx

packages/serverless-workflow-diagram-editor/tests/setupTests.ts

packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx

packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

lornakelly · 2026-03-26T10:45:43Z

packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx

+    (changes) => setEdges((edgesSnapshot) => RF.applyEdgeChanges(changes, edgesSnapshot)),
+    [],
+  );
+  const onConnect = React.useCallback<RF.OnConnect>(


Do we need this for MVP as it will be readonly?

lornakelly · 2026-03-26T10:49:31Z

packages/serverless-workflow-diagram-editor/stories/DiagramEditor.stories.ts

  args: {
    isReadOnly: true,
-    content: "Sample Content",
+    locale: "EN",


Should lowercase en here as thats the i18next standard

lornakelly · 2026-03-26T10:53:16Z

packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx

-  test("Render DiagramEditor Component", async () => {
-    const content = "Sample Content";
+  test("Renders react flow Diagram component", async () => {
+    const locale = "EN";


Same as before if we can change to lowercase

fantonangeli

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

fantonangeli · 2026-03-26T10:03:40Z

packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx


-export const DiagramEditor = (props: DiagramEditorProps) => {
-  //TODO: Implement the actual component this is just a placeholder
+export const DiagramEditor = ({ isReadOnly, locale, ref }: DiagramEditorProps) => {


Because oxlint was only showing a warning but nothing was clearly shown in CI with an error, I would also change the root settings in line /.oxlintrc.json:6 to the following, so also arguments are ignored when they start with "_":

"typescript/no-unused-vars": ["error", {"argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }],

Suggested change

export const DiagramEditor = ({ isReadOnly, locale, ref }: DiagramEditorProps) => {

// oxlint-disable-next-line no-unused-vars remove this after the real implementation

export const DiagramEditor = ({ isReadOnly, locale, ref }: DiagramEditorProps) => {

fantonangeli · 2026-03-26T10:53:25Z

packages/serverless-workflow-diagram-editor/stories/DiagramEditor.tsx

-      <SWDiagramEditor content={props.content} isReadOnly={props.isReadOnly} />
-    </>
+    <div style={{ height: "100vh" }}>
+      <SWDiagramEditor isReadOnly={props.isReadOnly} locale={props.locale} />


I would rename this with SWF and the import alias

Suggested change

<SWDiagramEditor isReadOnly={props.isReadOnly} locale={props.locale} />

<SWFDiagramEditor isReadOnly={props.isReadOnly} locale={props.locale} />

fantonangeli · 2026-03-26T11:29:16Z

packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx

+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}


here, I would implement something like this, to have disable the nodes connections when is read-only

Suggested change

onConnect={onConnect}

onConnect={isReadOnly ? undefined : onConnect}

handreyrc requested review from Copilot and fantonangeli March 25, 2026 23:41

Copilot started reviewing on behalf of handreyrc March 25, 2026 23:41 View session

handreyrc requested review from lornakelly and ricardozanini and removed request for Copilot March 25, 2026 23:42

Add react flow lib

9d9ef44

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

handreyrc force-pushed the add-react-flow branch from fcd4e90 to 9d9ef44 Compare March 25, 2026 23:51

Copilot AI review requested due to automatic review settings March 25, 2026 23:51

Copilot started reviewing on behalf of handreyrc March 25, 2026 23:51 View session

Copilot AI reviewed Mar 25, 2026

View reviewed changes

Fix copilot complaints

080c1da

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

lornakelly reviewed Mar 26, 2026

View reviewed changes

fantonangeli suggested changes Mar 26, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

Set up React Flow and add a base Diagram component #10#47
handreyrc wants to merge 2 commits intoserverlessworkflow:mainfrom
handreyrc:add-react-flow

handreyrc commented Mar 25, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lornakelly Mar 26, 2026

Uh oh!

lornakelly Mar 26, 2026

Uh oh!

lornakelly Mar 26, 2026

Uh oh!

fantonangeli left a comment

Uh oh!

fantonangeli Mar 26, 2026

Uh oh!

fantonangeli Mar 26, 2026

Uh oh!

fantonangeli Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	export const DiagramEditor = ({ isReadOnly, locale, ref }: DiagramEditorProps) => {
	// oxlint-disable-next-line no-unused-vars remove this after the real implementation
	export const DiagramEditor = ({ isReadOnly, locale, ref }: DiagramEditorProps) => {

	<SWDiagramEditor isReadOnly={props.isReadOnly} locale={props.locale} />
	<SWFDiagramEditor isReadOnly={props.isReadOnly} locale={props.locale} />

	onConnect={onConnect}
	onConnect={isReadOnly ? undefined : onConnect}

Conversation

handreyrc commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lornakelly Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

lornakelly Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

lornakelly Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

fantonangeli left a comment

Choose a reason for hiding this comment

Uh oh!

fantonangeli Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

fantonangeli Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

fantonangeli Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

handreyrc commented Mar 25, 2026 •

edited

Loading