@dbosoft/nextjs-uicore 1.0.0

package/src/tabs/partials/tab-triggers/index.tsx

@@ -0,0 +1,241 @@
+import React, { MouseEventHandler, useCallback, useEffect, useRef, useState } from 'react'
+import classNames from 'classnames'
+import InlineSvg from '@dbosoft/react-inline-svg'
+import TabTrigger, { TabTriggerType } from '../tab-trigger'
+import SvgChevronRight from '../../icons/chevron-right.svg'
+import smoothScroll from '../../utils/smooth-scroll.js'
+import useWindowSize from '../../hooks/use-window-size'
+import useScrollLeft from '../../hooks/use-scroll-left'
+import s from './style.module.scss'
+
+interface TabTriggersProps {
+  tabs: TabTriggerType[]
+  activeTabIdx: number
+  setActiveTab: (tabIndex: number, tabGroup?: string) => void
+  centered: boolean
+  fullWidthBorder: boolean
+}
+
+function TabTriggers({
+  tabs,
+  activeTabIdx,
+  setActiveTab,
+  centered,
+  fullWidthBorder,
+}: TabTriggersProps): React.ReactElement {
+  const overflowBaseRef = useRef(null) as $TSFixMe
+  const overflowContentRef = useRef(null) as $TSFixMe
+  const windowSize = useWindowSize()
+  const [scrollRef, scrollLeft] = useScrollLeft()
+  const [hiddenArrows, setHiddenArrows] = useState({
+    prev: true,
+    next: true,
+  })
+  const [hasOverflow, setHasOverflow] = useState(false)
+
+  /**
+   * update hasOverflow when window is resized
+   */
+  useEffect(() => {
+    //  If content width exceeds available space,
+    //  set to overflow-friendly styling
+    const contentWidth = overflowContentRef.current.offsetWidth
+    const availableSpace = overflowBaseRef.current.offsetWidth
+    setHasOverflow(contentWidth > availableSpace)
+  }, [scrollRef, windowSize])
+
+  /**
+   * update visibility of next & prev arrows.
+   *
+   * depends on both scroll position, as
+   * fully scrolling to one end should hide
+   * the arrow at that end of the container,
+   *
+   * and depends on window size, as
+   * window size changes can affect both
+   * overflow and scroll position
+   */
+  useEffect(() => {
+    // Determine which arrows to show
+    const { scrollLeft, scrollWidth, offsetWidth } = scrollRef.current
+    const maxScrollLeft = scrollWidth - offsetWidth
+    const hidePrev = scrollLeft === 0
+    const hideNext = scrollLeft >= maxScrollLeft
+    setHiddenArrows({ prev: hidePrev, next: hideNext })
+  }, [scrollLeft, scrollRef, windowSize])
+
+  /**
+   * smooth scroll to the active tab.
+   * this is done both when the activeTabIdx updates,
+   * and when the next or previous arrow is clicked but
+   * does not cause an activeTabIdx update
+   */
+  const updateScrollOffset = useCallback(
+    (targetTabIdx) => {
+      const scrollElem = scrollRef.current
+      // Determine where to scroll to
+      let newScrollLeft
+      if (targetTabIdx === 0) {
+        // If first tab, scroll to start of container
+        newScrollLeft = -1
+      } else {
+        // Otherwise, calculate the midpoint of the active tab trigger
+        const targetSelector = `[data-tabindex='${targetTabIdx}']`
+        const targetElem = scrollElem.querySelector(targetSelector)
+        const targetMidpoint =
+          targetElem.offsetLeft + targetElem.offsetWidth / 2
+        newScrollLeft = targetMidpoint - scrollElem.offsetWidth / 2
+      }
+      // Update the scroll position
+      const windowElem = scrollElem.closest('html').parentNode.defaultView
+      smoothScroll(windowElem, scrollElem, { x: newScrollLeft })
+    },
+    [scrollRef]
+  )
+
+  /**
+   * automatically smoothly scroll to center
+   * the active tab in the scroll-able area
+   */
+  useEffect(() => {
+    if (!hasOverflow) return
+    updateScrollOffset(activeTabIdx)
+  }, [hasOverflow, activeTabIdx, updateScrollOffset, scrollRef])
+
+  return (
+    <div
+      className={classNames(s.root, { [s.fullWidthBorder]: fullWidthBorder })}
+    >
+      <div className="g-grid-container">
+        {/* Note: the overflowBaseRef element has zero height, but is still "visible".
+            It is used to determine when tabs are overflowing, and updates hasOverflow */}
+        <div ref={overflowBaseRef}></div>
+      </div>
+      <div className={s.borderAdjuster}>
+        <NextPrevScrims hasOverflow={hasOverflow} hiddenArrows={hiddenArrows} />
+        <div
+          className={classNames(s.scrollContainer, {
+            [s.centered]: centered,
+            [s.hasOverflow]: hasOverflow,
+          })}
+          ref={scrollRef}
+        >
+          <div
+            className={classNames(s.tabsWidthContainer, {
+              [s.centered]: centered,
+              [s.hasOverflow]: hasOverflow,
+            })}
+            ref={overflowContentRef}
+          >
+            {tabs.map((tab, stableIdx) => (
+              <TabTrigger
+                // This array is stable, so we can use index as key
+                // eslint-disable-next-line react/no-array-index-key
+                key={stableIdx}
+                hasOverflow={hasOverflow}
+                activeTabIdx={activeTabIdx}
+                setActiveTab={(targetIdx, groupId) => {
+                  setActiveTab(targetIdx, groupId)
+                  updateScrollOffset(targetIdx)
+                }}
+                tab={tab}
+              />
+            ))}
+          </div>
+        </div>
+        <NextPrevArrows
+          hasOverflow={hasOverflow}
+          hiddenArrows={hiddenArrows}
+          onPrev={() => {
+            const target = activeTabIdx - 1
+            if (target >= 0) {
+              setActiveTab(target, tabs[target].group)
+            } else {
+              updateScrollOffset(activeTabIdx)
+            }
+          }}
+          onNext={() => {
+            const target = activeTabIdx + 1
+            if (target < tabs.length) {
+              setActiveTab(target, tabs[target].group)
+            } else {
+              updateScrollOffset(activeTabIdx)
+            }
+          }}
+        />
+      </div>
+      <BottomBorder
+        hasOverflow={hasOverflow}
+        fullWidthBorder={fullWidthBorder}
+      />
+    </div>
+  )
+}
+
+function NextPrevScrims({ hasOverflow, hiddenArrows }: { hasOverflow: $TSFixMe, hiddenArrows: $TSFixMe }) {
+  return (
+    <div className={s.scrimContainer}>
+      <div
+        className={classNames(s.prevArrowScrim, {
+          [s.hasOverflow]: hasOverflow,
+          [s.hidden]: hiddenArrows.prev,
+        })}
+      />
+      <div
+        className={classNames(s.nextArrowScrim, {
+          [s.hasOverflow]: hasOverflow,
+          [s.hidden]: hiddenArrows.next,
+        })}
+      />
+    </div>
+  )
+}
+
+function NextPrevArrows({ hasOverflow, hiddenArrows, onPrev, onNext }
+  : { hasOverflow: $TSFixMe, hiddenArrows: $TSFixMe, onPrev: MouseEventHandler, onNext: MouseEventHandler }) {
+  return (
+    <>
+      <div
+        className={classNames(s.prevArrow, {
+          [s.hasOverflow]: hasOverflow,
+          [s.hidden]: hiddenArrows.prev,
+        })}
+        onClick={onPrev}
+      >
+        <InlineSvg src={SvgChevronRight} />
+      </div>
+      <div
+        className={classNames(s.nextArrow, {
+          [s.hasOverflow]: hasOverflow,
+          [s.hidden]: hiddenArrows.next,
+        })}
+        onClick={onNext}
+      >
+        <InlineSvg src={SvgChevronRight} />
+      </div>
+    </>
+  )
+}
+
+function BottomBorder({ hasOverflow, fullWidthBorder }: { hasOverflow: $TSFixMe, fullWidthBorder: $TSFixMe }) {
+  return (
+    <>
+      <div className="g-grid-container">
+        <div
+          className={classNames(s.bottomBorder, s.forDefault, {
+            [s.hasOverflow]: hasOverflow,
+            [s.fullWidthBorder]: fullWidthBorder,
+          })}
+        ></div>
+      </div>
+      <div
+        className={classNames(s.bottomBorder, s.forOverflow, {
+          [s.hasOverflow]: hasOverflow,
+          [s.fullWidthBorder]: fullWidthBorder,
+        })}
+      ></div>
+    </>
+  )
+}
+
+export default TabTriggers

package/src/tabs/partials/tab-triggers/style.module.scss

@@ -0,0 +1,193 @@
+.root {
+  --height: 64px;
+
+  background: var(--white);
+  position: relative;
+
+  &.fullWidthBorder {
+    border-bottom: 1px solid var(--gray-5);
+  }
+}
+
+.bottomBorder {
+  width: 100%;
+  display: block;
+  position: relative;
+  z-index: 0;
+  border-bottom: 1px solid var(--gray-5);
+
+  &.forDefault {
+    display: block;
+    &.hasOverflow {
+      display: none;
+    }
+  }
+
+  &.forOverflow {
+    display: none;
+    &.hasOverflow {
+      display: block;
+    }
+  }
+
+  /* If we're using a full-width border,
+     hide this elements border no matter what */
+  &.fullWidthBorder {
+    display: none;
+
+    &.hasOverflow {
+      display: none;
+    }
+  }
+}
+
+.borderAdjuster {
+  position: relative;
+  margin-bottom: -1px;
+  z-index: 1;
+}
+
+.scrollContainer {
+  composes: g-grid-container from global;
+  overflow: scroll;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.tabsWidthContainer {
+  display: flex;
+  min-width: max-content;
+
+  &.centered {
+    justify-content: center;
+  }
+}
+
+/*
+Arrows are positioned based on 
+on the tab container, so they always
+appear by the container edge if
+there is overflow.
+*/
+.arrow {
+  --icon-color: var(--gray-3);
+
+  align-items: center;
+  bottom: 3px;
+  display: none;
+  justify-content: center;
+  opacity: 1;
+  position: absolute;
+  top: 0;
+  transition: opacity 0.6s;
+  user-select: none;
+  width: 56px;
+  z-index: 1;
+
+  &.hasOverflow {
+    display: flex;
+  }
+
+  &.hidden {
+    opacity: 0;
+  }
+
+  & svg {
+    display: block;
+    width: 20px;
+    height: 20px;
+    & [fill] {
+      fill: var(--icon-color);
+    }
+    & [stroke] {
+      stroke: var(--icon-color);
+    }
+  }
+
+  &:hover {
+    --icon-color: var(--gray-1);
+
+    cursor: pointer;
+  }
+}
+
+.prevArrow {
+  composes: arrow;
+  left: 0;
+
+  & svg {
+    transform: rotate(180deg);
+    margin-right: 20px;
+  }
+}
+
+.nextArrow {
+  composes: arrow;
+  right: 0;
+
+  & svg {
+    margin-left: 20px;
+  }
+}
+
+/*
+Scrims are positioned based on 
+g-grid-container, to align with 
+the edge of the scrolling container.
+*/
+.scrimContainer {
+  composes: g-grid-container from global;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 3px;
+  right: 0;
+}
+
+.arrowScrim {
+  position: absolute;
+  top: 0;
+  pointer-events: none;
+  transition: opacity 0.6s;
+  bottom: 0;
+  width: 56px;
+  display: none;
+  opacity: 1;
+  user-select: none;
+  z-index: 1;
+
+  &.hasOverflow {
+    display: flex;
+  }
+
+  &.hidden {
+    opacity: 0;
+  }
+}
+
+.prevArrowScrim {
+  composes: arrowScrim;
+  left: -1px;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 1) 30%,
+    rgba(255, 255, 255, 0.85) 60%,
+    rgba(255, 255, 255, 0) 100%
+  );
+}
+
+.nextArrowScrim {
+  composes: arrowScrim;
+  right: -1px;
+  background: linear-gradient(
+    -90deg,
+    rgba(255, 255, 255, 1) 30%,
+    rgba(255, 255, 255, 0.85) 60%,
+    rgba(255, 255, 255, 0) 100%
+  );
+}

package/src/tabs/partials/tooltip/index.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import Portal from '@reach/portal'
+import { useTooltip, TooltipPopup } from '@reach/tooltip'
+import s from './style.module.scss'
+
+interface TooltipProps {
+  /** Element that, when hovered, will display the tooltip. */
+  children: React.ReactElement
+  /** Plain text for the tooltip to render */
+  label: string
+  /** What the screen reader announces  */
+  'aria-label'?: string
+  /** Minimum spacing from viewport edge */
+  collisionBuffer?: number
+}
+
+function Tooltip({
+  children,
+  label,
+  collisionBuffer = 8,
+  'aria-label': ariaLabel,
+}: TooltipProps): React.ReactElement {
+  const [trigger, tooltip] = useTooltip()
+  const { isVisible, triggerRect } = tooltip
+
+  return (
+    <React.Fragment>
+      {React.cloneElement(children, trigger)}
+      {isVisible && (
+        <Portal>
+          <Arrow triggerRect={triggerRect!} collisionBuffer={collisionBuffer} />
+        </Portal>
+      )}
+      <TooltipPopup
+        {...tooltip}
+        className={s.box}
+        label={label}
+        aria-label={ariaLabel}
+        position={(triggerRect, tooltipRect) =>
+          centeringFunction(triggerRect as DOMRect, tooltipRect as DOMRect, collisionBuffer)
+        }
+      />
+    </React.Fragment>
+  )
+}
+
+/**
+ * Given the bounding rectangle for both
+ * the tooltip trigger and tooltip popup,
+ * render the tooltip centered and below
+ * the trigger.
+ *
+ * Allow viewport collisions to override
+ * the centered position where needed,
+ * using the collisionBuffer argument
+ * to inset the collision area so the tooltip
+ * doesn't appear at the very edge of the
+ * viewport.
+ */
+function centeringFunction(triggerRect: DOMRect, tooltipRect: DOMRect, collisionBuffer:number) {
+  const triggerCenter = triggerRect.left + triggerRect.width / 2
+  const left = triggerCenter - tooltipRect.width / 2
+  const maxLeft = window.innerWidth - tooltipRect.width - collisionBuffer
+  return {
+    left: Math.min(Math.max(collisionBuffer, left), maxLeft) + window.scrollX,
+    top: triggerRect.bottom + collisionBuffer + window.scrollY,
+  }
+}
+
+/**
+ * Given the bounding rectangle for
+ * the tooltip trigger, render a small
+ * triangular arrow.
+ *
+ * This arrow is centered relative to
+ * the trigger, but accounts for possible
+ * viewport collisions, as we would prefer
+ * to have the arrow connected to the popup
+ * (which is bound by the viewport) rather
+ * than have it perfectly centered but
+ * disconnected from the popup.
+ */
+function Arrow({ triggerRect, collisionBuffer }: {triggerRect:DOMRect, collisionBuffer:number}) {
+  const arrowThickness = 10
+  const arrowLeft = triggerRect
+    ? `${Math.min(
+        // Centered position, covers most use cases
+        triggerRect.left - arrowThickness + triggerRect.width / 2,
+        // Ensure the arrow is not rendered even partially offscreen,
+        // as it will look disconnected from our tooltip body,
+        // which must be rendered within the viewport
+        window.innerWidth - arrowThickness * 2 - collisionBuffer
+      )}px`
+    : 'auto'
+  const arrowTop = triggerRect
+    ? `${triggerRect.bottom + window.scrollY}px`
+    : 'auto'
+
+  return (
+    <div
+      className={s.arrow}
+      style={
+        {
+          '--left': arrowLeft,
+          '--top': arrowTop,
+        } as React.CSSProperties
+      }
+    />
+  )
+}
+
+export default Tooltip

package/src/tabs/partials/tooltip/style.module.scss

@@ -0,0 +1,38 @@
+/* Additional composition is helpful here,
+as .arrow and .root can't use CSS custom properties
+nicely since .arrow is rendered into a Portal. */
+.theme {
+  --background-color: var(--gray-2);
+  --foreground-color: var(--white);
+}
+
+.arrow {
+  composes: theme;
+  position: absolute;
+
+  /* --top and --left are set in JS, to allow
+    for dynamic, collision-free positioning. */
+  top: var(--top);
+  left: var(--left);
+  width: 0;
+  height: 0;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 10px solid var(--background-color);
+}
+
+.box {
+  composes: theme;
+  composes: g-type-body-small from global;
+  font-size: 0.875rem;
+  background: var(--background-color);
+  box-shadow: 2px 2px 10px hsla(0, 0%, 0%, 0.1);
+  color: var(--foreground-color);
+  padding: 0.5em 1em;
+  pointer-events: none;
+  position: absolute;
+  z-index: 1;
+  border-radius: 3px;
+  max-width: 75vw;
+  max-width: min(75vw, 20em);
+}

package/src/tabs/provider.js

@@ -0,0 +1,18 @@
+import { createContext, useState, useContext, useMemo } from 'react'
+
+export function useTabGroups() {
+  return useContext(TabContext)
+}
+
+const TabContext = createContext()
+
+export default function TabProvider({ children }) {
+  const [activeTabGroup, setActiveTabGroup] = useState()
+  const contextValue = useMemo(() => ({ activeTabGroup, setActiveTabGroup }), [
+    activeTabGroup,
+  ])
+
+  return (
+    <TabContext.Provider value={contextValue}>{children}</TabContext.Provider>
+  )
+}

package/src/tabs/style.module.css

@@ -0,0 +1,4 @@
+.content {
+  composes: g-grid-container from global;
+  color: var(--gray-2);
+}

package/src/tabs/utils/smooth-scroll.js

@@ -0,0 +1,88 @@
+/**
+ * Animate a smooth scroll to the target element.
+ *
+ * Process:
+ * 1. Determine target distance change, using current and target positions passed
+ *    Determine target duration of scroll animation, using minDuration and speedPxPerSecond
+ * 2. Set startTime of animation using current millis.
+ * 3. Request animation frame for step update
+ * 4. On step update, calculate elapsed time (t) - currentMillis - startTime
+ *    Plug t, startPosn, distance, and duration into easeFunction to determine current position.
+ *    Update scroll position of target element (X and Y)
+ *    Request another animation frame
+ *    Repeat step 3 & 4 until animation is complete
+ *
+ * @param {*} window Window element
+ * @param {*} elem target elem to scroll to (HTML Element)
+ * @param {object} targetPosnInput {x: number, y: number}
+ * @param {object} [optionsIn] {speedPxPerSecond: number, minDuration: number}
+ */
+function smoothScroll(window, elem, targetPosnInput, optionsIn) {
+  const elemIsWindow = elem.toString() === '[object Window]'
+
+  //  Parse options or fall back to defaults
+  const options = {
+    speedPxPerSecond: (optionsIn && optionsIn.speedPxPerSecond) || 900,
+    minDuration: (optionsIn && optionsIn.minDuration) || 200,
+    maxDuration: (optionsIn && optionsIn.maxDuration) || 600,
+  }
+  const { speedPxPerSecond, minDuration, maxDuration } = options
+  //  Determine target distance change, using current and target positions passed
+  const startPosn = {
+    x: elemIsWindow ? elem.scrollX : elem.scrollLeft,
+    y: elemIsWindow ? elem.scrollY : elem.scrollTop,
+  }
+  const targetPosn = {
+    x: targetPosnInput.x || startPosn.x,
+    y: targetPosnInput.y || startPosn.y,
+  }
+  const { x, y } = targetPosn
+  const deltaX = x - startPosn.x
+  const deltaY = y - startPosn.y
+  //  Determine target duration of scroll animation, using minDuration and speedPxPerSecond
+  const durationCalc =
+    (Math.max(Math.abs(deltaX), Math.abs(deltaY)) * 1000) / speedPxPerSecond
+  //  Account for minDuration option
+  const duration = Math.min(Math.max(durationCalc, minDuration), maxDuration)
+  //  Set startTime of animation using current millis.
+  const startTime = Date.now()
+  //  Define step function
+  function smoothScrollStep() {
+    const elapsedTime = Date.now() - startTime
+    const atEnd = elapsedTime >= duration
+    const targetXPosn = atEnd
+      ? startPosn.x + deltaX
+      : easeInOutQuad(elapsedTime, startPosn.x, deltaX, duration)
+    const targetYPosn = atEnd
+      ? startPosn.y + deltaY
+      : easeInOutQuad(elapsedTime, startPosn.y, deltaY, duration)
+    if (elemIsWindow) {
+      elem.scroll(targetXPosn, targetYPosn)
+    } else {
+      elem.scrollLeft = targetXPosn
+      elem.scrollTop = targetYPosn
+    }
+    if (!atEnd) {
+      window.requestAnimationFrame(smoothScrollStep)
+    }
+  }
+  //  Request animation frame for initial step
+  window.requestAnimationFrame(smoothScrollStep)
+}
+
+/**
+ * Quadratic easing function
+ * From https://github.com/danro/jquery-easing/blob/master/jquery.easing.js
+ *
+ * @param {number} t current time
+ * @param {number} b beginning value
+ * @param {number} c change in value
+ * @param {number} d duration
+ * @returns {number} eased value
+ */
+const easeInOutQuad = function (t, b, c, d) {
+  if ((t /= d / 2) < 1) return (c / 2) * t * t + b
+  return (-c / 2) * (--t * (t - 2) - 1) + b
+}
+
+export default smoothScroll

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": "@dbosoft/typescript-config/nextjs.json",
+    "compilerOptions": {
+      "outDir": "dist"
+    },
+    "include": ["src"],
+    "exclude": ["node_modules", "dist"]
+  }