feat(web): install and configure shadcn/ui#40
Conversation
- Run shadcn init with Nova preset (Lucide icons, Geist fonts, Tailwind v4) - Add components.json with radix-nova style and CSS variable theming - Update globals.css with full design token set (light + dark via .dark class) - Install primitives: button, input, label, card, dialog, dropdown-menu, sonner (replaces deprecated toast), avatar, badge, separator, skeleton - Add lib/utils.ts (cn helper) and components/common/container.tsx - Add Vitest render tests for Button (label, disabled, variant attribute) - Update page.test.tsx smoke test to match new minimal page stub Closes #35
github-actions
Bot
added
area: web
|
Warning Review limit reached
More reviews will be available in 54 minutes and 9 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more credits in the billing tab to continue. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate. For paid Pro and Pro+ PR reviews, CodeRabbit uses rolling per-developer review limits. Reviews become available again as older review attempts age out of the rolling limit window. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (9)
📝 WalkthroughWalkthroughBootstraps shadcn/ui in the web project: adds Changesshadcn/ui Installation and Component Library
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
web/components/ui/label.tsx (1)
1-25: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winAdd a render test for this new Client Component.
Labelis introduced as a Client Component, but this PR only adds Button/page tests; a@testing-library/reactrender test forLabelis required by repo policy.As per coding guidelines: “All Client Components (
"use client") must have render tests using@testing-library/react” and “New Client Components in Next.js must have rendering tests with Vitest +@testing-library/react”.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@web/components/ui/label.tsx` around lines 1 - 25, The `Label` component is a new Client Component (marked with "use client") but lacks a required render test file. Create a test file for the Label component using Vitest and `@testing-library/react` that includes render tests verifying the component renders correctly with its default styling and properly applies custom className props. Ensure the test follows the repository's testing conventions and covers basic rendering scenarios for the Label component.Source: Coding guidelines
web/components/ui/separator.tsx (1)
1-29: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winAdd a render test for this new Client Component.
Separatoris added as a Client Component without a corresponding RTL render test in this PR.As per coding guidelines: “All Client Components (
"use client") must have render tests using@testing-library/react” and “New Client Components in Next.js must have rendering tests with Vitest +@testing-library/react”.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@web/components/ui/separator.tsx` around lines 1 - 29, Create a render test file for the Separator component using Vitest and `@testing-library/react`. The test should verify that the Separator component renders correctly as a Client Component. Add test cases to check that the component renders with default props (horizontal orientation and decorative=true), and test various prop combinations such as different orientations (vertical) and decorative attribute variations. Ensure the test file follows the project's testing conventions and is properly integrated into the test suite.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@web/components/common/container.tsx`:
- Around line 3-4: Make the className property optional in the Container
component's props definition. In the Container function signature, change the
className property from a required string (className: string) to an optional
string (className?: string). This allows the cn() utility to handle cases where
className is undefined, enabling the component to be used without providing a
className prop every time.
In `@web/components/ui/dialog.tsx`:
- Around line 72-76: Add explicit type="button" attribute to the Button
component used as a dialog close action to prevent it from defaulting to submit
behavior inside forms. This applies to the close button around line 72-76 and
also to the close button around line 118. Ensure both close control buttons in
the dialog component have type="button" explicitly set to avoid unintended form
submissions.
In `@web/components/ui/sonner.tsx`:
- Around line 31-38: Remove the inline style prop containing the Sonner CSS
variables (--normal-bg, --normal-text, --normal-border, --border-radius) from
the component and move these custom property definitions to a CSS class (such as
.toaster or .cn-toast) in the project's CSS files. Replace the style prop with a
className attribute that references the CSS class containing these variable
definitions to maintain Tailwind v4 compliance and keep the component
className-driven.
In `@web/lib/utils.ts`:
- Around line 4-6: Create a Vitest unit test file for the cn utility function
that exports from web/lib/utils.ts. Write test cases that verify the cn function
correctly combines and merges CSS class values by confirming it properly passes
inputs to clsx and applies the twMerge transformation. Ensure the tests cover
various scenarios including multiple class inputs, conflicting Tailwind classes,
and edge cases to guarantee the function behaves as expected per project
guidelines requiring all lib/ functions to have unit test coverage.
---
Outside diff comments:
In `@web/components/ui/label.tsx`:
- Around line 1-25: The `Label` component is a new Client Component (marked with
"use client") but lacks a required render test file. Create a test file for the
Label component using Vitest and `@testing-library/react` that includes render
tests verifying the component renders correctly with its default styling and
properly applies custom className props. Ensure the test follows the
repository's testing conventions and covers basic rendering scenarios for the
Label component.
In `@web/components/ui/separator.tsx`:
- Around line 1-29: Create a render test file for the Separator component using
Vitest and `@testing-library/react`. The test should verify that the Separator
component renders correctly as a Client Component. Add test cases to check that
the component renders with default props (horizontal orientation and
decorative=true), and test various prop combinations such as different
orientations (vertical) and decorative attribute variations. Ensure the test
file follows the project's testing conventions and is properly integrated into
the test suite.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 6e6ef0cf-84d7-4869-b847-579bcdb4cd11
⛔ Files ignored due to path filters (1)
web/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (19)
web/__tests__/button.test.tsxweb/__tests__/page.test.tsxweb/app/globals.cssweb/app/page.tsxweb/components.jsonweb/components/common/container.tsxweb/components/ui/avatar.tsxweb/components/ui/badge.tsxweb/components/ui/button.tsxweb/components/ui/card.tsxweb/components/ui/dialog.tsxweb/components/ui/dropdown-menu.tsxweb/components/ui/input.tsxweb/components/ui/label.tsxweb/components/ui/separator.tsxweb/components/ui/skeleton.tsxweb/components/ui/sonner.tsxweb/lib/utils.tsweb/package.json
- container.tsx, h2.tsx: make className optional (cn handles undefined safely) - dialog.tsx: add type="button" to close buttons to prevent form submission - sonner.tsx: remove inline style prop; move CSS vars to .toaster in globals.css - lib/utils.test.ts: add Vitest unit tests for cn (merge, falsy, conflict, conditional) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 participant
Summary
shadcn initwith the Nova preset (Lucide icons + Geist fonts — matches our existing font setup) on Tailwind v4components.jsoncommitted at repo root withcssVariables: trueand correct@/components/uialiasglobals.cssupdated with full design token set exposed as CSS variables; dark mode via.darkclass toggle (@custom-variant dark (&:is(.dark *)))button,input,label,card,dialog,dropdown-menu,avatar,badge,separator,skeleton,sonner(toastis deprecated upstream —sonneris its replacement)lib/utils.ts(cnhelper) andcomponents/common/container.tsxNotes
app/page.tsxto a blank stub; the old scaffold tests inpage.test.tsxwere updated to a smoke testnext-themesintentionally omitted — per issue notes, it lands with the auth issueTest plan
pnpm test— 41/41 passingpnpm lint— 0 errorspnpm build— passes cleanly@/components/ui/<name>.darkblock ofglobals.cssCloses #35
Summary by CodeRabbit
New Features
Style
Tests
Chores