Conversation
|
Warning Rate limit exceeded
⌛ 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. WalkthroughThe PR adds Mise-based task orchestration and multiple Mise TOML configs, converts npm scripts to Changes
Sequence Diagram(s)sequenceDiagram
participant Dev as Developer CLI
participant GH as GitHub Actions
participant Mise as Mise (task runner)
participant Tool as Tooling (Vite/Storybook/Vitest/Panda)
participant Storage as Artifacts / GH Pages
rect rgba(200,230,255,0.5)
Dev->>Mise: "mise run dev / build:gh-pages / ci"
end
rect rgba(220,255,200,0.5)
Mise->>Tool: invoke tasks (vite, storybook, vitest, panda, lefthook)
Tool-->>Mise: produce outputs (dist, storybook build, coverage, generated files)
end
rect rgba(255,240,200,0.5)
GH->>Mise: on CI pipeline -> "mise run ci" or "mise run build:gh-pages"
Mise->>Storage: upload artifacts to ${GH_PAGES_OUT_DIR} / coverage
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 3dbfb50643
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
Pull request overview
This pull request refactors the project to use Mise for task management and tool versioning, replacing direct npm scripts with centralized Mise tasks. It also introduces a comprehensive design system with Panda CSS theme tokens, UI components, and recipes.
Changes:
- Migrates task management from npm scripts to Mise configuration files in
.config/mise/conf.d/ - Adds extensive theme system with colors, shadows, animations, keyframes, and recipes in
theme/directory - Introduces UI component library with Button, Spinner, Loader, Group, and AbsoluteCenter components
- Centralizes environment variable management through Mise with assertions in config files
- Simplifies CI/CD workflows to use Mise tasks instead of multiple script commands
Reviewed changes
Copilot reviewed 23 out of 25 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| .config/mise/conf.d/*.toml | New Mise configuration files defining tasks, tools, environment variables, and build pipelines |
| vitest.config.ts | Reads test configuration from environment variables; removes CI-specific Playwright options |
| vite.config.ts | Reads build configuration from environment variables |
| panda.config.ts | Imports theme files and reads output directory from environment variables |
| .storybook/main.ts | Reads base URL from environment variables |
| tsconfig*.json | Adds path aliases for theme directory and TypeScript build info output |
| package.json | Updates scripts to delegate to Mise tasks; adds @ark-ui/react and lucide-react dependencies |
| theme/** | New theme files with tokens, recipes, semantic colors, animations, and styles |
| src/shared/components/ui/** | New UI components (Button, Spinner, Loader, Group, AbsoluteCenter) |
| src/counter/Counter.tsx | Refactored to use new Button component |
| src/main.tsx | Sets color palette on root element |
| .github/workflows/*.yml | Simplified to use Mise tasks |
| README.md | Updated documentation reflecting Mise-based workflow |
| mise.toml | Removed (content moved to .config/mise/conf.d/tools.toml) |
Comments suppressed due to low confidence (1)
.github/workflows/deploy.yml:38
- The workflow uses
${{ env.GH_PAGES_OUT_DIR }}but this environment variable is defined in mise configuration, not in the GitHub Actions workflow file. The${{ env.* }}syntax in GitHub Actions refers to the Actions environment context, not shell environment variables. Mise env vars are only available when running mise commands. To fix this, either hardcode the path as.var/dist/gh-pagesor use a GitHub Actions step to export the mise env var to GITHUB_ENV so it's available to subsequent steps.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
README.md (1)
24-28: Document the new local overrides step.Line 24–28 mention prepare’s effects but omit the new
mise.local.tomlgeneration. Add a bullet so developers aren’t surprised by the file appearing.📝 Suggested README tweak
This will also run `prepare` script: - Generate Panda CSS styled-system - Install Lefthook git hooks for pre-commit checks +- Create `mise.local.toml` local overrides if missing
🤖 Fix all issues with AI agents
In @.config/mise/conf.d/tasks-build.toml:
- Around line 32-35: The task definition for "build:storybook:base" uses
wait_for which only waits if the other task is already in the plan; replace the
wait_for property with depends so the "build:webapp:base" task is added to the
execution plan and always runs before "build:storybook:base". Update the
tasks."build:storybook:base" block to remove wait_for and add depends =
["build:webapp:base"] to ensure the webapp build is invoked when Storybook
builds.
In @.config/mise/conf.d/tasks-quality.toml:
- Around line 1-39: The CI task references a missing root build task: update
tasks.ci (the run array in tasks.ci) to either call an existing coordinated root
build task or replace the { task = "build" } entry with the actual build targets
used in this repo (for example { task = "build:webapp" } and/or { task =
"build:storybook" }), or alternatively add a new top-level [tasks.build] that
orchestrates the scoped build tasks; edit the tasks.ci run list or create
tasks.build accordingly so that tasks.ci no longer points to a non-existent
"build" task.
In @.github/workflows/deploy.yml:
- Around line 35-38: The workflow uses ${ env.GH_PAGES_OUT_DIR } in the
upload-pages-artifact step but that environment variable isn't exported to the
GitHub Actions job environment, so the actions/upload-pages-artifact@v3 step
won't see it; fix by exporting GH_PAGES_OUT_DIR into the job environment before
the upload step — e.g., in the build step write the variable to GITHUB_ENV, or
declare GH_PAGES_OUT_DIR at the job-level env, or resolve and pass the concrete
path via a run step and reference that output for the upload; make the change
near the Upload artifact step and ensure the variable name GH_PAGES_OUT_DIR is
populated for the upload action.
In `@tsconfig.app.json`:
- Line 15: The tsBuildInfoFile in tsconfig.app.json (and tsconfig.node.json)
points to ".var/local/ts" but the prepare task doesn't create that directory and
dev removes ".var"; update the prepare task (the prepare script) to explicitly
create the ".var/local/ts" directory (e.g., mkdir -p .var/local/ts) before
TypeScript runs so the tsbuildinfo file can be written reliably, or
alternatively modify the build/bootstrap logic to ensure parent directories are
created automatically; reference the tsBuildInfoFile setting and the prepare
task when making the change.
In `@vite.config.ts`:
- Around line 5-13: The vite.config.ts currently hard-asserts WEBAPP_OUT_DIR and
WEBAPP_BASE_URL (outDir, base) which breaks dev/preview; remove the
unconditional assert() calls and instead provide safe fallbacks or validate only
for build runs: compute outDir and base from process.env but if undefined use
sensible defaults (e.g., 'dist' and '/' respectively) or derive them from the
Vite mode, and only throw an error inside the build path (inside the object
returned by defineConfig or when build command detected). Update references to
outDir/base and the assert usage so dev/preview no longer crash while preserving
strict validation for production builds.
In `@vitest.config.ts`:
- Around line 9-20: The asserts currently treat 0 as "not set" because
Number("0") is falsy; update the checks to detect undefined/absent env vars
rather than falsy Number values: check process.env['TEST_TIMEOUT'] !== undefined
before converting to Number for testTimeout, and for each coverage threshold
(COVERAGE_THRESHOLD_LINES/BRANCHES/FUNCTIONS/STATEMENTS) verify the raw env
value !== undefined (or use Number.isFinite after conversion) before asserting,
then convert to Number and keep the coverageThresholds object; update the assert
calls to reference the raw-env presence or
Number.isFinite(coverageThresholds.<field>) so explicit 0 is allowed.
🧹 Nitpick comments (1)
tsconfig.app.json (1)
9-14: Consider adding#theme/*mapping for consistency with base config.The
compilerOptions.pathsin tsconfig.app.json completely overrides the base mappings from tsconfig.base.json. While the base config includes"#theme/*": ["./theme/*"], this is not inherited here. Currently, src/ and .storybook/ code do not import from#theme, so there is no immediate impact. However, for consistency and to prevent future issues if#themeimports are added to app code, consider including the mapping or removing local paths to inherit from base.Suggested fix
"paths": { "#.storybook/*": ["./.storybook/*"], "#styled-system/*": ["./src/shared/styled-system/*"], + "#theme/*": ["./theme/*"], "#*": ["./src/*"] },
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
.storybook/preview.tsx (1)
10-30: Remove/index.mjsfrom the styled-system import to match codebase conventions.The import should be
from '#styled-system/css'instead offrom '#styled-system/css/index.mjs'. All other imports from styled-system in the codebase (main.tsx, Counter.tsx, button.tsx, etc.) omit the/index.mjsextension. Additionally, the alias target directory./src/shared/styled-system/does not currently exist in the repository, so ensure it is created with the necessary exports..storybook/main.ts (1)
2-18: Guard STORYBOOK_BASE_URL so Storybook dev can start.The unconditional assert on line 5 will crash local Storybook runs unless the env var is set. Consider defaulting to
/for development and enforcing the requirement only for production builds.🔧 Example guard using configType
-import assert from 'node:assert' +import assert from 'node:assert' -const base = process.env['STORYBOOK_BASE_URL'] -assert(base, 'STORYBOOK_BASE_URL env var is not set') +const base = process.env['STORYBOOK_BASE_URL'] ?? '/' export default defineMain({ @@ - viteFinal: (config) => { - config.base = base + viteFinal: (config, { configType }) => { + if (configType === 'PRODUCTION') { + assert(process.env['STORYBOOK_BASE_URL'], 'STORYBOOK_BASE_URL env var is not set') + } + config.base = base return config }, })README.md (1)
82-82: Incorrect workflow filename reference.The deployment workflow file is
.github/workflows/deploy.yml, notstorybook-deploy.yml.Proposed fix
-Configuration: .github/workflows/storybook-deploy.yml +Configuration: .github/workflows/deploy.yml
🤖 Fix all issues with AI agents
In @.config/mise/conf.d/tasks-prepare.toml:
- Around line 24-30: The prepare task must ensure the .var/local/ts directory
exists so TypeScript incremental build info files (referenced by
tsconfig.app.json/tsconfig.node.json) don't fail on fresh checkouts; add a new
preparatory step (e.g., a task named "prepare:ts-dir") and include it in the
tasks.prepare run array (or modify "prepare:local-overrides" to create it) so
the pipeline runs mkdir -p .var/local/ts (and set appropriate permissions)
before other prepare steps; reference the tasks.prepare block and the run
entries ("prepare:panda", "prepare:git-hooks", "prepare:local-overrides") when
adding this new task.
In @.config/mise/conf.d/tasks-quality.toml:
- Around line 17-21: The tasks.typecheck task uses an incompatible flag combo:
remove the unsupported --noEmit from the run value ("tsc -b --noEmit") and
replace it with a supported command; either use build mode without --noEmit
("tsc -b") or, if you only want single-project type-checking, change run to "tsc
--noEmit -p tsconfig.json" so the task (tasks.typecheck / run) uses a valid tsc
invocation.
In `@components.json`:
- Around line 8-13: The components.json aliases for "hooks" and "lib" point to
missing targets; either remove those alias entries or create the directories
they reference ("src/shared/hooks" and "src/shared/lib"). Locate the "hooks" and
"lib" keys in components.json and either delete those two entries or add the
corresponding folders and any required index files so the aliases resolve during
Park UI code generation; ensure the remaining aliases ("components", "recipes",
"theme", "ui") still map to existing paths.
🧹 Nitpick comments (2)
.config/mise/conf.d/tools.toml (1)
5-5: Consider pinningjqversion for reproducibility.Other tools in this file use explicit versions (
bun = "1.3.6") or semver ranges (node = "lts"). Using"latest"forjqcould introduce inconsistencies across environments if the tool updates with breaking changes, though this is rare forjq..config/mise/conf.d/tasks-prepare.toml (1)
20-22: Consider adding idempotency safeguard for file content.The condition only checks file existence. If the template (
local.toml) is updated, existingmise.local.tomlfiles won't receive new example variables. This is acceptable if intentional, but documenting this behavior or adding a version/hash check could help.
…etup and CI/CD workflows
|



Summary by CodeRabbit
New Features
Chores
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.