Skip to content

chore: adding github workflow to publish storybook react #610

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 5, 2025

Conversation

georgewrmarshall
Copy link
Contributor

@georgewrmarshall georgewrmarshall commented Apr 27, 2025

Description

This PR adds GitHub Actions workflow to automatically build and deploy the Storybook React to GitHub Pages whenever changes are merged to the main branch.

Related issues

Fixes: #3

Manual testing steps

The action has been successfully tested(again) in a fork environment. You can see the working deployment at georgewrmarshall.github.io/metamask-design-system

  1. Merge this PR to main branch
  2. Wait for the GitHub Action to complete (~2-3 minutes)
  3. Visit https://metamask.github.io/metamask-design-system/ to verify Storybook is deployed

Screenshots/Recordings

Before

N/A - No previous Storybook deployment

After

  • Successfully deployed Storybook: Fork Demo
  • GitHub Action running successfully in fork environment
after480.mov

Technical Implementation Details

  • Workflow uses workspace-aware commands to build dependencies
  • Correctly handles monorepo structure with appropriate working directory settings
  • Uses relative paths for GitHub Pages deployment to ensure compatibility
  • Maintains proper build order: tokens → tailwind preset → react components → storybook

Pre-merge author checklist

  • I've followed MetaMask Contributor Docs
  • I've completed the PR template to the best of my ability
  • I've included tests if applicable
  • I've documented my code using JSDoc format if applicable
  • I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

@georgewrmarshall
Copy link
Contributor Author

georgewrmarshall commented Apr 29, 2025

After further inspection I'm not sure this action will work the same as it did in the design tokens repo. Will try forking the repo

Update: I forked our repo and the action is now working you can see the deployed fork at georgewrmarshall.github.io/metamask-design-system

@georgewrmarshall georgewrmarshall force-pushed the fix/3/storybook-react-hosted branch from 47bc524 to 8c3ecfe Compare April 30, 2025 04:43
@georgewrmarshall georgewrmarshall force-pushed the fix/3/storybook-react-hosted branch from 8c3ecfe to 500ce32 Compare April 30, 2025 04:46
@georgewrmarshall georgewrmarshall marked this pull request as ready for review April 30, 2025 04:59
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner April 30, 2025 04:59
Copy link

@itsyoboieltr itsyoboieltr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would remove cache-node-modules and try to use the official github action for deployment if possible.

@georgewrmarshall georgewrmarshall requested a review from mcmire May 2, 2025 23:22
@georgewrmarshall georgewrmarshall merged commit bd1d2aa into main May 5, 2025
36 checks passed
@georgewrmarshall georgewrmarshall deleted the fix/3/storybook-react-hosted branch May 5, 2025 22:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Host storybook-react for metamask-design-system on GitHub Pages with Auto-Update on Merges to main
4 participants