chore(examples): removes all instances of React.forwardRef (#10334)

Similar to #10331. Since React 19, refs can now be passed directly through props without the need for `React.forwardRef`. This greatly simplifies components types and overall syntax.
payloadcms · Jan 3, 2025 · 1f4790a · 1f4790a
1 parent 47e8158
commit 1f4790a
Show file tree

Hide file tree

Showing 16 changed files with 209 additions and 273 deletions.
diff --git a/examples/auth/src/app/(app)/_components/Gutter/index.tsx b/examples/auth/src/app/(app)/_components/Gutter/index.tsx
@@ -1,19 +1,17 @@
-import type { Ref } from 'react'
-
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import classes from './index.module.scss'
 
 type Props = {
   children: React.ReactNode
   className?: string
   left?: boolean
-  ref?: Ref<HTMLDivElement>
+  ref?: React.Ref<HTMLDivElement>
   right?: boolean
 }
 
-export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
-  const { children, className, left = true, right = true } = props
+export const Gutter: React.FC<Props & { ref?: React.Ref<HTMLDivElement> }> = (props) => {
+  const { children, className, left = true, right = true, ref } = props
 
   return (
     <div
@@ -30,6 +28,4 @@ export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props,
       {children}
     </div>
   )
-})
-
-Gutter.displayName = 'Gutter'
+}
diff --git a/examples/draft-preview/src/components/Gutter/index.tsx b/examples/draft-preview/src/components/Gutter/index.tsx
@@ -1,19 +1,17 @@
-import type { Ref } from 'react'
-
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import classes from './index.module.scss'
 
 type Props = {
   children: React.ReactNode
   className?: string
   left?: boolean
-  ref?: Ref<HTMLDivElement>
+  ref?: React.Ref<HTMLDivElement>
   right?: boolean
 }
 
-export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
-  const { children, className, left = true, right = true } = props
+export const Gutter: React.FC<Props & { ref?: React.Ref<HTMLDivElement> }> = (props) => {
+  const { children, className, left = true, right = true, ref } = props
 
   return (
     <div
@@ -30,6 +28,4 @@ export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props,
       {children}
     </div>
   )
-})
-
-Gutter.displayName = 'Gutter'
+}
diff --git a/examples/form-builder/src/components/Gutter/index.tsx b/examples/form-builder/src/components/Gutter/index.tsx
@@ -1,19 +1,17 @@
-import type { Ref } from 'react'
-
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import classes from './index.module.scss'
 
 type Props = {
   children: React.ReactNode
   className?: string
   left?: boolean
-  ref?: Ref<HTMLDivElement>
+  ref?: React.Ref<HTMLDivElement>
   right?: boolean
 }
 
-export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
-  const { children, className, left = true, right = true } = props
+export const Gutter: React.FC<Props & { ref?: React.Ref<HTMLDivElement> }> = (props) => {
+  const { children, className, left = true, right = true, ref } = props
 
   return (
     <div
@@ -25,6 +23,4 @@ export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props,
       {children}
     </div>
   )
-})
-
-Gutter.displayName = 'Gutter'
+}
diff --git a/examples/live-preview/src/app/(app)/_components/Gutter/index.tsx b/examples/live-preview/src/app/(app)/_components/Gutter/index.tsx
@@ -1,19 +1,17 @@
-import type { Ref } from 'react'
-
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import classes from './index.module.scss'
 
 type Props = {
   children: React.ReactNode
   className?: string
   left?: boolean
-  ref?: Ref<HTMLDivElement>
+  ref?: React.Ref<HTMLDivElement>
   right?: boolean
 }
 
-export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
-  const { children, className, left = true, right = true } = props
+export const Gutter: React.FC<Props & { ref?: React.Ref<HTMLDivElement> }> = (props) => {
+  const { children, className, left = true, right = true, ref } = props
 
   return (
     <div
@@ -30,6 +28,4 @@ export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props,
       {children}
     </div>
   )
-})
-
-Gutter.displayName = 'Gutter'
+}
diff --git a/examples/localization/src/components/ui/button.tsx b/examples/localization/src/components/ui/button.tsx
@@ -34,16 +34,19 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean
+  ref?: React.Ref<HTMLButtonElement>
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ asChild = false, className, size, variant, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button'
-    return (
-      <Comp className={cn(buttonVariants({ className, size, variant }))} ref={ref} {...props} />
-    )
-  },
-)
-Button.displayName = 'Button'
+const Button: React.FC<ButtonProps> = ({
+  asChild = false,
+  className,
+  size,
+  variant,
+  ref,
+  ...props
+}) => {
+  const Comp = asChild ? Slot : 'button'
+  return <Comp className={cn(buttonVariants({ className, size, variant }))} ref={ref} {...props} />
+}
 
 export { Button, buttonVariants }
diff --git a/examples/localization/src/components/ui/card.tsx b/examples/localization/src/components/ui/card.tsx
@@ -1,56 +1,48 @@
-/* eslint-disable jsx-a11y/heading-has-content */
 import { cn } from 'src/utilities/cn'
 import * as React from 'react'
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
-      ref={ref}
-      {...props}
-    />
-  ),
+const Card: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.HTMLAttributes<HTMLDivElement>
+> = ({ className, ref, ...props }) => (
+  <div
+    className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+    ref={ref}
+    {...props}
+  />
 )
-Card.displayName = 'Card'
 
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div className={cn('flex flex-col space-y-1.5 p-6', className)} ref={ref} {...props} />
-  ),
+const CardHeader: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.HTMLAttributes<HTMLDivElement>
+> = ({ className, ref, ...props }) => (
+  <div className={cn('flex flex-col space-y-1.5 p-6', className)} ref={ref} {...props} />
 )
-CardHeader.displayName = 'CardHeader'
 
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h3
-      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
-      ref={ref}
-      {...props}
-    />
-  ),
+const CardTitle: React.FC<
+  { ref?: React.Ref<HTMLHeadingElement> } & React.HTMLAttributes<HTMLHeadingElement>
+> = ({ className, ref, ...props }) => (
+  <h3
+    className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+    ref={ref}
+    {...props}
+  />
 )
-CardTitle.displayName = 'CardTitle'
 
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
+const CardDescription: React.FC<
+  { ref?: React.Ref<HTMLParagraphElement> } & React.HTMLAttributes<HTMLParagraphElement>
+> = ({ className, ref, ...props }) => (
   <p className={cn('text-sm text-muted-foreground', className)} ref={ref} {...props} />
-))
-CardDescription.displayName = 'CardDescription'
+)
 
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div className={cn('p-6 pt-0', className)} ref={ref} {...props} />
-  ),
+const CardContent: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.HTMLAttributes<HTMLDivElement>
+> = ({ className, ref, ...props }) => (
+  <div className={cn('p-6 pt-0', className)} ref={ref} {...props} />
 )
-CardContent.displayName = 'CardContent'
 
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div className={cn('flex items-center p-6 pt-0', className)} ref={ref} {...props} />
-  ),
+const CardFooter: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.HTMLAttributes<HTMLDivElement>
+> = ({ className, ref, ...props }) => (
+  <div className={cn('flex items-center p-6 pt-0', className)} ref={ref} {...props} />
 )
-CardFooter.displayName = 'CardFooter'
 
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
diff --git a/examples/localization/src/components/ui/checkbox.tsx b/examples/localization/src/components/ui/checkbox.tsx
@@ -5,10 +5,11 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import { Check } from 'lucide-react'
 import * as React from 'react'
 
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
+const Checkbox: React.FC<
+  {
+    ref?: React.Ref<HTMLButtonElement>
+  } & React.ComponentProps<typeof CheckboxPrimitive.Root>
+> = ({ className, ref, ...props }) => (
   <CheckboxPrimitive.Root
     className={cn(
       'peer h-4 w-4 shrink-0 rounded border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
@@ -21,7 +22,6 @@ const Checkbox = React.forwardRef<
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+)
 
 export { Checkbox }
diff --git a/examples/localization/src/components/ui/input.tsx b/examples/localization/src/components/ui/input.tsx
@@ -1,23 +1,22 @@
 import { cn } from 'src/utilities/cn'
 import * as React from 'react'
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ type, className, ...props }, ref) => {
-    return (
-      <input
-        className={cn(
-          'flex h-10 w-full rounded border border-border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-          className,
-        )}
-        ref={ref}
-        type={type}
-        {...props}
-      />
-    )
-  },
-)
-Input.displayName = 'Input'
+const Input: React.FC<
+  {
+    ref?: React.Ref<HTMLInputElement>
+  } & React.InputHTMLAttributes<HTMLInputElement>
+> = ({ type, className, ref, ...props }) => {
+  return (
+    <input
+      className={cn(
+        'flex h-10 w-full rounded border border-border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      ref={ref}
+      type={type}
+      {...props}
+    />
+  )
+}
 
 export { Input }
diff --git a/examples/localization/src/components/ui/label.tsx b/examples/localization/src/components/ui/label.tsx
@@ -9,12 +9,11 @@ const labelVariants = cva(
   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
 )
 
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
+const Label: React.FC<
+  { ref?: React.Ref<HTMLLabelElement> } & React.ComponentProps<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+> = ({ className, ref, ...props }) => (
   <LabelPrimitive.Root className={cn(labelVariants(), className)} ref={ref} {...props} />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+)
 
 export { Label }