Conversation
- Use eslint CLI for storefront lint (next lint removed in Next 16) - Fix conditional useId in RadioGroup; Input/Textarea type aliases; prefer-const - Temporarily disable react-hooks/set-state-in-effect; remove redundant disables - Add storefront pnpm lint step after typecheck in GitHub Actions Made-with: Cursor
📝 WalkthroughWalkthroughUpdated ESLint configuration to disable the Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 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 (2)
.github/workflows/ci.yml (1)
107-130: Consider renaming the job id for clarity (optional).The display name is now "Storefront typecheck and lint" but the job id remains
typecheck-storefront. If any branch protection / required status checks are configured against this job id, the id stays stable (good). Otherwise, consider renaming tostorefront-cior similar for symmetry with the display name. No functional issue.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.github/workflows/ci.yml around lines 107 - 130, The job id "typecheck-storefront" and the display name "Storefront typecheck and lint" are inconsistent; to improve clarity (unless branch protection depends on the current id) rename the job id to match the display name style — e.g., change the job key from typecheck-storefront to storefront-ci (or storefront-typecheck-lint) in the workflow definition so the job id and the name are symmetrical; update any external references (branch protection or required status checks) that rely on the old id if you change it.apps/storefront/eslint.config.mjs (1)
8-14: Globally disablingreact-hooks/set-state-in-effectis broad — consider scoping or tracking.The comment acknowledges this is temporary and will be revisited after launch, which is reasonable. A few suggestions to reduce the blast radius in the meantime:
- Scope the override to just the files that currently need it (e.g.,
OrderConfirmationContent.tsx,CheckoutWithStripe.tsx,useCheckoutPickup.ts) via afiles:pattern, so new code still gets flagged.- Alternatively, use
"warn"instead of"off"so violations are visible in local dev without failing CI.- Open a tracking issue referenced from the comment so this does not drift post-launch.
♻️ Example: file-scoped override
{ + files: [ + "src/app/**/order-confirmation/OrderConfirmationContent.tsx", + "src/components/CheckoutWithStripe.tsx", + "src/components/checkout/hooks/useCheckoutPickup.ts", + ], rules: { - // Many valid patterns (cart refresh, hero readiness, controlled inputs) trigger this; - // re-enable and refactor incrementally after launch. + // TODO(`#issue`): Re-enable after launch; refactor to derive state or use event handlers. "react-hooks/set-state-in-effect": "off", }, },🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/storefront/eslint.config.mjs` around lines 8 - 14, The global disable of the lint rule "react-hooks/set-state-in-effect" is too broad—restrict it: instead of turning it off globally in eslint.config.mjs, add an overrides block that targets only the files that actually need it (e.g., OrderConfirmationContent.tsx, CheckoutWithStripe.tsx, useCheckoutPickup.ts) and set "react-hooks/set-state-in-effect": "off" there; for the rest of the repo leave the rule enabled (or set to "warn" globally) so new code is still flagged, and add a short tracking-note comment referencing a created issue ID to ensure the temporary exception is revisited post-launch.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/storefront/src/components/ui/input.tsx`:
- Line 4: InputProps is currently a type alias; change it to an exported
interface to follow repo conventions: declare export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> { } (retain the same base
type and name so components using InputProps continue to work), and update any
imports/uses if necessary to reflect the interface export.
In `@apps/storefront/src/components/ui/textarea.tsx`:
- Line 4: TextareaProps is currently declared as a type alias but repo
guidelines require an interface for props; replace the exported type alias with
an exported interface named TextareaProps that extends
React.TextareaHTMLAttributes<HTMLTextAreaElement> (preserving the same
shape/extends relationship) so existing consumers and typings remain unchanged
while conforming to the interface-based props convention.
---
Nitpick comments:
In @.github/workflows/ci.yml:
- Around line 107-130: The job id "typecheck-storefront" and the display name
"Storefront typecheck and lint" are inconsistent; to improve clarity (unless
branch protection depends on the current id) rename the job id to match the
display name style — e.g., change the job key from typecheck-storefront to
storefront-ci (or storefront-typecheck-lint) in the workflow definition so the
job id and the name are symmetrical; update any external references (branch
protection or required status checks) that rely on the old id if you change it.
In `@apps/storefront/eslint.config.mjs`:
- Around line 8-14: The global disable of the lint rule
"react-hooks/set-state-in-effect" is too broad—restrict it: instead of turning
it off globally in eslint.config.mjs, add an overrides block that targets only
the files that actually need it (e.g., OrderConfirmationContent.tsx,
CheckoutWithStripe.tsx, useCheckoutPickup.ts) and set
"react-hooks/set-state-in-effect": "off" there; for the rest of the repo leave
the rule enabled (or set to "warn" globally) so new code is still flagged, and
add a short tracking-note comment referencing a created issue ID to ensure the
temporary exception is revisited post-launch.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 2dce2f4d-c667-424c-b174-84903590c4b6
📒 Files selected for processing (10)
.github/workflows/ci.ymlapps/storefront/eslint.config.mjsapps/storefront/package.jsonapps/storefront/src/app/[locale]/order-confirmation/OrderConfirmationContent.tsxapps/storefront/src/components/CheckoutWithStripe.tsxapps/storefront/src/components/checkout/hooks/useCheckoutPickup.tsapps/storefront/src/components/ui/input.tsxapps/storefront/src/components/ui/radio-group.tsxapps/storefront/src/components/ui/textarea.tsxapps/storefront/src/lib/storefront-href.ts
💤 Files with no reviewable changes (3)
- apps/storefront/src/app/[locale]/order-confirmation/OrderConfirmationContent.tsx
- apps/storefront/src/components/CheckoutWithStripe.tsx
- apps/storefront/src/components/checkout/hooks/useCheckoutPickup.ts
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Test Commerce Backend
- GitHub Check: Storefront typecheck and lint
🧰 Additional context used
📓 Path-based instructions (17)
apps/storefront/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/architecture.mdc)
apps/storefront/**/*.{ts,tsx,js,jsx}: Storefront app inapps/storefrontshould be a Next.js customer UI with i18n routes that composes data from both Medusa and Payload CMS
Customer-facing URLs must follow the Storefront routing pattern with locale prefixes (/da/...,/en/...)
Files:
apps/storefront/src/lib/storefront-href.tsapps/storefront/src/components/ui/input.tsxapps/storefront/src/components/ui/textarea.tsxapps/storefront/src/components/ui/radio-group.tsx
**/lib/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/code-structure.mdc)
**/lib/**/*.{ts,tsx}: Pure utilities / mappers (lib/.ts) should be ≤ ~400 lines; split by domain (cart-.ts, checkout-*.ts)
Write pure helpers (formatting, mapping) using function keyword with single responsibility for easy unit testing
Files:
apps/storefront/src/lib/storefront-href.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/code-structure.mdc)
**/*.{ts,tsx}: Treat files > ~400 lines in one .tsx as tech debt — split before adding features
Use interface for object shapes in TypeScript; keep near usage or in *.types.ts files
Avoid any type in TypeScript; use unknown + narrowing or Zod-inferred types where validated
Prefer as const objects + union type over enums unless enum is required by an external API
Prefer direct imports from the module you need (e.g.@/components/ui/button) to avoid pulling large barrels into client bundlesDefine a type for const functions when possible
**/*.{ts,tsx}: Use interfaces for object shapes in TypeScript; write functional components with typed props
Avoid enums; preferas constobjects combined with union types
Do not useanytype; useunknownwith type narrowing or Zod-inferred types for validated data
Files:
apps/storefront/src/lib/storefront-href.tsapps/storefront/src/components/ui/input.tsxapps/storefront/src/components/ui/textarea.tsxapps/storefront/src/components/ui/radio-group.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/front-end-cursor-rules.mdc)
**/*.{js,jsx,ts,tsx}: Use early returns whenever possible to make the code more readable
Use descriptive variable and function/const names
Use const instead of function declarations, for example 'const toggle = () =>'
Don't use semicolons
Files:
apps/storefront/src/lib/storefront-href.tsapps/storefront/src/components/ui/input.tsxapps/storefront/src/components/ui/textarea.tsxapps/storefront/src/components/ui/radio-group.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/nextjs-react-typescript-cursor-rules.mdc)
**/*.{ts,tsx,js,jsx}: Use concise, technical TypeScript; write functional and declarative code; avoid classes
Prefer modularization over duplication; use descriptive names likeisLoading,hasError
Use thefunctionkeyword for pure functions; write declarative JSX
Files:
apps/storefront/src/lib/storefront-href.tsapps/storefront/src/components/ui/input.tsxapps/storefront/src/components/ui/textarea.tsxapps/storefront/src/components/ui/radio-group.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursor/rules/nextjs-react-typescript-cursor-rules.mdc)
**/*.{tsx,ts}: File layout: place exported component first, then subcomponents, helpers, static content, types. Followcode-structure.mdcfor file size and splitting decisions
Favor named exports for components
Default to Server Components in Next.js; use'use client'only for interactivity, browser APIs, or third-party widgets like Stripe; keep client boundaries small
Usenext/dynamicfor heavy or below-the-fold components
Usenuqslibrary for managing URL state and search parameters
Do not fetch data on the client when the server can perform the fetch; avoid duplicating fetches in layouts and pages without usingReact.cache()
Files:
apps/storefront/src/lib/storefront-href.tsapps/storefront/src/components/ui/input.tsxapps/storefront/src/components/ui/textarea.tsxapps/storefront/src/components/ui/radio-group.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/security.mdc)
Do not log or echo secrets; redact secrets in examples and documentation
Files:
apps/storefront/src/lib/storefront-href.tsapps/storefront/src/components/ui/input.tsxapps/storefront/src/components/ui/textarea.tsxapps/storefront/src/components/ui/radio-group.tsx
apps/storefront/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/storefront-next.mdc)
apps/storefront/src/**/*.{ts,tsx}: Talk to Medusa via@medusajs/js-sdkand the shared client insrc/lib/medusa.ts(publishable key,NEXT_PUBLIC_MEDUSA_BACKEND_URL)
Custom store endpoints: usemedusa.client.fetchor SDK extensions consistently; do not scatter rawfetchURLs without a single base pattern
Payload/content: use existinglib/payload-*.tshelpers; passlocale(da/en) for localized APIs
Parallelize independent loads: start async work thenPromise.allto avoid sequential waterfalls
Choose cache explicitly:cache: 'no-store'vsrevalidatevs static per data freshness needs
Followcode-structure.mdcfor file structure and organization: line budgets, splitting steps/hooks/types, React/TypeScript hygiene
Files:
apps/storefront/src/lib/storefront-href.tsapps/storefront/src/components/ui/input.tsxapps/storefront/src/components/ui/textarea.tsxapps/storefront/src/components/ui/radio-group.tsx
**/package.json
📄 CodeRabbit inference engine (.cursor/rules/security.mdc)
Prefer pinned or lockfile-resolved versions for production dependencies; review new packages for supply-chain risk when adding to sensitive paths (payment, auth)
Files:
apps/storefront/package.json
**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/code-structure.mdc)
**/components/**/*.{ts,tsx}: Single-purpose component (card, form section, modal) should be ≤ ~150 lines; split sections into child components
Split checkout/wizard flows by UI slice into separate components (ShippingStep.tsx, ReviewStep.tsx, PaymentStep.tsx) with a thin orchestrator
Use 'use client' directive only in leaf files (inputs, buttons, Stripe wrapper); keep parent components as server components that pass serializable props
Do not define components inside another component's body as this creates new function identity every render causing remounts and broken state
Do not inline huge JSX blocks; extract named components or renderX() only if static; prefer separate files for non-trivial blocks
For lists, map to a small row/presentational component in its own file when rows have logic or > ~15 lines of JSX
Prefer explicit interfaces for props; avoid passing entire API responses when only 3 fields are needed to reduce client bundles and clarify contracts
Keep shared UI in components/ui/ (Shadcn/Radix); place feature-specific UI in components//
Files:
apps/storefront/src/components/ui/input.tsxapps/storefront/src/components/ui/textarea.tsxapps/storefront/src/components/ui/radio-group.tsx
**/{hooks,components}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/code-structure.mdc)
Extract stateful logic into custom hooks (useCheckoutShipping.ts, usePickupPoints.ts); keep components focused on rendering and calling hooks
Files:
apps/storefront/src/components/ui/input.tsxapps/storefront/src/components/ui/textarea.tsxapps/storefront/src/components/ui/radio-group.tsx
**/*.{jsx,tsx,html}
📄 CodeRabbit inference engine (.cursor/rules/front-end-cursor-rules.mdc)
**/*.{jsx,tsx,html}: Always use Tailwind classes for styling HTML elements; avoid using CSS or tags
Implement accessibility features on elements such as tabindex='0', aria-label, on:click, and on:keydown attributes
Files:
apps/storefront/src/components/ui/input.tsxapps/storefront/src/components/ui/textarea.tsxapps/storefront/src/components/ui/radio-group.tsx
**/*.{svelte,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/front-end-cursor-rules.mdc)
Use class: instead of the ternary operator in class tags whenever possible
Files:
apps/storefront/src/components/ui/input.tsxapps/storefront/src/components/ui/textarea.tsxapps/storefront/src/components/ui/radio-group.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/front-end-cursor-rules.mdc)
Event functions should be named with a 'handle' prefix, like 'handleClick' for onClick and 'handleKeyDown' for onKeyDown
Files:
apps/storefront/src/components/ui/input.tsxapps/storefront/src/components/ui/textarea.tsxapps/storefront/src/components/ui/radio-group.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/nextjs-react-typescript-cursor-rules.mdc)
**/*.{tsx,jsx}: Use simple, concise conditionals in JSX; avoid unnecessary braces
Use Shadcn UI, Radix UI, and Tailwind for UI and styling; implement mobile-first responsive design
Wrap client trees in Suspense with appropriate fallbacks
Usenext/imagefor images with WebP format where possible, include sizes attribute, enable lazy loading, and mark LCP images with priority
Files:
apps/storefront/src/components/ui/input.tsxapps/storefront/src/components/ui/textarea.tsxapps/storefront/src/components/ui/radio-group.tsx
apps/storefront/src/**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/storefront-next.mdc)
apps/storefront/src/**/*.tsx: Default to Server Components in Next.js. Use'use client'only for interactivity, browser APIs, Stripe, or local state
Heavy or rare UI (modals, checkout sub-steps, maps): prefernext/dynamicwith loading fallback
Minimize props passed from server to client components; serialize only what the client needs
Files:
apps/storefront/src/components/ui/input.tsxapps/storefront/src/components/ui/textarea.tsxapps/storefront/src/components/ui/radio-group.tsx
apps/storefront/src/**/*.{tsx,css,scss}
📄 CodeRabbit inference engine (.cursor/rules/storefront-next.mdc)
Focus states on inputs: use border states, not focus rings (see project design spec)
Files:
apps/storefront/src/components/ui/input.tsxapps/storefront/src/components/ui/textarea.tsxapps/storefront/src/components/ui/radio-group.tsx
🧠 Learnings (12)
📓 Common learnings
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/storefront-next.mdc:0-0
Timestamp: 2026-04-15T16:59:32.095Z
Learning: Applies to apps/storefront/src/**/*.{ts,tsx} : Follow `code-structure.mdc` for file structure and organization: line budgets, splitting steps/hooks/types, React/TypeScript hygiene
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/architecture.mdc:0-0
Timestamp: 2026-04-15T16:58:24.041Z
Learning: Applies to apps/storefront/**/*.{ts,tsx,js,jsx} : Storefront app in `apps/storefront` should be a Next.js customer UI with i18n routes that composes data from both Medusa and Payload CMS
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/code-structure.mdc:0-0
Timestamp: 2026-04-15T16:58:38.430Z
Learning: Applies to **/{hooks,components}/**/*.{ts,tsx} : Extract stateful logic into custom hooks (useCheckoutShipping.ts, usePickupPoints.ts); keep components focused on rendering and calling hooks
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/nextjs-react-typescript-cursor-rules.mdc:0-0
Timestamp: 2026-04-15T16:59:08.330Z
Learning: Applies to **/*.{ts,tsx} : Use interfaces for object shapes in TypeScript; write functional components with typed props
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/code-structure.mdc:0-0
Timestamp: 2026-04-15T16:58:38.430Z
Learning: Applies to **/components/**/*.{ts,tsx} : Prefer explicit interfaces for props; avoid passing entire API responses when only 3 fields are needed to reduce client bundles and clarify contracts
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/nextjs-react-typescript-cursor-rules.mdc:0-0
Timestamp: 2026-04-15T16:59:08.330Z
Learning: Applies to **/*.{tsx,jsx} : Use Shadcn UI, Radix UI, and Tailwind for UI and styling; implement mobile-first responsive design
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/code-structure.mdc:0-0
Timestamp: 2026-04-15T16:58:38.430Z
Learning: Applies to **/components/**/*.{ts,tsx} : Do not inline huge JSX blocks; extract named components or renderX() only if static; prefer separate files for non-trivial blocks
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/code-structure.mdc:0-0
Timestamp: 2026-04-15T16:58:38.430Z
Learning: Applies to **/components/**/*.{ts,tsx} : Split checkout/wizard flows by UI slice into separate components (ShippingStep.tsx, ReviewStep.tsx, PaymentStep.tsx) with a thin orchestrator
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/nextjs-react-typescript-cursor-rules.mdc:0-0
Timestamp: 2026-04-15T16:59:08.330Z
Learning: Applies to **/*.{tsx,ts} : Default to Server Components in Next.js; use `'use client'` only for interactivity, browser APIs, or third-party widgets like Stripe; keep client boundaries small
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/storefront-next.mdc:0-0
Timestamp: 2026-04-15T16:59:32.095Z
Learning: Applies to apps/storefront/src/**/*.tsx : Default to Server Components in Next.js. Use `'use client'` only for interactivity, browser APIs, Stripe, or local state
📚 Learning: 2026-04-15T16:58:24.041Z
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/architecture.mdc:0-0
Timestamp: 2026-04-15T16:58:24.041Z
Learning: Applies to apps/storefront/**/*.{ts,tsx,js,jsx} : Customer-facing URLs must follow the Storefront routing pattern with locale prefixes (`/da/...`, `/en/...`)
Applied to files:
apps/storefront/src/lib/storefront-href.ts
📚 Learning: 2026-04-15T16:59:32.095Z
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/storefront-next.mdc:0-0
Timestamp: 2026-04-15T16:59:32.095Z
Learning: Applies to apps/storefront/src/**/*.{ts,tsx} : Payload/content: use existing `lib/payload-*.ts` helpers; pass `locale` (`da` / `en`) for localized APIs
Applied to files:
apps/storefront/src/lib/storefront-href.ts
📚 Learning: 2026-04-15T16:59:32.095Z
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/storefront-next.mdc:0-0
Timestamp: 2026-04-15T16:59:32.095Z
Learning: Applies to apps/storefront/src/**/*.{ts,tsx} : Custom store endpoints: use `medusa.client.fetch` or SDK extensions consistently; do not scatter raw `fetch` URLs without a single base pattern
Applied to files:
apps/storefront/src/lib/storefront-href.ts
📚 Learning: 2026-04-15T16:59:32.095Z
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/storefront-next.mdc:0-0
Timestamp: 2026-04-15T16:59:32.095Z
Learning: Applies to apps/storefront/src/**/*.{ts,tsx} : Follow `code-structure.mdc` for file structure and organization: line budgets, splitting steps/hooks/types, React/TypeScript hygiene
Applied to files:
apps/storefront/src/lib/storefront-href.ts.github/workflows/ci.ymlapps/storefront/eslint.config.mjs
📚 Learning: 2026-04-15T16:58:24.041Z
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/architecture.mdc:0-0
Timestamp: 2026-04-15T16:58:24.041Z
Learning: Applies to apps/storefront/**/*.{ts,tsx,js,jsx} : Storefront app in `apps/storefront` should be a Next.js customer UI with i18n routes that composes data from both Medusa and Payload CMS
Applied to files:
apps/storefront/package.json.github/workflows/ci.yml
📚 Learning: 2026-04-15T16:58:38.430Z
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/code-structure.mdc:0-0
Timestamp: 2026-04-15T16:58:38.430Z
Learning: Applies to **/components/**/*.{ts,tsx} : Prefer explicit interfaces for props; avoid passing entire API responses when only 3 fields are needed to reduce client bundles and clarify contracts
Applied to files:
apps/storefront/src/components/ui/input.tsxapps/storefront/src/components/ui/textarea.tsx
📚 Learning: 2026-04-15T16:59:08.330Z
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/nextjs-react-typescript-cursor-rules.mdc:0-0
Timestamp: 2026-04-15T16:59:08.330Z
Learning: Applies to **/*.{ts,tsx} : Use interfaces for object shapes in TypeScript; write functional components with typed props
Applied to files:
apps/storefront/src/components/ui/input.tsxapps/storefront/src/components/ui/textarea.tsx
📚 Learning: 2026-04-15T16:59:32.095Z
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/storefront-next.mdc:0-0
Timestamp: 2026-04-15T16:59:32.095Z
Learning: Applies to apps/storefront/src/**/*.{tsx,css,scss} : Focus states on inputs: use border states, not focus rings (see project design spec)
Applied to files:
apps/storefront/src/components/ui/input.tsx
📚 Learning: 2026-04-15T16:58:38.430Z
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/code-structure.mdc:0-0
Timestamp: 2026-04-15T16:58:38.430Z
Learning: Applies to **/*.{ts,tsx} : Use interface for object shapes in TypeScript; keep near usage or in *.types.ts files
Applied to files:
apps/storefront/src/components/ui/textarea.tsx
📚 Learning: 2026-04-15T16:59:08.330Z
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/nextjs-react-typescript-cursor-rules.mdc:0-0
Timestamp: 2026-04-15T16:59:08.330Z
Learning: Applies to **/*.{tsx,ts} : Favor named exports for components
Applied to files:
apps/storefront/src/components/ui/textarea.tsx
📚 Learning: 2026-04-15T16:58:38.430Z
Learnt from: CR
Repo: eskoubar95/guapo PR: 0
File: .cursor/rules/code-structure.mdc:0-0
Timestamp: 2026-04-15T16:58:38.430Z
Learning: Applies to **/components/**/*.{ts,tsx} : Keep shared UI in components/ui/ (Shadcn/Radix); place feature-specific UI in components/<feature>/
Applied to files:
apps/storefront/src/components/ui/radio-group.tsx
🔇 Additional comments (4)
apps/storefront/src/components/ui/radio-group.tsx (2)
40-41: Good hook-order fix for generated group name.This change correctly makes
useId()unconditional and keeps the fallbacknamestable.
78-79: Nice improvement for item ID generation and a11y linkage.Unconditional
useId()here is correct and keepslabel↔inputassociation reliable whenidis not provided.apps/storefront/src/lib/storefront-href.ts (1)
16-16: Good lint-safe immutability update.Switching
pathtoconstis correct here and keeps behavior unchanged while tightening intent.apps/storefront/package.json (1)
9-9: LGTM — aligns with Next 16 removal ofnext lint.Switching to
eslint .matches Next 16's deprecation of the built-in lint command, andeslint-config-next@16.1.6is already present in devDependencies.
| import { cn } from "@/lib/utils"; | ||
|
|
||
| export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {} | ||
| export type InputProps = React.InputHTMLAttributes<HTMLInputElement>; |
There was a problem hiding this comment.
Keep InputProps as an interface per repository conventions.
This alias conflicts with the project rule to use explicit interfaces for object-shaped props.
Suggested change
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+export interface InputProps
+ extends React.InputHTMLAttributes<HTMLInputElement> {}As per coding guidelines: "Use interfaces for object shapes in TypeScript; write functional components with typed props" and "Prefer explicit interfaces for props".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/storefront/src/components/ui/input.tsx` at line 4, InputProps is
currently a type alias; change it to an exported interface to follow repo
conventions: declare export interface InputProps extends
React.InputHTMLAttributes<HTMLInputElement> { } (retain the same base type and
name so components using InputProps continue to work), and update any
imports/uses if necessary to reflect the interface export.
| import { cn } from "@/lib/utils"; | ||
|
|
||
| export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {} | ||
| export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>; |
There was a problem hiding this comment.
Use an interface for exported props to match repo TypeScript rules.
TextareaProps was changed to a type alias, but repo guidelines require interfaces for object-shaped props contracts.
Suggested change
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+export interface TextareaProps
+ extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}As per coding guidelines: "Use interface for object shapes in TypeScript" and "Prefer explicit interfaces for props".
📝 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.
| export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>; | |
| export interface TextareaProps | |
| extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/storefront/src/components/ui/textarea.tsx` at line 4, TextareaProps is
currently declared as a type alias but repo guidelines require an interface for
props; replace the exported type alias with an exported interface named
TextareaProps that extends React.TextareaHTMLAttributes<HTMLTextAreaElement>
(preserving the same shape/extends relationship) so existing consumers and
typings remain unchanged while conforming to the interface-based props
convention.
1 participant
Ændringer
lintbruger nueslint .(Next 16 har ikke længerenext lint).RadioGroupkalderuseId()uden betingelse (undgår conditional hooks).Input/Textareabrugertypealias i stedet for tomme interfaces.react-hooks/set-state-in-effectmidlertidigt slået fra (refaktor efter launch); fjernet overflødige eslint-disable-blokke.pnpm lintefterpnpm typecheck.Test
pnpm typecheck(storefront)pnpm lint(storefront, 0 errors)Noter
.cursor/settings.jsoner ikke inkluderet i denne branch.Summary by CodeRabbit