fix #127 - feat: Implement Storybook structure and styling by cheryl7114 · Pull Request #151 · serverlessworkflow/editor

cheryl7114 · 2026-05-19T10:02:47Z

Closes #127

Description
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

Copilot

Pull request overview

This PR streamlines the serverless-workflow-diagram-editor package’s Storybook setup by removing the default Storybook “Example” boilerplate components/docs and aligning the remaining stories under a Features/* hierarchy with corrected source import paths.

Changes:

Removed Storybook starter boilerplate (Button/Header/Page components, CSS, and Configure docs MDX).
Reorganized remaining stories under Features/* titles for clearer navigation.
Fixed story imports to reference the package src/ from the stories/features/ directory (e.g., ../../src/...).

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/serverless-workflow-diagram-editor/stories/Page.tsx	Removed Storybook starter “Page” boilerplate component.
packages/serverless-workflow-diagram-editor/stories/Page.stories.ts	Removed Storybook starter “Page” story (incl. interaction test).
packages/serverless-workflow-diagram-editor/stories/page.css	Removed CSS used only by the deleted starter “Page”.
packages/serverless-workflow-diagram-editor/stories/Header.tsx	Removed Storybook starter “Header” boilerplate component.
packages/serverless-workflow-diagram-editor/stories/Header.stories.ts	Removed Storybook starter “Header” story.
packages/serverless-workflow-diagram-editor/stories/header.css	Removed CSS used only by the deleted starter “Header”.
packages/serverless-workflow-diagram-editor/stories/Configure.mdx	Removed Storybook starter Configure docs page.
packages/serverless-workflow-diagram-editor/stories/Button.tsx	Removed Storybook starter “Button” boilerplate component.
packages/serverless-workflow-diagram-editor/stories/Button.stories.ts	Removed Storybook starter “Button” story.
packages/serverless-workflow-diagram-editor/stories/button.css	Removed CSS used only by the deleted starter “Button”.
packages/serverless-workflow-diagram-editor/stories/features/ErrorPage.stories.tsx	Updated imports to `../../src/...` and renamed story title to `Features/ErrorPage`.
packages/serverless-workflow-diagram-editor/stories/features/DiagramEditorDragNDrop.tsx	Updated import path to `../../src/diagram-editor/DiagramEditor`.
packages/serverless-workflow-diagram-editor/stories/features/DiagramEditorDragNDrop.stories.ts	Renamed story title to `Features/Diagram-Editor-Drag-N-Drop`.
packages/serverless-workflow-diagram-editor/stories/features/DiagramEditor.tsx	Updated import path to `../../src/diagram-editor/DiagramEditor`.
packages/serverless-workflow-diagram-editor/stories/features/DiagramEditor.stories.ts	Renamed story title to `Features/Diagram-Editor`.

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

Copilot

Pull request overview

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

Copilot

Pull request overview

Copilot reviewed 24 out of 25 changed files in this pull request and generated 8 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Copilot

Pull request overview

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

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

fantonangeli

LGTM, Just 2 small suggestions
Thanks @cheryl7114

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

netlify · 2026-05-26T11:50:05Z

✅ Deploy Preview for swf-editor ready!

Name	Link
🔨 Latest commit	`9909c31`
🔍 Latest deploy log	https://app.netlify.com/projects/swf-editor/deploys/6a17065ca48b780007fffa22
😎 Deploy Preview	https://deploy-preview-151--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.

fantonangeli · 2026-05-26T11:55:40Z

@ricardozanini our Netlify configuration is working 🚀

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

…e support Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

kumaradityaraj

LGTM

ricardozanini · 2026-05-27T13:44:04Z

@cheryl7114 can you check the license headers?

fantonangeli · 2026-05-27T13:47:22Z

@cheryl7114 can you check the license headers?

@ricardozanini I think it's a cache issue, trying to save an empty node_modules directory in the cache.
With the next commit it should be green but I'm opening an issue now so I can fix it

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

handreyrc

@cheryl7114,
LGTM, thanks for your work!

fantonangeli

LGTM, just a small suggestion for the changeset

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

Co-authored-by: Fabrizio Antonangeli <fabrizio.antonangeli@gmail.com> Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

cheryl7114 · 2026-05-27T15:06:45Z

@ricardozanini this PR looks ready to be merged if you don't have any other suggestions ?

Copilot AI review requested due to automatic review settings May 19, 2026 10:02

Copilot started reviewing on behalf of cheryl7114 May 19, 2026 10:03 View session

Copilot AI reviewed May 19, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings May 21, 2026 15:07

Copilot AI reviewed May 21, 2026

View reviewed changes

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

Copilot AI review requested due to automatic review settings May 25, 2026 09:37

Copilot AI reviewed May 25, 2026

View reviewed changes

cheryl7114 changed the title ~~Refactor Storybook structure and remove boilerplate code~~ fix #127 - feat: Implement Storybook structure and styling May 25, 2026

Copilot AI review requested due to automatic review settings May 25, 2026 10:18

Copilot AI reviewed May 25, 2026

View reviewed changes

handreyrc requested review from fantonangeli, handreyrc and kumaradityaraj May 25, 2026 20:33

fantonangeli reviewed May 26, 2026

View reviewed changes

Comment thread packages/serverless-workflow-diagram-editor/package.json Outdated

Comment thread packages/serverless-workflow-diagram-editor/package.json Outdated

Cheryl Kong added 6 commits May 26, 2026 12:40

chore: remove storybook boilerplate code

abccdf2

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

refactor: move editor stories into Features directory

b00cd32

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

fix: update story file paths in test imports

bba8e4b

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

feat: add color mode toolbar

d20ea05

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

feat: add Storybook README and introduction page

ad5869c

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

fix: correct formatting of license block in README.md

a7d09e8

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

cheryl7114 force-pushed the storybook-styling-127 branch from 36b47dd to a7d09e8 Compare May 26, 2026 11:47

fix copilot complaints

1c7662a

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

Copilot AI review requested due to automatic review settings May 26, 2026 13:34

Copilot AI reviewed May 26, 2026

View reviewed changes

fix: add license header to Welcome.mdx

cb49565

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

Copilot AI review requested due to automatic review settings May 26, 2026 13:44

Copilot AI reviewed May 26, 2026

View reviewed changes

refactor: move error boundary story to features dir and add color mod…

ee2fbfc

…e support Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

Copilot AI review requested due to automatic review settings May 26, 2026 15:11

Copilot AI reviewed May 26, 2026

View reviewed changes

kumaradityaraj approved these changes May 27, 2026

View reviewed changes

cheryl7114 requested a review from fantonangeli May 27, 2026 08:22

fantonangeli mentioned this pull request May 27, 2026

bug: license header CI is failing randomly #158

Open

Copilot AI review requested due to automatic review settings May 27, 2026 14:02

Copilot AI reviewed May 27, 2026

View reviewed changes

handreyrc approved these changes May 27, 2026

View reviewed changes

fantonangeli suggested changes May 27, 2026

View reviewed changes

Comment thread .changeset/grumpy-buttons-cheat.md Outdated

Comment thread .changeset/grumpy-buttons-cheat.md

Copilot AI review requested due to automatic review settings May 27, 2026 14:41

Copilot AI reviewed May 27, 2026

View reviewed changes

fantonangeli approved these changes May 27, 2026

View reviewed changes

Cheryl Kong and others added 3 commits May 27, 2026 15:55

docs: add changeset

9e398c7

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

Update .changeset/grumpy-buttons-cheat.md

a4de68f

Co-authored-by: Fabrizio Antonangeli <fabrizio.antonangeli@gmail.com> Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

docs: update changeset description

e86b49f

Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

Copilot AI review requested due to automatic review settings May 27, 2026 14:56

cheryl7114 force-pushed the storybook-styling-127 branch from 96668ae to e86b49f Compare May 27, 2026 14:56

Copilot AI reviewed May 27, 2026

View reviewed changes

Merge branch 'main' into storybook-styling-127

9909c31

cheryl7114 requested a review from ricardozanini May 27, 2026 15:05

ricardozanini merged commit 88f7131 into serverlessworkflow:main May 27, 2026
12 checks passed

Conversation

cheryl7114 commented May 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fantonangeli left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

netlify Bot commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for swf-editor ready!

Uh oh!

fantonangeli commented May 26, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

kumaradityaraj left a comment

Choose a reason for hiding this comment

Uh oh!

ricardozanini commented May 27, 2026

Uh oh!

fantonangeli commented May 27, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

handreyrc left a comment

Choose a reason for hiding this comment

Uh oh!

fantonangeli left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

cheryl7114 commented May 27, 2026

Uh oh!

cheryl7114 commented May 19, 2026 •

edited

Loading

netlify Bot commented May 26, 2026 •

edited

Loading