Upgrade & unify the frontend/* dependencies (liquity#692)

EmperorOrokuSaki · Jan 14, 2025 · a943ddc · a943ddc
1 parent d96fe9c
commit a943ddc
Show file tree

Hide file tree

Showing 8 changed files with 990 additions and 1,316 deletions.
diff --git a/frontend/app/package.json b/frontend/app/package.json
@@ -25,14 +25,14 @@
     "@next/bundle-analyzer": "^15.1.4",
     "@rainbow-me/rainbowkit": "^2.2.2",
     "@react-spring/web": "^9.7.5",
-    "@tanstack/react-query": "^5.63.0",
+    "@tanstack/react-query": "^5.64.1",
     "@vercel/analytics": "^1.4.1",
     "@wagmi/core": "^2.16.3",
     "abitype": "^1.0.8",
     "blo": "^1.2.0",
     "dnum": "^2.14.0",
     "geist": "^1.3.1",
-    "next": "^14.2.16",
+    "next": "^14.2.23",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "sharp": "^0.33.5",
@@ -49,13 +49,13 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/node": "^22.10.5",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/node": "^22.10.6",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^2.1.8",
     "jsdom": "^25.0.1",
-    "oxlint": "^0.15.5",
+    "oxlint": "^0.15.6",
     "tsx": "^4.19.2",
     "typescript": "^5.7.3",
     "vite-tsconfig-paths": "^5.0.1",

diff --git a/frontend/uikit-gallery/package.json b/frontend/uikit-gallery/package.json
@@ -20,22 +20,22 @@
     "@react-spring/web": "^9.7.5",
     "dnum": "^2.14.0",
     "geist": "^1.3.1",
-    "next": "~15.0.1",
-    "react": "19.0.0-rc-cae764ce-20241025",
-    "react-cosmos-core": "^6.1.2-canary.71267f3.0",
+    "next": "^14.2.23",
+    "react": "18.3.1",
+    "react-cosmos-core": "^6.2.0",
     "react-cosmos-plugin-boolean-input": "^6.1.2-canary.71267f3.0",
-    "react-dom": "19.0.0-rc-cae764ce-20241025",
-    "ts-pattern": "^5.5.0"
+    "react-dom": "18.3.1",
+    "ts-pattern": "^5.6.0"
   },
   "devDependencies": {
-    "@pandacss/dev": "^0.47.0",
-    "@types/node": "^22.8.1",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "eslint": "^8",
+    "@pandacss/dev": "^0.51.1",
+    "@types/node": "^22.10.6",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "eslint": "^8.57.1",
     "eslint-config-next": "14.2.5",
-    "react-cosmos": "^6.1.2-canary.71267f3.0",
-    "react-cosmos-next": "^6.1.2-canary.71267f3.0",
-    "typescript": "^5.5.4"
+    "react-cosmos": "^6.2.3",
+    "react-cosmos-next": "^6.2.0",
+    "typescript": "^5.7.3"
   }
 }
diff --git a/frontend/uikit-gallery/panda.config.ts b/frontend/uikit-gallery/panda.config.ts
@@ -1,9 +1,13 @@
+import type { Preset } from "@pandacss/dev";
+
 import { liquityUiKitPreset } from "@liquity2/uikit/panda.config";
 import { defineConfig } from "@pandacss/dev";
 
 export default defineConfig({
   preflight: true, // CSS reset
-  presets: [liquityUiKitPreset],
+  presets: [
+    liquityUiKitPreset as Preset, // `as Preset` prevents a type error: "Expression produces a union type that is too complex to represent."
+  ],
   exclude: [],
   outdir: "styled-system",
   include: [

diff --git a/frontend/uikit-gallery/src/Dropdown/shared.tsx b/frontend/uikit-gallery/src/Dropdown/shared.tsx
@@ -18,24 +18,6 @@ function tokenItemRow(
   };
 }
 
-const itemsWithSecondary = [
-  {
-    label: "Manually",
-    secondary: "Set the interest rate as you see fit",
-  },
-  {
-    label: "By Strategy",
-    secondary: "It’s an automated strategy developed by ICP that helps avoid redemption and reduce costs",
-  },
-  {
-    label: "By Delegation",
-    secondary: `
-      Delegates manage your interest rate, optimizing costs and preventing redemption.
-      They charge a fee for this.
-    `,
-  },
-] as const;
-
 function PlaceholderIcon() {
   return (
     <div
@@ -88,11 +70,25 @@ export function DropdownFixture({
             icon: <PlaceholderIcon />,
           }
           : undefined}
-        items={small ? itemsWithSecondary : [
-          tokenItemRow("ETH", "ETH", "10.00"),
-          tokenItemRow("RETH", "rETH", "30.00"),
-          tokenItemRow("WSTETH", "wstETH", "40.00"),
-        ]}
+        items={small
+          ? [{
+            label: "Manually",
+            secondary: "Set the interest rate as you see fit",
+          }, {
+            label: "By Strategy",
+            secondary: "It’s an automated strategy developed by ICP that helps avoid redemption and reduce costs",
+          }, {
+            label: "By Delegation",
+            secondary: `
+              Delegates manage your interest rate, optimizing costs and preventing redemption.
+              They charge a fee for this.
+            `,
+          }]
+          : [
+            tokenItemRow("ETH", "ETH", "10.00"),
+            tokenItemRow("RETH", "rETH", "30.00"),
+            tokenItemRow("WSTETH", "wstETH", "40.00"),
+          ]}
         menuWidth={300}
         onSelect={setSelected}
         selected={selected}

diff --git a/frontend/uikit-gallery/src/cosmos.decorator.tsx b/frontend/uikit-gallery/src/cosmos.decorator.tsx
@@ -1,8 +1,8 @@
-import type { ReactDecoratorProps } from "react-cosmos-core";
+import type { DecoratorProps } from "react-cosmos-core";
 
 import { css } from "../styled-system/css";
 
-export default function FixtureDecorator({ children }: ReactDecoratorProps) {
+export default function FixtureDecorator({ children }: DecoratorProps) {
   return (
     <div
       className={css({

diff --git a/frontend/uikit-gallery/tsconfig.json b/frontend/uikit-gallery/tsconfig.json
@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,9 +22,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
-    }
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }
diff --git a/frontend/uikit/package.json b/frontend/uikit/package.json
@@ -59,22 +59,22 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "focus-trap-react": "^10.3.0"
+    "focus-trap-react": "^10.3.1"
   },
   "devDependencies": {
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@vitejs/plugin-react-swc": "^3.7.1",
-    "dprint": "^0.47.5",
-    "globals": "^15.11.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "dprint": "^0.47.6",
+    "globals": "^15.14.0",
     "oxlint": "^0.10.3",
-    "tsx": "^4.16.5",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.10",
-    "vite-plugin-dts": "^4.3.0",
-    "zx": "^8.1.9"
+    "tsx": "^4.19.2",
+    "typescript": "^5.7.3",
+    "vite": "^5.4.11",
+    "vite-plugin-dts": "^4.5.0",
+    "zx": "^8.3.0"
   }
 }