@dbosoft/nextjs-uicore 1.0.0

package/src/subnav/partials/MenuItemsDefault/style.module.scss

@@ -0,0 +1,71 @@
+.root {
+  display: flex;
+  padding: 0 32px;
+  margin: 0 auto;
+  align-items: center;
+  list-style: none;
+
+  &.alignRight {
+    margin-right: 0;
+    padding-right: 16px;
+  }
+}
+
+.listItem {
+  position: relative;
+  white-space: nowrap;
+  margin: 0;
+  padding: 0;
+}
+
+.navLink {
+  composes: g-type-body-small-strong from global;
+  position: relative;
+  padding: 0 16px;
+  line-height: 2.5rem;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.submenuItem {
+  composes: g-type-body-small-strong from global;
+  color: var(--black);
+}
+
+.submenuModal {
+  border-radius: 4px;
+  box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
+  background: var(--white);
+  z-index: 1;
+  display: block;
+  position: absolute;
+  top: 100%;
+  margin: 8px 0 0 0;
+  padding: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  list-style: none;
+
+  & li {
+    & a:hover .text {
+      text-decoration: underline;
+    }
+
+    & + li {
+      margin-top: 6px;
+    }
+  }
+
+  &.isCollapsed {
+    display: none;
+  }
+}
+
+.verticalDivider {
+  background: var(--gray-5);
+  height: 1.75rem;
+  width: 1px;
+  margin: 0 8px;
+  display: block;
+}

package/src/subnav/partials/MenuItemsOverflow/index.tsx

@@ -0,0 +1,50 @@
+import type { ReactElement } from 'react';
+import React from 'react'
+import LinkWrap from '@dbosoft/react-uicore/link-wrap'
+import CtaLinks from '../CtaLinks'
+import type { ICtaItem, MenuItem } from '../..'
+import s from './style.module.scss'
+import Link from 'next/link';
+
+
+interface MenuItemsOverflowProps {
+  menuItems: MenuItem[],
+  ctaLinks: ICtaItem[],
+  hideGithubStars: boolean,
+}
+
+
+export default function MenuItemsOverflow({ menuItems, ctaLinks, hideGithubStars }: MenuItemsOverflowProps) {
+  return (<><ul className={s.ulElem}>
+    {menuItems.map((menuItem, stableIdx) => {
+      if (menuItem === 'divider') return null
+
+      const { text, url } = menuItem
+      return (
+        <SubmenuItem
+          active={menuItem.active || false}
+          key={stableIdx}
+          text={text}
+          url={url}
+        />
+      )
+    })}
+  </ul>
+    <CtaLinks
+      hideGithubStars={hideGithubStars}
+      isInDropdown
+      links={ctaLinks}
+    /></>)
+
+}
+
+function SubmenuItem({ url, text, active }: { url: string; text: string; active: boolean }) {
+  return (
+    <li>
+      <LinkWrap Link={Link} className={s.submenuItem} href={url} title={text}>
+        {text}
+      </LinkWrap>
+    </li>
+  )
+}
+

package/src/subnav/partials/MenuItemsOverflow/style.module.scss

@@ -0,0 +1,51 @@
+.root {
+  position: relative;
+  margin-left: auto;
+}
+
+.dropdown {
+  background: var(--white);
+  border-radius: 4px;
+  box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
+  margin-top: 8px;
+  max-height: calc(100vh - 300%);
+  overflow-y: auto;
+  padding: 12px 24px 0 24px;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  width: 256px;
+  z-index: 1;
+
+  &.isCollapsed {
+    display: none;
+  }
+}
+
+.ulElem {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.submenuTitle {
+  composes: g-type-label from global;
+  margin: 12px 0 8px 0;
+  color: var(--gray-3);
+}
+
+.divider {
+  margin: 12px 0;
+  border: 0;
+  padding: 0;
+  height: 1px;
+  background: var(--gray-5);
+}
+
+.submenuItem {
+  composes: g-type-body-small-strong from global;
+  display: block;
+  padding: 4px 0;
+  line-height: 1.6em;
+  color: var(--black);
+}

package/src/subnav/partials/TitleLink/index.tsx

@@ -0,0 +1,25 @@
+import type { FC, ReactElement, ReactNode } from 'react'
+import LinkWrap from '@dbosoft/react-uicore/link-wrap'
+import Link from 'next/link'
+
+
+const TitleLink: FC<{
+  text: string,
+  url: string,
+  children?: ReactNode
+}> = ({
+  text,
+  url, children }) => {
+    return (
+      <LinkWrap
+        Link={Link}
+        className="font-bold text-gray-900 tracking-widest text-lg inline"
+        href={url}
+        title={text}
+      >{text}
+        {children}
+      </LinkWrap>
+    )
+  }
+
+export default TitleLink

package/src/subnav/partials/nav-item-text/index.tsx

@@ -0,0 +1,29 @@
+import classNames from 'classnames'
+import React from 'react'
+
+/**
+ *
+ * A span of styled text with
+ * an active state that adds a thick
+ * bottom border.
+ *
+ */
+function NavItemText({
+  isActive,
+  text,
+}: {
+  /** If true, item will be rendered with a thick bottom border below the text. */
+  isActive: boolean
+  /** Plain text to render within the styled <span /> */
+  text: string
+}): React.ReactElement {
+  return (
+    <span
+      className={classNames("text-black text-sm font-semibold", isActive ? "border-b-2 pb-2 border-black" : "")}
+    >
+      {text}
+    </span>
+  )
+}
+
+export default NavItemText

package/src/subnav/partials/nav-item-text/style.module.scss

@@ -0,0 +1,19 @@
+.root {
+  color: var(--black);
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 2px;
+    background: var(--black);
+    opacity: 0;
+  }
+
+  &.isActive::after {
+    opacity: 1;
+  }
+}

package/src/subnav/style.module.scss

@@ -0,0 +1,13 @@
+.root {
+  --gray-6-transparent: rgba(174, 176, 183, 0.45);
+  position: sticky;
+  top: -1px;
+  z-index: 800;
+  border-top: 1px solid var(--gray-6-transparent);
+  border-bottom: 1px solid transparent;
+  transition: border-bottom-color 0.8s;
+
+  &.isSticky {
+    border-bottom-color: var(--gray-6-transparent);
+  }
+}

package/src/tabs/hooks/use-scroll-left.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect, useRef, MutableRefObject } from 'react'
+
+export default function useScrollLeft(): [
+  scrollRef: MutableRefObject<$TSFixMe>,
+  scrollLeft: number
+] {
+  const scrollRef = useRef(null)
+  const [scrollLeft, setScrollLeft] = useState()
+
+  useEffect(() => {
+    const scrollElem = scrollRef.current as $TSFixMe;
+    // Handler to call when scrollLeft may be affected
+    function handleScroll() {
+      if (!scrollRef.current) return null
+      // Set scroll data to state
+      setScrollLeft((scrollRef.current as $TSFixMe).scrollLeft)
+    }
+    // Add event listener
+    scrollElem.addEventListener('scroll', handleScroll)
+    // Call handler right away so state gets updated with initial scroll position
+    handleScroll()
+    // Remove event listener on cleanup
+    return () => scrollElem.removeEventListener('scroll', handleScroll)
+  }, [scrollRef])
+
+  return [scrollRef, 0]
+}

package/src/tabs/hooks/use-window-size.js

@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react'
+
+//  https://usehooks.com/useWindowSize/
+export default function useWindowSize() {
+  // Initialize state with undefined width/height so server and client renders match
+  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+  const [windowSize, setWindowSize] = useState({
+    width: undefined,
+    height: undefined,
+  })
+
+  useEffect(() => {
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
+    }
+
+    // Add event listener
+    window.addEventListener('resize', handleResize)
+
+    // Call handler right away so state gets updated with initial window size
+    handleResize()
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener('resize', handleResize)
+  }, []) // Empty array ensures that effect is only run on mount
+
+  return windowSize
+}

package/src/tabs/icons/chevron-right.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 18l6-6-6-6" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/tabs/icons/tooltip.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" stroke="var(--gray-4)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path clip-rule="evenodd" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" stroke="var(--gray-4)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 17.387a.379.379 0 100-.758.379.379 0 000 .758z" fill="var(--gray-4)" stroke="var(--gray-4)" stroke-width="1.5" stroke-linejoin="round"/></svg>

package/src/tabs/index.tsx

@@ -0,0 +1,102 @@
+import React, { useState, useEffect } from 'react'
+import { TabTriggerType } from './partials/tab-trigger'
+import TabTriggers from './partials/tab-triggers'
+import TabProvider, { useTabGroups } from './provider'
+import s from './style.module.css'
+
+interface TabChildProps {
+  /** Renders the tab contents. */
+  children: React.ReactElement
+  /** Plain text used for the tab heading. */
+  heading: string
+  /** Accepts a string such that, when the tab is active, other Tab elements outside the instance with a matching `group` value will automatically be shown. Note that `TabProvider` is required in order for this feature to function.v */
+  group?: string
+  /** Plain text displayed in a tooltip beside the tab heading. */
+  tooltip?: string
+}
+
+function Tab({ children }: TabChildProps): React.ReactElement {
+  return <>{children}</>
+}
+
+interface TabsProps {
+  /** Children to be displayed as tabs. Each child accepts the props `{ children: ReactElement, heading: string, tooltip?: string, group?: string }` */
+  children: Array<React.ReactElement<TabChildProps>>
+  /** If set to true, the tabs are centered in their container. Default is left-aligned. */
+  centered?: boolean
+  /** Optional className to add to the root element. */
+  className?: string
+  /** Set the default tab by its index. If not set, or if out of range, will default to the first tab, at index 0. */
+  defaultTabIdx?: number
+  /** If set to true, the bottom border underneath the tabs will fill the available width. Default border fills the constrained `.g-grid-container`. */
+  fullWidthBorder?: boolean
+  /** Optional callback which is executed when a new tab is selected. */
+  onChange?: (targetTabIdx: number, targetTabGroup?: string) => void
+}
+
+function Tabs({
+  children,
+  className,
+  defaultTabIdx = 0,
+  centered = false,
+  fullWidthBorder = false,
+  onChange,
+}: TabsProps): React.ReactElement {
+  // Ensures a single child object converts to an array
+  children = Array.prototype.concat(children)
+
+  const isDefaultOutOfBounds =
+    defaultTabIdx >= children.length || defaultTabIdx < 0
+
+  const [activeTabIdx, setActiveTabIdx] = useState(
+    // if specified default is out of bounds (ie, it's determined at runtime),
+    // fallback to 0 to avoid throwing an error
+    isDefaultOutOfBounds ? 0 : defaultTabIdx
+  )
+  const groupCtx = useTabGroups()
+
+  function setActiveTab(targetIdx : number, groupId?:string) {
+    setActiveTabIdx(targetIdx)
+    if (onChange) onChange(targetIdx, groupId)
+    if (groupCtx) groupCtx.setActiveTabGroup(groupId)
+  }
+
+  useEffect(() => {
+    const hasGroups = children.filter((tab) => tab.props.group).length > 0
+    if (
+      process.env.NODE_ENV !== 'production' &&
+      hasGroups &&
+      groupCtx === undefined
+    ) {
+      console.warn(
+        '@dbosoft/react-tabs: The `TabProvider` cannot be accessed. Make sure it wraps the `Tabs` components so Tab Groups can work properly.'
+      )
+    }
+  }, [children, groupCtx])
+
+  if (!children) {
+    process.env.NODE_ENV !== 'production' &&
+      console.warn(
+        '@dbosoft/react-tabs: There are no `Tab` children for the `Tabs` component to render.'
+      )
+  }
+
+  return (
+    <section className={className}>
+      <TabTriggers
+        tabs={children.map((tab, index) => {
+          const { heading, group, tooltip } = tab.props
+          return { index, heading, group, tooltip } as TabTriggerType
+        })}
+        centered={centered}
+        fullWidthBorder={fullWidthBorder}
+        activeTabIdx={activeTabIdx}
+        setActiveTab={setActiveTab}
+      />
+      <div className={s.content}>{children[activeTabIdx].props.children}</div>
+    </section>
+  )
+}
+
+export default Tabs
+export { TabProvider, useTabGroups, Tab }

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

@@ -0,0 +1,66 @@
+import React, { useEffect } from 'react'
+import TooltipIcon from '../../icons/tooltip.svg'
+import Tooltip from '../tooltip'
+import { useTabGroups } from '../../provider.js'
+import s from './style.module.scss'
+import classNames from 'classnames'
+
+export interface TabTriggerType {
+  index: number
+  group: string
+  heading: string
+  tooltip?: string
+}
+
+interface TabTriggerProps {
+  tab: TabTriggerType
+  hasOverflow: boolean
+  activeTabIdx: number
+  setActiveTab: (tabIndex: number, tabGroup?: string) => void
+}
+
+function TabTrigger({
+  tab,
+  hasOverflow,
+  activeTabIdx,
+  setActiveTab,
+}: TabTriggerProps): React.ReactElement {
+  const groupCtx = useTabGroups()
+  const activeGroup = groupCtx?.activeTabGroup
+  const isInActiveGroup = groupCtx && tab.group && tab.group === activeGroup
+  const isActiveIndex = tab.index === activeTabIdx
+  const isActiveTab = isInActiveGroup || isActiveIndex ? true : false
+
+  useEffect(() => {
+    // if the tab is active based on group and the
+    // index doesn't match, update the active index
+    if (isInActiveGroup) !isActiveIndex && setActiveTab(tab.index)
+  }, [isInActiveGroup, isActiveIndex, setActiveTab, tab.index])
+
+  return (
+    <button
+      className={classNames(s.root, {
+        [s.isActiveTab]: isActiveTab,
+        [s.hasOverflow]: hasOverflow,
+      })}
+      data-tabindex={tab.index}
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={() => setActiveTab(tab.index, tab.group)}
+    >
+      <span className={s.inner}>
+        <span className="g-type-body-strong">{tab.heading}</span>
+        {tab.tooltip && (
+          <Tooltip label={tab.tooltip} aria-label={tab.tooltip}>
+            <span
+              data-testid="tooltip-icon"
+              className={s.tooltipTrigger}
+              dangerouslySetInnerHTML={{ __html: TooltipIcon }}
+            />
+          </Tooltip>
+        )}
+      </span>
+    </button>
+  )
+}
+
+export default TabTrigger

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

@@ -0,0 +1,69 @@
+.root {
+  --inner-text-color: var(--gray-3);
+  --inner-border-color: transparent;
+  --inner-decoration: none;
+
+  display: flex;
+  align-items: center;
+  background: none;
+  border: none;
+  outline: none;
+  padding: 0 16px;
+
+  @media (--medium-up) {
+    padding: 0 24px;
+  }
+
+  &:first-of-type {
+    padding-left: 0;
+  }
+
+  &:last-of-type {
+    padding-right: 0;
+
+    /* With overflow, add
+    a bit of space to ensure tooltips
+    are still easily hover-able */
+    &.hasOverflow {
+      padding-right: 24px;
+    }
+  }
+
+  &:hover {
+    cursor: pointer;
+
+    --inner-text-color: var(--black);
+  }
+
+  &:focus {
+    --inner-text-color: var(--black);
+    --inner-decoration: underline;
+  }
+
+  &.isActiveTab {
+    --inner-border-color: var(--black);
+    --inner-text-color: var(--black);
+  }
+}
+
+.inner {
+  display: flex;
+  align-items: center;
+  padding: 18px 0 15px 0;
+  border-bottom: 3px solid;
+  border-color: var(--inner-border-color);
+  color: var(--inner-text-color);
+  transition: color 0.2s;
+  white-space: nowrap;
+  text-decoration: var(--inner-decoration);
+}
+
+.tooltipTrigger {
+  margin-left: 0.5rem;
+  margin-top: 1px;
+  width: 1.125rem;
+
+  & svg {
+    width: 100%;
+  }
+}