chore(templates): removes all instances of React.forwardRef (#10331)

Fixes #10325. 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.

templates/website/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 }

templates/website/src/components/ui/card.tsx

@@ -1,55 +1,48 @@
 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} />
-  ),
 )
-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 CardContent: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.HTMLAttributes<HTMLDivElement>
+> = ({ className, ref, ...props }) => (
+  <div className={cn('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 }

templates/website/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 }

templates/website/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 }

templates/website/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 }

templates/website/src/components/ui/pagination.tsx

@@ -13,19 +13,16 @@ const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
     {...props}
   />
 )
-Pagination.displayName = 'Pagination'
 
-const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
-  ({ className, ...props }, ref) => (
-    <ul className={cn('flex flex-row items-center gap-1', className)} ref={ref} {...props} />
-  ),
+const PaginationContent: React.FC<
+  { ref?: React.Ref<HTMLUListElement> } & React.HTMLAttributes<HTMLUListElement>
+> = ({ className, ref, ...props }) => (
+  <ul className={cn('flex flex-row items-center gap-1', className)} ref={ref} {...props} />
 )
-PaginationContent.displayName = 'PaginationContent'
 
-const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(
-  ({ className, ...props }, ref) => <li className={cn('', className)} ref={ref} {...props} />,
-)
-PaginationItem.displayName = 'PaginationItem'
+const PaginationItem: React.FC<
+  { ref?: React.Ref<HTMLLIElement> } & React.HTMLAttributes<HTMLLIElement>
+> = ({ className, ref, ...props }) => <li className={cn('', className)} ref={ref} {...props} />
 
 type PaginationLinkProps = {
   isActive?: boolean
@@ -45,7 +42,6 @@ const PaginationLink = ({ className, isActive, size = 'icon', ...props }: Pagina
     {...props}
   />
 )
-PaginationLink.displayName = 'PaginationLink'
 
 const PaginationPrevious = ({
   className,
@@ -61,7 +57,6 @@ const PaginationPrevious = ({
     <span>Previous</span>
   </PaginationLink>
 )
-PaginationPrevious.displayName = 'PaginationPrevious'
 
 const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
   <PaginationLink
@@ -74,7 +69,6 @@ const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof Pag
     <ChevronRight className="h-4 w-4" />
   </PaginationLink>
 )
-PaginationNext.displayName = 'PaginationNext'
 
 const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
   <span
@@ -86,7 +80,6 @@ const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'
     <span className="sr-only">More pages</span>
   </span>
 )
-PaginationEllipsis.displayName = 'PaginationEllipsis'
 
 export {
   Pagination,

templates/website/src/components/ui/select.tsx

@@ -11,10 +11,9 @@ const SelectGroup = SelectPrimitive.Group
 
 const SelectValue = SelectPrimitive.Value
 
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ children, className, ...props }, ref) => (
+const SelectTrigger: React.FC<
+  { ref?: React.Ref<HTMLButtonElement> } & React.ComponentProps<typeof SelectPrimitive.Trigger>
+> = ({ children, className, ref, ...props }) => (
   <SelectPrimitive.Trigger
     className={cn(
       'flex h-10 w-full items-center justify-between rounded border border-input bg-background px-3 py-2 text-inherit ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
@@ -28,13 +27,11 @@ const SelectTrigger = React.forwardRef<
       <ChevronDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+)
 
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
+const SelectScrollUpButton: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>
+> = ({ className, ref, ...props }) => (
   <SelectPrimitive.ScrollUpButton
     className={cn('flex cursor-default items-center justify-center py-1', className)}
     ref={ref}
@@ -42,13 +39,13 @@ const SelectScrollUpButton = React.forwardRef<
   >
     <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+)
 
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
+const SelectScrollDownButton: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<
+    typeof SelectPrimitive.ScrollDownButton
+  >
+> = ({ className, ref, ...props }) => (
   <SelectPrimitive.ScrollDownButton
     className={cn('flex cursor-default items-center justify-center py-1', className)}
     ref={ref}
@@ -56,13 +53,13 @@ const SelectScrollDownButton = React.forwardRef<
   >
     <ChevronDown className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
+)
 
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ children, className, position = 'popper', ...props }, ref) => (
+const SelectContent: React.FC<
+  {
+    ref?: React.Ref<HTMLDivElement>
+  } & React.ComponentProps<typeof SelectPrimitive.Content>
+> = ({ children, className, position = 'popper', ref, ...props }) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       className={cn(
@@ -88,25 +85,23 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+)
 
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
+const SelectLabel: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.Label>
+> = ({ className, ref, ...props }) => (
   <SelectPrimitive.Label
     className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
     ref={ref}
     {...props}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+)
 
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ children, className, ...props }, ref) => (
+const SelectItem: React.FC<
+  { ref?: React.Ref<HTMLDivElement>; value: string } & React.ComponentProps<
+    typeof SelectPrimitive.Item
+  >
+> = ({ children, className, ref, ...props }) => (
   <SelectPrimitive.Item
     className={cn(
       'relative flex w-full cursor-default select-none items-center rounded py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
@@ -123,20 +118,17 @@ const SelectItem = React.forwardRef<
 
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+)
 
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
+const SelectSeparator: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.Separator>
+> = ({ className, ref, ...props }) => (
   <SelectPrimitive.Separator
     className={cn('-mx-1 my-1 h-px bg-muted', className)}
     ref={ref}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+)
 
 export {
   Select,

templates/website/src/components/ui/textarea.tsx

@@ -1,22 +1,21 @@
 import { cn } from 'src/utilities/cn'
 import * as React from 'react'
 
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          'flex min-h-[80px] w-full rounded border border-border bg-background px-3 py-2 text-sm ring-offset-background 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}
-        {...props}
-      />
-    )
-  },
-)
-Textarea.displayName = 'Textarea'
+const Textarea: React.FC<
+  {
+    ref?: React.Ref<HTMLTextAreaElement>
+  } & React.TextareaHTMLAttributes<HTMLTextAreaElement>
+> = ({ className, ref, ...props }) => {
+  return (
+    <textarea
+      className={cn(
+        'flex min-h-[80px] w-full rounded border border-border bg-background px-3 py-2 text-sm ring-offset-background 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}
+      {...props}
+    />
+  )
+}
 
 export { Textarea }

templates/with-vercel-website/src/components/ui/button.tsx

@@ -36,14 +36,16 @@ export interface ButtonProps
   asChild?: boolean
 }
 
-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 & { ref?: React.Ref<HTMLButtonElement> }> = ({
+  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 }

templates/with-vercel-website/src/components/ui/card.tsx

@@ -1,55 +1,84 @@
-import { cn } from 'src/utilities/cn'
-import * as React from 'react'
+'use client'
+import { cn } from '@/utilities/cn'
+import useClickableCard from '@/utilities/useClickableCard'
+import Link from 'next/link'
+import React, { Fragment } 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}
-    />
-  ),
-)
-Card.displayName = 'Card'
+import type { Post } from '@/payload-types'
 
-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} />
-  ),
-)
-CardHeader.displayName = 'CardHeader'
+import { Media } from '@/components/Media'
 
-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}
-    />
-  ),
-)
-CardTitle.displayName = 'CardTitle'
+export type CardPostData = Pick<Post, 'slug' | 'categories' | 'meta' | 'title'>
 
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p className={cn('text-sm text-muted-foreground', className)} ref={ref} {...props} />
-))
-CardDescription.displayName = 'CardDescription'
+export const Card: React.FC<{
+  alignItems?: 'center'
+  className?: string
+  doc?: CardPostData
+  relationTo?: 'posts'
+  showCategories?: boolean
+  title?: string
+}> = (props) => {
+  const { card, link } = useClickableCard({})
+  const { className, doc, relationTo, showCategories, title: titleFromProps } = props
 
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div className={cn('p-6 pt-0', className)} ref={ref} {...props} />
-  ),
-)
-CardContent.displayName = 'CardContent'
+  const { slug, categories, meta, title } = doc || {}
+  const { description, image: metaImage } = meta || {}
 
-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} />
-  ),
-)
-CardFooter.displayName = 'CardFooter'
+  const hasCategories = categories && Array.isArray(categories) && categories.length > 0
+  const titleToUse = titleFromProps || title
+  const sanitizedDescription = description?.replace(/\s/g, ' ') // replace non-breaking space with white space
+  const href = `/${relationTo}/${slug}`
 
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
+  return (
+    <article
+      className={cn(
+        'border border-border rounded-lg overflow-hidden bg-card hover:cursor-pointer',
+        className,
+      )}
+      ref={card.ref}
+    >
+      <div className="relative w-full ">
+        {!metaImage && <div className="">No image</div>}
+        {metaImage && typeof metaImage !== 'string' && <Media resource={metaImage} size="33vw" />}
+      </div>
+      <div className="p-4">
+        {showCategories && hasCategories && (
+          <div className="uppercase text-sm mb-4">
+            {showCategories && hasCategories && (
+              <div>
+                {categories?.map((category, index) => {
+                  if (typeof category === 'object') {
+                    const { title: titleFromCategory } = category
+
+                    const categoryTitle = titleFromCategory || 'Untitled category'
+
+                    const isLast = index === categories.length - 1
+
+                    return (
+                      <Fragment key={index}>
+                        {categoryTitle}
+                        {!isLast && <Fragment>, &nbsp;</Fragment>}
+                      </Fragment>
+                    )
+                  }
+
+                  return null
+                })}
+              </div>
+            )}
+          </div>
+        )}
+        {titleToUse && (
+          <div className="prose">
+            <h3>
+              <Link className="not-prose" href={href} ref={link.ref}>
+                {titleToUse}
+              </Link>
+            </h3>
+          </div>
+        )}
+        {description && <div className="mt-2">{description && <p>{sanitizedDescription}</p>}</div>}
+      </div>
+    </article>
+  )
+}

templates/with-vercel-website/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 }

templates/with-vercel-website/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 }

templates/with-vercel-website/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 }

templates/with-vercel-website/src/components/ui/pagination.tsx

@@ -13,19 +13,16 @@ const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
     {...props}
   />
 )
-Pagination.displayName = 'Pagination'
 
-const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
-  ({ className, ...props }, ref) => (
-    <ul className={cn('flex flex-row items-center gap-1', className)} ref={ref} {...props} />
-  ),
+const PaginationContent: React.FC<
+  { ref?: React.Ref<HTMLUListElement> } & React.HTMLAttributes<HTMLUListElement>
+> = ({ className, ref, ...props }) => (
+  <ul className={cn('flex flex-row items-center gap-1', className)} ref={ref} {...props} />
 )
-PaginationContent.displayName = 'PaginationContent'
 
-const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(
-  ({ className, ...props }, ref) => <li className={cn('', className)} ref={ref} {...props} />,
-)
-PaginationItem.displayName = 'PaginationItem'
+const PaginationItem: React.FC<
+  { ref?: React.Ref<HTMLLIElement> } & React.HTMLAttributes<HTMLLIElement>
+> = ({ className, ref, ...props }) => <li className={cn('', className)} ref={ref} {...props} />
 
 type PaginationLinkProps = {
   isActive?: boolean
@@ -45,7 +42,6 @@ const PaginationLink = ({ className, isActive, size = 'icon', ...props }: Pagina
     {...props}
   />
 )
-PaginationLink.displayName = 'PaginationLink'
 
 const PaginationPrevious = ({
   className,
@@ -61,7 +57,6 @@ const PaginationPrevious = ({
     <span>Previous</span>
   </PaginationLink>
 )
-PaginationPrevious.displayName = 'PaginationPrevious'
 
 const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
   <PaginationLink
@@ -74,7 +69,6 @@ const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof Pag
     <ChevronRight className="h-4 w-4" />
   </PaginationLink>
 )
-PaginationNext.displayName = 'PaginationNext'
 
 const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
   <span
@@ -86,7 +80,6 @@ const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'
     <span className="sr-only">More pages</span>
   </span>
 )
-PaginationEllipsis.displayName = 'PaginationEllipsis'
 
 export {
   Pagination,

templates/with-vercel-website/src/components/ui/select.tsx

@@ -11,10 +11,9 @@ const SelectGroup = SelectPrimitive.Group
 
 const SelectValue = SelectPrimitive.Value
 
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ children, className, ...props }, ref) => (
+const SelectTrigger: React.FC<
+  { ref?: React.Ref<HTMLButtonElement> } & React.ComponentProps<typeof SelectPrimitive.Trigger>
+> = ({ children, className, ref, ...props }) => (
   <SelectPrimitive.Trigger
     className={cn(
       'flex h-10 w-full items-center justify-between rounded border border-input bg-background px-3 py-2 text-inherit ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
@@ -28,13 +27,11 @@ const SelectTrigger = React.forwardRef<
       <ChevronDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+)
 
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
+const SelectScrollUpButton: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>
+> = ({ className, ref, ...props }) => (
   <SelectPrimitive.ScrollUpButton
     className={cn('flex cursor-default items-center justify-center py-1', className)}
     ref={ref}
@@ -42,13 +39,13 @@ const SelectScrollUpButton = React.forwardRef<
   >
     <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+)
 
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
+const SelectScrollDownButton: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<
+    typeof SelectPrimitive.ScrollDownButton
+  >
+> = ({ className, ref, ...props }) => (
   <SelectPrimitive.ScrollDownButton
     className={cn('flex cursor-default items-center justify-center py-1', className)}
     ref={ref}
@@ -56,13 +53,13 @@ const SelectScrollDownButton = React.forwardRef<
   >
     <ChevronDown className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
+)
 
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ children, className, position = 'popper', ...props }, ref) => (
+const SelectContent: React.FC<
+  {
+    ref?: React.Ref<HTMLDivElement>
+  } & React.ComponentProps<typeof SelectPrimitive.Content>
+> = ({ children, className, position = 'popper', ref, ...props }) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       className={cn(
@@ -88,25 +85,23 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+)
 
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
+const SelectLabel: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.Label>
+> = ({ className, ref, ...props }) => (
   <SelectPrimitive.Label
     className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
     ref={ref}
     {...props}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+)
 
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ children, className, ...props }, ref) => (
+const SelectItem: React.FC<
+  { ref?: React.Ref<HTMLDivElement>; value: string } & React.ComponentProps<
+    typeof SelectPrimitive.Item
+  >
+> = ({ children, className, ref, ...props }) => (
   <SelectPrimitive.Item
     className={cn(
       'relative flex w-full cursor-default select-none items-center rounded py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
@@ -123,20 +118,17 @@ const SelectItem = React.forwardRef<
 
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+)
 
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
+const SelectSeparator: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.Separator>
+> = ({ className, ref, ...props }) => (
   <SelectPrimitive.Separator
     className={cn('-mx-1 my-1 h-px bg-muted', className)}
     ref={ref}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+)
 
 export {
   Select,

templates/with-vercel-website/src/components/ui/textarea.tsx

@@ -1,22 +1,21 @@
 import { cn } from 'src/utilities/cn'
 import * as React from 'react'
 
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          'flex min-h-[80px] w-full rounded border border-border bg-background px-3 py-2 text-sm ring-offset-background 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}
-        {...props}
-      />
-    )
-  },
-)
-Textarea.displayName = 'Textarea'
+const Textarea: React.FC<
+  {
+    ref?: React.Ref<HTMLTextAreaElement>
+  } & React.TextareaHTMLAttributes<HTMLTextAreaElement>
+> = ({ className, ref, ...props }) => {
+  return (
+    <textarea
+      className={cn(
+        'flex min-h-[80px] w-full rounded border border-border bg-background px-3 py-2 text-sm ring-offset-background 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}
+      {...props}
+    />
+  )
+}
 
 export { Textarea }