@dbosoft/nextjs-uicore 1.5.1 → 1.6.1

package/src/subnav/index.tsx

@@ -1,135 +1,134 @@
-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'
-import MenuItemsDefault from './partials/MenuItemsDefault'
-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;
-
-export interface IDropDownMenuItem {
-  text: string,
-  submenu: ILinkMenuItem[]
-}
-
-export interface ILinkMenuItem {
-  text: string,
-  url: string,
-  type: 'inbound' | 'outbound' | 'anchor'
-  active?: boolean
-}
-
-export interface ITitleLink {
-  url: string,
-  text?: string,
-}
-
-
-export interface ICtaItem {
-  text: string,
-  url: string,
-  variant?: Variant
-  linktype?: LinkType
-  className?: string,
-}
-
-export interface SubNavLabels {
-  openMainMenu: string
-}
-
-const defaultSubNavLabels: SubNavLabels = {
-  openMainMenu: 'Open main menu',
-}
-
-interface ISubNavProps {
-  titleLink?: ITitleLink,
-  titleContent?: React.JSX.Element,
-  ctaLinks: ICtaItem[],
-  hideGithubStars: boolean
-  menuItems: MenuItem[],
-  menuItemsAlign: 'left' | 'right',
-  className?: string,
-  labels?: Partial<SubNavLabels>
-}
-
-function Subnav({
-  className,
-  titleLink,
-  ctaLinks = [],
-  hideGithubStars,
-  menuItems,
-  menuItemsAlign = `right`,
-  titleContent,
-  labels: labelsProp
-}: ISubNavProps) {
-  const labels = { ...defaultSubNavLabels, ...labelsProp }
-
-  const { isStuck, stuckRef } = useStuckRef([])
-
-  return (
-    <div className={clsx(style.root, `bg-white dark:bg-slate-900`, className, {
-      [style.isSticky]: isStuck,
-    })} ref={stuckRef}>
-      <Disclosure as="nav" >
-        {({ open }) => (
-          <>
-            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-              <div className="flex justify-between h-16">
-                <div className={clsx(`flex grow`, menuItemsAlign == `right` ? ` justify-between` : ``)}>
-                
-                  <div className="flex-shrink-0 flex items-center ">
-                    {titleLink &&<TitleLink
-                      text={titleLink.text}
-
-                      url={titleLink.url} >{titleContent}</TitleLink>}
-                      {!titleLink && titleContent}
-                  </div>
-                  <div className="hidden sm:-my-px sm:ml-6 sm:flex">
-                    <MenuItemsDefault
-                      menuItems={menuItems}
-                    />
-                    <CtaLinks
-                      hideGithubStars={hideGithubStars}
-                      isInDropdown={false}
-                      links={ctaLinks}
-                    />
-                  </div>
-                </div>
-
-                <div className="-mr-2 flex items-center sm:hidden ">
-                  {/* Mobile menu button */}
-                  <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">{labels.openMainMenu}</span>
-                    {open ? (
-                      <XMarkIcon aria-hidden="true" className="block h-6 w-6" />
-                    ) : (
-                      <Bars3Icon aria-hidden="true" className="block h-6 w-6" />
-                    )}
-                  </DisclosureButton>
-                </div>
-              </div>
-
-            </div>
-
-            <DisclosurePanel className="sm:hidden">
-              <div className="pt-2 pb-3 space-y-1">
-                <MenuItemsOverflow
-                  ctaLinks={ctaLinks}
-                  hideGithubStars={hideGithubStars}
-                  menuItems={menuItems}
-                />          </div>
-
-            </DisclosurePanel>
-          </>
-        )}
-      </Disclosure>
-    </div>
-  )
-}
-
-export default Subnav
+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'
+import MenuItemsDefault from './partials/MenuItemsDefault'
+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'
+
+export type MenuItem = 'divider' | ILinkMenuItem;
+
+export interface IDropDownMenuItem {
+  text: string,
+  submenu: ILinkMenuItem[]
+}
+
+export interface ILinkMenuItem {
+  text: string,
+  url: string,
+  type: 'inbound' | 'outbound' | 'anchor'
+  active?: boolean
+}
+
+export interface ITitleLink {
+  url: string,
+  text?: string,
+}
+
+
+export interface ICtaItem {
+  text: string,
+  url: string,
+  variant?: Variant
+  linktype?: LinkType
+  className?: string,
+}
+
+export interface SubNavLabels {
+  openMainMenu: string
+}
+
+const defaultSubNavLabels: SubNavLabels = {
+  openMainMenu: 'Open main menu',
+}
+
+interface ISubNavProps {
+  titleLink?: ITitleLink,
+  titleContent?: React.JSX.Element,
+  ctaLinks: ICtaItem[],
+  hideGithubStars: boolean
+  menuItems: MenuItem[],
+  menuItemsAlign: 'left' | 'right',
+  className?: string,
+  labels?: Partial<SubNavLabels>
+}
+
+function Subnav({
+  className,
+  titleLink,
+  ctaLinks = [],
+  hideGithubStars,
+  menuItems,
+  menuItemsAlign = `right`,
+  titleContent,
+  labels: labelsProp
+}: ISubNavProps) {
+  const labels = { ...defaultSubNavLabels, ...labelsProp }
+
+  const { isStuck, stuckRef } = useStuckRef([])
+
+  return (
+    <div className={clsx(style.root, `bg-white dark:bg-slate-900`, className, {
+      [style.isSticky]: isStuck,
+    })} ref={stuckRef}>
+      <Disclosure as="nav" >
+        {({ open }) => (
+          <>
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+              <div className="flex justify-between h-16">
+                <div className={clsx(`flex grow`, menuItemsAlign == `right` ? ` justify-between` : ``)}>
+                
+                  <div className="flex-shrink-0 flex items-center ">
+                    {titleLink &&<TitleLink
+                      text={titleLink.text}
+
+                      url={titleLink.url} >{titleContent}</TitleLink>}
+                      {!titleLink && titleContent}
+                  </div>
+                  <div className="hidden sm:-my-px sm:ml-6 sm:flex">
+                    <MenuItemsDefault
+                      menuItems={menuItems}
+                    />
+                    <CtaLinks
+                      hideGithubStars={hideGithubStars}
+                      isInDropdown={false}
+                      links={ctaLinks}
+                    />
+                  </div>
+                </div>
+
+                <div className="-mr-2 flex items-center sm:hidden ">
+                  {/* Mobile menu button */}
+                  <DisclosureButton className="bg-white inline-flex items-center justify-center p-2 rounded-control 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">{labels.openMainMenu}</span>
+                    {open ? (
+                      <XMarkIcon aria-hidden="true" className="block h-6 w-6" />
+                    ) : (
+                      <Bars3Icon aria-hidden="true" className="block h-6 w-6" />
+                    )}
+                  </DisclosureButton>
+                </div>
+              </div>
+
+            </div>
+
+            <DisclosurePanel className="sm:hidden">
+              <div className="pt-2 pb-3 space-y-1">
+                <MenuItemsOverflow
+                  ctaLinks={ctaLinks}
+                  hideGithubStars={hideGithubStars}
+                  menuItems={menuItems}
+                />          </div>
+
+            </DisclosurePanel>
+          </>
+        )}
+      </Disclosure>
+    </div>
+  )
+}
+
+export default Subnav

package/src/subnav/partials/CtaLinks/github-stars-link/formatStarCount/index.test.js

@@ -1,25 +1,25 @@
-import formatStarCount from './index.js'
-
-describe('<Subnav /> - formatStarCount', () => {
-  it('should return zero for an undefined, null, or zero count', () => {
-    expect(formatStarCount(undefined)).toBe(false)
-    expect(formatStarCount(null)).toBe(false)
-    expect(formatStarCount(0)).toBe(false)
-  })
-
-  it('should return numbers 1 to 999 without formatting', () => {
-    expect(formatStarCount(1)).toBe('1')
-    expect(formatStarCount(999)).toBe('999')
-  })
-
-  it('should abbreviate numbers in the tens of thousands with "k" and a single decimal point', () => {
-    expect(formatStarCount(1003)).toBe('1.0k')
-    expect(formatStarCount(1280)).toBe('1.2k')
-    expect(formatStarCount(15630)).toBe('15.6k')
-  })
-
-  it('should abbreviate numbers in the hundreds of thousands with "k" and no decimal point', () => {
-    expect(formatStarCount(100000)).toBe('100k')
-    expect(formatStarCount(156783)).toBe('156k')
-  })
-})
+import formatStarCount from './index.js'
+
+describe('<Subnav /> - formatStarCount', () => {
+  it('should return zero for an undefined, null, or zero count', () => {
+    expect(formatStarCount(undefined)).toBe(false)
+    expect(formatStarCount(null)).toBe(false)
+    expect(formatStarCount(0)).toBe(false)
+  })
+
+  it('should return numbers 1 to 999 without formatting', () => {
+    expect(formatStarCount(1)).toBe('1')
+    expect(formatStarCount(999)).toBe('999')
+  })
+
+  it('should abbreviate numbers in the tens of thousands with "k" and a single decimal point', () => {
+    expect(formatStarCount(1003)).toBe('1.0k')
+    expect(formatStarCount(1280)).toBe('1.2k')
+    expect(formatStarCount(15630)).toBe('15.6k')
+  })
+
+  it('should abbreviate numbers in the hundreds of thousands with "k" and no decimal point', () => {
+    expect(formatStarCount(100000)).toBe('100k')
+    expect(formatStarCount(156783)).toBe('156k')
+  })
+})

package/src/subnav/partials/CtaLinks/github-stars-link/formatStarCount/index.ts

@@ -1,17 +1,17 @@
-/*
- * Given:
- * starCount (int)
- * Return:
- * Formatted string, to match GitHub's typical display of star counts,
- * that is, expressed as thousands of stars
- * Or returns false for falsy starCount values
- */
-function formatStarCount(starCount: number) {
-  if (!starCount || starCount <= 0) return false
-  if (starCount < 1000) return `${starCount}`
-  const thousands = Math.floor(starCount / 100.0) / 10.0
-  if (starCount < 100000) return `${thousands.toFixed(1)}k`
-  return `${Math.floor(thousands)}k`
-}
-
-export default formatStarCount
+/*
+ * Given:
+ * starCount (int)
+ * Return:
+ * Formatted string, to match GitHub's typical display of star counts,
+ * that is, expressed as thousands of stars
+ * Or returns false for falsy starCount values
+ */
+function formatStarCount(starCount: number) {
+  if (!starCount || starCount <= 0) return false
+  if (starCount < 1000) return `${starCount}`
+  const thousands = Math.floor(starCount / 100.0) / 10.0
+  if (starCount < 100000) return `${thousands.toFixed(1)}k`
+  return `${Math.floor(thousands)}k`
+}
+
+export default formatStarCount

package/src/subnav/partials/CtaLinks/github-stars-link/index.tsx

@@ -1,96 +1,96 @@
-"use client";
-
-import React, { useEffect, useState } from 'react'
-import type { IconObject } from '@dbosoft/react-uicore/linkbutton';
-import LinkButton from '@dbosoft/react-uicore/linkbutton';
-import { StarIcon } from '@heroicons/react/16/solid'
-import GithubIcon from '../icons/github.svg'
-import formatStarCount from './formatStarCount'
-import parseGithubUrl from './parseGithubUrl'
-import Link from 'next/link';
-
-export interface GithubStarsLinkLabels {
-  github: string
-}
-
-const defaultGithubStarsLinkLabels: GithubStarsLinkLabels = {
-  github: 'Github',
-}
-
-function GithubStarsButton({ url, hideGithubStars, labels: labelsProp }: { url: string, hideGithubStars: boolean, labels?: Partial<GithubStarsLinkLabels> }) {
-  const labels = { ...defaultGithubStarsLinkLabels, ...labelsProp }
-  const [starCount, setStarCount] = useState(-1)
-
-  useEffect(() => {
-    if (hideGithubStars) { setStarCount(0); return; }
-    const parseResult = parseGithubUrl(url);
-    const { org, repo } = parseResult !== false ? parseResult : { org: undefined, repo: undefined };
-
-    if (!org || !repo) { setStarCount(0); return; }
-    const githubApiUrl = `https://api.github.com/repos/${org}/${repo}`
-    fetch(githubApiUrl)
-      .then((response) => {
-        response.json().then((data) => {
-          // Github's rate limit for unauthenticated requests is 60 per hour
-          // When the limit is hit, data.stargazers_count is undefined,
-          // and setStarCount falls back to not showing the star count
-          setStarCount(data.stargazers_count)
-          // Warn if this limit is hit, to avoid otherwise confusing behavior
-          //  We're still using the response to provide a documentation link
-          if (!data.stargazers_count) {
-            const { headers } = response
-            if (headers.get('x-ratelimit-remaining') === '0') {
-              const resetAtSeconds = parseInt(headers.get('x-ratelimit-reset') || '')
-              const resetDate = new Date(resetAtSeconds * 1000)
-              const rateLimit = headers.get('x-ratelimit-limit')
-              console.warn(
-                `⭐ Stargazers count could not be fetched. Rate limit exceeded for unauthenticated GitHub API. Limit will be reset to ${rateLimit} at ${resetDate}. See ${data.documentation_url} for more details.`
-              )
-            } else {
-              console.warn(
-                `Request for stargazers was successful, but the returned value was undefined or falsy. This might be because the repo has no stars, or it might be a different issue.`
-              )
-            }
-          }
-        })
-      })
-      .catch((err) => {
-        setStarCount(0)
-        console.warn(JSON.stringify(err, null, 2))
-      })
-  }, [hideGithubStars, url])
-
-  const isLoadingStarCount = starCount === -1
-  const isFailedStarCount = formatStarCount(starCount) === false
-
-  const showStarCount = !hideGithubStars && (isLoadingStarCount || !isFailedStarCount);
-
-  const icon: IconObject = {
-    position: 'right',
-    svg: GithubIcon,
-  }
-
-  return (
-    <LinkButton icon={!showStarCount ? icon : undefined} label={labels.github} text={!showStarCount ? labels.github : ""}
-      variant='neutral'
-      url={url} external
-      Link={Link}
-      >
-      {showStarCount ? <div className="inline-flex">
-        <GithubIcon className="w-5 mr-2" />
-        <div className='-my-2 mx-2 h-9 block bg-gray-300' style={{ width: "1px" }} />
-
-        <span className="inline-flex gap-1 items-center">
-          <StarIcon className='w-5 fill-yellow-500' />
-          <span className="g-type-body-small-strong" data-testid="github-stars">
-            {formatStarCount(starCount) || <span>&mdash;</span>}
-          </span>
-        </span>
-
-      </div> : null}
-    </LinkButton>
-
-  )
-}
-
-export default GithubStarsButton
+"use client";
+
+import React, { useEffect, useState } from 'react'
+import type { IconObject } from '@dbosoft/react-uicore/linkbutton';
+import LinkButton from '@dbosoft/react-uicore/linkbutton';
+import { StarIcon } from '@heroicons/react/16/solid'
+import GithubIcon from '../icons/github.svg'
+import formatStarCount from './formatStarCount'
+import parseGithubUrl from './parseGithubUrl'
+import Link from 'next/link';
+
+export interface GithubStarsLinkLabels {
+  github: string
+}
+
+const defaultGithubStarsLinkLabels: GithubStarsLinkLabels = {
+  github: 'Github',
+}
+
+function GithubStarsButton({ url, hideGithubStars, labels: labelsProp }: { url: string, hideGithubStars: boolean, labels?: Partial<GithubStarsLinkLabels> }) {
+  const labels = { ...defaultGithubStarsLinkLabels, ...labelsProp }
+  const [starCount, setStarCount] = useState(-1)
+
+  useEffect(() => {
+    if (hideGithubStars) { setStarCount(0); return; }
+    const parseResult = parseGithubUrl(url);
+    const { org, repo } = parseResult !== false ? parseResult : { org: undefined, repo: undefined };
+
+    if (!org || !repo) { setStarCount(0); return; }
+    const githubApiUrl = `https://api.github.com/repos/${org}/${repo}`
+    fetch(githubApiUrl)
+      .then((response) => {
+        response.json().then((data) => {
+          // Github's rate limit for unauthenticated requests is 60 per hour
+          // When the limit is hit, data.stargazers_count is undefined,
+          // and setStarCount falls back to not showing the star count
+          setStarCount(data.stargazers_count)
+          // Warn if this limit is hit, to avoid otherwise confusing behavior
+          //  We're still using the response to provide a documentation link
+          if (!data.stargazers_count) {
+            const { headers } = response
+            if (headers.get('x-ratelimit-remaining') === '0') {
+              const resetAtSeconds = parseInt(headers.get('x-ratelimit-reset') || '')
+              const resetDate = new Date(resetAtSeconds * 1000)
+              const rateLimit = headers.get('x-ratelimit-limit')
+              console.warn(
+                `⭐ Stargazers count could not be fetched. Rate limit exceeded for unauthenticated GitHub API. Limit will be reset to ${rateLimit} at ${resetDate}. See ${data.documentation_url} for more details.`
+              )
+            } else {
+              console.warn(
+                `Request for stargazers was successful, but the returned value was undefined or falsy. This might be because the repo has no stars, or it might be a different issue.`
+              )
+            }
+          }
+        })
+      })
+      .catch((err) => {
+        setStarCount(0)
+        console.warn(JSON.stringify(err, null, 2))
+      })
+  }, [hideGithubStars, url])
+
+  const isLoadingStarCount = starCount === -1
+  const isFailedStarCount = formatStarCount(starCount) === false
+
+  const showStarCount = !hideGithubStars && (isLoadingStarCount || !isFailedStarCount);
+
+  const icon: IconObject = {
+    position: 'right',
+    svg: GithubIcon,
+  }
+
+  return (
+    <LinkButton icon={!showStarCount ? icon : undefined} label={labels.github} text={!showStarCount ? labels.github : ""}
+      variant='neutral'
+      url={url} external
+      Link={Link}
+      >
+      {showStarCount ? <div className="inline-flex">
+        <GithubIcon className="w-5 mr-2" />
+        <div className='-my-2 mx-2 h-9 block bg-gray-300' style={{ width: "1px" }} />
+
+        <span className="inline-flex gap-1 items-center">
+          <StarIcon className='w-5 fill-yellow-500' />
+          <span className="g-type-body-small-strong" data-testid="github-stars">
+            {formatStarCount(starCount) || <span>&mdash;</span>}
+          </span>
+        </span>
+
+      </div> : null}
+    </LinkButton>
+
+  )
+}
+
+export default GithubStarsButton

package/src/subnav/partials/CtaLinks/github-stars-link/parseGithubUrl/index.test.js

@@ -1,25 +1,25 @@
-import parseGithubUrl from './index.js'
-
-describe('<Subnav /> - parseGithubUrl', () => {
-  it('should gracefully handle an invalid URL', () => {
-    //  Suppress console.warn for this test, we expect warnings
-    jest.spyOn(console, 'warn')
-    global.console.warn.mockImplementation(() => {})
-    expect(parseGithubUrl(undefined)).toBe(false)
-    expect(parseGithubUrl('blah-blah')).toBe(false)
-    //  Restore console.warn for further tests
-    global.console.warn.mockRestore()
-  })
-
-  it('should handle a non-GitHub URL', () => {
-    expect(parseGithubUrl('https://www.example.com/dbosoft/maxback')).toBe(
-      false
-    )
-  })
-
-  it('should parse the org and repo from a GitHub URL', () => {
-    const testInput = 'https://www.github.com/dbosoft/maxback'
-    expect(parseGithubUrl(testInput).repo).toBe('maxback')
-    expect(parseGithubUrl(testInput).org).toBe('dbosoft')
-  })
-})
+import parseGithubUrl from './index.js'
+
+describe('<Subnav /> - parseGithubUrl', () => {
+  it('should gracefully handle an invalid URL', () => {
+    //  Suppress console.warn for this test, we expect warnings
+    jest.spyOn(console, 'warn')
+    global.console.warn.mockImplementation(() => {})
+    expect(parseGithubUrl(undefined)).toBe(false)
+    expect(parseGithubUrl('blah-blah')).toBe(false)
+    //  Restore console.warn for further tests
+    global.console.warn.mockRestore()
+  })
+
+  it('should handle a non-GitHub URL', () => {
+    expect(parseGithubUrl('https://www.example.com/dbosoft/maxback')).toBe(
+      false
+    )
+  })
+
+  it('should parse the org and repo from a GitHub URL', () => {
+    const testInput = 'https://www.github.com/dbosoft/maxback'
+    expect(parseGithubUrl(testInput).repo).toBe('maxback')
+    expect(parseGithubUrl(testInput).org).toBe('dbosoft')
+  })
+})

package/src/subnav/partials/CtaLinks/github-stars-link/parseGithubUrl/index.ts

@@ -1,25 +1,25 @@
-/*
- * Given:
- * urlString (string) valid URL string
- * Return:
- * { org, repo }, where the url is ~= www.github.com/{org}/{repo}
- * or false otherwise (eg if not a valid URL, or if not a GitHub url)
- */
-function parseGithubUrl(urlString: string) {
-  try {
-    const urlObj = new URL(urlString)
-    if (urlObj.hostname !== 'www.github.com') return false
-    const parts = urlObj.pathname.split('/').filter(Boolean)
-    const org = parts[0]
-    const repo = parts[1]
-    return { org, repo }
-  } catch (err) {
-    console.warn(
-      'Warning! An invalid URL has probably been supplied to the GitHub ctaLink in <Subnav />. The corresponding error:'
-    )
-    console.warn(err)
-    return false
-  }
-}
-
-export default parseGithubUrl
+/*
+ * Given:
+ * urlString (string) valid URL string
+ * Return:
+ * { org, repo }, where the url is ~= www.github.com/{org}/{repo}
+ * or false otherwise (eg if not a valid URL, or if not a GitHub url)
+ */
+function parseGithubUrl(urlString: string) {
+  try {
+    const urlObj = new URL(urlString)
+    if (urlObj.hostname !== 'www.github.com') return false
+    const parts = urlObj.pathname.split('/').filter(Boolean)
+    const org = parts[0]
+    const repo = parts[1]
+    return { org, repo }
+  } catch (err) {
+    console.warn(
+      'Warning! An invalid URL has probably been supplied to the GitHub ctaLink in <Subnav />. The corresponding error:'
+    )
+    console.warn(err)
+    return false
+  }
+}
+
+export default parseGithubUrl