feat(clerk-react, nextjs): Introduce commerce buttons #6365
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
🦋 Changeset detectedLatest commit: 25e58e9 The changes in this PR will be included in the next version bump. This PR includes changesets to release 8 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
!snapshot |
|
Hey @panteliselef - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.1.12-snapshot.v20250722091530 --save-exact
npm i @clerk/astro@2.10.9-snapshot.v20250722091530 --save-exact
npm i @clerk/backend@2.5.1-snapshot.v20250722091530 --save-exact
npm i @clerk/chrome-extension@2.5.11-snapshot.v20250722091530 --save-exact
npm i @clerk/clerk-js@5.75.0-snapshot.v20250722091530 --save-exact
npm i @clerk/elements@0.23.44-snapshot.v20250722091530 --save-exact
npm i @clerk/clerk-expo@2.14.10-snapshot.v20250722091530 --save-exact
npm i @clerk/expo-passkeys@0.3.21-snapshot.v20250722091530 --save-exact
npm i @clerk/express@1.7.11-snapshot.v20250722091530 --save-exact
npm i @clerk/fastify@2.4.11-snapshot.v20250722091530 --save-exact
npm i @clerk/localizations@3.20.2-snapshot.v20250722091530 --save-exact
npm i @clerk/nextjs@6.25.5-snapshot.v20250722091530 --save-exact
npm i @clerk/nuxt@1.7.12-snapshot.v20250722091530 --save-exact
npm i @clerk/clerk-react@5.35.4-snapshot.v20250722091530 --save-exact
npm i @clerk/react-router@1.8.5-snapshot.v20250722091530 --save-exact
npm i @clerk/remix@4.10.5-snapshot.v20250722091530 --save-exact
npm i @clerk/shared@3.13.1-snapshot.v20250722091530 --save-exact
npm i @clerk/tanstack-react-start@0.21.1-snapshot.v20250722091530 --save-exact
npm i @clerk/testing@1.10.5-snapshot.v20250722091530 --save-exact
npm i @clerk/themes@2.3.4-snapshot.v20250722091530 --save-exact
npm i @clerk/types@4.69.0-snapshot.v20250722091530 --save-exact
npm i @clerk/vue@1.8.19-snapshot.v20250722091530 --save-exact |
📝 WalkthroughWalkthroughThis change introduces three new React components— Estimated code review effort3 (~45 minutes) 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ 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)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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 (7)
packages/nextjs/src/experimental.ts (1)
1-4: Consider re-exporting the component types as wellDown-stream TypeScript users often reach for the prop types:
import type { CheckoutButtonProps } from '@clerk/nextjs/experimental';At the moment only the runtime values are re-exported, so the above import fails.
If the underlying React components already exporttype …Props, surface them here:-'use client'; -export { CheckoutButton, PlanDetailsButton, SubscriptionDetailsButton } from '@clerk/clerk-react/experimental'; +'use client'; + +export { + CheckoutButton, + PlanDetailsButton, + SubscriptionDetailsButton, +} from '@clerk/clerk-react/experimental'; + +export type { + CheckoutButtonProps, + PlanDetailsButtonProps, + SubscriptionDetailsButtonProps, +} from '@clerk/clerk-react/experimental';packages/react/src/experimental.ts (1)
1-4: Add'use client';for Next.js friendlinessAlthough this file only re-exports, Next.js treats the presence of the directive as a signal that the module is client-safe, avoiding “Server Component” warnings when users import directly.
+// Re-export experimental client-side components +'use client'; export { CheckoutButton } from './components/CheckoutButton'; export { PlanDetailsButton } from './components/PlanDetailsButton'; export { SubscriptionDetailsButton } from './components/SubscriptionDetailsButton';packages/react/src/components/PlanDetailsButton.tsx (2)
1-42: Implementation follows established Clerk button patterns.The component correctly implements the standard Clerk button pattern with:
- Proper TypeScript typing using
__internal_PlanDetailsProps- Single-child validation via
assertSingleChild- Safe event handler composition with
safeExecute- Consistent prop destructuring and spreading
- Appropriate HOC configuration
Consider security review for commerce functionality.
Since this introduces commerce-related functionality that calls internal Clerk methods for plan management, please consider tagging the clerk security team to review these changes for any security implications.
Add tests for the new component.
Per the coding guidelines, tests should be added to cover the new functionality.
Would you like me to generate unit tests for this component or open an issue to track this task?
39-39: Improve type safety of React element clone.The type assertion
as React.ReactElement<unknown>could be more precise.- return React.cloneElement(child as React.ReactElement<unknown>, childProps); + return React.cloneElement(child as React.ReactElement, childProps);packages/react/src/components/SubscriptionDetailsButton.tsx (2)
11-54: Implementation follows established patterns with proper auth validation.The component correctly implements the Clerk button pattern with additional auth validation. The structure is consistent with
PlanDetailsButtonand other Clerk components.Consider security review for commerce functionality.
This component manages subscription details and includes cancellation functionality. Please consider tagging the clerk security team to review these commerce-related changes.
Add tests for the new component.
Tests should be added to cover the auth validation logic and component functionality per coding guidelines.
Would you like me to generate unit tests including the auth validation scenarios?
51-51: Improve type safety of React element clone.The type assertion could be more precise, consistent with TypeScript best practices.
- return React.cloneElement(child as React.ReactElement<unknown>, childProps); + return React.cloneElement(child as React.ReactElement, childProps);packages/react/src/components/CheckoutButton.tsx (1)
1-10: Add JSDoc documentation for the re-exported type.The imports and type structure look good, but the re-exported
__internal_CheckoutPropstype should have JSDoc documentation to explain its purpose for external consumers.+/** + * Props for configuring checkout behavior and callbacks. + * @internal This is an internal type that may change without notice. + */ export type { __internal_CheckoutProps };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
.changeset/curly-jeans-sleep.md(1 hunks).changeset/dark-coins-shake.md(1 hunks)packages/nextjs/package.json(1 hunks)packages/nextjs/src/experimental.ts(1 hunks)packages/react/package.json(1 hunks)packages/react/src/components/CheckoutButton.tsx(1 hunks)packages/react/src/components/PlanDetailsButton.tsx(1 hunks)packages/react/src/components/SubscriptionDetailsButton.tsx(1 hunks)packages/react/src/experimental.ts(1 hunks)packages/react/src/utils/childrenUtils.tsx(1 hunks)packages/react/tsup.config.ts(1 hunks)
📓 Path-based instructions (12)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/react/tsup.config.tspackages/nextjs/src/experimental.tspackages/react/src/experimental.tspackages/react/src/utils/childrenUtils.tsxpackages/react/src/components/PlanDetailsButton.tsxpackages/react/src/components/SubscriptionDetailsButton.tsxpackages/react/src/components/CheckoutButton.tsx
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/react/tsup.config.tspackages/nextjs/src/experimental.tspackages/react/src/experimental.tspackages/nextjs/package.jsonpackages/react/src/utils/childrenUtils.tsxpackages/react/package.jsonpackages/react/src/components/PlanDetailsButton.tsxpackages/react/src/components/SubscriptionDetailsButton.tsxpackages/react/src/components/CheckoutButton.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/react/tsup.config.tspackages/nextjs/src/experimental.tspackages/react/src/experimental.tspackages/react/src/utils/childrenUtils.tsxpackages/react/src/components/PlanDetailsButton.tsxpackages/react/src/components/SubscriptionDetailsButton.tsxpackages/react/src/components/CheckoutButton.tsx
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/react/tsup.config.tspackages/nextjs/src/experimental.tspackages/react/src/experimental.tspackages/react/src/utils/childrenUtils.tsxpackages/react/src/components/PlanDetailsButton.tsxpackages/react/src/components/SubscriptionDetailsButton.tsxpackages/react/src/components/CheckoutButton.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/react/tsup.config.tspackages/nextjs/src/experimental.tspackages/react/src/experimental.tspackages/react/src/utils/childrenUtils.tsxpackages/react/src/components/PlanDetailsButton.tsxpackages/react/src/components/SubscriptionDetailsButton.tsxpackages/react/src/components/CheckoutButton.tsx
packages/*/tsup.config.{js,ts}
📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)
TypeScript compilation and bundling must use tsup.
Files:
packages/react/tsup.config.ts
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/react/tsup.config.tspackages/nextjs/src/experimental.tspackages/react/src/experimental.tspackages/react/src/utils/childrenUtils.tsxpackages/react/src/components/PlanDetailsButton.tsxpackages/react/src/components/SubscriptionDetailsButton.tsxpackages/react/src/components/CheckoutButton.tsx
**/*
⚙️ CodeRabbit Configuration File
**/*: If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes.Whenever reviewing a pull request, if there are any changes that could impact security, always tag
clerk/securityin the PR.Security-impacting changes include, but are not limited to:
- Changes to authentication logic or mechanisms (e.g. login, session handling, token issuance)
- Any modification to access control, authorization checks, or role-based permissions
- Introduction or modification of hashing algorithms, signature verification, or cryptographic primitives
- Handling of sensitive data (e.g. passwords, tokens, secrets, PII)
- Integration with external identity providers (e.g. SSO, OAuth, OpenID Connect)
- Modifications to security headers, cookie flags, CORS policies, or CSRF protections
- Bypass mechanisms (e.g. feature flags, testing overrides) that could weaken protections
- Changes to rate limiting, abuse prevention, or input validation
If you're unsure whether a change is security-relevant, err on the side of caution and tag
clerk/security.Any time that you tag
clerk/security, please do so explicitly in a code comment, rather than within a collapsed section in a coderabbit comment, such as the "recent review details" section. If you do use the team name in any thinking or non-direct-code-comment content, it can be referred to as "clerk security team" to avoid accidentally printing the tag which sends a notification to the team.
Files:
packages/react/tsup.config.tspackages/nextjs/src/experimental.tspackages/react/src/experimental.tspackages/nextjs/package.jsonpackages/react/src/utils/childrenUtils.tsxpackages/react/package.jsonpackages/react/src/components/PlanDetailsButton.tsxpackages/react/src/components/SubscriptionDetailsButton.tsxpackages/react/src/components/CheckoutButton.tsx
.changeset/**
📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)
Automated releases must use Changesets.
Files:
.changeset/curly-jeans-sleep.md.changeset/dark-coins-shake.md
packages/*/package.json
📄 CodeRabbit Inference Engine (.cursor/rules/global.mdc)
All publishable packages should be placed under the packages/ directory
packages/*/package.json: All publishable packages must be located in the 'packages/' directory.
All packages must be published under the @clerk namespace on npm.
Semantic versioning must be used across all packages.
Files:
packages/nextjs/package.jsonpackages/react/package.json
**/*.{jsx,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components:UserProfile,NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...
Files:
packages/react/src/utils/childrenUtils.tsxpackages/react/src/components/PlanDetailsButton.tsxpackages/react/src/components/SubscriptionDetailsButton.tsxpackages/react/src/components/CheckoutButton.tsx
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)
**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering
Files:
packages/react/src/utils/childrenUtils.tsxpackages/react/src/components/PlanDetailsButton.tsxpackages/react/src/components/SubscriptionDetailsButton.tsxpackages/react/src/components/CheckoutButton.tsx
🧬 Code Graph Analysis (3)
packages/react/src/components/PlanDetailsButton.tsx (3)
packages/react/src/components/withClerk.tsx (1)
withClerk(7-37)packages/react/src/types.ts (1)
WithClerkProp(73-73)packages/react/src/utils/childrenUtils.tsx (3)
normalizeWithDefaultValue(25-33)assertSingleChild(6-23)safeExecute(35-41)
packages/react/src/components/SubscriptionDetailsButton.tsx (3)
packages/react/src/components/withClerk.tsx (1)
withClerk(7-37)packages/react/src/types.ts (1)
WithClerkProp(73-73)packages/react/src/utils/childrenUtils.tsx (3)
normalizeWithDefaultValue(25-33)assertSingleChild(6-23)safeExecute(35-41)
packages/react/src/components/CheckoutButton.tsx (3)
packages/react/src/components/withClerk.tsx (1)
withClerk(7-37)packages/react/src/types.ts (1)
WithClerkProp(73-73)packages/react/src/utils/childrenUtils.tsx (3)
normalizeWithDefaultValue(25-33)assertSingleChild(6-23)safeExecute(35-41)
🧰 Additional context used
📓 Path-based instructions (12)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/react/tsup.config.tspackages/nextjs/src/experimental.tspackages/react/src/experimental.tspackages/react/src/utils/childrenUtils.tsxpackages/react/src/components/PlanDetailsButton.tsxpackages/react/src/components/SubscriptionDetailsButton.tsxpackages/react/src/components/CheckoutButton.tsx
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/react/tsup.config.tspackages/nextjs/src/experimental.tspackages/react/src/experimental.tspackages/nextjs/package.jsonpackages/react/src/utils/childrenUtils.tsxpackages/react/package.jsonpackages/react/src/components/PlanDetailsButton.tsxpackages/react/src/components/SubscriptionDetailsButton.tsxpackages/react/src/components/CheckoutButton.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/react/tsup.config.tspackages/nextjs/src/experimental.tspackages/react/src/experimental.tspackages/react/src/utils/childrenUtils.tsxpackages/react/src/components/PlanDetailsButton.tsxpackages/react/src/components/SubscriptionDetailsButton.tsxpackages/react/src/components/CheckoutButton.tsx
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/react/tsup.config.tspackages/nextjs/src/experimental.tspackages/react/src/experimental.tspackages/react/src/utils/childrenUtils.tsxpackages/react/src/components/PlanDetailsButton.tsxpackages/react/src/components/SubscriptionDetailsButton.tsxpackages/react/src/components/CheckoutButton.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/react/tsup.config.tspackages/nextjs/src/experimental.tspackages/react/src/experimental.tspackages/react/src/utils/childrenUtils.tsxpackages/react/src/components/PlanDetailsButton.tsxpackages/react/src/components/SubscriptionDetailsButton.tsxpackages/react/src/components/CheckoutButton.tsx
packages/*/tsup.config.{js,ts}
📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)
TypeScript compilation and bundling must use tsup.
Files:
packages/react/tsup.config.ts
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/react/tsup.config.tspackages/nextjs/src/experimental.tspackages/react/src/experimental.tspackages/react/src/utils/childrenUtils.tsxpackages/react/src/components/PlanDetailsButton.tsxpackages/react/src/components/SubscriptionDetailsButton.tsxpackages/react/src/components/CheckoutButton.tsx
**/*
⚙️ CodeRabbit Configuration File
**/*: If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes.Whenever reviewing a pull request, if there are any changes that could impact security, always tag
clerk/securityin the PR.Security-impacting changes include, but are not limited to:
- Changes to authentication logic or mechanisms (e.g. login, session handling, token issuance)
- Any modification to access control, authorization checks, or role-based permissions
- Introduction or modification of hashing algorithms, signature verification, or cryptographic primitives
- Handling of sensitive data (e.g. passwords, tokens, secrets, PII)
- Integration with external identity providers (e.g. SSO, OAuth, OpenID Connect)
- Modifications to security headers, cookie flags, CORS policies, or CSRF protections
- Bypass mechanisms (e.g. feature flags, testing overrides) that could weaken protections
- Changes to rate limiting, abuse prevention, or input validation
If you're unsure whether a change is security-relevant, err on the side of caution and tag
clerk/security.Any time that you tag
clerk/security, please do so explicitly in a code comment, rather than within a collapsed section in a coderabbit comment, such as the "recent review details" section. If you do use the team name in any thinking or non-direct-code-comment content, it can be referred to as "clerk security team" to avoid accidentally printing the tag which sends a notification to the team.
Files:
packages/react/tsup.config.tspackages/nextjs/src/experimental.tspackages/react/src/experimental.tspackages/nextjs/package.jsonpackages/react/src/utils/childrenUtils.tsxpackages/react/package.jsonpackages/react/src/components/PlanDetailsButton.tsxpackages/react/src/components/SubscriptionDetailsButton.tsxpackages/react/src/components/CheckoutButton.tsx
.changeset/**
📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)
Automated releases must use Changesets.
Files:
.changeset/curly-jeans-sleep.md.changeset/dark-coins-shake.md
packages/*/package.json
📄 CodeRabbit Inference Engine (.cursor/rules/global.mdc)
All publishable packages should be placed under the packages/ directory
packages/*/package.json: All publishable packages must be located in the 'packages/' directory.
All packages must be published under the @clerk namespace on npm.
Semantic versioning must be used across all packages.
Files:
packages/nextjs/package.jsonpackages/react/package.json
**/*.{jsx,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components:UserProfile,NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...
Files:
packages/react/src/utils/childrenUtils.tsxpackages/react/src/components/PlanDetailsButton.tsxpackages/react/src/components/SubscriptionDetailsButton.tsxpackages/react/src/components/CheckoutButton.tsx
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)
**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering
Files:
packages/react/src/utils/childrenUtils.tsxpackages/react/src/components/PlanDetailsButton.tsxpackages/react/src/components/SubscriptionDetailsButton.tsxpackages/react/src/components/CheckoutButton.tsx
🧬 Code Graph Analysis (3)
packages/react/src/components/PlanDetailsButton.tsx (3)
packages/react/src/components/withClerk.tsx (1)
withClerk(7-37)packages/react/src/types.ts (1)
WithClerkProp(73-73)packages/react/src/utils/childrenUtils.tsx (3)
normalizeWithDefaultValue(25-33)assertSingleChild(6-23)safeExecute(35-41)
packages/react/src/components/SubscriptionDetailsButton.tsx (3)
packages/react/src/components/withClerk.tsx (1)
withClerk(7-37)packages/react/src/types.ts (1)
WithClerkProp(73-73)packages/react/src/utils/childrenUtils.tsx (3)
normalizeWithDefaultValue(25-33)assertSingleChild(6-23)safeExecute(35-41)
packages/react/src/components/CheckoutButton.tsx (3)
packages/react/src/components/withClerk.tsx (1)
withClerk(7-37)packages/react/src/types.ts (1)
WithClerkProp(73-73)packages/react/src/utils/childrenUtils.tsx (3)
normalizeWithDefaultValue(25-33)assertSingleChild(6-23)safeExecute(35-41)
⏰ 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). (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (14)
.changeset/curly-jeans-sleep.md (1)
1-6: Changeset looks good – no action requiredThe summary is concise and clearly states the user-facing change; version bump is correctly set to
minor.packages/react/tsup.config.ts (1)
15-16: Confirm package.json export & publish-files include the new build artefactThe new
experimentalentry will emitdist/experimental.{cjs,js}.js(plus types).
Please double-check that:
packages/react/package.jsonhas
"./experimental": { "types": "./dist/experimental.d.ts", "import": "./dist/experimental.js", "require": "./dist/experimental.cjs" }- The
"files"array (or.npmignore) includesdist/experimental.*Without both, consumers won’t be able to
import '@clerk/clerk-react/experimental'..changeset/dark-coins-shake.md (1)
1-6: Parallel changeset keeps versions in sync – goodNext.js package gets its own
minorbump and release note; no issues spotted.packages/react/src/utils/childrenUtils.tsx (1)
8-17: LGTM! Type extension properly supports new commerce components.The addition of
'CheckoutButton','SubscriptionDetailsButton', and'PlanDetailsButton'to the union type correctly extends theassertSingleChildutility to support the new experimental components while maintaining type safety and consistent error messaging.packages/react/package.json (2)
72-73: Correct addition to files array.Adding "experimental" to the files array ensures the built experimental module is included in the published npm package.
56-66: Approved: Experimental export and build entry configured correctlyThe new
./experimentalexport path follows existing patterns, andtsup.configalready includes anexperimental: 'src/experimental.ts'entry. No further changes required.packages/react/src/components/SubscriptionDetailsButton.tsx (1)
17-27: Excellent auth validation with clear error messages.The component properly validates authentication context with:
- Clear check for signed-in user with helpful error message
- Conditional organization validation when
for="org"- Descriptive error messages that guide proper component usage
packages/react/src/components/CheckoutButton.tsx (7)
11-25: Component definition follows established patterns.The component structure is well-designed, using the
withClerkHOC appropriately and maintaining clean prop destructuring with proper TypeScript types.
26-35: Excellent security validation with clear error messages.The authentication and organization context validation is thorough and provides helpful error messages that guide developers on proper component usage. This prevents security issues by ensuring proper authentication state.
36-38: Consistent children handling pattern.The children normalization and validation follows the established pattern used by other button components in the codebase, ensuring consistency and reliability.
39-55: Clean click handler implementation with proper safety checks.The click handler properly validates the Clerk instance and cleanly passes all relevant props to the internal checkout method.
57-63: Excellent event handler composition that preserves original behavior.The wrapped click handler properly preserves any existing onClick behavior from the child element while adding the checkout functionality. The use of
safeExecuteand proper type checking shows good defensive programming practices.
64-66: Proper React element cloning pattern.The element cloning approach correctly preserves the child component structure while injecting the necessary event handler and props.
67-68: Appropriate HOC configuration.The
withClerkconfiguration correctly sets the component name and enables rendering while loading, which is appropriate for a button component.
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/elements
@clerk/clerk-expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/clerk-react
@clerk/react-router
@clerk/remix
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/themes
@clerk/types
@clerk/upgrade
@clerk/vue
commit: |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
packages/react/src/components/SubscriptionDetailsButton.tsx (1)
59-63: Fix inconsistency in error messageThe error message references
for="organization"but the actual prop value being checked is'org'. This inconsistency could confuse developers.throw new Error( - 'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.', + 'Wrap `<SubscriptionDetailsButton for="org" />` with a check for an active organization.', );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
packages/nextjs/package.json(1 hunks)packages/react/package.json(1 hunks)packages/react/src/components/CheckoutButton.tsx(1 hunks)packages/react/src/components/PlanDetailsButton.tsx(1 hunks)packages/react/src/components/SubscriptionDetailsButton.tsx(1 hunks)packages/react/src/components/__tests__/CheckoutButton.test.tsx(1 hunks)packages/react/src/components/__tests__/PlanDetailsButton.test.tsx(1 hunks)packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx(1 hunks)packages/types/src/clerk.ts(4 hunks)
📓 Path-based instructions (12)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsxpackages/react/src/components/SubscriptionDetailsButton.tsx
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsxpackages/react/src/components/SubscriptionDetailsButton.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsxpackages/react/src/components/SubscriptionDetailsButton.tsx
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsxpackages/react/src/components/SubscriptionDetailsButton.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsxpackages/react/src/components/SubscriptionDetailsButton.tsx
**/*.{jsx,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components:UserProfile,NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsxpackages/react/src/components/SubscriptionDetailsButton.tsx
packages/**/*.{test,spec}.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)
Unit tests should use Jest or Vitest as the test runner.
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsxpackages/react/src/components/SubscriptionDetailsButton.tsx
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)
**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsxpackages/react/src/components/SubscriptionDetailsButton.tsx
**/*.test.{jsx,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)
**/*.test.{jsx,tsx}: Use React Testing Library
Test component behavior, not implementation
Use proper test queries
Implement proper test isolation
Use proper test coverage
Test component interactions
Use proper test data
Implement proper test setup
Use proper test cleanup
Implement proper test assertions
Use proper test structure
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/__tests__/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/typescript.mdc)
**/__tests__/**/*.{ts,tsx}: Create type-safe test builders/factories
Use branded types for test isolation
Implement proper mock types that match interfaces
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/*
⚙️ CodeRabbit Configuration File
**/*: If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes.Whenever reviewing a pull request, if there are any changes that could impact security, always tag
clerk/securityin the PR.Security-impacting changes include, but are not limited to:
- Changes to authentication logic or mechanisms (e.g. login, session handling, token issuance)
- Any modification to access control, authorization checks, or role-based permissions
- Introduction or modification of hashing algorithms, signature verification, or cryptographic primitives
- Handling of sensitive data (e.g. passwords, tokens, secrets, PII)
- Integration with external identity providers (e.g. SSO, OAuth, OpenID Connect)
- Modifications to security headers, cookie flags, CORS policies, or CSRF protections
- Bypass mechanisms (e.g. feature flags, testing overrides) that could weaken protections
- Changes to rate limiting, abuse prevention, or input validation
If you're unsure whether a change is security-relevant, err on the side of caution and tag
clerk/security.Any time that you tag
clerk/security, please do so explicitly in a code comment, rather than within a collapsed section in a coderabbit comment, such as the "recent review details" section. If you do use the team name in any thinking or non-direct-code-comment content, it can be referred to as "clerk security team" to avoid accidentally printing the tag which sends a notification to the team.
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsxpackages/react/src/components/SubscriptionDetailsButton.tsx
🧬 Code Graph Analysis (1)
packages/react/src/components/SubscriptionDetailsButton.tsx (4)
packages/react/src/components/withClerk.tsx (1)
withClerk(7-37)packages/react/src/types.ts (1)
WithClerkProp(73-73)packages/types/src/clerk.ts (1)
__experimental_SubscriptionDetailsButtonProps(1936-1949)packages/react/src/utils/childrenUtils.tsx (3)
normalizeWithDefaultValue(25-33)assertSingleChild(6-23)safeExecute(35-41)
🚧 Files skipped from review as they are similar to previous changes (7)
- packages/react/src/components/CheckoutButton.tsx
- packages/react/package.json
- packages/react/src/components/tests/CheckoutButton.test.tsx
- packages/nextjs/package.json
- packages/react/src/components/PlanDetailsButton.tsx
- packages/react/src/components/tests/PlanDetailsButton.test.tsx
- packages/types/src/clerk.ts
🧰 Additional context used
📓 Path-based instructions (12)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsxpackages/react/src/components/SubscriptionDetailsButton.tsx
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsxpackages/react/src/components/SubscriptionDetailsButton.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsxpackages/react/src/components/SubscriptionDetailsButton.tsx
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsxpackages/react/src/components/SubscriptionDetailsButton.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsxpackages/react/src/components/SubscriptionDetailsButton.tsx
**/*.{jsx,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components:UserProfile,NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsxpackages/react/src/components/SubscriptionDetailsButton.tsx
packages/**/*.{test,spec}.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)
Unit tests should use Jest or Vitest as the test runner.
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsxpackages/react/src/components/SubscriptionDetailsButton.tsx
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)
**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsxpackages/react/src/components/SubscriptionDetailsButton.tsx
**/*.test.{jsx,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)
**/*.test.{jsx,tsx}: Use React Testing Library
Test component behavior, not implementation
Use proper test queries
Implement proper test isolation
Use proper test coverage
Test component interactions
Use proper test data
Implement proper test setup
Use proper test cleanup
Implement proper test assertions
Use proper test structure
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/__tests__/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/typescript.mdc)
**/__tests__/**/*.{ts,tsx}: Create type-safe test builders/factories
Use branded types for test isolation
Implement proper mock types that match interfaces
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/*
⚙️ CodeRabbit Configuration File
**/*: If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes.Whenever reviewing a pull request, if there are any changes that could impact security, always tag
clerk/securityin the PR.Security-impacting changes include, but are not limited to:
- Changes to authentication logic or mechanisms (e.g. login, session handling, token issuance)
- Any modification to access control, authorization checks, or role-based permissions
- Introduction or modification of hashing algorithms, signature verification, or cryptographic primitives
- Handling of sensitive data (e.g. passwords, tokens, secrets, PII)
- Integration with external identity providers (e.g. SSO, OAuth, OpenID Connect)
- Modifications to security headers, cookie flags, CORS policies, or CSRF protections
- Bypass mechanisms (e.g. feature flags, testing overrides) that could weaken protections
- Changes to rate limiting, abuse prevention, or input validation
If you're unsure whether a change is security-relevant, err on the side of caution and tag
clerk/security.Any time that you tag
clerk/security, please do so explicitly in a code comment, rather than within a collapsed section in a coderabbit comment, such as the "recent review details" section. If you do use the team name in any thinking or non-direct-code-comment content, it can be referred to as "clerk security team" to avoid accidentally printing the tag which sends a notification to the team.
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsxpackages/react/src/components/SubscriptionDetailsButton.tsx
🧬 Code Graph Analysis (1)
packages/react/src/components/SubscriptionDetailsButton.tsx (4)
packages/react/src/components/withClerk.tsx (1)
withClerk(7-37)packages/react/src/types.ts (1)
WithClerkProp(73-73)packages/types/src/clerk.ts (1)
__experimental_SubscriptionDetailsButtonProps(1936-1949)packages/react/src/utils/childrenUtils.tsx (3)
normalizeWithDefaultValue(25-33)assertSingleChild(6-23)safeExecute(35-41)
⏰ 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). (5)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: Build Packages
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (8)
packages/react/src/components/SubscriptionDetailsButton.tsx (5)
1-7: LGTM: Clean and well-structured importsThe imports follow TypeScript best practices with proper type-only imports and organized internal module imports.
9-42: Excellent JSDoc documentationThe documentation is comprehensive with clear examples, error conditions, and proper experimental marking. This follows the coding guidelines for public API documentation perfectly.
44-51: Well-structured component setupThe component setup follows good patterns with proper HOC usage and utility function integration. The prop destructuring and children handling are implemented correctly.
65-82: Solid click handler implementationThe click handler properly guards against missing clerk instance, safely executes child click handlers first, and correctly calls the internal Clerk API. The async handling and use of safeExecute utility follow best practices.
84-88: Proper React rendering patternThe component uses React.cloneElement correctly to pass props to the child element, and the withClerk configuration with
renderWhileLoading: trueis appropriate for a button component.packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx (3)
1-36: Well-structured test setupThe test setup properly mocks dependencies using Vitest, creates appropriate mock objects, and follows React Testing Library best practices.
42-78: Comprehensive authentication validation testsThe tests properly cover all authentication scenarios including error cases and successful authentication states. The mock setup and assertions are correct.
80-111: Good coverage of rendering scenariosThe rendering tests cover default content, custom children, and prop passing scenarios with appropriate assertions and proper test setup.
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
Outdated
Show resolved
Hide resolved
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx (2)
119-142: Past review comment has been properly addressed.The test now correctly uses
subscriptionDetailsButtonprop instead of the previously incorrectplanDetailsProps. The test validates that the internal subscription details method is called with the correct parameters.
184-203: Portal configuration test has been corrected.The test now properly uses
subscriptionDetailsButtoninstead of the previously incorrectplanDetailsProps, addressing the past review comment. The portal configuration is tested correctly.
🧹 Nitpick comments (1)
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx (1)
1-206: Consider adding edge case tests for better coverage.While the current test suite is comprehensive, consider adding tests for:
- Multiple children (should throw error based on
assertSingleChildusage)- Invalid
forprop values- Error boundary behavior when subscription details opening fails
// Additional test cases to consider: it('throws error when multiple children are provided', () => { (useAuth as any).mockReturnValue({ userId: 'user_123', orgId: null }); expect(() => render( <SubscriptionDetailsButton> <button>Button 1</button> <button>Button 2</button> </SubscriptionDetailsButton> ) ).toThrow(); }); it('handles subscription details opening errors gracefully', async () => { (useAuth as any).mockReturnValue({ userId: 'user_123', orgId: null }); mockOpenSubscriptionDetails.mockRejectedValue(new Error('Network error')); render(<SubscriptionDetailsButton />); await userEvent.click(screen.getByText('Subscription details')); // Add assertions for error handling behavior });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx(1 hunks)
📓 Path-based instructions (12)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/*.{jsx,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components:UserProfile,NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
packages/**/*.{test,spec}.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)
Unit tests should use Jest or Vitest as the test runner.
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)
**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/*.test.{jsx,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)
**/*.test.{jsx,tsx}: Use React Testing Library
Test component behavior, not implementation
Use proper test queries
Implement proper test isolation
Use proper test coverage
Test component interactions
Use proper test data
Implement proper test setup
Use proper test cleanup
Implement proper test assertions
Use proper test structure
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/__tests__/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/typescript.mdc)
**/__tests__/**/*.{ts,tsx}: Create type-safe test builders/factories
Use branded types for test isolation
Implement proper mock types that match interfaces
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/*
⚙️ CodeRabbit Configuration File
**/*: If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes.Whenever reviewing a pull request, if there are any changes that could impact security, always tag
clerk/securityin the PR.Security-impacting changes include, but are not limited to:
- Changes to authentication logic or mechanisms (e.g. login, session handling, token issuance)
- Any modification to access control, authorization checks, or role-based permissions
- Introduction or modification of hashing algorithms, signature verification, or cryptographic primitives
- Handling of sensitive data (e.g. passwords, tokens, secrets, PII)
- Integration with external identity providers (e.g. SSO, OAuth, OpenID Connect)
- Modifications to security headers, cookie flags, CORS policies, or CSRF protections
- Bypass mechanisms (e.g. feature flags, testing overrides) that could weaken protections
- Changes to rate limiting, abuse prevention, or input validation
If you're unsure whether a change is security-relevant, err on the side of caution and tag
clerk/security.Any time that you tag
clerk/security, please do so explicitly in a code comment, rather than within a collapsed section in a coderabbit comment, such as the "recent review details" section. If you do use the team name in any thinking or non-direct-code-comment content, it can be referred to as "clerk security team" to avoid accidentally printing the tag which sends a notification to the team.
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
🧰 Additional context used
📓 Path-based instructions (12)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/*.{jsx,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components:UserProfile,NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
packages/**/*.{test,spec}.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)
Unit tests should use Jest or Vitest as the test runner.
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)
**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/*.test.{jsx,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)
**/*.test.{jsx,tsx}: Use React Testing Library
Test component behavior, not implementation
Use proper test queries
Implement proper test isolation
Use proper test coverage
Test component interactions
Use proper test data
Implement proper test setup
Use proper test cleanup
Implement proper test assertions
Use proper test structure
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/__tests__/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/typescript.mdc)
**/__tests__/**/*.{ts,tsx}: Create type-safe test builders/factories
Use branded types for test isolation
Implement proper mock types that match interfaces
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
**/*
⚙️ CodeRabbit Configuration File
**/*: If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes.Whenever reviewing a pull request, if there are any changes that could impact security, always tag
clerk/securityin the PR.Security-impacting changes include, but are not limited to:
- Changes to authentication logic or mechanisms (e.g. login, session handling, token issuance)
- Any modification to access control, authorization checks, or role-based permissions
- Introduction or modification of hashing algorithms, signature verification, or cryptographic primitives
- Handling of sensitive data (e.g. passwords, tokens, secrets, PII)
- Integration with external identity providers (e.g. SSO, OAuth, OpenID Connect)
- Modifications to security headers, cookie flags, CORS policies, or CSRF protections
- Bypass mechanisms (e.g. feature flags, testing overrides) that could weaken protections
- Changes to rate limiting, abuse prevention, or input validation
If you're unsure whether a change is security-relevant, err on the side of caution and tag
clerk/security.Any time that you tag
clerk/security, please do so explicitly in a code comment, rather than within a collapsed section in a coderabbit comment, such as the "recent review details" section. If you do use the team name in any thinking or non-direct-code-comment content, it can be referred to as "clerk security team" to avoid accidentally printing the tag which sends a notification to the team.
Files:
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx
⏰ 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). (5)
- GitHub Check: Build Packages
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (4)
packages/react/src/components/__tests__/SubscriptionDetailsButton.test.tsx (4)
1-36: Test setup and mocking implementation looks good.The imports, mock setup, and beforeEach configuration follow testing best practices. The mocking of
useAuthandwithClerkHOC is properly implemented for component isolation.
42-78: Authentication validation tests are comprehensive.The test cases properly cover all authentication scenarios:
- Unauthenticated users
- Users without organization when
for="org"is specified- Successful authentication for both user and organization contexts
The error messages are descriptive and helpful for developers.
80-111: Rendering tests cover essential component behavior.The tests verify default content rendering, custom children, and prop forwarding. The test structure is clean and follows React Testing Library best practices.
144-175: Event handling tests validate proper interaction flow.The tests ensure that child onClick handlers execute before the subscription details modal opens, and that the
onSubscriptionCancelcallback is properly passed through. This validates the component's event handling behavior correctly.
panteliselef
force-pushed
the
elef/com-961-dx-guide-introduce-prebuilt-components
branch
from
25e58e9 to
8f29cb4
Compare
panteliselef
deleted the
elef/com-961-dx-guide-introduce-prebuilt-components
branch
Description
This PR introduces the
/experimentalsubmodule, and exports<CheckoutButton/>,<SubscriptionDetailsButton/>,<PlanDetailsButton/>from it.For react
For Next.js
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
Chores
Tests