Update Chromatic workflow for deployment #487
Conversation
WalkthroughThe pull request introduces modifications to the Chromatic workflow configuration in the GitHub Actions setup. The workflow name has been changed to "Chromatic Deployment," and the triggering conditions have been updated to specify that the workflow runs on Changes
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
CodeRabbit Configuration File ( |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (2)
.github/workflows/chromatic.yml (2)
19-22: LGTM! Consider using Node.js version notation with patch level.The Node.js setup is a good addition. For better version control, consider specifying the exact LTS version.
- node-version: '18' # Adjust this to your project's Node.js version + node-version: '18.19.0' # Latest LTS version of Node.js 18
24-31: LGTM! Consider documenting commonly used Chromatic CLI flags.The configuration is secure and well-structured. The comment about CLI flags could be more helpful if it included commonly used options.
- # Optional: Add any additional Chromatic CLI flags here - # For example: --exit-zero-on-changes + # Optional: Add any additional Chromatic CLI flags here + # Common options: + # --exit-zero-on-changes # Don't fail the build when changes are detected + # --auto-accept-changes # Automatically accept changes in CI + # --skip # Skip Chromatic deployment, e.g., for non-visual changes
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- .github/workflows/chromatic.yml (1 hunks)
🧰 Additional context used
🪛 yamllint
.github/workflows/chromatic.yml
[error] 32-32: no new line character at the end of file
(new-line-at-end-of-file)
🔇 Additional comments (2)
.github/workflows/chromatic.yml (2)
1-9: LGTM! Clear workflow name and well-structured triggers.The workflow name is descriptive, and the trigger configuration properly handles both push and PR events. The added comments about branch name customization are helpful for maintainers.
12-17: 🛠️ Refactor suggestionConsider using the latest checkout action version.
The workflow downgrades
actions/checkoutfrom v4 to v3. While v3 is stable, v4 includes performance improvements and bug fixes.Let's check if there are any known issues with v4 and Chromatic:
Consider updating to v4 if there are no specific compatibility issues:
- - uses: actions/checkout@v3 + - uses: actions/checkout@v4✅ Verification successful
Consider keeping actions/checkout@v3 for now
The downgrade to v3 appears intentional as this is a Storybook/Chromatic deployment workflow. Since there's no evidence of incompatibility with v4, but also no clear documentation requiring v4, it's safer to maintain v3 which is known to work reliably with Chromatic deployments. The fetch-depth configuration is correctly set for Chromatic's git history requirements.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for any discussions or issues about checkout@v4 compatibility gh issue search "chromatic checkout v4" --repo chromaui/chromatic-cli gh issue search "actions/checkout@v4" --repo chromaui/chromatic-cliLength of output: 585
Script:
#!/bin/bash # Let's try a different approach to check for any issues or discussions # 1. Check the repository's README or docs for any specific checkout version requirements fd -t f "README.md|CONTRIBUTING.md|docs" -X cat {} 2>/dev/null # 2. Check workflow files for patterns of checkout usage rg "actions/checkout@" -A 2 -B 2 # 3. Check if there are any issue templates or documentation mentioning checkout versions fd "ISSUE_TEMPLATE|PULL_REQUEST_TEMPLATE" -X cat {} 2>/dev/nullLength of output: 5246
Script:
#!/bin/bash # Let's check the Chromatic documentation and examples for any specific requirements # 1. Check for any Chromatic configuration files fd "chromatic.config|chromatic.yml|chromatic.yaml" -X cat {} 2>/dev/null # 2. Look for any Chromatic-related comments or configurations in workflow files rg -A 3 -B 3 "chromatic" .github/workflows/ # 3. Check package.json for Chromatic dependencies and scripts fd "package.json" -X cat {}Length of output: 6300
| projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} | ||
| projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} | ||
| # Optional: Add any additional Chromatic CLI flags here | ||
| # For example: --exit-zero-on-changes |
There was a problem hiding this comment.
Add newline at end of file.
Add a newline character at the end of the file to comply with POSIX standards.
# Optional: Add any additional Chromatic CLI flags here # For example: --exit-zero-on-changes +📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| # For example: --exit-zero-on-changes | |
| # For example: --exit-zero-on-changes | |
🧰 Tools
🪛 yamllint
[error] 32-32: no new line character at the end of file
(new-line-at-end-of-file)
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
.github/workflows/chromatic.yml (1)
19-22: Consider using a more specific Node.js version.While Node.js 18 is specified, using a more specific version (e.g., '18.x.x') would ensure consistent builds across environments.
Apply this diff to use a more specific version:
- uses: actions/setup-node@v3 with: - node-version: '18' # Adjust this to your project's Node.js version + node-version: '18.18.2' # Adjust this to your project's Node.js version
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (1)
- .github/workflows/chromatic.yml (1 hunks)
🧰 Additional context used
🪛 yamllint
.github/workflows/chromatic.yml
[error] 32-32: no new line character at the end of file
(new-line-at-end-of-file)
🔇 Additional comments (4)
.github/workflows/chromatic.yml (4)
1-9: Consider keeping PR triggers for early detection of visual changes.Removing PR triggers (
pull_requestevent) means visual changes will only be detected after merging to main. This could lead to visual regressions being discovered too late in the development cycle. Consider keeping both push and PR triggers to catch issues during review phase.Apply this diff to restore PR triggers while keeping the push trigger:
name: 'Chromatic Deployment' on: push: branches: - main # Adjust this if your main branch has a different name - # pull_request: # No need for PRs for now - # branches: - # - main # Adjust this if your main branch has a different name + pull_request: + branches: + - main # Adjust this if your main branch has a different name
28-30: Good use of specific version for Chromatic action.Using
@v1instead of@latestensures reproducible builds and prevents unexpected changes.
32-32: Missing newline at end of file.🧰 Tools
🪛 yamllint
[error] 32-32: no new line character at the end of file
(new-line-at-end-of-file)
15-17:⚠️ Potential issueConsider using the latest checkout action version.
The workflow downgrades
actions/checkoutfrom v4 to v3. Unless there's a specific compatibility requirement, it's recommended to use the latest version (v4) to benefit from improvements and security updates.Apply this diff to use the latest version:
- - uses: actions/checkout@v3 + - uses: actions/checkout@v4 with: fetch-depth: 0 # Required for Chromatic to retrieve git history
Summary by CodeRabbit
New Features
Improvements
pushevents for themainbranch, streamlining the deployment process.Documentation
CHROMATIC_PROJECT_TOKEN.