Add specification example workflows as Storybook stories

[cheryl7114]

Closes #89

Summary

This PR adds the following collapsible sections to Storybook:

1. Examples
2. Use Cases

These sections showcase example workflows and use cases from the Serverless Workflow Specification.

[netlify]

✅ Deploy Preview for swf-editor ready!

Name	Link
🔨 Latest commit	099503e
🔍 Latest deploy log	https://app.netlify.com/projects/swf-editor/deploys/6a2169c4f186d40007aec37c
😎 Deploy Preview	https://deploy-preview-164--swf-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

Note

Copilot was unable to run its full agentic suite in this review.

Adds Storybook “Examples” and “Use Cases” collections to showcase Serverless Workflow DSL patterns in the diagram editor.

Changes:

• Added multiple workflow YAML files under stories/examples/workflows and stories/use-cases/workflows
• Added Storybook stories + MDX overview pages to browse/render these workflows in DiagramEditor
• Updated Storybook preview parameters (backgrounds + story sorting) and stories README

Reviewed changes

Copilot reviewed 47 out of 47 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/multi-agent-ai-content-generation.yaml	New use-case workflow demonstrating multi-step AI content generation/refinement
packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/managing-github-issues.yaml	New use-case workflow for GitHub issue triage/review/close automation
packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/managing-ev-charging-stations.yaml	New use-case workflow for EV station events and session lifecycle
packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/automated-data-backup.yaml	New use-case workflow for DB backup and upload
packages/serverless-workflow-diagram-editor/stories/use-cases/index.ts	Re-exports use-case workflow YAML content for Storybook
packages/serverless-workflow-diagram-editor/stories/use-cases/UseCases.stories.tsx	Storybook stories rendering each use-case workflow in DiagramEditor
packages/serverless-workflow-diagram-editor/stories/use-cases/Overview.mdx	Use-cases documentation/overview page
packages/serverless-workflow-diagram-editor/stories/examples/workflows/wait-duration-inline.yaml	New example workflow for inline wait duration
packages/serverless-workflow-diagram-editor/stories/examples/workflows/try-catch-then.yaml	New example workflow for try/catch and conditional continuation
packages/serverless-workflow-diagram-editor/stories/examples/workflows/try-catch-retry-reusable.yaml	New example workflow for reusable retry policy
packages/serverless-workflow-diagram-editor/stories/examples/workflows/switch-then-string.yaml	New example workflow for switch with string then targets
packages/serverless-workflow-diagram-editor/stories/examples/workflows/star-wars-homeworld.yaml	New example workflow calling SWAPI and chaining results
packages/serverless-workflow-diagram-editor/stories/examples/workflows/set.yaml	New example workflow for basic set usage
packages/serverless-workflow-diagram-editor/stories/examples/workflows/schedule-event-driven.yaml	New example workflow for event-driven schedule
packages/serverless-workflow-diagram-editor/stories/examples/workflows/schedule-cron.yaml	New example workflow for cron schedule
packages/serverless-workflow-diagram-editor/stories/examples/workflows/run-subflow.yaml	New example workflow for running a sub-workflow
packages/serverless-workflow-diagram-editor/stories/examples/workflows/run-shell-stdin-and-arguments.yaml	New example workflow for running shell with stdin/args
packages/serverless-workflow-diagram-editor/stories/examples/workflows/run-script-with-stdin-and-arguments.yaml	New example workflow for running script with stdin/args/env
packages/serverless-workflow-diagram-editor/stories/examples/workflows/run-return-all.yaml	New example workflow for returning all container output
packages/serverless-workflow-diagram-editor/stories/examples/workflows/run-container-stdin-and-arguments.yaml	New example workflow for running container with stdin/args
packages/serverless-workflow-diagram-editor/stories/examples/workflows/raise-reusable.yaml	New example workflow demonstrating reusable error definitions
packages/serverless-workflow-diagram-editor/stories/examples/workflows/mock-service-extension.yaml	New example workflow demonstrating a mock call extension
packages/serverless-workflow-diagram-editor/stories/examples/workflows/listen-to-one.yaml	New example workflow for listening to a single event
packages/serverless-workflow-diagram-editor/stories/examples/workflows/listen-to-any-forever-foreach.yaml	New example workflow for listen-any + foreach loop
packages/serverless-workflow-diagram-editor/stories/examples/workflows/listen-to-all.yaml	New example workflow for listening to all correlated events
packages/serverless-workflow-diagram-editor/stories/examples/workflows/fork.yaml	New example workflow showing fork with competing branches
packages/serverless-workflow-diagram-editor/stories/examples/workflows/for.yaml	New example workflow demonstrating for iteration
packages/serverless-workflow-diagram-editor/stories/examples/workflows/emit.yaml	New example workflow emitting an event
packages/serverless-workflow-diagram-editor/stories/examples/workflows/do-single.yaml	New example workflow with a single do task
packages/serverless-workflow-diagram-editor/stories/examples/workflows/do-multiple.yaml	New example workflow with multiple do tasks
packages/serverless-workflow-diagram-editor/stories/examples/workflows/conditional-task.yaml	New example workflow for conditional task execution
packages/serverless-workflow-diagram-editor/stories/examples/workflows/call-openapi.yaml	New example workflow calling an OpenAPI operation
packages/serverless-workflow-diagram-editor/stories/examples/workflows/call-mcp.yaml	New example workflow calling MCP tooling over stdio
packages/serverless-workflow-diagram-editor/stories/examples/workflows/call-http-query-headers-expressions.yaml	New example workflow for HTTP query/headers via expressions
packages/serverless-workflow-diagram-editor/stories/examples/workflows/call-grpc.yaml	New example workflow calling gRPC method
packages/serverless-workflow-diagram-editor/stories/examples/workflows/call-custom-function-inline.yaml	New example workflow defining and calling an inline function
packages/serverless-workflow-diagram-editor/stories/examples/workflows/call-custom-function-cataloged.yaml	New example workflow calling a cataloged function definition
packages/serverless-workflow-diagram-editor/stories/examples/workflows/call-asyncapi-subscribe-consume-forever-foreach.yaml	New example workflow subscribing/consuming AsyncAPI messages
packages/serverless-workflow-diagram-editor/stories/examples/workflows/call-asyncapi-publish.yaml	New example workflow publishing AsyncAPI messages
packages/serverless-workflow-diagram-editor/stories/examples/workflows/authentication-reusable.yaml	New example workflow with reusable auth configuration
packages/serverless-workflow-diagram-editor/stories/examples/workflows/authentication-oauth2.yaml	New example workflow for OAuth2 authentication configuration
packages/serverless-workflow-diagram-editor/stories/examples/workflows/accumulate-room-readings.yaml	New example workflow accumulating readings with correlation
packages/serverless-workflow-diagram-editor/stories/examples/index.ts	Re-exports example workflow YAML content for Storybook
packages/serverless-workflow-diagram-editor/stories/examples/Overview.mdx	Examples documentation/overview page
packages/serverless-workflow-diagram-editor/stories/examples/Examples.stories.tsx	Storybook stories rendering each example workflow in DiagramEditor
packages/serverless-workflow-diagram-editor/stories/README.md	Updates stories directory documentation to mention examples
packages/serverless-workflow-diagram-editor/.storybook/preview.tsx	Updates Storybook preview parameters (backgrounds + story ordering)

Comments suppressed due to low confidence (11)

packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/multi-agent-ai-content-generation.yaml:1

• The workflow references .refined_text / .refined_image during reevaluation, but the preceding refineText / refineImage tasks don’t export these fields into context. As written, reevaluation will use missing/incorrect data and deliverContent will still emit the original .text/.image. Export the refined outputs into context (and update .text/.image if those are the canonical fields) before calling reevaluate / deliverContent.
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/managing-ev-charging-stations.yaml:1
• .event is initialized from $workflow.input[0].data, but the subsequent switch conditions expect .event.type. If .type is on the envelope (commonly $workflow.input[0].type) this will never match. Additionally, handleStationEvents uses then: raiseUnsupportedEventError after the switch, which can cause the unsupported-event error path to run even after a successful match (depending on DSL semantics). Consider storing the full event (including type) in .event and handling unsupported events via a default switch case rather than an unconditional then.
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/managing-ev-charging-stations.yaml:1
• The fault event type string in the switch condition (com.ev-power-supplier.charging.station-faulted.v1) does not match the scheduled event type (com.ev-power-supplier.charging-station.faulted.v1). This mismatch will prevent the stationError branch from ever being selected. Update the condition to use the same type value as the schedule.
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/managing-ev-charging-stations.yaml:1
• The fault event type string in the switch condition (com.ev-power-supplier.charging.station-faulted.v1) does not match the scheduled event type (com.ev-power-supplier.charging-station.faulted.v1). This mismatch will prevent the stationError branch from ever being selected. Update the condition to use the same type value as the schedule.
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/managing-ev-charging-stations.yaml:1
• Correct spelling improves clarity and consistency: rename tryAquireSlot to tryAcquireSlot, and feedBack to feedback (or provideFeedback).
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/managing-ev-charging-stations.yaml:1
• Correct spelling improves clarity and consistency: rename tryAquireSlot to tryAcquireSlot, and feedBack to feedback (or provideFeedback).
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/managing-ev-charging-stations.yaml:1
• Correct spelling improves clarity and consistency: rename tryAquireSlot to tryAcquireSlot, and feedBack to feedback (or provideFeedback).
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/automated-data-backup.yaml:1
• The shell command references environment variables with underscores ($SQLSERVER_HOST, $SQLSERVER_USER, $SQLSERVER_PASSWORD, $DATABASE_NAME), but the workflow defines different variable names (SQLSERVERHOST, SQLSERVERUSER, SQLSERVERPASSWORD, DATABASENAME). This will lead to empty/unset variables at runtime. Also, the backup file name/path is inconsistent (/var/backup/db.bak vs /backup/YourDatabase.bak). Align the environment variable names used in the command with those defined in environment, and ensure the produced backup path matches what readBackupFile reads.
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/automated-data-backup.yaml:1
• The shell command references environment variables with underscores ($SQLSERVER_HOST, $SQLSERVER_USER, $SQLSERVER_PASSWORD, $DATABASE_NAME), but the workflow defines different variable names (SQLSERVERHOST, SQLSERVERUSER, SQLSERVERPASSWORD, DATABASENAME). This will lead to empty/unset variables at runtime. Also, the backup file name/path is inconsistent (/var/backup/db.bak vs /backup/YourDatabase.bak). Align the environment variable names used in the command with those defined in environment, and ensure the produced backup path matches what readBackupFile reads.
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/automated-data-backup.yaml:1
• This example commits plaintext credentials (SQL password) and a bearer token into the repository. Even for Storybook samples, this is risky because it encourages copy/paste of secrets and may be flagged by secret scanners. Replace these with obvious placeholders (e.g., REPLACE_ME) or expression-based references to secrets/environment variables.
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/automated-data-backup.yaml:1
• This example commits plaintext credentials (SQL password) and a bearer token into the repository. Even for Storybook samples, this is risky because it encourages copy/paste of secrets and may be flagged by secret scanners. Replace these with obvious placeholders (e.g., REPLACE_ME) or expression-based references to secrets/environment variables.

---

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

[lornakelly]

Reads slightly: better Serverless workflow specification example workflows > Serverless workflow specification examples

[cheryl7114]

@lornakelly did you mean Serverless workflow specification examples > Serverless workflow specification example workflows?

[lornakelly]

Thanks for the PR @cheryl7114, great work! Just added a few comments

[Copilot]

Pull request overview

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

Comments suppressed due to low confidence (8)

packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/automated-data-backup.yaml:1

• The backup flow is internally inconsistent, so it’s likely to fail at runtime: (1) the command references $SQLSERVER_HOST/$SQLSERVER_USER/$SQLSERVER_PASSWORD/$DATABASE_NAME, but the environment defines SQLSERVERHOST/SQLSERVERUSER/SQLSERVERPASSWORD/DATABASENAME (different names); (2) the backup is written to /var/backup/db.bak but the mounted volume appears to map to /backup, and the next step reads /backup/YourDatabase.bak (different path and filename). Align the environment variable names and ensure the backup is written to and read from the same mounted path/filename.
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/automated-data-backup.yaml:1
• This workflow includes a hard-coded bearer token. Even for Storybook sample content, committing secrets (or secret-looking tokens) is risky because they tend to get copied into real configs; prefer placeholders (e.g., ${ $secrets.MINIO_TOKEN }, ${ .token }, or a clearly fake sentinel like REPLACE_ME) and document where the value should come from.
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/managing-ev-charging-stations.yaml:1
• The handleStationEvents task will always transition to raiseUnsupportedEventError because then: is set on the switch task itself. Also, the fault event type string in the switch (com.ev-power-supplier.charging.station-faulted.v1) does not match the scheduled type (com.ev-power-supplier.charging-station.faulted.v1). Move unsupported handling into a default switch case (or otherwise ensure only unsupported events raise), and make the event type constants consistent.
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/managing-ev-charging-stations.yaml:1
• The handleStationEvents task will always transition to raiseUnsupportedEventError because then: is set on the switch task itself. Also, the fault event type string in the switch (com.ev-power-supplier.charging.station-faulted.v1) does not match the scheduled type (com.ev-power-supplier.charging-station.faulted.v1). Move unsupported handling into a default switch case (or otherwise ensure only unsupported events raise), and make the event type constants consistent.
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/managing-github-issues.yaml:1
• These set: issue: blocks overwrite the entire issue object with only the listed fields, which will discard previously captured properties (e.g., number, repository, author) that are later referenced (like $context.issue.repository.organization). Update the assignments to merge into the existing issue object rather than replacing it (e.g., by creating a new object based on the existing $context.issue and only changing assignedTo/status/...).
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/managing-github-issues.yaml:1
• These set: issue: blocks overwrite the entire issue object with only the listed fields, which will discard previously captured properties (e.g., number, repository, author) that are later referenced (like $context.issue.repository.organization). Update the assignments to merge into the existing issue object rather than replacing it (e.g., by creating a new object based on the existing $context.issue and only changing assignedTo/status/...).
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/multi-agent-ai-content-generation.yaml:1
• reevaluate references .refined_text and .refined_image, but the preceding refineText/refineImage tasks don’t export those fields into the context in this workflow. As written, the reevaluation step won’t have the refined content available; export/assign the refined outputs from refineText/refineImage into the context (or change reevaluate to use the correct output paths provided by those calls).
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/managing-ev-charging-stations.yaml:1
• Correct the typo in the task name tryAquireSlot (should be tryAcquireSlot) to avoid propagating misspellings into diagrams and references.

[Copilot]

Pull request overview

Copilot reviewed 48 out of 49 changed files in this pull request and generated 3 comments.

Comments suppressed due to low confidence (8)

packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/automated-data-backup.yaml:1

• The container command references environment variables with underscores ($SQLSERVER_HOST, $DATABASE_NAME, etc.), but the environment: keys are defined without underscores (SQLSERVERHOST, DATABASENAME, etc.), so the backup command won’t receive the expected values. Also, the backup writes to /var/backup/db.bak but the next step reads /backup/YourDatabase.bak, so the pipeline can’t find the output file; align env var names and the produced/consumed backup file path/name across steps.
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/automated-data-backup.yaml:1
• The container command references environment variables with underscores ($SQLSERVER_HOST, $DATABASE_NAME, etc.), but the environment: keys are defined without underscores (SQLSERVERHOST, DATABASENAME, etc.), so the backup command won’t receive the expected values. Also, the backup writes to /var/backup/db.bak but the next step reads /backup/YourDatabase.bak, so the pipeline can’t find the output file; align env var names and the produced/consumed backup file path/name across steps.
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/automated-data-backup.yaml:1
• This workflow hardcodes credentials (SQL password) and a bearer token in-repo. Even as Storybook examples, these patterns are easy to cargo-cult into production; replace with clearly fake placeholders (e.g., REPLACE_ME) or reference runtime-provided secrets/inputs so secret scanners and users don’t treat them as real credentials.
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/automated-data-backup.yaml:1
• This workflow hardcodes credentials (SQL password) and a bearer token in-repo. Even as Storybook examples, these patterns are easy to cargo-cult into production; replace with clearly fake placeholders (e.g., REPLACE_ME) or reference runtime-provided secrets/inputs so secret scanners and users don’t treat them as real credentials.
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/managing-ev-charging-stations.yaml:1
• initialize stores only $workflow.input[0].data into .event, but the subsequent conditions read .event.type, which won’t exist if .event is just the CloudEvent data payload. Additionally, the stationError type string doesn’t match the scheduled event (charging-station.faulted.v1 vs charging.station-faulted.v1). Finally, placing then: raiseUnsupportedEventError on the switch means the workflow will proceed to raiseUnsupportedEventError even after a matched branch; use a default branch inside the switch instead.
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/managing-ev-charging-stations.yaml:1
• initialize stores only $workflow.input[0].data into .event, but the subsequent conditions read .event.type, which won’t exist if .event is just the CloudEvent data payload. Additionally, the stationError type string doesn’t match the scheduled event (charging-station.faulted.v1 vs charging.station-faulted.v1). Finally, placing then: raiseUnsupportedEventError on the switch means the workflow will proceed to raiseUnsupportedEventError even after a matched branch; use a default branch inside the switch instead.
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/managing-ev-charging-stations.yaml:1
• Typo in task name: tryAquireSlot should be tryAcquireSlot for correct spelling and readability.
  packages/serverless-workflow-diagram-editor/stories/use-cases/workflows/multi-agent-ai-content-generation.yaml:1
• reevaluate references .refined_text and .refined_image, but neither refineText nor refineImage exports those fields (or updates .text/.image). As written, reevaluation will run with missing inputs; export the refined outputs from each refinement task into context (either overwrite .text/.image or set .refined_text/.refined_image) and keep the reevaluate body consistent with that choice.