merge develop to main#7
Open
damnthonyy wants to merge 8 commits intomainfrom
Open
Conversation
…vent listener in carousel.tsx ( #5 ) Co-authored-by: Antoine <[email protected]>
Feat/implement dashboard v0
|
Review Summary by QodoAdd comprehensive UI component library and robot control dashboard system
WalkthroughsDescription• Comprehensive UI component library with 50+ reusable components built on Radix UI, Recharts, and other modern libraries • Complete design system with CSS custom properties for colors, spacing, and theme configuration • Robot control dashboard with task management, metrics visualization, manual control, and camera feed • Form system with react-hook-form integration for validated form handling • Utility functions for class name merging (cn()) and mobile viewport detection (useIsMobile()) • Expanded dependencies including Radix UI primitives, form validation (zod, react-hook-form), charting (Recharts), and animations (Framer Motion) • Updated build configuration with direct ESLint usage instead of Next.js lint wrapper Diagramflowchart LR
A["Design System<br/>CSS Variables"] --> B["UI Components<br/>50+ Components"]
C["Radix UI<br/>Primitives"] --> B
D["Recharts<br/>Library"] --> B
B --> E["Dashboard<br/>Robot Control"]
F["Form System<br/>react-hook-form"] --> E
G["Utilities<br/>cn, useIsMobile"] --> B
H["Dependencies<br/>Updated"] --> B
File Changes1. src/components/ui/use-mobile.ts
|
Code Review by Qodo
1. React namespace undefined
|
Member
Author
|
dont need coverage for frontend... not > 80% like so, merge to main |
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
Comment on lines
+3
to
+18
| import { useTheme } from 'next-themes'; | ||
| import { Toaster as Sonner, ToasterProps } from 'sonner'; | ||
|
|
||
| const Toaster = ({ ...props }: ToasterProps) => { | ||
| const { theme = 'system' } = useTheme(); | ||
|
|
||
| return ( | ||
| <Sonner | ||
| theme={theme as ToasterProps['theme']} | ||
| className="toaster group" | ||
| style={ | ||
| { | ||
| '--normal-bg': 'var(--popover)', | ||
| '--normal-text': 'var(--popover-foreground)', | ||
| '--normal-border': 'var(--border)', | ||
| } as React.CSSProperties |
There was a problem hiding this comment.
1. React namespace undefined 🐞 Bug ✓ Correctness
src/components/ui/sonner.tsx uses the React namespace in a type assertion (React.CSSProperties) but does not import React, which causes a TypeScript compile error. Because tsconfig includes all **/*.ts(x) files, pnpm run typecheck will fail even if this component is not imported anywhere.
Agent Prompt
### Issue description
`src/components/ui/sonner.tsx` uses `React.CSSProperties` but does not import React (or `CSSProperties`). This causes a TypeScript error (`Cannot find name 'React'`) during `tsc --noEmit`.
### Issue Context
The repo’s `tsconfig.json` includes all `**/*.ts` / `**/*.tsx`, so this fails CI even if the component isn’t imported.
### Fix Focus Areas
- src/components/ui/sonner.tsx[1-20]
### Suggested change
Add an import and keep style typing explicit, e.g.:
- `import * as React from 'react';`
Or replace the assertion with:
- `import type { CSSProperties } from 'react';`
- `} as CSSProperties`
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Comment on lines
+32
to
+44
| const CardTitle = React.forwardRef< | ||
| HTMLParagraphElement, | ||
| React.HTMLAttributes<HTMLHeadingElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <h3 | ||
| ref={ref} | ||
| className={cn( | ||
| 'font-semibold leading-none tracking-tight text-zinc-900 text-lg', | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); |
There was a problem hiding this comment.
2. Cardtitle ref type mismatch 🐞 Bug ✓ Correctness
src/components/ui/card.tsx defines CardTitle as forwardRef<HTMLParagraphElement> but renders an <h3> and assigns that ref to it, which is a type mismatch. Under strict TypeScript settings this can produce ref-type errors and break compilation for consumers using refs.
Agent Prompt
### Issue description
`CardTitle` forwards a ref typed as `HTMLParagraphElement` but renders an `<h3>` and assigns that ref to it. This is a type mismatch that can cause TypeScript compilation errors when refs are used.
### Issue Context
The repo runs TypeScript in strict mode and typechecks all `**/*.ts(x)`.
### Fix Focus Areas
- src/components/ui/card.tsx[32-44]
### Suggested change
Update the ref generic to match the element:
- `React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(... render <h3 /> ...)`
(Alternative: `React.forwardRef<React.ElementRef<'h3'>, React.ComponentPropsWithoutRef<'h3'>>`)
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
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.
nothing changes