Add specification example workflows as Storybook stories

.changeset/workflow-examples.md

@@ -0,0 +1,5 @@
+---
+"@serverlessworkflow/diagram-editor": minor
+---
+
+Add workflow examples to Storybook

packages/serverless-workflow-diagram-editor/.storybook/preview.tsx

@@ -30,12 +30,22 @@ const preview: Preview = {
       },
     },
 
+    backgrounds: {
+      disable: true,
+    },
+
     a11y: {
       // 'todo' - show a11y violations in the test UI only
       // 'error' - fail CI on a11y violations
       // 'off' - skip a11y checks entirely
       test: "todo",
     },
+
+    options: {
+      storySort: {
+        order: ["Introduction", "Features", "Examples", "Use Cases"],
+      },
+    },
   },
 
   globalTypes: {

packages/serverless-workflow-diagram-editor/stories/README.md

@@ -22,6 +22,7 @@ This directory contains Storybook stories and documentation.
 
 - **`introduction/`** - Introductory documentation and welcome pages
 - **`features/`** - Component features and interactive stories
+- **`examples/`** - Serverless workflow specification examples
 - **`use-cases/`** - Real-world use case examples
 - **`assets/`** - Images and media files used in stories
 

packages/serverless-workflow-diagram-editor/stories/examples/Examples.stories.tsx

@@ -0,0 +1,104 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { DiagramEditor } from "../features/DiagramEditor";
+import * as workflows from "./index";
+
+const meta = {
+  title: "Examples/Examples",
+  component: DiagramEditor,
+  parameters: {
+    layout: "fullscreen",
+  },
+  render: (args, { globals }) => {
+    return <DiagramEditor {...args} colorMode={args.colorMode ?? globals.colorMode ?? "system"} />;
+  },
+} satisfies Meta<typeof DiagramEditor>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Constants for shared configuration
+const DEFAULT_STORY_ARGS = {
+  isReadOnly: true,
+  locale: "en" as const,
+} as const;
+
+/**
+ * Factory function to create workflow story configurations
+ * @param workflowContent - The YAML workflow content to display
+ * @returns Story configuration object
+ */
+const createWorkflowStory = (workflowContent: string): Story => {
+  return {
+    args: {
+      ...DEFAULT_STORY_ARGS,
+      content: workflowContent,
+    },
+  };
+};
+
+// Story definitions using the factory function
+export const AccumulateRoomReadings: Story = createWorkflowStory(workflows.accumulateRoomReadings);
+export const AuthenticationOAuth2: Story = createWorkflowStory(workflows.authenticationOAuth2);
+export const AuthenticationReusable: Story = createWorkflowStory(workflows.authenticationReusable);
+export const CallAsyncAPIPublish: Story = createWorkflowStory(workflows.callAsyncAPIPublish);
+export const CallAsyncAPISubscribe: Story = createWorkflowStory(workflows.callAsyncAPISubscribe);
+export const CallCustomFunctionCataloged: Story = createWorkflowStory(
+  workflows.callCustomFunctionCataloged,
+);
+export const CallCustomFunctionInline: Story = createWorkflowStory(
+  workflows.callCustomFunctionInline,
+);
+export const CallGrpc: Story = createWorkflowStory(workflows.callGrpc);
+export const CallHttpQueryHeadersExpressions: Story = createWorkflowStory(
+  workflows.callHttpQueryHeadersExpressions,
+);
+export const CallMCP: Story = createWorkflowStory(workflows.callMCP);
+export const CallOpenAPI: Story = createWorkflowStory(workflows.callOpenApi);
+export const ConditionalTask: Story = createWorkflowStory(workflows.conditionalTask);
+export const DoMultiple: Story = createWorkflowStory(workflows.doMultiple);
+export const DoSingle: Story = createWorkflowStory(workflows.doSingle);
+export const Emit: Story = createWorkflowStory(workflows.emit);
+export const For: Story = createWorkflowStory(workflows.forExample);
+export const Fork: Story = createWorkflowStory(workflows.fork);
+export const ListenToAll: Story = createWorkflowStory(workflows.listenToAll);
+export const ListenToOne: Story = createWorkflowStory(workflows.listenToOne);
+export const ListenToAnyForeverForeach: Story = createWorkflowStory(
+  workflows.listenToAnyForeverForeach,
+);
+export const MockServiceExtension: Story = createWorkflowStory(workflows.mockServiceExtension);
+export const RaiseReusable: Story = createWorkflowStory(workflows.raiseReusable);
+export const RunContainerStdinAndArguments: Story = createWorkflowStory(
+  workflows.runContainerStdinAndArguments,
+);
+export const RunReturnAll: Story = createWorkflowStory(workflows.runReturnAll);
+export const RunScriptWithStdinAndArguments: Story = createWorkflowStory(
+  workflows.runScriptWithStdinAndArguments,
+);
+export const RunShellStdinAndArguments: Story = createWorkflowStory(
+  workflows.runShellStdinAndArguments,
+);
+export const RunSubflow: Story = createWorkflowStory(workflows.runSubflow);
+export const ScheduleCron: Story = createWorkflowStory(workflows.scheduleCron);
+export const ScheduleEventDriven: Story = createWorkflowStory(workflows.scheduleEventDriven);
+export const SetExample: Story = createWorkflowStory(workflows.set);
+export const StarWarsHomeworld: Story = createWorkflowStory(workflows.starWarsHomeworld);
+export const SwitchThenString: Story = createWorkflowStory(workflows.switchThenString);
+export const TryCatchRetryReusable: Story = createWorkflowStory(workflows.tryCatchRetryReusable);
+export const TryCatchThen: Story = createWorkflowStory(workflows.tryCatchThen);
+export const WaitDurationInline: Story = createWorkflowStory(workflows.waitDurationInline);

packages/serverless-workflow-diagram-editor/stories/examples/Overview.mdx

@@ -0,0 +1,29 @@
+{/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */}
+
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Examples/Overview" />
+
+# Examples
+
+This section showcases workflow examples from the [Serverless Workflow Specification](https://github.com/serverlessworkflow/specification/tree/main/examples).
+
+Each example demonstrates different workflow patterns and capabilities supported by the diagram editor.
+
+## Available Examples
+
+Browse through the examples in the sidebar to see how different workflow patterns are visualized.

packages/serverless-workflow-diagram-editor/stories/examples/index.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default as accumulateRoomReadings } from "./workflows/accumulate-room-readings.yaml?raw";
+export { default as authenticationOAuth2 } from "./workflows/authentication-oauth2.yaml?raw";
+export { default as authenticationReusable } from "./workflows/authentication-reusable.yaml?raw";
+export { default as callAsyncAPIPublish } from "./workflows/call-asyncapi-publish.yaml?raw";
+export { default as callAsyncAPISubscribe } from "./workflows/call-asyncapi-subscribe-consume-forever-foreach.yaml?raw";
+export { default as callCustomFunctionCataloged } from "./workflows/call-custom-function-cataloged.yaml?raw";
+export { default as callCustomFunctionInline } from "./workflows/call-custom-function-inline.yaml?raw";
+export { default as callGrpc } from "./workflows/call-grpc.yaml?raw";
+export { default as callHttpQueryHeadersExpressions } from "./workflows/call-http-query-headers-expressions.yaml?raw";
+export { default as callMCP } from "./workflows/call-mcp.yaml?raw";
+export { default as callOpenApi } from "./workflows/call-openapi.yaml?raw";
+export { default as conditionalTask } from "./workflows/conditional-task.yaml?raw";
+export { default as doMultiple } from "./workflows/do-multiple.yaml?raw";
+export { default as doSingle } from "./workflows/do-single.yaml?raw";
+export { default as emit } from "./workflows/emit.yaml?raw";
+export { default as forExample } from "./workflows/for.yaml?raw";
+export { default as fork } from "./workflows/fork.yaml?raw";
+export { default as listenToAll } from "./workflows/listen-to-all.yaml?raw";
+export { default as listenToOne } from "./workflows/listen-to-one.yaml?raw";
+export { default as listenToAnyForeverForeach } from "./workflows/listen-to-any-forever-foreach.yaml?raw";
+export { default as mockServiceExtension } from "./workflows/mock-service-extension.yaml?raw";
+export { default as raiseReusable } from "./workflows/raise-reusable.yaml?raw";
+export { default as runContainerStdinAndArguments } from "./workflows/run-container-stdin-and-arguments.yaml?raw";
+export { default as runReturnAll } from "./workflows/run-return-all.yaml?raw";
+export { default as runScriptWithStdinAndArguments } from "./workflows/run-script-with-stdin-and-arguments.yaml?raw";
+export { default as runShellStdinAndArguments } from "./workflows/run-shell-stdin-and-arguments.yaml?raw";
+export { default as runSubflow } from "./workflows/run-subflow.yaml?raw";
+export { default as scheduleCron } from "./workflows/schedule-cron.yaml?raw";
+export { default as scheduleEventDriven } from "./workflows/schedule-event-driven.yaml?raw";
+export { default as set } from "./workflows/set.yaml?raw";
+export { default as starWarsHomeworld } from "./workflows/star-wars-homeworld.yaml?raw";
+export { default as switchThenString } from "./workflows/switch-then-string.yaml?raw";
+export { default as tryCatchRetryReusable } from "./workflows/try-catch-retry-reusable.yaml?raw";
+export { default as tryCatchThen } from "./workflows/try-catch-then.yaml?raw";
+export { default as waitDurationInline } from "./workflows/wait-duration-inline.yaml?raw";

packages/serverless-workflow-diagram-editor/stories/examples/workflows/accumulate-room-readings.yaml

@@ -0,0 +1,59 @@
+#
+# Copyright 2021-Present The Serverless Workflow Specification Authors
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+# http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+document:
+  dsl: "1.0.3"
+  namespace: examples
+  name: accumulate-room-readings
+  version: "0.1.0"
+do:
+  - consumeReading:
+      listen:
+        to:
+          all:
+            - with:
+                source: https://my.home.com/sensor
+                type: my.home.sensors.temperature
+              correlate:
+                roomId:
+                  from: .roomid
+            - with:
+                source: https://my.home.com/sensor
+                type: my.home.sensors.humidity
+              correlate:
+                roomId:
+                  from: .roomid
+      output:
+        as: .data.reading
+  - logReading:
+      for:
+        each: reading
+        in: .readings
+      do:
+        - callOrderService:
+            call: openapi
+            with:
+              document:
+                endpoint: http://myorg.io/ordersservices.json
+              operationId: logreading
+  - generateReport:
+      call: openapi
+      with:
+        document:
+          endpoint: http://myorg.io/ordersservices.json
+        operationId: produceReport
+timeout:
+  after:
+    hours: 1

packages/serverless-workflow-diagram-editor/stories/examples/workflows/authentication-oauth2.yaml

@@ -0,0 +1,37 @@
+#
+# Copyright 2021-Present The Serverless Workflow Specification Authors
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+# http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+document:
+  dsl: "1.0.3"
+  namespace: examples
+  name: oauth2-authentication
+  version: "0.1.0"
+do:
+  - getPet:
+      call: http
+      with:
+        method: get
+        endpoint:
+          uri: https://petstore.swagger.io/v2/pet/{petId}
+          authentication:
+            oauth2:
+              authority: http://keycloak/realms/fake-authority
+              endpoints: #optional
+                token: /auth/token #defaults to /oauth2/token
+                introspection: /auth/introspect #defaults to /oauth2/introspect
+              grant: client_credentials
+              client:
+                id: workflow-runtime-id
+                secret: workflow-runtime-secret

packages/serverless-workflow-diagram-editor/stories/examples/workflows/authentication-reusable.yaml

@@ -0,0 +1,34 @@
+#
+# Copyright 2021-Present The Serverless Workflow Specification Authors
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+# http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+document:
+  dsl: "1.0.3"
+  namespace: examples
+  name: bearer-auth
+  version: "0.1.0"
+use:
+  authentications:
+    petStoreAuth:
+      bearer:
+        token: ${ .token }
+do:
+  - getPet:
+      call: http
+      with:
+        method: get
+        endpoint:
+          uri: https://petstore.swagger.io/v2/pet/{petId}
+          authentication:
+            use: petStoreAuth

packages/serverless-workflow-diagram-editor/stories/examples/workflows/call-asyncapi-publish.yaml

@@ -0,0 +1,35 @@
+#
+# Copyright 2021-Present The Serverless Workflow Specification Authors
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+# http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+document:
+  dsl: "1.0.3"
+  namespace: examples
+  name: bearer-auth
+  version: "0.1.0"
+do:
+  - findPet:
+      call: asyncapi
+      with:
+        document:
+          endpoint: https://fake.com/docs/asyncapi.json
+        operation: findPetsByStatus
+        server:
+          name: staging
+        message:
+          payload:
+            petId: ${ .pet.id }
+        authentication:
+          bearer:
+            token: ${ .token }