[FF-50] Picasso Storybook docs deployment #4814

vedrani · 2025-09-04T11:39:07Z

Description

Deploy Storybook docs to GH pages:

support multiple PR deployments
support production deployment
delete pr deployment after pr closed

How to test

Temploy
FIXME: Add the steps describing how to verify your changes

Screenshots

Before.	After.
Insert screenshots or screen recordings	Insert screenshots or screen recordings

Development checks

Breaking change

codemod is created and showcased in the changeset
test alpha package of Picasso in StaffPortal

All development checks should be done and set checked to pass the
GitHub Bot: TODOLess action

PR commands

List of available commands:

@toptal-bot run package:alpha-release - Release alpha version
@toptal-anvil ping reviewers - Ping for reviews

PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

You have no extra requests.
You have optional requests.
1. Add nit: to your comment. (ex. nit: I'd rename this variable from makeCircle to getCircle)

When to request changes? ❌

You are not OK with merging this PR because

Something is broken after the changes.
Acceptance criteria is not reached.
Code is dirty.

When to comment (neither ✅ nor ❌)

You want your comments to be addressed before merging this PR in cases like:

There are leftovers like unnecessary logs, comments, etc.
You have an opinionated comment regarding the code that requires a discussion.
You have questions.

How to handle the comments?

An owner of a comment is the only one who can resolve it.
An owner of a comment must resolve it when it's addressed.
A PR owner must reply with ✅ when a comment is addressed.

changeset-bot · 2025-09-04T11:39:11Z

⚠️ No Changeset found

Latest commit: 92ca545

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2025-09-04T12:53:20Z

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

📍 Preview URL: https://toptal.github.io/picasso/pr-4814/

This preview is updated automatically when you push changes to this PR.

denieler · 2025-09-04T14:01:52Z

.github/workflows/ci.yaml

+  deploy-storybook-preview:
    if: ${{ github.event.pull_request.head.ref != 'changeset-release/master' }}
-    name: Deploy Picasso docs
+    name: Deploy Storybook Preview


I'd suggest not to change them, as they can be mentioned in some Grafana dashboards or some reports

denieler · 2025-09-04T14:04:55Z

.github/workflows/ci.yaml

+              body: '📖 **Storybook Preview**\n\n🚀 Your Storybook preview is ready: **[View Storybook](' + deployUrl + ')**\n\n📍 Preview URL: `' + deployUrl + '`\n\nThis preview is updated automatically when you push changes to this PR.'
+            });
+
+  cleanup-storybook-preview:


why we would even bother removing it if we use gh pages? 🤔

Because we need to update whole directory each time, if we will not clean it checkout and update time will grow. One thing I need to check about concurrency between parallel PRs and master when playing with gh-pages

got it 🤔 yeah, but this doesn't look reliable. Maybe we can have a separate workflow, that will be triggered on CRON? because this one can fail or something

Yeah, need to test.

Regarding concurrency I'm will add concurrent group.

no, I mean, imagine you close the PR and this workflow failed by some reason, timeout, ex. So PR temploy will be forever in the repo

That could happen indeed, but let's see maybe it something we can fix down the road. For me right now what is important is multiple instances of docs (release, temploy) and concurrency.

this can be solved by separate workflow run on cron schedule ☝️

Done, separate workflow that reacts on: pr closed, cron job and can also be manually triggered.

denieler · 2025-09-04T14:06:42Z

.github/workflows/release.yml

+          # Backup PR preview directories
+          mkdir -p pr-backups
+          find gh-pages-content -maxdepth 1 -name "pr-*" -type d -exec cp -r {} pr-backups/ \; 2>/dev/null || true


can we have 2 separate directories: for PRs and for master? or we have to use only one?

Seems we can have only one but I can check would it simplify to have one more level with 2 directories

Simplified by introducing /prs directory so preview url will be prs/123

github-actions · 2025-09-04T15:17:44Z

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

📍 Preview URL: https://toptal.github.io/picasso/pr-4814/

This preview is updated automatically when you push changes to this PR.

github-actions · 2025-09-05T09:26:23Z

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

📍 Preview URL: https://toptal.github.io/picasso/previews/pr-4814/

This preview is updated automatically when you push changes to this PR.

.github/workflows/cleanup-previews.yml

denieler

Looking good 👍

github-actions · 2025-09-05T09:53:37Z

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

📍 Preview URL: https://toptal.github.io/picasso/prs/4814/

This preview is updated automatically when you push changes to this PR.

Initial version

4740fd4

vedrani requested a review from a team as a code owner September 4, 2025 11:39

vedrani added 2 commits September 4, 2025 14:08

Initial version

57d0389

Initial version

dd82885

denieler reviewed Sep 4, 2025

View reviewed changes

vedrani changed the title ~~[PF-] Picasso Storybook docs deployment~~ [FF-50] Picasso Storybook docs deployment Sep 4, 2025

Initial version

f585d6f

vedrani self-assigned this Sep 5, 2025

vedrani added 2 commits September 5, 2025 10:54

Initial version

a2b7e23

Initial version

188f88e

vedrani added 2 commits September 5, 2025 11:27

Initial version

5d7d63d

Initial version

92ca545

vedrani requested a review from denieler September 5, 2025 09:42

denieler reviewed Sep 5, 2025

View reviewed changes

.github/workflows/cleanup-previews.yml Show resolved Hide resolved

denieler approved these changes Sep 5, 2025

View reviewed changes

[FF-50] Picasso Storybook docs deployment #4814

Are you sure you want to change the base?

[FF-50] Picasso Storybook docs deployment #4814

Uh oh!

Conversation

vedrani commented Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How to test

Screenshots

Development checks

When to approve? ✅

When to request changes? ❌

When to comment (neither ✅ nor ❌)

How to handle the comments?

Uh oh!

changeset-bot bot commented Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Sep 4, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 4, 2025

Uh oh!

github-actions bot commented Sep 5, 2025

Uh oh!

Uh oh!

denieler left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vedrani commented Sep 4, 2025 •

edited

Loading

changeset-bot bot commented Sep 4, 2025 •

edited

Loading