feat: Update shadcn ui 4#691
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request overhauls the UI component library by adding new components like Carousel and Chart, and updating existing ones to a new design style using Radix UI primitives and OKLCH color variables. The review identified a critical logic error in the Field component where an async function is incorrectly passed to useMemo, which will lead to incorrect rendering behavior. Additionally, several hardcoded strings in the Pagination and Sidebar components should be externalized to the translation files to ensure proper internationalization support.
| // eslint-disable-next-line react-hooks/use-memo, @eslint-react/use-memo | ||
| const content = useMemo(async () => { |
There was a problem hiding this comment.
The useMemo callback is marked as async, which is invalid. useMemo expects a synchronous function that returns a value. An async function returns a Promise, which cannot be rendered directly in a client component and will cause the if (!content) check on line 213 to always be false (as a Promise object is truthy). Since the logic inside the callback is synchronous, the async keyword should be removed.
References
- React hooks like useMemo must have synchronous callbacks to return the computed value immediately for rendering.
| function PaginationPrevious({ | ||
| className, | ||
| text = "Previous", | ||
| ...props | ||
| }: React.ComponentProps<typeof PaginationLink> & { text?: string }) { | ||
| return ( | ||
| <PaginationLink | ||
| aria-label="Go to previous page" | ||
| className={cn("ps-2!", className)} | ||
| size="default" | ||
| {...props} | ||
| > | ||
| <ChevronLeftIcon className="rtl:rotate-180" data-icon="inline-start" /> | ||
| <span className="hidden sm:block">{text}</span> | ||
| </PaginationLink> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Hardcoded strings "Previous" and "Go to previous page" should be replaced with translations using the useTranslations hook, which is already available in the project.
References
- All user-facing strings should be externalized to translation files to support internationalization.
| function PaginationNext({ | ||
| className, | ||
| text = "Next", | ||
| ...props | ||
| }: React.ComponentProps<typeof PaginationLink> & { text?: string }) { | ||
| return ( | ||
| <PaginationLink | ||
| aria-label="Go to next page" | ||
| className={cn("pe-2!", className)} | ||
| size="default" | ||
| {...props} | ||
| > | ||
| <span className="hidden sm:block">{text}</span> | ||
| <ChevronRightIcon className="rtl:rotate-180" data-icon="inline-end" /> | ||
| </PaginationLink> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Hardcoded strings "Next" and "Go to next page" should be replaced with translations.
References
- All user-facing strings should be externalized to translation files to support internationalization.
| <button | ||
| aria-label="Toggle Sidebar" | ||
| className={cn( | ||
| "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex", | ||
| "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", | ||
| "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", | ||
| "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full", | ||
| "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", | ||
| "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", | ||
| "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2", | ||
| "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize rtl:in-data-[side=left]:cursor-e-resize rtl:in-data-[side=right]:cursor-w-resize", | ||
| "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize rtl:[[data-side=left][data-state=collapsed]_&]:cursor-w-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize rtl:[[data-side=right][data-state=collapsed]_&]:cursor-e-resize", | ||
| "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:start-full rtl:group-data-[collapsible=offcanvas]:-translate-x-0", | ||
| "[[data-side=left][data-collapsible=offcanvas]_&]:-end-2", | ||
| "[[data-side=right][data-collapsible=offcanvas]_&]:-start-2", | ||
| className, | ||
| )} | ||
| data-sidebar="rail" | ||
| data-slot="sidebar-rail" | ||
| onClick={toggleSidebar} | ||
| tabIndex={-1} | ||
| title="Toggle Sidebar" | ||
| type="button" | ||
| {...props} | ||
| /> |
There was a problem hiding this comment.
The strings "Toggle Sidebar" are hardcoded. They should use the toggle_sidebar translation key from core.global via the useTranslations hook.
References
- All user-facing strings should be externalized to translation files to support internationalization.
1 participant
Improving Documentation
pnpm lint:fixto fix formatting issues before opening the PR.Description
What?
Why?