Add jsdoc comments to connect components and functions (#2293)

* Add jsdoc comments to connect components and functions

* Revert change

* Improve example

Author: gimenete-stripe

src/connect/Components.tsx

@@ -24,6 +24,39 @@ import { useConnectComponents } from './ConnectComponentsProvider';
 export { NavigationBar } from './NavigationBar';
 export type { NavigationBarProps } from './NavigationBar';
 
+/**
+ * A full-screen modal component for Connect account onboarding.
+ * Guides connected accounts through the process of providing required information.
+ *
+ * **Platform differences:**
+ * - iOS: Uses native modal with UIKit navigation bar
+ * - Android: Uses React Native Modal with custom navigation bar
+ *
+ * @param props.title - Optional title displayed in navigation bar
+ * @param props.onExit - Required callback when user closes the onboarding flow
+ * @param props.onStepChange - Optional callback fired when onboarding step changes
+ * @param props.recipientTermsOfServiceUrl - URL for recipient terms of service
+ * @param props.fullTermsOfServiceUrl - URL for full terms of service
+ * @param props.privacyPolicyUrl - URL for privacy policy
+ * @param props.collectionOptions - Configuration for which account fields to collect
+ * @param props.onLoaderStart - Callback when component begins loading
+ * @param props.onLoadError - Callback when component fails to load
+ * @param props.onPageDidLoad - Callback when component finishes loading
+ *
+ * @example
+ * ```tsx
+ * <ConnectAccountOnboarding
+ *   title="Complete your account setup"
+ *   onExit={() => navigation.goBack()}
+ *   onStepChange={({ step }) => console.log('Current step:', step)}
+ *   collectionOptions={{
+ *     fields: 'currently_due',
+ *     futureRequirements: 'include'
+ *   }}
+ * />
+ * ```
+ * @category Connect
+ */
 export function ConnectAccountOnboarding({
   title,
   onExit,
@@ -178,6 +211,28 @@ export function ConnectAccountOnboarding({
   );
 }
 
+/**
+ * Displays a list of payments for the connected account with optional filtering.
+ * Embed this component to show payment history and details.
+ *
+ * @param props.defaultFilters - Optional filters to apply to the payments list
+ * @param props.onLoaderStart - Callback when component begins loading
+ * @param props.onLoadError - Callback when component fails to load
+ * @param props.onPageDidLoad - Callback when component finishes loading
+ * @param props.style - Optional styling for the component container
+ *
+ * @example
+ * ```tsx
+ * <ConnectPayments
+ *   defaultFilters={{
+ *     status: ['successful', 'pending'],
+ *     date: { after: new Date('2024-01-01') }
+ *   }}
+ *   style={{ flex: 1 }}
+ * />
+ * ```
+ * @category Connect
+ */
 export function ConnectPayments({
   defaultFilters,
   onLoaderStart,
@@ -205,6 +260,21 @@ export function ConnectPayments({
   );
 }
 
+/**
+ * Displays payout information for the connected account.
+ * Shows payout history, schedules, and details.
+ *
+ * @param props.onLoaderStart - Callback when component begins loading
+ * @param props.onLoadError - Callback when component fails to load
+ * @param props.onPageDidLoad - Callback when component finishes loading
+ * @param props.style - Optional styling for the component container
+ *
+ * @example
+ * ```tsx
+ * <ConnectPayouts style={{ flex: 1 }} />
+ * ```
+ * @category Connect
+ */
 export function ConnectPayouts({
   onLoaderStart,
   onLoadError,
@@ -222,6 +292,27 @@ export function ConnectPayouts({
   );
 }
 
+/**
+ * Displays detailed information for a specific payment.
+ * Typically used in a modal or detail view after selecting a payment from ConnectPayments.
+ *
+ * @param props.payment - The payment ID to display details for
+ * @param props.onClose - Required callback when user closes the detail view
+ * @param props.onLoaderStart - Callback when component begins loading
+ * @param props.onLoadError - Callback when component fails to load
+ * @param props.onPageDidLoad - Callback when component finishes loading
+ * @param props.style - Optional styling for the component container
+ *
+ * @example
+ * ```tsx
+ * <ConnectPaymentDetails
+ *   payment="py_1234567890"
+ *   onClose={() => setShowDetails(false)}
+ *   style={{ flex: 1 }}
+ * />
+ * ```
+ * @category Connect
+ */
 export function ConnectPaymentDetails({
   payment,
   onClose,

src/connect/ConnectComponentsProvider.tsx

@@ -19,6 +19,29 @@ class ConnectInstance implements StripeConnectInstance {
   }
 }
 
+/**
+ * Creates a Connect instance for use with ConnectComponentsProvider.
+ * This instance manages the configuration and state for Connect embedded components.
+ *
+ * @param initParams - Initialization parameters including publishableKey and fetchClientSecret
+ * @returns A StripeConnectInstance that can be passed to ConnectComponentsProvider
+ *
+ * @example
+ * ```ts
+ * const connectInstance = loadConnectAndInitialize({
+ *   publishableKey: 'pk_test_123',
+ *   fetchClientSecret: async () => {
+ *     const response = await fetch('/account_session');
+ *     const { client_secret } = await response.json();
+ *     return client_secret;
+ *   },
+ *   appearance: {
+ *     variables: { colorPrimary: '#635BFF' }
+ *   }
+ * });
+ * ```
+ * @category Connect
+ */
 export const loadConnectAndInitialize: LoadConnectAndInitialize = (
   initParams: StripeConnectInitParams
 ): StripeConnectInstance => {
@@ -41,6 +64,42 @@ const ConnectComponentsContext =
 
 ConnectComponentsContext.displayName = 'ConnectComponents';
 
+/**
+ * Context provider that makes Connect instance configuration available to embedded components.
+ * Wrap your Connect components with this provider to enable them to access the shared configuration.
+ *
+ * @param props.connectInstance - Instance created via loadConnectAndInitialize
+ * @param props.children - React components to render within the provider
+ * @returns JSX.Element
+ *
+ * @throws Error if connectInstance is not created via loadConnectAndInitialize
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const [connectInstance] = useState(() => {
+ *     const fetchClientSecret = async () => {
+ *       const response = await fetch('/account_session', { method: "POST" });
+ *       const { client_secret: clientSecret } = await response.json();
+ *       return clientSecret;
+ *     };
+ *
+ *     return loadConnectAndInitialize({
+ *       publishableKey: 'pk_test_123',
+ *       fetchClientSecret: fetchClientSecret,
+ *       appearance,
+ *     });
+ *   });
+ *
+ *   return (
+ *     <ConnectComponentsProvider connectInstance={connectInstance}>
+ *       <ConnectPayouts />
+ *     </ConnectComponentsProvider>
+ *   );
+ * }
+ * ```
+ * @category Connect
+ */
 export const ConnectComponentsProvider = ({
   children,
   connectInstance,