chore: strip Stripe/payments from starter template#53
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughThis PR removes Stripe payment integration, upgrades React to v19 and React Router to v7, updates UI dependencies (Phosphor Icons, Tailwind v4), refactors TypeScript compatibility issues, and applies extensive CSS class reordering across the codebase. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
main.wasp (1)
63-129:⚠️ Potential issue | 🔴 CriticalRemove payment references from main.wasp — module no longer exists in repository.
The
src/paymentdirectory has been removed, butmain.waspstill contains seven references to it (routes, pages, query, actions, and API endpoint for Stripe webhooks). These broken imports will cause build failures. Remove all payment-related definitions from lines 63-129.Proposed fix
-route SubscriptionRoute { path: "/subscription", to: SubscriptionPage } -route CheckoutResultRoute { path: "/checkout", to: CheckoutResultPage } - page NotFoundRoute { path: "*", to: NotFoundPage } @@ -page SubscriptionPage { - component: import SubscriptionPage from "@src/payment/SubscriptionPage", - authRequired: true, -} - -page CheckoutResultPage { - component: import CheckoutResultPage from "@src/payment/CheckoutResultPage", - authRequired: true, -} - page NotFoundPage { component: import NotFound from "@src/404Page" } - -query getPaymentConfig { - fn: import { getPaymentConfig } from "@src/payment/stripe/operations", -} - -action createCheckoutSession { - fn: import { createCheckoutSession } from "@src/payment/stripe/operations", - entities: [User] -} - -action createCustomerPortalSession { - fn: import { createCustomerPortalSession } from "@src/payment/stripe/operations", - entities: [User] -} - -api stripeWebhook { - fn: import { handleStripeWebhook } from "@src/payment/stripe/webhooks", - middlewareConfigFn: import { stripeWebhookMiddlewareConfigFn } from "@src/payment/stripe/webhooks", - httpRoute: (POST, "/stripe-webhooks"), - entities: [User] -}
🤖 Fix all issues with AI agents
In `@README.md`:
- Around line 42-46: Update the README checklist entry for Meta tags to
reference the actual placeholder domain used in main.wasp: change the phrase
"replace example.com TODOs" to something like "replace roke.dev TODOs" or a
neutral "replace placeholder domain TODOs"; specifically edit the line "Meta
tags - Update `head` section in `main.wasp` (replace example.com TODOs)" so it
accurately reflects `main.wasp`'s use of roke.dev placeholders and avoid
confusion for contributors.
…E placeholder wording - Remove SubscriptionRoute, CheckoutResultRoute routes - Remove SubscriptionPage, CheckoutResultPage page definitions - Remove getPaymentConfig query, createCheckoutSession/createCustomerPortalSession actions - Remove stripeWebhook API endpoint - Update README checklist to reference roke.dev instead of example.com Addresses CodeRabbit review comments on PR #53
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
package.json (1)
12-56:⚠️ Potential issue | 🟡 MinorPin exact versions for React runtime and type packages.
Lines 54-56 and line 73 use caret ranges for react, react-dom, and
@types/react. These are critical dependencies and should be pinned to exact versions to prevent unintended upgrades.🔧 Proposed fix
- "react": "^19.2.1", - "react-dom": "^19.2.1", + "react": "19.2.1", + "react-dom": "19.2.1",- "@types/react": "^19.2.7", + "@types/react": "19.2.7",
🤖 Fix all issues with AI agents
In `@src/client/components/mode-toggle.tsx`:
- Line 1: Remove the file-wide "@ts-nocheck" at the top of mode-toggle.tsx and
instead resolve the specific React 19 type issues or apply scoped suppressions
(use "@ts-expect-error" only on the few problematic lines) so the rest of the
file retains full TypeScript checking; also delete the non-essential comment and
update the icon import statements to use "@phosphor-icons/react" in place of
"lucide-react" (locate the ModeToggle component and its icon imports to make
these changes).
In `@src/root-components/transition-playground.tsx`:
- Line 1: Remove the file-level "// `@ts-nocheck`" and delete the top-level import
"import * as React from 'react'" from transition-playground.tsx; rely on the
automatic JSX runtime instead and, if you need specific types, import them as
type-only (e.g., "import type { FC, ReactNode } from 'react'") so TypeScript
checks remain enabled; also remove the extraneous reviewer-style comment at the
top so the file contains only meaningful comments and proper imports.
🧹 Nitpick comments (3)
src/client/components/ui/slider.tsx (1)
1-1: Consider tracking the removal of@ts-nocheckonce Radix types are updated.The blanket
@ts-nocheckdisables all TypeScript checking in this file. While this is a pragmatic workaround for React 19 compatibility issues with Radix UI, it also suppresses legitimate type errors. Consider adding a tracking issue to revisit this once@radix-ui/react-sliderreleases React 19-compatible types.src/client/components/ui/dropdown-menu.tsx (1)
4-4: Icon imports should use@phosphor-icons/react.The icons
Check,ChevronRight, andCircleare imported fromlucide-react, but the coding guidelines specify that icons insrc/client/components/**/*.{ts,tsx}should be imported from@phosphor-icons/react.♻️ Suggested fix
-import { Check, ChevronRight, Circle } from 'lucide-react' +import { Check, CaretRight, Circle } from '@phosphor-icons/react'Then update usages:
- Line 42:
<ChevronRight className='ml-auto' />→<CaretRight className='ml-auto' weight='bold' />- Line 139:
<Check className='h-4 w-4' />→<Check size={16} />- Line 168:
<Circle className='h-2 w-2 fill-current' />→<Circle size={8} weight='fill' />As per coding guidelines: "Icons should be imported from
@phosphor-icons/reactpackage" and "Phosphor icons should be used with size and weight props".src/client/components/ui/sheet.tsx (1)
5-5: Icon import should use@phosphor-icons/react.The
Xicon is imported fromlucide-react, but the coding guidelines specify that icons insrc/client/components/**/*.{ts,tsx}should be imported from@phosphor-icons/react.♻️ Suggested fix
-import { X } from 'lucide-react' +import { X } from '@phosphor-icons/react'Then update the usage at line 75:
- <X className='h-4 w-4' /> + <X size={16} />As per coding guidelines: "Icons should be imported from
@phosphor-icons/reactpackage" and "Phosphor icons should be used with size and weight props".
Remove all payment-related code to make Roke a clean, minimal starter. Payments will be available as a separate add-on module. Removed: - src/payment/ directory (Stripe checkout, subscriptions, webhooks) - Subscription/checkout routes and pages from main.wasp - Stripe fields from User model (stripeCustomerId, subscriptionStatus, trialEndsAt) - Stripe env vars from .env.server.example - Subscription UI from ProfilePage - Payment references from README.md and CLAUDE.md - Added TODO comments to example.com placeholder URLs in main.wasp head
…E placeholder wording - Remove SubscriptionRoute, CheckoutResultRoute routes - Remove SubscriptionPage, CheckoutResultPage page definitions - Remove getPaymentConfig query, createCheckoutSession/createCustomerPortalSession actions - Remove stripeWebhook API endpoint - Update README checklist to reference roke.dev instead of example.com Addresses CodeRabbit review comments on PR #53
- Bump wasp version to ^0.20.0 - Upgrade react/react-dom to ^19.2.1, @types/react to ^19.2.7 - Update all @radix-ui packages to React 19-compatible versions - Update lucide-react, react-day-picker, @phosphor-icons/react - Regenerate shadcn/ui components for React 19 compatibility - Update CI workflow to pin wasp installer to v0.20.0
…-nocheck with ts-expect-error - Pin exact versions for react, react-dom, and @types/react in package.json - Switch dropdown-menu.tsx icons from lucide-react to @phosphor-icons/react - Switch sheet.tsx X icon from lucide-react to @phosphor-icons/react - Replace @ts-nocheck with scoped @ts-expect-error in dropdown-menu and sheet
…E placeholder wording - Remove SubscriptionRoute, CheckoutResultRoute routes - Remove SubscriptionPage, CheckoutResultPage page definitions - Remove getPaymentConfig query, createCheckoutSession/createCustomerPortalSession actions - Remove stripeWebhook API endpoint - Update README checklist to reference roke.dev instead of example.com Addresses CodeRabbit review comments on PR #53
wardbox
force-pushed
the
chore/strip-payments
branch
2 times, most recently
from
6a872f8 to
35c5a8c
Compare
There was a problem hiding this comment.
Actionable comments posted: 7
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/client/components/ui/label.tsx (1)
1-27:⚠️ Potential issue | 🟠 MajorRemove
@ts-nocheckandanycasts; use properforwardRefgenerics instead.The
@ts-nocheckdirective plusanycasts onrefandpropssuppress type safety in a shared UI component without resolving the underlying typing issue. As demonstrated insrc/client/components/ui/card.tsx, proper typing using React.forwardRef generics eliminates this need:const Label = React.forwardRef< React.ElementRef<typeof LabelPrimitive.Root>, React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants> >(({ className, ...props }, ref) => ( <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} /> ))This approach restores compile-time guarantees without suppressions. Also remove the comment on line 1 per coding guidelines (comments should only describe complex logic).
🤖 Fix all issues with AI agents
In `@package.json`:
- Line 62: The package.json currently lists an unused dependency "stripe":
"^18.1.0"; remove that dependency entry from the dependencies block in
package.json and then reinstall to update the lockfile (npm install / yarn
install) so package-lock.json or yarn.lock is updated. If Stripe actually must
remain as a critical dependency, instead pin it to an exact version (e.g.,
"stripe": "18.1.0") rather than a caret range and then reinstall to update the
lockfile; also verify there are no imports of stripe elsewhere before removing.
In `@src/auth/auth.tsx`:
- Line 8: The import currently pulls Link from 'react-router' but the project
standard uses Wasp's Link for internal navigation; update the import statement
that brings in Link (referenced as Link in src/auth/auth.tsx) to import Link
from 'wasp/client/router' so all internal navigation uses the same Wasp router
component.
In `@src/client/components/ui/dropdown-menu.tsx`:
- Line 46: The Phosphor icons in dropdown-menu.tsx are missing the required
weight prop; update the icon components (e.g., CaretRightIcon and any other
Phosphor icon used in this file) to include an explicit weight value (for
example "regular" or "bold") by adding the weight prop to each icon JSX element
so they comply with the coding guidelines and visual consistency.
- Line 1: The leading "// `@ts-expect-error` - React 19 type compatibility issues
with Radix UI" directive in dropdown-menu.tsx should be removed or relocated: if
the import on the next line (the Radix UI import) actually triggers a TypeScript
error, move a bare "@ts-expect-error" directly above that import line; otherwise
delete the directive entirely and also remove the explanatory text so only the
directive remains if needed. Locate the import near the top of the file (in the
dropdown-menu.tsx module) and adjust the directive placement accordingly.
In `@src/client/components/ui/sheet.tsx`:
- Line 1: Move the misplaced comment "// `@ts-expect-error` - React 19 type
compatibility issues" so the lone "// `@ts-expect-error`" directive sits
immediately above the exact statement that causes the TypeScript error (rather
than on its own line), or remove the directive and fix the underlying type
incompatibility; also drop the explanatory text after the directive (comments
should not be used to silence linting/typing explanations) so only "//
`@ts-expect-error`" remains directly above the problematic line.
- Line 75: The Phosphor icon usage is missing an explicit weight: update the
XIcon instance in the sheet component so it includes a weight prop (e.g.,
weight="regular" or weight="bold") alongside the existing size prop; locate the
XIcon element in the Sheet UI component (the close icon render) and add the
appropriate weight value per the design system to satisfy the coding guideline
requiring both size and weight on Phosphor icons.
In `@src/root-components/nav.tsx`:
- Line 1: Remove the file-level "@ts-nocheck" and change the React namespace
import to named imports: import forwardRef and HTMLAttributes from 'react'
(replace any "import * as React" usage), update the component to use forwardRef
directly, and change the props declaration to "interface NavProps extends
HTMLAttributes<HTMLElement>" (ensure any React.* references are replaced with
the named symbols: forwardRef and HTMLAttributes); remove the "@ts-nocheck"
comment afterward.
🧹 Nitpick comments (5)
src/client/components/ui/slider.tsx (1)
1-1: Prefer targeted@ts-expect-errorover blanket@ts-nocheck.Disabling type checking for the entire file can mask unrelated bugs introduced later. Consider using
@ts-expect-erroron the specific lines with type incompatibilities (lines 16 and 21) to preserve type safety elsewhere in the file.♻️ Suggested approach
-// `@ts-nocheck` - React 19 type compatibility issues import * as React from 'react' import * as SliderPrimitive from '@radix-ui/react-slider' import { cn } from '../../../lib/utils' const Slider = React.forwardRef( ( { className, ...props }: React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, ref: React.ForwardedRef<React.ElementRef<typeof SliderPrimitive.Root>>, ) => ( <SliderPrimitive.Root + // `@ts-expect-error` - React 19 ref type incompatibility with Radix UI ref={ref as any} className={cn( 'relative flex w-full touch-none items-center select-none', className, )} + // `@ts-expect-error` - React 19 type incompatibility with Radix UI {...(props as any)} >src/root-components/theme-provider.tsx (1)
1-1: Consider using more targeted type suppression instead of@ts-nocheck.Using
@ts-nocheckdisables all TypeScript checking for the entire file, which could hide legitimate type errors. This file's code appears straightforward and may not require blanket suppression. Consider:
- Using
@ts-expect-erroron specific lines where type issues occur- Adding proper type definitions or declarations
- Using type assertions where needed
If React 19 compatibility is the concern, pinpoint the exact lines causing issues.
src/root-components/footer.tsx (1)
1-1: Consider using Wasp'sLinkcomponent for internal navigation.Similar to
src/auth/auth.tsx, this file importsLinkfromreact-routerinstead ofwasp/client/routeras specified in the coding guidelines.-import { Link } from 'react-router' +import { Link } from 'wasp/client/router'As per coding guidelines: "Use Wasp's built-in Link component from wasp/client/router for internal links."
src/root-components/toast.tsx (2)
91-91: Addweightprop to Phosphor icon.Per coding guidelines, Phosphor icons should include both
sizeandweightprops.- <XIcon size={16} /> + <XIcon size={16} weight='bold' />As per coding guidelines: "Phosphor icons should be used with size and weight props (e.g., size={24} weight='fill')."
85-85: Consider using semantic color names instead of raw color values.The ToastClose styles use non-semantic Tailwind colors (
text-red-300,text-blue-300,text-green-300,text-yellow-300). The coding guidelines prefer semantic color naming.However, since these are variant-specific colors tied to toast types (destructive, info, success, warning), and the theme may not define semantic equivalents for all these states, this might be intentional. Verify if semantic alternatives exist in your theme configuration.
As per coding guidelines: "Use Tailwind CSS with semantic color naming (e.g.,
text-destructivenottext-red-500)."
…xpect-error placement, phosphor weights, named React imports
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/client/components/ui/dropdown-menu.tsx`:
- Around line 1-4: Remove the namespace import "import * as React from 'react'"
and instead import the specific hooks/types you use (e.g., import { forwardRef,
type ForwardedRef, type ComponentPropsWithoutRef, type ElementRef, type
ReactNode } from 'react'); then replace all React.forwardRef usages with
forwardRef and swap any React.* type references (e.g.,
React.ComponentPropsWithoutRef, React.ElementRef, React.ReactNode) to the
corresponding named type imports (ComponentPropsWithoutRef, ElementRef,
ReactNode or ForwardedRef) so the components and their types (e.g., any
occurrences in DropdownMenu, DropdownMenuItem, DropdownMenuTrigger, the
forwardRef callbacks and ref type annotations) compile without the namespace
import.
🧹 Nitpick comments (4)
src/client/components/ui/label.tsx (2)
4-5: Add a description to the@ts-expect-errordirective.The directive should include a description explaining what error is being suppressed and why (e.g., React 19 type compatibility with Radix UI). This aids future maintenance and helps identify when the suppression is no longer needed.
📝 Proposed fix
-// `@ts-expect-error` +// `@ts-expect-error` - `@radix-ui/react-label` types not yet compatible with React 19 import * as LabelPrimitive from '@radix-ui/react-label'
3-3: Consider using named imports instead of namespace import.Per coding guidelines, prefer direct named imports from React. The namespace import can be refactored since only specific types and
forwardRefare used.♻️ Proposed refactor
-import * as React from 'react' +import { forwardRef, type ElementRef, type ComponentPropsWithoutRef } from 'react'Then update the component definition:
-const Label = React.forwardRef< - React.ElementRef<typeof LabelPrimitive.Root>, - React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & +const Label = forwardRef< + ElementRef<typeof LabelPrimitive.Root>, + ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>src/client/components/ui/sheet.tsx (2)
1-5: Prefer direct imports over React namespace import.The namespace import
import * as React from 'react'can be refactored to use direct imports, aligning with coding guidelines. The code usesforwardRef,ComponentPropsWithoutRef,ForwardedRef, andElementRef.♻️ Proposed refactor to use direct imports
-import * as React from 'react' +import { + forwardRef, + type ComponentPropsWithoutRef, + type ForwardedRef, + type ElementRef, +} from 'react' // `@ts-expect-error` import * as SheetPrimitive from '@radix-ui/react-dialog' import { cva, type VariantProps } from 'class-variance-authority' import { XIcon } from '@phosphor-icons/react'Then update the component signatures (example for
SheetOverlay):-const SheetOverlay = React.forwardRef( +const SheetOverlay = forwardRef( ( { className, ...props - }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>, - ref: React.ForwardedRef<React.ElementRef<typeof SheetPrimitive.Overlay>>, + }: ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>, + ref: ForwardedRef<ElementRef<typeof SheetPrimitive.Overlay>>, ) => (Apply similar changes to
SheetContent,SheetTitle, andSheetDescription.As per coding guidelines: "Do not import React from 'react' because it's automatically imported in JSX files" and "Import React hooks directly from packages".
17-34: Consider removing or investigating theas anycasts and@ts-expect-errorworkaround.The
as anycasts at lines 30-31, 69, 71, 121, 123, 140, 142 and the@ts-expect-erroron line 2 were workarounds for React 19 + Radix UI type incompatibilities. However, Radix Primitives achieved full React 19 compatibility as of June 2024, and the project is already using@radix-ui/react-dialog@1.1.15(the current latest) with React 19.2.1. These workarounds may no longer be necessary and could potentially be removed after verifying that type checking passes without them.
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Fix all issues with AI agents
In `@package.json`:
- Around line 54-56: The package.json uses caret ranges for critical
dependencies (react, react-dom, react-router, tailwindcss, `@tailwindcss/vite`)
which must be pinned to exact versions; update the version strings for "react",
"react-dom", "react-router", "tailwindcss", and "@tailwindcss/vite" in
package.json to remove the caret (e.g., change "^19.2.1" to "19.2.1"), run your
package manager to update the lockfile, and commit the updated package.json and
lockfile so the exact versions are enforced.
- Line 12: Update package.json to pin the icon dependency and remove the unused
one: replace the caret version for "@phosphor-icons/react" with the exact
version string "2.1.10" (remove the leading ^) and delete the "lucide-react"
dependency entry entirely since it has no imports; then run your package manager
to update lockfiles. Target the package.json entries named
"@phosphor-icons/react" and "lucide-react" when making these edits.
- Around line 5-6: The package.json currently uses caret ranges for critical
dependencies—update the dependency entries for react, react-dom, react-router
(or react-router-dom if present), and tailwindcss to exact versions (e.g.,
change "^19.2.1" to "19.2.1") to comply with the project's stability guideline;
also audit the dependencies list for lucide-react and `@phosphor-icons/react` and
remove whichever icon package is unused (or consolidate imports) to reduce
maintenance surface, ensuring you update package.json dependency names (react,
react-dom, react-router(-dom), tailwindcss, lucide-react, `@phosphor-icons/react`)
and run dependency install/lockfile update afterwards.
- Line 11: Update the three critical dependencies in package.json to exact
versions by removing the caret (^) from their version strings: change
"@hookform/resolvers": "^5.0.1" to "5.0.1", "react-day-picker": "^9.13.2" to
"9.13.2", and "vite": "^7.0.6" to "7.0.6"; ensure these exact-version strings
replace the caret ranges for the keys "@hookform/resolvers", "react-day-picker",
and "vite" respectively so npm/yarn will pin those dependency versions.
🧹 Nitpick comments (4)
src/client/components/ui/sheet.tsx (4)
60-80: Same refactor applies: replaceas anywith proper generics.Lines 68 and 70 use
as anycasts. Apply the same pattern suggested for SheetOverlay.♻️ Suggested refactor
-const SheetContent = React.forwardRef( - ( - { side = 'right', className, children, ...props }: SheetContentProps, - ref: React.ForwardedRef<React.ElementRef<typeof SheetPrimitive.Content>>, - ) => ( +const SheetContent = React.forwardRef< + React.ElementRef<typeof SheetPrimitive.Content>, + SheetContentProps +>(({ side = 'right', className, children, ...props }, ref) => ( <SheetPortal> <SheetOverlay /> <SheetPrimitive.Content - ref={ref as any} + ref={ref} className={cn(sheetVariants({ side }), className)} - {...(props as any)} + {...props} > {children} <SheetPrimitive.Close className='ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none'> <XIcon size={16} weight='bold' /> <span className='sr-only'>Close</span> </SheetPrimitive.Close> </SheetPrimitive.Content> </SheetPortal> - ), -) +))
111-144: Apply consistent forwardRef pattern to SheetTitle and SheetDescription.Both components use the same
as anycast pattern on lines 120, 122, 139, and 141. Refactor to proper generics for consistency and type safety.♻️ Suggested refactor for SheetTitle
-const SheetTitle = React.forwardRef( - ( - { - className, - ...props - }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>, - ref: React.ForwardedRef<React.ElementRef<typeof SheetPrimitive.Title>>, - ) => ( - <SheetPrimitive.Title - ref={ref as any} - className={cn('text-foreground text-lg font-semibold', className)} - {...(props as any)} - /> - ), -) +const SheetTitle = React.forwardRef< + React.ElementRef<typeof SheetPrimitive.Title>, + React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> +>(({ className, ...props }, ref) => ( + <SheetPrimitive.Title + ref={ref} + className={cn('text-foreground text-lg font-semibold', className)} + {...props} + /> +))♻️ Suggested refactor for SheetDescription
-const SheetDescription = React.forwardRef( - ( - { - className, - ...props - }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>, - ref: React.ForwardedRef< - React.ElementRef<typeof SheetPrimitive.Description> - >, - ) => ( - <SheetPrimitive.Description - ref={ref as any} - className={cn('text-muted-foreground text-sm', className)} - {...(props as any)} - /> - ), -) +const SheetDescription = React.forwardRef< + React.ElementRef<typeof SheetPrimitive.Description>, + React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> +>(({ className, ...props }, ref) => ( + <SheetPrimitive.Description + ref={ref} + className={cn('text-muted-foreground text-sm', className)} + {...props} + /> +))
45-46: Nitpick: Double space in class string.There's an extra space before
border-lon line 46.✏️ Suggested fix
- 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm', + 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
16-33: Use proper forwardRef generics instead ofas anycasts to maintain type safety.The
as anycasts on props and ref (lines 29-30) disable type checking entirely. TypeScript's forwardRef generics pattern preserves type inference without sacrificing safety. Consider this refactor:♻️ Suggested refactor
-const SheetOverlay = React.forwardRef( - ( - { - className, - ...props - }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>, - ref: React.ForwardedRef<React.ElementRef<typeof SheetPrimitive.Overlay>>, - ) => ( - <SheetPrimitive.Overlay - className={cn( - 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', - className, - )} - {...(props as any)} - ref={ref as any} - /> - ), -) +const SheetOverlay = React.forwardRef< + React.ElementRef<typeof SheetPrimitive.Overlay>, + React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> +>(({ className, ...props }, ref) => ( + <SheetPrimitive.Overlay + className={cn( + 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', + className, + )} + {...props} + ref={ref} + /> +))
| ".wasp/out/*", | ||
| ".wasp/out/sdk/wasp" |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat package.jsonRepository: wardbox/roke
Length of output: 2771
Use exact versions for critical dependencies.
Dependencies like react, react-dom, react-router, and tailwindcss are critical for stability and should use exact versions (e.g., "react": "19.2.1") rather than caret ranges. This aligns with the project's coding guidelines. Currently, these use ^19.2.1, ^19.2.1, ^7.12.0, and ^4.0.0 respectively, which allow breaking changes within major versions.
Additionally, both lucide-react and @phosphor-icons/react are listed as dependencies. Verify that both are actively used; if one is being phased out, remove it to reduce maintenance surface.
Note: The workspace paths .wasp/out/* and .wasp/out/sdk/wasp are not redundant—the glob pattern matches only direct children, while the second entry targets a specific nested workspace.
🤖 Prompt for AI Agents
In `@package.json` around lines 5 - 6, The package.json currently uses caret
ranges for critical dependencies—update the dependency entries for react,
react-dom, react-router (or react-router-dom if present), and tailwindcss to
exact versions (e.g., change "^19.2.1" to "19.2.1") to comply with the project's
stability guideline; also audit the dependencies list for lucide-react and
`@phosphor-icons/react` and remove whichever icon package is unused (or
consolidate imports) to reduce maintenance surface, ensuring you update
package.json dependency names (react, react-dom, react-router(-dom),
tailwindcss, lucide-react, `@phosphor-icons/react`) and run dependency
install/lockfile update afterwards.
| "dependencies": { | ||
| "@anthropic-ai/sdk": "^0.32.1", | ||
| "@fontsource-variable/inter": "^5.2.5", | ||
| "@hookform/resolvers": "^5.0.1", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n package.jsonRepository: wardbox/roke
Length of output: 3352
🌐 Web query:
react-day-picker v9 React 19 compatibility
💡 Result:
react-day-picker v9 works with React 19, but you should use v9.4.3 or newer for best React 19 TypeScript/type-attribute compatibility (v9.4.3 explicitly “enhances compatibility with React 19”). [1]
If you see npm ERESOLVE / peer dependency install failures in a React 19 app, they’re often caused by other packages in your dependency tree (not React DayPicker itself). For example, one reported failure came from vaul@0.9.9 not allowing React 19 peers. [2]
If you’re hitting this via shadcn/ui’s calendar, note that older setups used react-day-picker@8.10.1 (React 18 peer range) and will conflict with React 19—upgrading to react-day-picker v9 is the intended fix. [3]
Recommended: install/upgrade to the latest v9 and, if TypeScript complains with React 19 types, ensure you’re on ≥ 9.4.3. [1]
Sources: [1] React DayPicker changelog (v9.4.3) • [2] npm/cli issue about React 19 install conflict via another dependency • [3] shadcn-ui issue about react-day-picker@8.10.1 failing under React 19
🌐 Web query:
@hookform/resolvers v5 react-hook-form v7 compatibility
💡 Result:
@hookform/resolvers v5 is compatible with react-hook-form v7, but only with react-hook-form ≥ 7.55.0 (v5.0.0 introduced this as a breaking change; v5.0.1 relaxed the constraint to ^7.55.0). (github.com)
If you’re on an older RHF v7 (e.g., 7.54.x or below), you should stay on @hookform/resolvers v4.x or upgrade react-hook-form to ≥ 7.55.0. (github.com)
Also note: resolvers v5 added separate input/output typing for schemas (use useForm<Input, Context, Output>() or let types infer from the schema), so old patterns like useForm<FormValues>() may cause TypeScript mismatches for schemas with transforms/coercions. (github.com)
Citations:
- 1: https://github.com/react-hook-form/resolvers/releases?utm_source=openai
- 2: https://github.com/react-hook-form/resolvers/releases?utm_source=openai
- 3: https://github.com/react-hook-form/resolvers/releases?utm_source=openai
🌐 Web query:
Vite v7 release version
💡 Result:
Vite v7 was released as Vite 7.0 (v7.0.0) on June 24, 2025. [1] [2]
Use exact versions for critical dependencies in package.json.
The compatibility between these major versions is fine (react-day-picker v9.13.2 works with React 19, @hookform/resolvers v5.0.1 is compatible with react-hook-form v7.56.4, and Vite v7.0.6 is a valid release). However, all three lines violate the coding guideline by using caret ranges (^) instead of exact versions:
- Line 11:
"@hookform/resolvers": "^5.0.1"→"@hookform/resolvers": "5.0.1" - Line 55:
"react-day-picker": "^9.13.2"→"react-day-picker": "9.13.2" - Line 77:
"vite": "^7.0.6"→"vite": "7.0.6"
Pin these to exact versions to prevent unexpected minor/patch updates in critical dependencies.
🤖 Prompt for AI Agents
In `@package.json` at line 11, Update the three critical dependencies in
package.json to exact versions by removing the caret (^) from their version
strings: change "@hookform/resolvers": "^5.0.1" to "5.0.1", "react-day-picker":
"^9.13.2" to "9.13.2", and "vite": "^7.0.6" to "7.0.6"; ensure these
exact-version strings replace the caret ranges for the keys
"@hookform/resolvers", "react-day-picker", and "vite" respectively so npm/yarn
will pin those dependency versions.
| "@radix-ui/react-toggle": "^1.1.8", | ||
| "@radix-ui/react-toggle-group": "^1.1.9", | ||
| "@radix-ui/react-tooltip": "^1.2.6", | ||
| "@phosphor-icons/react": "^2.1.10", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check for lucide-react and `@phosphor-icons` imports
echo "=== Searching for lucide-react imports ==="
rg -n "lucide-react" -g '*.{ts,tsx,js,jsx}' 2>/dev/null || echo "No matches found"
echo ""
echo "=== Searching for `@phosphor-icons` imports ==="
rg -n "@phosphor-icons" -g '*.{ts,tsx,js,jsx}' 2>/dev/null || echo "No matches found"
echo ""
echo "=== Checking package.json for icon libraries ==="
cat package.json | grep -A 1 -B 1 "lucide\|phosphor"Repository: wardbox/roke
Length of output: 1327
🏁 Script executed:
# Check the full package.json to see version constraints
cat package.jsonRepository: wardbox/roke
Length of output: 2771
Remove lucide-react and use exact versions for both icon libraries.
The migration to @phosphor-icons/react is complete—lucide-react has no imports in the codebase and should be removed to reduce bundle size. Additionally, both @phosphor-icons/react (line 12) and the now-unused lucide-react (line 48) must use exact versions per the coding guidelines for critical dependencies:
"@phosphor-icons/react": "2.1.10",
Remove lucide-react entirely from package.json.
🤖 Prompt for AI Agents
In `@package.json` at line 12, Update package.json to pin the icon dependency and
remove the unused one: replace the caret version for "@phosphor-icons/react"
with the exact version string "2.1.10" (remove the leading ^) and delete the
"lucide-react" dependency entry entirely since it has no imports; then run your
package manager to update lockfiles. Target the package.json entries named
"@phosphor-icons/react" and "lucide-react" when making these edits.
| "react": "^19.2.1", | ||
| "react-day-picker": "^9.13.2", | ||
| "react-dom": "^19.2.1", |
There was a problem hiding this comment.
Critical dependencies should use exact versions.
Per coding guidelines, critical dependencies should use exact versions. The following core framework dependencies use caret ranges which could introduce breaking changes on minor/patch updates:
| Dependency | Current | Suggested |
|---|---|---|
| react | ^19.2.1 | 19.2.1 |
| react-dom | ^19.2.1 | 19.2.1 |
| react-router | ^7.12.0 | 7.12.0 |
| tailwindcss | ^4.0.0 | 4.0.0 |
@tailwindcss/vite |
^4.0.0 | 4.0.0 |
Suggested fix to pin critical dependencies
- "react": "^19.2.1",
+ "react": "19.2.1",
- "react-dom": "^19.2.1",
+ "react-dom": "19.2.1",
- "react-router": "^7.12.0",
+ "react-router": "7.12.0",
...
- "@tailwindcss/vite": "^4.0.0",
+ "@tailwindcss/vite": "4.0.0",
...
- "tailwindcss": "^4.0.0",
+ "tailwindcss": "4.0.0",As per coding guidelines: "Use exact versions for critical dependencies".
Also applies to: 59-59, 69-69, 75-75
🤖 Prompt for AI Agents
In `@package.json` around lines 54 - 56, The package.json uses caret ranges for
critical dependencies (react, react-dom, react-router, tailwindcss,
`@tailwindcss/vite`) which must be pinned to exact versions; update the version
strings for "react", "react-dom", "react-router", "tailwindcss", and
"@tailwindcss/vite" in package.json to remove the caret (e.g., change "^19.2.1"
to "19.2.1"), run your package manager to update the lockfile, and commit the
updated package.json and lockfile so the exact versions are enforced.
Adds documentation regarding dependency versioning strategy, explicitly highlighting versions that need to keep `^` prefix. Also, tightens version constraints for some dependencies, aiming for stability and predictability in the absence of payment-related features.
2 participants
Summary
Remove all payment/Stripe code from Roke to make it a clean, minimal starter template. Payments will be available as a separate add-on module.
Removed
src/payment/— entire directorymain.wasp— subscription/checkout routes, Stripe actions & webhook APIschema.prisma— Stripe fields from User modelsrc/ProfilePage.tsx— subscription UI.env.server.example— STRIPE_* env varsAdded
Preserved
Auth, shadcn/ui, Motion animations, dark mode, TypeScript, profile page, landing page
Summary by CodeRabbit
Release Notes
Breaking Changes
Updates
Removals