@chronogrove/ui 0.80.0 → 0.81.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chronogrove/ui",
-  "version": "0.80.0",
+  "version": "0.81.0",
   "description": "Chronogrove Theme UI theme, color mode helpers, and shared UI primitives",
   "license": "MIT",
   "type": "module",
@@ -66,6 +66,42 @@
       "import": "./src/pagination-button.js",
       "default": "./src/pagination-button.js"
     },
+    "./pagination": {
+      "import": "./src/pagination.js",
+      "default": "./src/pagination.js"
+    },
+    "./category-label": {
+      "import": "./src/category-label.js",
+      "default": "./src/category-label.js"
+    },
+    "./external-link-icon": {
+      "import": "./src/external-link-icon.js",
+      "default": "./src/external-link-icon.js"
+    },
+    "./metric-badge": {
+      "import": "./src/metric-badge.js",
+      "default": "./src/metric-badge.js"
+    },
+    "./metric-card": {
+      "import": "./src/metric-card.js",
+      "default": "./src/metric-card.js"
+    },
+    "./muted-card-footer": {
+      "import": "./src/muted-card-footer.js",
+      "default": "./src/muted-card-footer.js"
+    },
+    "./status-card": {
+      "import": "./src/status-card.js",
+      "default": "./src/status-card.js"
+    },
+    "./widget-section": {
+      "import": "./src/widget-section.js",
+      "default": "./src/widget-section.js"
+    },
+    "./widget-call-to-action": {
+      "import": "./src/widget-call-to-action.js",
+      "default": "./src/widget-call-to-action.js"
+    },
     "./lazy-load": {
       "import": "./src/lazy-load.js",
       "default": "./src/lazy-load.js"

package/src/__snapshots__/theme.spec.js.snap

@@ -303,6 +303,26 @@ exports[`Theme Configuration a snapshot of the configuration matches the snapsho
       "backdropFilter": "blur(12px) saturate(150%)",
       "backgroundColor": "panel-background",
       "bg": "panel-background",
+      "border": "1px solid",
+      "borderColor": "panel-divider",
+      "borderRadius": "card",
+      "boxShadow": "none",
+      "color": "text",
+      "flexGrow": 1,
+      "fontSize": [
+        1,
+        2,
+      ],
+      "padding": 3,
+      "textDecoration": "none",
+    },
+    "metricCardDark": {
+      "WebkitBackdropFilter": "blur(12px) saturate(150%)",
+      "backdropFilter": "blur(12px) saturate(150%)",
+      "backgroundColor": "#1e2530",
+      "bg": "panel-background",
+      "border": "1px solid",
+      "borderColor": "panel-divider",
       "borderRadius": "card",
       "boxShadow": "none",
       "color": "text",
@@ -312,11 +332,6 @@ exports[`Theme Configuration a snapshot of the configuration matches the snapsho
         2,
       ],
       "padding": 3,
-      "span": {
-        "fontFamily": "heading",
-        "fontWeight": "bold",
-        "padding": 2,
-      },
       "textDecoration": "none",
     },
     "presentationalCard": {
@@ -805,6 +820,11 @@ exports[`Theme Configuration a snapshot of the configuration matches the snapsho
         "right",
       ],
     },
+    "mutedCardFooter": {
+      "display": "flex",
+      "justifyContent": "space-between",
+      "mt": 2,
+    },
     "outlined": {
       "border": "4px solid #efefef",
     },

package/src/category-label.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Box } from '@theme-ui/components'
+
+/**
+ * Styled label for post categories. Pass display text as `children` (site-specific mapping stays in the app).
+ */
+const CategoryLabel = ({ children, sx: sxProp = {}, ...props }) => (
+  <Box
+    sx={{
+      display: 'inline-block',
+      fontSize: [0],
+      fontFamily: 'heading',
+      color: 'primary',
+      letterSpacing: '0.05em',
+      ...sxProp
+    }}
+    {...props}
+  >
+    {children}
+  </Box>
+)
+
+export default CategoryLabel

package/src/category-label.spec.js

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react'
+import { ThemeUIProvider } from 'theme-ui'
+
+import CategoryLabel from './category-label.js'
+
+const theme = { colors: { primary: '#422EA3' } }
+
+const renderWithTheme = ui => render(<ThemeUIProvider theme={theme}>{ui}</ThemeUIProvider>)
+
+describe('CategoryLabel', () => {
+  it('renders children', () => {
+    renderWithTheme(<CategoryLabel>Travel</CategoryLabel>)
+    expect(screen.getByText('Travel')).toBeInTheDocument()
+  })
+
+  it('merges sx', () => {
+    renderWithTheme(
+      <CategoryLabel sx={{ color: 'red' }} data-testid='cat'>
+        X
+      </CategoryLabel>
+    )
+    expect(screen.getByTestId('cat')).toBeInTheDocument()
+  })
+})

package/src/chevron-icons.js

@@ -0,0 +1,37 @@
+import React from 'react'
+
+/** Chevron left (inline SVG, no icon font). */
+export const ChevronLeftIcon = props => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 320 512'
+    width='1em'
+    height='1em'
+    aria-hidden='true'
+    focusable='false'
+    {...props}
+  >
+    <path
+      fill='currentColor'
+      d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'
+    />
+  </svg>
+)
+
+/** Chevron right (inline SVG, no icon font). */
+export const ChevronRightIcon = props => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 320 512'
+    width='1em'
+    height='1em'
+    aria-hidden='true'
+    focusable='false'
+    {...props}
+  >
+    <path
+      fill='currentColor'
+      d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'
+    />
+  </svg>
+)

package/src/external-link-icon.js

@@ -0,0 +1,30 @@
+import React from 'react'
+
+/**
+ * Small external-link glyph (inline SVG). Use for “opens in new window” affordances.
+ */
+export const ExternalLinkIcon = props => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 512 512'
+    width='0.75em'
+    height='0.75em'
+    aria-hidden='true'
+    focusable='false'
+    {...props}
+  >
+    <path
+      fill='currentColor'
+      d='M432 320h-32a16 16 0 0 0-16 16v112H64V128h144a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16H48a48 48 0 0 0-48 48v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48V336a16 16 0 0 0-16-16zM488 0h-168c-13.3 0-24 10.7-24 24v8c0 13.3 10.7 24 24 24h69.2L207 279.6a24.06 24.06 0 0 0 0 34l10.2 10.2a24.06 24.06 0 0 0 34 0L425 128.8V200c0 13.3 10.7 24 24 24h8c13.3 0 24-10.7 24-24V56c0-30.9-25.1-56-56-56z'
+    />
+  </svg>
+)
+
+/** Same icon wrapped in `<span>` for drop-in use where a text sibling is expected. */
+export default function ViewExternalLinkIcon() {
+  return (
+    <span>
+      <ExternalLinkIcon />
+    </span>
+  )
+}

package/src/external-link-icon.spec.js

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react'
+
+import ViewExternalLinkIcon, { ExternalLinkIcon } from './external-link-icon.js'
+
+describe('ExternalLinkIcon', () => {
+  it('renders inline svg', () => {
+    const { container } = render(<ExternalLinkIcon data-testid='ico' />)
+    expect(container.querySelector('svg')).toBeInTheDocument()
+    expect(screen.getByTestId('ico')).toBeInTheDocument()
+  })
+
+  it('ViewExternalLinkIcon wraps icon in span', () => {
+    const { container } = render(<ViewExternalLinkIcon />)
+    expect(container.querySelector('span svg')).toBeInTheDocument()
+  })
+})

package/src/metric-badge.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Badge } from '@theme-ui/components'
+
+const MetricBadge = ({ children, ...props }) => (
+  <Badge mr={3} {...props}>
+    {children}
+  </Badge>
+)
+
+export default MetricBadge

package/src/metric-badge.spec.js

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react'
+import { ThemeUIProvider } from 'theme-ui'
+
+import MetricBadge from './metric-badge.js'
+
+describe('MetricBadge', () => {
+  it('renders children', () => {
+    render(
+      <ThemeUIProvider theme={{}}>
+        <MetricBadge>42</MetricBadge>
+      </ThemeUIProvider>
+    )
+    expect(screen.getByText('42')).toBeInTheDocument()
+  })
+})

package/src/metric-card.js

@@ -0,0 +1,95 @@
+import React from 'react'
+import { Box, Card, Text } from '@theme-ui/components'
+import { useThemeUI } from 'theme-ui'
+
+import isDarkMode from './helpers/isDarkMode.js'
+
+/**
+ * Metric summary card (e.g. Goodreads profile metrics). Uses `metricCard` / `metricCardDark` card variants.
+ * When `loading` is true, renders `loadingSlot` or a lightweight pulse placeholder (no react-placeholder dependency).
+ */
+const MetricCard = ({ title, value, loading = false, loadingSlot, sx, ...props }) => {
+  const { colorMode } = useThemeUI()
+  const variant = isDarkMode(colorMode) ? 'metricCardDark' : 'metricCard'
+
+  const body = loading ? (
+    (loadingSlot ?? (
+      <Box
+        aria-busy='true'
+        role='status'
+        sx={{
+          minHeight: '3rem',
+          borderRadius: 'default',
+          bg: 'muted',
+          opacity: 0.7,
+          animation: 'cgPulse 1.2s ease-in-out infinite',
+          '@keyframes cgPulse': {
+            '0%, 100%': { opacity: 0.45 },
+            '50%': { opacity: 0.85 }
+          }
+        }}
+      />
+    ))
+  ) : (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        textAlign: 'center',
+        minWidth: 0,
+        width: '100%'
+      }}
+    >
+      <Text
+        as='span'
+        sx={{
+          fontFamily: 'heading',
+          fontWeight: 'bold',
+          fontSize: [4, 5],
+          lineHeight: 1.1,
+          color: 'text',
+          m: 0,
+          letterSpacing: '-0.02em'
+        }}
+      >
+        {value}
+      </Text>
+      <Text
+        as='span'
+        sx={{
+          fontSize: 0,
+          color: 'textMuted',
+          lineHeight: 1.35,
+          m: 0,
+          textTransform: 'uppercase',
+          letterSpacing: '0.06em',
+          fontWeight: 'medium'
+        }}
+      >
+        {title}
+      </Text>
+    </Box>
+  )
+
+  return (
+    <Card
+      variant={variant}
+      sx={{
+        display: 'flex',
+        alignItems: 'stretch',
+        justifyContent: 'center',
+        minHeight: '6rem',
+        py: 3,
+        ...sx
+      }}
+      {...props}
+    >
+      {body}
+    </Card>
+  )
+}
+
+export default MetricCard

package/src/metric-card.spec.js

@@ -0,0 +1,60 @@
+import { render, screen } from '@testing-library/react'
+import { ThemeUIProvider } from 'theme-ui'
+
+import MetricCard from './metric-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 = { colors: { modes: { dark: {} } } }
+
+describe('MetricCard', () => {
+  beforeEach(() => {
+    useThemeUI.mockReturnValue({ colorMode: 'default' })
+  })
+
+  it('renders value and title when not loading', () => {
+    render(
+      <ThemeUIProvider theme={theme}>
+        <MetricCard title='Followers' value='12' />
+      </ThemeUIProvider>
+    )
+    expect(screen.getByText('12')).toBeInTheDocument()
+    expect(screen.getByText('Followers')).toBeInTheDocument()
+  })
+
+  it('shows default loading placeholder when loading', () => {
+    render(
+      <ThemeUIProvider theme={theme}>
+        <MetricCard title='F' value='1' loading />
+      </ThemeUIProvider>
+    )
+    expect(screen.getByRole('status')).toBeInTheDocument()
+  })
+
+  it('uses metricCardDark when dark', () => {
+    useThemeUI.mockReturnValue({ colorMode: 'dark' })
+    render(
+      <ThemeUIProvider theme={theme}>
+        <MetricCard title='T' value='v' loading={false} />
+      </ThemeUIProvider>
+    )
+    expect(screen.getByText('v')).toBeInTheDocument()
+  })
+
+  it('uses custom loadingSlot', () => {
+    render(
+      <ThemeUIProvider theme={theme}>
+        <MetricCard title='t' value='v' loading loadingSlot={<span data-testid='slot'>wait</span>} />
+      </ThemeUIProvider>
+    )
+    expect(screen.getByTestId('slot')).toBeInTheDocument()
+  })
+})

package/src/muted-card-footer.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Box } from '@theme-ui/components'
+
+/**
+ * Muted footer row for dashboard-style cards. Uses `styles.mutedCardFooter` on the theme.
+ */
+const MutedCardFooter = ({ children, customStyles, ...props }) => (
+  <Box
+    sx={{
+      variant: 'styles.mutedCardFooter',
+      color: 'textMuted',
+      fontFamily: 'sans',
+      fontSize: 1,
+      ...(typeof customStyles === 'object' && customStyles !== null ? customStyles : {})
+    }}
+    {...props}
+  >
+    {children}
+  </Box>
+)
+
+export default MutedCardFooter

package/src/muted-card-footer.spec.js

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react'
+import { ThemeUIProvider } from 'theme-ui'
+
+import MutedCardFooter from './muted-card-footer.js'
+
+const theme = { styles: { mutedCardFooter: { mt: 2 } } }
+
+const wrap = ui => render(<ThemeUIProvider theme={theme}>{ui}</ThemeUIProvider>)
+
+describe('MutedCardFooter', () => {
+  it('renders children', () => {
+    wrap(<MutedCardFooter>Footer text</MutedCardFooter>)
+    expect(screen.getByText('Footer text')).toBeInTheDocument()
+  })
+
+  it('merges customStyles when an object', () => {
+    wrap(<MutedCardFooter customStyles={{ mt: 4 }}>A</MutedCardFooter>)
+    expect(screen.getByText('A')).toBeInTheDocument()
+  })
+
+  it('ignores non-object customStyles', () => {
+    wrap(<MutedCardFooter customStyles='invalid'>B</MutedCardFooter>)
+    expect(screen.getByText('B')).toBeInTheDocument()
+  })
+})

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