♻️ (editor) Migrate from react-draggable to @use-gesture

Closes #168
2022-11-18 07:58:43 +01:00
parent c4a4aa3e83
commit 7632c5426c
11 changed files with 255 additions and 206 deletions
--- a/apps/builder/package.json
+++ b/apps/builder/package.json
@ -24,6 +24,7 @@
    "@dnd-kit/utilities": "3.2.0",
    "@emotion/react": "11.10.5",
    "@emotion/styled": "11.10.5",
+    "@faire/mjml-react": "2.1.4",
    "@giphy/js-fetch-api": "4.4.0",
    "@giphy/js-types": "4.2.1",
    "@giphy/react-components": "6.2.0",
@ -38,6 +39,7 @@
    "@udecode/plate-serializer-html": "18.9.0",
    "@udecode/plate-ui-link": "18.9.1",
    "@udecode/plate-ui-toolbar": "18.9.0",
+    "@use-gesture/react": "^10.2.22",
    "aws-sdk": "2.1254.0",
    "bot-engine": "workspace:*",
    "browser-image-compression": "2.0.0",
@ -46,6 +48,7 @@
    "cuid": "2.1.8",
    "deep-object-diff": "1.1.9",
    "dequal": "2.0.3",
+    "emails": "workspace:*",
    "emojilib": "3.0.7",
    "focus-visible": "5.2.0",
    "framer-motion": "7.6.6",
@ -68,7 +71,6 @@
    "qs": "6.11.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
-    "react-draggable": "4.4.5",
    "slate": "0.85.0",
    "slate-history": "0.85.0",
    "slate-hyperscript": "0.77.0",
@ -79,9 +81,7 @@
    "swr": "1.3.0",
    "tinycolor2": "1.4.2",
    "typebot-js": "workspace:*",
-    "use-debounce": "8.0.4",
-    "emails": "workspace:*",
-    "@faire/mjml-react": "2.1.4"
+    "use-debounce": "8.0.4"
  },
  "devDependencies": {
    "@babel/core": "7.20.2",
@ -102,6 +102,7 @@
    "@types/tinycolor2": "1.4.3",
    "@typescript-eslint/eslint-plugin": "5.43.0",
    "@typescript-eslint/parser": "5.43.0",
+    "configs": "workspace:*",
    "db": "workspace:*",
    "dotenv": "16.0.3",
    "eslint": "8.27.0",
@ -110,7 +111,6 @@
    "models": "workspace:*",
    "next-transpile-modules": "10.0.0",
    "typescript": "4.8.4",
-    "utils": "workspace:*",
-    "configs": "workspace:*"
+    "utils": "workspace:*"
  }
 }
--- a/apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootLogo.tsx
+++ b/apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootLogo.tsx
@ -7,20 +7,13 @@ export const ChatwootLogo = (props: IconProps) => (
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
-    <g
-      id="Square-logo"
-      stroke="none"
-      stroke-width="1"
-      fill="none"
-      fill-rule="evenodd"
-    >
-      <g id="chatwoot_logo" fill-rule="nonzero">
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="chatwoot_logo" fillRule="nonzero">
        <circle id="Oval" fill="#47A7F6" cx="256" cy="256" r="256"></circle>
        <path
          d="M362.807947,368.807947 L244.122956,368.807947 C178.699407,368.807947 125.456954,315.561812 125.456954,250.12177 C125.456954,184.703089 178.699407,131.456954 244.124143,131.456954 C309.565494,131.456954 362.807947,184.703089 362.807947,250.12177 L362.807947,368.807947 Z"
-          id="Fill-1"
          stroke="#FFFFFF"
-          stroke-width="6"
+          strokeWidth="6"
          fill="#FFFFFF"
        ></path>
      </g>
--- a/apps/builder/src/features/editor/components/EditorSettingsForm.tsx
+++ b/apps/builder/src/features/editor/components/EditorSettingsForm.tsx
@ -10,19 +10,20 @@ import {
 import { MouseIcon, LaptopIcon } from '@/components/icons'
 import { useUser } from '@/features/account'
 import { GraphNavigation } from 'db'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'

-export const EditorSettingsForm = () => {
-  const { user, saveUser } = useUser()
-  const [value, setValue] = useState<string>(
-    user?.graphNavigation ?? GraphNavigation.TRACKPAD
-  )
+type Props = {
+  defaultGraphNavigation: GraphNavigation
+}

-  useEffect(() => {
-    if (user?.graphNavigation === value) return
+export const EditorSettingsForm = ({ defaultGraphNavigation }: Props) => {
+  const { saveUser } = useUser()
+  const [value, setValue] = useState<string>(defaultGraphNavigation)
+
+  const changeEditorNavigation = (value: string) => {
+    setValue(value)
    saveUser({ graphNavigation: value as GraphNavigation }).then()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value])
+  }

  const options = [
    {
@ -43,7 +44,7 @@ export const EditorSettingsForm = () => {
  return (
    <Stack spacing={6}>
      <Heading size="md">Editor Navigation</Heading>
-      <RadioGroup onChange={setValue} value={value}>
+      <RadioGroup onChange={changeEditorNavigation} value={value}>
        <HStack spacing={4} w="full" align="stretch">
          {options.map((option) => (
            <VStack
--- a/apps/builder/src/features/editor/components/EditorSettingsModal.tsx
+++ b/apps/builder/src/features/editor/components/EditorSettingsModal.tsx
@ -1,3 +1,4 @@
+import { useUser } from '@/features/account'
 import {
  Modal,
  ModalBody,
@ -14,13 +15,17 @@ type Props = {
 }

 export const EditorSettingsModal = ({ isOpen, onClose }: Props) => {
+  const { user } = useUser()
+
  return (
    <Modal isOpen={isOpen} onClose={onClose} size="xl">
      <ModalOverlay />
      <ModalContent>
        <ModalCloseButton />
        <ModalBody pt="12" pb="8" px="8">
-          <EditorSettingsForm />
+          {user?.graphNavigation && (
+            <EditorSettingsForm defaultGraphNavigation={user.graphNavigation} />
+          )}
        </ModalBody>
      </ModalContent>
    </Modal>
--- a/apps/builder/src/features/graph/components/Endpoints/SourceEndpoint.tsx
+++ b/apps/builder/src/features/graph/components/Endpoints/SourceEndpoint.tsx
@ -39,11 +39,13 @@ export const SourceEndpoint = ({
      data-testid="endpoint"
      boxSize="32px"
      rounded="full"
-      onMouseDownCapture={handleMouseDown}
+      onPointerDownCapture={handleMouseDown}
+      onMouseDownCapture={(e) => e.stopPropagation()}
      cursor="copy"
      justify="center"
      align="center"
      pointerEvents="all"
+      className="prevent-group-drag"
      {...props}
    >
      <Flex
@ -52,6 +54,7 @@ export const SourceEndpoint = ({
        align="center"
        bgColor="gray.100"
        rounded="full"
+        pointerEvents="none"
      >
        <Flex
          boxSize="13px"
--- a/apps/builder/src/features/graph/components/Graph.tsx
+++ b/apps/builder/src/features/graph/components/Graph.tsx
@ -11,17 +11,17 @@ import {
 import { useTypebot } from '@/features/editor'
 import { DraggableBlockType, PublicTypebot, Typebot } from 'models'
 import { useDebounce } from 'use-debounce'
-import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable'
 import GraphElements from './GraphElements'
 import cuid from 'cuid'
 import { useUser } from '@/features/account'
-import { GraphNavigation } from 'db'
 import { ZoomButtons } from './ZoomButtons'
 import { AnswersCount } from '@/features/analytics'
 import { headerHeight } from '@/features/editor'
+import { useGesture } from '@use-gesture/react'
+import { GraphNavigation } from 'db'

-const maxScale = 1.5
-const minScale = 0.1
+const maxScale = 2
+const minScale = 0.3
 const zoomButtonsScaleBlock = 0.2

 export const Graph = ({
@ -85,20 +85,6 @@ export const Graph = ({
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [debouncedGraphPosition])

-  const handleMouseWheel = (e: WheelEvent) => {
-    e.preventDefault()
-    const isPinchingTrackpad = e.ctrlKey
-    user?.graphNavigation === GraphNavigation.MOUSE
-      ? zoom(-e.deltaY * 0.001, { x: e.clientX, y: e.clientY })
-      : isPinchingTrackpad
-      ? zoom(-e.deltaY * 0.01, { x: e.clientX, y: e.clientY })
-      : setGraphPosition({
-          ...graphPosition,
-          x: graphPosition.x - e.deltaX,
-          y: graphPosition.y - e.deltaY,
-        })
-  }
-
  const handleMouseUp = (e: MouseEvent) => {
    if (!typebot) return
    if (draggedItem) setDraggedItem(undefined)
@ -131,33 +117,79 @@ export const Graph = ({
    setPreviewingEdge(undefined)
  }

-  const onDrag = (_: DraggableEvent, draggableData: DraggableData) => {
-    const { deltaX, deltaY } = draggableData
+  useGesture(
+    {
+      onDrag: ({ delta: [dx, dy] }) => {
        setGraphPosition({
          ...graphPosition,
-      x: graphPosition.x + deltaX,
-      y: graphPosition.y + deltaY,
+          x: graphPosition.x + dx,
+          y: graphPosition.y + dy,
        })
+      },
+      onWheel: ({ delta: [dx, dy], pinching }) => {
+        if (pinching) return
+
+        setGraphPosition({
+          ...graphPosition,
+          x: graphPosition.x - dx,
+          y: graphPosition.y - dy,
+        })
+      },
+      onPinch: ({ origin: [x, y], offset: [scale] }) => {
+        zoom({ scale, mousePosition: { x, y } })
+      },
+    },
+    {
+      target: graphContainerRef,
+      pinch: {
+        scaleBounds: { min: minScale, max: maxScale },
+        modifierKey:
+          user?.graphNavigation === GraphNavigation.MOUSE ? null : 'ctrlKey',
+      },
+      drag: { pointer: { keys: false } },
+    }
+  )
+
+  const getCenterOfGraph = (): Coordinates => {
+    const graphWidth = graphContainerRef.current?.clientWidth ?? 0
+    const graphHeight = graphContainerRef.current?.clientHeight ?? 0
+    return {
+      x: graphWidth / 2,
+      y: graphHeight / 2,
+    }
  }

-  const zoom = (delta = zoomButtonsScaleBlock, mousePosition?: Coordinates) => {
-    const { x: mouseX, y } = mousePosition ?? { x: 0, y: 0 }
+  const zoom = ({
+    scale,
+    mousePosition,
+    delta,
+  }: {
+    scale?: number
+    delta?: number
+    mousePosition?: Coordinates
+  }) => {
+    const { x: mouseX, y } = mousePosition ?? getCenterOfGraph()
    const mouseY = y - headerHeight
-    let scale = graphPosition.scale + delta
+    let newScale = scale ?? graphPosition.scale + (delta ?? 0)
    if (
-      (scale >= maxScale && graphPosition.scale === maxScale) ||
-      (scale <= minScale && graphPosition.scale === minScale)
+      (newScale >= maxScale && graphPosition.scale === maxScale) ||
+      (newScale <= minScale && graphPosition.scale === minScale)
    )
      return
-    scale = scale >= maxScale ? maxScale : scale <= minScale ? minScale : scale
+    newScale =
+      newScale >= maxScale
+        ? maxScale
+        : newScale <= minScale
+        ? minScale
+        : newScale

    const xs = (mouseX - graphPosition.x) / graphPosition.scale
    const ys = (mouseY - graphPosition.y) / graphPosition.scale
    setGraphPosition({
      ...graphPosition,
-      x: mouseX - xs * scale,
-      y: mouseY - ys * scale,
-      scale,
+      x: mouseX - xs * newScale,
+      y: mouseY - ys * newScale,
+      scale: newScale,
    })
  }

@ -173,7 +205,6 @@ export const Graph = ({
    setAutoMoveDirection(undefined)
  }

-  useEventListener('wheel', handleMouseWheel, graphContainerRef.current)
  useEventListener('mousedown', handleCaptureMouseDown, undefined, {
    capture: true,
  })
@ -181,12 +212,15 @@ export const Graph = ({
  useEventListener('click', handleClick, editorContainerRef.current)
  useEventListener('mousemove', handleMouseMove)

-  const zoomIn = () => zoom(zoomButtonsScaleBlock)
+  // 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())

-  const zoomOut = () => zoom(-zoomButtonsScaleBlock)
+  const zoomIn = () => zoom({ delta: zoomButtonsScaleBlock })
+  const zoomOut = () => zoom({ delta: -zoomButtonsScaleBlock })

  return (
-    <DraggableCore onDrag={onDrag} enableUserSelectHack={false}>
    <Flex ref={graphContainerRef} position="relative" {...props}>
      <ZoomButtons onZoomInClick={zoomIn} onZoomOutClick={zoomOut} />
      <Flex
@ -209,7 +243,6 @@ export const Graph = ({
        />
      </Flex>
    </Flex>
-    </DraggableCore>
  )
 }

--- a/apps/builder/src/features/graph/components/Nodes/GroupNode/GroupNode.tsx
+++ b/apps/builder/src/features/graph/components/Nodes/GroupNode/GroupNode.tsx
@ -17,11 +17,11 @@ import { BlockNodesList } from '../BlockNode/BlockNodesList'
 import { isDefined, isNotDefined } from 'utils'
 import { useTypebot, RightPanel, useEditor } from '@/features/editor'
 import { GroupNodeContextMenu } from './GroupNodeContextMenu'
-import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable'
 import { PlayIcon } from '@/components/icons'
 import { useDebounce } from 'use-debounce'
 import { ContextMenu } from '@/components/ContextMenu'
 import { setMultipleRefs } from '@/utils/helpers'
+import { useDrag } from '@use-gesture/react'

 type Props = {
  group: Group
@ -31,10 +31,12 @@ type Props = {
 export const GroupNode = ({ group, groupIndex }: Props) => {
  const { updateGroupCoordinates } = useGroupsCoordinates()

-  const handleGroupDrag = useCallback((newCoord: Coordinates) => {
+  const handleGroupDrag = useCallback(
+    (newCoord: Coordinates) => {
      updateGroupCoordinates(group.id, newCoord)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+    },
+    [group.id, updateGroupCoordinates]
+  )

  return (
    <DraggableGroupNode
@ -133,40 +135,46 @@ const DraggableGroupNode = memo(
        setConnectingIds({ ...connectingIds, target: undefined })
    }

-    const onDrag = (_: DraggableEvent, draggableData: DraggableData) => {
-      const { deltaX, deltaY } = draggableData
-      const newCoord = {
-        x: currentCoordinates.x + deltaX / graphPosition.scale,
-        y: currentCoordinates.y + deltaY / graphPosition.scale,
-      }
-      setCurrentCoordinates(newCoord)
-      onGroupDrag(newCoord)
-    }
-
-    const onDragStart = () => {
-      setFocusedGroupId(group.id)
-      setIsMouseDown(true)
-    }
-
    const startPreviewAtThisGroup = () => {
      setStartPreviewAtGroup(group.id)
      setRightPanel(RightPanel.PREVIEW)
    }

-    const onDragStop = () => setIsMouseDown(false)
+    useDrag(
+      ({ first, last, offset: [offsetX, offsetY], event, target }) => {
+        event.stopPropagation()
+        if ((target as HTMLElement).classList.contains('prevent-group-drag'))
+          return
+        if (first) {
+          setFocusedGroupId(group.id)
+          setIsMouseDown(true)
+        }
+        if (last) {
+          setIsMouseDown(false)
+        }
+        const newCoord = {
+          x: offsetX / graphPosition.scale,
+          y: offsetY / graphPosition.scale,
+        }
+        setCurrentCoordinates(newCoord)
+        onGroupDrag(newCoord)
+      },
+      {
+        target: groupRef,
+        pointer: { keys: false },
+        from: () => [
+          currentCoordinates.x * graphPosition.scale,
+          currentCoordinates.y * graphPosition.scale,
+        ],
+      }
+    )
+
    return (
      <ContextMenu<HTMLDivElement>
        renderMenu={() => <GroupNodeContextMenu groupIndex={groupIndex} />}
        isDisabled={isReadOnly || isStartGroup}
      >
        {(ref, isOpened) => (
-          <DraggableCore
-            enableUserSelectHack={false}
-            onDrag={onDrag}
-            onStart={onDragStart}
-            onStop={onDragStop}
-            onMouseDown={(e) => e.stopPropagation()}
-          >
          <Stack
            ref={setMultipleRefs([ref, groupRef])}
            data-testid="group"
@ -175,9 +183,7 @@ const DraggableGroupNode = memo(
            bgColor="#ffffff"
            borderWidth="2px"
            borderColor={
-                isConnecting || isOpened || isPreviewing
-                  ? 'blue.400'
-                  : '#ffffff'
+              isConnecting || isOpened || isPreviewing ? 'blue.400' : '#ffffff'
            }
            w="300px"
            transition="border 300ms, box-shadow 200ms"
@ -208,11 +214,7 @@ const DraggableGroupNode = memo(
                px="1"
                userSelect={'none'}
              />
-                <EditableInput
-                  minW="0"
-                  px="1"
-                  onMouseDown={(e) => e.stopPropagation()}
-                />
+              <EditableInput minW="0" px="1" className="prevent-group-drag" />
            </Editable>
            {typebot && (
              <BlockNodesList
@ -234,7 +236,6 @@ const DraggableGroupNode = memo(
              onClick={startPreviewAtThisGroup}
            />
          </Stack>
-          </DraggableCore>
        )}
      </ContextMenu>
    )
--- a/apps/builder/src/features/graph/providers/GroupsCoordinateProvider.tsx
+++ b/apps/builder/src/features/graph/providers/GroupsCoordinateProvider.tsx
@ -5,6 +5,7 @@ import {
  useEffect,
  useContext,
  createContext,
+  useCallback,
 } from 'react'
 import { GroupsCoordinates, Coordinates } from './GraphProvider'

@ -40,11 +41,14 @@ export const GroupsCoordinatesProvider = ({
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [groups])

-  const updateGroupCoordinates = (groupId: string, newCoord: Coordinates) =>
+  const updateGroupCoordinates = useCallback(
+    (groupId: string, newCoord: Coordinates) =>
      setGroupsCoordinates((groupsCoordinates) => ({
        ...groupsCoordinates,
        [groupId]: newCoord,
-    }))
+      })),
+    []
+  )

  return (
    <groupsCoordinatesContext.Provider
--- a/apps/builder/src/features/graph/utils.ts
+++ b/apps/builder/src/features/graph/utils.ts
@ -136,7 +136,7 @@ const computeFourSegments = (
    sourcePosition.x + (sourceType === 'right' ? stubLength : -stubLength)
  segments.push(`L${firstSegmentX},${sourcePosition.y}`)
  const secondSegmentY =
-    sourcePosition.y + (targetPosition.y - sourcePosition.y) / 2
+    sourcePosition.y + (targetPosition.y - sourcePosition.y) - stubLength
  segments.push(`L${firstSegmentX},${secondSegmentY}`)

  segments.push(`L${targetPosition.x},${secondSegmentY}`)
--- a/apps/builder/src/features/workspace/components/WorkspaceSettingsModal.tsx
+++ b/apps/builder/src/features/workspace/components/WorkspaceSettingsModal.tsx
@ -15,7 +15,7 @@ import {
  UsersIcon,
 } from '@/components/icons'
 import { EmojiOrImageIcon } from '@/components/EmojiOrImageIcon'
-import { User, Workspace } from 'db'
+import { GraphNavigation, User, Workspace } from 'db'
 import { useState } from 'react'
 import { MembersList } from './MembersList'
 import { WorkspaceSettingsForm } from './WorkspaceSettingsForm'
@ -146,9 +146,13 @@ export const WorkspaceSettingsModal = ({
          </Flex>
        </Stack>

-        {isOpen && (
+        {isOpen && user.graphNavigation && (
          <Flex flex="1" p="10">
-            <SettingsContent tab={selectedTab} onClose={onClose} />
+            <SettingsContent
+              tab={selectedTab}
+              onClose={onClose}
+              defaultGraphNavigation={user.graphNavigation}
+            />
          </Flex>
        )}
      </ModalContent>
@ -158,16 +162,20 @@ export const WorkspaceSettingsModal = ({

 const SettingsContent = ({
  tab,
+  defaultGraphNavigation,
  onClose,
 }: {
  tab: SettingsTab
+  defaultGraphNavigation: GraphNavigation
  onClose: () => void
 }) => {
  switch (tab) {
    case 'my-account':
      return <MyAccountForm />
    case 'user-settings':
-      return <EditorSettingsForm />
+      return (
+        <EditorSettingsForm defaultGraphNavigation={defaultGraphNavigation} />
+      )
    case 'workspace-settings':
      return <WorkspaceSettingsForm onClose={onClose} />
    case 'members':
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -58,6 +58,7 @@ importers:
      '@udecode/plate-serializer-html': 18.9.0
      '@udecode/plate-ui-link': 18.9.1
      '@udecode/plate-ui-toolbar': 18.9.0
+      '@use-gesture/react': ^10.2.22
      aws-sdk: 2.1254.0
      bot-engine: workspace:*
      browser-image-compression: 2.0.0
@ -97,7 +98,6 @@ importers:
      qs: 6.11.0
      react: 18.2.0
      react-dom: 18.2.0
-      react-draggable: 4.4.5
      slate: 0.85.0
      slate-history: 0.85.0
      slate-hyperscript: 0.77.0
@ -140,6 +140,7 @@ importers:
      '@udecode/plate-serializer-html': 18.9.0_mcaxlyuolm2h3oopex5ujcsyse
      '@udecode/plate-ui-link': 18.9.1_4zvsqcrsewxwtidgbzcpvbiljy
      '@udecode/plate-ui-toolbar': 18.9.0_4zvsqcrsewxwtidgbzcpvbiljy
+      '@use-gesture/react': 10.2.22_react@18.2.0
      aws-sdk: 2.1254.0
      bot-engine: link:../../packages/bot-engine
      browser-image-compression: 2.0.0
@ -171,7 +172,6 @@ importers:
      qs: 6.11.0
      react: 18.2.0
      react-dom: 18.2.0_react@18.2.0
-      react-draggable: 4.4.5_biqbaboplfbrettd7655fr4n2y
      slate: 0.85.0
      slate-history: 0.85.0_slate@0.85.0
      slate-hyperscript: 0.77.0_slate@0.85.0
@ -6644,6 +6644,19 @@ packages:
      - scheduler
    dev: false

+  /@use-gesture/core/10.2.22:
+    resolution: {integrity: sha512-Ek0JZFYfk+hicLmoG094gm3YOuDMBNckHb988e59YOZoAkETT8dQSzT+g3QkSHSiP1m5wFXAGPSgxvOuwvGKHQ==}
+    dev: false
+
+  /@use-gesture/react/10.2.22_react@18.2.0:
+    resolution: {integrity: sha512-ECo7ig16SxBE06ENIURO1woKEB6TC8qY3a0rugJjQ2f1o0Tj28xS/eYNyJuqzQB5YT0q5IrF7ZFpbx1p/5ohYA==}
+    peerDependencies:
+      react: '>= 16.8.0'
+    dependencies:
+      '@use-gesture/core': 10.2.22
+      react: 18.2.0
+    dev: false
+
  /@webassemblyjs/ast/1.11.1:
    resolution: {integrity: sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==}
    dependencies:
@ -15489,18 +15502,6 @@ packages:
      react: 18.2.0
      scheduler: 0.23.0

-  /react-draggable/4.4.5_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==}
-    peerDependencies:
-      react: '>= 16.3.0'
-      react-dom: '>= 16.3.0'
-    dependencies:
-      clsx: 1.2.1
-      prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
-    dev: false
-
  /react-error-overlay/6.0.11:
    resolution: {integrity: sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==}
    dev: false