upgrade to react 19 (#264)

outerbase · Jan 25, 2025 · 48a90f3 · 48a90f3
1 parent f617abe
commit 48a90f3
Show file tree

Hide file tree

Showing 9 changed files with 5,163 additions and 7,791 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -64,7 +64,6 @@
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@replit/codemirror-indentation-markers": "^6.5.3",
-    "@silevis/reactgrid": "^4.1.3",
     "@t3-oss/env-nextjs": "^0.9.2",
     "@tiptap/core": "^2.3.0",
     "@tiptap/react": "^2.3.0",
@@ -77,7 +76,7 @@
     "arctic": "^1.2.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "cmdk": "^0.2.0",
+    "cmdk": "^1.0.4",
     "cookies-next": "^4.3.0",
     "deep-equal": "^2.2.3",
     "dexie": "^4.0.8",
@@ -90,12 +89,12 @@
     "libsql-stateless-easy": "^1.6.11",
     "lodash": "^4.17.21",
     "lucia": "^3.2.0",
-    "lucide-react": "^0.309.0",
+    "lucide-react": "^0.474.0",
     "next": "15.1.4",
     "oslo": "^1.1.3",
-    "react": "^18.2.01",
-    "react-dom": "^18.2.0",
-    "react-resizable-panels": "^1.0.9",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-resizable-panels": "^2.1.7",
     "sonner": "^1.4.41",
     "sql-formatter": "^15.3.2",
     "tailwind-merge": "^2.2.2",
@@ -106,8 +105,8 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.0.0",
-    "@testing-library/jest-dom": "^6.2.1",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/deep-equal": "^1.0.4",
     "@types/file-saver": "^2.0.7",
     "@types/jest": "^29.5.11",

diff --git a/src/components/gui/query-result-table.tsx b/src/components/gui/query-result-table.tsx
@@ -2,7 +2,11 @@ import OptimizeTable, {
   OptimizeTableHeaderWithIndexProps,
 } from "@/components/gui/table-optimized";
 import OptimizeTableState from "@/components/gui/table-optimized/OptimizeTableState";
+import { useConfig } from "@/context/config-provider";
+import { ColumnSortOption } from "@/drivers/base-driver";
+import { exportDataAsDelimitedText } from "@/lib/export-helper";
 import { KEY_BINDING } from "@/lib/key-matcher";
+import { cn } from "@/lib/utils";
 import {
   LucideChevronDown,
   LucidePin,
@@ -15,18 +19,14 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import { ColumnSortOption } from "@/drivers/base-driver";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
   DropdownMenuSeparator,
+  DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 import useTableResultContextMenu from "./table-result/context-menu";
-import { cn } from "@/lib/utils";
-import { useConfig } from "@/context/config-provider";
-import { exportDataAsDelimitedText } from "@/lib/export-helper";
 
 interface ResultTableProps {
   data: OptimizeTableState;
@@ -86,12 +86,12 @@ function Header({
         }}
       >
         {header.display.icon ? (
-        <div className="mr-2">
-          <header.display.icon
-            className={cn("h-4 w-4", header.display.iconClassName)}
-          />
-        </div>
-      ) : null}
+          <div className="mr-2">
+            <header.display.icon
+              className={cn("h-4 w-4", header.display.iconClassName)}
+            />
+          </div>
+        ) : null}
         <div className={textClass}>{header.display.text}</div>
       </div>
       <div>
@@ -257,7 +257,6 @@ export default function ResultTable({
 
         for (let row = 0; row < data.length; row++) {
           for (let col = 0; col < data[row].length; col++) {
-            console.log(row, col, data[row][col]);
             state.changeValue(
               y + row,
               x + col,

diff --git a/src/components/gui/schema-editor/schema-editor-constraint-list.tsx b/src/components/gui/schema-editor/schema-editor-constraint-list.tsx
@@ -1,3 +1,4 @@
+import { useSchema } from "@/context/schema-provider";
 import {
   DatabaseTableColumnConstraint,
   DatabaseTableConstraintChange,
@@ -12,24 +13,23 @@ import {
   LucideShieldPlus,
   LucideTrash2,
 } from "lucide-react";
-import TableCombobox from "../table-combobox/TableCombobox";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "../../ui/dropdown-menu";
-import { Button } from "../../ui/button";
 import {
   Dispatch,
   PropsWithChildren,
   SetStateAction,
   useCallback,
   useMemo,
 } from "react";
+import { Button } from "../../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../ui/dropdown-menu";
 import ColumnListEditor from "../column-list-editor";
+import TableCombobox from "../table-combobox/TableCombobox";
 import { useColumnList } from "./column-provider";
-import { useSchema } from "@/context/schema-provider";
 
 type ConstraintChangeHandler = (
   constraint: DatabaseTableColumnConstraint
@@ -47,7 +47,7 @@ function ColumnCheck({
   return (
     <>
       <td className="border p-2">
-        <LucideCheck className="w-4 h-4 inline mr-2" /> Check
+        <LucideCheck className="mr-2 inline h-4 w-4" /> Check
       </td>
       <td className="border" colSpan={2}>
         <input
@@ -59,7 +59,7 @@ function ColumnCheck({
           }}
           readOnly={disabled}
           value={constraint.checkExpression}
-          className="font-mono p-2 w-full outline-hidden"
+          className="w-full p-2 font-mono outline-hidden"
         />
       </td>
     </>
@@ -133,7 +133,7 @@ function ColumnForeignKey({
   return (
     <>
       <td className="border p-2">
-        <LucideArrowUpRight className="w-4 h-4 inline mr-2" />
+        <LucideArrowUpRight className="mr-2 inline h-4 w-4" />
         Foreign Key
       </td>
       <td className="border">
@@ -146,7 +146,7 @@ function ColumnForeignKey({
         />
       </td>
       <td className="border">
-        <div className="p-1 px-2 flex gap-2 items-center">
+        <div className="flex items-center gap-2 p-1 px-2">
           <ColumnListEditor
             disabled={disabled}
             value={constraint.foreignKey?.columns ?? []}
@@ -191,11 +191,11 @@ function ColumnPrimaryKey({
   return (
     <>
       <td className="border p-2">
-        <LucideKeySquare className="w-4 h-4 inline mr-2" />
+        <LucideKeySquare className="mr-2 inline h-4 w-4" />
         Primary Key
       </td>
       <td className="border" colSpan={2}>
-        <div className="px-2 p-1 flex gap-2">
+        <div className="flex gap-2 p-1 px-2">
           <ColumnListEditor
             disabled={disabled}
             value={constraint.primaryColumns ?? []}
@@ -233,11 +233,11 @@ function ColumnUnique({
   return (
     <>
       <td className="border p-2">
-        <LucideFingerprint className="w-4 h-4 inline mr-2" />
+        <LucideFingerprint className="mr-2 inline h-4 w-4" />
         Unique
       </td>
       <td className="border" colSpan={2}>
-        <div className="px-2 p-1 flex gap-2">
+        <div className="flex gap-2 p-1 px-2">
           <ColumnListEditor
             disabled={disabled}
             value={constraint.uniqueColumns ?? []}
@@ -281,7 +281,7 @@ function RemovableConstraintItem({
       {children}
       <td className="border">
         <button className="p-1" onClick={onRemoveClicked}>
-          <LucideTrash2 className="w-4 h-4 text-red-500" />
+          <LucideTrash2 className="h-4 w-4 text-red-500" />
         </button>
       </td>
     </tr>
@@ -446,11 +446,11 @@ export default function SchemaEditorConstraintList({
           })}
           {!disabled && (
             <tr>
-              <td colSpan={4} className="px-4 py-2 border">
+              <td colSpan={4} className="border px-4 py-2">
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button size={"sm"}>
-                      <LucideShieldPlus className="w-4 h-4 mr-1" />
+                      <LucideShieldPlus className="mr-1 h-4 w-4" />
                       Add Constraint
                     </Button>
                   </DropdownMenuTrigger>

diff --git a/src/components/gui/table-combobox/TableCombobox.tsx b/src/components/gui/table-combobox/TableCombobox.tsx
@@ -1,17 +1,17 @@
+import { useSchema } from "@/context/schema-provider";
+import { cn } from "@/lib/utils";
 import { Check, ChevronsUpDown, LucideRefreshCw } from "lucide-react";
-import { Button } from "../../ui/button";
-import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
+import { useState } from "react";
+import { Button, buttonVariants } from "../../ui/button";
 import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
 } from "../../ui/command";
-import { cn } from "@/lib/utils";
-import { useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
 import { Separator } from "../../ui/separator";
-import { useSchema } from "@/context/schema-provider";
 
 export default function TableCombobox({
   value,
@@ -33,18 +33,23 @@ export default function TableCombobox({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild disabled={disabled}>
         {borderless ? (
-          <div className="justify-between flex w-full px-2 items-center">
+          <div className="flex w-full items-center justify-between px-2">
             {value ?? "No table selected"}
             <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
           </div>
         ) : (
-          <Button variant="outline" className="justify-between flex w-full">
+          <div
+            className={cn(
+              buttonVariants({ variant: "outline" }),
+              "flex w-full justify-between"
+            )}
+          >
             {value ?? "No table selected"}
             <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
-          </Button>
+          </div>
         )}
       </PopoverTrigger>
-      <PopoverContent className="p-0 w-[250px]">
+      <PopoverContent className="w-[250px] p-0">
         <Command>
           <CommandInput placeholder="Search table name..." />
 
@@ -80,7 +85,7 @@ export default function TableCombobox({
               refresh();
             }}
           >
-            <LucideRefreshCw className="w-4 h-4 mr-2" /> Refresh
+            <LucideRefreshCw className="mr-2 h-4 w-4" /> Refresh
           </Button>
         </div>
       </PopoverContent>