⬆️ Upgrade Tanstack and React

baptisteArno · Feb 26, 2025 · c83cfbc · c83cfbc
1 parent 388ba31
commit c83cfbc
Show file tree

Hide file tree

Showing 42 changed files with 1,206 additions and 2,211 deletions.
diff --git a/apps/builder/package.json b/apps/builder/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@auth/core": "0.37.4",
     "@braintree/sanitize-url": "7.0.1",
-    "@chakra-ui/react": "2.8.2",
+    "@chakra-ui/react": "2.10.6",
     "@dnd-kit/core": "6.0.8",
     "@dnd-kit/sortable": "7.0.2",
     "@dnd-kit/utilities": "3.2.1",
@@ -60,10 +60,10 @@
     "@udecode/plate-core": "30.4.5",
     "@udecode/plate-floating": "30.5.3",
     "@udecode/plate-link": "30.5.3",
-    "@uiw/codemirror-extensions-langs": "4.21.24",
-    "@uiw/codemirror-theme-github": "4.21.24",
-    "@uiw/codemirror-theme-tokyo-night": "4.21.24",
-    "@uiw/react-codemirror": "4.21.24",
+    "@uiw/codemirror-extensions-langs": "4.23.8",
+    "@uiw/codemirror-theme-github": "4.23.8",
+    "@uiw/codemirror-theme-tokyo-night": "4.23.8",
+    "@uiw/react-codemirror": "4.23.8",
     "@upstash/ratelimit": "0.4.3",
     "@use-gesture/react": "10.2.27",
     "ai": "4.1.46",
@@ -96,8 +96,8 @@
     "pexels": "^1.4.0",
     "prettier": "2.8.8",
     "qs": "6.11.2",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-markdown": "^9.0.1",
     "shared-zustand": "2.0.0",
     "sonner": "1.7.4",
@@ -134,7 +134,7 @@
     "@types/papaparse": "5.3.7",
     "@types/prettier": "2.7.3",
     "@types/qs": "6.9.7",
-    "@types/react": "18.2.0",
+    "@types/react": "18.3.18",
     "@types/tinycolor2": "1.4.3",
     "dotenv": "16.4.5",
     "dotenv-cli": "8.0.0",

diff --git a/apps/builder/src/components/ContextMenu.tsx b/apps/builder/src/components/ContextMenu.tsx
@@ -50,22 +50,18 @@ export function ContextMenu<T extends HTMLElement = HTMLElement>(
     }
   }, [isOpened]);
 
-  useEventListener(
-    "contextmenu",
-    (e) => {
-      if (props.isDisabled) return;
-      if (e.currentTarget === targetRef.current) {
-        e.preventDefault();
-        e.stopPropagation();
-        props.onOpen?.();
-        setIsOpened(true);
-        setPosition([e.pageX, e.pageY]);
-      } else {
-        setIsOpened(false);
-      }
-    },
-    targetRef.current,
-  );
+  useEventListener(targetRef.current, "contextmenu", (e) => {
+    if (props.isDisabled) return;
+    if (e.currentTarget === targetRef.current) {
+      e.preventDefault();
+      e.stopPropagation();
+      props.onOpen?.();
+      setIsOpened(true);
+      setPosition([e.pageX, e.pageY]);
+    } else {
+      setIsOpened(false);
+    }
+  });
 
   const onCloseHandler = useCallback(() => {
     props.menuProps?.onClose?.();

diff --git a/apps/builder/src/components/inputs/AutocompleteInput.tsx b/apps/builder/src/components/inputs/AutocompleteInput.tsx
@@ -192,7 +192,9 @@ export const AutocompleteInput = ({
                 {filteredItems.map((item, idx) => {
                   return (
                     <Button
-                      ref={(el) => (itemsRef.current[idx] = el)}
+                      ref={(el) => {
+                        itemsRef.current[idx] = el;
+                      }}
                       minH="40px"
                       key={idx}
                       onClick={handleItemClick(item)}

diff --git a/apps/builder/src/components/inputs/CodeEditor.tsx b/apps/builder/src/components/inputs/CodeEditor.tsx
@@ -42,6 +42,7 @@ type Props = {
   isRequired?: boolean;
   onChange?: (value: string) => void;
   withLineNumbers?: boolean;
+  placeholder?: string;
 };
 export const CodeEditor = ({
   label,
@@ -58,6 +59,7 @@ export const CodeEditor = ({
   withLineNumbers = false,
   isReadOnly = false,
   debounceTimeout = 1000,
+  placeholder,
   ...props
 }: Props & Omit<BoxProps, "onChange">) => {
   const theme = useColorModeValue(githubLight, tokyoNight);
@@ -172,7 +174,7 @@ export const CodeEditor = ({
           basicSetup={{
             highlightActiveLine: false,
           }}
-          placeholder={props.placeholder}
+          placeholder={placeholder}
         />
         {isVariableButtonDisplayed && (
           <VariablesButton

diff --git a/apps/builder/src/components/inputs/NumberInput.tsx b/apps/builder/src/components/inputs/NumberInput.tsx
@@ -34,6 +34,7 @@ type Props<HasVariable extends boolean> = {
   direction?: "row" | "column";
   suffix?: string;
   helperText?: ReactNode;
+  placeholder?: string;
   onValueChange: (value?: Value<HasVariable>) => void;
 } & Omit<
   NumberInputProps,
@@ -51,6 +52,7 @@ export const NumberInput = <HasVariable extends boolean>({
   direction = "column",
   suffix,
   helperText,
+  placeholder,
   ...props
 }: Props<HasVariable>) => {
   const [isTouched, setIsTouched] = useState(false);
@@ -107,7 +109,7 @@ export const NumberInput = <HasVariable extends boolean>({
       w="full"
       {...props}
     >
-      <NumberInputField placeholder={props.placeholder} />
+      <NumberInputField placeholder={placeholder} />
       <NumberInputStepper>
         <NumberIncrementStepper />
         <NumberDecrementStepper />

diff --git a/apps/builder/src/components/inputs/RadioButtons.tsx b/apps/builder/src/components/inputs/RadioButtons.tsx
@@ -47,19 +47,21 @@ export const RadioButtons = <T extends string>({
   );
 };
 
-export const RadioCard = (
-  props: UseRadioProps & { children: ReactNode; size?: "md" | "sm" },
-) => {
-  const { getInputProps, getCheckboxProps } = useRadio(props);
+export const RadioCard = ({
+  children,
+  size = "md",
+  ...useRadioProps
+}: UseRadioProps & { children: ReactNode; size?: "md" | "sm" }) => {
+  const { getInputProps, getRadioProps } = useRadio(useRadioProps);
 
   const input = getInputProps();
-  const checkbox = getCheckboxProps();
+  const radioProps = getRadioProps();
 
   return (
     <Box as="label" flex="1">
       <input {...input} />
       <Flex
-        {...checkbox}
+        {...radioProps}
         cursor="pointer"
         borderWidth="2px"
         borderRadius="md"
@@ -72,13 +74,13 @@ export const RadioCard = (
         _active={{
           bgColor: useColorModeValue("gray.200", "gray.600"),
         }}
-        px={props.size === "sm" ? 3 : 5}
-        py={props.size === "sm" ? 1 : 2}
+        px={size === "sm" ? 3 : 5}
+        py={size === "sm" ? 1 : 2}
         transition="background-color 150ms, color 150ms, border 150ms"
         justifyContent="center"
-        fontSize={props.size === "sm" ? "sm" : undefined}
+        fontSize={size === "sm" ? "sm" : undefined}
       >
-        {props.children}
+        {children}
       </Flex>
     </Box>
   );

diff --git a/apps/builder/src/components/inputs/Select.tsx b/apps/builder/src/components/inputs/Select.tsx
@@ -237,7 +237,9 @@ export const Select = <T extends Item>({
               filteredItems.map((item, idx) => {
                 return (
                   <Button
-                    ref={(el) => (itemsRef.current[idx] = el)}
+                    ref={(el) => {
+                      if (el) itemsRef.current[idx] = el;
+                    }}
                     minH="40px"
                     key={idx}
                     onClick={handleItemClick(item)}

diff --git a/apps/builder/src/components/inputs/VariableSearchInput.tsx b/apps/builder/src/components/inputs/VariableSearchInput.tsx
@@ -278,9 +278,9 @@ export const VariableSearchInput = ({
                     <Button
                       as="li"
                       cursor="pointer"
-                      ref={(el: HTMLButtonElement) =>
-                        (itemsRef.current[idx] = el)
-                      }
+                      ref={(el: HTMLButtonElement | null) => {
+                        if (el) itemsRef.current[idx] = el;
+                      }}
                       role="menuitem"
                       minH="40px"
                       key={idx}

diff --git a/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemNode.tsx b/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemNode.tsx
@@ -57,7 +57,7 @@ export const PictureChoiceItemNode = ({
   const handleMouseWheel = (e: WheelEvent) => {
     e.stopPropagation();
   };
-  useEventListener("wheel", handleMouseWheel, ref.current);
+  useEventListener(ref.current, "wheel", handleMouseWheel);
 
   const blockId = typebot
     ? typebot.groups.at(indices.groupIndex)?.blocks?.at(indices.blockIndex)?.id

diff --git a/apps/builder/src/features/blocks/logic/condition/components/ConditionItemNode.tsx b/apps/builder/src/features/blocks/logic/condition/components/ConditionItemNode.tsx
@@ -61,7 +61,7 @@ export const ConditionItemNode = ({ item, isMouseOver, indices }: Props) => {
   const handleMouseWheel = (e: WheelEvent) => {
     e.stopPropagation();
   };
-  useEventListener("wheel", handleMouseWheel, ref.current);
+  useEventListener(ref.current, "wheel", handleMouseWheel);
 
   return (
     <Popover

diff --git a/apps/builder/src/features/editor/components/BlocksSideBar.tsx b/apps/builder/src/features/editor/components/BlocksSideBar.tsx
@@ -78,7 +78,7 @@ export const BlocksSideBar = () => {
       y: clientY - relativeCoordinates.y,
     });
   };
-  useEventListener("mousemove", handleMouseMove);
+  useEventListener(document, "mousemove", handleMouseMove);
 
   const initBlockDragging = (e: React.MouseEvent, type: BlockV6["type"]) => {
     const element = e.currentTarget as HTMLDivElement;
@@ -112,7 +112,7 @@ export const BlocksSideBar = () => {
       y: 0,
     });
   };
-  useEventListener("mouseup", handleMouseUp);
+  useEventListener(document, "mouseup", handleMouseUp);
 
   const handleLockClick = () => {
     try {

diff --git a/apps/builder/src/features/folders/components/FolderContent.tsx b/apps/builder/src/features/folders/components/FolderContent.tsx
@@ -113,7 +113,7 @@ export const FolderContent = ({ folder }: Props) => {
     setMouseOverFolderId(undefined);
     setDraggedTypebot(undefined);
   };
-  useEventListener("mouseup", handleMouseUp);
+  useEventListener(document, "mouseup", handleMouseUp);
 
   const handleTypebotDrag =
     (typebot: TypebotInDashboard) =>
@@ -135,7 +135,7 @@ export const FolderContent = ({ folder }: Props) => {
       y: clientY - mousePositionInElement.y,
     });
   };
-  useEventListener("mousemove", handleMouseMove);
+  useEventListener(document.body, "mousemove", handleMouseMove);
 
   useEffect(() => {
     if (!draggablePosition || !draggedTypebot) return;

diff --git a/apps/builder/src/features/graph/components/ElementsSelectionMenu.tsx b/apps/builder/src/features/graph/components/ElementsSelectionMenu.tsx
@@ -56,9 +56,9 @@ export const ElementsSelectionMenu = ({
       })),
     );
 
-  useEventListener("pointerup", (e) => e.stopPropagation(), ref.current);
+  useEventListener(ref.current, "pointerup", (e) => e.stopPropagation());
 
-  useEventListener("mousemove", (e) => {
+  useEventListener(document, "mousemove", (e) => {
     setMousePosition({
       x: e.clientX,
       y: e.clientY,

diff --git a/apps/builder/src/features/graph/components/Graph.tsx b/apps/builder/src/features/graph/components/Graph.tsx
@@ -271,11 +271,11 @@ export const Graph = ({
 
   // Prevent back/forward navigation in Firefox
   useEventListener(
+    graphContainerRef.current,
     "wheel",
     (e) => {
       e.preventDefault();
     },
-    graphContainerRef.current,
     {
       passive: false,
     },
@@ -343,36 +343,32 @@ export const Graph = ({
     setAutoMoveDirection(undefined);
   };
 
-  useEventListener("keydown", (e) => {
+  useEventListener(document, "keydown", (e) => {
     if (e.key === " ") setIsDraggingGraph(true);
   });
-  useEventListener("keyup", (e) => {
+  useEventListener(document, "keyup", (e) => {
     if (e.key === " ") {
       setIsDraggingGraph(false);
       setIsDragging(false);
     }
   });
 
-  useEventListener(
-    "blur",
-    () => {
-      setIsDraggingGraph(false);
-      setIsDragging(false);
-    },
-    window as any,
-  );
+  useEventListener(window, "blur", () => {
+    setIsDraggingGraph(false);
+    setIsDragging(false);
+  });
 
-  useEventListener("mousedown", handleCaptureMouseDown, undefined, {
+  useEventListener(document, "mousedown", handleCaptureMouseDown, {
     capture: true,
   });
-  useEventListener("mouseup", handleMouseUp, graphContainerRef.current);
-  useEventListener("pointerup", handlePointerUp, editorContainerRef.current);
-  useEventListener("mousemove", handleMouseMove);
+  useEventListener(graphContainerRef.current, "mouseup", handleMouseUp);
+  useEventListener(editorContainerRef.current, "pointerup", handlePointerUp);
+  useEventListener(document, "mousemove", handleMouseMove);
 
   // Make sure pinch doesn't interfere with native Safari zoom
   // More info: https://use-gesture.netlify.app/docs/gestures/
-  useEventListener("gesturestart", (e) => e.preventDefault());
-  useEventListener("gesturechange", (e) => e.preventDefault());
+  useEventListener(document, "gesturestart" as any, (e) => e.preventDefault());
+  useEventListener(document, "gesturechange" as any, (e) => e.preventDefault());
 
   const zoomIn = () => zoom({ delta: zoomButtonsScaleBlock });
   const zoomOut = () => zoom({ delta: -zoomButtonsScaleBlock });

diff --git a/apps/builder/src/features/graph/components/edges/DrawingEdge.tsx b/apps/builder/src/features/graph/components/edges/DrawingEdge.tsx
@@ -107,8 +107,8 @@ export const DrawingEdge = ({ connectingIds }: Props) => {
     };
     setMousePosition(coordinates);
   };
-  useEventListener("mousemove", handleMouseMove);
-  useEventListener("mouseup", () => {
+  useEventListener(document, "mousemove", handleMouseMove);
+  useEventListener(document, "mouseup", () => {
     if (connectingIds?.target) createNewEdge(connectingIds);
     setConnectingIds(null);
   });

diff --git a/apps/builder/src/features/graph/components/endpoints/BlockSourceEndpoint.tsx b/apps/builder/src/features/graph/components/endpoints/BlockSourceEndpoint.tsx
@@ -97,22 +97,14 @@ export const BlockSourceEndpoint = ({
     [deleteSourceEndpointYOffset, id],
   );
 
-  useEventListener(
-    "pointerdown",
-    (e) => {
-      e.stopPropagation();
-      if (groupId) setConnectingIds({ source: { ...source, groupId } });
-    },
-    ref.current,
-  );
+  useEventListener(ref.current, "pointerdown", (e) => {
+    e.stopPropagation();
+    if (groupId) setConnectingIds({ source: { ...source, groupId } });
+  });
 
-  useEventListener(
-    "mousedown",
-    (e) => {
-      e.stopPropagation();
-    },
-    ref.current,
-  );
+  useEventListener(ref.current, "mousedown", (e) => {
+    e.stopPropagation();
+  });
 
   return (
     <Flex