@dbosoft/nextjs-uicore 1.1.0 → 1.2.0

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

@@ -1,241 +0,0 @@
-import React, { MouseEventHandler, useCallback, useEffect, useRef, useState } from 'react'
-import clsx from 'clsx'
-import InlineSvg from '@dbosoft/react-uicore/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={clsx(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={clsx(s.scrollContainer, {
-            [s.centered]: centered,
-            [s.hasOverflow]: hasOverflow,
-          })}
-          ref={scrollRef}
-        >
-          <div
-            className={clsx(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={clsx(s.prevArrowScrim, {
-          [s.hasOverflow]: hasOverflow,
-          [s.hidden]: hiddenArrows.prev,
-        })}
-      />
-      <div
-        className={clsx(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={clsx(s.prevArrow, {
-          [s.hasOverflow]: hasOverflow,
-          [s.hidden]: hiddenArrows.prev,
-        })}
-        onClick={onPrev}
-      >
-        <InlineSvg src={SvgChevronRight} />
-      </div>
-      <div
-        className={clsx(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={clsx(s.bottomBorder, s.forDefault, {
-            [s.hasOverflow]: hasOverflow,
-            [s.fullWidthBorder]: fullWidthBorder,
-          })}
-        ></div>
-      </div>
-      <div
-        className={clsx(s.bottomBorder, s.forOverflow, {
-          [s.hasOverflow]: hasOverflow,
-          [s.fullWidthBorder]: fullWidthBorder,
-        })}
-      ></div>
-    </>
-  )
-}
-
-export default TabTriggers

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

@@ -1,193 +0,0 @@
-.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

@@ -1,112 +0,0 @@
-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

@@ -1,38 +0,0 @@
-/* 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

@@ -1,18 +0,0 @@
-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

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

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

@@ -1,88 +0,0 @@
-/**
- * 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