Create Nested Editing Stories

[cheryl7114]

closes #300

Summary

This PR adds a Nested Editing Storybook section with 8 isolated stories for building and regression-testing the nested editing system.

• AllTaskTypes — sanity-check with all 7 task types in one workflow
• CallHeadersMap — fixed-key map editing, 3 levels deep
• CallEndpointUnion — union switching between string URI, bearer, and OAuth2 endpoints
• SetOpenMap — free-form key-value editing inside a for loop
• RunTaskArray — arguments array reordering and environment map editing
• ListenDeepNesting — drill-in navigation through event arrays and foreach.do
• SwitchLockedCases — read-only switch task, opens locked by design
• NestedValidation — error placement at document, task, and nested-container levels

All stories default to isReadOnly: false; toggle via the Controls panel. Also adds an Overview.mdx landing page and updates the sidebar sort order.

[netlify]

✅ Deploy Preview for openworkflow-editor ready!

Name	Link
🔨 Latest commit	bad8945
🔍 Latest deploy log	https://app.netlify.com/projects/openworkflow-editor/deploys/6a82e46ed8dce00008d9ce53
😎 Deploy Preview	https://deploy-preview-333--openworkflow-editor.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull request overview

Adds a new Storybook “Nested Editing” section to provide isolated workflows for developing and regression-testing nested editing interactions in the diagram editor.

Changes:

• Introduces 8 nested-editing workflow fixtures (maps, open maps, arrays, unions, deep nesting, validation, and a “all task types” sanity workflow).
• Adds a NestedEditing.stories.tsx story set and an Overview.mdx landing page for the new section.
• Updates Storybook sidebar sort order and publishes a changeset for the diagram editor package.

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/open-workflow-diagram-editor/stories/nested-editing/workflows/switch-locked-cases.yaml	Adds a switch-focused workflow fixture for “locked cases” navigation/editing scenarios.
packages/open-workflow-diagram-editor/stories/nested-editing/workflows/set-open-map.yaml	Adds a set open-map fixture inside a for container for nested map editing.
packages/open-workflow-diagram-editor/stories/nested-editing/workflows/run-task-array.yaml	Adds a run fixture with arguments array + environment map editing at multiple nesting levels.
packages/open-workflow-diagram-editor/stories/nested-editing/workflows/nested-validation.yaml	Adds intentionally-invalid nested constructs to validate error placement at multiple depths.
packages/open-workflow-diagram-editor/stories/nested-editing/workflows/listen-deep-nesting.yaml	Adds a deep listen + foreach fixture for drill-in navigation through nested arrays/maps.
packages/open-workflow-diagram-editor/stories/nested-editing/workflows/call-headers-map.yaml	Adds a fixed-key headers map fixture for nested call editing.
packages/open-workflow-diagram-editor/stories/nested-editing/workflows/call-endpoint-union.yaml	Adds endpoint-union fixtures (string vs authenticated object variants) for union switching.
packages/open-workflow-diagram-editor/stories/nested-editing/workflows/all-task-types.yaml	Adds a “sanity check” workflow containing all major task types.
packages/open-workflow-diagram-editor/stories/nested-editing/Overview.mdx	Adds an Overview landing page for the new “Nested Editing” section.
packages/open-workflow-diagram-editor/stories/nested-editing/NestedEditing.stories.tsx	Registers the new workflows as Storybook stories.
packages/open-workflow-diagram-editor/stories/nested-editing/index.ts	Exports the new YAML fixtures via Vite ?raw imports.
packages/open-workflow-diagram-editor/.storybook/preview.tsx	Adds “Nested Editing” to the Storybook sidebar sort order.
.changeset/nested-editing-stories.md	Publishes the change as a minor bump to @openworkflowspec/diagram-editor.

Suppressed comments (3)

packages/open-workflow-diagram-editor/stories/nested-editing/NestedEditing.stories.tsx:45

• The local DEFAULT_STORY_ARGS/createWorkflowStory duplicates stories/helpers.ts and drops the shared play function that waits for the diagram to render. Consider wrapping the shared helper so these stories default to editable (isReadOnly: false) while still getting the standard play behavior.

const DEFAULT_STORY_ARGS = {
  isReadOnly: false,
  locale: "en" as const,
} as const;

const createWorkflowStory = (workflowContent: string): Story => ({
  args: {
    ...DEFAULT_STORY_ARGS,
    content: workflowContent,
  },
});

packages/open-workflow-diagram-editor/stories/nested-editing/NestedEditing.stories.tsx:53

• After introducing createEditableWorkflowStory, the non-read-only stories should use it so they consistently default to editable behavior (and still get the shared helper’s play function).

export const AllTaskTypes: Story = createWorkflowStory(workflows.allTaskTypes);
export const CallEndpointUnion: Story = createWorkflowStory(workflows.callEndpointUnion);
export const CallHeadersMap: Story = createWorkflowStory(workflows.callHeadersMap);
export const ListenDeepNesting: Story = createWorkflowStory(workflows.listenDeepNesting);
export const NestedValidation: Story = createWorkflowStory(workflows.nestedValidation);
export const RunTaskArray: Story = createWorkflowStory(workflows.runTaskArray);
export const SetOpenMap: Story = createWorkflowStory(workflows.setOpenMap);

packages/open-workflow-diagram-editor/stories/nested-editing/NestedEditing.stories.tsx:58

• SwitchLockedCases currently bypasses the shared workflow-story helper, so it won’t get the standard play hook that waits for the editor to render. If the intent is simply to default this one story to read-only, you can rely on createWorkflowStory directly (it already defaults isReadOnly: true).

export const SwitchLockedCases: Story = {
  args: {
    ...DEFAULT_STORY_ARGS,
    isReadOnly: true,
    content: workflows.switchLockedCases,

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Pull request overview

Copilot reviewed 13 out of 14 changed files in this pull request and generated no new comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

Suppressed comments (4)

packages/open-workflow-diagram-editor/stories/nested-editing/workflows/call-headers-map.yaml:56

• Same issue as above: the endpoint and Authorization scalars mix literal text with ${ ... }. Use a single ${ ... } expression (with string interpolation) for these values to avoid validation errors in the story.

              endpoint: https://api.example.com/users/${ .userId }/permissions
              headers:
                Accept: application/json
                Authorization: Bearer ${ .accessToken }

packages/open-workflow-diagram-editor/stories/nested-editing/NestedEditing.stories.tsx:45

• New stories omit the play hook used elsewhere to wait for the editor to finish rendering (e.g., stories/helpers.ts:33-43). Without this, interaction/visual tests can be flaky because the canvas may be captured before nodes mount.

const createWorkflowStory = (workflowContent: string): Story => ({
  args: {
    ...DEFAULT_STORY_ARGS,
    content: workflowContent,
  },
});

packages/open-workflow-diagram-editor/stories/nested-editing/workflows/call-headers-map.yaml:47

• endpoint and Authorization values embed ${ ... } inside a larger string. Other workflows use ${ ... } as the whole scalar value (e.g., stories/examples/workflows/star-wars-homeworld.yaml:48), so this form is likely to fail SDK validation and show error badges in a story that should otherwise render clean.

This issue also appears on line 53 of the same file.

              endpoint: https://api.example.com/users/${ .userId }
              headers:
                Accept: application/json
                Authorization: Bearer ${ .accessToken }
                X-Correlation-Id: ${ .correlationId }

packages/open-workflow-diagram-editor/stories/nested-editing/workflows/all-task-types.yaml:89

• endpoint embeds ${ .userId } inside a URI string. If the SDK expects either a plain string URI or a standalone expression (as in other examples), this will validate poorly and introduce unintended errors in the "sanity-check" story.

              endpoint: https://api.example.com/profile/${ .userId }

[Copilot]

Pull request overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated 1 comment.

Suppressed comments (1)

packages/open-workflow-diagram-editor/stories/nested-editing/Overview.mdx:17

• @storybook/addon-docs/blocks is deprecated in newer Storybook versions in favor of @storybook/blocks. If this repo is on Storybook 7+ (it appears to use @storybook/react-vite), switching to @storybook/blocks will reduce upgrade friction and avoid deprecation warnings.

import { Meta } from "@storybook/addon-docs/blocks";

[Copilot]

Pull request overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated 1 comment.

Suppressed comments (1)

packages/open-workflow-diagram-editor/stories/nested-editing/workflows/listen-deep-nesting.yaml:94

• The workflow sets total and avgTemp in summarise, but notifyAlert references ${ .summary }, which is never set in the shown workflow. Either set summary in summarise (e.g., an object containing total/avgTemp) or change notifyAlert to reference the fields that actually exist (e.g., ${ .total } and ${ .avgTemp }).

        - summarise:
            set:
              total: ${ .latestReadings | length }
              avgTemp: ${ [ .latestReadings[] | select(.type == "temperature") | .value ] | add / length }
        - notifyAlert:
            call: http
            with:
              method: post
              endpoint: https://alerts.example.com/notify
              headers:
                Content-Type: application/json
              body:
                summary: ${ .summary }
                avgTemp: ${ .avgTemp }