chore: use monorepo organization

packages/admin-ui/src/components/Tooltip.jsx

@@ -0,0 +1,121 @@
+import ClickAwayListener from '@mui/material/ClickAwayListener'
+import * as R from 'ramda'
+import React, { useState, memo } from 'react'
+import Popper from 'src/components/Popper'
+import HelpIcon from 'src/styling/icons/action/help/zodiac.svg?react'
+
+const useStyles = {
+  transparentButton: {
+    border: 'none',
+    backgroundColor: 'transparent',
+    outline: 'none',
+    cursor: 'pointer',
+    marginTop: 4
+  },
+  relativelyPositioned: {
+    position: 'relative'
+  },
+  safeSpace: {
+    position: 'absolute',
+    backgroundColor: '#0000',
+    height: 40,
+    left: '-50%',
+    width: '200%'
+  },
+  popoverContent: ({ width }) => ({
+    width,
+    padding: [[10, 15]]
+  })
+}
+
+const usePopperHandler = () => {
+  const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null)
+
+  const handleOpenHelpPopper = event => {
+    setHelpPopperAnchorEl(helpPopperAnchorEl ? null : event.currentTarget)
+  }
+
+  const openHelpPopper = event => {
+    setHelpPopperAnchorEl(event.currentTarget)
+  }
+
+  const handleCloseHelpPopper = () => {
+    setHelpPopperAnchorEl(null)
+  }
+
+  const helpPopperOpen = Boolean(helpPopperAnchorEl)
+
+  return {
+    helpPopperAnchorEl,
+    helpPopperOpen,
+    handleOpenHelpPopper,
+    openHelpPopper,
+    handleCloseHelpPopper
+  }
+}
+
+const HelpTooltip = memo(({ children, width }) => {
+  const handler = usePopperHandler(width)
+
+  return (
+    <ClickAwayListener onClickAway={handler.handleCloseHelpPopper}>
+      <div className="relative" onMouseLeave={handler.handleCloseHelpPopper}>
+        {handler.helpPopperOpen && (
+          <div className="absolute bg-transparent h-10 -left-1/2 w-[200%]"></div>
+        )}
+        <button
+          type="button"
+          className="border-0 bg-transparent outline-0 cursor-pointer mt-1"
+          onMouseEnter={handler.openHelpPopper}>
+          <HelpIcon />
+        </button>
+        <Popper
+          open={handler.helpPopperOpen}
+          anchorEl={handler.helpPopperAnchorEl}
+          arrowEnabled={true}
+          placement="bottom">
+          <div className="py-2 px-4" style={{ width }}>
+            {children}
+          </div>
+        </Popper>
+      </div>
+    </ClickAwayListener>
+  )
+})
+
+const HoverableTooltip = memo(({ parentElements, children, width }) => {
+  const handler = usePopperHandler(width)
+
+  return (
+    <ClickAwayListener onClickAway={handler.handleCloseHelpPopper}>
+      <div>
+        {!R.isNil(parentElements) && (
+          <div
+            onMouseLeave={handler.handleCloseHelpPopper}
+            onMouseEnter={handler.handleOpenHelpPopper}>
+            {parentElements}
+          </div>
+        )}
+        {R.isNil(parentElements) && (
+          <button
+            type="button"
+            onMouseEnter={handler.handleOpenHelpPopper}
+            onMouseLeave={handler.handleCloseHelpPopper}
+            className="border-0 bg-transparent outline-0 cursor-pointer mt-1">
+            <HelpIcon />
+          </button>
+        )}
+        <Popper
+          open={handler.helpPopperOpen}
+          anchorEl={handler.helpPopperAnchorEl}
+          placement="bottom">
+          <div className="py-2 px-4" style={{ width }}>
+            {children}
+          </div>
+        </Popper>
+      </div>
+    </ClickAwayListener>
+  )
+})
+
+export { HoverableTooltip, HelpTooltip }