npm - @chronogrove/ui - Versions diffs - 0.79.0 → 0.81.0 - Mend

@chronogrove/ui 0.79.0 → 0.81.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (72) hide show

package/README.md +40 -19
package/package.json +73 -6
package/src/__snapshots__/header.spec.js.snap +8 -8
package/src/__snapshots__/theme.spec.js.snap +39 -20
package/src/action-button.js +6 -6
package/src/action-button.spec.js +14 -2
package/src/action-card-layout.js +13 -0
package/src/action-card-layout.spec.js +13 -0
package/src/animated-page-background/ChronogroveAnimatedPageBackground.js +153 -0
package/src/animated-page-background/ChronogroveAnimatedPageBackground.spec.js +189 -0
package/src/animated-page-background/ColorBends.js +309 -0
package/src/animated-page-background/color-bends.css +13 -0
package/src/animated-page-background/index.js +2 -0
package/src/animated-page-background/index.spec.js +18 -0
package/src/button.js +4 -3
package/src/category-label.js +23 -0
package/src/category-label.spec.js +24 -0
package/src/chevron-icons.js +37 -0
package/src/chronogrove-theme-surface-colors.js +22 -0
package/src/color-mode/browser-sync.js +7 -0
package/src/color-mode/browser-sync.spec.js +7 -0
package/src/color-mode/chronogrove-head-theme.js +22 -0
package/src/color-mode/head-inline.js +40 -5
package/src/color-mode/head-inline.spec.js +29 -0
package/src/color-mode/index.js +3 -0
package/src/color-mode/resolve-theme-colors.js +18 -6
package/src/color-mode/resolve-theme-colors.spec.js +13 -3
package/src/color-mode/spa-navigation.js +14 -0
package/src/color-mode/spa-navigation.spec.js +25 -0
package/src/color-mode/use-document-color-mode-surface.js +52 -0
package/src/color-mode/use-document-color-mode-surface.node.spec.js +12 -0
package/src/color-mode/use-document-color-mode-surface.spec.js +154 -0
package/src/color-toggle-styles.css +10 -0
package/src/color-toggle.js +11 -2
package/src/emotion-cache.node.spec.js +13 -0
package/src/emotion-cache.spec.js +12 -0
package/src/external-link-icon.js +30 -0
package/src/external-link-icon.spec.js +16 -0
package/src/gatsby/build-theme-ui-color-mode-head-components.js +7 -1
package/src/gatsby/index.spec.js +42 -0
package/src/gatsby/on-route-update-color-mode.js +1 -14
package/src/header.js +4 -16
package/src/lazy-load.js +30 -11
package/src/lazy-load.spec.js +9 -5
package/src/metric-badge.js +10 -0
package/src/metric-badge.spec.js +15 -0
package/src/metric-card.js +95 -0
package/src/metric-card.spec.js +60 -0
package/src/muted-card-footer.js +22 -0
package/src/muted-card-footer.spec.js +25 -0
package/src/next/app-shell.js +34 -0
package/src/next/emotion-registry.js +68 -0
package/src/next/emotion-registry.spec.js +99 -0
package/src/next/index.js +4 -0
package/src/next/root-layout-head.js +42 -0
package/src/next/root-layout-head.spec.js +17 -0
package/src/next/theme-ui-color-mode-route-sync.js +32 -0
package/src/page-backdrop.js +42 -0
package/src/page-backdrop.spec.js +41 -0
package/src/pagination-button.js +4 -4
package/src/pagination-button.spec.js +26 -2
package/src/pagination.js +198 -0
package/src/pagination.spec.js +281 -0
package/src/skip-nav/SkipNavLink.js +6 -5
package/src/skip-nav/SkipNavLink.spec.js +11 -0
package/src/status-card.js +18 -0
package/src/status-card.spec.js +38 -0
package/src/theme.js +27 -20
package/src/widget-call-to-action.js +106 -0
package/src/widget-call-to-action.spec.js +115 -0
package/src/widget-section.js +83 -0
package/src/widget-section.spec.js +59 -0

package/src/next/root-layout-head.js ADDED Viewed

@@ -0,0 +1,42 @@
+import {
+  chronogroveHeadTheme,
+  resolveChronogroveSurfaceColors,
+  buildThemeUiNoFlashInlineScript,
+  buildHtmlBackgroundInlineScript,
+  buildThemeUiColorModeFallbackCss
+} from '../color-mode/index.js'
+/**
+ * Server Component fragment for the root `<head>`: Emotion insertion point, Theme UI no-flash
+ * script, HTML background script, and fallback CSS (same composition as
+ * `buildThemeUiColorModeHeadComponents` for Gatsby).
+ */
+export function ChronogroveNextRootLayoutHead() {
+  const surface = resolveChronogroveSurfaceColors(chronogroveHeadTheme)
+  const colorModeScript = buildThemeUiNoFlashInlineScript()
+  const htmlBackgroundScript = buildHtmlBackgroundInlineScript({
+    defaultBackgroundHex: surface.defaultBackgroundHex,
+    darkBackgroundHex: surface.darkBackgroundHex
+  })
+  const colorModeFallbackCSS = buildThemeUiColorModeFallbackCss({
+    defaultBackgroundHex: surface.defaultBackgroundHex,
+    darkBackgroundHex: surface.darkBackgroundHex,
+    defaultTextHex: surface.defaultTextHex,
+    defaultTextMutedHex: surface.defaultTextMutedHex,
+    darkTextHex: surface.darkTextHex,
+    darkTextMutedHex: surface.darkTextMutedHex,
+    defaultPanelBackground: surface.defaultPanelBackground,
+    darkPanelBackground: surface.darkPanelBackground,
+    defaultPanelText: surface.defaultPanelText,
+    darkPanelText: surface.darkPanelText
+  })
+  return (
+    <>
+      <meta name='emotion-insertion-point' content='' />
+      <script dangerouslySetInnerHTML={{ __html: colorModeScript }} />
+      <script dangerouslySetInnerHTML={{ __html: htmlBackgroundScript }} />
+      <style dangerouslySetInnerHTML={{ __html: colorModeFallbackCSS }} />
+    </>
+  )
+}

package/src/next/root-layout-head.spec.js ADDED Viewed

@@ -0,0 +1,17 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render } from '@testing-library/react'
+import { ChronogroveNextRootLayoutHead } from './root-layout-head.js'
+describe('ChronogroveNextRootLayoutHead', () => {
+  it('emits scripts and fallback CSS (meta belongs in document <head> in real App Router layouts)', () => {
+    const { container } = render(<ChronogroveNextRootLayoutHead />)
+    // RTL renders into a div; React omits invalid <meta> there — in Next, `<head><ChronogroveNextRootLayoutHead /></head>` keeps the meta.
+    expect(container.querySelectorAll('script')).toHaveLength(2)
+    expect(container.querySelector('style')).toBeTruthy()
+    expect(container.textContent).toMatch(/theme-ui-color-mode/)
+  })
+})

package/src/next/theme-ui-color-mode-route-sync.js ADDED Viewed

@@ -0,0 +1,32 @@
+'use client'
+import { useEffect, useRef } from 'react'
+import { usePathname } from 'next/navigation'
+import { reconcileThemeUiColorModeOnNavigation } from '../color-mode/index.js'
+/**
+ * Keeps Theme UI color mode aligned after Next.js **client-side navigations** (same role as Gatsby
+ * `onRouteUpdate`). Do **not** run on initial mount: `reconcileThemeUiColorModeOnNavigation` syncs the
+ * DOM from `localStorage`, while Theme UI applies a toggle by updating React state first and writing
+ * `localStorage` in a `useEffect` — an eager reconcile can re-read stale `localStorage` and force
+ * the page back to the previous mode (e.g. stuck in dark).
+ */
+export function ChronogroveNextThemeUiColorModeRouteSync() {
+  const pathname = usePathname()
+  const previousPathname = useRef(null)
+  useEffect(() => {
+    if (previousPathname.current === null) {
+      previousPathname.current = pathname
+      return
+    }
+    if (previousPathname.current === pathname) {
+      return
+    }
+    previousPathname.current = pathname
+    reconcileThemeUiColorModeOnNavigation()
+  }, [pathname])
+  return null
+}

package/src/page-backdrop.js ADDED Viewed

@@ -0,0 +1,42 @@
+'use client'
+import { Box } from '@theme-ui/components'
+import { useColorMode } from 'theme-ui'
+import isDarkMode from './helpers/isDarkMode.js'
+/**
+ * Fixed viewport layer behind page content (`z-index: 0`), matching the role of
+ * `AnimatedPageBackground` on the Gatsby home: a real surface under `z-index: 1` UI so
+ * frosted panels (`backdrop-filter` + `panel-background`) have something to blur and tint
+ * against. The full site uses WebGL Color Bends there; this package ships a **lightweight**
+ * CSS gradient treatment only (no three.js).
+ */
+export function ChronogrovePageBackdrop() {
+  const [colorMode] = useColorMode()
+  const dark = isDarkMode(colorMode)
+  return (
+    <Box
+      aria-hidden
+      sx={{
+        position: 'fixed',
+        inset: 0,
+        width: '100vw',
+        minHeight: '100vh',
+        zIndex: 0,
+        pointerEvents: 'none',
+        bg: 'background',
+        // Dark: subtle primary/secondary glows — same intent as Color Bends, fraction of the cost.
+        backgroundImage: dark
+          ? `
+            radial-gradient(ellipse 120% 85% at 50% -15%, rgba(74, 158, 255, 0.16) 0%, transparent 52%),
+            radial-gradient(ellipse 90% 70% at 95% 85%, rgba(113, 30, 155, 0.12) 0%, transparent 48%),
+            radial-gradient(ellipse 70% 50% at 10% 60%, rgba(128, 0, 128, 0.08) 0%, transparent 45%)
+          `
+          : 'none',
+        transition: 'background-image 0.3s ease'
+      }}
+    />
+  )
+}

package/src/page-backdrop.spec.js ADDED Viewed

@@ -0,0 +1,41 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render } from '@testing-library/react'
+import { ThemeUIProvider } from 'theme-ui'
+import chronogroveTheme from './theme.js'
+import { ChronogrovePageBackdrop } from './page-backdrop.js'
+describe('ChronogrovePageBackdrop', () => {
+  beforeEach(() => {
+    window.localStorage.removeItem('theme-ui-color-mode')
+  })
+  it('renders a fixed backdrop layer', () => {
+    const { container } = render(
+      <ThemeUIProvider theme={chronogroveTheme}>
+        <ChronogrovePageBackdrop />
+      </ThemeUIProvider>
+    )
+    const layer = container.querySelector('[aria-hidden="true"]')
+    expect(layer).toBeTruthy()
+  })
+  it('adds gradient overlays in dark mode', () => {
+    window.localStorage.setItem('theme-ui-color-mode', 'dark')
+    const { container } = render(
+      <ThemeUIProvider
+        theme={{
+          ...chronogroveTheme,
+          config: { useLocalStorage: true, useColorSchemeMediaQuery: false }
+        }}
+      >
+        <ChronogrovePageBackdrop />
+      </ThemeUIProvider>
+    )
+    const layer = container.querySelector('[aria-hidden="true"]')
+    expect(window.getComputedStyle(layer).backgroundImage).toMatch(/radial-gradient/)
+  })
+})

package/src/pagination-button.js CHANGED Viewed

@@ -1,6 +1,6 @@
-/** @jsx jsx */
 import React from 'react'
-import { jsx, useThemeUI } from 'theme-ui'
+import { Box } from '@theme-ui/components'
+import { useThemeUI } from 'theme-ui'
 import isDarkMode from './helpers/isDarkMode.js'
 import { hexToRgb } from './color-utils.js'
@@ -97,9 +97,9 @@ const PaginationButton = ({
   )
   return (
-    <button type='button' onClick={onClick} disabled={disabled} sx={baseStyles} {...props}>
+    <Box as='button' type='button' onClick={onClick} disabled={disabled} sx={baseStyles} {...props}>
       {content}
-    </button>
+    </Box>
   )
 }

package/src/pagination-button.spec.js CHANGED Viewed

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from 'theme-ui'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { ThemeUIProvider } from 'theme-ui'
@@ -96,6 +94,20 @@ describe('PaginationButton', () => {
     })
   })
+  it('uses dark secondary palette when color mode is dark', () => {
+    mockUseThemeUI.mockReturnValueOnce({
+      colorMode: 'dark',
+      theme: {
+        colors: {
+          primary: BUTTON_PRIMARY_COLORS.light,
+          primaryRgb: '66, 46, 163'
+        }
+      }
+    })
+    renderWithProviders(<PaginationButton variant='secondary'>2</PaginationButton>)
+    expect(screen.getByRole('button', { name: /2/i })).toHaveStyle({ color: '#888' })
+  })
   it('applies small size styles', () => {
     renderWithProviders(<PaginationButton size='small'>1</PaginationButton>)
@@ -118,6 +130,18 @@ describe('PaginationButton', () => {
     })
   })
+  it('falls back to medium size when size is invalid', () => {
+    renderWithProviders(<PaginationButton size='invalid'>1</PaginationButton>)
+    const button = screen.getByRole('button', { name: /1/i })
+    expect(button).toHaveStyle({
+      fontSize: '11px',
+      minWidth: '28px',
+      height: '28px',
+      padding: '6px 10px'
+    })
+  })
   it('renders with icon', () => {
     const TestIcon = () => <span data-testid='test-icon'>←</span>
     renderWithProviders(<PaginationButton icon={<TestIcon />}>Prev</PaginationButton>)

package/src/pagination.js ADDED Viewed

@@ -0,0 +1,198 @@
+import React from 'react'
+import { Box } from '@theme-ui/components'
+import PaginationButton from './pagination-button.js'
+import { ChevronLeftIcon, ChevronRightIcon } from './chevron-icons.js'
+/**
+ * Full pagination control (prev/next + page numbers, or simple mode).
+ * Default prev/next icons are inline SVGs; pass `prevIcon` / `nextIcon` to override.
+ */
+const Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  variant = 'primary',
+  size = 'medium',
+  showPageInfo = true,
+  maxVisiblePages = 5,
+  simple = false,
+  prevIcon = <ChevronLeftIcon />,
+  nextIcon = <ChevronRightIcon />
+}) => {
+  const goToPage = page => {
+    if (page >= 1 && page <= totalPages && page !== currentPage) {
+      onPageChange(page)
+    }
+  }
+  const goToPrevious = () => goToPage(currentPage - 1)
+  const goToNext = () => goToPage(currentPage + 1)
+  const getVisiblePages = () => {
+    const pages = []
+    const halfVisible = Math.floor(maxVisiblePages / 2)
+    let startPage = Math.max(1, currentPage - halfVisible)
+    let endPage = Math.min(totalPages, currentPage + halfVisible)
+    if (endPage - startPage + 1 < maxVisiblePages) {
+      if (startPage === 1) {
+        endPage = Math.min(totalPages, startPage + maxVisiblePages - 1)
+      } else {
+        startPage = Math.max(1, endPage - maxVisiblePages + 1)
+      }
+    }
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i)
+    }
+    return pages
+  }
+  if (totalPages <= 1) {
+    return null
+  }
+  const visiblePages = getVisiblePages()
+  if (simple) {
+    return (
+      <Box sx={{ width: '100%' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: 1.5
+          }}
+        >
+          <PaginationButton
+            onClick={goToPrevious}
+            disabled={currentPage === 1}
+            variant={variant}
+            size={size}
+            icon={prevIcon}
+            aria-label='Previous page'
+          />
+          {showPageInfo && (
+            <Box as='span' sx={{ fontSize: 0, color: 'textMuted' }}>
+              {currentPage}/{totalPages}
+            </Box>
+          )}
+          <PaginationButton
+            onClick={goToNext}
+            disabled={currentPage === totalPages}
+            variant={variant}
+            size={size}
+            icon={nextIcon}
+            aria-label='Next page'
+          />
+        </Box>
+      </Box>
+    )
+  }
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          mt: 4,
+          gap: [1, 2]
+        }}
+      >
+        <PaginationButton
+          onClick={goToPrevious}
+          disabled={currentPage === 1}
+          variant={variant}
+          size={size}
+          icon={prevIcon}
+          aria-label='Previous page'
+        />
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            mx: 2
+          }}
+        >
+          {visiblePages[0] > 1 && (
+            <>
+              <PaginationButton onClick={() => goToPage(1)} variant={variant} size={size} aria-label='Go to page 1'>
+                1
+              </PaginationButton>
+              {visiblePages[0] > 2 && (
+                <Box as='span' sx={{ color: 'textMuted', fontSize: '12px', px: 1 }}>
+                  ...
+                </Box>
+              )}
+            </>
+          )}
+          {visiblePages.map(page => (
+            <PaginationButton
+              key={page}
+              onClick={() => goToPage(page)}
+              active={page === currentPage}
+              variant={variant}
+              size={size}
+              aria-label={`Go to page ${page}`}
+              aria-current={page === currentPage ? 'page' : undefined}
+            >
+              {page}
+            </PaginationButton>
+          ))}
+          {visiblePages[visiblePages.length - 1] < totalPages && (
+            <>
+              {visiblePages[visiblePages.length - 1] < totalPages - 1 && (
+                <Box as='span' sx={{ color: 'textMuted', fontSize: '12px', px: 1 }}>
+                  ...
+                </Box>
+              )}
+              <PaginationButton
+                onClick={() => goToPage(totalPages)}
+                variant={variant}
+                size={size}
+                aria-label={`Go to page ${totalPages}`}
+              >
+                {totalPages}
+              </PaginationButton>
+            </>
+          )}
+        </Box>
+        <PaginationButton
+          onClick={goToNext}
+          disabled={currentPage === totalPages}
+          variant={variant}
+          size={size}
+          icon={nextIcon}
+          aria-label='Next page'
+        />
+      </Box>
+      {showPageInfo && (
+        <Box
+          sx={{
+            textAlign: 'center',
+            mt: 2,
+            fontSize: 0,
+            color: 'textMuted',
+            display: 'block'
+          }}
+        >
+          Page {currentPage} of {totalPages}
+        </Box>
+      )}
+    </Box>
+  )
+}
+export default Pagination