feat(ci): add Chromatic visual regression testing to auto-publish wor…

[hectoruch]

📋 Pull Request

📝 Description

Summary: Add automated Chromatic visual regression testing integration to the CI/CD pipeline. This enhancement ensures that visual changes in Storybook components are automatically published to Chromatic during the release process.

Context: To improve our visual testing workflow and ensure consistent UI components, we need to integrate Chromatic visual regression testing into our automated release pipeline. This will help catch visual regressions early and maintain design system consistency.

Related Issues:

• Enhances visual testing workflow
• Improves CI/CD pipeline with visual regression testing

---

🔄 Type of Change

• 🐛 Bug fix - non-breaking change which fixes an issue
• ✨ New feature - non-breaking change which adds functionality
• 💥 Breaking change - fix or feature that would cause existing functionality to not work as expected
• 📚 Documentation - updates to documentation only
• 🎨 Style - formatting, missing semi colons, etc; no code change
• ♻️ Refactor - code change that neither fixes a bug nor adds a feature
• ⚡ Performance - code change that improves performance
• ✅ Test - adding missing tests or correcting existing tests
• 🔧 Build - changes that affect the build system or external dependencies
• 👷 CI - changes to CI configuration files and scripts
• 🚀 Deploy - changes related to deployment

---

🧪 Testing

Test Coverage

• Unit tests added/updated
• Integration tests added/updated
• E2E tests added/updated
• Manual testing completed

Test Instructions

1. Setup:

   yarn install
   yarn build-storybook

2. Test scenarios:

   • Scenario A: Local Chromatic script runs with environment variable
   • Scenario B: GitHub Actions workflow includes Chromatic steps
   • Edge cases: Workflow handles missing CHROMATIC_PROJECT_TOKEN gracefully

3. Verification:

   # Test local chromatic script (requires CHROMATIC_PROJECT_TOKEN env var)
   CHROMATIC_PROJECT_TOKEN=test_token yarn chromatic --dry-run
   
   # Verify workflow syntax
   yamllint .github/workflows/auto-publish.yml

Test Results

• ✅ Chromatic script updated to use environment variable
• ✅ GitHub Actions workflow validates successfully
• ✅ Documentation updated with new secret requirements

---

:camera_with_flash: Screenshots/Demo

Before	After
Hardcoded token in package.json	Environment variable usage: $CHROMATIC_PROJECT_TOKEN
No Chromatic in CI/CD	Automated Chromatic publishing in release workflow

---

📚 Documentation

• Code is self-documenting with clear variable/function names
• Added/updated JSDoc comments for public APIs
• Updated README.md if needed
• Updated CHANGELOG.md
• Added/updated component documentation
• Updated TypeScript type definitions

Documentation Changes:

• Updated workflow comments to document CHROMATIC_PROJECT_TOKEN secret
• Added Chromatic steps to error and success notifications
• Updated secret configuration guide

---

🔍 Code Quality Checklist

Code Standards

• Code follows project's style guidelines (ESLint/Prettier)
• Code follows TypeScript best practices
• No console.log statements in production code
• No TODO/FIXME comments without corresponding issues
• Proper error handling implemented
• Security considerations addressed (token moved to environment variable)

Performance & Accessibility

• Performance impact considered and optimized
• Accessibility guidelines followed (WCAG 2.1)
• Mobile responsiveness tested
• Browser compatibility verified

Review & Testing

• Self-review completed
• Code is well-commented and self-explanatory
• All existing tests pass
• New tests added for new functionality
• Manual testing completed
• No new warnings or errors introduced

---

🚀 Deployment Considerations

• No database migrations required
• No environment variable changes required
• Backward compatible with previous version
• Safe to deploy to production
• Feature flags implemented if needed

Required Setup:

• Repository maintainers need to add CHROMATIC_PROJECT_TOKEN to GitHub Secrets

---

📦 Dependencies

Added

• No new dependencies added

Updated

• No dependencies updated

Removed

• No dependencies removed

Note: Chromatic is already included in devDependencies

---

🔗 Additional Information

Related PRs

• This change enhances the existing auto-publish workflow

Breaking Changes

None - This is a non-breaking enhancement to the CI/CD pipeline

Notes for Reviewers

Focus Areas:

1. Security: Verify that the hardcoded token has been properly removed from package.json
2. Workflow Logic: Review the new Chromatic steps in the GitHub Actions workflow
3. Documentation: Ensure the secret setup instructions are clear and complete
4. Error Handling: Check that the workflow handles missing Chromatic token gracefully

Configuration Required After Merge:
Repository maintainers must add the CHROMATIC_PROJECT_TOKEN secret in GitHub Settings:

1. Go to Repository Settings → Secrets and variables → Actions
2. Add new repository secret: CHROMATIC_PROJECT_TOKEN
3. Value: Your Chromatic project token from chromatic.com

---

📋 Reviewer Checklist

• Code review completed
• Tests reviewed and adequate
• Documentation reviewed
• Breaking changes identified and documented
• Security implications considered
• Performance impact assessed
• Chromatic integration properly configured
• GitHub Actions workflow syntax validated
• Secret configuration requirements documented

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
kubit-react-charts	Ready	Preview	Comment	Nov 18, 2025 9:24am

[github-actions]

🔍 PR Validation Report

Status: ✅ PASSED
Branch: feature/add-chromatic-configuration
Expected Version Bump: minor

---

✅ Validation Results

Check	Status	Description
Branch Naming	✅ Pass	Must follow type/description pattern
PR Title	✅ Pass	Must follow conventional commits
ESLint	✅ Pass	Code style and quality rules
TypeScript	✅ Pass	Type checking validation
Tests	✅ Pass	All tests must pass

---

🎯 Next Steps

This PR is ready for review - all validation checks passed!

📦 Expected Release Impact

Based on branch name feature/add-chromatic-configuration, this PR will trigger a minor version bump when merged.

---

This validation runs automatically on every PR. Questions? Check our Contributing Guidelines

[github-actions]

✨ Auto-publish Successful!

Field	Value
Branch	feature/add-chromatic-configuration
Type	minor
Version	1.3.0 → 1.4.0
NPM	@kubit-ui-web/react-charts@1.4.0

📦 Installation

npm install @kubit-ui-web/react-charts@1.4.0
# or
yarn add @kubit-ui-web/react-charts@1.4.0

✅ Completed Steps

• Quality checks passed
• Tests passed
• Build successful
• Storybook built for Chromatic
• Published to Chromatic
• Published to NPM
• GitHub release created
• Repository tagged

🎉 Ready to use in production!