feat: tooltip foundation (#2950)

* feat: add foundation for tooltips

* fix: add lang

* refactor: remove React import where no longer necessary

src/components/Common/Accordion/index.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react';
+import type * as React from 'react';
 import { useState } from 'react';
 import AnimateHeight from 'react-animate-height';
 
 export interface AccordionProps {
-  children: (args: AccordionChildProps) => React.ReactElement<any, any> | null;
+  children: (args: AccordionChildProps) => JSX.Element;
   /** If true, only one accordion item can be open at any time */
   single?: boolean;
   /** If true, at least one accordion item will always be open */
@@ -13,7 +13,7 @@ export interface AccordionProps {
 export interface AccordionChildProps {
   openIndexes: number[];
   handleClick(index: number): void;
-  AccordionContent: any;
+  AccordionContent: typeof AccordionContent;
 }
 
 type AccordionContentProps = {

src/components/Common/Alert/index.tsx

@@ -3,7 +3,6 @@ import {
   InformationCircleIcon,
   XCircleIcon,
 } from '@heroicons/react/solid';
-import React from 'react';
 
 interface AlertProps {
   title?: React.ReactNode;

src/components/Common/Badge/index.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import React from 'react';
 
 interface BadgeProps {
   badgeType?: 'default' | 'primary' | 'danger' | 'warning' | 'success';

src/components/Common/Button/index.tsx

@@ -1,5 +1,5 @@
-import type { ForwardedRef } from 'react';
 import React from 'react';
+import type { ForwardedRef } from 'react';
 
 export type ButtonType =
   | 'default'

src/components/Common/ButtonWithDropdown/index.tsx

@@ -1,10 +1,6 @@
 import { ChevronDownIcon } from '@heroicons/react/solid';
-import type {
-  AnchorHTMLAttributes,
-  ButtonHTMLAttributes,
-  ReactNode,
-} from 'react';
-import React, { useRef, useState } from 'react';
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { useRef, useState } from 'react';
 import useClickOutside from '../../../hooks/useClickOutside';
 import { withProperties } from '../../../utils/typeHelpers';
 import Transition from '../../Transition';
@@ -41,8 +37,8 @@ const DropdownItem = ({
 
 interface ButtonWithDropdownProps
   extends ButtonHTMLAttributes<HTMLButtonElement> {
-  text: ReactNode;
-  dropdownIcon?: ReactNode;
+  text: React.ReactNode;
+  dropdownIcon?: React.ReactNode;
   buttonType?: 'primary' | 'ghost';
 }
 

src/components/Common/CachedImage/index.tsx

@@ -1,6 +1,6 @@
 import type { ImageProps } from 'next/image';
 import Image from 'next/image';
-import React from 'react';
+
 import useSettings from '../../../hooks/useSettings';
 
 /**

src/components/Common/ConfirmButton/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import useClickOutside from '../../../hooks/useClickOutside';
 import Button from '../Button';
 

src/components/Common/Header/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface HeaderProps {
   extraMargin?: number;
   subtext?: React.ReactNode;

src/components/Common/List/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { withProperties } from '../../../utils/typeHelpers';
 
 interface ListItemProps {

src/components/Common/ListView/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useIntl } from 'react-intl';
 import type {
   MovieResult,

src/components/Common/LoadingSpinner/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export const SmallLoadingSpinner = () => {
   return (
     <div className="inset-0 flex h-full w-full items-center justify-center text-gray-200">

src/components/Common/Modal/index.tsx

@@ -1,5 +1,5 @@
-import type { MouseEvent, ReactNode } from 'react';
-import React, { useRef } from 'react';
+import type { MouseEvent } from 'react';
+import { useRef } from 'react';
 import ReactDOM from 'react-dom';
 import { useIntl } from 'react-intl';
 import useClickOutside from '../../../hooks/useClickOutside';
@@ -30,10 +30,10 @@ interface ModalProps {
   tertiaryButtonType?: ButtonType;
   disableScrollLock?: boolean;
   backgroundClickable?: boolean;
-  iconSvg?: ReactNode;
+  iconSvg?: React.ReactNode;
   loading?: boolean;
   backdrop?: string;
-  children?: ReactNode;
+  children?: React.ReactNode;
 }
 
 const Modal = ({

src/components/Common/PageTitle/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import useSettings from '../../../hooks/useSettings';
 import Head from 'next/head';
 

src/components/Common/PlayButton/index.tsx

@@ -1,5 +1,3 @@
-import type { ReactNode } from 'react';
-import React from 'react';
 import ButtonWithDropdown from '../ButtonWithDropdown';
 
 interface PlayButtonProps {
@@ -9,7 +7,7 @@ interface PlayButtonProps {
 export interface PlayButtonLink {
   text: string;
   url: string;
-  svg: ReactNode;
+  svg: React.ReactNode;
 }
 
 const PlayButton = ({ links }: PlayButtonProps) => {

src/components/Common/ProgressCircle/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 interface ProgressCircleProps {
   className?: string;

src/components/Common/SensitiveInput/index.tsx

@@ -1,6 +1,7 @@
 import { EyeIcon, EyeOffIcon } from '@heroicons/react/solid';
 import { Field } from 'formik';
-import React, { useState } from 'react';
+
+import { useState } from 'react';
 
 interface CustomInputProps extends React.ComponentProps<'input'> {
   as?: 'input';

src/components/Common/SettingsTabs/index.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React from 'react';
+
 import type { Permission } from '../../../../server/lib/permissions';
 import { hasPermission } from '../../../../server/lib/permissions';
 import { useUser } from '../../../hooks/useUser';

src/components/Common/SlideOver/index.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { XIcon } from '@heroicons/react/outline';
-import React, { useEffect, useRef, useState } from 'react';
+
+import { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
 import Transition from '../../Transition';

src/components/Common/Table/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { withProperties } from '../../../utils/typeHelpers';
 
 type TBodyProps = {

src/components/Common/Tooltip/index.tsx

@@ -0,0 +1,36 @@
+import { usePopperTooltip } from 'react-popper-tooltip';
+import type { Config } from 'react-popper-tooltip';
+
+type TooltipProps = {
+  content: React.ReactNode;
+  children: React.ReactNode;
+  tooltipConfig?: Config;
+};
+
+const Tooltip = ({ children, content, tooltipConfig }: TooltipProps) => {
+  const { getTooltipProps, setTooltipRef, setTriggerRef, visible } =
+    usePopperTooltip({
+      followCursor: true,
+      placement: 'left-end',
+      ...tooltipConfig,
+    });
+
+  return (
+    <>
+      <div ref={setTriggerRef}>{children}</div>
+      {visible && (
+        <div
+          ref={setTooltipRef}
+          {...getTooltipProps({
+            className:
+              'bg-gray-800 px-2 py-1 rounded border border-gray-600 shadow text-gray-100',
+          })}
+        >
+          {content}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Tooltip;