@dbosoft/nextjs-uicore 1.0.3 → 1.1.0

package/CHANGELOG.md

@@ -1,30 +1,36 @@
-# @dbosoft/nextjs-uicore
-
-## 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.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,14 +2,15 @@
   "name": "@dbosoft/nextjs-uicore",
   "description": "Core UI components for Next.js",
   "author": "dbosoft",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "sideEffects": false,
   "license": "MIT",
   "exports": {
     ".": "./src",
     "./head": "./src/head/index.tsx",
     "./tabs": "./src/tabs/index.tsx",
-    "./subnav": "./src/subnav/index.tsx"
+    "./subnav": "./src/subnav/index.tsx",
+    "./themeselector": "./src/themeselector/index.tsx"
   },
   "devDependencies": {
     "@types/react": "^18.2.46",
@@ -18,9 +19,9 @@
     "next": "^14.0.4",
     "react": "^18.2.0",
     "typescript": "^5.3.3",
-    "@dbosoft/web-types": "1.0.0",
     "@dbosoft/eslint-config": "1.0.0",
-    "@dbosoft/typescript-config": "1.0.0"
+    "@dbosoft/typescript-config": "1.0.0",
+    "@dbosoft/web-types": "1.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -29,7 +30,9 @@
     "@headlessui/react": "^1.4.3",
     "@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"
   },

package/src/subnav/index.tsx

@@ -1,6 +1,5 @@
 import { Disclosure } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
-import classNames from 'classnames'
 import type { LinkType, Variant } from '@dbosoft/react-uicore/linkbutton'
 import MenuItemsOverflow from './partials/MenuItemsOverflow'
 import MenuItemsDefault from './partials/MenuItemsDefault'
@@ -8,6 +7,8 @@ import CtaLinks from './partials/CtaLinks'
 import useStuckRef from './helpers/useStuckRef'
 import TitleLink from './partials/TitleLink'
 import style from './style.module.scss'
+import clsx from 'clsx'
+import { ThemeSelector } from '../themeselector'
 
 export type MenuItem = 'divider' | ILinkMenuItem;
 
@@ -41,7 +42,7 @@ interface ISubNavProps {
   titleLink?: ITitleLink,
   titleContent?: JSX.Element,
   ctaLinks: ICtaItem[],
-  hideGithubStars: boolean,
+  hideGithubStars: boolean
   menuItems: MenuItem[],
   menuItemsAlign: 'left' | 'right',
   className?: string
@@ -60,7 +61,7 @@ function Subnav({
   const { isStuck, stuckRef } = useStuckRef([])
 
   return (
-    <div className={classNames(style.root, `bg-white`, className, {
+    <div className={clsx(style.root, `bg-white dark:bg-slate-900`, className, {
       [style.isSticky]: isStuck,
     })} ref={stuckRef}>
       <Disclosure as="nav" >
@@ -68,7 +69,7 @@ function Subnav({
           <>
             <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
               <div className="flex justify-between h-16">
-                <div className={classNames(`flex grow`, menuItemsAlign == `right` ? ` justify-between` : ``)}>
+                <div className={clsx(`flex grow`, menuItemsAlign == `right` ? ` justify-between` : ``)}>
                 
                   <div className="flex-shrink-0 flex items-center ">
                     {titleLink &&<TitleLink
@@ -88,6 +89,7 @@ function Subnav({
                     />
                   </div>
                 </div>
+
                 <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">
@@ -100,6 +102,7 @@ function Subnav({
                   </Disclosure.Button>
                 </div>
               </div>
+
             </div>
 
             <Disclosure.Panel className="sm:hidden">
@@ -108,24 +111,7 @@ function Subnav({
                   ctaLinks={ctaLinks}
                   hideGithubStars={hideGithubStars}
                   menuItems={menuItems}
-                />
-                {/*              {navigation.map((item) => (
-                <Disclosure.Button
-                  key={item.name}
-                  as="a"
-                  href={item.href}
-                  className={classNames(
-                    item.current
-                      ? 'bg-indigo-50 border-indigo-500 text-indigo-700'
-                      : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800',
-                    'block pl-3 pr-4 py-2 border-l-4 text-base font-medium'
-                  )}
-                  aria-current={item.current ? 'page' : undefined}
-                >
-                  {item.name}
-                </Disclosure.Button>
-              ))}
-   */}          </div>
+                />          </div>
 
             </Disclosure.Panel>
           </>

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import clsx from 'clsx'
 import LinkButton from '@dbosoft/react-uicore/linkbutton'
 import Link from 'next/link'
 import type { ICtaItem } from '../..'
@@ -11,7 +11,7 @@ function CtaLinks(props: {
 }) {
   const { links, hideGithubStars, isInDropdown } = props
   return (
-    <div className={classNames("flex gap-2", isInDropdown ? "pt-4 flex-col" : "items-center ml-4 space-x-1 ")}>
+    <div className={clsx("flex gap-2", isInDropdown ? "pt-4 flex-col" : "items-center ml-4 space-x-1 ")}>
       {links.map((link, stableIdx) => {
 
         const textKey = link.text.toLowerCase()

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

@@ -13,17 +13,6 @@ function MenuItemsDefault(props: {
   return (
     <ul
       className="inline-flex items-center">
-      {/*      <a
-        key={item.name}
-        href={item.href}
-        className={classNames(
-          item.current
-            ? 'border-indigo-500 text-gray-900'
-            : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
-          'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium'
-        )}
-        aria-current={item.current ? 'page' : undefined}
-        ></a> */}
       {menuItems.map((menuItem, stableIdx) => {
         if (menuItem === 'divider') {
           return <VerticalDivider key={stableIdx} />
@@ -42,7 +31,7 @@ function MenuItemsDefault(props: {
 function VerticalDivider() {
   return (
     <li>
-      <span className="bg-gray-400 w-0.5 h-6 mx-1 block" />
+      <span className="bg-gray-400 dark:bg-gray-200 w-0.5 h-6 mx-1 block" />
     </li>
   )
 }

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

@@ -5,7 +5,7 @@ import CtaLinks from '../CtaLinks'
 import type { ICtaItem, MenuItem } from '../..'
 import s from './style.module.scss'
 import Link from 'next/link';
-
+import clsx from 'clsx'
 
 interface MenuItemsOverflowProps {
   menuItems: MenuItem[],
@@ -39,9 +39,10 @@ export default function MenuItemsOverflow({ menuItems, ctaLinks, hideGithubStars
 }
 
 function SubmenuItem({ url, text, active }: { url: string; text: string; active: boolean }) {
+
   return (
     <li>
-      <LinkWrap Link={Link} className={s.submenuItem} href={url} title={text}>
+      <LinkWrap Link={Link} className={clsx(s.submenuItem, "text-black dark:text-white" )} href={url} title={text}>
         {text}
       </LinkWrap>
     </li>

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import clsx from 'clsx'
 import React from 'react'
 
 /**
@@ -19,7 +19,7 @@ function NavItemText({
 }): React.ReactElement {
   return (
     <span
-      className={classNames("text-black text-sm font-semibold", isActive ? "border-b-2 pb-2 border-black" : "")}
+      className={clsx("text-black dark:text-white text-sm font-semibold", isActive ? "border-b-2 pb-2 border-black" : "")}
     >
       {text}
     </span>

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

@@ -3,7 +3,7 @@ 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'
+import clsx from 'clsx'
 
 export interface TabTriggerType {
   index: number
@@ -39,7 +39,7 @@ function TabTrigger({
 
   return (
     <button
-      className={classNames(s.root, {
+      className={clsx(s.root, {
         [s.isActiveTab]: isActiveTab,
         [s.hasOverflow]: hasOverflow,
       })}

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

@@ -1,6 +1,6 @@
 import React, { MouseEventHandler, useCallback, useEffect, useRef, useState } from 'react'
-import classNames from 'classnames'
-import InlineSvg from '@dbosoft/react-inline-svg'
+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'
@@ -104,7 +104,7 @@ function TabTriggers({
 
   return (
     <div
-      className={classNames(s.root, { [s.fullWidthBorder]: fullWidthBorder })}
+      className={clsx(s.root, { [s.fullWidthBorder]: fullWidthBorder })}
     >
       <div className="g-grid-container">
         {/* Note: the overflowBaseRef element has zero height, but is still "visible".
@@ -114,14 +114,14 @@ function TabTriggers({
       <div className={s.borderAdjuster}>
         <NextPrevScrims hasOverflow={hasOverflow} hiddenArrows={hiddenArrows} />
         <div
-          className={classNames(s.scrollContainer, {
+          className={clsx(s.scrollContainer, {
             [s.centered]: centered,
             [s.hasOverflow]: hasOverflow,
           })}
           ref={scrollRef}
         >
           <div
-            className={classNames(s.tabsWidthContainer, {
+            className={clsx(s.tabsWidthContainer, {
               [s.centered]: centered,
               [s.hasOverflow]: hasOverflow,
             })}
@@ -176,13 +176,13 @@ function NextPrevScrims({ hasOverflow, hiddenArrows }: { hasOverflow: $TSFixMe,
   return (
     <div className={s.scrimContainer}>
       <div
-        className={classNames(s.prevArrowScrim, {
+        className={clsx(s.prevArrowScrim, {
           [s.hasOverflow]: hasOverflow,
           [s.hidden]: hiddenArrows.prev,
         })}
       />
       <div
-        className={classNames(s.nextArrowScrim, {
+        className={clsx(s.nextArrowScrim, {
           [s.hasOverflow]: hasOverflow,
           [s.hidden]: hiddenArrows.next,
         })}
@@ -196,7 +196,7 @@ function NextPrevArrows({ hasOverflow, hiddenArrows, onPrev, onNext }
   return (
     <>
       <div
-        className={classNames(s.prevArrow, {
+        className={clsx(s.prevArrow, {
           [s.hasOverflow]: hasOverflow,
           [s.hidden]: hiddenArrows.prev,
         })}
@@ -205,7 +205,7 @@ function NextPrevArrows({ hasOverflow, hiddenArrows, onPrev, onNext }
         <InlineSvg src={SvgChevronRight} />
       </div>
       <div
-        className={classNames(s.nextArrow, {
+        className={clsx(s.nextArrow, {
           [s.hasOverflow]: hasOverflow,
           [s.hidden]: hiddenArrows.next,
         })}
@@ -222,14 +222,14 @@ function BottomBorder({ hasOverflow, fullWidthBorder }: { hasOverflow: $TSFixMe,
     <>
       <div className="g-grid-container">
         <div
-          className={classNames(s.bottomBorder, s.forDefault, {
+          className={clsx(s.bottomBorder, s.forDefault, {
             [s.hasOverflow]: hasOverflow,
             [s.fullWidthBorder]: fullWidthBorder,
           })}
         ></div>
       </div>
       <div
-        className={classNames(s.bottomBorder, s.forOverflow, {
+        className={clsx(s.bottomBorder, s.forOverflow, {
           [s.hasOverflow]: hasOverflow,
           [s.fullWidthBorder]: fullWidthBorder,
         })}

package/src/themeselector/index.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
+import { Listbox } from '@headlessui/react'
+import clsx from 'clsx'
+
+const themes = [
+  { name: 'Light', value: 'light', icon: LightIcon },
+  { name: 'Dark', value: 'dark', icon: DarkIcon },
+  { name: 'System', value: 'system', icon: SystemIcon },
+]
+
+function LightIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7 1a1 1 0 0 1 2 0v1a1 1 0 1 1-2 0V1Zm4 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm2.657-5.657a1 1 0 0 0-1.414 0l-.707.707a1 1 0 0 0 1.414 1.414l.707-.707a1 1 0 0 0 0-1.414Zm-1.415 11.313-.707-.707a1 1 0 0 1 1.415-1.415l.707.708a1 1 0 0 1-1.415 1.414ZM16 7.999a1 1 0 0 0-1-1h-1a1 1 0 1 0 0 2h1a1 1 0 0 0 1-1ZM7 14a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1Zm-2.536-2.464a1 1 0 0 0-1.414 0l-.707.707a1 1 0 0 0 1.414 1.414l.707-.707a1 1 0 0 0 0-1.414Zm0-8.486A1 1 0 0 1 3.05 4.464l-.707-.707a1 1 0 0 1 1.414-1.414l.707.707ZM3 8a1 1 0 0 0-1-1H1a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1Z"
+      />
+    </svg>
+  )
+}
+
+function DarkIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.23 3.333C7.757 2.905 7.68 2 7 2a6 6 0 1 0 0 12c.68 0 .758-.905.23-1.332A5.989 5.989 0 0 1 5 8c0-1.885.87-3.568 2.23-4.668ZM12 5a1 1 0 0 1 1 1 1 1 0 0 0 1 1 1 1 0 1 1 0 2 1 1 0 0 0-1 1 1 1 0 1 1-2 0 1 1 0 0 0-1-1 1 1 0 1 1 0-2 1 1 0 0 0 1-1 1 1 0 0 1 1-1Z"
+      />
+    </svg>
+  )
+}
+
+function SystemIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1 4a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3h-1.5l.31 1.242c.084.333.36.573.63.808.091.08.182.158.264.24A1 1 0 0 1 11 15H5a1 1 0 0 1-.704-1.71c.082-.082.173-.16.264-.24.27-.235.546-.475.63-.808L5.5 11H4a3 3 0 0 1-3-3V4Zm3-1a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4Z"
+      />
+    </svg>
+  )
+}
+
+export function ThemeSelector(
+  props: React.ComponentPropsWithoutRef<typeof Listbox<'div'>>,
+) {
+  let { theme, setTheme } = useTheme()
+  let [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return <div className="h-6 w-6" />
+  }
+
+  return (
+    <Listbox as="div" value={theme} onChange={setTheme} {...props}>
+      <Listbox.Label className="sr-only">Theme</Listbox.Label>
+      <Listbox.Button
+        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"
+      >
+        <LightIcon
+          className={clsx(
+            'h-4 w-4 dark:hidden',
+            theme === 'system' ? 'fill-slate-400' : 'fill-sky-400',
+          )}
+        />
+        <DarkIcon
+          className={clsx(
+            'hidden h-4 w-4 dark:block',
+            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">
+        {themes.map((theme) => (
+          <Listbox.Option
+            key={theme.value}
+            value={theme.value}
+            className={({ active, 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,
+                },
+              )
+            }
+          >
+            {({ selected }) => (
+              <>
+                <div className="rounded-md bg-white p-1 shadow ring-1 ring-slate-900/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5">
+                  <theme.icon
+                    className={clsx(
+                      'h-4 w-4',
+                      selected
+                        ? 'fill-sky-400 dark:fill-sky-400'
+                        : 'fill-slate-400',
+                    )}
+                  />
+                </div>
+                <div className="ml-3">{theme.name}</div>
+              </>
+            )}
+          </Listbox.Option>
+        ))}
+      </Listbox.Options>
+    </Listbox>
+  )
+}