From abccdf266a3f870d43c2bb490381cd5109eee7b6 Mon Sep 17 00:00:00 2001 From: Cheryl Kong Date: Tue, 19 May 2026 10:21:18 +0100 Subject: [PATCH 01/12] chore: remove storybook boilerplate code Signed-off-by: Cheryl Kong --- .../stories/Button.stories.ts | 70 ---- .../stories/Button.tsx | 51 --- .../stories/Configure.mdx | 377 ------------------ .../stories/Header.stories.ts | 50 --- .../stories/Header.tsx | 70 ---- .../stories/Page.stories.ts | 49 --- .../stories/Page.tsx | 87 ---- .../stories/button.css | 46 --- .../stories/header.css | 48 --- .../stories/page.css | 84 ---- 10 files changed, 932 deletions(-) delete mode 100644 packages/serverless-workflow-diagram-editor/stories/Button.stories.ts delete mode 100644 packages/serverless-workflow-diagram-editor/stories/Button.tsx delete mode 100644 packages/serverless-workflow-diagram-editor/stories/Configure.mdx delete mode 100644 packages/serverless-workflow-diagram-editor/stories/Header.stories.ts delete mode 100644 packages/serverless-workflow-diagram-editor/stories/Header.tsx delete mode 100644 packages/serverless-workflow-diagram-editor/stories/Page.stories.ts delete mode 100644 packages/serverless-workflow-diagram-editor/stories/Page.tsx delete mode 100644 packages/serverless-workflow-diagram-editor/stories/button.css delete mode 100644 packages/serverless-workflow-diagram-editor/stories/header.css delete mode 100644 packages/serverless-workflow-diagram-editor/stories/page.css diff --git a/packages/serverless-workflow-diagram-editor/stories/Button.stories.ts b/packages/serverless-workflow-diagram-editor/stories/Button.stories.ts deleted file mode 100644 index dd6408d0..00000000 --- a/packages/serverless-workflow-diagram-editor/stories/Button.stories.ts +++ /dev/null @@ -1,70 +0,0 @@ -/* - * 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 { fn } from "storybook/test"; - -import { Button } from "./Button"; - -// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export -const meta = { - title: "Example/Button", - component: Button, - parameters: { - // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout - layout: "centered", - }, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs - tags: ["autodocs"], - // More on argTypes: https://storybook.js.org/docs/api/argtypes - argTypes: { - backgroundColor: { control: "color" }, - }, - // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args - args: { onClick: fn() }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -export const Primary: Story = { - args: { - primary: true, - label: "Button", - }, -}; - -export const Secondary: Story = { - args: { - label: "Button", - }, -}; - -export const Large: Story = { - args: { - size: "large", - label: "Button", - }, -}; - -export const Small: Story = { - args: { - size: "small", - label: "Button", - }, -}; diff --git a/packages/serverless-workflow-diagram-editor/stories/Button.tsx b/packages/serverless-workflow-diagram-editor/stories/Button.tsx deleted file mode 100644 index 80e82377..00000000 --- a/packages/serverless-workflow-diagram-editor/stories/Button.tsx +++ /dev/null @@ -1,51 +0,0 @@ -/* - * 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 "./button.css"; - -export interface ButtonProps { - /** Is this the principal call to action on the page? */ - primary?: boolean; - /** What background color to use */ - backgroundColor?: string; - /** How large should the button be? */ - size?: "small" | "medium" | "large"; - /** Button contents */ - label: string; - /** Optional click handler */ - onClick?: () => void; -} - -/** Primary UI component for user interaction */ -export const Button = ({ - primary = false, - size = "medium", - backgroundColor, - label, - ...props -}: ButtonProps) => { - const mode = primary ? "storybook-button--primary" : "storybook-button--secondary"; - return ( - - ); -}; diff --git a/packages/serverless-workflow-diagram-editor/stories/Configure.mdx b/packages/serverless-workflow-diagram-editor/stories/Configure.mdx deleted file mode 100644 index 3efef891..00000000 --- a/packages/serverless-workflow-diagram-editor/stories/Configure.mdx +++ /dev/null @@ -1,377 +0,0 @@ -{/* 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"; -import Github from "./assets/github.svg"; -import Discord from "./assets/discord.svg"; -import Youtube from "./assets/youtube.svg"; -import Tutorials from "./assets/tutorials.svg"; -import Styling from "./assets/styling.png"; -import Context from "./assets/context.png"; -import Assets from "./assets/assets.png"; -import Docs from "./assets/docs.png"; -import Share from "./assets/share.png"; -import FigmaPlugin from "./assets/figma-plugin.png"; -import Testing from "./assets/testing.png"; -import Accessibility from "./assets/accessibility.png"; -import Theming from "./assets/theming.png"; -import AddonLibrary from "./assets/addon-library.png"; - -export const RightArrow = () => - - - - - -
-
- # Configure your project - - Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community. -
-
-
- A wall of logos representing different styling technologies -

Add styling and CSS

-

Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.

- Learn more -
-
- An abstraction representing the composition of data for a component -

Provide context and mocking

-

Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.

- Learn more -
-
- A representation of typography and image assets -
-

Load assets and resources

-

To link static files (like fonts) to your projects and stories, use the - `staticDirs` configuration option to specify folders to load when - starting Storybook.

- Learn more -
-
-
-
-
-
- # Do more with Storybook - - Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs. -
- -
-
-
- A screenshot showing the autodocs tag being set, pointing a docs page being generated -

Autodocs

-

Auto-generate living, - interactive reference documentation from your components and stories.

- Learn more -
-
- A browser window showing a Storybook being published to a chromatic.com URL -

Publish to Chromatic

-

Publish your Storybook to review and collaborate with your entire team.

- Learn more -
-
- Windows showing the Storybook plugin in Figma -

Figma Plugin

-

Embed your stories into Figma to cross-reference the design and live - implementation in one place.

- Learn more -
-
- Screenshot of tests passing and failing -

Testing

-

Use stories to test a component in all its variations, no matter how - complex.

- Learn more -
-
- Screenshot of accessibility tests passing and failing -

Accessibility

-

Automatically test your components for a11y issues as you develop.

- Learn more -
-
- Screenshot of Storybook in light and dark mode -

Theming

-

Theme Storybook's UI to personalize it to your project.

- Learn more -
-
-
-
-
-
-

Addons

-

Integrate your tools with Storybook to connect workflows.

- Discover all addons -
-
- Integrate your tools with Storybook to connect workflows. -
-
- -
-
- Github logo - Join our contributors building the future of UI development. - - Star on GitHub -
-
- Discord logo -
- Get support and chat with frontend developers. - - Join Discord server -
-
-
- Youtube logo -
- Watch tutorials, feature previews and interviews. - - Watch on YouTube -
-
-
- A book -

Follow guided walkthroughs on for key workflows.

- - Discover tutorials -
-
- - diff --git a/packages/serverless-workflow-diagram-editor/stories/Header.stories.ts b/packages/serverless-workflow-diagram-editor/stories/Header.stories.ts deleted file mode 100644 index 150998d6..00000000 --- a/packages/serverless-workflow-diagram-editor/stories/Header.stories.ts +++ /dev/null @@ -1,50 +0,0 @@ -/* - * 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 { fn } from "storybook/test"; - -import { Header } from "./Header"; - -const meta = { - title: "Example/Header", - component: Header, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs - tags: ["autodocs"], - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout - layout: "fullscreen", - }, - args: { - onLogin: fn(), - onLogout: fn(), - onCreateAccount: fn(), - }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const LoggedIn: Story = { - args: { - user: { - name: "Jane Doe", - }, - }, -}; - -export const LoggedOut: Story = {}; diff --git a/packages/serverless-workflow-diagram-editor/stories/Header.tsx b/packages/serverless-workflow-diagram-editor/stories/Header.tsx deleted file mode 100644 index 86274c03..00000000 --- a/packages/serverless-workflow-diagram-editor/stories/Header.tsx +++ /dev/null @@ -1,70 +0,0 @@ -/* - * 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 { Button } from "./Button"; -import "./header.css"; - -type User = { - name: string; -}; - -export interface HeaderProps { - user?: User; - onLogin?: () => void; - onLogout?: () => void; - onCreateAccount?: () => void; -} - -export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => ( -
-
-
- - - - - - - -

Acme

-
-
- {user ? ( - <> - - Welcome, {user.name}! - -
-
-
-); diff --git a/packages/serverless-workflow-diagram-editor/stories/Page.stories.ts b/packages/serverless-workflow-diagram-editor/stories/Page.stories.ts deleted file mode 100644 index 19614e0e..00000000 --- a/packages/serverless-workflow-diagram-editor/stories/Page.stories.ts +++ /dev/null @@ -1,49 +0,0 @@ -/* - * 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 { expect, userEvent, within } from "storybook/test"; - -import { Page } from "./Page"; - -const meta = { - title: "Example/Page", - component: Page, - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout - layout: "fullscreen", - }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const LoggedOut: Story = {}; - -// More on component testing: https://storybook.js.org/docs/writing-tests/interaction-testing -export const LoggedIn: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - const loginButton = canvas.getByRole("button", { name: /Log in/i }); - await expect(loginButton).toBeInTheDocument(); - await userEvent.click(loginButton); - await expect(loginButton).not.toBeInTheDocument(); - - const logoutButton = canvas.getByRole("button", { name: /Log out/i }); - await expect(logoutButton).toBeInTheDocument(); - }, -}; diff --git a/packages/serverless-workflow-diagram-editor/stories/Page.tsx b/packages/serverless-workflow-diagram-editor/stories/Page.tsx deleted file mode 100644 index 1f1485b7..00000000 --- a/packages/serverless-workflow-diagram-editor/stories/Page.tsx +++ /dev/null @@ -1,87 +0,0 @@ -/* - * 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 React from "react"; - -import { Header } from "./Header"; -import "./page.css"; - -type User = { - name: string; -}; - -export const Page: React.FC = () => { - const [user, setUser] = React.useState(); - - return ( -
-
setUser({ name: "Jane Doe" })} - onLogout={() => setUser(undefined)} - onCreateAccount={() => setUser({ name: "Jane Doe" })} - /> - -
-

Pages in Storybook

-

- We recommend building UIs with a{" "} - - component-driven - {" "} - process starting with atomic components and ending with pages. -

-

- Render pages with mock data. This makes it easy to build and review page states without needing to navigate to - them in your app. Here are some handy patterns for managing page data in Storybook: -

-
    -
  • - Use a higher-level connected component. Storybook helps you compose such data from the "args" of - child component stories -
    • -
  • - Assemble data in the page component from your services. You can mock these services out using Storybook. -
    • -
-

- Get a guided tutorial on component-driven development at{" "} - - Storybook tutorials - - . Read more in the{" "} - - docs - - . -

-
- Tip Adjust the width of the canvas with the{" "} - - - - - - Viewports addon in the toolbar -
-
-
- ); -}; diff --git a/packages/serverless-workflow-diagram-editor/stories/button.css b/packages/serverless-workflow-diagram-editor/stories/button.css deleted file mode 100644 index 0b04f507..00000000 --- a/packages/serverless-workflow-diagram-editor/stories/button.css +++ /dev/null @@ -1,46 +0,0 @@ -/* - * 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. - */ - -.storybook-button { - display: inline-block; - cursor: pointer; - border: 0; - border-radius: 3em; - font-weight: 700; - line-height: 1; - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} -.storybook-button--primary { - background-color: #555ab9; - color: white; -} -.storybook-button--secondary { - box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; - background-color: transparent; - color: #333; -} -.storybook-button--small { - padding: 10px 16px; - font-size: 12px; -} -.storybook-button--medium { - padding: 11px 20px; - font-size: 14px; -} -.storybook-button--large { - padding: 12px 24px; - font-size: 16px; -} diff --git a/packages/serverless-workflow-diagram-editor/stories/header.css b/packages/serverless-workflow-diagram-editor/stories/header.css deleted file mode 100644 index e7d0609d..00000000 --- a/packages/serverless-workflow-diagram-editor/stories/header.css +++ /dev/null @@ -1,48 +0,0 @@ -/* - * 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. - */ - -.storybook-header { - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - padding: 15px 20px; - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} - -.storybook-header svg { - display: inline-block; - vertical-align: top; -} - -.storybook-header h1 { - display: inline-block; - vertical-align: top; - margin: 6px 0 6px 10px; - font-weight: 700; - font-size: 20px; - line-height: 1; -} - -.storybook-header button + button { - margin-left: 10px; -} - -.storybook-header .welcome { - margin-right: 10px; - color: #333; - font-size: 14px; -} diff --git a/packages/serverless-workflow-diagram-editor/stories/page.css b/packages/serverless-workflow-diagram-editor/stories/page.css deleted file mode 100644 index 6b0f8179..00000000 --- a/packages/serverless-workflow-diagram-editor/stories/page.css +++ /dev/null @@ -1,84 +0,0 @@ -/* - * 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. - */ - -.storybook-page { - margin: 0 auto; - padding: 48px 20px; - max-width: 600px; - color: #333; - font-size: 14px; - line-height: 24px; - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} - -.storybook-page h2 { - display: inline-block; - vertical-align: top; - margin: 0 0 4px; - font-weight: 700; - font-size: 32px; - line-height: 1; -} - -.storybook-page p { - margin: 1em 0; -} - -.storybook-page a { - color: inherit; -} - -.storybook-page ul { - margin: 1em 0; - padding-left: 30px; -} - -.storybook-page li { - margin-bottom: 8px; -} - -.storybook-page .tip { - display: inline-block; - vertical-align: top; - margin-right: 10px; - border-radius: 1em; - background: #e7fdd8; - padding: 4px 12px; - color: #357a14; - font-weight: 700; - font-size: 11px; - line-height: 12px; -} - -.storybook-page .tip-wrapper { - margin-top: 40px; - margin-bottom: 40px; - font-size: 13px; - line-height: 20px; -} - -.storybook-page .tip-wrapper svg { - display: inline-block; - vertical-align: top; - margin-top: 3px; - margin-right: 4px; - width: 12px; - height: 12px; -} - -.storybook-page .tip-wrapper svg path { - fill: #1ea7fd; -} From b00cd32a8d7dc39c10b3af3c2a8d50cbc0d7e18e Mon Sep 17 00:00:00 2001 From: Cheryl Kong Date: Tue, 19 May 2026 10:50:19 +0100 Subject: [PATCH 02/12] refactor: move editor stories into Features directory Signed-off-by: Cheryl Kong --- .../stories/{ => features}/DiagramEditor.stories.ts | 2 +- .../stories/{ => features}/DiagramEditor.tsx | 2 +- .../{ => features}/DiagramEditorDragNDrop.stories.ts | 2 +- .../stories/{ => features}/DiagramEditorDragNDrop.tsx | 2 +- .../stories/{ => features}/ErrorPage.stories.tsx | 8 ++++---- 5 files changed, 8 insertions(+), 8 deletions(-) rename packages/serverless-workflow-diagram-editor/stories/{ => features}/DiagramEditor.stories.ts (98%) rename packages/serverless-workflow-diagram-editor/stories/{ => features}/DiagramEditor.tsx (95%) rename packages/serverless-workflow-diagram-editor/stories/{ => features}/DiagramEditorDragNDrop.stories.ts (95%) rename packages/serverless-workflow-diagram-editor/stories/{ => features}/DiagramEditorDragNDrop.tsx (98%) rename packages/serverless-workflow-diagram-editor/stories/{ => features}/ErrorPage.stories.tsx (92%) diff --git a/packages/serverless-workflow-diagram-editor/stories/DiagramEditor.stories.ts b/packages/serverless-workflow-diagram-editor/stories/features/DiagramEditor.stories.ts similarity index 98% rename from packages/serverless-workflow-diagram-editor/stories/DiagramEditor.stories.ts rename to packages/serverless-workflow-diagram-editor/stories/features/DiagramEditor.stories.ts index cb9bd703..3399bc04 100644 --- a/packages/serverless-workflow-diagram-editor/stories/DiagramEditor.stories.ts +++ b/packages/serverless-workflow-diagram-editor/stories/features/DiagramEditor.stories.ts @@ -84,7 +84,7 @@ timeout: const meta = { id: "diagram-editor", - title: "Example/Diagram-Editor", + title: "Features/Diagram-Editor", component: DiagramEditor, // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ["autodocs"], diff --git a/packages/serverless-workflow-diagram-editor/stories/DiagramEditor.tsx b/packages/serverless-workflow-diagram-editor/stories/features/DiagramEditor.tsx similarity index 95% rename from packages/serverless-workflow-diagram-editor/stories/DiagramEditor.tsx rename to packages/serverless-workflow-diagram-editor/stories/features/DiagramEditor.tsx index dfc3cb34..4e73683d 100644 --- a/packages/serverless-workflow-diagram-editor/stories/DiagramEditor.tsx +++ b/packages/serverless-workflow-diagram-editor/stories/features/DiagramEditor.tsx @@ -17,7 +17,7 @@ import { DiagramEditor as Component, DiagramEditorProps, -} from "../src/diagram-editor/DiagramEditor"; +} from "../../src/diagram-editor/DiagramEditor"; /** Primary UI component for user interaction */ export const DiagramEditor = ({ ...props }: DiagramEditorProps) => { diff --git a/packages/serverless-workflow-diagram-editor/stories/DiagramEditorDragNDrop.stories.ts b/packages/serverless-workflow-diagram-editor/stories/features/DiagramEditorDragNDrop.stories.ts similarity index 95% rename from packages/serverless-workflow-diagram-editor/stories/DiagramEditorDragNDrop.stories.ts rename to packages/serverless-workflow-diagram-editor/stories/features/DiagramEditorDragNDrop.stories.ts index 27428576..d8a36e9d 100644 --- a/packages/serverless-workflow-diagram-editor/stories/DiagramEditorDragNDrop.stories.ts +++ b/packages/serverless-workflow-diagram-editor/stories/features/DiagramEditorDragNDrop.stories.ts @@ -20,7 +20,7 @@ import { DiagramEditorDragNDrop } from "./DiagramEditorDragNDrop"; const meta = { id: "diagram-editor-drag-n-drop", - title: "Example/Diagram-Editor-Drag-N-Drop", + title: "Features/Diagram-Editor-Drag-N-Drop", component: DiagramEditorDragNDrop, tags: ["autodocs"], parameters: { diff --git a/packages/serverless-workflow-diagram-editor/stories/DiagramEditorDragNDrop.tsx b/packages/serverless-workflow-diagram-editor/stories/features/DiagramEditorDragNDrop.tsx similarity index 98% rename from packages/serverless-workflow-diagram-editor/stories/DiagramEditorDragNDrop.tsx rename to packages/serverless-workflow-diagram-editor/stories/features/DiagramEditorDragNDrop.tsx index c5a04dc3..7d4b1af6 100644 --- a/packages/serverless-workflow-diagram-editor/stories/DiagramEditorDragNDrop.tsx +++ b/packages/serverless-workflow-diagram-editor/stories/features/DiagramEditorDragNDrop.tsx @@ -18,7 +18,7 @@ import React, { useState } from "react"; import { DiagramEditor as Component, DiagramEditorProps, -} from "../src/diagram-editor/DiagramEditor"; +} from "../../src/diagram-editor/DiagramEditor"; export const DiagramEditorDragNDrop = (props: Omit) => { const [content, setContent] = useState(""); diff --git a/packages/serverless-workflow-diagram-editor/stories/ErrorPage.stories.tsx b/packages/serverless-workflow-diagram-editor/stories/features/ErrorPage.stories.tsx similarity index 92% rename from packages/serverless-workflow-diagram-editor/stories/ErrorPage.stories.tsx rename to packages/serverless-workflow-diagram-editor/stories/features/ErrorPage.stories.tsx index f4eb3597..6417e1a6 100644 --- a/packages/serverless-workflow-diagram-editor/stories/ErrorPage.stories.tsx +++ b/packages/serverless-workflow-diagram-editor/stories/features/ErrorPage.stories.tsx @@ -15,10 +15,10 @@ */ import type { Meta, StoryObj } from "@storybook/react-vite"; -import { ErrorPage } from "../src/diagram-editor/error-pages/ErrorPage"; +import { ErrorPage } from "../../src/diagram-editor/error-pages/ErrorPage"; import { PropsWithChildren } from "react"; -import { ColorMode } from "../src/types/colorMode"; -import { useResolvedColorMode } from "../src/hooks/useResolvedColorMode"; +import { ColorMode } from "../../src/types/colorMode"; +import { useResolvedColorMode } from "../../src/hooks/useResolvedColorMode"; type ErrorPageProps = { title: string; @@ -44,7 +44,7 @@ const DecRoot = ({ colorMode, children }: PropsWithChildren<{ colorMode: ColorMo }; const meta = { - title: "Example/ErrorPage", + title: "Features/ErrorPage", component: ErrorPage, // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ["autodocs"], From bba8e4b446d936526b808a73ab92461419baf104 Mon Sep 17 00:00:00 2001 From: Cheryl Kong Date: Tue, 19 May 2026 11:15:06 +0100 Subject: [PATCH 03/12] fix: update story file paths in test imports Signed-off-by: Cheryl Kong --- .../tests/diagram-editor/DiagramEditor.story.test.tsx | 2 +- .../tests/diagram-editor/DiagramEditorDragNDrop.story.test.tsx | 2 +- .../tests/diagram-editor/error-pages/ErrorPage.story.test.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.story.test.tsx b/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.story.test.tsx index 0510b528..2d3bd6ca 100644 --- a/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.story.test.tsx +++ b/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.story.test.tsx @@ -16,7 +16,7 @@ import { render, screen } from "@testing-library/react"; import { composeStories } from "@storybook/react-vite"; -import * as stories from "../../stories/DiagramEditor.stories"; +import * as stories from "../../stories/features/DiagramEditor.stories"; import { vi, expect, afterEach, describe, it } from "vitest"; import { BASIC_VALID_WORKFLOW_YAML } from "../fixtures/workflows"; diff --git a/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditorDragNDrop.story.test.tsx b/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditorDragNDrop.story.test.tsx index ea1f08d7..d91611a6 100644 --- a/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditorDragNDrop.story.test.tsx +++ b/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditorDragNDrop.story.test.tsx @@ -16,7 +16,7 @@ import { render, screen, waitFor, fireEvent } from "@testing-library/react"; import { composeStories } from "@storybook/react-vite"; -import * as stories from "../../stories/DiagramEditorDragNDrop.stories"; +import * as stories from "../../stories/features/DiagramEditorDragNDrop.stories"; import { vi, test, expect, afterEach, describe } from "vitest"; import { BASIC_VALID_WORKFLOW_YAML } from "../fixtures/workflows"; import userEvent from "@testing-library/user-event"; diff --git a/packages/serverless-workflow-diagram-editor/tests/diagram-editor/error-pages/ErrorPage.story.test.tsx b/packages/serverless-workflow-diagram-editor/tests/diagram-editor/error-pages/ErrorPage.story.test.tsx index 646b1468..971743e6 100644 --- a/packages/serverless-workflow-diagram-editor/tests/diagram-editor/error-pages/ErrorPage.story.test.tsx +++ b/packages/serverless-workflow-diagram-editor/tests/diagram-editor/error-pages/ErrorPage.story.test.tsx @@ -16,7 +16,7 @@ import { render, screen } from "@testing-library/react"; import { composeStories } from "@storybook/react-vite"; -import * as stories from "../../../stories/ErrorPage.stories"; +import * as stories from "../../../stories/features/ErrorPage.stories"; import { expect, describe, it } from "vitest"; const { TitleOnly, WithMessage, WithSnippet, WithMessageAndSnippet } = composeStories(stories); From d20ea059b58d92d051c1eed81912c68547e3faa6 Mon Sep 17 00:00:00 2001 From: Cheryl Kong Date: Thu, 21 May 2026 16:06:47 +0100 Subject: [PATCH 04/12] feat: add color mode toolbar Signed-off-by: Cheryl Kong --- .../.storybook/{preview.ts => preview.tsx} | 25 ++++++++++++++++++- ...r.stories.ts => DiagramEditor.stories.tsx} | 5 ++-- ....ts => DiagramEditorDragNDrop.stories.tsx} | 4 ++- .../stories/features/ErrorPage.stories.tsx | 24 ++++++++---------- 4 files changed, 41 insertions(+), 17 deletions(-) rename packages/serverless-workflow-diagram-editor/.storybook/{preview.ts => preview.tsx} (62%) rename packages/serverless-workflow-diagram-editor/stories/features/{DiagramEditor.stories.ts => DiagramEditor.stories.tsx} (95%) rename packages/serverless-workflow-diagram-editor/stories/features/{DiagramEditorDragNDrop.stories.ts => DiagramEditorDragNDrop.stories.tsx} (89%) diff --git a/packages/serverless-workflow-diagram-editor/.storybook/preview.ts b/packages/serverless-workflow-diagram-editor/.storybook/preview.tsx similarity index 62% rename from packages/serverless-workflow-diagram-editor/.storybook/preview.ts rename to packages/serverless-workflow-diagram-editor/.storybook/preview.tsx index 384158cb..8d6107d8 100644 --- a/packages/serverless-workflow-diagram-editor/.storybook/preview.ts +++ b/packages/serverless-workflow-diagram-editor/.storybook/preview.tsx @@ -15,7 +15,11 @@ */ import "../src/styles.css"; -import type { Preview } from "@storybook/react-vite"; +import type { Preview, Decorator } from "@storybook/react-vite"; + +const withColorMode: Decorator = (Story, context) => { + return ; +}; const preview: Preview = { parameters: { @@ -33,6 +37,25 @@ const preview: Preview = { test: "todo", }, }, + + globalTypes: { + colorMode: { + description: "Global color mode for components", + defaultValue: "system", + toolbar: { + title: "Color Mode", + icon: "circlehollow", + items: [ + { value: "light", icon: "sun", title: "Light" }, + { value: "dark", icon: "moon", title: "Dark" }, + { value: "system", icon: "browser", title: "System" }, + ], + dynamicTitle: true, + }, + }, + }, + + decorators: [withColorMode], }; export default preview; diff --git a/packages/serverless-workflow-diagram-editor/stories/features/DiagramEditor.stories.ts b/packages/serverless-workflow-diagram-editor/stories/features/DiagramEditor.stories.tsx similarity index 95% rename from packages/serverless-workflow-diagram-editor/stories/features/DiagramEditor.stories.ts rename to packages/serverless-workflow-diagram-editor/stories/features/DiagramEditor.stories.tsx index 3399bc04..545a0e90 100644 --- a/packages/serverless-workflow-diagram-editor/stories/features/DiagramEditor.stories.ts +++ b/packages/serverless-workflow-diagram-editor/stories/features/DiagramEditor.stories.tsx @@ -92,7 +92,9 @@ const meta = { // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout layout: "fullscreen", }, - args: {}, + render: (args, { globals }) => { + return ; + }, } satisfies Meta; export default meta; @@ -102,7 +104,6 @@ export const Component: Story = { args: { isReadOnly: true, locale: "en", - colorMode: "system", content: workflowExample, }, }; diff --git a/packages/serverless-workflow-diagram-editor/stories/features/DiagramEditorDragNDrop.stories.ts b/packages/serverless-workflow-diagram-editor/stories/features/DiagramEditorDragNDrop.stories.tsx similarity index 89% rename from packages/serverless-workflow-diagram-editor/stories/features/DiagramEditorDragNDrop.stories.ts rename to packages/serverless-workflow-diagram-editor/stories/features/DiagramEditorDragNDrop.stories.tsx index d8a36e9d..aa6548b9 100644 --- a/packages/serverless-workflow-diagram-editor/stories/features/DiagramEditorDragNDrop.stories.ts +++ b/packages/serverless-workflow-diagram-editor/stories/features/DiagramEditorDragNDrop.stories.tsx @@ -26,7 +26,9 @@ const meta = { parameters: { layout: "fullscreen", }, - args: {}, + render: (args, { globals }) => { + return ; + }, } satisfies Meta; export default meta; diff --git a/packages/serverless-workflow-diagram-editor/stories/features/ErrorPage.stories.tsx b/packages/serverless-workflow-diagram-editor/stories/features/ErrorPage.stories.tsx index 6417e1a6..c29b76f7 100644 --- a/packages/serverless-workflow-diagram-editor/stories/features/ErrorPage.stories.tsx +++ b/packages/serverless-workflow-diagram-editor/stories/features/ErrorPage.stories.tsx @@ -57,22 +57,20 @@ const meta = { control: { type: "select" }, options: ["light", "dark", "system"], description: - "The color mode to use for the error page. 'system' will use the user's system preference.", + "Override the global toolbar color mode for this story. Leave unset to use the toolbar value.", }, }, - args: { - colorMode: "system", + render: (args, { globals }) => { + const { title, message, snippet, colorMode } = args; + // Use story's colorMode arg if provided, otherwise use global toolbar value + const effectiveColorMode = colorMode || globals.colorMode || "system"; + + return ( + + + + ); }, - decorators: [ - (Story, context) => { - const { colorMode, ...storyArgs } = context.args; - return ( - - - - ); - }, - ], } satisfies Meta; export default meta; From ad5869c22de660b5fb711fbb5959b77bc17aaffc Mon Sep 17 00:00:00 2001 From: Cheryl Kong Date: Mon, 25 May 2026 10:37:12 +0100 Subject: [PATCH 05/12] feat: add Storybook README and introduction page Signed-off-by: Cheryl Kong --- .../stories/README.md | 78 +++++++++++++++++++ .../stories/introduction/Welcome.mdx | 15 ++++ 2 files changed, 93 insertions(+) create mode 100644 packages/serverless-workflow-diagram-editor/stories/README.md create mode 100644 packages/serverless-workflow-diagram-editor/stories/introduction/Welcome.mdx diff --git a/packages/serverless-workflow-diagram-editor/stories/README.md b/packages/serverless-workflow-diagram-editor/stories/README.md new file mode 100644 index 00000000..4fff709f --- /dev/null +++ b/packages/serverless-workflow-diagram-editor/stories/README.md @@ -0,0 +1,78 @@ +/\* + +- 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. + \*/ + +# Storybook Documentation + +This directory contains Storybook stories and documentation. + +## Structure + +- **`introduction/`** - Introductory documentation and welcome pages +- **`features/`** - Component features and interactive stories +- **`use-cases/`** - Real-world use case examples +- **`assets/`** - Images and media files used in stories + +## Running Storybook + +```bash +pnpm start +``` + +Storybook will launch on `http://localhost:6006` + +## Potential Features for Future Implementation + +The following features have been identified as potential additions for future iterations beyond the MVP. These are documented here as reference points for the team to revisit and plan future work. + +### 1. Undo & Redo + +- Implement undo/redo stack for editor actions +- Add keyboard shortcuts (Ctrl+Z / Ctrl+Y) +- Provide UI controls for undo/redo in toolbar + +### 2. Web App Demo + +- Create a full-screen web app demo of the editor +- Allow opening the editor in a new tab at full resolution +- Showcase complete workflow editing capabilities +- Useful for testing the entire app + +### 3. Reset + +- Add ability to reset diagram to initial state + +### 4. Download + +- Implement download functionality in toolbar + +### 5. Storybook Visual Tests + +- Set up visual regression testing in Storybook +- Compare snapshots of the latest UI with incoming PRs +- Requires human approval for UI changes to pass tests +- Useful for catching unintended visual changes + +### 6. Language Changer + +- Implement multi-language support +- Add language selector in top panel + +## Resources + +- [Storybook Documentation](https://storybook.js.org/docs/) +- [Serverless Workflow Specification](https://github.com/serverlessworkflow/specification) +- [TypeScript SDK](https://github.com/serverlessworkflow/sdk-typescript) diff --git a/packages/serverless-workflow-diagram-editor/stories/introduction/Welcome.mdx b/packages/serverless-workflow-diagram-editor/stories/introduction/Welcome.mdx new file mode 100644 index 00000000..dd2634b0 --- /dev/null +++ b/packages/serverless-workflow-diagram-editor/stories/introduction/Welcome.mdx @@ -0,0 +1,15 @@ +import { Meta } from "@storybook/addon-docs/blocks"; + + + +# Welcome to the Serverless Workflow Diagram Editor + +Content goes here - intro to the editor, relevant links to CNCF, TypeScript SDK, and related resources. + +Use this page to explain what the editor does, how to get started, and where to find more information. + +## Relevant Resources + +- [Cloud Native Computing Foundation (CNCF)](https://www.cncf.io) +- [Serverless Workflow Specification](https://github.com/serverlessworkflow/specification) +- [Serverless Workflow TypeScript SDK](https://github.com/serverlessworkflow/sdk-typescript) From a7d09e81570c12fcf3d8dbd06dfc7da2dfe8f6f7 Mon Sep 17 00:00:00 2001 From: Cheryl Kong Date: Mon, 25 May 2026 11:00:44 +0100 Subject: [PATCH 06/12] fix: correct formatting of license block in README.md Signed-off-by: Cheryl Kong --- .../stories/README.md | 31 +++++++++---------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/packages/serverless-workflow-diagram-editor/stories/README.md b/packages/serverless-workflow-diagram-editor/stories/README.md index 4fff709f..dc1bd9f9 100644 --- a/packages/serverless-workflow-diagram-editor/stories/README.md +++ b/packages/serverless-workflow-diagram-editor/stories/README.md @@ -1,19 +1,18 @@ -/\* - -- 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. - \*/ + # Storybook Documentation From 1c7662a6acf266342fcfb7df098a74edf7f5e822 Mon Sep 17 00:00:00 2001 From: Cheryl Kong Date: Tue, 26 May 2026 14:34:11 +0100 Subject: [PATCH 07/12] fix copilot complaints Signed-off-by: Cheryl Kong --- .../package.json | 2 + .../stories/introduction/Welcome.mdx | 2 + .../vitest.config.ts | 36 +++++++- pnpm-lock.yaml | 91 ++++++++++++++++--- pnpm-workspace.yaml | 2 + 5 files changed, 120 insertions(+), 13 deletions(-) diff --git a/packages/serverless-workflow-diagram-editor/package.json b/packages/serverless-workflow-diagram-editor/package.json index 184a523b..ffed920a 100644 --- a/packages/serverless-workflow-diagram-editor/package.json +++ b/packages/serverless-workflow-diagram-editor/package.json @@ -66,6 +66,8 @@ "@types/node": "catalog:", "@types/react": "catalog:", "@types/react-dom": "catalog:", + "@vitest/browser": "catalog:", + "@vitest/browser-playwright": "catalog:", "@vitest/coverage-v8": "catalog:", "@vitest/ui": "catalog:", "jsdom": "catalog:", diff --git a/packages/serverless-workflow-diagram-editor/stories/introduction/Welcome.mdx b/packages/serverless-workflow-diagram-editor/stories/introduction/Welcome.mdx index dd2634b0..a40088ca 100644 --- a/packages/serverless-workflow-diagram-editor/stories/introduction/Welcome.mdx +++ b/packages/serverless-workflow-diagram-editor/stories/introduction/Welcome.mdx @@ -4,6 +4,8 @@ import { Meta } from "@storybook/addon-docs/blocks"; # Welcome to the Serverless Workflow Diagram Editor +**TODO** + Content goes here - intro to the editor, relevant links to CNCF, TypeScript SDK, and related resources. Use this page to explain what the editor does, how to get started, and where to find more information. diff --git a/packages/serverless-workflow-diagram-editor/vitest.config.ts b/packages/serverless-workflow-diagram-editor/vitest.config.ts index be657588..004a5a5a 100644 --- a/packages/serverless-workflow-diagram-editor/vitest.config.ts +++ b/packages/serverless-workflow-diagram-editor/vitest.config.ts @@ -14,17 +14,49 @@ * limitations under the License. */ +import path from "node:path"; +import { fileURLToPath } from "node:url"; +import tailwindcss from "@tailwindcss/vite"; import { defineConfig } from "vitest/config"; +import { storybookTest } from "@storybook/addon-vitest/vitest-plugin"; +import { playwright } from "@vitest/browser-playwright"; + +const dirname = + typeof __dirname !== "undefined" ? __dirname : path.dirname(fileURLToPath(import.meta.url)); export default defineConfig({ + plugins: [tailwindcss()], resolve: { tsconfigPaths: true, }, test: { globals: true, environment: "jsdom", - setupFiles: ["./tests/setupTests.ts"], - css: false, + setupFiles: ["./tests/setupTests.ts", "./.storybook/vitest.setup.ts"], + css: true, include: ["tests/**/*.test.ts", "tests/**/*.test.tsx"], + projects: [ + { + extends: true, + plugins: [ + storybookTest({ + configDir: path.join(dirname, ".storybook"), + }), + ], + test: { + name: "storybook", + include: ["tests/**/*.story.test.ts", "tests/**/*.story.test.tsx"], + browser: { + enabled: true, + headless: true, + provider: playwright({}), + instances: [{ browser: "chromium" }], + }, + globals: true, + environment: "jsdom", + setupFiles: ["./tests/setupTests.ts", "./.storybook/vitest.setup.ts"], + }, + }, + ], }, }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3c404750..d04d832a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -54,6 +54,12 @@ catalogs: '@types/react-dom': specifier: ^19.2.3 version: 19.2.3 + '@vitest/browser': + specifier: ^4.1.7 + version: 4.1.7 + '@vitest/browser-playwright': + specifier: ^4.1.7 + version: 4.1.7 '@vitest/coverage-v8': specifier: ^4.1.7 version: 4.1.7 @@ -182,7 +188,7 @@ importers: version: 8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0) vitest: specifier: 'catalog:' - version: 4.1.7(@types/node@25.9.1)(@vitest/coverage-v8@4.1.7)(@vitest/ui@4.1.7)(jsdom@29.1.1)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)) + version: 4.1.7(@types/node@25.9.1)(@vitest/browser-playwright@4.1.7)(@vitest/coverage-v8@4.1.7)(@vitest/ui@4.1.7)(jsdom@29.1.1)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)) packages/serverless-workflow-diagram-editor: dependencies: @@ -225,7 +231,7 @@ importers: version: 10.4.0(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(esbuild@0.27.7)(storybook@10.4.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)) '@storybook/addon-vitest': specifier: 'catalog:' - version: 10.4.0(@vitest/runner@4.1.7)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vitest@4.1.7) + version: 10.4.0(@vitest/browser-playwright@4.1.7)(@vitest/browser@4.1.7)(@vitest/runner@4.1.7)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vitest@4.1.7) '@storybook/react-vite': specifier: 'catalog:' version: 10.4.0(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(esbuild@0.27.7)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)) @@ -256,9 +262,15 @@ importers: '@types/react-dom': specifier: 'catalog:' version: 19.2.3(@types/react@19.2.15) + '@vitest/browser': + specifier: 'catalog:' + version: 4.1.7(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.7) + '@vitest/browser-playwright': + specifier: 'catalog:' + version: 4.1.7(playwright@1.60.0)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.7) '@vitest/coverage-v8': specifier: 'catalog:' - version: 4.1.7(vitest@4.1.7) + version: 4.1.7(@vitest/browser@4.1.7)(vitest@4.1.7) '@vitest/ui': specifier: 'catalog:' version: 4.1.7(vitest@4.1.7) @@ -294,7 +306,7 @@ importers: version: 8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0) vitest: specifier: 'catalog:' - version: 4.1.7(@types/node@25.9.1)(@vitest/coverage-v8@4.1.7)(@vitest/ui@4.1.7)(jsdom@29.1.1)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)) + version: 4.1.7(@types/node@25.9.1)(@vitest/browser-playwright@4.1.7)(@vitest/coverage-v8@4.1.7)(@vitest/ui@4.1.7)(jsdom@29.1.1)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)) packages: @@ -391,6 +403,9 @@ packages: resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==} engines: {node: '>=18'} + '@blazediff/core@1.9.1': + resolution: {integrity: sha512-ehg3jIkYKulZh+8om/O25vkvSsXXwC+skXmyA87FFx6A/45eqOkZsBltMw/TVteb0mloiGT8oGRTcjRAz66zaA==} + '@bramus/specificity@2.4.2': resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==} hasBin: true @@ -2264,6 +2279,17 @@ packages: '@types/resolve@1.20.6': resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==} + '@vitest/browser-playwright@4.1.7': + resolution: {integrity: sha512-OlTlJej7YN6VwV7zJJoNeaCsctF+JXpzpZ4oBHUbrQFfIq+0KW2f07rprCLh9N/zRIZ0v4Mchn1QDDmWMUhPKw==} + peerDependencies: + playwright: '*' + vitest: 4.1.7 + + '@vitest/browser@4.1.7': + resolution: {integrity: sha512-N2JFGfXoEGVAut+kHeru9dD4BUMq/q5xDvBARNl0tUsly3m5KglLOu8VO/6MkDfOlgxXTycojkt6gBKsuyR+IQ==} + peerDependencies: + vitest: 4.1.7 + '@vitest/coverage-v8@4.1.7': resolution: {integrity: sha512-qsYPeXc5Q9dFLd1i8Ap+Bx8sQgcp+rFVQo4R0dDsWNBzl26ldVF1qOO+RL24K7FDrR6pA+50XedRLSoSG24bVQ==} peerDependencies: @@ -3017,6 +3043,10 @@ packages: engines: {node: '>=18'} hasBin: true + pngjs@7.0.0: + resolution: {integrity: sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==} + engines: {node: '>=14.19.0'} + postcss@8.5.15: resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==} engines: {node: ^10 || ^12 || >=14} @@ -3687,6 +3717,8 @@ snapshots: '@bcoe/v8-coverage@1.0.2': {} + '@blazediff/core@1.9.1': {} + '@bramus/specificity@2.4.2': dependencies: css-tree: 3.2.1 @@ -4990,14 +5022,16 @@ snapshots: - vite - webpack - '@storybook/addon-vitest@10.4.0(@vitest/runner@4.1.7)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vitest@4.1.7)': + '@storybook/addon-vitest@10.4.0(@vitest/browser-playwright@4.1.7)(@vitest/browser@4.1.7)(@vitest/runner@4.1.7)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vitest@4.1.7)': dependencies: '@storybook/global': 5.0.0 '@storybook/icons': 2.0.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6) storybook: 10.4.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) optionalDependencies: + '@vitest/browser': 4.1.7(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.7) + '@vitest/browser-playwright': 4.1.7(playwright@1.60.0)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.7) '@vitest/runner': 4.1.7 - vitest: 4.1.7(@types/node@25.9.1)(@vitest/coverage-v8@4.1.7)(@vitest/ui@4.1.7)(jsdom@29.1.1)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)) + vitest: 4.1.7(@types/node@25.9.1)(@vitest/browser-playwright@4.1.7)(@vitest/coverage-v8@4.1.7)(@vitest/ui@4.1.7)(jsdom@29.1.1)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)) transitivePeerDependencies: - react - react-dom @@ -5257,7 +5291,37 @@ snapshots: '@types/resolve@1.20.6': {} - '@vitest/coverage-v8@4.1.7(vitest@4.1.7)': + '@vitest/browser-playwright@4.1.7(playwright@1.60.0)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.7)': + dependencies: + '@vitest/browser': 4.1.7(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.7) + '@vitest/mocker': 4.1.7(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)) + playwright: 1.60.0 + tinyrainbow: 3.1.0 + vitest: 4.1.7(@types/node@25.9.1)(@vitest/browser-playwright@4.1.7)(@vitest/coverage-v8@4.1.7)(@vitest/ui@4.1.7)(jsdom@29.1.1)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)) + transitivePeerDependencies: + - bufferutil + - msw + - utf-8-validate + - vite + + '@vitest/browser@4.1.7(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.7)': + dependencies: + '@blazediff/core': 1.9.1 + '@vitest/mocker': 4.1.7(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)) + '@vitest/utils': 4.1.7 + magic-string: 0.30.21 + pngjs: 7.0.0 + sirv: 3.0.2 + tinyrainbow: 3.1.0 + vitest: 4.1.7(@types/node@25.9.1)(@vitest/browser-playwright@4.1.7)(@vitest/coverage-v8@4.1.7)(@vitest/ui@4.1.7)(jsdom@29.1.1)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)) + ws: 8.20.1 + transitivePeerDependencies: + - bufferutil + - msw + - utf-8-validate + - vite + + '@vitest/coverage-v8@4.1.7(@vitest/browser@4.1.7)(vitest@4.1.7)': dependencies: '@bcoe/v8-coverage': 1.0.2 '@vitest/utils': 4.1.7 @@ -5269,7 +5333,9 @@ snapshots: obug: 2.1.1 std-env: 4.1.0 tinyrainbow: 3.1.0 - vitest: 4.1.7(@types/node@25.9.1)(@vitest/coverage-v8@4.1.7)(@vitest/ui@4.1.7)(jsdom@29.1.1)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)) + vitest: 4.1.7(@types/node@25.9.1)(@vitest/browser-playwright@4.1.7)(@vitest/coverage-v8@4.1.7)(@vitest/ui@4.1.7)(jsdom@29.1.1)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)) + optionalDependencies: + '@vitest/browser': 4.1.7(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.7) '@vitest/expect@3.2.4': dependencies: @@ -5331,7 +5397,7 @@ snapshots: sirv: 3.0.2 tinyglobby: 0.2.16 tinyrainbow: 3.1.0 - vitest: 4.1.7(@types/node@25.9.1)(@vitest/coverage-v8@4.1.7)(@vitest/ui@4.1.7)(jsdom@29.1.1)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)) + vitest: 4.1.7(@types/node@25.9.1)(@vitest/browser-playwright@4.1.7)(@vitest/coverage-v8@4.1.7)(@vitest/ui@4.1.7)(jsdom@29.1.1)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)) '@vitest/utils@3.2.4': dependencies: @@ -6027,6 +6093,8 @@ snapshots: optionalDependencies: fsevents: 2.3.2 + pngjs@7.0.0: {} + postcss@8.5.15: dependencies: nanoid: 3.3.12 @@ -6453,7 +6521,7 @@ snapshots: jiti: 2.7.0 yaml: 2.9.0 - vitest@4.1.7(@types/node@25.9.1)(@vitest/coverage-v8@4.1.7)(@vitest/ui@4.1.7)(jsdom@29.1.1)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)): + vitest@4.1.7(@types/node@25.9.1)(@vitest/browser-playwright@4.1.7)(@vitest/coverage-v8@4.1.7)(@vitest/ui@4.1.7)(jsdom@29.1.1)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)): dependencies: '@vitest/expect': 4.1.7 '@vitest/mocker': 4.1.7(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0)) @@ -6477,7 +6545,8 @@ snapshots: why-is-node-running: 2.3.0 optionalDependencies: '@types/node': 25.9.1 - '@vitest/coverage-v8': 4.1.7(vitest@4.1.7) + '@vitest/browser-playwright': 4.1.7(playwright@1.60.0)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.7) + '@vitest/coverage-v8': 4.1.7(@vitest/browser@4.1.7)(vitest@4.1.7) '@vitest/ui': 4.1.7(vitest@4.1.7) jsdom: 29.1.1 transitivePeerDependencies: diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 85aea74f..b2c5accd 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -19,6 +19,8 @@ catalog: "@types/react-dom": ^19.2.3 "@vitest/coverage-v8": ^4.1.7 "@vitest/ui": ^4.1.7 + "@vitest/browser": ^4.1.7 + "@vitest/browser-playwright": ^4.1.7 "@xyflow/react": ^12.10.2 class-variance-authority: ^0.7.1 clsx: ^2.1.1 From cb49565a1a0649937b4c5a6d1fbe0c39ef95742f Mon Sep 17 00:00:00 2001 From: Cheryl Kong Date: Tue, 26 May 2026 14:44:02 +0100 Subject: [PATCH 08/12] fix: add license header to Welcome.mdx Signed-off-by: Cheryl Kong --- .../stories/introduction/Welcome.mdx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/serverless-workflow-diagram-editor/stories/introduction/Welcome.mdx b/packages/serverless-workflow-diagram-editor/stories/introduction/Welcome.mdx index a40088ca..47295403 100644 --- a/packages/serverless-workflow-diagram-editor/stories/introduction/Welcome.mdx +++ b/packages/serverless-workflow-diagram-editor/stories/introduction/Welcome.mdx @@ -1,3 +1,19 @@ +{/* + * 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"; From ee2fbfc24345404fe60bbf41fc0872c75a24bfcc Mon Sep 17 00:00:00 2001 From: Cheryl Kong Date: Tue, 26 May 2026 16:11:28 +0100 Subject: [PATCH 09/12] refactor: move error boundary story to features dir and add color mode support Signed-off-by: Cheryl Kong --- .../DiagramEditorErrorBoundary.stories.tsx | 29 +++++++++++++++++-- .../vitest.config.ts | 1 - 2 files changed, 26 insertions(+), 4 deletions(-) rename packages/serverless-workflow-diagram-editor/stories/{ => features}/DiagramEditorErrorBoundary.stories.tsx (62%) diff --git a/packages/serverless-workflow-diagram-editor/stories/DiagramEditorErrorBoundary.stories.tsx b/packages/serverless-workflow-diagram-editor/stories/features/DiagramEditorErrorBoundary.stories.tsx similarity index 62% rename from packages/serverless-workflow-diagram-editor/stories/DiagramEditorErrorBoundary.stories.tsx rename to packages/serverless-workflow-diagram-editor/stories/features/DiagramEditorErrorBoundary.stories.tsx index 0e0343f0..d59ab024 100644 --- a/packages/serverless-workflow-diagram-editor/stories/DiagramEditorErrorBoundary.stories.tsx +++ b/packages/serverless-workflow-diagram-editor/stories/features/DiagramEditorErrorBoundary.stories.tsx @@ -15,8 +15,9 @@ */ import type { Meta, StoryObj } from "@storybook/react-vite"; -import { DiagramEditorErrorBoundary } from "../src/diagram-editor/error-pages/DiagramEditorErrorBoundary"; -import { ColorMode } from "../src/types/colorMode"; +import { DiagramEditorErrorBoundary } from "../../src/diagram-editor/error-pages/DiagramEditorErrorBoundary"; +import { ColorMode } from "../../src/types/colorMode"; +import { useResolvedColorMode } from "../../src/hooks/useResolvedColorMode"; type DiagramEditorErrorBoundaryProps = { title?: string; @@ -33,12 +34,34 @@ const ThrowError = ({ message = "Test error message" }: { message?: string }) => }; const meta = { - title: "Example/DiagramEditorErrorBoundary", + title: "Features/DiagramEditorErrorBoundary", component: DiagramEditorErrorBoundary, tags: ["autodocs"], parameters: { layout: "fullscreen", }, + render: (args, { globals }) => { + const colorMode = args.colorMode ?? globals.colorMode ?? "system"; + const resolvedColorMode = useResolvedColorMode(colorMode); + + return ( +
+ + {args.children} + +
+ ); + }, args: {}, } satisfies Meta; diff --git a/packages/serverless-workflow-diagram-editor/vitest.config.ts b/packages/serverless-workflow-diagram-editor/vitest.config.ts index 004a5a5a..b5cc3b6e 100644 --- a/packages/serverless-workflow-diagram-editor/vitest.config.ts +++ b/packages/serverless-workflow-diagram-editor/vitest.config.ts @@ -45,7 +45,6 @@ export default defineConfig({ ], test: { name: "storybook", - include: ["tests/**/*.story.test.ts", "tests/**/*.story.test.tsx"], browser: { enabled: true, headless: true, From 9e398c7cefe1d6d7942a2c2afe7ac100f40943e0 Mon Sep 17 00:00:00 2001 From: Cheryl Kong Date: Wed, 27 May 2026 15:02:15 +0100 Subject: [PATCH 10/12] docs: add changeset Signed-off-by: Cheryl Kong --- .changeset/grumpy-buttons-cheat.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 .changeset/grumpy-buttons-cheat.md diff --git a/.changeset/grumpy-buttons-cheat.md b/.changeset/grumpy-buttons-cheat.md new file mode 100644 index 00000000..5b373425 --- /dev/null +++ b/.changeset/grumpy-buttons-cheat.md @@ -0,0 +1,11 @@ +--- +"@serverlessworkflow/diagram-editor": patch +--- + +This PR implements the following changes to Storybook: +Colour theme selector (light and dark mode trigger) +Folder restructuring +Set up Storybook tests +Collapsible sections: Introduction, Use Cases, Features +Remove boilerplate code +Document features research for potential future implementation From a4de68f9e7f128f9eafa27419b1b7c3e2b66e90e Mon Sep 17 00:00:00 2001 From: cheryl7114 <157477132+cheryl7114@users.noreply.github.com> Date: Wed, 27 May 2026 15:41:40 +0100 Subject: [PATCH 11/12] Update .changeset/grumpy-buttons-cheat.md Co-authored-by: Fabrizio Antonangeli Signed-off-by: Cheryl Kong --- .changeset/grumpy-buttons-cheat.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/grumpy-buttons-cheat.md b/.changeset/grumpy-buttons-cheat.md index 5b373425..5b872de7 100644 --- a/.changeset/grumpy-buttons-cheat.md +++ b/.changeset/grumpy-buttons-cheat.md @@ -1,5 +1,5 @@ --- -"@serverlessworkflow/diagram-editor": patch +"@serverlessworkflow/diagram-editor": minor --- This PR implements the following changes to Storybook: From e86b49f16b377a3b9d7f2162e8d0cc0ddfbcc33a Mon Sep 17 00:00:00 2001 From: Cheryl Kong Date: Wed, 27 May 2026 15:44:06 +0100 Subject: [PATCH 12/12] docs: update changeset description Signed-off-by: Cheryl Kong --- .changeset/grumpy-buttons-cheat.md | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/.changeset/grumpy-buttons-cheat.md b/.changeset/grumpy-buttons-cheat.md index 5b872de7..3023748f 100644 --- a/.changeset/grumpy-buttons-cheat.md +++ b/.changeset/grumpy-buttons-cheat.md @@ -2,10 +2,4 @@ "@serverlessworkflow/diagram-editor": minor --- -This PR implements the following changes to Storybook: -Colour theme selector (light and dark mode trigger) -Folder restructuring -Set up Storybook tests -Collapsible sections: Introduction, Use Cases, Features -Remove boilerplate code -Document features research for potential future implementation +Implemented Storybook enhancements including color theme selector, folder restructuring, test setup, collapsible sections, and removed boilerplate code.