Advance TypeDoc doc rendering

Author: kossnocorp

package.json

@@ -14,7 +14,7 @@
     "start": "env NODE_ENV=development ts-node -r tsconfig-paths/register devServer.ts"
   },
   "dependencies": {
-    "@date-fns/docs": "0.21.1",
+    "@date-fns/docs": "0.22.0",
     "@sentry/browser": "^5.30.0",
     "@sentry/tracing": "^5.30.0",
     "@switcher/preact": "2.3.0",

src/ui/components/DocHeader/styles.css.ts

@@ -2,4 +2,7 @@ import { style } from '@vanilla-extract/css'
 
 export const header = style({
   fontFamily: 'monospace',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
 })

src/ui/components/Drop/index.tsx

@@ -0,0 +1,200 @@
+import classNames from 'classnames'
+import isEqual from 'lodash/isEqual'
+import { ComponentChildren, h, JSX, RefObject } from 'preact'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+
+import * as styles from './styles.css'
+
+export const DropInner = Inner
+
+export interface DropArea {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export type DropPosition = 'above' | 'below' | 'left' | 'right'
+
+export interface DropProps {
+  children: ComponentChildren
+  area: DropArea
+  ghost?: boolean
+  innerRef?: RefObject<HTMLDivElement | undefined>
+  onClick?: JSX.MouseEventHandler<any>
+  preferPosition?: DropPosition
+}
+
+/**
+ * Floating popup, used for dropdown menus, tooltips, etc.
+ */
+export function Drop({
+  area,
+  children,
+  ghost,
+  innerRef,
+  onClick,
+  preferPosition,
+}: DropProps) {
+  const [trianglePosition, setTrianglePosition] = useState<TrianglePosition>(
+    'below'
+  )
+
+  const [wrapper, setWrapper] = useState<HTMLDivElement | undefined>(undefined)
+  const [wrapperArea, setWrapperArea] = useState<DropArea | undefined>(
+    undefined
+  )
+
+  useEffect(() => {
+    if (!wrapper || !wrapperArea?.width) return
+
+    const windowWidth = window.innerWidth
+    const windowHeight = window.innerHeight
+    const width = wrapperArea.width
+    const height = wrapperArea.height
+
+    wrapper.style.opacity = '1'
+
+    let verticalLeft = area.x + area.width / 2 - width / 2
+    if (verticalLeft < 0) verticalLeft = 0
+    else if (verticalLeft + width > windowWidth)
+      verticalLeft = windowWidth - width
+
+    let horizontalTop = area.y + area.height / 2 - height / 2
+    if (horizontalTop < 0) horizontalTop = 0
+    else if (horizontalTop + height > windowHeight)
+      horizontalTop = windowHeight - height
+
+    const positioning = {
+      below: () => {
+        const belowTop = area.y + area.height
+        if (belowTop + height < windowHeight) {
+          wrapper.style.top = `${belowTop}px`
+          wrapper.style.left = `${verticalLeft}px`
+          setTrianglePosition('above')
+          return true
+        }
+      },
+
+      above: () => {
+        const aboveTop = area.y - height
+        if (aboveTop > 0) {
+          wrapper.style.top = `${aboveTop}px`
+          wrapper.style.left = `${verticalLeft}px`
+          setTrianglePosition('below')
+          return true
+        }
+      },
+
+      left: () => {
+        const left = area.x - width
+        if (left > 0) {
+          wrapper.style.top = `${horizontalTop}px`
+          wrapper.style.left = `${left}px`
+          setTrianglePosition('right')
+          return true
+        }
+      },
+
+      right: () => {
+        const right = area.x + area.width
+        if (right + width < windowWidth) {
+          wrapper.style.top = `${horizontalTop}px`
+          wrapper.style.left = `${right}px`
+          setTrianglePosition('left')
+          return true
+        }
+      },
+    }
+
+    if (preferPosition === 'left') {
+      circlePositioning([positioning.left, positioning.right])
+    } else if (preferPosition === 'right') {
+      circlePositioning([positioning.right, positioning.left])
+    } else if (preferPosition === 'above') {
+      circlePositioning([positioning.above, positioning.below])
+    } else {
+      circlePositioning([positioning.below, positioning.above])
+    }
+  }, [
+    trianglePosition,
+    wrapper,
+    wrapperArea?.width,
+    wrapperArea?.height,
+    area.x,
+    area.width,
+    area.y,
+    area.height,
+    preferPosition,
+  ])
+
+  const wrapperCallback = useCallback(
+    (el: HTMLDivElement | null) => {
+      if (!el) return
+      if (innerRef) innerRef.current = el
+      setWrapper(el)
+    },
+    [innerRef]
+  )
+
+  useEffect(() => {
+    const newArea = wrapper?.getBoundingClientRect()
+    if (!isEqual(newArea, wrapperArea)) setWrapperArea(newArea)
+  })
+
+  return (
+    <div
+      class={classNames(
+        styles.drop,
+        ghost && styles.ghost,
+        ['above', 'below'].includes(trianglePosition) && styles.vertical
+      )}
+      ref={wrapperCallback}
+      onClick={onClick}
+    >
+      {(trianglePosition === 'above' || trianglePosition === 'left') && (
+        <Triangle position={trianglePosition} />
+      )}
+
+      <Inner>
+        {typeof children === 'string' ? (
+          <div class={styles.string}>{children}</div>
+        ) : (
+          children
+        )}
+      </Inner>
+
+      {(trianglePosition === 'below' || trianglePosition === 'right') && (
+        <Triangle position={trianglePosition} />
+      )}
+    </div>
+  )
+}
+
+function circlePositioning(fns: Array<() => void | boolean>) {
+  for (let i = 0; i < fns.length; i++) {
+    if (fns[i]?.()) return
+  }
+}
+
+export type TrianglePosition = 'above' | 'below' | 'left' | 'right'
+
+interface TriangleProps {
+  position: TrianglePosition
+}
+
+function Triangle(position: TriangleProps) {
+  return (
+    <div
+      class={classNames(styles.triangle, styles.position[position.position])}
+    ></div>
+  )
+}
+
+interface InnerProps {
+  children: ComponentChildren
+}
+
+function Inner({ children }: InnerProps) {
+  return <div class={classNames(styles.inner)}>{children} </div>
+}

src/ui/components/Drop/styles.css.ts

@@ -0,0 +1,57 @@
+import { style, styleVariants } from '@vanilla-extract/css'
+
+export const drop = style({
+  position: 'fixed',
+  opacity: 0,
+  transition: 'opacity 150ms',
+  zIndex: 20,
+  maxWidth: '30rem',
+  display: 'flex',
+  alignItems: 'center',
+})
+
+export const vertical = style({
+  flexDirection: 'column',
+})
+
+export const ghost = style({
+  pointerEvents: 'none',
+})
+
+export const triangle = style({
+  background: 'var(--color-tooltip-canvas)',
+  width: '0.75rem',
+  height: '0.5rem',
+  position: 'relative',
+  marginBottom: '-1px',
+})
+
+export const position = styleVariants({
+  above: {
+    clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)',
+  },
+
+  below: {
+    clipPath: 'polygon(50% 100%, 0 0, 100% 0)',
+  },
+
+  left: {
+    clipPath: 'polygon(0 50%, 100% 100%, 100% 0)',
+  },
+
+  right: {
+    clipPath: 'polygon(0 0, 0 100%, 100% 50%)',
+  },
+})
+
+export const inner = style({
+  background: 'var(--color-tooltip-canvas)',
+  color: 'var(--color-tooltip-ink)',
+  borderRadius: '3px',
+  overflow: 'hidden',
+  textAlign: 'center',
+})
+
+export const string = style({
+  padding: '0.5rem',
+})

src/ui/components/IdHighlight/index.tsx

@@ -0,0 +1,75 @@
+import { match } from 'assert'
+import { FunctionComponent, h } from 'preact'
+import { useEffect, useRef } from 'preact/hooks'
+import * as styles from './styles.css'
+
+interface IdHightlightProps {
+  id: string | undefined
+  match?: (id: string, hash: string) => boolean
+}
+
+export const IdHightlight: FunctionComponent<IdHightlightProps> = ({
+  id,
+  children,
+  match,
+}) => {
+  const spanRef = useRef<HTMLSpanElement>(null)
+  const stopAnimation = useRef<() => void>()
+
+  useEffect(() => {
+    if (!id || spanRef.current === null) return
+
+    const skip = match
+      ? !match(id, location.hash)
+      : location.hash.slice(1) !== id
+    if (skip) return
+
+    stopAnimation.current?.()
+
+    const span = spanRef.current
+
+    !isInViewport(span) && span.scrollIntoView({ behavior: 'smooth' })
+
+    const cbOut = () => {
+      span.removeEventListener('transitionend', cbOut)
+
+      span.classList.remove(styles.highlightIn)
+      span.classList.remove(styles.highlightOut)
+
+      stopAnimation.current = undefined
+    }
+
+    const cbIn = () => {
+      span.removeEventListener('transitionend', cbIn)
+
+      span.addEventListener('transitionend', cbOut)
+      span.classList.add(styles.highlightOut)
+    }
+
+    stopAnimation.current = () => {
+      span.removeEventListener('transitionend', cbIn)
+      cbOut()
+      stopAnimation.current = undefined
+    }
+
+    spanRef.current.addEventListener('transitionend', cbIn)
+    span.classList.add(styles.highlightIn)
+  }, [id, location.hash, spanRef.current])
+
+  return (
+    <span ref={spanRef} class={styles.text}>
+      {children}
+    </span>
+  )
+}
+
+function isInViewport(element: HTMLElement): boolean {
+  const rect = element.getBoundingClientRect()
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <=
+      (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  )
+}

src/ui/components/IdHighlight/styles.css.ts

@@ -0,0 +1,15 @@
+import { style } from '@vanilla-extract/css'
+
+export const text = style({
+  backgroundColor: '#fffe2500',
+})
+
+export const highlightIn = style({
+  backgroundColor: '#fffe25',
+  transition: 'background-color 0.25s ease-out',
+})
+
+export const highlightOut = style({
+  backgroundColor: '#fffe2500',
+  transition: 'background-color 2.5s ease-out',
+})

src/ui/components/Missing/index.tsx

@@ -0,0 +1,19 @@
+import { Fragment, FunctionComponent, h } from 'preact'
+
+interface MissingProps {
+  data?: unknown
+  message?: string
+}
+
+export const Missing: FunctionComponent<MissingProps> = ({ message, data }) => (
+  <div
+    onClick={(e) => {
+      if (e.shiftKey) console.log(data)
+    }}
+  >
+    <div>
+      {message ? message + ' ' : ''}If you see this,{' '}
+      <a href="https://twitter.com/kossnocorp">ping me</a>.
+    </div>
+  </div>
+)