fix(react): add PropsWithChildren

https://solverfox.dev/writing/no-implicit-children/

packages/auth/src/AuthProvider.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 
 import { createAuthClient } from './authClients'
 import type {
@@ -114,7 +114,7 @@ type AuthProviderState = {
  * ```
  */
 export class AuthProvider extends React.Component<
-  AuthProviderProps,
+  PropsWithChildren<AuthProviderProps>,
   AuthProviderState
 > {
   static defaultProps = {

packages/router/src/active-route-loader.tsx

@@ -1,4 +1,9 @@
-import React, { useRef, useState, useEffect } from 'react'
+import React, {
+  useRef,
+  useState,
+  useEffect,
+  PropsWithChildren,
+} from 'react'
 
 import { getAnnouncement, getFocus, resetFocus } from './a11yUtils'
 import {
@@ -34,7 +39,7 @@ export const ActiveRouteLoader = ({
   params,
   whileLoadingPage,
   children,
-}: Props) => {
+}: PropsWithChildren<Props>) => {
   const location = useLocation()
   const [pageName, setPageName] = useState('')
   const loadingTimeout = useRef<NodeJS.Timeout>()

packages/router/src/location.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 
 import { gHistory } from './history'
 import { createNamedContext, TrailingSlashesTypes } from './util'
@@ -20,7 +20,9 @@ interface LocationProviderProps {
   trailingSlashes?: TrailingSlashesTypes
 }
 
-class LocationProvider extends React.Component<LocationProviderProps> {
+class LocationProvider extends React.Component<
+  PropsWithChildren<LocationProviderProps>
+> {
   // When prerendering, there might be more than one level of location
   // providers. Use the values from the one above.
   static contextType = LocationContext

packages/router/src/params.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { PropsWithChildren, useContext } from 'react'
 
 import { LocationContextType, useLocation } from './location'
 import { useRouterState } from './router-context'
@@ -15,7 +15,7 @@ interface Props {
   location?: LocationContextType
 }
 
-export const ParamsProvider: React.FC<Props> = ({
+export const ParamsProvider: React.FC<PropsWithChildren<Props>> = ({
   path,
   location,
   children,

packages/router/src/router-context.tsx

@@ -1,4 +1,9 @@
-import React, { useReducer, createContext, useContext } from 'react'
+import React, {
+  useReducer,
+  createContext,
+  useContext,
+  PropsWithChildren,
+} from 'react'
 
 import { useAuth } from '@redwoodjs/auth'
 
@@ -28,11 +33,9 @@ function stateReducer(state: RouterState, newState: Partial<RouterState>) {
   return { ...state, ...newState }
 }
 
-export const RouterContextProvider: React.FC<RouterContextProviderProps> = ({
-  useAuth: customUseAuth,
-  paramTypes,
-  children,
-}) => {
+export const RouterContextProvider: React.FC<
+  PropsWithChildren<RouterContextProviderProps>
+> = ({ useAuth: customUseAuth, paramTypes, children }) => {
   const [state, setState] = useReducer(stateReducer, {
     useAuth: customUseAuth || useAuth,
     paramTypes,

packages/router/src/router.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 
 import { ActiveRouteLoader } from './active-route-loader'
 import { useActivePageContext } from './ActivePageContext'
@@ -128,7 +128,7 @@ interface RouterProps extends RouterContextProviderProps {
   pageLoadingDelay?: number
 }
 
-const Router: React.FC<RouterProps> = ({
+const Router: React.FC<PropsWithChildren<RouterProps>> = ({
   useAuth,
   paramTypes,
   pageLoadingDelay,
@@ -147,7 +147,7 @@ const Router: React.FC<RouterProps> = ({
   </LocationProvider>
 )
 
-const LocationAwareRouter: React.FC<RouterProps> = ({
+const LocationAwareRouter: React.FC<PropsWithChildren<RouterProps>> = ({
   useAuth,
   paramTypes,
   pageLoadingDelay,

packages/testing/src/web/MockParamsProvider.tsx

@@ -1,12 +1,14 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 
 import { useLocation, ParamsContext, parseSearch } from '@redwoodjs/router'
 
 interface Props {
   path?: string
 }
 
-export const MockParamsProvider: React.FC<Props> = ({ children }) => {
+export const MockParamsProvider: React.FC<PropsWithChildren<Props>> = ({
+  children,
+}) => {
   const location = useLocation()
 
   const searchParams = parseSearch(location.search)

packages/testing/src/web/MockProviders.tsx

@@ -2,7 +2,7 @@
  * NOTE: This module should not contain any nodejs functionality,
  * because it's also used by Storybook in the browser.
  */
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 
 import type { AuthContextInterface } from '@redwoodjs/auth'
 import { AuthProvider } from '@redwoodjs/auth'
@@ -55,7 +55,9 @@ export const mockAuthClient = {
   type: 'custom',
 }
 
-export const MockProviders: React.FunctionComponent = ({ children }) => {
+export const MockProviders: React.FunctionComponent<PropsWithChildren> = ({
+  children,
+}) => {
   return (
     <AuthProvider client={mockAuthClient} type="custom">
       <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">

packages/testing/src/web/MockRouter.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 
 // Bypass the `main` field in `package.json` because we alias `@redwoodjs/router`
 // for jest and Storybook. Not doing so would cause an infinite loop.
@@ -16,7 +16,9 @@ export const routes: { [routeName: string]: () => string } = {}
  * We overwrite the default `Router` export.
  * It populates the `routes.<pagename>()` utility object.
  */
-export const Router: React.FunctionComponent = ({ children }) => {
+export const Router: React.FunctionComponent<PropsWithChildren> = ({
+  children,
+}) => {
   const flatChildArray = flattenAll(children)
 
   flatChildArray.forEach((child) => {

packages/web/src/apollo/index.tsx

@@ -1,3 +1,5 @@
+import { PropsWithChildren } from 'react'
+
 import type {
   ApolloClientOptions,
   setLogVerbosity,
@@ -91,13 +93,15 @@ export type GraphQLClientConfigProp = Omit<
 
 export type UseAuthProp = () => AuthContextInterface
 
-const ApolloProviderWithFetchConfig: React.FunctionComponent<{
-  config: Omit<GraphQLClientConfigProp, 'cacheConfig' | 'cache'> & {
-    cache: ApolloCache<unknown>
-  }
-  useAuth: UseAuthProp
-  logLevel: F.Return<typeof setLogVerbosity>
-}> = ({ config, children, useAuth, logLevel }) => {
+const ApolloProviderWithFetchConfig: React.FunctionComponent<
+  PropsWithChildren<{
+    config: Omit<GraphQLClientConfigProp, 'cacheConfig' | 'cache'> & {
+      cache: ApolloCache<unknown>
+    }
+    useAuth: UseAuthProp
+    logLevel: F.Return<typeof setLogVerbosity>
+  }>
+> = ({ config, children, useAuth, logLevel }) => {
   /**
    * Should they run into it,
    * this helps users with the "Cannot render cell; GraphQL success but data is null" error.
@@ -257,7 +261,9 @@ interface ErrorBoundaryProps {
   onError: NonNullable<ComponentDidCatch>
 }
 
-class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
+class ErrorBoundary extends React.Component<
+  PropsWithChildren<ErrorBoundaryProps>
+> {
   componentDidCatch(...args: Parameters<NonNullable<ComponentDidCatch>>) {
     this.setState({})
     this.props.onError(...args)
@@ -268,11 +274,13 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
   }
 }
 
-export const RedwoodApolloProvider: React.FunctionComponent<{
-  graphQLClientConfig?: GraphQLClientConfigProp
-  useAuth?: UseAuthProp
-  logLevel?: F.Return<typeof setLogVerbosity>
-}> = ({
+export const RedwoodApolloProvider: React.FunctionComponent<
+  PropsWithChildren<{
+    graphQLClientConfig?: GraphQLClientConfigProp
+    useAuth?: UseAuthProp
+    logLevel?: F.Return<typeof setLogVerbosity>
+  }>
+> = ({
   graphQLClientConfig,
   useAuth = useRWAuth,
   logLevel = 'debug',

packages/web/src/components/FetchConfigProvider.tsx

@@ -1,3 +1,5 @@
+import { PropsWithChildren } from 'react'
+
 import type { AuthContextInterface, SupportedAuthTypes } from '@redwoodjs/auth'
 
 export const getApiGraphQLUrl = () => {
@@ -22,9 +24,11 @@ type UseAuthType = () => AuthContextInterface
  * Note that the auth bearer token is now passed in packages/web/src/apollo/index.tsx
  * as the token is retrieved async
  */
-export const FetchConfigProvider: React.FunctionComponent<{
-  useAuth?: UseAuthType
-}> = ({
+export const FetchConfigProvider: React.FunctionComponent<
+  PropsWithChildren<{
+    useAuth?: UseAuthType
+  }>
+> = ({
   useAuth = global.__REDWOOD__USE_AUTH ?? (() => defaultAuthState),
   ...rest
 }) => {