chore: Set up CI/CD pipeline with GitHub Actions
#8
Conversation
|
Summary by CodeRabbit
Summary by CodeRabbit
WalkthroughThis update introduces comprehensive configuration and automation files for project management, release, and CI/CD workflows. It adds configuration for Changesets, Dependabot, and GitHub Actions, including custom composite actions and workflow definitions for validation and release processes. The package is now public, with explicit entry points, publishing configuration, and MIT licensing. Changes
Sequence Diagram(s)sequenceDiagram
participant GitHub Actions
participant Setup Env Action
participant Changesets
participant Chromatic
participant Slack Payload Action
participant Slack
GitHub Actions->>Setup Env Action: Setup environment (Node.js, pnpm, install deps)
GitHub Actions->>Chromatic: Run UI tests and deploy Storybook
GitHub Actions->>Changesets: Run release (versioning, publish to npm)
Changesets-->>GitHub Actions: Output published status/packages
GitHub Actions->>Slack Payload Action: Generate Slack payload (publish/PR info)
Slack Payload Action->>Slack: Send notification via webhook
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
✨ Finishing Touches🧪 Generate Unit Tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
There was a problem hiding this comment.
Pull Request Overview
This PR configures automated workflows for CI/CD with GitHub Actions, Dependabot, and Changesets to validate, build, release, and notify.
- Add package metadata and publish scripts in package.json
- Introduce Dependabot configuration and Changesets setup
- Create composite actions and workflows for lint/type/test, release, and Slack notifications
Reviewed Changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Update publishing metadata, scripts, and deps |
| LICENSE | Add MIT license |
| .github/workflows/release.yml | Define release pipeline: storybook, changesets, Slack |
| .github/workflows/ci-validation.yml | Define CI validation: lint, types, tests, auto-merge |
| .github/dependabot.yml | Configure Dependabot updates and grouping |
| .github/actions/setup-slack-payload/action.yml | Composite action to build Slack notification payload |
| .github/actions/setup-env/action.yml | Composite action to install Node.js/pnpm environment |
| .changeset/config.json | Changesets configuration |
Comments suppressed due to low confidence (5)
.github/actions/setup-env/action.yml:8
- Node.js version '22' is not a valid release at this time; consider using a supported LTS version such as '18' or '20'.
default: '22'
.github/workflows/release.yml:41
- Using
context.shaon a push-to-main event may not reliably return an associated pull request. Add a guard for an empty response or derive the PR number from the merge commit/event payload to avoid errors.
const issueNumber = (await github.rest.repos.listPullRequestsAssociatedWithCommit({
.github/workflows/release.yml:85
- The
changesets/actionexpects the built-inGITHUB_TOKEN. If using a custom secret, ensure it’s correctly named or switch to${{ secrets.GITHUB_TOKEN }}.
GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
.github/workflows/ci-validation.yml:71
- The GitHub CLI uses the
GITHUB_TOKENenvironment variable for auth; you providedGH_TOKEN. Change the env var toGITHUB_TOKENso the auto-merge step can succeed.
run: gh pr merge --auto --squash "$PR_URL" --delete-branch
.github/dependabot.yml:9
- [nitpick] Specifying a milestone by numeric ID can break if the ID changes; consider referencing the milestone by its title or verifying that the numeric ID stays in sync.
milestone: 1
![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
🧹 Nitpick comments (11)
.github/actions/setup-slack-payload/action.yml (2)
42-47: Handlepublished_packagesJSON safely
Using single‐quotedechocan alter whitespace. Prefer:echo "${{ inputs.published_packages }}" > packages.jsonor
printf '%s' "${{ inputs.published_packages }}" > packages.json
48-129: Simplify JSON payload generation
The current single-quote/variable-break pattern is brittle. Switch to a here-document (EOF) or a double-quoted heredoc to improve maintainability and reduce quoting errors.Also applies to: 130-196
.github/actions/setup-env/action.yml (1)
13-18: Pin pnpm version for reproducibility
Usingversion: latestrisks unexpected behavior when pnpm releases a new major. Consider specifying a stable pnpm version..github/workflows/ci-validation.yml (5)
1-4: Consider restricting PR triggers to specific branchesCurrently the workflow triggers on all pull requests (
on: [pull_request]). To avoid unnecessary runs (e.g., forks or feature branches not targetingmain), explicitly filter by target branch:on: pull_request: branches: - main
5-8: Scope down permissions to least-privilegeYou grant
contents: writeandpull-requests: writeat the workflow level, even for lint and type-check steps that don’t need write access. Consider:
- Setting default permissions to
read-all- Elevating to write only in the
mergejob
19-27: Use a formatting check instead of auto-format in CIRunning
pnpm formatwill modify files in CI rather than fail on bad formatting. Prefer a check command (e.g.,pnpm format:check) to surface formatting issues as failures rather than side effects.
28-45: Cache dependencies to speed up type checks and buildsThe
check-typesjob installs and builds on each run. Adding a cache step for the pnpm store (e.g.,actions/cacheon~/.pnpm-store) can significantly reduce CI runtime.
46-63: Add caching for Playwright installationInstalling Playwright browsers every run can be slow. Consider caching
~/.cache/ms-playwrightbetween runs or pinning browser versions to speed up thepnpm exec playwright installstep..github/workflows/release.yml (3)
10-14: Remove unusedid-tokenpermissionThe
id-token: writepermission is not utilized in this workflow. Dropping it reduces unnecessary surface area:permissions: contents: write pull-requests: write
37-53: Handle missing associated pull request gracefullyIn the Storybook comment step,
listPullRequestsAssociatedWithCommitmay return an empty array (e.g., direct pushes). Add a guard to skip if no PR is found to prevent runtime errors.
99-109: Guard against no pull request in Slack notificationSimilar to the Storybook step,
listPullRequestsAssociatedWithCommitmay yield no PRs. Validateresultbefore accessing properties to avoid failures.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
.changeset/config.json(1 hunks).github/actions/setup-env/action.yml(1 hunks).github/actions/setup-slack-payload/action.yml(1 hunks).github/dependabot.yml(1 hunks).github/workflows/ci-validation.yml(1 hunks).github/workflows/release.yml(1 hunks)LICENSE(1 hunks)package.json(4 hunks)
🔇 Additional comments (15)
LICENSE (1)
1-22: MIT License addition is appropriate
The MIT license text matches thelicensefield inpackage.jsonand supports the public release..changeset/config.json (1)
1-12: Changesets configuration looks correct
The schema URL, changelog generator, access, and branch settings align with the intended CI/CD release process..github/dependabot.yml (2)
1-17: Dependabot schedule and ecosystems are set up
Weekly checks for GitHub Actions and npm dependencies with proper commit-message prefixes.
9-23: Verify existence of milestone1
Ensure that milestone ID1is created in the repo so that Dependabot PRs are correctly assigned..github/actions/setup-slack-payload/action.yml (3)
4-14: Inputs are well defined
All required parameters for Slack notifications are declared and marked as required.
30-34: Outputs mapping is correct
The composite action exposesfile-pathvia$GITHUB_OUTPUTfor downstream steps.
199-201: File-path output step is correct
The action correctly writes thefile-pathto$GITHUB_OUTPUT..github/actions/setup-env/action.yml (3)
5-9: Default Node.js version
The defaultnode-version: '22'may be ahead of the current LTS. Confirm compatibility or adjust to the project’s target Node.js version.
19-24: Node.js setup step is solid
actions/setup-node@v4withcache: 'pnpm'ensures consistent environment caching.
25-27: Install dependencies with frozen lockfile
pnpm install --frozen-lockfileis the right choice for CI to guarantee reproducible installs..github/workflows/ci-validation.yml (1)
64-75: Verify correct auth token for GitHub CLIYou pass
GH_TOKENtogh pr merge, but the CLI typically readsGITHUB_TOKENin Actions. Please confirm thatGH_TOKENis picked up; otherwise switch to:env: GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}.github/workflows/release.yml (1)
77-87: Confirm correct token name for Changesets actionYou set
GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}but the action context providesGITHUB_TOKENby default. Ensuresecrets.GH_TOKENis defined, or switch to:env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}package.json (3)
3-3: Public package requires a LICENSE fileYou switched
"private": false. Ensure the MITLICENSEfile is present at the repo root so that yourlicense: "MIT"declaration is valid.
5-11: Verify build outputs matchmain/moduleentrypointsYou reference
dist/index.cjsanddist/index.js. Confirm your build (tsup/tsc) is configured to emit these exact filenames, or adjust these fields to reflect real artifacts.
27-29: Validate Changesets publish commandYour
"release": "pnpm build && changeset publish"script must invoke the correct CLI binary (changesetvs.changesets). Please ensurechangeset publishis valid or update tochangesets publishif required.
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (5)
.changeset/config.json (1)
2-3: Consider pinning the Changesets schema version.
Using@latestcan introduce breaking schema changes; pin to a known version for stability.Example:
- "$schema": "https://unpkg.com/@changesets/config@latest/schema.json", + "$schema": "https://unpkg.com/@changesets/config@1.0.0/schema.json",.github/workflows/ci-validation.yml (1)
72-74: Use the built-inGITHUB_TOKEN.
Replace the customGH_TOKENsecret with the automaticGITHUB_TOKENto simplify authentication and reduce secret management.env: PR_URL: ${{ github.event.pull_request.html_url }} - GH_TOKEN: ${{ secrets.GH_TOKEN }} + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}.github/actions/setup-slack-payload/action.yml (1)
42-47: Only the first published package is processed.This logic extracts only the first entry from
published_packages, so additional packages won’t be reported. Consider iterating over the array or summarizing multiple entries if multi-package releases are common..github/workflows/release.yml (2)
37-53: Guard against missing PR association.
listPullRequestsAssociatedWithCommit(...).data[0]may be undefined when no PR is found. Add a check before accessing.numberto avoid runtime errors.
99-117: Ensure robust PR lookup.Consider handling cases where
listPullRequestsAssociatedWithCommitreturns an empty array to avoid undefined attribute access.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
.changeset/config.json(1 hunks).github/actions/setup-env/action.yml(1 hunks).github/actions/setup-slack-payload/action.yml(1 hunks).github/dependabot.yml(1 hunks).github/workflows/ci-validation.yml(1 hunks).github/workflows/release.yml(1 hunks)LICENSE(1 hunks)package.json(4 hunks)
🔇 Additional comments (28)
LICENSE (1)
1-22: MIT license file is correctly added.
The license text is complete, and the year and copyright holder are accurate..changeset/config.json (1)
1-12: Changesets configuration is well-structured.
Settings align with the release workflow and public package setup..github/workflows/ci-validation.yml (1)
1-69: CI Validation workflow structure is solid.
Jobs are properly defined, the composite action ensures consistency, and the conditional merge is well-configured..github/dependabot.yml (1)
17-26: Missingcommit-messageconfiguration for npm updates.
Without acommit-messageblock, npm dependency PRs will not use the intended prefix.Add the following under the npm update entry:
- package-ecosystem: 'npm' directory: '/' schedule: interval: 'weekly' time: '02:00' timezone: 'Asia/Seoul' milestone: 1 + commit-message: + prefix: 'chore(deps):' ignore: - dependency-name: 'react' update-types: ['version-update:semver-major']Likely an incorrect or invalid review comment.
.github/actions/setup-slack-payload/action.yml (7)
1-3: Metadata declaration is clear and concise.Action name and description accurately reflect the purpose of this composite action.
4-28: Input definitions look solid.All required inputs are declared with clear descriptions.
30-34: Output is correctly declared.The
file-pathoutput aligns with the composite step usage.
35-41: Composite action runner setup is correct.Using
bashshell is appropriate for JSON and file operations.
48-129: Validate the generated Slack JSON payload.The quoted here-document is complex and prone to quoting issues—verify that environment variables expand correctly and produce valid JSON. You can add a
jqsanity check (e.g.,jq . slack_payload.json) after writing the file to catch syntax errors early.
130-196: Failure payload is consistent with success branch.The fallback message correctly uses a red color and omits package details.
199-201: Setting the action output is correct.Writing to
$GITHUB_OUTPUTmatches GitHub’s composite action output convention..github/workflows/release.yml (11)
1-7: Workflow trigger and naming are correct.The
Releaseworkflow is properly scoped to pushes onmainand clearly named.
16-24: Checkout step configuration is sound.Using
fetch-depth: 0ensures the full history is available for Chromatic and PR comment steps.
25-27: Environment setup usage is correct.The custom
setup-envaction encapsulates Node.js and pnpm configuration concisely.
28-30: Build step is appropriate.Running
pnpm buildaligns with the monorepo’s build conventions.
61-65: Second checkout is correctly scoped.Consistent use of
fetch-depth: 0across jobs ensures availability of full git history.
66-68: Environment setup usage is repeated correctly.Reusing the
setup-envcomposite action ensures consistent environment across jobs.
77-87: Verify GitHub token usage.This step relies on
secrets.GH_TOKEN. Confirm that this secret is defined and has the necessary scope, or switch to the built-in${{ secrets.GITHUB_TOKEN }}to simplify authentication.
88-93: Slack notification job condition is correct.The
ifcondition properly handles both successful publishes and failures of the previous job.
94-98: Checkout for Slack job is consistent.Full fetch ensures the PR lookup step can find associated pull requests.
118-129: Slack payload setup integration is correct.Passing the PR metadata into the custom action aligns with the inputs schema defined earlier.
131-136: Using official Slack action is appropriate.
slackapi/slack-github-action@v2withpayload-file-pathis the recommended pattern for sending complex messages.package.json (6)
3-3: Package visibility updated.Switching
"private"tofalsecorrectly prepares the package for public publishing.
5-15: Entry points and publish config look good.
main,module, andtypesfields align with thedistoutputs, andpublishConfigensures public access with provenance.
27-29: Build and release scripts are defined correctly.Adding the
releasescript to chain build andchangeset publishintegrates seamlessly with the workflow.
31-36: Verify dependency versions.The
reactandreact-domdependencies target^19, andtailwindcssis^4—ensure these major versions exist and are intentional, as current stable releases are earlier majors.
43-44: Dev dependencies for Changesets are correct.Including
@changesets/cliand@changesets/changelog-gitsupports the automated versioning and changelog workflow.
84-119: Repository metadata is comprehensive.
author,bugs,contributors,homepage,keywords, andlicensefields provide essential context for end users.
🔍 Overview
🛠 Changes
DependabotChangesetswith pnpmsetup-env: Set up Node.js environmentsetup-slack-payload: Set up slack notification message payloadCI Validation: Code validation check for Pull requestRelease: Deployments and slack notification❗ Related Issues
GitHub Actions#7💬 Additional Notes (Screenshots, URLs, etc.)