chore(deps): FCX-108 dependency upgrades (P0/P1/P2 + follow-up)#102
Conversation
Syncs @next/env with next@16.2.4, bumps remaining outdated packages to latest compatible versions, pins all to exact versions. Migrates biome.json schema to 2.4.12; auto-fix alphabetized exports in shadcn ui files.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
WalkthroughThis pull request refactors the UI layer by migrating from Chakra UI components to Tailwind CSS and custom components, reorders exported symbols across multiple UI component modules, updates npm dependencies with fixed version pinning, upgrades configuration schemas (Biome, Vitest), and simplifies Husky hook scripts. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
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. ✨ 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 |
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 (2)
package.json (1)
20-99:⚠️ Potential issue | 🟡 MinorInconsistent version pinning contradicts PR objective of exact versions.
The PR objective states dependencies should be "pinned to exact versions (no ^ or ~)", but many entries still use caret ranges:
@hookform/resolvers,@huggingface/transformers,@langchain/*(4 packages), all@radix-ui/*(10 packages),class-variance-authority,clsx,cmdk,date-fns,langchain,next-themes,radix-ui,remark-gfm,sonner,vaul,@chromatic-com/storybook, all@storybook/*(5 packages),czg,playwright, andtw-animate-css.Either strip the carets to be consistent with the stated policy, or update the PR description to clarify that only the P0/P1/P2 groups were pinned.
🔧 Example diff (illustrative, showing a few entries)
- "@hookform/resolvers": "^5.0.1", - "@huggingface/transformers": "^4.1.0", - "@langchain/anthropic": "^1.3.26", - "@langchain/core": "^1.1.40", + "@hookform/resolvers": "5.0.1", + "@huggingface/transformers": "4.1.0", + "@langchain/anthropic": "1.3.26", + "@langchain/core": "1.1.40", ... - "playwright": "^1.59.1", + "playwright": "1.59.1",🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@package.json` around lines 20 - 99, The package.json still contains caret ranges which contradict the PR goal of exact version pinning; either remove the caret from all listed dependencies/devDependencies (e.g., `@hookform/resolvers`, `@huggingface/transformers`, `@langchain/anthropic`, `@langchain/core`, `@langchain/google-genai`, `@langchain/openai`, all `@radix-ui/`* packages, class-variance-authority, clsx, cmdk, date-fns, langchain, next-themes, radix-ui, remark-gfm, sonner, vaul, `@chromatic-com/storybook`, all `@storybook/`*, czg, playwright, tw-animate-css) so each entry is an exact version string, or alternatively update the PR description to explicitly state which groups are allowed to use ranges and list the exceptions; pick one approach and apply it consistently across dependencies and devDependencies.components/modals/ChakraModals/Login/index.tsx (1)
22-39:⚠️ Potential issue | 🟠 MajorHide the built-in close control for this non-dismissible dialog and remove the redundant Escape listener.
DialogContentalways renders a focusable "Close" button. This dialog is hard-coded open withonEscapeKeyDownandonInteractOutsideboth preventing defaults, making the close button a broken affordance for keyboard and screen-reader users. Additionally, the globalwindowlistener (lines 23–32) duplicates theonEscapeKeyDownhandler and should be removed.Also add
aria-hidden="true"to the button icon on line 57, matching the icon on line 48.Proposed fix
-import { useEffect } from "react"; import { FiLogIn } from "react-icons/fi";- // Prevent closing the modal by clicking outside - useEffect(() => { - const handleKeyDown = (e: KeyboardEvent) => { - if (e.key === "Escape") { - e.preventDefault(); - } - }; - - window.addEventListener("keydown", handleKeyDown); - return () => window.removeEventListener("keydown", handleKeyDown); - }, []); - return ( <Dialog open> <DialogContent + hideCloseButton onEscapeKeyDown={(event) => event.preventDefault()} onInteractOutside={(event) => event.preventDefault()} ><Button onClick={handleLogin}> - <FiLogIn /> + <FiLogIn aria-hidden="true" /> Go to Login </Button>And add the prop support in
components/ui/dialog.tsx:function DialogContent({ className, children, + hideCloseButton = false, ...props -}: React.ComponentProps<typeof DialogPrimitive.Content>) { +}: React.ComponentProps<typeof DialogPrimitive.Content> & { + hideCloseButton?: boolean; +}) { return ( <DialogPortal data-slot="dialog-portal"> <DialogOverlay /> <DialogPrimitive.Content data-slot="dialog-content" className={cn( "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", className )} {...props} > {children} - <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"> - <XIcon /> - <span className="sr-only">Close</span> - </DialogPrimitive.Close> + {!hideCloseButton && ( + <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"> + <XIcon /> + <span className="sr-only">Close</span> + </DialogPrimitive.Close> + )} </DialogPrimitive.Content> </DialogPortal> ); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/modals/ChakraModals/Login/index.tsx` around lines 22 - 39, Remove the global Escape key listener in Login modal (the useEffect adding window keydown) because DialogContent already handles onEscapeKeyDown/onInteractOutside; hide the built-in close affordance instead of leaving a disabled button by passing a prop (e.g., hideCloseButton or showClose={false}) into the Dialog/DialogContent usage in Login/index.tsx and ensure the dialog component in components/ui/dialog.tsx accepts and respects that prop to not render the focusable Close button; additionally add aria-hidden="true" to the close button's icon element (the SVG/icon rendered around line 57) to match the other icon and improve screen-reader behavior.
🧹 Nitpick comments (1)
components/auth/AuthButton.tsx (1)
21-28: Consider adding hover/focus styling and a disabled state during sign-in.The native
<button>loses the Chakra variant's hover/focus affordances. Minor UX/a11y concern — consider addinghover:/focus-visible:classes, or using the shared@/components/ui/buttonButton(as done inapp/auth/auth-error/page.tsx) for consistency with the rest of the migration. Also,handleGoogleSignInisn't guarded against repeated clicks while the OAuth request is in flight.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/auth/AuthButton.tsx` around lines 21 - 28, The Google sign-in button in AuthButton.tsx lacks hover/focus styles and a disabled/loading guard; update the component to use the shared Button component (or add explicit hover: and focus-visible: utility classes) and add a local loading state (e.g., isSigningIn) that is set true at the start of handleGoogleSignIn and false on completion/error, disable the button when isSigningIn to prevent repeated clicks, and surface a loading/aria-busy state for accessibility; reference the existing handleGoogleSignIn function and replace the native <button> with the shared Button (or extend its className) and ensure the click handler early-returns if isSigningIn is true.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.husky/commit-msg:
- Line 1: Update the husky commit-msg hook to quote the positional parameter so
paths with spaces are handled: change the invocation that uses npx --no-install
commitlint --edit $1 to pass the commit file as a quoted argument (i.e. use
"$1") so the shell treats the entire filename as one argument; locate the line
containing the npx --no-install commitlint --edit invocation in
.husky/commit-msg and replace $1 with "$1".
In `@app/auth/auth-error/page.tsx`:
- Line 54: The render uses decodeURIComponent(errorDetails.errorDescription)
which double-decodes the already-decoded value from URLSearchParams and can
throw URIError; remove decodeURIComponent and render
errorDetails.errorDescription directly (or use a safe fallback like an empty
string) in the JSX where the <p className="mt-2"> displays the error, i.e.,
change the expression referencing errorDetails.errorDescription in the component
to use the raw value (with optional chaining or a default) instead of wrapping
it with decodeURIComponent.
In `@components/modals/ChakraModals/Login/index.tsx`:
- Around line 56-58: The FiLogIn icon inside the Login button is being announced
redundantly; mark it decorative by adding accessibility attributes so assistive
tech ignores it. Update the Button render where FiLogIn is used (next to
handleLogin) to set the icon element to aria-hidden="true" and focusable="false"
(or wrap it in a <span aria-hidden="true">) so the visible "Go to Login" text
remains the accessible name.
---
Outside diff comments:
In `@components/modals/ChakraModals/Login/index.tsx`:
- Around line 22-39: Remove the global Escape key listener in Login modal (the
useEffect adding window keydown) because DialogContent already handles
onEscapeKeyDown/onInteractOutside; hide the built-in close affordance instead of
leaving a disabled button by passing a prop (e.g., hideCloseButton or
showClose={false}) into the Dialog/DialogContent usage in Login/index.tsx and
ensure the dialog component in components/ui/dialog.tsx accepts and respects
that prop to not render the focusable Close button; additionally add
aria-hidden="true" to the close button's icon element (the SVG/icon rendered
around line 57) to match the other icon and improve screen-reader behavior.
In `@package.json`:
- Around line 20-99: The package.json still contains caret ranges which
contradict the PR goal of exact version pinning; either remove the caret from
all listed dependencies/devDependencies (e.g., `@hookform/resolvers`,
`@huggingface/transformers`, `@langchain/anthropic`, `@langchain/core`,
`@langchain/google-genai`, `@langchain/openai`, all `@radix-ui/`* packages,
class-variance-authority, clsx, cmdk, date-fns, langchain, next-themes,
radix-ui, remark-gfm, sonner, vaul, `@chromatic-com/storybook`, all `@storybook/`*,
czg, playwright, tw-animate-css) so each entry is an exact version string, or
alternatively update the PR description to explicitly state which groups are
allowed to use ranges and list the exceptions; pick one approach and apply it
consistently across dependencies and devDependencies.
---
Nitpick comments:
In `@components/auth/AuthButton.tsx`:
- Around line 21-28: The Google sign-in button in AuthButton.tsx lacks
hover/focus styles and a disabled/loading guard; update the component to use the
shared Button component (or add explicit hover: and focus-visible: utility
classes) and add a local loading state (e.g., isSigningIn) that is set true at
the start of handleGoogleSignIn and false on completion/error, disable the
button when isSigningIn to prevent repeated clicks, and surface a
loading/aria-busy state for accessibility; reference the existing
handleGoogleSignIn function and replace the native <button> with the shared
Button (or extend its className) and ensure the click handler early-returns if
isSigningIn is true.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 7323a0e3-4724-4690-828b-f027e943c2cb
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (24)
.husky/commit-msg.husky/pre-commitapp/auth/auth-error/page.tsxapp/auth/login/page.tsxbiome.jsoncomponents/Conversation/index.tsxcomponents/Inputs/InputConfig/index.tsxcomponents/auth/AuthButton.tsxcomponents/error-fallback.tsxcomponents/modals/ChakraModals/Login/index.tsxcomponents/modals/ModalRender/index.tsxcomponents/ui/breadcrumb.tsxcomponents/ui/collapsible.tsxcomponents/ui/command.tsxcomponents/ui/drawer.tsxcomponents/ui/dropdown-menu.tsxcomponents/ui/form.tsxcomponents/ui/popover.tsxcomponents/ui/sheet.tsxcomponents/ui/tooltip.tsxlib/local/capabilities.tspackage.jsontsconfig.jsonvitest.config.ts
💤 Files with no reviewable changes (2)
- tsconfig.json
- lib/local/capabilities.ts
- quote $1 in commit-msg hook to handle paths with spaces - drop redundant decodeURIComponent in auth-error page - remove duplicate Escape listener in Login modal; hide decorative icon
Summary
^/~).@next/envwithnext@16.2.4, bumps remaining outdated patches/minors (react,react-dom,@types/react,postcss,postgres,zustand,drizzle-kit,@tanstack/react-query(-devtools),motion,react-hook-form,tailwindcss,@tailwindcss/postcss,autoprefixer,@biomejs/biome).vitest@4provider shape (@vitest/browser-playwright), husky v9 hook format, biome 2.4 schema migration, drops deprecatedtsconfig.baseUrlfor TypeScript 6, and removesgpu?: unknownoverride inlib/local/capabilities.tsnow that the DOM lib shipsNavigator.gpu.Test plan
npx tsc --noEmit— cleanbun run test --project=unit— 5/5 passbun lint— 0 errors (2 pre-existing a11y warnings, unrelated)bun run build— compiles, 9 routes generatedbun storybook) — components renderNotes
bun auditreports 9 vulnerabilities (4 high, 5 moderate), all transitive deps of dev tooling (storybook/vite/vitest/commitlint/lint-staged/drizzle-kit). No production/runtime vulnerabilities. These will clear when upstream (storybook, vitest) pull newer vite/rollup.🤖 Generated with Claude Code
Summary by CodeRabbit