feat: added storybook configruation for publishing on chromatic #3548
Conversation
|
Warning Rate limit exceeded@devilkiller-ag has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 25 minutes and 47 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
WalkthroughA new GitHub Actions workflow for Chromatic has been introduced to automate the publishing and testing of Storybook components. The workflow is configured to run on Ubuntu, set up Node.js version 20, and integrate Chromatic for visual testing and deployment. Simultaneously, the Changes
Sequence DiagramsequenceDiagram
participant GH as GitHub Actions
participant Node as Node.js
participant Chromatic as Chromatic Service
GH->>Node: Checkout repository
Node->>Node: Setup Node.js v20
Node->>Chromatic: Run Chromatic publish
Chromatic-->>GH: Publish & Test Results
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
devilkiller-ag
requested review from
derberg,
akshatnema,
magicmatatjahu,
anshgoyalevil,
Mayaleeeee and
asyncapi-bot-eve
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
devilkiller-ag
added
the
gsoc
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #3548 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 20 20
Lines 732 732
=========================================
Hits 732 732 ☔ View full report in Codecov by Sentry. |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-3548--asyncapi-website.netlify.app/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
.github/workflows/chromatic.yml (1)
5-5: Consider multiple triggers.Currently, the workflow triggers only when a push event occurs. If you also want visual regression tests on pull requests (which is common for Chromatic), consider adding
pull_requestto triggers.on: - push + push: + branches: [ main ] + pull_request: + branches: [ main ]package.json (1)
145-145: Dependency pinned to a reasonable major version.Using
"^11.22.0"for Chromatic ensures broad compatibility. Remember to watch for any new major versions or security advisories.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
.github/workflows/chromatic.yml(1 hunks)package.json(4 hunks)
⏰ Context from checks skipped due to timeout of 180000ms (1)
- GitHub Check: Lighthouse CI
🔇 Additional comments (4)
.github/workflows/chromatic.yml (2)
1-2: Well-defined workflow name.Naming the workflow as Chromatic Publish is clean and descriptive, making it easy for other contributors to identify its purpose in the repository.
23-28: Ensure secrets are configured.Please verify that the
CHROMATIC_PROJECT_TOKENsecret is set in the repo settings. Otherwise, this step will fail at runtime.package.json (2)
28-29: Chromatic script usage is clear.Using
--build-script-name=build:storybookensures Chromatic is leveraging the designated Storybook build. This is a straightforward and effective approach.
42-45: Author field format improved.Splitting the author details into an object is a good move for consistency and clarity, especially if you plan to parse or reuse this data programmatically.
| name: 'Chromatic Publish' | ||
|
|
||
| # Event for the workflow | ||
| on: push |
There was a problem hiding this comment.
on push of which branch? Kindly mention it out.
Also, do we need chromatic URL for PR deploys as well?
| # Options required for Chromatic's GitHub Action | ||
| with: | ||
| #👇 Chromatic projectToken, | ||
| projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} |
There was a problem hiding this comment.
Do we need to create a custom project using asyncapi account in chromatic?
| fetch-depth: 0 | ||
| - uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: 20 |
There was a problem hiding this comment.
Can we use the existing node version present in the .nvmrc file?
| with: | ||
| node-version: 20 | ||
| cache: 'yarn' | ||
| - run: yarn |
There was a problem hiding this comment.
Why yarn has been used instead of npm ci or npm install?
Description
Storybook configuration for publishing on Chromatic.
Current Deploy Link: https://677b54b0a822478a61e2184e-zyhxiiozkj.chromatic.com/
Chromatic Library: https://www.chromatic.com/library?appId=677b54b0a822478a61e2184e
Discussion is needed with website maintainers.
Summary by CodeRabbit
Chores
Documentation