@chronogrove/ui 0.80.0 → 0.81.0

package/src/pagination.spec.js

@@ -0,0 +1,281 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ThemeUIProvider } from 'theme-ui'
+
+import Pagination from './pagination.js'
+
+const mockTheme = {
+  colors: {
+    primary: '#422EA3',
+    primaryRgb: '66, 46, 163',
+    modes: {
+      dark: {
+        text: '#ffffff',
+        background: '#000000'
+      }
+    }
+  }
+}
+
+const renderWithProviders = component => {
+  return render(<ThemeUIProvider theme={mockTheme}>{component}</ThemeUIProvider>)
+}
+
+describe('Pagination', () => {
+  const defaultProps = {
+    currentPage: 1,
+    totalPages: 5,
+    onPageChange: jest.fn()
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders pagination controls', () => {
+    renderWithProviders(<Pagination {...defaultProps} />)
+
+    expect(screen.getByLabelText('Previous page')).toBeInTheDocument()
+    expect(screen.getByLabelText('Next page')).toBeInTheDocument()
+    expect(screen.getByText('1')).toBeInTheDocument()
+    expect(screen.getByText('2')).toBeInTheDocument()
+    expect(screen.getByText('3')).toBeInTheDocument()
+  })
+
+  it('renders page info', () => {
+    renderWithProviders(<Pagination {...defaultProps} />)
+
+    expect(screen.getByText('Page 1 of 5')).toBeInTheDocument()
+  })
+
+  it('hides page info when showPageInfo is false', () => {
+    renderWithProviders(<Pagination {...defaultProps} showPageInfo={false} />)
+
+    expect(screen.queryByText('Page 1 of 5')).not.toBeInTheDocument()
+  })
+
+  it('handles page changes', () => {
+    renderWithProviders(<Pagination {...defaultProps} />)
+
+    const page2Button = screen.getByText('2')
+    fireEvent.click(page2Button)
+
+    expect(defaultProps.onPageChange).toHaveBeenCalledWith(2)
+  })
+
+  it('does not call onPageChange when clicking the already active page', () => {
+    renderWithProviders(<Pagination {...defaultProps} currentPage={2} />)
+    jest.clearAllMocks()
+    fireEvent.click(screen.getByText('2'))
+    expect(defaultProps.onPageChange).not.toHaveBeenCalled()
+  })
+
+  it('handles previous button click', () => {
+    renderWithProviders(<Pagination {...defaultProps} currentPage={2} />)
+
+    const prevButton = screen.getByLabelText('Previous page')
+    fireEvent.click(prevButton)
+
+    expect(defaultProps.onPageChange).toHaveBeenCalledWith(1)
+  })
+
+  it('handles next button click', () => {
+    renderWithProviders(<Pagination {...defaultProps} />)
+
+    const nextButton = screen.getByLabelText('Next page')
+    fireEvent.click(nextButton)
+
+    expect(defaultProps.onPageChange).toHaveBeenCalledWith(2)
+  })
+
+  it('disables previous button on first page', () => {
+    renderWithProviders(<Pagination {...defaultProps} currentPage={1} />)
+
+    const prevButton = screen.getByLabelText('Previous page')
+    expect(prevButton).toBeDisabled()
+  })
+
+  it('disables next button on last page', () => {
+    renderWithProviders(<Pagination {...defaultProps} currentPage={5} />)
+
+    const nextButton = screen.getByLabelText('Next page')
+    expect(nextButton).toBeDisabled()
+  })
+
+  it('highlights current page', () => {
+    renderWithProviders(<Pagination {...defaultProps} currentPage={3} />)
+
+    const currentPageButton = screen.getByText('3')
+    expect(currentPageButton).toHaveAttribute('aria-current', 'page')
+  })
+
+  it('shows ellipsis for large page ranges', () => {
+    renderWithProviders(<Pagination {...defaultProps} totalPages={10} currentPage={5} maxVisiblePages={3} />)
+
+    expect(screen.getAllByText('...')).toHaveLength(2)
+  })
+
+  it('shows first and last pages when needed', () => {
+    renderWithProviders(<Pagination {...defaultProps} totalPages={10} currentPage={8} maxVisiblePages={3} />)
+
+    expect(screen.getByText('1')).toBeInTheDocument()
+    expect(screen.getByText('10')).toBeInTheDocument()
+  })
+
+  it('returns null when totalPages is 1', () => {
+    const { container } = renderWithProviders(<Pagination {...defaultProps} totalPages={1} />)
+
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('returns null when totalPages is 0', () => {
+    const { container } = renderWithProviders(<Pagination {...defaultProps} totalPages={0} />)
+
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('applies custom variant', () => {
+    renderWithProviders(<Pagination {...defaultProps} variant='secondary' currentPage={2} />)
+
+    const pageButton = screen.getByText('1')
+    expect(pageButton).toHaveStyle({
+      color: 'rgb(102, 102, 102)'
+    })
+  })
+
+  it('applies custom size', () => {
+    renderWithProviders(<Pagination {...defaultProps} size='large' />)
+
+    const pageButton = screen.getByText('1')
+    expect(pageButton).toHaveStyle({
+      fontSize: '12px',
+      minWidth: '32px',
+      height: '32px'
+    })
+  })
+
+  it('shows ellipsis when gap is exactly 2 pages from start', () => {
+    renderWithProviders(<Pagination {...defaultProps} totalPages={10} currentPage={4} maxVisiblePages={3} />)
+
+    const ellipsis = screen.getAllByText('...')
+    expect(ellipsis.length).toBeGreaterThan(0)
+    expect(screen.getByText('1')).toBeInTheDocument()
+  })
+
+  it('shows ellipsis when gap is exactly 2 pages from end', () => {
+    renderWithProviders(<Pagination {...defaultProps} totalPages={10} currentPage={7} maxVisiblePages={3} />)
+
+    const ellipsis = screen.getAllByText('...')
+    expect(ellipsis.length).toBeGreaterThan(0)
+    expect(screen.getByText('10')).toBeInTheDocument()
+  })
+
+  it('handles clicking first page button when first page is not visible', () => {
+    renderWithProviders(<Pagination {...defaultProps} totalPages={10} currentPage={5} maxVisiblePages={3} />)
+
+    const firstPageButton = screen.getByLabelText('Go to page 1')
+    fireEvent.click(firstPageButton)
+
+    expect(defaultProps.onPageChange).toHaveBeenCalledWith(1)
+  })
+
+  it('handles clicking last page button when last page is not visible', () => {
+    renderWithProviders(<Pagination {...defaultProps} totalPages={10} currentPage={5} maxVisiblePages={3} />)
+
+    const lastPageButton = screen.getByLabelText('Go to page 10')
+    fireEvent.click(lastPageButton)
+
+    expect(defaultProps.onPageChange).toHaveBeenCalledWith(10)
+  })
+
+  it('uses custom prev and next icons when provided', () => {
+    renderWithProviders(
+      <Pagination
+        {...defaultProps}
+        prevIcon={<span data-testid='prev-custom'>«</span>}
+        nextIcon={<span data-testid='next-custom'>»</span>}
+      />
+    )
+    expect(screen.getByTestId('prev-custom')).toBeInTheDocument()
+    expect(screen.getByTestId('next-custom')).toBeInTheDocument()
+  })
+
+  it('expands page window from the end when the range is narrower than maxVisiblePages', () => {
+    renderWithProviders(<Pagination {...defaultProps} totalPages={10} currentPage={10} maxVisiblePages={5} />)
+    expect(screen.getByLabelText('Go to page 10')).toBeInTheDocument()
+  })
+
+  describe('Simple mode', () => {
+    it('renders only prev/next buttons in simple mode', () => {
+      renderWithProviders(<Pagination {...defaultProps} simple={true} />)
+
+      expect(screen.getByLabelText('Previous page')).toBeInTheDocument()
+      expect(screen.getByLabelText('Next page')).toBeInTheDocument()
+      expect(screen.queryByText('1')).not.toBeInTheDocument()
+      expect(screen.queryByText('2')).not.toBeInTheDocument()
+    })
+
+    it('shows page counter in simple mode when showPageInfo is true', () => {
+      renderWithProviders(<Pagination {...defaultProps} simple={true} showPageInfo={true} />)
+
+      expect(screen.getByText('1/5')).toBeInTheDocument()
+    })
+
+    it('hides page counter in simple mode when showPageInfo is false', () => {
+      renderWithProviders(<Pagination {...defaultProps} simple={true} showPageInfo={false} />)
+
+      expect(screen.queryByText('1/5')).not.toBeInTheDocument()
+      expect(screen.getByLabelText('Previous page')).toBeInTheDocument()
+      expect(screen.getByLabelText('Next page')).toBeInTheDocument()
+    })
+
+    it('handles previous button click in simple mode', () => {
+      renderWithProviders(<Pagination {...defaultProps} simple={true} currentPage={2} />)
+
+      const prevButton = screen.getByLabelText('Previous page')
+      fireEvent.click(prevButton)
+
+      expect(defaultProps.onPageChange).toHaveBeenCalledWith(1)
+    })
+
+    it('handles next button click in simple mode', () => {
+      renderWithProviders(<Pagination {...defaultProps} simple={true} />)
+
+      const nextButton = screen.getByLabelText('Next page')
+      fireEvent.click(nextButton)
+
+      expect(defaultProps.onPageChange).toHaveBeenCalledWith(2)
+    })
+
+    it('disables previous button on first page in simple mode', () => {
+      renderWithProviders(<Pagination {...defaultProps} simple={true} currentPage={1} />)
+
+      const prevButton = screen.getByLabelText('Previous page')
+      expect(prevButton).toBeDisabled()
+    })
+
+    it('disables next button on last page in simple mode', () => {
+      renderWithProviders(<Pagination {...defaultProps} simple={true} currentPage={5} />)
+
+      const nextButton = screen.getByLabelText('Next page')
+      expect(nextButton).toBeDisabled()
+    })
+
+    it('applies custom variant in simple mode', () => {
+      renderWithProviders(<Pagination {...defaultProps} simple={true} variant='secondary' />)
+
+      expect(screen.getByLabelText('Previous page')).toBeInTheDocument()
+      expect(screen.getByLabelText('Next page')).toBeInTheDocument()
+    })
+
+    it('applies custom size in simple mode', () => {
+      renderWithProviders(<Pagination {...defaultProps} simple={true} size='small' />)
+
+      const prevButton = screen.getByLabelText('Previous page')
+      expect(prevButton).toHaveStyle({
+        fontSize: '10px',
+        minWidth: '24px',
+        height: '24px'
+      })
+    })
+  })
+})

package/src/status-card.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Card } from '@theme-ui/components'
+import { useThemeUI } from 'theme-ui'
+
+import isDarkMode from './helpers/isDarkMode.js'
+
+const StatusCard = ({ message, ...props }) => {
+  const { colorMode } = useThemeUI()
+  const variant = isDarkMode(colorMode) ? 'metricCardDark' : 'metricCard'
+
+  return (
+    <Card variant={variant} sx={{ mb: 3 }} {...props}>
+      {message}
+    </Card>
+  )
+}
+
+export default StatusCard

package/src/status-card.spec.js

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react'
+import { ThemeUIProvider } from 'theme-ui'
+
+import StatusCard from './status-card.js'
+
+jest.mock('theme-ui', () => {
+  const actual = jest.requireActual('theme-ui')
+  return {
+    ...actual,
+    useThemeUI: jest.fn(() => ({ colorMode: 'default' }))
+  }
+})
+
+const { useThemeUI } = require('theme-ui')
+
+const theme = {}
+
+describe('StatusCard', () => {
+  it('renders message in light mode variant', () => {
+    useThemeUI.mockReturnValue({ colorMode: 'default' })
+    render(
+      <ThemeUIProvider theme={theme}>
+        <StatusCard message='No data' />
+      </ThemeUIProvider>
+    )
+    expect(screen.getByText('No data')).toBeInTheDocument()
+  })
+
+  it('uses dark card variant when dark', () => {
+    useThemeUI.mockReturnValue({ colorMode: 'dark' })
+    render(
+      <ThemeUIProvider theme={theme}>
+        <StatusCard message='Err' />
+      </ThemeUIProvider>
+    )
+    expect(screen.getByText('Err')).toBeInTheDocument()
+  })
+})

package/src/theme.js

@@ -94,11 +94,9 @@ export const metricCard = {
   backgroundColor: 'panel-background',
   boxShadow: 'none',
   color: 'text',
-  span: {
-    fontFamily: 'heading',
-    fontWeight: 'bold',
-    padding: 2
-  }
+  /** Stat tiles read clearly on animated / busy page backgrounds */
+  border: '1px solid',
+  borderColor: 'panel-divider'
 }
 
 export const PostCard = {
@@ -256,6 +254,12 @@ export default merge(tailwind, {
       ...metricCard
     },
 
+    metricCardDark: {
+      ...card,
+      ...metricCard,
+      backgroundColor: '#1e2530'
+    },
+
     /* The following styles represent specific card components, indicated in PascalCase. */
 
     UserProfile: {
@@ -563,6 +567,12 @@ export default merge(tailwind, {
       mt: 2
     },
 
+    mutedCardFooter: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      mt: 2
+    },
+
     PageFooter: {
       zIndex: '10',
       color: 'text',

package/src/widget-call-to-action.js

@@ -0,0 +1,106 @@
+import React from 'react'
+import { Box } from '@theme-ui/components'
+
+/**
+ * Default loading indicator for widget CTAs (SVG spinner, no extra dependencies).
+ */
+export const WidgetCtaLoadingIndicator = () => (
+  <Box
+    as='svg'
+    role='status'
+    aria-label='Loading'
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
+    sx={{
+      verticalAlign: 'middle',
+      color: 'primary',
+      animation: 'spin 0.8s linear infinite',
+      '@keyframes spin': { to: { transform: 'rotate(360deg)' } }
+    }}
+  >
+    <circle
+      cx='12'
+      cy='12'
+      r='10'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='3'
+      strokeLinecap='round'
+      strokeDasharray='31.4 31.4'
+    />
+  </Box>
+)
+
+const linkSxBase = {
+  variant: 'links.widgetCta',
+  '.read-more-icon': {
+    opacity: 0,
+    transition: 'all .3s ease',
+    ml: 1
+  },
+  '&:hover .read-more-icon, &:focus .read-more-icon': {
+    opacity: 1
+  }
+}
+
+/**
+ * Text-style CTA used next to widget headlines. Pass `linkComponent` (e.g. Gatsby `Link` with `to`, or Next `Link` with `href`).
+ * External links: set `href` or `url` (no `linkComponent`).
+ */
+export const WidgetCallToAction = ({
+  children,
+  isLoading = false,
+  loadingSlot,
+  title,
+  to,
+  url,
+  href,
+  linkComponent,
+  sx: sxProp,
+  ...rest
+}) => {
+  const ctaSx = { ...linkSxBase, ...sxProp }
+
+  if (isLoading) {
+    return loadingSlot ?? <WidgetCtaLoadingIndicator />
+  }
+
+  if (linkComponent) {
+    const L = linkComponent
+    // Theme UI `sx` only applies when the outer node is a Theme UI `Box` (or other `sx`-aware
+    // primitive). Router links (Next.js `Link`, Gatsby `Link`) do not accept `sx` themselves.
+    if (href != null && href !== '') {
+      return (
+        <Box as={L} href={href} sx={ctaSx} title={title} {...rest}>
+          {children}
+        </Box>
+      )
+    }
+    if (to) {
+      return (
+        <Box as={L} to={to} sx={ctaSx} title={title} {...rest}>
+          {children}
+        </Box>
+      )
+    }
+  }
+
+  if (to) {
+    return (
+      <Box as='a' href={to} sx={ctaSx} title={title} {...rest}>
+        {children}
+      </Box>
+    )
+  }
+
+  const externalHref = href ?? url
+
+  return (
+    <Box as='a' href={externalHref} sx={ctaSx} title={title} {...rest}>
+      {children}
+    </Box>
+  )
+}
+
+export default WidgetCallToAction

package/src/widget-call-to-action.spec.js

@@ -0,0 +1,115 @@
+import { render, screen } from '@testing-library/react'
+import { ThemeUIProvider } from 'theme-ui'
+
+import WidgetCallToAction, { WidgetCtaLoadingIndicator } from './widget-call-to-action.js'
+
+const LinkMock = ({ to, href, children, ...rest }) => (
+  <a href={href ?? to} data-testid='router-link' {...rest}>
+    {children}
+  </a>
+)
+
+const theme = { links: { widgetCta: { color: 'text' } } }
+
+const wrap = ui => render(<ThemeUIProvider theme={theme}>{ui}</ThemeUIProvider>)
+
+describe('WidgetCtaLoadingIndicator', () => {
+  it('renders svg', () => {
+    const { container } = wrap(<WidgetCtaLoadingIndicator />)
+    expect(container.querySelector('svg')).toBeInTheDocument()
+  })
+})
+
+describe('WidgetCallToAction', () => {
+  it('renders external link with url', () => {
+    wrap(
+      <WidgetCallToAction title='t' url='https://example.com'>
+        Go
+      </WidgetCallToAction>
+    )
+    const a = screen.getByRole('link')
+    expect(a).toHaveAttribute('href', 'https://example.com')
+  })
+
+  it('prefers href over url', () => {
+    wrap(
+      <WidgetCallToAction href='https://a.test' url='https://b.test'>
+        Go
+      </WidgetCallToAction>
+    )
+    expect(screen.getByRole('link')).toHaveAttribute('href', 'https://a.test')
+  })
+
+  it('uses linkComponent with to (Gatsby-style)', () => {
+    wrap(
+      <WidgetCallToAction linkComponent={LinkMock} to='/blog'>
+        Posts
+      </WidgetCallToAction>
+    )
+    expect(screen.getByTestId('router-link')).toHaveAttribute('href', '/blog')
+  })
+
+  it('uses linkComponent with href (Next.js-style)', () => {
+    wrap(
+      <WidgetCallToAction linkComponent={LinkMock} href='/dashboard'>
+        Dash
+      </WidgetCallToAction>
+    )
+    expect(screen.getByTestId('router-link')).toHaveAttribute('href', '/dashboard')
+  })
+
+  it('uses linkComponent with to when href is empty', () => {
+    wrap(
+      <WidgetCallToAction linkComponent={LinkMock} href='' to='/blog'>
+        Posts
+      </WidgetCallToAction>
+    )
+    expect(screen.getByTestId('router-link')).toHaveAttribute('href', '/blog')
+  })
+
+  it('ignores linkComponent for external url when no href or to', () => {
+    wrap(
+      <WidgetCallToAction linkComponent={LinkMock} url='https://example.com/out'>
+        Out
+      </WidgetCallToAction>
+    )
+    expect(screen.queryByTestId('router-link')).not.toBeInTheDocument()
+    expect(screen.getByRole('link')).toHaveAttribute('href', 'https://example.com/out')
+  })
+
+  it('uses plain anchor when to without linkComponent', () => {
+    wrap(
+      <WidgetCallToAction to='/path' linkComponent={undefined}>
+        P
+      </WidgetCallToAction>
+    )
+    expect(screen.getByRole('link')).toHaveAttribute('href', '/path')
+  })
+
+  it('shows loading indicator', () => {
+    const { container } = wrap(
+      <WidgetCallToAction isLoading title='t'>
+        X
+      </WidgetCallToAction>
+    )
+    expect(container.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('uses custom loadingSlot', () => {
+    wrap(
+      <WidgetCallToAction isLoading loadingSlot={<span data-testid='ld'>wait</span>}>
+        X
+      </WidgetCallToAction>
+    )
+    expect(screen.getByTestId('ld')).toBeInTheDocument()
+  })
+
+  it('merges sx', () => {
+    wrap(
+      <WidgetCallToAction href='https://x.test' sx={{ m: 2 }}>
+        L
+      </WidgetCallToAction>
+    )
+    expect(screen.getByRole('link')).toBeInTheDocument()
+  })
+})

package/src/widget-section.js

@@ -0,0 +1,83 @@
+import React from 'react'
+import { Box } from '@theme-ui/components'
+import { useThemeUI } from 'theme-ui'
+
+import isDarkMode from './helpers/isDarkMode.js'
+
+const sectionSx = {
+  mb: 4,
+  pt: [0, 3, 4],
+  pb: [0, 3, 4]
+}
+
+/**
+ * Wraps a dashboard widget: vertical spacing and optional fatal-error overlay.
+ */
+const WidgetSection = ({ children, hasFatalError, id, styleOverrides = {}, ...props }) => {
+  const { colorMode } = useThemeUI()
+  const darkMode = isDarkMode(colorMode)
+
+  return (
+    <Box
+      as='section'
+      sx={{
+        ...sectionSx,
+        ...styleOverrides,
+        ...(hasFatalError
+          ? {
+              position: 'relative'
+            }
+          : {})
+      }}
+      {...(id ? { id } : {})}
+      {...props}
+    >
+      {hasFatalError && (
+        <Box
+          sx={{
+            alignItems: 'center',
+            bottom: 0,
+            display: 'flex',
+            justifyContent: 'center',
+            left: 0,
+            position: 'absolute',
+            right: 0,
+            top: 0
+          }}
+        >
+          <Box
+            sx={{
+              background: darkMode ? '#252e3c' : 'white',
+              borderLeft: '2px solid red',
+              borderRight: '2px solid red',
+              borderRadius: '2px',
+              boxShadow: 'xl',
+              py: 3,
+              px: 4,
+              zIndex: 480
+            }}
+          >
+            <h4>Something went wrong</h4>
+            <p>Failed to load this widget.</p>
+          </Box>
+          <Box
+            sx={{
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+              background: darkMode
+                ? 'radial-gradient(rgba(14.5,18,23.5,0.4) 20%, transparent 50%);'
+                : 'radial-gradient(rgba(255, 255, 255, 0.4) 20%, transparent 50%)',
+              position: 'absolute',
+              zIndex: 470
+            }}
+          />
+        </Box>
+      )}
+      {children}
+    </Box>
+  )
+}
+
+export default WidgetSection