fix(vite): update code for updated dependencies (#1043)

* how do I shoot web??

* black rabbit feedback + update deps

web/package.json

@@ -29,54 +29,54 @@
     }
   },
   "dependencies": {
-    "@fontsource/inter": "^4.5.11",
-    "@headlessui/react": "^1.6.4",
-    "@heroicons/react": "^2.0.11",
-    "@hookform/error-message": "^2.0.0",
-    "@tailwindcss/forms": "^0.5.2",
-    "@tanstack/react-query": "^4.29.3",
-    "@tanstack/react-query-devtools": "^4.29.3",
-    "@types/node": "^18.0.0",
-    "@types/react": "^18.0.12",
-    "@types/react-dom": "^18.0.5",
+    "@fontsource-variable/inter": "^5.0.8",
+    "@headlessui/react": "^1.7.16",
+    "@heroicons/react": "^2.0.18",
+    "@hookform/error-message": "^2.0.1",
+    "@tailwindcss/forms": "^0.5.4",
+    "@tanstack/react-query": "^4.32.6",
+    "@tanstack/react-query-devtools": "^4.32.6",
+    "@types/node": "^20.4.10",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
     "@types/react-portal": "^4.0.4",
-    "@types/react-router-dom": "^5.1.7",
-    "@types/react-table": "^7.7.12",
-    "@typescript-eslint/eslint-plugin": "^5.28.0",
-    "@typescript-eslint/parser": "^5.28.0",
-    "@vitejs/plugin-react-swc": "^3.2.0",
-    "autoprefixer": "^10.4.7",
-    "date-fns": "^2.28.0",
-    "eslint": "^8.17.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-react": "^7.30.0",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-table": "^7.7.14",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "autoprefixer": "^10.4.14",
+    "date-fns": "^2.30.0",
+    "eslint": "^8.47.0",
+    "eslint-plugin-import": "^2.28.0",
+    "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-watch": "^8.0.0",
-    "formik": "^2.2.9",
+    "formik": "^2.4.3",
     "http-proxy-middleware": "^2.0.6",
-    "postcss": "^8.4.14",
+    "postcss": "^8.4.27",
     "react": "^18.2.0",
     "react-debounce-input": "^3.3.0",
     "react-dom": "^18.2.0",
-    "react-error-boundary": "^3.1.4",
-    "react-hook-form": "^7.32.1",
-    "react-hot-toast": "^2.2.0",
-    "react-multi-select-component": "^4.2.9",
+    "react-error-boundary": "^4.0.11",
+    "react-hook-form": "^7.45.4",
+    "react-hot-toast": "^2.4.1",
+    "react-multi-select-component": "^4.3.4",
     "react-popper-tooltip": "^4.4.2",
     "react-portal": "^4.2.2",
-    "react-ridge-state": "4.2.2",
-    "react-router-dom": "^6.3.0",
-    "react-select": "^5.3.2",
+    "react-ridge-state": "4.2.9",
+    "react-router-dom": "^6.15.0",
+    "react-select": "^5.7.4",
     "react-table": "^7.8.0",
-    "react-textarea-autosize": "^8.3.4",
-    "react-tooltip": "^5.5.2",
+    "react-textarea-autosize": "^8.5.2",
+    "react-tooltip": "^5.20.0",
     "stacktracey": "^2.1.8",
-    "tailwindcss": "^3.1.3",
-    "typescript": "^4.7.3",
-    "vite": "^4.3.9",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.9",
+    "vite-plugin-pwa": "^0.16.4",
     "vite-plugin-svgr": "^3.2.0",
-    "vite-plugin-pwa": "^0.14.6",
-    "workbox-window": "^6.5.4",
+    "workbox-window": "^7.0.0",
     "zod": "^3.21.4",
     "zod-formik-adapter": "^1.2.0"
   }

web/src/forms/settings/IrcForms.tsx

@@ -7,6 +7,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { toast } from "react-hot-toast";
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import type { FieldProps } from "formik";
+import type { FieldArrayRenderProps } from "formik";
 import { Field, FieldArray, FormikErrors, FormikValues } from "formik";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import Select, { components, ControlProps, InputProps, MenuProps, OptionProps } from "react-select";
@@ -26,7 +27,7 @@ interface ChannelsFieldArrayProps {
 const ChannelsFieldArray = ({ channels }: ChannelsFieldArrayProps) => (
   <div className="p-6">
     <FieldArray name="channels">
-      {({ remove, push }) => (
+      {({ remove, push }: FieldArrayRenderProps) => (
         <div className="flex flex-col space-y-2 border-2 border-dashed dark:border-gray-700 p-4">
           {channels && channels.length > 0 ? (
             channels.map((_channel: IrcChannel, index: number) => (

web/src/index.css

@@ -9,7 +9,7 @@
 
 body {
   margin: 0;
-  font-family: "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  font-family: "InterVariable", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;

web/src/index.tsx

@@ -6,7 +6,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
-import "@fontsource/inter/variable.css";
+import "@fontsource-variable/inter";
 import "./index.css";
 import "react-tooltip/dist/react-tooltip.css";
 

web/src/screens/filters/Action.tsx

@@ -6,6 +6,7 @@
 import { Fragment, useEffect, useRef, useState } from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { Field, FieldArray, FieldProps, FormikValues, useFormikContext } from "formik";
+import type { FieldArrayRenderProps } from "formik";
 import { Dialog, Switch as SwitchBasic, Transition } from "@headlessui/react";
 import { ChevronRightIcon } from "@heroicons/react/24/solid";
 import { Link } from "react-router-dom";
@@ -76,7 +77,7 @@ export function FilterActions({ filter, values }: FilterActionsProps) {
   return (
     <div className="mt-10">
       <FieldArray name="actions">
-        {({ remove, push }) => (
+        {({ remove, push }: FieldArrayRenderProps) => (
           <Fragment>
             <div className="-ml-4 -mt-4 mb-6 flex justify-between items-center flex-wrap sm:flex-nowrap">
               <div className="ml-4 mt-4">

web/vite.config.ts

@@ -96,7 +96,7 @@ export default ({ mode }: ConfigEnv) => {
     },
     build: {
       manifest: true,
-      sourcemap: true
+      sourcemap: true,
     }
   });
 };