feat(shadcn): #50 rebuild Header; delete dead Sidebar#57
Closed
fray-cloud wants to merge 3 commits into
Closed
Conversation
Handcrafted shadcn init to preserve the front/* alias and Nx layout. Scaffolding only — no call-site swaps; daisyUI plugin remains active. - apps/web/components.json — shadcn schema 1, style default, rsc true, baseColor neutral, cssVariables, aliases mapped onto front/* (components → front/new-component, ui → front/new-component/ui, utils → front/lib/utils, lib → front/lib, hooks → front/hooks), iconLibrary lucide - apps/web/src/lib/utils.ts — cn helper (clsx + tailwind-merge) - apps/web/src/new-component/ui/ directory created (empty; #49 fills) - apps/web/tailwind.config.js — darkMode ['class'], theme.extend.colors wired to hsl(var(--*)) shadcn tokens, theme.extend.borderRadius, plugins keep `require('daisyui')` and add `tailwindcss-animate` - apps/web/app/globals.css — :root + .dark CSS variables under @layer base - package.json — class-variance-authority, clsx, tailwind-merge, tailwindcss-animate, lucide-react added - nx affected -t lint test build --exclude web-e2e green (4 projects, 10 tasks) - daisyUI classes still render identically (coexistence by design through #54) Refs #48
Five shadcn/ui components written directly into apps/web/src/new-component/ui/ to match the aliases configured in #48. Standard shadcn default-style implementations using cn(), class-variance-authority (button only), and Radix primitives for Avatar and Progress. No call-site swaps — files are unreferenced until #50–#54 consume them. - button.tsx — variants (default/destructive/outline/secondary/ghost/ link), sizes (default/sm/lg/icon), asChild via @radix-ui/react-slot - card.tsx — Card + CardHeader/Title/Description/Content/Footer - skeleton.tsx — animated muted placeholder - avatar.tsx — Radix Avatar/Image/Fallback ("use client") - progress.tsx — Radix Progress with translate-based indicator ("use client") - package.json — @radix-ui/react-slot, @radix-ui/react-avatar, @radix-ui/react-progress added - nx affected -t lint test build --exclude web-e2e green Refs #49
…50) Header: - Drops daisyUI navbar/bg-neutral/text-neutral-content/btn-ghost and rebuilds as a plain Tailwind flex row using shadcn Button variant="ghost" for the title link - bg-neutral-900 / text-neutral-100 token pair preserves the dark contrast originally supplied by daisyUI's neutral theme tokens Sidebar: - Deleted. The component was pulled only via the new-component/ barrel export and rendered nowhere (no consumers after the catch-all bridge and SiteRouter were removed in #35). - new-component/index.ts drops `export * from './sidebar'`. - nx affected -t lint test build --exclude web-e2e green - daisyUI plugin still present; coexists with shadcn through #54 Refs #50
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Reviewer's GuideRebuilds the Header to use shadcn-style UI primitives and Tailwind design tokens, introduces shared shadcn utility components and Tailwind CSS variables/theme wiring (including dark mode via class), and deletes the unused Sidebar plus its barrel export while updating dependencies to support the new UI layer. Class diagram for new shadcn-style UI primitives and utilitiesclassDiagram
direction LR
class cn {
<<function>>
+cn(inputs) ClassValue[]
}
class Button {
<<ReactComponent>>
+asChild boolean
+variant string
+size string
+disabled boolean
+onClick(event)
}
class buttonVariants {
<<cvaConfig>>
+variant default|destructive|outline|secondary|ghost|link
+size default|sm|lg|icon
}
class Card {
<<ReactComponent>>
+children ReactNode
}
class CardHeader {
<<ReactComponent>>
+children ReactNode
}
class CardTitle {
<<ReactComponent>>
+children ReactNode
}
class CardDescription {
<<ReactComponent>>
+children ReactNode
}
class CardContent {
<<ReactComponent>>
+children ReactNode
}
class CardFooter {
<<ReactComponent>>
+children ReactNode
}
class Avatar {
<<ReactComponent>>
+children ReactNode
}
class AvatarImage {
<<ReactComponent>>
+src string
+alt string
}
class AvatarFallback {
<<ReactComponent>>
+children ReactNode
}
class Progress {
<<ReactComponent>>
+value number
}
class Skeleton {
<<ReactComponent>>
+className string
}
class Header {
<<ReactComponent>>
+router NextRouter
}
%% Relationships
cn <.. Button : uses
cn <.. Card : uses
cn <.. CardHeader : uses
cn <.. CardTitle : uses
cn <.. CardDescription : uses
cn <.. CardContent : uses
cn <.. CardFooter : uses
cn <.. Avatar : uses
cn <.. AvatarImage : uses
cn <.. AvatarFallback : uses
cn <.. Progress : uses
cn <.. Skeleton : uses
buttonVariants <.. Button : uses
Card <|-- CardHeader
Card <|-- CardTitle
Card <|-- CardDescription
Card <|-- CardContent
Card <|-- CardFooter
Avatar <|-- AvatarImage
Avatar <|-- AvatarFallback
Header --> Button : renders
Header --> CountList : renders
class CountList {
<<ReactComponent>>
}
File-Level Changes
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
|
View your CI Pipeline Execution ↗ for commit 01fa96d
☁️ Nx Cloud last updated this comment at |
1 task
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 1 issue, and left some high level feedback:
- In
ui/card.tsx, theCardTitleandCardDescriptioncomponents have a mismatch between the generic element types (HTMLDivElement) and the props types (HTMLHeadingElement/HTMLParagraphElement) while rendering<div>elements; align the generics, props, and rendered tag (e.g., use<h3>/<p>or change the prop types) to avoid incorrect typings and potential ref issues.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- In `ui/card.tsx`, the `CardTitle` and `CardDescription` components have a mismatch between the generic element types (`HTMLDivElement`) and the props types (`HTMLHeadingElement` / `HTMLParagraphElement`) while rendering `<div>` elements; align the generics, props, and rendered tag (e.g., use `<h3>`/`<p>` or change the prop types) to avoid incorrect typings and potential ref issues.
## Individual Comments
### Comment 1
<location path="apps/web/src/new-component/ui/card.tsx" line_range="47-8" />
<code_context>
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+ <div
+ ref={ref}
</code_context>
<issue_to_address>
**issue:** Fix CardDescription typing to match the rendered element.
The ref and props types don’t match the rendered `<div>`, which can cause incorrect typings and complicate a future switch to a semantic `<p>`. Please either:
- Render a `<p>` and type as `HTMLParagraphElement` / `React.HTMLAttributes<HTMLParagraphElement>`, or
- Keep the `<div>` and type as `HTMLDivElement` / `React.HTMLAttributes<HTMLDivElement>`.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| const Card = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => ( |
There was a problem hiding this comment.
issue: Fix CardDescription typing to match the rendered element.
The ref and props types don’t match the rendered <div>, which can cause incorrect typings and complicate a future switch to a semantic <p>. Please either:
- Render a
<p>and type asHTMLParagraphElement/React.HTMLAttributes<HTMLParagraphElement>, or - Keep the
<div>and type asHTMLDivElement/React.HTMLAttributes<HTMLDivElement>.
Owner
Author
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Stacked on #56.
Header
Drops daisyUI
navbar/bg-neutral/text-neutral-content/btn-ghostand rebuilds as a plain Tailwind flex row using shadcn<Button variant="ghost">for the title link.bg-neutral-900/text-neutral-100preserves the dark-contrast originally supplied by daisyUI's neutral theme tokens.Sidebar
Deleted. The component was pulled only via the
new-component/barrel and rendered nowhere (no consumers after the catch-all bridge andSiteRouterwere removed in #35).new-component/index.tsdrops its export.Closes #50.
Test plan
npx nx affected -t lint test build --exclude web-e2egreengrep -rn Sidebar apps/web→ zero remaining references🤖 Generated with Claude Code
Summary by Sourcery
Introduce shadcn-style UI primitives and theming, rebuild the header using the new button component, and remove the unused sidebar component.
New Features:
Enhancements:
Build:
Chores: