@chronogrove/ui 0.80.0 → 0.82.0

package/src/pagination.js

@@ -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

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/profile-metrics-badge.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Badge, Box } from '@theme-ui/components'
+
+const ProfileMetricsBadge = ({ compact = false, isLoading, metrics = [] }) => {
+  let metricsToShow
+  if (isLoading) {
+    metricsToShow = [{}, {}]
+  } else if (Array.isArray(metrics)) {
+    metricsToShow = metrics
+  } else {
+    metricsToShow = []
+  }
+
+  return (
+    <Box
+      sx={{
+        fontFamily: 'heading',
+        ...(compact ? { mt: 0, pb: 0, pt: 0 } : { mt: 2, pb: 4, pt: 1 }),
+        display: 'flex',
+        justifyContent: ['center', 'unset']
+      }}
+    >
+      {metricsToShow.map(({ displayName, id, value }, idx) => (
+        <Badge key={id || idx} variant='metrics' ml={idx !== 0 && 2}>
+          {value} {displayName}
+        </Badge>
+      ))}
+    </Box>
+  )
+}
+
+export default ProfileMetricsBadge

package/src/profile-metrics-badge.spec.js

@@ -0,0 +1,89 @@
+import { render, screen } from '@testing-library/react'
+import { ThemeUIProvider } from 'theme-ui'
+
+import chronogroveTheme from './theme.js'
+import ProfileMetricsBadge from './profile-metrics-badge.js'
+
+describe('ProfileMetricsBadge', () => {
+  it('uses default props when none are passed', () => {
+    const { container } = render(
+      <ThemeUIProvider theme={chronogroveTheme}>
+        <ProfileMetricsBadge />
+      </ThemeUIProvider>
+    )
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('matches the snapshot with metrics', () => {
+    const metrics = [
+      { displayName: 'Followers', id: 'followers', value: 10 },
+      { displayName: 'Following', id: 'following', value: 20 }
+    ]
+    const { asFragment } = render(
+      <ThemeUIProvider theme={chronogroveTheme}>
+        <ProfileMetricsBadge metrics={metrics} />
+      </ThemeUIProvider>
+    )
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  it('renders metrics with value and displayName', () => {
+    const metrics = [{ displayName: 'Friends', id: 'friends', value: 5 }]
+    render(
+      <ThemeUIProvider theme={chronogroveTheme}>
+        <ProfileMetricsBadge metrics={metrics} />
+      </ThemeUIProvider>
+    )
+    expect(screen.getByText('5 Friends')).toBeInTheDocument()
+  })
+
+  it('uses compact spacing when compact is true', () => {
+    const metrics = [{ displayName: 'Count', id: 'count', value: 1 }]
+    const { container } = render(
+      <ThemeUIProvider theme={chronogroveTheme}>
+        <ProfileMetricsBadge compact metrics={metrics} />
+      </ThemeUIProvider>
+    )
+    expect(container.firstChild).toBeInTheDocument()
+    expect(screen.getByText('1 Count')).toBeInTheDocument()
+  })
+
+  it('shows placeholder badges when isLoading', () => {
+    const { container } = render(
+      <ThemeUIProvider theme={chronogroveTheme}>
+        <ProfileMetricsBadge isLoading metrics={[]} />
+      </ThemeUIProvider>
+    )
+    const wrapper = container.querySelector('[class*="css-"]')
+    expect(wrapper).toBeInTheDocument()
+    expect(wrapper.children).toHaveLength(2)
+  })
+
+  it('handles non-array metrics with default empty array', () => {
+    const { container } = render(
+      <ThemeUIProvider theme={chronogroveTheme}>
+        <ProfileMetricsBadge metrics={null} />
+      </ThemeUIProvider>
+    )
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('treats non-array metrics as empty when not loading', () => {
+    const { container } = render(
+      <ThemeUIProvider theme={chronogroveTheme}>
+        <ProfileMetricsBadge metrics='nope' />
+      </ThemeUIProvider>
+    )
+    expect(container.firstChild).toBeInTheDocument()
+    expect(container.textContent).toBe('')
+  })
+
+  it('renders nothing when metrics is an empty array', () => {
+    const { container } = render(
+      <ThemeUIProvider theme={chronogroveTheme}>
+        <ProfileMetricsBadge metrics={[]} />
+      </ThemeUIProvider>
+    )
+    expect(container.textContent).toBe('')
+  })
+})

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',