@dbosoft/nextjs-uicore 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,36 +1,47 @@
-# @dbosoft/nextjs-uicore
-
-## 1.1.0
-
-### Minor Changes
-
-- 7a843e1: darkmode support for subnav
-
-## 1.0.3
-
-### Patch Changes
-
-- 5fc59bc: fixed missing navigation for github links in subnav
-
-## 1.0.2
-
-### Patch Changes
-
-- 4122817: fixed subnav titlelink
-
-## 1.0.1
-
-### Patch Changes
-
-- ec24215: update @heroicons/react to v2
-
-## 1.0.0
-
-### Major Changes
-
-- restructured nextjs components
-
-### Patch Changes
-
-- Updated dependencies
-  - @dbosoft/react-uicore@1.0.0
+# @dbosoft/nextjs-uicore
+
+## 1.2.0
+
+### Minor Changes
+
+- 676c725: Server side download pages
+
+### Patch Changes
+
+- Updated dependencies [676c725]
+  - @dbosoft/react-uicore@1.1.0
+
+## 1.1.0
+
+### Minor Changes
+
+- 7a843e1: darkmode support for subnav
+
+## 1.0.3
+
+### Patch Changes
+
+- 5fc59bc: fixed missing navigation for github links in subnav
+
+## 1.0.2
+
+### Patch Changes
+
+- 4122817: fixed subnav titlelink
+
+## 1.0.1
+
+### Patch Changes
+
+- ec24215: update @heroicons/react to v2
+
+## 1.0.0
+
+### Major Changes
+
+- restructured nextjs components
+
+### Patch Changes
+
+- Updated dependencies
+  - @dbosoft/react-uicore@1.0.0

package/package.json

@@ -2,13 +2,14 @@
   "name": "@dbosoft/nextjs-uicore",
   "description": "Core UI components for Next.js",
   "author": "dbosoft",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "sideEffects": false,
   "license": "MIT",
   "exports": {
     ".": "./src",
     "./head": "./src/head/index.tsx",
-    "./tabs": "./src/tabs/index.tsx",
+    "./tabs": "./src/tabs/index.ts",
+    "./tabs/server": "./src/tabs/server.ts",
     "./subnav": "./src/subnav/index.tsx",
     "./themeselector": "./src/themeselector/index.tsx"
   },
@@ -20,21 +21,21 @@
     "react": "^18.2.0",
     "typescript": "^5.3.3",
     "@dbosoft/eslint-config": "1.0.0",
-    "@dbosoft/typescript-config": "1.0.0",
-    "@dbosoft/web-types": "1.0.0"
+    "@dbosoft/web-types": "1.0.0",
+    "@dbosoft/typescript-config": "1.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@headlessui/react": "^1.4.3",
+    "@headlessui/react": "^2.2.1",
     "@heroicons/react": "^2.1.3",
     "classnames": "^2.3.1",
     "clsx": "^2.1.0",
     "isomorphic-unfetch": "^4.0.2",
     "next-themes": "^0.4.3",
     "unfetch": "^4.2.0",
-    "@dbosoft/react-uicore": "1.0.0"
+    "@dbosoft/react-uicore": "1.1.0"
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",

package/src/subnav/index.tsx

@@ -1,4 +1,4 @@
-import { Disclosure } from '@headlessui/react'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 import type { LinkType, Variant } from '@dbosoft/react-uicore/linkbutton'
 import MenuItemsOverflow from './partials/MenuItemsOverflow'
@@ -92,20 +92,20 @@ function Subnav({
 
                 <div className="-mr-2 flex items-center sm:hidden ">
                   {/* Mobile menu button */}
-                  <Disclosure.Button className="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary">
+                  <DisclosureButton className="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary">
                     <span className="sr-only">Open main menu</span>
                     {open ? (
                       <XMarkIcon aria-hidden="true" className="block h-6 w-6" />
                     ) : (
                       <Bars3Icon aria-hidden="true" className="block h-6 w-6" />
                     )}
-                  </Disclosure.Button>
+                  </DisclosureButton>
                 </div>
               </div>
 
             </div>
 
-            <Disclosure.Panel className="sm:hidden">
+            <DisclosurePanel className="sm:hidden">
               <div className="pt-2 pb-3 space-y-1">
                 <MenuItemsOverflow
                   ctaLinks={ctaLinks}
@@ -113,7 +113,7 @@ function Subnav({
                   menuItems={menuItems}
                 />          </div>
 
-            </Disclosure.Panel>
+            </DisclosurePanel>
           </>
         )}
       </Disclosure>

package/src/tabs/Tabs.tsx

@@ -0,0 +1,50 @@
+import { TabList, Tab, TabPanels, TabPanel, TabGroup } from "@headlessui/react"
+import { FC, Suspense } from "react"
+
+import TabsClient, { TabConfig, TabLink } from "./TabsClient"
+
+
+export const TabsContent: FC<{
+  tabs: TabConfig[],
+  tabNames: string[]
+}> = ({
+  tabs,
+  tabNames
+}) => {
+
+    return <>
+      <TabList className={` pt-2 flex justify-center`}>
+        {tabs.map((tab, index) => <Suspense key={tab.name}><Tab as={TabLink} className={tab.className}  index={index} tabs={tabNames}>{tab.displayName}</Tab></Suspense>)}
+      </TabList>
+      <TabPanels className={`mt-4  pt-0 border-t-2 border-brand-light dark:border-brand-dark`}>
+        {tabs.map((tab, index) => <TabPanel className={`py-4`} key={index}>{tab.content}</TabPanel>)}
+      </TabPanels>
+    </>
+  }
+
+
+const Tabs: FC<{
+  tabs: TabConfig[],
+  currentTab: string | undefined
+}> = ({
+  tabs,
+  currentTab
+}) => {
+    let selectedTab = currentTab ? tabs.findIndex(tab => tab.name === currentTab) : 0;
+    if (selectedTab == -1)
+      selectedTab = 0;
+
+    const tabNames = tabs.map(tab => tab.name);
+
+
+    return <div className="pb-8"><Suspense fallback={<TabGroup selectedIndex={selectedTab}>
+      <TabsContent tabs={tabs} tabNames={tabNames} /></TabGroup>}>
+      <TabsClient initialTab={selectedTab} tabs={tabNames}>
+        <TabsContent tabs={tabs} tabNames={tabNames} />
+      </TabsClient>
+    </Suspense>
+    </div>
+
+  }
+
+export default Tabs;

package/src/tabs/TabsClient.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { FC, ReactNode, forwardRef, useState } from "react";
+import { TabGroup } from "@headlessui/react"
+import Link from "next/link";
+import clsx from "clsx";
+
+export type TabConfig = {
+  name: string,
+  displayName: string
+  className?: string
+  content: ReactNode
+}
+
+export const createNavUrl = (index: number, tabs: string[], pathname: string, searchParams: URLSearchParams) => {
+  const lastSegment = pathname.split(`/`).pop();
+  let newPath = pathname;
+
+  if (lastSegment && tabs.includes(lastSegment)) {
+    newPath = pathname.substring(0, pathname.lastIndexOf(`/`));
+  }
+
+  const newTab = index > 0 ? tabs[index] : ``;
+  newPath = newPath + `/` + newTab;
+
+  const query = searchParams.toString();
+
+  if (query)
+    return (newPath + `?` + query);
+  else
+    return newPath;
+}
+
+export const TabLink = forwardRef<HTMLAnchorElement, React.PropsWithChildren<{
+  index: number, tabs: string[], className: string
+}>>((props, ref) => {
+
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  return <Link prefetch={false} role="tab" {...props} className={clsx(`data-[selected]:border-secondary data-[selected]:text-link-light dark:data-[selected]:text-sky-300`,
+    `border-transparent text-content-secondary hover:border-secondary hover:text-sky-600 dark:hover:text-sky-200 `,
+    `whitespace-nowrap border-b-2 mx-3 px-2 py-2 text-base font-semibold`)} ref={ref} href={createNavUrl(props.index, props.tabs, pathname, searchParams)}
+  >
+    {props.children}
+  </Link >
+});
+
+TabLink.displayName = `TabLink`;
+
+const TabsClient: FC<{
+  children: ReactNode,
+  initialTab: number,
+  tabs: string[]
+}> = ({
+  children,
+  tabs,
+  initialTab
+}) => {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const [selectedTab, setSelectedTab] = useState(initialTab);
+
+    return <TabGroup className="text-content-primary" manual selectedIndex={selectedTab}
+      defaultIndex={initialTab} onChange={(index) => {
+        router.push(createNavUrl(index, tabs, pathname, searchParams));
+        setSelectedTab(index);
+      }}>
+      {children}
+    </TabGroup>
+  }
+
+export default TabsClient

package/src/tabs/index.ts

@@ -0,0 +1,3 @@
+// Client-safe exports — can be imported from 'use client' components
+export type { TabConfig } from './TabsClient'
+export { default as TabsClient, createNavUrl, TabLink } from './TabsClient'

package/src/tabs/server.ts

@@ -0,0 +1,2 @@
+// Server-only exports — must NOT be imported from 'use client' components
+export { default as Tabs, TabsContent } from './Tabs'

package/src/themeselector/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useTheme } from 'next-themes'
-import { Listbox } from '@headlessui/react'
+import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/react'
 import clsx from 'clsx'
 
 const themes = [
@@ -61,8 +61,8 @@ export function ThemeSelector(
 
   return (
     <Listbox as="div" value={theme} onChange={setTheme} {...props}>
-      <Listbox.Label className="sr-only">Theme</Listbox.Label>
-      <Listbox.Button
+      <ListboxLabel className="sr-only">Theme</ListboxLabel>
+      <ListboxButton
         className="flex h-9 w-12 mt-3 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
         aria-label="Theme"
       >
@@ -78,20 +78,20 @@ export function ThemeSelector(
             theme === 'system' ? 'fill-slate-400' : 'fill-sky-400',
           )}
         />
-      </Listbox.Button>
-      <Listbox.Options className="absolute left-1/2 top-full mt-3 w-36 -translate-x-1/2 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/5">
+      </ListboxButton>
+      <ListboxOptions className="absolute left-1/2 top-full mt-3 w-36 -translate-x-1/2 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/5">
         {themes.map((theme) => (
-          <Listbox.Option
+          <ListboxOption
             key={theme.value}
             value={theme.value}
-            className={({ active, selected }) =>
+            className={({ focus, selected }) =>
               clsx(
                 'flex cursor-pointer select-none items-center rounded-[0.625rem] p-1',
                 {
                   'text-sky-500': selected,
-                  'text-slate-900 dark:text-white': active && !selected,
-                  'text-slate-700 dark:text-slate-400': !active && !selected,
-                  'bg-slate-100 dark:bg-slate-900/40': active,
+                  'text-slate-900 dark:text-white': focus && !selected,
+                  'text-slate-700 dark:text-slate-400': !focus && !selected,
+                  'bg-slate-100 dark:bg-slate-900/40': focus,
                 },
               )
             }
@@ -111,9 +111,9 @@ export function ThemeSelector(
                 <div className="ml-3">{theme.name}</div>
               </>
             )}
-          </Listbox.Option>
+          </ListboxOption>
         ))}
-      </Listbox.Options>
+      </ListboxOptions>
     </Listbox>
   )
 }

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

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

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

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

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

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

@@ -1,66 +0,0 @@
-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 clsx from 'clsx'
-
-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={clsx(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

@@ -1,69 +0,0 @@
-.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%;
-  }
-}