Solve ui react/typescript performance issues

Author: jotjern

package.json

@@ -53,5 +53,13 @@
   "devDependencies": {
     "@biomejs/biome": "2.4.5",
     "typescript": "5.9.3"
+  },
+  "pnpm": {
+    "overrides": {
+      "react": "19.2.4",
+      "react-dom": "19.2.4",
+      "@types/react": "19.2.14",
+      "@types/react-dom": "19.2.3"
+    }
   }
 }

packages/config/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "noErrorTruncation": true,
+    "noErrorTruncation": false,
     "target": "esnext",
     "module": "esnext",
     "moduleResolution": "bundler",

packages/ui/src/atoms/Button/Button.tsx

@@ -1,9 +1,7 @@
 import { type VariantProps, cva } from "cva"
-import type { ComponentPropsWithRef, ElementType, PropsWithChildren, ReactNode } from "react"
+import type { ElementType, HTMLAttributes, PropsWithChildren, ReactNode, Ref } from "react"
 import { cn } from "../../utils"
 
-// Add variants, colors, or sizes in the arrays below
-// to add them to the component
 export const BUTTON_VARIANTS = ["solid", "outline", "text", "unstyled"] as const
 export const BUTTON_COLORS = ["light", "dark", "brand", "blue", "red"] as const
 export const BUTTON_SIZES = ["sm", "md", "lg"] as const
@@ -12,21 +10,23 @@ export type ButtonVariant = (typeof BUTTON_VARIANTS)[number]
 export type ButtonColor = (typeof BUTTON_COLORS)[number]
 export type ButtonSize = (typeof BUTTON_SIZES)[number]
 
-export type ButtonProps<E extends ElementType = "button"> = VariantProps<typeof button> &
-  PropsWithChildren & {
-    /**
-     * The HTML element to render the button as
-     *
-     * Defaults to an HTML <button> element, but can be used with the Link
-     * component from 'next/link' to create a link that looks like a button
-     */
-    element?: E
+export type ButtonProps = VariantProps<typeof button> &
+  PropsWithChildren &
+  Omit<HTMLAttributes<HTMLElement>, "color"> & {
+    element?: ElementType
     className?: string
     icon?: ReactNode
     iconRight?: ReactNode
-  } & ComponentPropsWithRef<E>
+    ref?: Ref<HTMLElement>
+    href?: string
+    type?: "button" | "submit" | "reset"
+    disabled?: boolean
+    target?: string
+    rel?: string
+    prefetch?: boolean
+  }
 
-export function Button<E extends ElementType = "button">({
+export function Button({
   element,
   children,
   variant,
@@ -37,7 +37,7 @@ export function Button<E extends ElementType = "button">({
   className,
   ref,
   ...props
-}: ButtonProps<E>) {
+}: ButtonProps) {
   const Component = element ?? "button"
   const classes = cn(button({ variant, size, color }), "inline-flex items-center justify-center gap-1", className)
   return (
@@ -89,7 +89,6 @@ export const button = cva(
         color: "light",
         variant: "solid",
         className: [
-          // Not using `enabled:` to make it easier to override
           "bg-gray-200 hover:bg-gray-100 disabled:hover:bg-gray-200",
           "dark:bg-stone-700 dark:hover:bg-stone-600 dark:disabled:hover:bg-stone-700",
         ].join(" "),

packages/ui/src/atoms/Input/TextInput.tsx

@@ -11,7 +11,15 @@ export type TextInputProps = ComponentPropsWithRef<"input"> & {
   className?: string
 }
 
-export const TextInput: FC<TextInputProps> = ({ label, description, error, ref, className, ...props }) => {
+export const TextInput: FC<TextInputProps> = ({
+  label,
+  description,
+  error,
+  ref,
+  className,
+  size: _htmlSize,
+  ...props
+}) => {
   const hasError = Boolean(error)
   const hasTextError = typeof error === "string"
 

packages/ui/src/atoms/Typography/Link.tsx

@@ -1,34 +1,20 @@
 import { type VariantProps, cva } from "cva"
 import NextLink from "next/link"
-import type { ComponentPropsWithoutRef, ElementType, PropsWithChildren } from "react"
+import type { ComponentPropsWithoutRef, PropsWithChildren } from "react"
 import { cn } from "../../utils"
 
-export type LinkProps<E extends ElementType = typeof NextLink> = VariantProps<typeof link> &
-  PropsWithChildren & {
-    /**
-     * The HTML element or React component to render this element as.
-     *
-     * Defaults to Next.js Link component.
-     */
-    element?: E
+export type LinkProps = VariantProps<typeof link> &
+  PropsWithChildren &
+  ComponentPropsWithoutRef<typeof NextLink> & {
     className?: string
-    href: ComponentPropsWithoutRef<E>["href"]
-  } & ComponentPropsWithoutRef<E>
+  }
 
-export function Link<E extends ElementType = typeof NextLink>({
-  children,
-  element,
-  className,
-  href,
-  size,
-  ...props
-}: LinkProps<E>) {
-  const Component = element ?? NextLink
+export function Link({ children, className, href, size, ...props }: LinkProps) {
   const classes = cn(link({ size }), className)
   return (
-    <Component className={classes} {...props} href={href}>
+    <NextLink className={classes} {...props} href={href}>
       {children}
-    </Component>
+    </NextLink>
   )
 }
 

packages/ui/src/atoms/Typography/Text.tsx

@@ -1,27 +1,24 @@
 import { type VariantProps, cva } from "cva"
-import type { ComponentPropsWithRef, ElementType, PropsWithChildren } from "react"
+import type { ElementType, HTMLAttributes, PropsWithChildren, Ref } from "react"
 import { cn } from "../../utils"
 
-export type TextProps<E extends ElementType = "p"> = VariantProps<typeof text> &
-  PropsWithChildren & {
-    /**
-     * The HTML element or React component to render this element as.
-     *
-     * Defaults to HTML <p> element.
-     */
-    element?: E
+export type TextProps = VariantProps<typeof text> &
+  PropsWithChildren &
+  HTMLAttributes<HTMLElement> & {
+    element?: ElementType
     className?: string
-  } & ComponentPropsWithRef<E>
+    ref?: Ref<any>
+    htmlFor?: string
+    type?: string
+    placeholder?: string
+    value?: unknown
+    name?: string
+    required?: boolean
+    disabled?: boolean
+    checked?: boolean
+  }
 
-export function Text<E extends ElementType = "p">({
-  children,
-  element,
-  className,
-  size,
-  truncate,
-  ref,
-  ...props
-}: TextProps<E>) {
+export function Text({ children, element, className, size, truncate, ref, ...props }: TextProps) {
   const Component = element ?? "p"
   const classes = cn(text({ size, truncate }), className)
   return (

packages/ui/src/atoms/Typography/Title.tsx

@@ -1,19 +1,17 @@
 import { type VariantProps, cva } from "cva"
-import type { ComponentPropsWithoutRef, ElementType, PropsWithChildren } from "react"
+import type { HTMLAttributes, PropsWithChildren } from "react"
 import { cn } from "../../utils"
 
-export type TitleProps<E extends ElementType = "h2"> = VariantProps<typeof title> &
-  PropsWithChildren & {
-    /**
-     * The HTML element or React component to render this element as.
-     *
-     * Defaults to HTML <h2> element.
-     */
-    element?: E
+type TitleElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p"
+
+export type TitleProps = VariantProps<typeof title> &
+  PropsWithChildren &
+  HTMLAttributes<HTMLHeadingElement> & {
+    element?: TitleElement
     className?: string
-  } & ComponentPropsWithoutRef<E>
+  }
 
-export function Title<E extends ElementType = "h2">({ children, element, className, size, ...props }: TitleProps<E>) {
+export function Title({ children, element, className, size, ...props }: TitleProps) {
   const Component = element ?? "h2"
   const classes = cn(title({ size }), className)
   return (