updating typescript, types and updated libs

Vizzuality · Oct 17, 2023 · 39c2f80 · 39c2f80
1 parent cafb536
commit 39c2f80
Show file tree

Hide file tree

Showing 10 changed files with 1,204 additions and 647 deletions.
diff --git a/client/package.json b/client/package.json
@@ -25,10 +25,10 @@
     "@dnd-kit/modifiers": "5.0.0",
     "@dnd-kit/sortable": "6.0.1",
     "@dnd-kit/utilities": "3.2.0",
-    "@floating-ui/core": "1.1.1",
-    "@floating-ui/react": "0.19.1",
-    "@floating-ui/react-dom": "1.2.2",
-    "@headlessui/react": "1.7.8",
+    "@floating-ui/core": "1.5.0",
+    "@floating-ui/react": "0.26.1",
+    "@floating-ui/react-dom": "2.0.2",
+    "@headlessui/react": "v1.7.17",
     "@heroicons/react": "v1.0.6",
     "@hookform/resolvers": "2.8.8",
     "@json2csv/plainjs": "^6.1.3",
@@ -66,13 +66,12 @@
     "react-hook-form": "7.43.1",
     "react-hot-toast": "2.2.0",
     "react-map-gl": "7.0.23",
-    "react-range": "1.8.12",
+    "react-range": "1.8.14",
     "react-redux": "8.0.2",
-    "react-spring": "9.4.2",
     "react-virtualized": "9.22.3",
-    "recharts": "2.1.12",
+    "recharts": "2.9.0",
     "rooks": "5.10.0",
-    "sharp": "^0.31.1",
+    "sharp": "0.32.6",
     "tailwindcss": "3.3.1",
     "uuid": "8.3.2",
     "yup": "0.32.11"
@@ -85,21 +84,21 @@
     "@types/node": "16.11.6",
     "@types/react": "18.2.28",
     "@types/react-dom": "18.2.13",
-    "@typescript-eslint/eslint-plugin": "5.13.0",
-    "@typescript-eslint/parser": "5.13.0",
+    "@typescript-eslint/eslint-plugin": "6.8.0",
+    "@typescript-eslint/parser": "6.8.0",
     "cypress": "13.2.0",
     "eslint": "8.23.1",
-    "eslint-config-next": "13.2.4",
+    "eslint-config-next": "13.5.5",
     "eslint-config-prettier": "8.6.0",
-    "eslint-import-resolver-typescript": "^3.5.1",
+    "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "4.2.1",
     "istanbul-reports": "3.0.0",
     "nyc": "15.1.0",
     "nyc-report-lcov-absolute": "1.0.0",
     "prettier": "2.8.3",
     "start-server-and-test": "1.14.0",
-    "typescript": "4.9.5",
+    "typescript": "5.2.2",
     "webpack": "5"
   },
   "packageManager": "[email protected]"

diff --git a/client/src/components/forms/select/autocomplete/component.tsx b/client/src/components/forms/select/autocomplete/component.tsx
@@ -1,4 +1,4 @@
-import { cloneElement, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { cloneElement, useCallback, useEffect, useMemo, useState } from 'react';
 import classnames from 'classnames';
 import { Transition, Combobox } from '@headlessui/react';
 import { ChevronUpIcon, ChevronDownIcon, XIcon } from '@heroicons/react/solid';
@@ -38,7 +38,7 @@ const AutoCompleteSelect = <T,>({
     defaultValue || value || { label: '', value: '' },
   );
   const [query, setQuery] = useState('');
-  const { x, y, reference, floating, strategy } = useFloating<HTMLButtonElement>({
+  const { x, y, refs, strategy } = useFloating<HTMLButtonElement>({
     middleware: [
       offset(5),
       flip(),
@@ -162,7 +162,7 @@ const AutoCompleteSelect = <T,>({
               </Combobox.Label>
             )}
             <div className="relative w-full overflow-hidden">
-              <Combobox.Input<'input', Option<T>>
+              <Combobox.Input
                 className={classnames(
                   'w-full inline-flex items-center py-2.5 pl-3 text-left leading-5',
                   'border rounded-md shadow-sm cursor-default hover:cursor-pointer focus:border-navy-400 focus:outline-none focus:ring-0',
@@ -180,10 +180,13 @@ const AutoCompleteSelect = <T,>({
                 )}
                 onChange={handleInputChange}
                 placeholder={placeholder}
-                displayValue={(option) => option?.label}
-                ref={reference}
+                displayValue={(option: Option<T>) => option?.label}
               />
-              <Combobox.Button className="absolute inset-0 flex items-center w-full pr-10" as="div">
+              <Combobox.Button
+                className="absolute inset-0 flex items-center w-full pr-10"
+                as="div"
+                ref={refs.setReference}
+              >
                 {icon && <div className="mr-2">{cloneElement(icon)}</div>}
                 <div className="absolute right-4">
                   {open && !loading && (
@@ -253,7 +256,7 @@ const AutoCompleteSelect = <T,>({
                   top: y ?? 0,
                   left: x ?? 0,
                 }}
-                ref={floating}
+                ref={refs.setFloating}
               >
                 <Combobox.Options>
                   <VirtualizedList

diff --git a/client/src/components/forms/select/component.tsx b/client/src/components/forms/select/component.tsx
@@ -33,7 +33,7 @@ const Select = <T,>({
   const [selected, setSelected] = useState<Option<T> | Option<string> | Option<T>[]>(
     multiple ? [] : { label: '', value: '' },
   );
-  const { x, y, reference, floating, strategy } = useFloating<HTMLButtonElement>({
+  const { x, y, refs, strategy } = useFloating<HTMLButtonElement>({
     middleware: [
       flip(),
       size({
@@ -151,7 +151,7 @@ const Select = <T,>({
                   'border-navy-400': theme === 'dark' && !error,
                 },
               )}
-              ref={reference}
+              ref={refs.setReference}
             >
               {icon && <div className="mr-2">{cloneElement(icon)}</div>}
               <span className="min-h-full block text-sm truncate">{labelSelect}</span>
@@ -201,7 +201,7 @@ const Select = <T,>({
                 top: y ?? 0,
                 left: x ?? 0,
               }}
-              ref={floating}
+              ref={refs.setFloating}
             >
               <div className="mt-2 overflow-y-auto text-base bg-white rounded-md shadow-sm max-h-60 ring-1 ring-gray-200 focus:outline-none max-w-sm">
                 <Listbox.Options

diff --git a/client/src/components/tooltip/component.tsx b/client/src/components/tooltip/component.tsx
@@ -55,8 +55,7 @@ export const ToolTip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
   const {
     x,
     y,
-    reference,
-    floating,
+    refs,
     strategy,
     middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
     placement: floatingPlacement,
@@ -78,7 +77,7 @@ export const ToolTip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
   const { getReferenceProps, getFloatingProps } = useInteractions([
     useHover(context, {
       enabled: hoverTrigger && enabled,
-      handleClose: safePolygon({ restMs: 50 }),
+      handleClose: safePolygon({ buffer: 50 }),
     }),
     useClick(context, { enabled: !hoverTrigger && enabled, toggle: true }),
     useDismiss(context),
@@ -89,7 +88,7 @@ export const ToolTip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
       <button
         type="button"
         {...getReferenceProps({
-          ref: reference,
+          ref: refs.setReference,
           className: 'relative',
           onClick: (e) => e.stopPropagation(),
         })}
@@ -101,7 +100,7 @@ export const ToolTip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
           <div
             {...getFloatingProps({
               className: classNames(className, 'drop-shadow-md w-fit z-50'),
-              ref: floating,
+              ref: refs.setFloating,
               style: {
                 position: strategy,
                 top: y ?? '',

diff --git a/client/src/components/tree-select/component.tsx b/client/src/components/tree-select/component.tsx
@@ -99,8 +99,7 @@ const InnerTreeSelect = <IsMulti extends boolean>(
   const {
     x,
     y,
-    reference,
-    floating,
+    refs,
     strategy,
     refs: { reference: referenceElement },
     context,
@@ -159,9 +158,9 @@ const InnerTreeSelect = <IsMulti extends boolean>(
       setExpandedKeys((prevKeys) => {
         const uniqueKeys = new Set(prevKeys);
         if (!expanded) {
-          uniqueKeys.delete(node.key);
+          uniqueKeys.delete(node.key as Key);
         } else {
-          uniqueKeys.add(node.key);
+          uniqueKeys.add(node.key as Key);
         }
         return Array.from(uniqueKeys);
       });
@@ -384,7 +383,7 @@ const InnerTreeSelect = <IsMulti extends boolean>(
       <div
         {...(!disabled && {
           ...getReferenceProps({
-            ref: reference,
+            ref: refs.setReference,
             disabled,
           }),
         })}
@@ -535,13 +534,13 @@ const InnerTreeSelect = <IsMulti extends boolean>(
               left: x ?? '',
               minWidth: multiple ? 150 : 100,
               width:
-                fitContent && reference
+                fitContent && refs.setReference
                   ? (referenceElement.current as HTMLElement)?.offsetWidth
                   : 'inherit',
             },
             className:
               'relative z-20 rounded-md overflow-hidden shadow-lg ring-1 ring-black ring-opacity-5',
-            ref: floating,
+            ref: refs.setFloating,
           })}
         >
           <div

diff --git a/client/src/containers/analysis-visualization/analysis-filters/more-filters/component.tsx b/client/src/containers/analysis-visualization/analysis-filters/more-filters/component.tsx
@@ -126,7 +126,7 @@ const MoreFilters = () => {
     setSelectedFilters(moreFilters);
   }, [moreFilters]);
 
-  const { reference, floating, strategy, x, y, context } = useFloating({
+  const { refs, strategy, x, y, context } = useFloating({
     // open: isOpen,
     // onOpenChange: handleOpen,
     placement: 'bottom-start',
@@ -281,7 +281,7 @@ const MoreFilters = () => {
             className="flex items-center space-x-2 px-2 py-2.5 border border-gray-200 rounded-md bg-white shadow-sm hover:cursor-pointer focus:border-navy-400 focus:outline-none focus:ring-0"
             type="button"
             {...getReferenceProps({
-              ref: reference,
+              ref: refs.setReference,
             })}
             data-testid="more-filters-button"
           >
@@ -304,7 +304,7 @@ const MoreFilters = () => {
               leaveFrom="opacity-100 translate-y-0"
               leaveTo="opacity-0 translate-y-1"
               {...getFloatingProps({
-                ref: floating,
+                ref: refs.setFloating,
                 style: {
                   position: strategy,
                   top: y ?? '',

diff --git a/client/src/containers/filters/years-range/component.tsx b/client/src/containers/filters/years-range/component.tsx
@@ -66,7 +66,7 @@ export const YearsRangeFilter: React.FC<YearsRangeFilterProps> = ({
     setIsLoaded(true);
   }, [endYear, isLoaded, startYear, years, yearsGap, lastYearWithData]);
 
-  const { reference, floating, x, y, context, strategy } = useFloating({
+  const { refs, x, y, context, strategy } = useFloating({
     open: isOpen,
     onOpenChange: setIsOpen,
     placement: 'bottom-start',
@@ -88,7 +88,7 @@ export const YearsRangeFilter: React.FC<YearsRangeFilterProps> = ({
         type="button"
         className="relative w-full py-2.5 leading-5 text-sm pl-3 pr-10 text-left bg-white border border-gray-200 rounded-md shadow-sm cursor-pointer focus:outline-none focus:border-navy-400 focus:ring-0"
         {...getReferenceProps({
-          ref: reference,
+          ref: refs.setReference,
         })}
         data-testid="years-range-btn"
       >
@@ -119,7 +119,7 @@ export const YearsRangeFilter: React.FC<YearsRangeFilterProps> = ({
           leaveTo="opacity-0 translate-y-1"
           className="z-10"
           {...getFloatingProps({
-            ref: floating,
+            ref: refs.setFloating,
             style: {
               top: y ?? '',
               left: x ?? '',

diff --git a/client/src/containers/user-dropdown/component.tsx b/client/src/containers/user-dropdown/component.tsx
@@ -1,10 +1,10 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import Link from 'next/link';
-import { createPortal } from 'react-dom';
 import { signOut } from 'next-auth/react';
 import { Menu } from '@headlessui/react';
 import { offset, useFloating } from '@floating-ui/react-dom';
 import { shift } from '@floating-ui/core';
+import { FloatingPortal } from '@floating-ui/react';
 
 import Loading from 'components/loading';
 import UserAvatar from 'containers/user-avatar';
@@ -15,7 +15,7 @@ const MENU_ITEM_CLASSNAME =
   'block w-full py-2 px-4 text-sm text-left text-gray-900 h-9 hover:bg-navy-50 focus-visible:outline-navy-50';
 
 const UserDropdown: React.FC = () => {
-  const { x, y, reference, floating, strategy } = useFloating({
+  const { x, y, refs, strategy } = useFloating({
     placement: 'top-start',
     middleware: [offset({ crossAxis: 20, mainAxis: 10 }), shift()],
   });
@@ -31,21 +31,25 @@ const UserDropdown: React.FC = () => {
   return (
     <Menu as="div" className="flex justify-center flex-col items-center w-full mb-5">
       {(!user || status === 'loading') && <Loading className="w-5 h-5 text-white" />}
-      <Menu.Button
-        className="focus-visible:shadow-button-focused focus-visible:outline-none rounded-lg shadow-menu hover:shadow-button-hovered"
-        ref={reference}
-      >
-        <UserAvatar
-          userFullName={userName}
-          user={user}
-          className="bg-black/20 h-[50px] w-[50px] "
-        />
-      </Menu.Button>
-      <span className="text-white text-xs mt-3">Account</span>
-      {!!user &&
-        createPortal(
+      {user && status === 'success' && (
+        <>
+          <Menu.Button
+            className="focus-visible:shadow-button-focused focus-visible:outline-none rounded-lg shadow-menu hover:shadow-button-hovered"
+            ref={refs.setReference}
+          >
+            <UserAvatar
+              userFullName={userName}
+              user={user}
+              className="bg-black/20 h-[50px] w-[50px] "
+            />
+          </Menu.Button>
+          <span className="text-white text-xs mt-3">Account</span>
+        </>
+      )}
+      {!!user && (
+        <FloatingPortal>
           <Menu.Items
-            ref={floating}
+            ref={refs.setFloating}
             style={{
               position: strategy,
               top: y ?? '',
@@ -73,9 +77,9 @@ const UserDropdown: React.FC = () => {
                 Logout
               </button>
             </Menu.Item>
-          </Menu.Items>,
-          document.body,
-        )}
+          </Menu.Items>
+        </FloatingPortal>
+      )}
     </Menu>
   );
 };

diff --git a/client/src/utils/csv-download.ts b/client/src/utils/csv-download.ts
@@ -33,6 +33,7 @@ export const csvDownload = ({
     const csv = parser.parse(data);
     triggerCsvDownload(csv, formattedFilename);
   } catch (err) {
+    // eslint-disable-next-line no-console
     console.error(err);
   }
 };