React18 Component -> React19 Component Refactor Prompt

refactor-react19.md

With following context, refactor React components

Minimalistic Deps:

• replace import * as React from "react" things to import { useState, use, ... } from React only required in the code

Prefer safe prop interface:

• replace React.*HTMLAttributes to ComponentPropsWithRef<*>
• replace type props to interface props. if props: A & B found, convert to interface Props extends A, B {} shape

Remove legacy forwardRef API:

• remove all forwardRef usages
• replace arrow functions to be named functions, remove all displayName set if found
• replace export {...} to be export const/function for each module identifier
• replace ComponentProps<T> to ComponentPropsWithRef<T> if it spreads all props or drill out ref prop

Replace unsafe React polymorphic render interface to safer interface:

• replace component prop <Component asChild><button /></Component> pattern to be <Component render={props => <button {...props} />} />
• replace component prop <Component slot={Button} /> pattern to be <Component render={props => <Button {...props} />} />