refactor: update shadcn components

[adelrodriguez]

Greptile Overview

Greptile Summary

This PR updates shadcn components across the UI package, upgrading key dependencies and standardizing component styling.

Key Changes:

• Dependency upgrades: recharts (v2→v3), date-fns, and react-day-picker upgraded to allow minor/patch updates via caret ranges
• Typography refactor: Components renamed (e.g., TypographyH1→H1) and exported as Typography namespace, added table components
• New component: Added native-select for native HTML select elements with consistent styling
• Styling updates: Reduced component sizes and padding across the board (buttons: h-9→h-8, dialogs: p-6→p-4), updated border radius (rounded-md→rounded-lg)
• Import standardization: Reordered imports across all components (external deps first, then internal utils/components), moved data-* attributes before className props
• Build changes: Switched from adamantite typecheck to tsc --noEmit, removed type generation step from CI workflow
• Bug fixes: Fixed sidebar.tsx dependency arrays in useCallback hooks, simplified cookie handling

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• This is a well-structured refactoring PR that updates shadcn components following a consistent pattern. The changes are primarily cosmetic (styling adjustments, import reordering) with dependency upgrades that are handled correctly (recharts v3 compatibility, react-day-picker updates). The sidebar bug fix improves code quality. All changes follow the project's coding standards.
• No files require special attention

Important Files Changed

Filename	Overview
packages/ui/package.json	Updated typecheck script and upgraded recharts (v2.15.4→v3.7.0), date-fns, and react-day-picker to caret versions for minor/patch updates
packages/ui/src/components/native-select.tsx	New component: native HTML select with styled wrapper and Icon.ChevronDown indicator
packages/ui/src/components/typography.tsx	Renamed components (TypographyH1→H1, etc.), removed displayName properties, added table components, exported as Typography namespace
packages/ui/src/components/chart.tsx	Updated for recharts v3 with new type imports, added CustomTooltipProps and ChartLegendContentProps types, improved type safety
packages/ui/src/components/calendar.tsx	Updated for react-day-picker v9, removed CalendarRoot/CalendarChevron/CalendarWeekNumber, adjusted cell sizes and border radius
packages/ui/src/components/sidebar.tsx	Simplified cookie handling (removed async cookieStore), removed TooltipProvider wrapper, fixed dependency arrays in useCallback hooks

Sequence Diagram

sequenceDiagram
    participant Dev as Developer
    participant Shadcn as shadcn CLI
    participant UI as @init/ui Package
    participant Apps as Apps/Extensions
    
    Dev->>Shadcn: Run shadcn diff/update
    Shadcn->>UI: Update component files
    
    Note over UI: Import Standardization
    UI->>UI: Reorder imports (external → internal)
    UI->>UI: Move data-* before className
    
    Note over UI: Dependency Upgrades
    UI->>UI: Upgrade recharts (v2 → v3)
    UI->>UI: Update type imports from recharts
    UI->>UI: Upgrade react-day-picker
    UI->>UI: Update date-fns with caret
    
    Note over UI: Component Updates
    UI->>UI: Adjust sizes (h-9→h-8, p-6→p-4)
    UI->>UI: Update border radius (md→lg)
    UI->>UI: Add native-select component
    
    Note over UI: Typography Refactor
    UI->>UI: Rename components (TypographyH1→H1)
    UI->>UI: Export as Typography namespace
    UI->>UI: Add table components
    
    Note over UI: Bug Fixes
    UI->>UI: Fix sidebar useCallback deps
    UI->>UI: Simplify cookie handling
    
    UI->>Apps: Breaking API change
    Apps->>Apps: Update imports (Typography.H1)
    
    Dev->>UI: Update build config
    UI->>UI: Switch to tsc --noEmit
    
    Dev->>Apps: Update CI workflow
    Apps->>Apps: Remove typegen step

Loading

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

• 🔍 Trigger a full review

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch recover/shadcn-components

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Additional Comments (1)

packages/ui/src/components/typography.tsx
Breaking API change: renamed exports from TypographyH1, TypographyH2, etc. to H1, H2, etc. The extension app files still import the old names:

• apps/extension/src/features/demo/components/popup-demo.tsx:2 imports TypographyH1, TypographyP
• apps/extension/src/features/demo/components/settings-demo.tsx:2 imports TypographyH1, TypographyP

These files need to be updated to use the new API:

import { Typography } from "@init/ui/components/typography"

// Usage:
<Typography.H1>Hello!</Typography.H1>
<Typography.P>This is a paragraph</Typography.P>

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/ui/src/components/typography.tsx
Line: 65:92

Comment:
Breaking API change: renamed exports from `TypographyH1`, `TypographyH2`, etc. to `H1`, `H2`, etc. The extension app files still import the old names:

- `apps/extension/src/features/demo/components/popup-demo.tsx:2` imports `TypographyH1`, `TypographyP`
- `apps/extension/src/features/demo/components/settings-demo.tsx:2` imports `TypographyH1`, `TypographyP`

These files need to be updated to use the new API:
```typescript
import { Typography } from "@init/ui/components/typography"

// Usage:
<Typography.H1>Hello!</Typography.H1>
<Typography.P>This is a paragraph</Typography.P>
```

How can I resolve this? If you propose a fix, please make it concise.

[adelrodriguez]

• refactor: update shadcn components #77 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.