@furystack/shades-common-components 11.0.0 → 12.0.1

package/src/components/pagination.tsx

@@ -0,0 +1,249 @@
+import type { PartialElement } from '@furystack/shades'
+import { Shade, createComponent } from '@furystack/shades'
+import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js'
+import { paletteMainColors } from '../services/palette-css-vars.js'
+import type { Palette } from '../services/theme-provider-service.js'
+
+export type PaginationProps = PartialElement<HTMLElement> & {
+  /** Total number of pages */
+  count: number
+  /** Current page (1-indexed) */
+  page: number
+  /** Callback fired when the page is changed */
+  onPageChange: (page: number) => void
+  /** Number of sibling pages shown around the current page. Defaults to 1 */
+  siblingCount?: number
+  /** Number of pages shown at the start and end. Defaults to 1 */
+  boundaryCount?: number
+  /** If true, the pagination is disabled */
+  disabled?: boolean
+  /** Size variant */
+  size?: 'small' | 'medium' | 'large'
+  /** Palette color */
+  color?: keyof Palette
+}
+
+type PaginationItem = { type: 'page'; page: number } | { type: 'ellipsis'; key: string }
+
+/**
+ * Generates the list of pagination items (page numbers and ellipsis markers).
+ */
+const getPaginationRange = (
+  count: number,
+  page: number,
+  siblingCount: number,
+  boundaryCount: number,
+): PaginationItem[] => {
+  const totalPageNumbers = boundaryCount * 2 + siblingCount * 2 + 3 // boundaries + siblings + current + 2 ellipses
+
+  if (totalPageNumbers >= count) {
+    return Array.from({ length: count }, (_, i) => ({ type: 'page' as const, page: i + 1 }))
+  }
+
+  const leftSiblingIndex = Math.max(page - siblingCount, boundaryCount + 1)
+  const rightSiblingIndex = Math.min(page + siblingCount, count - boundaryCount)
+
+  const showLeftEllipsis = leftSiblingIndex > boundaryCount + 2
+  const showRightEllipsis = rightSiblingIndex < count - boundaryCount - 1
+
+  const items: PaginationItem[] = []
+
+  // Left boundary pages
+  for (let i = 1; i <= boundaryCount; i++) {
+    items.push({ type: 'page', page: i })
+  }
+
+  if (showLeftEllipsis) {
+    items.push({ type: 'ellipsis', key: 'start-ellipsis' })
+  } else {
+    // Fill in pages between boundary and sibling range
+    for (let i = boundaryCount + 1; i < leftSiblingIndex; i++) {
+      items.push({ type: 'page', page: i })
+    }
+  }
+
+  // Sibling pages + current page
+  for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+    items.push({ type: 'page', page: i })
+  }
+
+  if (showRightEllipsis) {
+    items.push({ type: 'ellipsis', key: 'end-ellipsis' })
+  } else {
+    // Fill in pages between sibling range and right boundary
+    for (let i = rightSiblingIndex + 1; i <= count - boundaryCount; i++) {
+      items.push({ type: 'page', page: i })
+    }
+  }
+
+  // Right boundary pages
+  for (let i = count - boundaryCount + 1; i <= count; i++) {
+    items.push({ type: 'page', page: i })
+  }
+
+  return items
+}
+
+const defaultColors = {
+  main: cssVariableTheme.text.primary,
+  mainContrast: cssVariableTheme.background.default,
+}
+
+export const Pagination = Shade<PaginationProps>({
+  shadowDomName: 'shade-pagination',
+  css: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: cssVariableTheme.spacing.xs,
+    fontFamily: cssVariableTheme.typography.fontFamily,
+    userSelect: 'none',
+
+    '& .pagination-item': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      border: 'none',
+      borderRadius: cssVariableTheme.shape.borderRadius.md,
+      background: 'transparent',
+      color: cssVariableTheme.text.primary,
+      cursor: 'pointer',
+      fontFamily: 'inherit',
+      fontWeight: cssVariableTheme.typography.fontWeight.medium,
+      lineHeight: '1',
+      padding: '0',
+      transition: buildTransition(
+        ['background', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+        ['color', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+      ),
+    },
+
+    '& .pagination-item:hover:not([data-disabled]):not([data-selected])': {
+      background: 'color-mix(in srgb, var(--pagination-color-main) 12%, transparent)',
+    },
+
+    '& .pagination-item[data-selected]': {
+      background: 'var(--pagination-color-main)',
+      color: 'var(--pagination-color-contrast)',
+    },
+
+    '& .pagination-item[data-disabled]': {
+      opacity: '0.4',
+      cursor: 'not-allowed',
+      pointerEvents: 'none',
+    },
+
+    '& .pagination-ellipsis': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: cssVariableTheme.text.secondary,
+      pointerEvents: 'none',
+      letterSpacing: '2px',
+    },
+
+    // Size: medium (default)
+    '&:not([data-size]) .pagination-item, &[data-size="medium"] .pagination-item': {
+      minWidth: '32px',
+      height: '32px',
+      fontSize: cssVariableTheme.typography.fontSize.sm,
+    },
+    '&:not([data-size]) .pagination-ellipsis, &[data-size="medium"] .pagination-ellipsis': {
+      minWidth: '32px',
+      height: '32px',
+      fontSize: cssVariableTheme.typography.fontSize.sm,
+    },
+
+    // Size: small
+    '&[data-size="small"] .pagination-item': {
+      minWidth: '26px',
+      height: '26px',
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+    },
+    '&[data-size="small"] .pagination-ellipsis': {
+      minWidth: '26px',
+      height: '26px',
+      fontSize: cssVariableTheme.typography.fontSize.xs,
+    },
+
+    // Size: large
+    '&[data-size="large"] .pagination-item': {
+      minWidth: '40px',
+      height: '40px',
+      fontSize: cssVariableTheme.typography.fontSize.md,
+    },
+    '&[data-size="large"] .pagination-ellipsis': {
+      minWidth: '40px',
+      height: '40px',
+      fontSize: cssVariableTheme.typography.fontSize.md,
+    },
+
+    // Disabled state on the host
+    '&[data-disabled]': {
+      opacity: cssVariableTheme.action.disabledOpacity,
+      pointerEvents: 'none',
+    },
+  },
+  render: ({ props, useHostProps }) => {
+    const { count, page, onPageChange, siblingCount = 1, boundaryCount = 1, disabled, size, color, style } = props
+
+    const colors = color ? paletteMainColors[color] : defaultColors
+    useHostProps({
+      'data-size': size || undefined,
+      'data-disabled': disabled ? '' : undefined,
+      style: {
+        '--pagination-color-main': colors.main,
+        '--pagination-color-contrast': colors.mainContrast,
+        ...(style as Record<string, string>),
+      },
+    })
+
+    const items = getPaginationRange(count, page, siblingCount, boundaryCount)
+
+    const isPrevDisabled = disabled || page <= 1
+    const isNextDisabled = disabled || page >= count
+
+    return (
+      <>
+        <button
+          className="pagination-item"
+          aria-label="Go to previous page"
+          {...(isPrevDisabled ? { 'data-disabled': '' } : {})}
+          onclick={() => {
+            if (!isPrevDisabled) onPageChange(page - 1)
+          }}
+        >
+          ‹
+        </button>
+        {items.map((item) =>
+          item.type === 'page' ? (
+            <button
+              className="pagination-item"
+              aria-label={`Go to page ${item.page}`}
+              {...(item.page === page ? { 'data-selected': '' } : {})}
+              {...(disabled ? { 'data-disabled': '' } : {})}
+              onclick={() => {
+                if (!disabled && item.page !== page) onPageChange(item.page)
+              }}
+            >
+              {item.page.toString()}
+            </button>
+          ) : (
+            <span className="pagination-ellipsis" aria-hidden="true">
+              …
+            </span>
+          ),
+        )}
+        <button
+          className="pagination-item"
+          aria-label="Go to next page"
+          {...(isNextDisabled ? { 'data-disabled': '' } : {})}
+          onclick={() => {
+            if (!isNextDisabled) onPageChange(page + 1)
+          }}
+        >
+          ›
+        </button>
+      </>
+    )
+  },
+})

package/src/components/paper.spec.tsx

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
 import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { sleepAsync } from '@furystack/utils'
+import { sleepAsync, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { Paper } from './paper.js'
 
@@ -25,48 +25,56 @@ describe('Paper', () => {
     return {
       injector,
       paper: root.querySelector('div[is="shade-paper"]') as HTMLDivElement,
+      [Symbol.asyncDispose]: () => injector[Symbol.asyncDispose](),
     }
   }
 
   describe('rendering', () => {
     it('should render a div element', async () => {
-      const { paper } = await renderPaper()
-      expect(paper).toBeTruthy()
-      expect(paper.tagName.toLowerCase()).toBe('div')
-      expect(paper.getAttribute('is')).toBe('shade-paper')
+      await usingAsync(await renderPaper(), async ({ paper }) => {
+        expect(paper).toBeTruthy()
+        expect(paper.tagName.toLowerCase()).toBe('div')
+        expect(paper.getAttribute('is')).toBe('shade-paper')
+      })
     })
 
     it('should render children', async () => {
-      const { paper } = await renderPaper({}, [<span>Child content</span>])
-      expect(paper.textContent).toContain('Child content')
+      await usingAsync(await renderPaper({}, [<span>Child content</span>]), async ({ paper }) => {
+        expect(paper.textContent).toContain('Child content')
+      })
     })
 
     it('should render multiple children', async () => {
-      const { paper } = await renderPaper({}, [<span>First</span>, <span>Second</span>])
-      expect(paper.textContent).toContain('First')
-      expect(paper.textContent).toContain('Second')
+      await usingAsync(await renderPaper({}, [<span>First</span>, <span>Second</span>]), async ({ paper }) => {
+        expect(paper.textContent).toContain('First')
+        expect(paper.textContent).toContain('Second')
+      })
     })
   })
 
   describe('elevation', () => {
     it('should have data-elevation="1" by default', async () => {
-      const { paper } = await renderPaper()
-      expect(paper.getAttribute('data-elevation')).toBe('1')
+      await usingAsync(await renderPaper(), async ({ paper }) => {
+        expect(paper.getAttribute('data-elevation')).toBe('1')
+      })
     })
 
     it('should set data-elevation="1" for elevation 1', async () => {
-      const { paper } = await renderPaper({ elevation: 1 })
-      expect(paper.getAttribute('data-elevation')).toBe('1')
+      await usingAsync(await renderPaper({ elevation: 1 }), async ({ paper }) => {
+        expect(paper.getAttribute('data-elevation')).toBe('1')
+      })
     })
 
     it('should set data-elevation="2" for elevation 2', async () => {
-      const { paper } = await renderPaper({ elevation: 2 })
-      expect(paper.getAttribute('data-elevation')).toBe('2')
+      await usingAsync(await renderPaper({ elevation: 2 }), async ({ paper }) => {
+        expect(paper.getAttribute('data-elevation')).toBe('2')
+      })
     })
 
     it('should set data-elevation="3" for elevation 3', async () => {
-      const { paper } = await renderPaper({ elevation: 3 })
-      expect(paper.getAttribute('data-elevation')).toBe('3')
+      await usingAsync(await renderPaper({ elevation: 3 }), async ({ paper }) => {
+        expect(paper.getAttribute('data-elevation')).toBe('3')
+      })
     })
   })
 })

package/src/components/paper.tsx

@@ -1,29 +1,31 @@
 import { Shade, createComponent } from '@furystack/shades'
 import { cssVariableTheme } from '../services/css-variable-theme.js'
 
-export const Paper = Shade<{ elevation?: 1 | 2 | 3 }>({
+export const Paper = Shade<{ elevation?: 0 | 1 | 2 | 3 }>({
   shadowDomName: 'shade-paper',
   elementBase: HTMLDivElement,
   elementBaseName: 'div',
   css: {
-    borderRadius: '3px',
-    margin: '8px',
-    padding: '6px 16px',
+    borderRadius: cssVariableTheme.shape.borderRadius.md,
+    padding: cssVariableTheme.spacing.md,
     backgroundColor: cssVariableTheme.background.paper,
-    color: cssVariableTheme.text.secondary,
+    color: cssVariableTheme.text.primary,
+    '&[data-elevation="0"]': {
+      boxShadow: cssVariableTheme.shadows.none,
+    },
     '&[data-elevation="1"]': {
-      boxShadow: '1px 1px 1px rgba(0,0,0,0.3)',
+      boxShadow: cssVariableTheme.shadows.sm,
     },
     '&[data-elevation="2"]': {
-      boxShadow: '1px 2px 2px rgba(0,0,0,0.3)',
+      boxShadow: cssVariableTheme.shadows.md,
     },
     '&[data-elevation="3"]': {
-      boxShadow: '1px 3px 3px rgba(0,0,0,0.3)',
+      boxShadow: cssVariableTheme.shadows.lg,
     },
   },
-  render: ({ props, children, element }) => {
+  render: ({ props, children, useHostProps }) => {
     const { elevation = 1 } = props
-    element.setAttribute('data-elevation', elevation.toString())
+    useHostProps({ 'data-elevation': elevation.toString() })
 
     return <>{children}</>
   },