refactor: add PropsWithChildren pros

Add React.PropsWithChildren for compatibility with React v18
twilio-labs · Sep 20, 2022 · bb423f1 · bb423f1
1 parent db6b070
commit bb423f1
Show file tree

Hide file tree

Showing 329 changed files with 926 additions and 686 deletions.
diff --git a/packages/paste-core/components/alert-dialog/stories/index.stories.tsx b/packages/paste-core/components/alert-dialog/stories/index.stories.tsx
@@ -24,7 +24,7 @@ export default {
   ],
 };
 
-export const AlertDialogWithTwoActions: React.FC = () => {
+export const AlertDialogWithTwoActions: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <AlertDialog
       heading="Submit application"
@@ -50,7 +50,7 @@ AlertDialogWithTwoActionsStory.story = {
   },
 };
 
-export const DestructiveAlertDialog: React.FC = () => {
+export const DestructiveAlertDialog: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <AlertDialog
       heading="Delete data"
@@ -77,7 +77,7 @@ DestructiveAlertDialogStory.story = {
   },
 };
 
-export const OpenAlertDialogFromButton: React.FC = () => {
+export const OpenAlertDialogFromButton: React.FC<React.PropsWithChildren<unknown>> = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const handleOpen = (): void => setIsOpen(true);
   const handleClose = (): void => setIsOpen(false);
@@ -112,7 +112,7 @@ OpenAlertDialogFromButtonStory.story = {
   },
 };
 
-export const OpenAlertDialogFromModal: React.FC = () => {
+export const OpenAlertDialogFromModal: React.FC<React.PropsWithChildren<unknown>> = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(true);
   const [isAlertDialogOpen, setIsAlertDialogOpen] = React.useState(true);
   const handleModalOpen = (): void => setIsModalOpen(true);
@@ -216,7 +216,7 @@ DestructiveAlertDialogVRT.story = {
   name: 'Destructive Alert Dialog for VRT',
 };
 
-export const CustomizedAlertDialog: React.FC = () => {
+export const CustomizedAlertDialog: React.FC<React.PropsWithChildren<unknown>> = () => {
   const theme = useTheme();
   return (
     <CustomizationProvider
@@ -245,7 +245,7 @@ export const CustomizedAlertDialog: React.FC = () => {
   );
 };
 
-export const CustomizedDestructiveAlertDialog: React.FC = () => {
+export const CustomizedDestructiveAlertDialog: React.FC<React.PropsWithChildren<unknown>> = () => {
   const currentTheme = useTheme();
   return (
     <CustomizationProvider

diff --git a/packages/paste-core/components/avatar/src/index.tsx b/packages/paste-core/components/avatar/src/index.tsx
@@ -9,7 +9,12 @@ import type {AvatarProps, AvatarContentProps} from './types';
 
 const DEFAULT_SIZE = 'sizeIcon70';
 
-const AvatarContents: React.FC<AvatarContentProps> = ({name, size = DEFAULT_SIZE, src, icon: Icon}) => {
+const AvatarContents: React.FC<React.PropsWithChildren<AvatarContentProps>> = ({
+  name,
+  size = DEFAULT_SIZE,
+  src,
+  icon: Icon,
+}) => {
   const computedTokenNames = getComputedTokenNames(size);
   if (src != null) {
     return <Box as="img" alt={name} maxWidth="100%" src={src} size={size} title={name} />;

diff --git a/packages/paste-core/components/avatar/src/types.ts b/packages/paste-core/components/avatar/src/types.ts
@@ -6,13 +6,13 @@ export type AvatarProps = React.HTMLAttributes<'div'> &
   Pick<BoxProps, 'element'> & {
     name: string;
     size?: IconSize;
-    icon?: React.FC<GenericIconProps>;
+    icon?: React.FC<React.PropsWithChildren<GenericIconProps>>;
     src?: string;
   };
 
 export type AvatarContentProps = {
   name: string;
   size?: IconSize;
-  icon?: React.FC<GenericIconProps>;
+  icon?: React.FC<React.PropsWithChildren<GenericIconProps>>;
   src?: string;
 };
diff --git a/packages/paste-core/components/badge/stories/customization.stories.tsx b/packages/paste-core/components/badge/stories/customization.stories.tsx
@@ -36,7 +36,7 @@ export const getStyles = (element = 'BADGE'): {[key: string]: PasteCustomCSS} =>
   };
 };
 
-const CustomizationWrapper: React.FC<{variant: BadgeVariants; isTestEnvironment: boolean}> = ({
+const CustomizationWrapper: React.FC<React.PropsWithChildren<{variant: BadgeVariants; isTestEnvironment: boolean}>> = ({
   variant,
   isTestEnvironment,
 }): React.ReactElement => {

diff --git a/packages/paste-core/components/badge/stories/index.stories.tsx b/packages/paste-core/components/badge/stories/index.stories.tsx
@@ -26,7 +26,7 @@ const Wrapper = styled.div(
   })
 );
 
-export const AllBadges: React.FC = () => (
+export const AllBadges: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Wrapper>
     <Badge as="span" variant="neutral">
       Neutral
@@ -64,7 +64,7 @@ export const AllBadges: React.FC = () => (
   </Wrapper>
 );
 
-export const NeutralBadge: React.FC = () => (
+export const NeutralBadge: React.FC<React.PropsWithChildren<unknown>> = () => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -121,7 +121,7 @@ export const NeutralBadge: React.FC = () => (
   </>
 );
 
-export const WarningBadge: React.FC = () => (
+export const WarningBadge: React.FC<React.PropsWithChildren<unknown>> = () => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -174,7 +174,7 @@ export const WarningBadge: React.FC = () => (
   </>
 );
 
-export const ErrorBadge: React.FC = () => (
+export const ErrorBadge: React.FC<React.PropsWithChildren<unknown>> = () => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -227,7 +227,7 @@ export const ErrorBadge: React.FC = () => (
   </>
 );
 
-export const SuccessBadge: React.FC = () => (
+export const SuccessBadge: React.FC<React.PropsWithChildren<unknown>> = () => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -284,7 +284,7 @@ export const SuccessBadge: React.FC = () => (
   </>
 );
 
-export const NewBadge: React.FC = () => (
+export const NewBadge: React.FC<React.PropsWithChildren<unknown>> = () => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -337,7 +337,7 @@ export const NewBadge: React.FC = () => (
   </>
 );
 
-export const Decorative10Badge: React.FC = () => (
+export const Decorative10Badge: React.FC<React.PropsWithChildren<unknown>> = () => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -390,7 +390,7 @@ export const Decorative10Badge: React.FC = () => (
   </>
 );
 
-export const Decorative20Badge: React.FC = () => (
+export const Decorative20Badge: React.FC<React.PropsWithChildren<unknown>> = () => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -443,7 +443,7 @@ export const Decorative20Badge: React.FC = () => (
   </>
 );
 
-export const Decorative30Badge: React.FC = () => (
+export const Decorative30Badge: React.FC<React.PropsWithChildren<unknown>> = () => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -496,7 +496,7 @@ export const Decorative30Badge: React.FC = () => (
   </>
 );
 
-export const Decorative40Badge: React.FC = () => (
+export const Decorative40Badge: React.FC<React.PropsWithChildren<unknown>> = () => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -549,7 +549,7 @@ export const Decorative40Badge: React.FC = () => (
   </>
 );
 
-export const NeutralCounterBadge: React.FC = () => (
+export const NeutralCounterBadge: React.FC<React.PropsWithChildren<unknown>> = () => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -596,7 +596,7 @@ export const NeutralCounterBadge: React.FC = () => (
   </>
 );
 
-export const ErrorCounterBadge: React.FC = () => (
+export const ErrorCounterBadge: React.FC<React.PropsWithChildren<unknown>> = () => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -643,7 +643,7 @@ export const ErrorCounterBadge: React.FC = () => (
   </>
 );
 
-export const DefaultBadge: React.FC = () => (
+export const DefaultBadge: React.FC<React.PropsWithChildren<unknown>> = () => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -690,7 +690,7 @@ export const DefaultBadge: React.FC = () => (
   </>
 );
 
-export const InfoBadge: React.FC = () => (
+export const InfoBadge: React.FC<React.PropsWithChildren<unknown>> = () => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -737,7 +737,7 @@ export const InfoBadge: React.FC = () => (
   </>
 );
 
-export const LongTextBadge: React.FC = () => (
+export const LongTextBadge: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Wrapper>
     <Badge as="a" href="#" variant="neutral">
       <InformationIcon decorative />

diff --git a/packages/paste-core/components/breadcrumb/__tests__/breadcrumb.spec.tsx b/packages/paste-core/components/breadcrumb/__tests__/breadcrumb.spec.tsx
@@ -5,7 +5,7 @@ import {CustomizationProvider} from '@twilio-paste/customization';
 import {Breadcrumb, BreadcrumbItem} from '../src';
 
 describe('Breadcrumb', () => {
-  const BreadcrumbExample: React.FC = () => {
+  const BreadcrumbExample: React.FC<React.PropsWithChildren<unknown>> = () => {
     return (
       <Breadcrumb>
         <BreadcrumbItem href="#">foo</BreadcrumbItem>

diff --git a/packages/paste-core/components/breadcrumb/src/index.tsx b/packages/paste-core/components/breadcrumb/src/index.tsx
@@ -7,7 +7,7 @@ import type {AnchorProps} from '@twilio-paste/anchor';
 import {Text, safelySpreadTextProps} from '@twilio-paste/text';
 import {useUIDSeed} from '@twilio-paste/uid-library';
 
-const BreadcrumbSeparator: React.FC<{element: BoxElementProps['element']}> = ({element}) => (
+const BreadcrumbSeparator: React.FC<React.PropsWithChildren<{element: BoxElementProps['element']}>> = ({element}) => (
   <Text
     as="span"
     color="colorTextWeak"

diff --git a/packages/paste-core/components/button/src/index.tsx b/packages/paste-core/components/button/src/index.tsx
@@ -122,7 +122,12 @@ const handlePropValidation = ({
 
 const variantsWithoutBoundingBox = new Set(['link', 'destructive_link', 'inverse_link', 'reset']);
 
-const ButtonContents: React.FC<ButtonContentsProps> = ({buttonState, children, showLoading, variant}) => {
+const ButtonContents: React.FC<React.PropsWithChildren<ButtonContentsProps>> = ({
+  buttonState,
+  children,
+  showLoading,
+  variant,
+}) => {
   const buttonVariantHasBoundingBox = variant && variantsWithoutBoundingBox.has(variant);
 
   return (
@@ -158,7 +163,9 @@ const ButtonContents: React.FC<ButtonContentsProps> = ({buttonState, children, s
   );
 };
 
-const getButtonComponent = (variant: ButtonVariants): React.FunctionComponent<DirectButtonProps> => {
+const getButtonComponent = (
+  variant: ButtonVariants
+): React.FunctionComponent<React.PropsWithChildren<DirectButtonProps>> => {
   switch (variant) {
     case 'primary_icon':
       return PrimaryIconButton;

diff --git a/packages/paste-core/components/button/stories/customization.stories.tsx b/packages/paste-core/components/button/stories/customization.stories.tsx
@@ -31,11 +31,12 @@ const customButtonStyles = {
   },
 } as PasteCustomCSS;
 
-const ShowCustomization: React.FC<{
-  button: React.ReactNode;
-  customButton: React.ReactNode;
+const ShowCustomization: React.FC<
+React.PropsWithChildren<{
+    button: React.ReactNode;
+   customButton: React.ReactNode;
   isTestEnvironment: boolean;
-}> = ({button, customButton, isTestEnvironment}) => {
+}>> = ({button, customButton, isTestEnvironment}) => {
   const currentTheme = useTheme();
   return (
     <Stack orientation="vertical" spacing="space90">
@@ -71,10 +72,9 @@ const ShowCustomization: React.FC<{
   );
 };
 
-export const AnyButton: React.FC<{element?: BoxElementProps['element']; variant: ButtonVariants}> = ({
-  element = 'BUTTON',
-  variant,
-}) => (
+export const AnyButton: React.FC<
+  React.PropsWithChildren<{element?: BoxElementProps['element']; variant: ButtonVariants}>
+> = ({element = 'BUTTON', variant}) => (
   <Button variant={variant} element={element} data-testid="button_for_customization">
     Click me
   </Button>

diff --git a/packages/paste-core/components/button/stories/index.stories.tsx b/packages/paste-core/components/button/stories/index.stories.tsx
@@ -24,7 +24,7 @@ const ButtonSizeOptions = [
   'circle_small',
 ];
 
-const AllSizeOptions: React.FC<{variant: ButtonVariants}> = ({variant}) => {
+const AllSizeOptions: React.FC<React.PropsWithChildren<{variant: ButtonVariants}>> = ({variant}) => {
   const allButtons: React.ReactNode[] = [];
 
   ButtonSizeOptions.forEach((size) => {
@@ -196,7 +196,7 @@ export const ButtonAsAnchor = (): React.ReactNode => {
   );
 };
 
-const IconSizeOptions: React.FC<{variant: ButtonVariants}> = ({variant}) => {
+const IconSizeOptions: React.FC<React.PropsWithChildren<{variant: ButtonVariants}>> = ({variant}) => {
   return (
     <Stack orientation="vertical" spacing="space60">
       <Box>
@@ -266,7 +266,7 @@ interface ToggleButtonProps {
   };
 }
 
-const ToggleButton: React.FC<ToggleButtonProps> = ({
+const ToggleButton: React.FC<React.PropsWithChildren<ToggleButtonProps>> = ({
   defaultPressed = false,
   variant = 'secondary',
   children,

diff --git a/packages/paste-core/components/callout/__tests__/customization.spec.tsx b/packages/paste-core/components/callout/__tests__/customization.spec.tsx
@@ -4,7 +4,7 @@ import {CustomizationProvider} from '@twilio-paste/customization';
 
 import {Callout, CalloutHeading, CalloutList, CalloutListItem, CalloutText} from '../src';
 
-const CustomizationWrapper: React.FC = ({children}) => (
+const CustomizationWrapper: React.FC<React.PropsWithChildren<unknown>> = ({children}) => (
   <CustomizationProvider
     baseTheme="default"
     theme={TestTheme}
@@ -46,7 +46,7 @@ const CustomizationWrapper: React.FC = ({children}) => (
   </CustomizationProvider>
 );
 
-const MyCustomizationWrapper: React.FC = ({children}) => (
+const MyCustomizationWrapper: React.FC<React.PropsWithChildren<unknown>> = ({children}) => (
   <CustomizationProvider
     baseTheme="default"
     theme={TestTheme}

diff --git a/packages/paste-core/components/callout/src/Callout.tsx b/packages/paste-core/components/callout/src/Callout.tsx
@@ -44,7 +44,7 @@ const variantStyles: Record<CalloutVariants, BoxStyleProps> = {
   },
 };
 
-const variantIcons: Record<CalloutVariants, React.FC<GenericIconProps>> = {
+const variantIcons: Record<CalloutVariants, React.FC<React.PropsWithChildren<GenericIconProps>>> = {
   success: SuccessIcon,
   error: ErrorIcon,
   warning: WarningIcon,

diff --git a/packages/paste-core/components/callout/stories/index.stories.tsx b/packages/paste-core/components/callout/stories/index.stories.tsx
@@ -9,7 +9,7 @@ export default {
   component: Callout,
 };
 
-const ExampleList: React.FC<{as: 'ul' | 'ol'}> = ({as}) => (
+const ExampleList: React.FC<React.PropsWithChildren<{as: 'ul' | 'ol'}>> = ({as}) => (
   <CalloutList as={as}>
     <CalloutListItem>Item one</CalloutListItem>
     <CalloutListItem>Item two</CalloutListItem>

diff --git a/packages/paste-core/components/chat-log/__tests__/ChatAttachment.spec.tsx b/packages/paste-core/components/chat-log/__tests__/ChatAttachment.spec.tsx
@@ -50,13 +50,16 @@ const customizedMyElements: {[key: string]: PasteCustomCSS} = {
   },
 };
 
-const CustomizationWrapper: React.FC<{elements?: {[key: string]: PasteCustomCSS}}> = ({children, elements}) => (
+const CustomizationWrapper: React.FC<React.PropsWithChildren<{elements?: {[key: string]: PasteCustomCSS}}>> = ({
+  children,
+  elements,
+}) => (
   <CustomizationProvider baseTheme="default" theme={TestTheme} elements={elements || customizedElements}>
     {children}
   </CustomizationProvider>
 );
 
-const CustomizationMyWrapper: React.FC = ({children}) => (
+const CustomizationMyWrapper: React.FC<React.PropsWithChildren<unknown>> = ({children}) => (
   <CustomizationWrapper elements={customizedMyElements}>{children}</CustomizationWrapper>
 );