fix #30 - feat: Add GitHub Action to publish Storybook preview for every PR via Netlify

[fantonangeli]

Closes #30

Description

Add a GitHub Actions workflow that publishes a live Storybook preview for every pull request using Netlify.

The goal is that each PR gets a preview URL where reviewers and contributors can open and interact with the Storybook build for that branch, without needing to run the project locally.

Motivation

Reviewing UI and UX changes is much easier when a live preview is available directly from the PR.

This would help us:

• let reviewers test Storybook examples from any PR
• make component and editor UX changes easier to validate
• reduce the need for local checkout just to review visual changes
• give contributors a shared preview environment during implementation

Proposed Implementation

No response

Definition of Done

• Implementation: Fully implemented according to the Serverless Workflow spec.
• Unit Tests: Comprehensive unit tests are included and passing.
• Integration Tests: Verified within the monorepo and target environments (Web/VS Code).
• Documentation: Updated README.md, ADRs, or official docs.
• Performance: No significant regression in editor responsiveness.
• Accessibility: UI changes comply with accessibility standards.

Preview PR from my fork:

I created 2 test PR against my fork to show what is the final result of this configuration:

• This is a test PR without any changes in the editor package to preview, and the configuration skips the preview:
  Issue 30 no editor pkg changes fantonangeli/serverlessworkflow-editor#3
• This is a test PR with a small change in the editor package to preview, and the configuration show the preview link in PR comment:
  Issue 30 Small editor change fantonangeli/serverlessworkflow-editor#4

[Copilot]

Pull request overview

This PR aims to provide per-PR Storybook previews, and currently introduces a Netlify-based build/publish configuration for the diagram editor’s Storybook along with a small tooling-doc update.

Changes:

• Update root README prerequisites to reference Node.js 24.
• Add netlify.toml to build and publish @serverlessworkflow/diagram-editor Storybook output (and skip builds when the package isn’t affected vs origin/main).

Reviewed changes

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

File	Description
README.md	Updates local prerequisites (Node version).
netlify.toml	Adds Netlify configuration to build/publish Storybook and conditionally skip builds based on package changes.

---

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

[Copilot]

Pull request overview

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

---

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

[Copilot]

Pull request overview

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

---

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

[Copilot]

The ignore check hard-codes main (git fetch ... origin main and ...[origin/main]). This will behave incorrectly if the default branch changes or if a PR targets a non-main base branch. Consider deriving the base ref dynamically (e.g., from Netlify/GitHub-provided PR base branch env) so preview builds are skipped/run against the actual PR base.

Suggested change

	git fetch --no-tags --depth=1 origin main:refs/remotes/origin/main
	npm i -g "pnpm@$PNPM_VERSION"
	! pnpm -F '...[origin/main]' -rc exec 'echo "$PNPM_PACKAGE_NAME"' | grep -Fqx "$PREVIEW_PACKAGE_NAME"
	BASE_REF="${GITHUB_BASE_REF:-$(git symbolic-ref --quiet --short refs/remotes/origin/HEAD | sed 's#^origin/##')}"
	git fetch --no-tags --depth=1 origin "$BASE_REF:refs/remotes/origin/$BASE_REF"
	npm i -g "pnpm@$PNPM_VERSION"
	! pnpm -F "...[origin/$BASE_REF]" -rc exec 'echo "$PNPM_PACKAGE_NAME"' | grep -Fqx "$PREVIEW_PACKAGE_NAME"

[fantonangeli]

I don't want to introduce too much logic, deriving the branch ref and risking to have bugs with:

BASE_REF="${GITHUB_BASE_REF:-$(git symbolic-ref --quiet --short refs/remotes/origin/HEAD | sed 's#^origin/##')}"

[ricardozanini]

Amazing!!