chore: upgrade to react 19 beta and next 14 canary

components/ui/button.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { ComponentProps } from "react";
 import { cva, VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/style";
@@ -25,17 +25,8 @@ export const buttonVariants = cva(
   }
 );
 
-export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
-  VariantProps<typeof buttonVariants>;
+export type ButtonProps = ComponentProps<"button"> & VariantProps<typeof buttonVariants>;
 
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, ...props }, ref) => (
-    <button
-      {...{ ref }}
-      className={cn(buttonVariants({ variant, size }), className)}
-      type="button"
-      {...props}
-    />
-  )
+export const Button = ({ className, variant, size, ...props }: ButtonProps) => (
+  <button className={cn(buttonVariants({ variant, size }), className)} type="button" {...props} />
 );
-Button.displayName = "Button";

components/ui/diff-editor.tsx

@@ -1,30 +1,31 @@
 "use client";
 
-import { ComponentPropsWithoutRef, forwardRef } from "react";
+import { ComponentProps } from "react";
 import { DiffEditor as MonacoDiffEditor } from "@monaco-editor/react";
 import { useTheme } from "next-themes";
 
-export type EditorProps = ComponentPropsWithoutRef<typeof MonacoDiffEditor>;
+// @ts-expect-error react 19 beta error
+export type DiffEditorProps = ComponentProps<typeof MonacoDiffEditor>;
+// @ts-expect-error react 19 beta error
+export const DiffEditor = ({ options, theme, ...props }: DiffEditorProps) => {
+  const { theme: appTheme } = useTheme();
+  const themeToUse = theme ?? (appTheme === "light" ? "light" : "vs-dark");
 
-export const DiffEditor = forwardRef<HTMLTextAreaElement, EditorProps>(
-  ({ options, theme, ...props }, ref) => {
-    const { theme: appTheme } = useTheme();
-    const themeToUse = theme ?? (appTheme === "light" ? "light" : "vs-dark");
-
-    return (
-      <MonacoDiffEditor
-        {...{ ref }}
-        theme={themeToUse}
-        options={{
-          tabFocusMode: true,
-          automaticLayout: true,
-          scrollBeyondLastLine: false,
-          ...options, // NOTE: merge shallowly
-        }}
-        {...props}
-      />
-    );
-  }
-);
-
-DiffEditor.displayName = "Editor";
+  return (
+    // @ts-expect-error react 19 beta error
+    <MonacoDiffEditor
+      // @ts-expect-error react 19 beta error
+      theme={themeToUse}
+      // @ts-expect-error react 19 beta error
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      options={{
+        tabFocusMode: true,
+        automaticLayout: true,
+        scrollBeyondLastLine: false,
+        // @ts-expect-error react 19 beta error
+        ...options, // NOTE: merge shallowly
+      }}
+      {...props}
+    />
+  );
+};

components/ui/editor.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import * as React from "react";
+import { ComponentProps } from "react";
 import MonacoEditor from "@monaco-editor/react";
 import { useTheme } from "next-themes";
 
-export type EditorProps = React.ComponentPropsWithoutRef<typeof MonacoEditor>;
+// @ts-expect-error react 19 beta error
+export type EditorProps = ComponentProps<typeof MonacoEditor>;
 
 /**
  * NOTE: This component maybe doesn't shrink according to the container component's width
@@ -12,26 +13,28 @@ export type EditorProps = React.ComponentPropsWithoutRef<typeof MonacoEditor>;
  * @see https://github.com/suren-atoyan/monaco-react/issues/346
  *
  */
-export const Editor = React.forwardRef<HTMLTextAreaElement, EditorProps>(
-  ({ options, theme, ...props }, ref) => {
-    const { theme: appTheme } = useTheme();
-    const themeToUse = theme ?? (appTheme === "light" ? "light" : "vs-dark");
+// @ts-expect-error react 19 beta error
+export const Editor = ({ options, theme, ...props }: EditorProps) => {
+  const { theme: appTheme } = useTheme();
+  const themeToUse = theme ?? (appTheme === "light" ? "light" : "vs-dark");
 
-    return (
-      <MonacoEditor
-        {...{ ref }}
-        theme={themeToUse}
-        options={{
-          tabFocusMode: true,
-          detectIndentation: false,
-          minimap: { enabled: false },
-          automaticLayout: true,
-          scrollBeyondLastLine: false,
-          ...options, // NOTE: merge shallowly
-        }}
-        {...props}
-      />
-    );
-  }
-);
-Editor.displayName = "Editor";
+  return (
+    // @ts-expect-error react 19 beta error
+    <MonacoEditor
+      // @ts-expect-error react 19 beta error
+      theme={themeToUse}
+      // @ts-expect-error react 19 beta error
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      options={{
+        tabFocusMode: true,
+        detectIndentation: false,
+        minimap: { enabled: false },
+        automaticLayout: true,
+        scrollBeyondLastLine: false,
+        // @ts-expect-error react 19 beta error
+        ...options, // NOTE: merge shallowly
+      }}
+      {...props}
+    />
+  );
+};

components/ui/input.tsx

@@ -1,30 +1,23 @@
-import * as React from "react";
-import equal from "react-fast-compare";
+import { ComponentProps } from "react";
 
 import { cn } from "@/lib/style";
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+export type InputProps = ComponentProps<"input"> & {
   fontMono?: true;
 };
 
-const RawInput = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, fontMono, ...props }, ref) => (
-    <input
-      {...{ ref }}
-      className={cn(
-        "border-b-1 h-9 rounded border border-b-muted-foreground bg-input px-3 py-2 outline-none",
-        "placeholder:text-muted-foreground",
-        "hover:bg-input-hover",
-        "focus:border-b-2 focus:border-b-indicator focus:bg-input-focus focus:pb-[7px]",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        fontMono && "font-mono",
-        className
-      )}
-      spellCheck="false"
-      {...props}
-    />
-  )
+export const Input = ({ className, fontMono, ...props }: InputProps) => (
+  <input
+    className={cn(
+      "border-b-1 h-9 rounded border border-b-muted-foreground bg-input px-3 py-2 outline-none",
+      "placeholder:text-muted-foreground",
+      "hover:bg-input-hover",
+      "focus:border-b-2 focus:border-b-indicator focus:bg-input-focus focus:pb-[7px]",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      fontMono && "font-mono",
+      className
+    )}
+    spellCheck="false"
+    {...props}
+  />
 );
-RawInput.displayName = "RawInput";
-
-export const Input = React.memo(RawInput, equal);

components/ui/label.tsx

@@ -1,16 +1,12 @@
 "use client";
 
-import * as React from "react";
+import { ComponentProps } from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 
 import { cn } from "@/lib/style";
 
-export const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => (
+export const Label = ({ className, ...props }: ComponentProps<typeof LabelPrimitive.Root>) => (
   <LabelPrimitive.Root
-    {...{ ref }}
     className={cn(
       "leading-none",
       "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
@@ -18,5 +14,4 @@ export const Label = React.forwardRef<
     )}
     {...props}
   />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
+);

components/ui/providers.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { ThemeProviderProps } from "next-themes/dist/types";
+
+import { SidebarProvider } from "@/hooks/use-sidebar";
+import { TailwindIndicator } from "@/components/tailwind-indicator";
+import { SearchTextProvider } from "@/contexts/search-text";
+
+import { ClientLayout } from "../client-layout";
+
+export function Providers({ children, ...props }: ThemeProviderProps) {
+  return (
+    <NextThemesProvider {...props}>
+      <SearchTextProvider>
+        <SidebarProvider>
+          <ClientLayout>{children}</ClientLayout>
+          <TailwindIndicator />
+        </SidebarProvider>
+      </SearchTextProvider>
+    </NextThemesProvider>
+  );
+}

components/ui/select.tsx

@@ -1,22 +1,22 @@
 "use client";
 
-import * as React from "react";
+import { ComponentProps } from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 
 import { cn } from "@/lib/style";
 import * as icons from "@/components/icons";
 import { Indicator } from "@/components/indicator";
 
-export type Props = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>;
+export type Props = ComponentProps<typeof SelectPrimitive.Root>;
 
 export const { Root, Group, Value } = SelectPrimitive;
 
-export const Trigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+export const Trigger = ({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Trigger>) => (
   <SelectPrimitive.Trigger
-    {...{ ref }}
     className={cn(
       "flex h-9 items-center justify-between rounded-md border bg-select px-2.5 py-1.5",
       "placeholder:text-muted-foreground",
@@ -28,19 +28,20 @@ export const Trigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <icons.ChevronDown className="h-4 w-4 opacity-50" />
+      <icons.ChevronDown className="size-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-));
-Trigger.displayName = SelectPrimitive.Trigger.displayName;
+);
 
-export const Content = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
+export const Content = ({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Content>) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
-      {...{ ref, position }}
+      position={position}
       className={cn(
         "relative z-50 overflow-hidden rounded-md border bg-select-content text-select-content-foreground shadow-md animate-in fade-in-80",
         position === "popper" && "translate-y-1",
@@ -59,27 +60,18 @@ export const Content = React.forwardRef<
       </SelectPrimitive.Viewport>
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-));
-Content.displayName = SelectPrimitive.Content.displayName;
+);
 
-export const Label = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    {...{ ref }}
-    className={cn("py-1.5 pl-8 pr-2 font-semibold", className)}
-    {...props}
-  />
-));
-Label.displayName = SelectPrimitive.Label.displayName;
+export const Label = ({ className, ...props }: ComponentProps<typeof SelectPrimitive.Label>) => (
+  <SelectPrimitive.Label className={cn("py-1.5 pl-8 pr-2 font-semibold", className)} {...props} />
+);
 
-export const Item = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
+export const Item = ({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Item>) => (
   <SelectPrimitive.Item
-    {...{ ref }}
     className={cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm px-2.5 py-1.5 outline-none",
       "hover:bg-select-item-hover",
@@ -96,17 +88,11 @@ export const Item = React.forwardRef<
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-));
-Item.displayName = SelectPrimitive.Item.displayName;
+);
 
-export const Separator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    {...{ ref }}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-));
-Separator.displayName = SelectPrimitive.Separator.displayName;
+export const Separator = ({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Separator>) => (
+  <SelectPrimitive.Separator className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+);

components/ui/separator.tsx

@@ -1,22 +1,23 @@
 "use client";
 
-import * as React from "react";
+import { ComponentProps } from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
 import { cn } from "@/lib/style";
 
-export const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+export const Separator = ({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: ComponentProps<typeof SeparatorPrimitive.Root>) => (
   <SeparatorPrimitive.Root
-    {...{ ref, decorative, orientation }}
     className={cn(
       "bg-separator",
       orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
       className
     )}
+    {...{ decorative, orientation }}
     {...props}
   />
-));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
+);

components/ui/switch.tsx

@@ -1,38 +1,34 @@
 "use client";
 
-import * as React from "react";
+import { ComponentProps } from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 
 import { cn } from "@/lib/style";
 
-export type SwitchProps = React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>;
+export type SwitchProps = ComponentProps<typeof SwitchPrimitives.Root>;
 
-export const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(
-  ({ className, ...props }, ref) => (
-    <SwitchPrimitives.Root
-      {...{ ref }}
+export const Switch = ({ className, ...props }: SwitchProps) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "group inline-flex h-5 w-10 shrink-0 cursor-pointer items-center rounded-full border border-muted-foreground bg-switch",
+      "hover:bg-switch-hover",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "hover:disabled:bg-switch",
+      "data-[state=checked]:border-transparent data-[state=checked]:bg-indicator",
+      "data-[state=checked]:hover:bg-indicator-hover",
+      "data-[state=checked]:disabled:hover:bg-indicator",
+      className
+    )}
+    {...props}
+  >
+    <SwitchPrimitives.Thumb
       className={cn(
-        "group inline-flex h-5 w-10 shrink-0 cursor-pointer items-center rounded-full border border-muted-foreground bg-switch",
-        "hover:bg-switch-hover",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        "hover:disabled:bg-switch",
-        "data-[state=checked]:border-transparent data-[state=checked]:bg-indicator",
-        "data-[state=checked]:hover:bg-indicator-hover",
-        "data-[state=checked]:disabled:hover:bg-indicator",
-        className
+        "pointer-events-none block size-3.5 rounded-full bg-foreground/80 shadow-lg transition-transform",
+        "group-hover:size-4",
+        "group-disabled:size-3.5",
+        "data-[state=checked]:translate-x-[22px] data-[state=checked]:bg-background",
+        "data-[state=unchecked]:translate-x-0.5"
       )}
-      {...props}
-    >
-      <SwitchPrimitives.Thumb
-        className={cn(
-          "pointer-events-none block h-3.5 w-3.5 rounded-full bg-foreground/80 shadow-lg transition-transform",
-          "group-hover:h-4 group-hover:w-4",
-          "group-disabled:h-3.5 group-disabled:w-3.5",
-          "data-[state=checked]:translate-x-[22px] data-[state=checked]:bg-background",
-          "data-[state=unchecked]:translate-x-0.5"
-        )}
-      />
-    </SwitchPrimitives.Root>
-  )
+    />
+  </SwitchPrimitives.Root>
 );
-Switch.displayName = SwitchPrimitives.Root.displayName;

components/ui/textarea.tsx

@@ -1,27 +1,20 @@
-import * as React from "react";
-import equal from "react-fast-compare";
+import { ComponentProps } from "react";
 
 import { cn } from "@/lib/style";
 
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+export type TextareaProps = ComponentProps<"textarea">;
 
-export const RawTextarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => (
-    <textarea
-      {...{ ref }}
-      className={cn(
-        "border-b-1 resize-none rounded border border-b-muted-foreground bg-textarea px-3 py-2 font-mono outline-none",
-        "placeholder:text-muted-foreground",
-        "hover:bg-textarea-hover",
-        "focus:border-b-2 focus:border-b-indicator focus:bg-textarea-focus focus:pb-[7px]",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      spellCheck="false"
-      {...props}
-    />
-  )
+export const Textarea = ({ className, ...props }: TextareaProps) => (
+  <textarea
+    className={cn(
+      "border-b-1 resize-none rounded border border-b-muted-foreground bg-textarea px-3 py-2 font-mono outline-none",
+      "placeholder:text-muted-foreground",
+      "hover:bg-textarea-hover",
+      "focus:border-b-2 focus:border-b-indicator focus:bg-textarea-focus focus:pb-[7px]",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    spellCheck="false"
+    {...props}
+  />
 );
-RawTextarea.displayName = "RawTextarea";
-
-export const Textarea = React.memo(RawTextarea, equal);

components/ui/toggle-group.tsx

@@ -1,29 +1,22 @@
 "use client";
 
-import * as React from "react";
+import { ComponentProps } from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 
 import { cn } from "@/lib/style";
 
-const ToggleGroup = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root
-    ref={ref}
-    className={cn("flex items-center gap-2.5", className)}
-    {...props}
-  />
-));
+const ToggleGroup = ({ className, ...props }: ComponentProps<typeof ToggleGroupPrimitive.Root>) => (
+  <ToggleGroupPrimitive.Root className={cn("flex items-center gap-2.5", className)} {...props} />
+);
 
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
 
-const ToggleGroupItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>
->(({ className, children, ...props }, ref) => (
+const ToggleGroupItem = ({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof ToggleGroupPrimitive.Item>) => (
   <ToggleGroupPrimitive.Item
-    ref={ref}
     className={cn(
       "focus-visible:ring-ring inline-flex h-10 items-center justify-center rounded-md bg-accent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-sky-600 data-[state=on]:text-white",
       className
@@ -32,8 +25,6 @@ const ToggleGroupItem = React.forwardRef<
   >
     {children}
   </ToggleGroupPrimitive.Item>
-));
-
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+);
 
 export { ToggleGroup, ToggleGroupItem };

components/ui/tooltip.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import { ComponentProps } from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 import { cn } from "@/lib/style";
@@ -9,12 +9,13 @@ export const TooltipProvider = TooltipPrimitive.Provider;
 export const Tooltip = TooltipPrimitive.Root;
 export const TooltipTrigger = TooltipPrimitive.Trigger;
 
-export const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+export const TooltipContent = ({
+  className,
+  sideOffset = 4,
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Content>) => (
   <TooltipPrimitive.Content
-    {...{ ref, sideOffset }}
+    sideOffset={sideOffset}
     className={cn(
       "z-50 overflow-hidden rounded-md border bg-tooltip px-3 py-1.5 text-tooltip-foreground shadow-md animate-in fade-in-50",
       "data-[side=bottom]:slide-in-from-top-1",
@@ -25,5 +26,4 @@ export const TooltipContent = React.forwardRef<
     )}
     {...props}
   />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+);