feat(tooltip): add component

components/index.ts

@@ -45,3 +45,4 @@ export { default as Textarea } from './textarea'
 export { default as Table } from './table'
 export { default as Toggle } from './toggle'
 export { default as Snippet } from './snippet'
+export { default as Tooltip } from './tooltip'

components/tooltip/index.ts

@@ -0,0 +1,3 @@
+import Tooltip from './tooltip'
+
+export default Tooltip

components/tooltip/placement.ts

@@ -0,0 +1,172 @@
+import { Placement } from '../utils/prop-types'
+
+interface ParentDomRect {
+  top: number
+  left: number
+  right: number
+  bottom: number
+  width: number
+  height: number
+}
+
+export interface TooltipPosition {
+  top: string
+  left: string
+  transform: string
+}
+
+export const defaultTooltipPosition = {
+  top: '-1000px',
+  left: '-1000px',
+  transform: 'none',
+}
+
+export interface TooltipIconPosition {
+  top: string
+  left: string
+  right: string
+  bottom: string
+  transform: string
+}
+
+export const getPosition = (
+  placement: Placement,
+  rect: ParentDomRect,
+  offset: number,
+): TooltipPosition => {
+  const positions: { [key in Placement]: TooltipPosition } = {
+    top: {
+      top: `${rect.top - offset}px`,
+      left: `${rect.left + rect.width / 2}px`,
+      transform: 'translate(-50%, -100%)',
+    },
+    topStart: {
+      top: `${rect.top - offset}px`,
+      left: `${rect.left}px`,
+      transform: 'translate(0, -100%)',
+    },
+    topEnd: {
+      top: `${rect.top - offset}px`,
+      left: `${rect.left + rect.width}px`,
+      transform: 'translate(-100%, -100%)',
+    },
+    bottom: {
+      top: `${rect.bottom + offset}px`,
+      left: `${rect.left + rect.width / 2}px`,
+      transform: 'translate(-50%, 0)',
+    },
+    bottomStart: {
+      top: `${rect.bottom + offset}px`,
+      left: `${rect.left}px`,
+      transform: 'translate(0, 0)',
+    },
+    bottomEnd: {
+      top: `${rect.bottom + offset}px`,
+      left: `${rect.left + rect.width}px`,
+      transform: 'translate(-100%, 0)',
+    },
+    left: {
+      top: `${rect.top + rect.height / 2}px`,
+      left: `${rect.left - offset}px`,
+      transform: 'translate(-100%, -50%)',
+    },
+    leftStart: {
+      top: `${rect.top}px`,
+      left: `${rect.left - offset}px`,
+      transform: 'translate(-100%, 0)',
+    },
+    leftEnd: {
+      top: `${rect.top + rect.height}px`,
+      left: `${rect.left - offset}px`,
+      transform: 'translate(-100%, -100%)',
+    },
+    right: {
+      top: `${rect.top + rect.height / 2}px`,
+      left: `${rect.right + offset}px`,
+      transform: 'translate(0, -50%)',
+    },
+    rightStart: {
+      top: `${rect.top}px`,
+      left: `${rect.right + offset}px`,
+      transform: 'translate(0, 0)',
+    },
+    rightEnd: {
+      top: `${rect.top + rect.height}px`,
+      left: `${rect.right + offset}px`,
+      transform: 'translate(0, -100%)',
+    },
+  }
+  return positions[placement] || positions.top as TooltipPosition
+}
+
+export const getIconPosition = (
+  placement: Placement,
+  offset: number,
+): TooltipIconPosition => {
+  const positions: { [key in Placement]?: TooltipIconPosition } = {
+    top: {
+      top: 'auto', right: 'auto',
+      left: '50%', bottom: `${offset}px`,
+      transform: 'translate(-50%, 100%) rotate(-90deg)'
+    },
+    topStart: {
+      top: 'auto', right: 'auto',
+      left: '5%', bottom: `${offset}px`,
+      transform: 'translate(0, 100%) rotate(-90deg)'
+    },
+    topEnd: {
+      top: 'auto', right: '5%',
+      left: 'auto', bottom: `${offset}px`,
+      transform: 'translate(0, 100%) rotate(-90deg)'
+    },
+    bottom: {
+      top: `${offset}px`, right: 'auto',
+      left: '50%', bottom: 'auto',
+      transform: 'translate(-50%, -100%) rotate(90deg)'
+    },
+    bottomStart: {
+      top: `${offset}px`, right: 'auto',
+      left: '5%', bottom: 'auto',
+      transform: 'translate(0, -100%) rotate(90deg)'
+    },
+    bottomEnd: {
+      top: `${offset}px`, right: '5%',
+      left: 'auto', bottom: 'auto',
+      transform: 'translate(0, -100%) rotate(90deg)'
+    },
+    left: {
+      top: '50%', right: '0',
+      left: 'auto', bottom: 'auto',
+      transform: 'translate(100%, -50%) rotate(180deg)'
+    },
+    leftStart: {
+      top: '10%', right: '0',
+      left: 'auto', bottom: 'auto',
+      transform: 'translate(100%, 0) rotate(180deg)'
+    },
+    leftEnd: {
+      top: 'auto', right: '0',
+      left: 'auto', bottom: '10%',
+      transform: 'translate(100%, 0) rotate(180deg)'
+    },
+    right: {
+      top: '50%', right: 'auto',
+      left: '0', bottom: 'auto',
+      transform: 'translate(-100%, -50%) rotate(0deg)'
+    },
+    rightStart: {
+      top: '10%', right: 'auto',
+      left: '0', bottom: 'auto',
+      transform: 'translate(-100%, 0) rotate(0deg)'
+    },
+    rightEnd: {
+      top: 'auto', right: 'auto',
+      left: '0', bottom: '10%',
+      transform: 'translate(-100%, 0) rotate(0deg)'
+    },
+  }
+  
+  return positions[placement] || positions.top as TooltipIconPosition
+}
+
+

components/tooltip/tooltip-content.tsx

@@ -0,0 +1,110 @@
+import React, { MutableRefObject, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import useTheme from '../styles/use-theme'
+import usePortal from '../utils/use-portal'
+import useResize from '../utils/use-resize'
+import CSSTransition from '../shared/css-transition'
+import useClickAnyWhere from '../utils/use-click-anywhere'
+import { getPosition, TooltipPosition, defaultTooltipPosition } from './placement'
+import TooltipIcon from './tooltip-icon'
+import { Placement } from '../utils/prop-types'
+
+interface Props {
+  parent?: MutableRefObject<HTMLElement | null> | undefined
+  placement: Placement
+  visible: boolean
+  offset: number
+  bgColor: string
+}
+
+interface ReactiveDomReact {
+  top: number
+  bottom: number
+  left: number
+  right: number
+  width: number
+  height: number
+}
+
+const defaultRect: ReactiveDomReact = {
+  top: -1000,
+  left: -1000,
+  right: -1000,
+  bottom: -1000,
+  width: 0,
+  height: 0,
+}
+
+const getRect = (ref: MutableRefObject<HTMLElement | null>): ReactiveDomReact => {
+  if (!ref || !ref.current) return defaultRect
+  const rect = ref.current.getBoundingClientRect()
+  return {
+    ...rect,
+    width: rect.width || (rect.right - rect.left),
+    height: rect.height || (rect.bottom - rect.top),
+    top: rect.top + document.documentElement.scrollTop,
+    bottom: rect.bottom + document.documentElement.scrollTop,
+    left: rect.left + document.documentElement.scrollLeft,
+    right: rect.right + document.documentElement.scrollLeft,
+  }
+}
+
+const TooltipContent: React.FC<React.PropsWithChildren<Props>> = React.memo(({
+  children, parent, visible, offset, placement, bgColor,
+}) => {
+  const theme = useTheme()
+  const el = usePortal('tooltip')
+  const selfRef = useRef<HTMLDivElement>(null)
+  const [rect, setRect] = useState<TooltipPosition>(defaultTooltipPosition)
+  if (!parent) return null
+
+  const updateRect = () => {
+    const position = getPosition(placement, getRect(parent), offset)
+    setRect(position)
+  }
+
+  useResize(updateRect)
+  useClickAnyWhere(() => updateRect())
+
+  const preventHandler = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation()
+    event.preventDefault()
+    event.nativeEvent.stopImmediatePropagation()
+  }
+
+  if (!el) return null
+  return createPortal((
+    <CSSTransition visible={visible}>
+      <div className="tooltip-content" ref={selfRef}
+        onClick={preventHandler}
+        onMouseEnter={preventHandler}
+        onMouseLeave={preventHandler}>
+        <div className="inner">
+          <TooltipIcon placement={placement} bgColor={bgColor} />
+          {children}
+        </div>
+        <style jsx>{`
+        .tooltip-content {
+          position: absolute;
+          width: auto;
+          top: ${rect.top};
+          left: ${rect.left};
+          transform: ${rect.transform};
+          background-color: ${bgColor};
+          color: ${theme.palette.background};
+          border-radius: ${theme.layout.radius};
+          padding: 0;
+          z-index: 1000;
+        }
+        
+        .inner {
+          padding: ${theme.layout.gapHalf} ${theme.layout.gap};
+          position: relative;
+        }
+      `}</style>
+      </div>
+    </CSSTransition>
+  ), el)
+})
+
+export default TooltipContent

components/tooltip/tooltip-icon.tsx

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react'
+import { getIconPosition } from './placement'
+import { Placement } from '../utils/prop-types'
+
+interface Props {
+  placement: Placement
+  bgColor: string
+}
+
+const TooltipIcon: React.FC<Props> = ({
+  placement, bgColor,
+}) => {
+  const {
+    transform, top, left, right, bottom,
+  } = useMemo(() => getIconPosition(placement, 3), [placement])
+  
+  return (
+    <span>
+      <style jsx>{`
+        span {
+          width: 0;
+          height: 0;
+          border-style: solid;
+          border-width: 6px 7px 6px 0;
+          border-color: transparent ${bgColor} transparent transparent;
+          position: absolute;
+          left: ${left};
+          top: ${top};
+          right: ${right};
+          bottom: ${bottom};
+          transform: ${transform};
+        }
+      `}</style>
+    </span>
+  )
+}
+
+export default TooltipIcon

components/tooltip/tooltip.tsx

@@ -0,0 +1,109 @@
+import React, { useMemo, useRef, useState } from 'react'
+import useTheme from '../styles/use-theme'
+import withDefaults from '../utils/with-defaults'
+import TooltipContent from './tooltip-content'
+import useClickAway from '../utils/use-click-away'
+import { ZeitUIThemesPalette } from 'components/styles/themes'
+import { TriggerTypes, Placement, NormalTypes } from '../utils/prop-types'
+
+interface Props {
+  text: string | React.ReactNode
+  type?: NormalTypes
+  placement?: Placement
+  initialVisible?: boolean
+  trigger?: TriggerTypes
+  enterDelay?: number
+  leaveDelay?: number
+  offset?: number
+}
+
+const defaultProps = {
+  initialVisible: false,
+  type: 'default' as NormalTypes,
+  trigger: 'hover' as TriggerTypes,
+  placement: 'top',
+  enterDelay: 100,
+  leaveDelay: 300,
+  offset: 12,
+}
+
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type TooltipProps = Props & typeof defaultProps & NativeAttrs
+
+const getBgColor = (
+  type: NormalTypes,
+  palette: ZeitUIThemesPalette,
+) => {
+  const colors: { [key in NormalTypes ]: string } = {
+    default: palette.foreground,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    secondary: palette.secondary,
+  }
+  return colors[type]
+}
+
+const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
+  children, initialVisible, text, offset, placement,
+  enterDelay, leaveDelay, trigger, type,
+}) => {
+  const theme = useTheme()
+  const timer = useRef<number>()
+  const ref = useRef<HTMLDivElement>(null)
+  const [visible, setVisible] = useState<boolean>(initialVisible)
+  const bgColor = useMemo(() => getBgColor(type, theme.palette), [type, theme.palette])
+  
+  const changeVisible = (nextState: boolean) => {
+    const clear = () => {
+      clearTimeout(timer.current)
+      timer.current = undefined
+    }
+    if (nextState) {
+      timer.current = window.setTimeout(() => {
+        setVisible(true)
+        clear()
+      }, enterDelay)
+    } else {
+      clear()
+      timer.current = window.setTimeout(() => {
+        setVisible(false)
+        clear()
+      }, leaveDelay)
+    }
+  }
+  const mouseEventHandler = (nextState: boolean) => {
+    if (trigger !== 'hover') return
+    changeVisible(nextState)
+  }
+  const clickEventHandler = () => {
+    if (trigger !== 'click') return
+    changeVisible(!visible)
+  }
+  
+  useClickAway(ref, () => {
+    if (trigger !== 'click') return
+    changeVisible(false)
+  })
+  
+  return (
+    <div ref={ref} className="tooltip" onClick={clickEventHandler}
+      onMouseEnter={() => mouseEventHandler(true)}
+      onMouseLeave={() => mouseEventHandler(false)}>
+      {children}
+      <TooltipContent parent={ref} visible={visible}
+        offset={offset}
+        bgColor={bgColor}
+        placement={placement}>
+        {text}
+      </TooltipContent>
+      <style jsx>{`
+        .tooltip {
+          width: min-content;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default withDefaults(Tooltip, defaultProps)

components/utils/prop-types.ts

@@ -46,6 +46,26 @@ const copyTypes = tuple(
   'prevent',
 )
 
+const triggerTypes = tuple(
+  'hover',
+  'click',
+)
+
+const placement = tuple(
+  'top',
+  'topStart',
+  'topEnd',
+  'left',
+  'leftStart',
+  'leftEnd',
+  'bottom',
+  'bottomStart',
+  'bottomEnd',
+  'right',
+  'rightStart',
+  'rightEnd',
+)
+
 export type ButtonTypes = typeof buttonTypes[number]
 
 export type NormalSizes = typeof normalSizes[number]
@@ -57,3 +77,7 @@ export type ThemeTypes = typeof themeTypes[number]
 export type SnippetTypes = typeof snippetTypes[number]
 
 export type CopyTypes = typeof copyTypes[number]
+
+export type TriggerTypes = typeof triggerTypes[number]
+
+export type Placement = typeof placement[number]