fix eslint formatting - #40
Open
Rabinagurung wants to merge 1 commit into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThis PR introduces ESLint and Prettier integration into a monorepo workspace by updating configurations, bumping the Clerk dependency, and applying consistent semicolon-terminated syntax formatting across ~50 UI component files, hooks, and utilities. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 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 docstrings
🧪 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: 2
🧹 Nitpick comments (3)
packages/ui/src/components/infinite-scroll-trigger.tsx (1)
23-23: Remove commented-out debug code.Similar to the hook file, this component contains commented-out
console.logstatements that should be removed for a cleaner codebase.Also applies to: 25-25
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/ui/src/components/infinite-scroll-trigger.tsx` at line 23, Remove the leftover commented debug statements in the InfiniteScrollTrigger React component: delete the commented-out console.log lines (the ones at the top of the file within the InfiniteScrollTrigger component, e.g., the commented "Infinite Scroll Trigger component called" and the other commented console.log) so the component and its import/hook usage remain unchanged and there are no stray commented debug logs left behind.packages/ui/src/hooks/useInfiniteScroll.ts (1)
16-17: Remove commented-out debug code.The file contains multiple commented-out
console.logstatements that appear to be debug artifacts. Consider removing them to keep the codebase clean.Also applies to: 22-23, 26-26, 31-31, 34-34, 49-49
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/ui/src/hooks/useInfiniteScroll.ts` around lines 16 - 17, Remove the leftover commented-out debug console.log statements in the useInfiniteScroll hook: delete the commented lines referencing console.log (e.g., the commented debug logs that reference status and other temporary prints) so the hook implementation (useInfiniteScroll) contains no commented debug artifacts; ensure no other commented console.log remains in the function or associated helper blocks to keep the code clean.packages/ui/src/hooks/use-mobile.ts (1)
6-8: Consider computing initial state eagerly to prevent layout shifts.While the current pattern is safe for SSR (effects don't run on server), initializing with
undefinedcauses the hook to returnfalseon first render, then update to the actual value after the effect runs. This can cause a brief layout shift in SSR scenarios.♻️ Optional refactor to eliminate hydration flash
- const [isMobile, setIsMobile] = React.useState<boolean | undefined>( - undefined, - ); + const [isMobile, setIsMobile] = React.useState<boolean | undefined>(() => + typeof window !== "undefined" + ? window.innerWidth < MOBILE_BREAKPOINT + : undefined, + );This initializes with the correct value immediately on the client while remaining safe on the server.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/ui/src/hooks/use-mobile.ts` around lines 6 - 8, The hook initializes isMobile to undefined causing a flash; change the React.useState initializer in use-mobile.ts to compute the initial value eagerly by checking for a browser environment (typeof window !== 'undefined') and using window.matchMedia('(max-width: XXXpx)') or the same media-query logic the effect uses to return true/false on first render, otherwise return undefined for SSR; keep the existing effect and setIsMobile logic unchanged so hydration remains safe while preventing the initial layout shift.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/ui/src/components/carousel.tsx`:
- Around line 96-105: The useEffect registers both "reInit" and "select"
listeners on api but the cleanup only removes "select", causing handler leaks;
update the cleanup for the effect that uses api and onSelect so it unregisters
both events (call api.off("reInit", onSelect) and api.off("select", onSelect) or
use optional chaining/api?.off for safety) to ensure no duplicate onSelect calls
are retained.
In `@packages/ui/src/components/dicebear-avatar.tsx`:
- Around line 28-31: The current call passes seed.toLowerCase().trim() which
will throw if seed is nullish; update the seed normalization before calling
createAvatar (the seed argument) to defend against null/undefined by coercing to
a safe string (e.g., use a fallback like '' or String(seed ?? '') then
.toLowerCase().trim()) so createAvatar(glass, { seed: /*safe-normalized-seed*/,
size }) never receives a nullish value.
---
Nitpick comments:
In `@packages/ui/src/components/infinite-scroll-trigger.tsx`:
- Line 23: Remove the leftover commented debug statements in the
InfiniteScrollTrigger React component: delete the commented-out console.log
lines (the ones at the top of the file within the InfiniteScrollTrigger
component, e.g., the commented "Infinite Scroll Trigger component called" and
the other commented console.log) so the component and its import/hook usage
remain unchanged and there are no stray commented debug logs left behind.
In `@packages/ui/src/hooks/use-mobile.ts`:
- Around line 6-8: The hook initializes isMobile to undefined causing a flash;
change the React.useState initializer in use-mobile.ts to compute the initial
value eagerly by checking for a browser environment (typeof window !==
'undefined') and using window.matchMedia('(max-width: XXXpx)') or the same
media-query logic the effect uses to return true/false on first render,
otherwise return undefined for SSR; keep the existing effect and setIsMobile
logic unchanged so hydration remains safe while preventing the initial layout
shift.
In `@packages/ui/src/hooks/useInfiniteScroll.ts`:
- Around line 16-17: Remove the leftover commented-out debug console.log
statements in the useInfiniteScroll hook: delete the commented lines referencing
console.log (e.g., the commented debug logs that reference status and other
temporary prints) so the hook implementation (useInfiniteScroll) contains no
commented debug artifacts; ensure no other commented console.log remains in the
function or associated helper blocks to keep the code clean.
🪄 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: 0a3fc4d7-4dd5-490e-a89e-029b685c41fa
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (71)
.vscode/settings.jsonapps/web/app/layout.tsxapps/web/package.jsonpackage.jsonpackages/eslint-config/base.jspackages/eslint-config/package.jsonpackages/ui/eslint.config.jspackages/ui/postcss.config.mjspackages/ui/src/components/accordion.tsxpackages/ui/src/components/ai/branch.tsxpackages/ui/src/components/ai/conversation.tsxpackages/ui/src/components/ai/input.tsxpackages/ui/src/components/ai/message.tsxpackages/ui/src/components/ai/reasoning.tsxpackages/ui/src/components/ai/response.tsxpackages/ui/src/components/ai/source.tsxpackages/ui/src/components/ai/suggestion.tsxpackages/ui/src/components/ai/tool.tsxpackages/ui/src/components/alert-dialog.tsxpackages/ui/src/components/alert.tsxpackages/ui/src/components/aspect-ratio.tsxpackages/ui/src/components/avatar.tsxpackages/ui/src/components/badge.tsxpackages/ui/src/components/breadcrumb.tsxpackages/ui/src/components/button.tsxpackages/ui/src/components/calendar.tsxpackages/ui/src/components/card.tsxpackages/ui/src/components/carousel.tsxpackages/ui/src/components/chart.tsxpackages/ui/src/components/checkbox.tsxpackages/ui/src/components/collapsible.tsxpackages/ui/src/components/command.tsxpackages/ui/src/components/context-menu.tsxpackages/ui/src/components/conversation-status-icon.tsxpackages/ui/src/components/dialog.tsxpackages/ui/src/components/dicebear-avatar.tsxpackages/ui/src/components/drawer.tsxpackages/ui/src/components/dropdown-menu.tsxpackages/ui/src/components/dropzone.tsxpackages/ui/src/components/form.tsxpackages/ui/src/components/hint.tsxpackages/ui/src/components/hover-card.tsxpackages/ui/src/components/infinite-scroll-trigger.tsxpackages/ui/src/components/input-otp.tsxpackages/ui/src/components/input.tsxpackages/ui/src/components/label.tsxpackages/ui/src/components/menubar.tsxpackages/ui/src/components/navigation-menu.tsxpackages/ui/src/components/pagination.tsxpackages/ui/src/components/popover.tsxpackages/ui/src/components/progress.tsxpackages/ui/src/components/radio-group.tsxpackages/ui/src/components/resizable.tsxpackages/ui/src/components/scroll-area.tsxpackages/ui/src/components/select.tsxpackages/ui/src/components/separator.tsxpackages/ui/src/components/sheet.tsxpackages/ui/src/components/sidebar.tsxpackages/ui/src/components/skeleton.tsxpackages/ui/src/components/slider.tsxpackages/ui/src/components/sonner.tsxpackages/ui/src/components/switch.tsxpackages/ui/src/components/table.tsxpackages/ui/src/components/tabs.tsxpackages/ui/src/components/textarea.tsxpackages/ui/src/components/toggle-group.tsxpackages/ui/src/components/toggle.tsxpackages/ui/src/components/tooltip.tsxpackages/ui/src/hooks/use-mobile.tspackages/ui/src/hooks/useInfiniteScroll.tspackages/ui/src/lib/utils.ts
Comment on lines
96
to
+105
| React.useEffect(() => { | ||
| if (!api) return | ||
| onSelect(api) | ||
| api.on("reInit", onSelect) | ||
| api.on("select", onSelect) | ||
| if (!api) return; | ||
| onSelect(api); | ||
| api.on("reInit", onSelect); | ||
| api.on("select", onSelect); | ||
|
|
||
| return () => { | ||
| api?.off("select", onSelect) | ||
| } | ||
| }, [api, onSelect]) | ||
| api?.off("select", onSelect); | ||
| }; | ||
| }, [api, onSelect]); |
There was a problem hiding this comment.
Missing cleanup for reInit listener.
Line 99 registers "reInit" but cleanup only unregisters "select". This can accumulate handlers and trigger duplicate onSelect calls.
Suggested fix
React.useEffect(() => {
if (!api) return;
onSelect(api);
api.on("reInit", onSelect);
api.on("select", onSelect);
return () => {
- api?.off("select", onSelect);
+ api.off("reInit", onSelect);
+ api.off("select", onSelect);
};
}, [api, onSelect]);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| React.useEffect(() => { | |
| if (!api) return | |
| onSelect(api) | |
| api.on("reInit", onSelect) | |
| api.on("select", onSelect) | |
| if (!api) return; | |
| onSelect(api); | |
| api.on("reInit", onSelect); | |
| api.on("select", onSelect); | |
| return () => { | |
| api?.off("select", onSelect) | |
| } | |
| }, [api, onSelect]) | |
| api?.off("select", onSelect); | |
| }; | |
| }, [api, onSelect]); | |
| React.useEffect(() => { | |
| if (!api) return; | |
| onSelect(api); | |
| api.on("reInit", onSelect); | |
| api.on("select", onSelect); | |
| return () => { | |
| api.off("reInit", onSelect); | |
| api.off("select", onSelect); | |
| }; | |
| }, [api, onSelect]); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/ui/src/components/carousel.tsx` around lines 96 - 105, The useEffect
registers both "reInit" and "select" listeners on api but the cleanup only
removes "select", causing handler leaks; update the cleanup for the effect that
uses api and onSelect so it unregisters both events (call api.off("reInit",
onSelect) and api.off("select", onSelect) or use optional chaining/api?.off for
safety) to ensure no duplicate onSelect calls are retained.
Comment on lines
+28
to
+31
| const avatar = createAvatar(glass, { | ||
| seed: seed.toLowerCase().trim(), | ||
| size, | ||
| }); |
There was a problem hiding this comment.
Guard seed normalization to prevent runtime crashes
seed.toLowerCase().trim() will throw if seed is ever nullish at runtime. Given current call sites may pass optional chained values, this path should be defensive.
Suggested fix
- const avatar = createAvatar(glass, {
- seed: seed.toLowerCase().trim(),
- size,
- });
+ const normalizedSeed = (seed ?? "").toString().toLowerCase().trim() || "default";
+ const avatar = createAvatar(glass, {
+ seed: normalizedSeed,
+ size,
+ });📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const avatar = createAvatar(glass, { | |
| seed: seed.toLowerCase().trim(), | |
| size, | |
| }); | |
| const normalizedSeed = (seed ?? "").toString().toLowerCase().trim() || "default"; | |
| const avatar = createAvatar(glass, { | |
| seed: normalizedSeed, | |
| size, | |
| }); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/ui/src/components/dicebear-avatar.tsx` around lines 28 - 31, The
current call passes seed.toLowerCase().trim() which will throw if seed is
nullish; update the seed normalization before calling createAvatar (the seed
argument) to defend against null/undefined by coercing to a safe string (e.g.,
use a fallback like '' or String(seed ?? '') then .toLowerCase().trim()) so
createAvatar(glass, { seed: /*safe-normalized-seed*/, size }) never receives a
nullish value.
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 by CodeRabbit