@chronogrove/ui 0.76.0 → 0.78.0

package/src/gatsby/index.spec.js

@@ -0,0 +1,131 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import chronogroveTheme from '../theme.js'
+import * as gatsby from './index.js'
+import { buildThemeUiColorModeHeadComponents } from './build-theme-ui-color-mode-head-components.js'
+import { onPreRenderHTMLSortThemeUiColorModeFirst } from './on-pre-render-html-sort.js'
+import { onRouteUpdateThemeUiColorMode } from './on-route-update-color-mode.js'
+
+describe('@chronogrove/ui/gatsby public API', () => {
+  it('exports reconcile event and helpers from the barrel', () => {
+    expect(gatsby.RECONCILE_COLOR_MODE_EVENT).toBe('theme-ui-reconcile-color-mode')
+    expect(gatsby.buildThemeUiColorModeHeadComponents).toEqual(expect.any(Function))
+    expect(gatsby.onPreRenderHTMLSortThemeUiColorModeFirst).toEqual(expect.any(Function))
+    expect(gatsby.onRouteUpdateThemeUiColorMode).toEqual(expect.any(Function))
+  })
+})
+
+describe('@chronogrove/ui/gatsby', () => {
+  describe('buildThemeUiColorModeHeadComponents', () => {
+    it('returns no-flash script, HTML background script, and fallback style for the theme', () => {
+      const head = buildThemeUiColorModeHeadComponents({ theme: chronogroveTheme })
+      expect(head).toHaveLength(3)
+      expect(head[0].key).toBe('theme-ui-no-flash')
+      expect(head[1].key).toBe('html-bg-color')
+      expect(head[2].key).toBe('theme-ui-color-mode-fallback')
+
+      const { container: colorModeScriptContainer } = render(head[0])
+      const colorModeScriptTag = colorModeScriptContainer.querySelector('script')
+      expect(colorModeScriptTag).toHaveTextContent(/localStorage\.getItem\(['"]theme-ui-color-mode['"]\)/)
+      expect(colorModeScriptTag).toHaveTextContent(/data-theme-ui-color-mode/)
+
+      const { container: htmlBgScriptContainer } = render(head[1])
+      const htmlBgScriptTag = htmlBgScriptContainer.querySelector('script')
+      expect(htmlBgScriptTag).toHaveTextContent(/#14141F/)
+      expect(htmlBgScriptTag).toHaveTextContent(/#fdf8f5/)
+
+      const { container: fallbackStyleContainer } = render(head[2])
+      const fallbackStyle = fallbackStyleContainer.querySelector('style')
+      expect(fallbackStyle).toHaveTextContent(/:root\[data-theme-ui-color-mode="default"\]/)
+      expect(fallbackStyle).toHaveTextContent(/--theme-ui-colors-text: #111 !important/)
+    })
+  })
+
+  describe('onPreRenderHTMLSortThemeUiColorModeFirst', () => {
+    it('puts color-mode scripts and fallback style before other head components', () => {
+      const getHeadComponents = jest.fn(() => [
+        { key: 'emotion-insertion-point', type: 'meta' },
+        { key: 'theme-ui-no-flash', type: 'script' },
+        { key: 'html-bg-color', type: 'script' },
+        { key: 'theme-ui-color-mode-fallback', type: 'style' }
+      ])
+      const replaceHeadComponents = jest.fn()
+
+      onPreRenderHTMLSortThemeUiColorModeFirst({ getHeadComponents, replaceHeadComponents })
+
+      const sorted = replaceHeadComponents.mock.calls[0][0]
+      const colorModeKeys = ['theme-ui-no-flash', 'html-bg-color', 'theme-ui-color-mode-fallback']
+      const firstThree = sorted.slice(0, 3).map(c => c.key)
+      colorModeKeys.forEach(key => expect(firstThree).toContain(key))
+      expect(sorted[3].key).toBe('emotion-insertion-point')
+    })
+
+    it('sorts color-mode keys before arbitrary head components', () => {
+      const getHeadComponents = jest.fn(() => [
+        { key: 'other-meta', type: 'meta' },
+        { key: 'theme-ui-no-flash', type: 'script' },
+        { key: 'another-tag', type: 'link' },
+        { key: 'html-bg-color', type: 'script' },
+        { key: 'theme-ui-color-mode-fallback', type: 'style' }
+      ])
+      const replaceHeadComponents = jest.fn()
+
+      onPreRenderHTMLSortThemeUiColorModeFirst({ getHeadComponents, replaceHeadComponents })
+
+      const sorted = replaceHeadComponents.mock.calls[0][0]
+      const keys = sorted.map(c => c.key)
+      expect(keys.indexOf('theme-ui-no-flash')).toBeLessThan(keys.indexOf('other-meta'))
+      expect(keys.indexOf('html-bg-color')).toBeLessThan(keys.indexOf('another-tag'))
+      expect(keys.indexOf('theme-ui-color-mode-fallback')).toBeLessThan(keys.indexOf('other-meta'))
+    })
+
+    it('preserves relative order among non-priority head components (comparator returns 0)', () => {
+      const getHeadComponents = jest.fn(() => [
+        { key: 'z-last', type: 'meta' },
+        { key: 'a-first', type: 'meta' }
+      ])
+      const replaceHeadComponents = jest.fn()
+      onPreRenderHTMLSortThemeUiColorModeFirst({ getHeadComponents, replaceHeadComponents })
+      expect(replaceHeadComponents.mock.calls[0][0].map(c => c.key)).toEqual(['z-last', 'a-first'])
+    })
+
+    it('preserves relative order among priority keys when both sides are priority (comparator returns 0)', () => {
+      const getHeadComponents = jest.fn(() => [
+        { key: 'html-bg-color', type: 'script' },
+        { key: 'theme-ui-no-flash', type: 'script' }
+      ])
+      const replaceHeadComponents = jest.fn()
+      onPreRenderHTMLSortThemeUiColorModeFirst({ getHeadComponents, replaceHeadComponents })
+      expect(replaceHeadComponents.mock.calls[0][0].map(c => c.key)).toEqual(['html-bg-color', 'theme-ui-no-flash'])
+    })
+  })
+
+  describe('onRouteUpdateThemeUiColorMode', () => {
+    beforeEach(() => {
+      window.localStorage.removeItem('theme-ui-color-mode')
+      document.documentElement.removeAttribute('data-theme-ui-color-mode')
+      document.documentElement.className = ''
+    })
+
+    it('syncs DOM from localStorage and dispatches reconcile event', () => {
+      window.localStorage.setItem('theme-ui-color-mode', 'dark')
+      const listener = jest.fn()
+      window.addEventListener('theme-ui-reconcile-color-mode', listener)
+
+      onRouteUpdateThemeUiColorMode()
+
+      expect(document.documentElement.getAttribute('data-theme-ui-color-mode')).toBe('dark')
+      expect(listener).toHaveBeenCalled()
+    })
+
+    it('does not throw when CustomEvent is unavailable', () => {
+      const original = window.CustomEvent
+      window.CustomEvent = undefined
+      window.localStorage.setItem('theme-ui-color-mode', 'default')
+      expect(() => onRouteUpdateThemeUiColorMode()).not.toThrow()
+      window.CustomEvent = original
+    })
+  })
+})

package/src/gatsby/on-pre-render-html-sort.js

@@ -0,0 +1,21 @@
+import { CHRONOGROVE_COLOR_MODE_HEAD_PRIORITY_KEYS } from '../color-mode/constants.js'
+
+/**
+ * Gatsby `onPreRenderHTML`: move Theme UI color-mode head entries (`theme-ui-no-flash`, `html-bg-color`,
+ * `theme-ui-color-mode-fallback`) before other head components to minimize flash and ordering issues.
+ *
+ * @param {{ getHeadComponents: () => unknown[], replaceHeadComponents: (c: unknown[]) => void }} api
+ */
+export function onPreRenderHTMLSortThemeUiColorModeFirst({ getHeadComponents, replaceHeadComponents }) {
+  const headComponents = getHeadComponents()
+  const priorityKeys = CHRONOGROVE_COLOR_MODE_HEAD_PRIORITY_KEYS
+  const sorted = [...headComponents].sort((a, b) => {
+    const aKey = a?.key ?? ''
+    const bKey = b?.key ?? ''
+    const aFirst = priorityKeys.includes(aKey) ? -1 : 0
+    const bFirst = priorityKeys.includes(bKey) ? -1 : 0
+    if (aFirst !== bFirst) return aFirst - bFirst
+    return 0
+  })
+  replaceHeadComponents(sorted)
+}

package/src/gatsby/on-route-update-color-mode.js

@@ -0,0 +1,14 @@
+import { RECONCILE_COLOR_MODE_EVENT } from '../color-mode/constants.js'
+import { scheduleThemeUiColorModeSync } from '../color-mode/browser-sync.js'
+
+/**
+ * Call from Gatsby `onRouteUpdate` so Theme UI color mode stays aligned with `localStorage` and the
+ * document after client-side navigations. Dispatches {@link RECONCILE_COLOR_MODE_EVENT} for app code
+ * that listens (e.g. React context reconciliation).
+ */
+export function onRouteUpdateThemeUiColorMode() {
+  scheduleThemeUiColorModeSync()
+  if (typeof window !== 'undefined' && typeof window.CustomEvent === 'function') {
+    window.dispatchEvent(new window.CustomEvent(RECONCILE_COLOR_MODE_EVENT))
+  }
+}

package/src/header.js

@@ -0,0 +1,28 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+
+/**
+ * Header
+ *
+ * A decorative masthead element that can be used across page layouts.
+ */
+const Header = ({ children, styles }) => {
+  return (
+    <header
+      role='banner'
+      sx={{
+        variant: 'styles.Header'
+      }}
+    >
+      <div
+        sx={{
+          ...(styles ? styles : {})
+        }}
+      >
+        {children}
+      </div>
+    </header>
+  )
+}
+
+export default Header

package/src/header.spec.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import Header from './header.js'
+
+describe('Header', () => {
+  it('renders with children', () => {
+    const { asFragment } = render(
+      <Header>
+        <h1>Test Header</h1>
+      </Header>
+    )
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  it('renders with custom styles', () => {
+    const customStyles = {
+      backgroundColor: 'red',
+      color: 'white'
+    }
+    const { asFragment } = render(
+      <Header styles={customStyles}>
+        <h1>Test Header with Styles</h1>
+      </Header>
+    )
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  it('renders without styles prop', () => {
+    const { asFragment } = render(
+      <Header>
+        <h1>Test Header without Styles</h1>
+      </Header>
+    )
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  it('renders with empty styles object', () => {
+    const { asFragment } = render(
+      <Header styles={{}}>
+        <h1>Test Header with Empty Styles</h1>
+      </Header>
+    )
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

package/src/lazy-load.js

@@ -0,0 +1,41 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+import { useState, useEffect } from 'react'
+import { useInView } from 'react-intersection-observer'
+
+const DefaultPlaceholder = ({ height = '100%', width = '100%' }) => (
+  <div
+    data-testid='default-placeholder'
+    sx={{
+      minHeight: '1px',
+      minWidth: '1px',
+      height,
+      width
+    }}
+  >
+    {' '}
+  </div>
+)
+
+/**
+ * Lazy Loader
+ *
+ * Hides a component until it's been visible in the viewport.
+ */
+const LazyLoad = ({ children, placeholder = <DefaultPlaceholder /> }) => {
+  const [hasBeenVisible, setHasBeenVisible] = useState(false)
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+    threshold: 0
+  })
+
+  useEffect(() => {
+    if (inView && !hasBeenVisible) {
+      setHasBeenVisible(true)
+    }
+  }, [inView, hasBeenVisible])
+
+  return <div ref={ref}>{hasBeenVisible ? children : placeholder}</div>
+}
+
+export default LazyLoad

package/src/lazy-load.spec.js

@@ -0,0 +1,88 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import LazyLoad from './lazy-load.js'
+
+let mockInView = false
+
+jest.mock('react-intersection-observer', () => ({
+  useInView: () => ({
+    ref: jest.fn(),
+    inView: mockInView
+  })
+}))
+
+const MockPlaceholder = () => <div data-testid='placeholder'>Placeholder</div>
+
+describe('LazyLoad', () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+    mockInView = false
+  })
+
+  it('renders the default placeholder initially', () => {
+    render(
+      <LazyLoad>
+        <div data-testid='content'>Lazy Loaded Content</div>
+      </LazyLoad>
+    )
+
+    expect(screen.getByTestId('default-placeholder')).toBeInTheDocument()
+    expect(screen.queryByTestId('content')).not.toBeInTheDocument()
+  })
+
+  it('renders the children when visible', () => {
+    mockInView = true
+
+    render(
+      <LazyLoad>
+        <div data-testid='content'>Lazy Loaded Content</div>
+      </LazyLoad>
+    )
+
+    expect(screen.getByTestId('content')).toBeInTheDocument()
+  })
+
+  it('renders the custom placeholder when provided', () => {
+    render(
+      <LazyLoad placeholder={<MockPlaceholder />}>
+        <div data-testid='content'>Lazy Loaded Content</div>
+      </LazyLoad>
+    )
+
+    expect(screen.getByTestId('placeholder')).toBeInTheDocument()
+    expect(screen.queryByTestId('content')).not.toBeInTheDocument()
+  })
+
+  it('does not re-render children if already visible', () => {
+    mockInView = true
+
+    const { rerender } = render(
+      <LazyLoad>
+        <div data-testid='content'>Lazy Loaded Content</div>
+      </LazyLoad>
+    )
+
+    expect(screen.getByTestId('content')).toBeInTheDocument()
+
+    mockInView = false
+
+    rerender(
+      <LazyLoad>
+        <div data-testid='content'>Lazy Loaded Content</div>
+      </LazyLoad>
+    )
+
+    expect(screen.getByTestId('content')).toBeInTheDocument()
+  })
+
+  it('does not render children when visibility remains false', () => {
+    render(
+      <LazyLoad>
+        <div data-testid='content'>Lazy Loaded Content</div>
+      </LazyLoad>
+    )
+
+    expect(screen.queryByTestId('content')).not.toBeInTheDocument()
+  })
+})

package/src/page-header.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Heading } from '@theme-ui/components'
+
+const PageHeader = ({ children }) => (
+  <Heading as='h1' className='p-name' sx={{ mb: 2, lineHeight: 1.5, fontSize: [6, 'calc(1.25em + 2vw)'] }}>
+    {children}
+  </Heading>
+)
+
+export default PageHeader

package/src/page-header.spec.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import PageHeader from './page-header.js'
+
+describe('PageHeader', () => {
+  it('renders correctly with given children', () => {
+    render(<PageHeader>Hello, World!</PageHeader>)
+    const headingElement = screen.getByRole('heading', { name: /Hello, World!/i })
+    expect(headingElement).toBeInTheDocument()
+  })
+
+  it('matches snapshot', () => {
+    const { asFragment } = render(<PageHeader>Hello, World!</PageHeader>)
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

package/src/pagination-button.js

@@ -0,0 +1,106 @@
+/** @jsx jsx */
+import React from 'react'
+import { jsx, useThemeUI } from 'theme-ui'
+import isDarkMode from './helpers/isDarkMode.js'
+import { hexToRgb } from './color-utils.js'
+
+const PaginationButton = ({
+  children,
+  onClick,
+  disabled = false,
+  active = false,
+  variant = 'primary',
+  size = 'medium',
+  icon,
+  ...props
+}) => {
+  const { colorMode, theme } = useThemeUI()
+  const darkModeActive = isDarkMode(colorMode)
+
+  const colorVariants = {
+    secondary: { light: '#666', dark: '#888' },
+    success: { light: '#28a745', dark: '#4CAF50' },
+    warning: { light: '#ffc107', dark: '#FF9800' },
+    danger: { light: '#dc3545', dark: '#f44336' }
+  }
+  const isPrimary = variant === 'primary' || !colorVariants[variant]
+  const primaryColor = isPrimary
+    ? (theme?.colors?.primary ?? '#422EA3')
+    : darkModeActive
+      ? colorVariants[variant].dark
+      : colorVariants[variant].light
+  const rgb = isPrimary ? (theme?.colors?.primaryRgb ?? '66, 46, 163') : hexToRgb(primaryColor)
+
+  const sizeVariants = {
+    small: {
+      fontSize: ['10px', '11px'],
+      padding: '4px 8px',
+      minWidth: ['24px', '28px'],
+      height: ['24px', '28px'],
+      gap: 1
+    },
+    medium: {
+      fontSize: ['11px', '12px'],
+      padding: '6px 10px',
+      minWidth: ['28px', '32px'],
+      height: ['28px', '32px'],
+      gap: 1
+    },
+    large: {
+      fontSize: ['12px', '13px'],
+      padding: '8px 12px',
+      minWidth: ['32px', '36px'],
+      height: ['32px', '36px'],
+      gap: 2
+    }
+  }
+  const sizeStyles = sizeVariants[size] || sizeVariants.medium
+
+  const baseStyles = {
+    color: active ? 'white' : primaryColor,
+    textDecoration: 'none',
+    fontWeight: active ? 'bold' : 'medium',
+    fontSize: sizeStyles.fontSize,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: sizeStyles.gap,
+    padding: sizeStyles.padding,
+    minWidth: sizeStyles.minWidth,
+    height: sizeStyles.height,
+    borderRadius: '6px',
+    background: active ? primaryColor : `rgba(${rgb}, 0.1)`,
+    border: active ? `1px solid ${primaryColor}` : `1px solid rgba(${rgb}, 0.2)`,
+    transition: 'all 0.2s ease',
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    outline: 'none',
+    opacity: disabled ? 0.5 : 1,
+    '&:hover:not(:disabled)': {
+      background: active ? primaryColor : `rgba(${rgb}, 0.2)`,
+      textDecoration: 'none',
+      transform: 'scale(1.02)'
+    },
+    '&:focus:not(:disabled)': {
+      outline: 'none',
+      boxShadow: `0 0 0 2px ${primaryColor}20`
+    },
+    '&:active:not(:disabled)': {
+      transform: 'scale(0.98)'
+    }
+  }
+
+  const content = (
+    <>
+      {children}
+      {icon && icon}
+    </>
+  )
+
+  return (
+    <button type='button' onClick={onClick} disabled={disabled} sx={baseStyles} {...props}>
+      {content}
+    </button>
+  )
+}
+
+export default PaginationButton