tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Jacob Fletcher
2025-01-03 12:39:31 -05:00
committed by GitHub
parent 1cade17440
commit 47e8158d1e
16 changed files with 303 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
templates/website/src/components/ui/button.tsx
View File

@@ -34,16 +34,19 @@ export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>, extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> { VariantProps<typeof buttonVariants> {
asChild?: boolean asChild?: boolean
ref?: React.Ref<HTMLButtonElement>
} }
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( const Button: React.FC<ButtonProps> = ({
({ asChild = false, className, size, variant, ...props }, ref) => { asChild = false,
const Comp = asChild ? Slot : 'button' className,
return ( size,
<Comp className={cn(buttonVariants({ className, size, variant }))} ref={ref} {...props} /> variant,
) ref,
}, ...props
) }) => {
Button.displayName = 'Button' const Comp = asChild ? Slot : 'button'
return <Comp className={cn(buttonVariants({ className, size, variant }))} ref={ref} {...props} />
}
export { Button, buttonVariants } export { Button, buttonVariants }

73
templates/website/src/components/ui/card.tsx
View File

@@ -1,55 +1,48 @@
import { cn } from 'src/utilities/cn' import { cn } from 'src/utilities/cn'
import * as React from 'react' import * as React from 'react'
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( const Card: React.FC<
({ className, ...props }, ref) => ( { ref?: React.Ref<HTMLDivElement> } & React.HTMLAttributes<HTMLDivElement>
<div > = ({ className, ref, ...props }) => (
className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)} <div
ref={ref} className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
{...props} ref={ref}
/> {...props}
), />
) )
Card.displayName = 'Card'
const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( const CardHeader: React.FC<
({ className, ...props }, ref) => ( { ref?: React.Ref<HTMLDivElement> } & React.HTMLAttributes<HTMLDivElement>
<div className={cn('flex flex-col space-y-1.5 p-6', className)} ref={ref} {...props} /> > = ({ 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>>( const CardTitle: React.FC<
({ className, ...props }, ref) => ( { ref?: React.Ref<HTMLHeadingElement> } & React.HTMLAttributes<HTMLHeadingElement>
<h3 > = ({ className, ref, ...props }) => (
className={cn('text-2xl font-semibold leading-none tracking-tight', className)} <h3
ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
{...props} ref={ref}
/> {...props}
), />
) )
CardTitle.displayName = 'CardTitle'
const CardDescription = React.forwardRef< const CardDescription: React.FC<
HTMLParagraphElement, { ref?: React.Ref<HTMLParagraphElement> } & React.HTMLAttributes<HTMLParagraphElement>
React.HTMLAttributes<HTMLParagraphElement> > = ({ className, ref, ...props }) => (
>(({ className, ...props }, ref) => (
<p className={cn('text-sm text-muted-foreground', className)} ref={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>>( const CardContent: React.FC<
({ className, ...props }, ref) => ( { ref?: React.Ref<HTMLDivElement> } & React.HTMLAttributes<HTMLDivElement>
<div className={cn('flex items-center p-6 pt-0', className)} ref={ref} {...props} /> > = ({ 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 } export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }

12
templates/website/src/components/ui/checkbox.tsx
View File

@@ -5,10 +5,11 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
import { Check } from 'lucide-react' import { Check } from 'lucide-react'
import * as React from 'react' import * as React from 'react'
const Checkbox = React.forwardRef< const Checkbox: React.FC<
React.ElementRef<typeof CheckboxPrimitive.Root>, {
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> ref?: React.Ref<HTMLButtonElement>
>(({ className, ...props }, ref) => ( } & React.ComponentProps<typeof CheckboxPrimitive.Root>
> = ({ className, ref, ...props }) => (
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
className={cn( 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', '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" /> <Check className="h-4 w-4" />
</CheckboxPrimitive.Indicator> </CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root> </CheckboxPrimitive.Root>
)) )
Checkbox.displayName = CheckboxPrimitive.Root.displayName
export { Checkbox } export { Checkbox }

35
templates/website/src/components/ui/input.tsx
View File

@@ -1,23 +1,22 @@
import { cn } from 'src/utilities/cn' import { cn } from 'src/utilities/cn'
import * as React from 'react' import * as React from 'react'
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {} const Input: React.FC<
{
const Input = React.forwardRef<HTMLInputElement, InputProps>( ref?: React.Ref<HTMLInputElement>
({ type, className, ...props }, ref) => { } & React.InputHTMLAttributes<HTMLInputElement>
return ( > = ({ type, className, ref, ...props }) => {
<input return (
className={cn( <input
'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={cn(
className, '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} ref={ref}
{...props} type={type}
/> {...props}
) />
}, )
) }
Input.displayName = 'Input'
export { Input } export { Input }

11
templates/website/src/components/ui/label.tsx
View File

@@ -9,12 +9,11 @@ const labelVariants = cva(
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
) )
const Label = React.forwardRef< const Label: React.FC<
React.ElementRef<typeof LabelPrimitive.Root>, { ref?: React.Ref<HTMLLabelElement> } & React.ComponentProps<typeof LabelPrimitive.Root> &
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants> VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => ( > = ({ className, ref, ...props }) => (
<LabelPrimitive.Root className={cn(labelVariants(), className)} ref={ref} {...props} /> <LabelPrimitive.Root className={cn(labelVariants(), className)} ref={ref} {...props} />
)) )
Label.displayName = LabelPrimitive.Root.displayName
export { Label } export { Label }

21
templates/website/src/components/ui/pagination.tsx
View File

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

76
templates/website/src/components/ui/select.tsx
View File

@@ -11,10 +11,9 @@ const SelectGroup = SelectPrimitive.Group
const SelectValue = SelectPrimitive.Value const SelectValue = SelectPrimitive.Value
const SelectTrigger = React.forwardRef< const SelectTrigger: React.FC<
React.ElementRef<typeof SelectPrimitive.Trigger>, { ref?: React.Ref<HTMLButtonElement> } & React.ComponentProps<typeof SelectPrimitive.Trigger>
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> > = ({ children, className, ref, ...props }) => (
>(({ children, className, ...props }, ref) => (
<SelectPrimitive.Trigger <SelectPrimitive.Trigger
className={cn( 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', '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" /> <ChevronDown className="h-4 w-4 opacity-50" />
</SelectPrimitive.Icon> </SelectPrimitive.Icon>
</SelectPrimitive.Trigger> </SelectPrimitive.Trigger>
)) )
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
const SelectScrollUpButton = React.forwardRef< const SelectScrollUpButton: React.FC<
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>, { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> > = ({ className, ref, ...props }) => (
>(({ className, ...props }, ref) => (
<SelectPrimitive.ScrollUpButton <SelectPrimitive.ScrollUpButton
className={cn('flex cursor-default items-center justify-center py-1', className)} className={cn('flex cursor-default items-center justify-center py-1', className)}
ref={ref} ref={ref}
@@ -42,13 +39,13 @@ const SelectScrollUpButton = React.forwardRef<
> >
<ChevronUp className="h-4 w-4" /> <ChevronUp className="h-4 w-4" />
</SelectPrimitive.ScrollUpButton> </SelectPrimitive.ScrollUpButton>
)) )
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
const SelectScrollDownButton = React.forwardRef< const SelectScrollDownButton: React.FC<
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>, { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> typeof SelectPrimitive.ScrollDownButton
>(({ className, ...props }, ref) => ( >
> = ({ className, ref, ...props }) => (
<SelectPrimitive.ScrollDownButton <SelectPrimitive.ScrollDownButton
className={cn('flex cursor-default items-center justify-center py-1', className)} className={cn('flex cursor-default items-center justify-center py-1', className)}
ref={ref} ref={ref}
@@ -56,13 +53,13 @@ const SelectScrollDownButton = React.forwardRef<
> >
<ChevronDown className="h-4 w-4" /> <ChevronDown className="h-4 w-4" />
</SelectPrimitive.ScrollDownButton> </SelectPrimitive.ScrollDownButton>
)) )
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
const SelectContent = React.forwardRef< const SelectContent: React.FC<
React.ElementRef<typeof SelectPrimitive.Content>, {
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> ref?: React.Ref<HTMLDivElement>
>(({ children, className, position = 'popper', ...props }, ref) => ( } & React.ComponentProps<typeof SelectPrimitive.Content>
> = ({ children, className, position = 'popper', ref, ...props }) => (
<SelectPrimitive.Portal> <SelectPrimitive.Portal>
<SelectPrimitive.Content <SelectPrimitive.Content
className={cn( className={cn(
@@ -88,25 +85,23 @@ const SelectContent = React.forwardRef<
<SelectScrollDownButton /> <SelectScrollDownButton />
</SelectPrimitive.Content> </SelectPrimitive.Content>
</SelectPrimitive.Portal> </SelectPrimitive.Portal>
)) )
SelectContent.displayName = SelectPrimitive.Content.displayName
const SelectLabel = React.forwardRef< const SelectLabel: React.FC<
React.ElementRef<typeof SelectPrimitive.Label>, { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.Label>
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> > = ({ className, ref, ...props }) => (
>(({ className, ...props }, ref) => (
<SelectPrimitive.Label <SelectPrimitive.Label
className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)} className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
ref={ref} ref={ref}
{...props} {...props}
/> />
)) )
SelectLabel.displayName = SelectPrimitive.Label.displayName
const SelectItem = React.forwardRef< const SelectItem: React.FC<
React.ElementRef<typeof SelectPrimitive.Item>, { ref?: React.Ref<HTMLDivElement>; value: string } & React.ComponentProps<
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> typeof SelectPrimitive.Item
>(({ children, className, ...props }, ref) => ( >
> = ({ children, className, ref, ...props }) => (
<SelectPrimitive.Item <SelectPrimitive.Item
className={cn( 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', '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.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item> </SelectPrimitive.Item>
)) )
SelectItem.displayName = SelectPrimitive.Item.displayName
const SelectSeparator = React.forwardRef< const SelectSeparator: React.FC<
React.ElementRef<typeof SelectPrimitive.Separator>, { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.Separator>
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> > = ({ className, ref, ...props }) => (
>(({ className, ...props }, ref) => (
<SelectPrimitive.Separator <SelectPrimitive.Separator
className={cn('-mx-1 my-1 h-px bg-muted', className)} className={cn('-mx-1 my-1 h-px bg-muted', className)}
ref={ref} ref={ref}
{...props} {...props}
/> />
)) )
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
export { export {
Select, Select,

33
templates/website/src/components/ui/textarea.tsx
View File

@@ -1,22 +1,21 @@
import { cn } from 'src/utilities/cn' import { cn } from 'src/utilities/cn'
import * as React from 'react' import * as React from 'react'
export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {} const Textarea: React.FC<
{
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>( ref?: React.Ref<HTMLTextAreaElement>
({ className, ...props }, ref) => { } & React.TextareaHTMLAttributes<HTMLTextAreaElement>
return ( > = ({ className, ref, ...props }) => {
<textarea return (
className={cn( <textarea
'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={cn(
className, '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} ref={ref}
/> {...props}
) />
}, )
) }
Textarea.displayName = 'Textarea'
export { Textarea } export { Textarea }

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

@@ -36,14 +36,16 @@ export interface ButtonProps
asChild?: boolean asChild?: boolean
} }
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( const Button: React.FC<ButtonProps & { ref?: React.Ref<HTMLButtonElement> }> = ({
({ asChild = false, className, size, variant, ...props }, ref) => { asChild = false,
const Comp = asChild ? Slot : 'button' className,
return ( size,
<Comp className={cn(buttonVariants({ className, size, variant }))} ref={ref} {...props} /> variant,
) ref,
}, ...props
) }) => {
Button.displayName = 'Button' const Comp = asChild ? Slot : 'button'
return <Comp className={cn(buttonVariants({ className, size, variant }))} ref={ref} {...props} />
}
export { Button, buttonVariants } export { Button, buttonVariants }

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

@@ -1,55 +1,84 @@
import { cn } from 'src/utilities/cn' 'use client'
import * as React from 'react' 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>>( import type { Post } from '@/payload-types'
({ className, ...props }, ref) => (
<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>>( import { Media } from '@/components/Media'
({ className, ...props }, ref) => (
<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>>( export type CardPostData = Pick<Post, 'slug' | 'categories' | 'meta' | 'title'>
({ className, ...props }, ref) => (
<h3
className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
ref={ref}
{...props}
/>
),
)
CardTitle.displayName = 'CardTitle'
const CardDescription = React.forwardRef< export const Card: React.FC<{
HTMLParagraphElement, alignItems?: 'center'
React.HTMLAttributes<HTMLParagraphElement> className?: string
>(({ className, ...props }, ref) => ( doc?: CardPostData
<p className={cn('text-sm text-muted-foreground', className)} ref={ref} {...props} /> relationTo?: 'posts'
)) showCategories?: boolean
CardDescription.displayName = 'CardDescription' title?: string
}> = (props) => {
const { card, link } = useClickableCard({})
const { className, doc, relationTo, showCategories, title: titleFromProps } = props
const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( const { slug, categories, meta, title } = doc || {}
({ className, ...props }, ref) => ( const { description, image: metaImage } = meta || {}
<div className={cn('p-6 pt-0', className)} ref={ref} {...props} />
),
)
CardContent.displayName = 'CardContent'
const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( const hasCategories = categories && Array.isArray(categories) && categories.length > 0
({ className, ...props }, ref) => ( const titleToUse = titleFromProps || title
<div className={cn('flex items-center p-6 pt-0', className)} ref={ref} {...props} /> const sanitizedDescription = description?.replace(/\s/g, ' ') // replace non-breaking space with white space
), const href = `/${relationTo}/${slug}`
)
CardFooter.displayName = 'CardFooter'
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>
)
}

12
templates/with-vercel-website/src/components/ui/checkbox.tsx
View File

@@ -5,10 +5,11 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
import { Check } from 'lucide-react' import { Check } from 'lucide-react'
import * as React from 'react' import * as React from 'react'
const Checkbox = React.forwardRef< const Checkbox: React.FC<
React.ElementRef<typeof CheckboxPrimitive.Root>, {
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> ref?: React.Ref<HTMLButtonElement>
>(({ className, ...props }, ref) => ( } & React.ComponentProps<typeof CheckboxPrimitive.Root>
> = ({ className, ref, ...props }) => (
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
className={cn( 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', '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" /> <Check className="h-4 w-4" />
</CheckboxPrimitive.Indicator> </CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root> </CheckboxPrimitive.Root>
)) )
Checkbox.displayName = CheckboxPrimitive.Root.displayName
export { Checkbox } export { Checkbox }

35
templates/with-vercel-website/src/components/ui/input.tsx
View File

@@ -1,23 +1,22 @@
import { cn } from 'src/utilities/cn' import { cn } from 'src/utilities/cn'
import * as React from 'react' import * as React from 'react'
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {} const Input: React.FC<
{
const Input = React.forwardRef<HTMLInputElement, InputProps>( ref?: React.Ref<HTMLInputElement>
({ type, className, ...props }, ref) => { } & React.InputHTMLAttributes<HTMLInputElement>
return ( > = ({ type, className, ref, ...props }) => {
<input return (
className={cn( <input
'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={cn(
className, '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} ref={ref}
{...props} type={type}
/> {...props}
) />
}, )
) }
Input.displayName = 'Input'
export { Input } export { Input }

11
templates/with-vercel-website/src/components/ui/label.tsx
View File

@@ -9,12 +9,11 @@ const labelVariants = cva(
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
) )
const Label = React.forwardRef< const Label: React.FC<
React.ElementRef<typeof LabelPrimitive.Root>, { ref?: React.Ref<HTMLLabelElement> } & React.ComponentProps<typeof LabelPrimitive.Root> &
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants> VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => ( > = ({ className, ref, ...props }) => (
<LabelPrimitive.Root className={cn(labelVariants(), className)} ref={ref} {...props} /> <LabelPrimitive.Root className={cn(labelVariants(), className)} ref={ref} {...props} />
)) )
Label.displayName = LabelPrimitive.Root.displayName
export { Label } export { Label }

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

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

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

@@ -11,10 +11,9 @@ const SelectGroup = SelectPrimitive.Group
const SelectValue = SelectPrimitive.Value const SelectValue = SelectPrimitive.Value
const SelectTrigger = React.forwardRef< const SelectTrigger: React.FC<
React.ElementRef<typeof SelectPrimitive.Trigger>, { ref?: React.Ref<HTMLButtonElement> } & React.ComponentProps<typeof SelectPrimitive.Trigger>
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> > = ({ children, className, ref, ...props }) => (
>(({ children, className, ...props }, ref) => (
<SelectPrimitive.Trigger <SelectPrimitive.Trigger
className={cn( 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', '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" /> <ChevronDown className="h-4 w-4 opacity-50" />
</SelectPrimitive.Icon> </SelectPrimitive.Icon>
</SelectPrimitive.Trigger> </SelectPrimitive.Trigger>
)) )
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
const SelectScrollUpButton = React.forwardRef< const SelectScrollUpButton: React.FC<
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>, { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> > = ({ className, ref, ...props }) => (
>(({ className, ...props }, ref) => (
<SelectPrimitive.ScrollUpButton <SelectPrimitive.ScrollUpButton
className={cn('flex cursor-default items-center justify-center py-1', className)} className={cn('flex cursor-default items-center justify-center py-1', className)}
ref={ref} ref={ref}
@@ -42,13 +39,13 @@ const SelectScrollUpButton = React.forwardRef<
> >
<ChevronUp className="h-4 w-4" /> <ChevronUp className="h-4 w-4" />
</SelectPrimitive.ScrollUpButton> </SelectPrimitive.ScrollUpButton>
)) )
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
const SelectScrollDownButton = React.forwardRef< const SelectScrollDownButton: React.FC<
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>, { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> typeof SelectPrimitive.ScrollDownButton
>(({ className, ...props }, ref) => ( >
> = ({ className, ref, ...props }) => (
<SelectPrimitive.ScrollDownButton <SelectPrimitive.ScrollDownButton
className={cn('flex cursor-default items-center justify-center py-1', className)} className={cn('flex cursor-default items-center justify-center py-1', className)}
ref={ref} ref={ref}
@@ -56,13 +53,13 @@ const SelectScrollDownButton = React.forwardRef<
> >
<ChevronDown className="h-4 w-4" /> <ChevronDown className="h-4 w-4" />
</SelectPrimitive.ScrollDownButton> </SelectPrimitive.ScrollDownButton>
)) )
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
const SelectContent = React.forwardRef< const SelectContent: React.FC<
React.ElementRef<typeof SelectPrimitive.Content>, {
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> ref?: React.Ref<HTMLDivElement>
>(({ children, className, position = 'popper', ...props }, ref) => ( } & React.ComponentProps<typeof SelectPrimitive.Content>
> = ({ children, className, position = 'popper', ref, ...props }) => (
<SelectPrimitive.Portal> <SelectPrimitive.Portal>
<SelectPrimitive.Content <SelectPrimitive.Content
className={cn( className={cn(
@@ -88,25 +85,23 @@ const SelectContent = React.forwardRef<
<SelectScrollDownButton /> <SelectScrollDownButton />
</SelectPrimitive.Content> </SelectPrimitive.Content>
</SelectPrimitive.Portal> </SelectPrimitive.Portal>
)) )
SelectContent.displayName = SelectPrimitive.Content.displayName
const SelectLabel = React.forwardRef< const SelectLabel: React.FC<
React.ElementRef<typeof SelectPrimitive.Label>, { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.Label>
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> > = ({ className, ref, ...props }) => (
>(({ className, ...props }, ref) => (
<SelectPrimitive.Label <SelectPrimitive.Label
className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)} className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
ref={ref} ref={ref}
{...props} {...props}
/> />
)) )
SelectLabel.displayName = SelectPrimitive.Label.displayName
const SelectItem = React.forwardRef< const SelectItem: React.FC<
React.ElementRef<typeof SelectPrimitive.Item>, { ref?: React.Ref<HTMLDivElement>; value: string } & React.ComponentProps<
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> typeof SelectPrimitive.Item
>(({ children, className, ...props }, ref) => ( >
> = ({ children, className, ref, ...props }) => (
<SelectPrimitive.Item <SelectPrimitive.Item
className={cn( 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', '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.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item> </SelectPrimitive.Item>
)) )
SelectItem.displayName = SelectPrimitive.Item.displayName
const SelectSeparator = React.forwardRef< const SelectSeparator: React.FC<
React.ElementRef<typeof SelectPrimitive.Separator>, { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.Separator>
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> > = ({ className, ref, ...props }) => (
>(({ className, ...props }, ref) => (
<SelectPrimitive.Separator <SelectPrimitive.Separator
className={cn('-mx-1 my-1 h-px bg-muted', className)} className={cn('-mx-1 my-1 h-px bg-muted', className)}
ref={ref} ref={ref}
{...props} {...props}
/> />
)) )
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
export { export {
Select, Select,

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

@@ -1,22 +1,21 @@
import { cn } from 'src/utilities/cn' import { cn } from 'src/utilities/cn'
import * as React from 'react' import * as React from 'react'
export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {} const Textarea: React.FC<
{
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>( ref?: React.Ref<HTMLTextAreaElement>
({ className, ...props }, ref) => { } & React.TextareaHTMLAttributes<HTMLTextAreaElement>
return ( > = ({ className, ref, ...props }) => {
<textarea return (
className={cn( <textarea
'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={cn(
className, '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} ref={ref}
/> {...props}
) />
}, )
) }
Textarea.displayName = 'Textarea'
export { Textarea } export { Textarea }