@byline/ui 0.9.3 → 0.10.1

package/src/components/pager/hooks/usePagination.ts

@@ -0,0 +1,140 @@
+// https://github.com/mui/material-ui/blob/master/packages/mui-material/src/usePagination/usePagination.js
+// https://github.com/mui/material-ui/blob/master/LICENSE
+
+import type {
+  UsePaginationItem,
+  UsePaginationProps,
+  UsePaginationResult,
+} from './types/usePagination'
+
+export function usePagination(props: UsePaginationProps): UsePaginationResult {
+  const {
+    boundaryCount = 1,
+    count = 1,
+    disabled = false,
+    hideNextButton = false,
+    hidePrevButton = false,
+    onChange: handleChange,
+    page = 1,
+    showFirstButton = false,
+    showLastButton = false,
+    siblingCount = 1,
+    ...other
+  } = props
+
+  const handleClick = (event: any, value: number): void => {
+    if (handleChange != null) {
+      handleChange(event, value)
+    }
+  }
+
+  // https://dev.to/namirsab/comment/2050
+  const range = (start: number, end: number): number[] => {
+    const length = end - start + 1
+    return Array.from({ length }, (_, i) => start + i)
+  }
+
+  const startPages = range(1, Math.min(boundaryCount, count))
+  const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count)
+
+  const siblingsStart = Math.max(
+    Math.min(
+      // Natural start
+      page - siblingCount,
+      // Lower boundary when page is high
+      count - boundaryCount - siblingCount * 2 - 1
+    ),
+    // Greater than startPages
+    boundaryCount + 2
+  )
+
+  const siblingsEnd = Math.min(
+    Math.max(
+      // Natural end
+      page + siblingCount,
+      // Upper boundary when page is low
+      boundaryCount + siblingCount * 2 + 2
+    ),
+    // Less than endPages
+    endPages.length > 0 ? endPages[0] - 2 : count - 1
+  )
+
+  // Basic list of items to render
+  // e.g. itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
+  const itemList = [
+    ...(showFirstButton ? ['first'] : []),
+    ...(hidePrevButton ? [] : ['previous']),
+    ...startPages,
+
+    // Start ellipsis
+    // eslint-disable-next-line no-nested-ternary
+    ...(siblingsStart > boundaryCount + 2
+      ? ['start-ellipsis']
+      : boundaryCount + 1 < count - boundaryCount
+        ? [boundaryCount + 1]
+        : []),
+
+    // Sibling pages
+    ...range(siblingsStart, siblingsEnd),
+
+    // End ellipsis
+    // eslint-disable-next-line no-nested-ternary
+    ...(siblingsEnd < count - boundaryCount - 1
+      ? ['end-ellipsis']
+      : count - boundaryCount > boundaryCount
+        ? [count - boundaryCount]
+        : []),
+
+    ...endPages,
+    ...(hideNextButton ? [] : ['next']),
+    ...(showLastButton ? ['last'] : []),
+  ]
+
+  // Map the button type to its page number
+  const buttonPage = (type: string): number => {
+    switch (type) {
+      case 'first':
+        return 1
+      case 'previous':
+        return page - 1
+      case 'next':
+        return page + 1
+      case 'last':
+        return count
+      default:
+        return 1
+    }
+  }
+
+  // Convert the basic item list to PaginationItem props objects
+  const items = itemList.map((item) => {
+    return typeof item === 'number'
+      ? ({
+          onClick: (event: any): void => {
+            handleClick(event, item)
+          },
+          type: 'page',
+          page: item,
+          selected: item === page,
+          disabled: item === page,
+          'aria-current': item === page ? 'true' : undefined,
+        } satisfies UsePaginationItem)
+      : ({
+          onClick: (event: any): void => {
+            handleClick(event, buttonPage(item))
+          },
+          type: item as UsePaginationItem['type'],
+          page: buttonPage(item),
+          selected: false,
+          disabled:
+            disabled ||
+            (!item.includes('ellipsis') &&
+              (item === 'next' || item === 'last' ? page >= count : page <= 1)),
+        } satisfies UsePaginationItem)
+  })
+
+  return {
+    items,
+    ...other,
+  }
+}

package/src/components/pager/icons/first.tsx

@@ -0,0 +1,33 @@
+export function FirstIcon(): React.JSX.Element {
+  return (
+    <>
+      <span className="sr-only">First</span>
+      <svg
+        className="h-5 w-5"
+        aria-hidden="true"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+          clipRule="evenodd"
+        />
+      </svg>
+      <svg
+        className="-ml-2 h-5 w-5"
+        aria-hidden="true"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+          clipRule="evenodd"
+        />
+      </svg>
+    </>
+  )
+}

package/src/components/pager/icons/index.tsx

@@ -0,0 +1,4 @@
+export * from './first'
+export * from './last'
+export * from './next'
+export * from './previous'

package/src/components/pager/icons/last.tsx

@@ -0,0 +1,33 @@
+export function LastIcon(): React.JSX.Element {
+  return (
+    <>
+      <span className="sr-only">Last</span>
+      <svg
+        className="-mr-2 h-5 w-5"
+        aria-hidden="true"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+          clipRule="evenodd"
+        />
+      </svg>
+      <svg
+        className="h-5 w-5"
+        aria-hidden="true"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+          clipRule="evenodd"
+        />
+      </svg>
+    </>
+  )
+}

package/src/components/pager/icons/next.tsx

@@ -0,0 +1,20 @@
+export function NextIcon(): React.JSX.Element {
+  return (
+    <>
+      <span className="sr-only">Next</span>
+      <svg
+        className="h-5 w-5"
+        aria-hidden="true"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+          clipRule="evenodd"
+        />
+      </svg>
+    </>
+  )
+}

package/src/components/pager/icons/previous.tsx

@@ -0,0 +1,20 @@
+export function PreviousIcon(): React.JSX.Element {
+  return (
+    <>
+      <span className="sr-only">Previous</span>
+      <svg
+        className="h-5 w-5"
+        aria-hidden="true"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+          clipRule="evenodd"
+        />
+      </svg>
+    </>
+  )
+}

package/src/components/pager/index.ts

@@ -0,0 +1,4 @@
+export * from './event-pager'
+export * from './hooks/usePagination'
+export * from './icons/index'
+export * from './pagination'

package/src/components/pager/last-button.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import React from 'react'
+
+import cx from 'classnames'
+
+import { ChevronRightDoubleIcon } from '../../icons/chevron-right-double-icon.js'
+import { usePager } from './pagination'
+import styles from './pagination.module.css'
+import type { PagerButtonProps, RefType } from './pagination'
+
+export type LastButtonProps = PagerButtonProps & {
+  count: number
+}
+
+export const LastButton = ({
+  ref,
+  className,
+  disabled,
+  count,
+  render,
+  children,
+  ...rest
+}: LastButtonProps & {
+  ref?: React.RefObject<RefType>
+}) => {
+  const { variant } = usePager()
+
+  const sharedProps = {
+    className: cx(
+      styles['last-button'],
+      styles[variant],
+      styles['rounded-right'],
+      'pagination-last',
+      className
+    ),
+    disabled,
+    title: 'Last',
+    'data-testid': 'pagination-last',
+    ...(disabled ? { 'aria-disabled': true } : { 'aria-label': 'Last' }),
+    ...rest,
+  }
+
+  return (
+    <li className={styles['mobile-toggle']}>
+      {render ? (
+        React.cloneElement(
+          render,
+          { ref, ...sharedProps } as React.Attributes & Record<string, unknown>,
+          children
+        )
+      ) : (
+        <button ref={ref as React.RefObject<HTMLButtonElement>} {...sharedProps}>
+          {children ?? <ChevronRightDoubleIcon width="18px" height="18px" />}
+        </button>
+      )}
+    </li>
+  )
+}
+
+LastButton.displayName = 'LastButton'

package/src/components/pager/next-button.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import React from 'react'
+
+import cx from 'classnames'
+
+import { ChevronRightIcon } from '../../icons/chevron-right-icon.js'
+import { usePager } from './pagination'
+import styles from './pagination.module.css'
+import type { PagerButtonProps, RefType } from './pagination'
+
+export type NextButtonProps = PagerButtonProps & {
+  page: number | null
+}
+
+export const NextButton = ({
+  ref,
+  className,
+  disabled,
+  page,
+  render,
+  children,
+  ...rest
+}: NextButtonProps & {
+  ref?: React.RefObject<RefType>
+}) => {
+  const { variant, showLastButton } = usePager()
+
+  const sharedProps = {
+    className: cx(
+      styles['next-button'],
+      [styles[variant]],
+      { [styles['rounded-right']]: showLastButton == null || showLastButton === false },
+      'pagination-next',
+      className
+    ),
+    disabled,
+    title: 'Next',
+    'data-testid': 'pagination-next',
+    ...(disabled ? { 'aria-disabled': true } : { 'aria-label': 'Next' }),
+    ...rest,
+  }
+
+  return (
+    <li className={styles['mobile-toggle']}>
+      {render ? (
+        React.cloneElement(
+          render,
+          { ref, ...sharedProps } as React.Attributes & Record<string, unknown>,
+          children
+        )
+      ) : (
+        <button ref={ref as React.RefObject<HTMLButtonElement>} {...sharedProps}>
+          {children ?? <ChevronRightIcon width="18px" height="18px" />}
+        </button>
+      )}
+    </li>
+  )
+}
+
+NextButton.displayName = 'NextButton'

package/src/components/pager/number-button.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import React from 'react'
+
+import cx from 'classnames'
+
+import { useMediaQuery } from '../../hooks/use-media-query'
+import { usePager } from './pagination'
+import styles from './pagination.module.css'
+import type { PagerButtonProps, RefType } from './pagination'
+
+export type NumberButtonProps = PagerButtonProps & {
+  page: number | null
+  activeClassName?: string
+  selected?: boolean
+}
+
+export const NumberButton = ({
+  ref,
+  page,
+  className,
+  disabled,
+  activeClassName,
+  render,
+  children,
+  ...rest
+}: NumberButtonProps & {
+  ref?: React.RefObject<RefType>
+}) => {
+  const mobile = useMediaQuery('(max-width: 640px)')
+  const {
+    variant,
+    currentPage,
+    count,
+    showFirstButton,
+    showLastButton,
+    hideNextButton,
+    hidePrevButton,
+  } = usePager()
+
+  const active = page === currentPage
+
+  const sharedProps = {
+    className: cx(
+      styles['number-button'],
+      [styles[variant]],
+      { [styles.active]: active === true, active: active === true },
+      {
+        [styles['rounded-left']]:
+          page === 1 && ((!(showFirstButton ?? false) && (hidePrevButton ?? false)) || mobile),
+      },
+      {
+        [styles['rounded-right']]:
+          page === count && ((!(showLastButton ?? false) && (hideNextButton ?? false)) || mobile),
+      },
+      'pagination-number',
+      className
+    ),
+    'data-testid':
+      cx({
+        'pager-number-active': currentPage === page,
+        [`pager-number-${page}`]: currentPage !== page,
+      }).length > 0 || undefined,
+    disabled,
+    'aria-current': currentPage === page,
+    'aria-label': currentPage === page ? `Current Page, Page ${page}` : `Page ${page}`,
+    ...rest,
+  }
+
+  return (
+    <li className="flex">
+      {render ? (
+        React.cloneElement(
+          render,
+          { ref, ...sharedProps } as React.Attributes & Record<string, unknown>,
+          children
+        )
+      ) : (
+        <button ref={ref as React.RefObject<HTMLButtonElement>} {...sharedProps}>
+          {children ?? page}
+        </button>
+      )}
+    </li>
+  )
+}
+
+NumberButton.displayName = 'NumberButton'

package/src/components/pager/pagination.module.css

@@ -0,0 +1,147 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  .pagination-root,
+  :global(.infonomic-pagination-root) {
+    display: flex;
+    padding: 0;
+    align-items: center;
+  }
+
+  .pagination-items,
+  :global(.infonomic-pagination-items) {
+    display: flex;
+    align-items: center;
+    list-style: none;
+  }
+
+  .pagination-items.dashboard li,
+  .pagination-items.default li,
+  :global(.infonomic-pagination-items.dashboard) li,
+  :global(.infonomic-pagination-items.default) li {
+    margin-right: -1px;
+  }
+
+  .pagination-items.classic li,
+  :global(.infonomic-pagination-items.classic) li {
+    margin-right: 0;
+  }
+
+  .pagination-items.classic,
+  :global(.infonomic-pagination-items.classic) {
+    gap: 6px;
+  }
+
+  .number-button.dashboard.rounded-left,
+  .number-button.default.rounded-left,
+  .first-button.dashboard.rounded-left,
+  .first-button.default.rounded-left,
+  .previous-button.dashboard.rounded-left,
+  .previous-button.default.rounded-left,
+  .last-button.dashboard.rounded-left,
+  .last-button.default.rounded-left,
+  .next-button.dashboard.rounded-left,
+  .next-button.default.rounded-left {
+    border-top-left-radius: var(--border-radius-sm);
+    border-bottom-left-radius: var(--border-radius-sm);
+  }
+
+  .number-button.dashboard.rounded-right,
+  .number-button.default.rounded-right,
+  .first-button.dashboard.rounded-right,
+  .first-button.default.rounded-right,
+  .previous-button.dashboard.rounded-right,
+  .previous-button.default.rounded-right,
+  .last-button.dashboard.rounded-right,
+  .last-button.default.rounded-right,
+  .next-button.dashboard.rounded-right,
+  .next-button.default.rounded-right {
+    border-top-right-radius: var(--border-radius-sm);
+    border-bottom-right-radius: var(--border-radius-sm);
+  }
+
+  .ellipses,
+  .last-button,
+  .next-button,
+  .previous-button,
+  .first-button,
+  .number-button {
+    margin-left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    line-height: 1;
+    border: 1px solid var(--stroke-primary);
+    background-color: var(--background);
+    color: var(--foreground);
+    font-size: var(--font-size-sm);
+  }
+
+  .previous-button,
+  .last-button,
+  .next-button,
+  .first-button {
+    width: 38px;
+  }
+
+  .ellipses,
+  .number-button {
+    min-width: 42px;
+  }
+
+  .last-button:hover,
+  .next-button:hover,
+  .number-button:hover,
+  .previous-button:hover,
+  .first-button:hover {
+    color: var(--text-on-primary-strong);
+    background-color: var(--fill-primary-strong);
+  }
+
+  .last-button:disabled,
+  .last-button[disabled],
+  .next-button:disabled,
+  .next-button[disabled],
+  .number-button:disabled,
+  .number-button[disabled],
+  .previous-button:disabled,
+  .previous-button[disabled],
+  .first-button:disabled,
+  .first-button[disabled] {
+    cursor: default;
+  }
+
+  .number-button.active {
+    color: var(--text-on-primary-strong);
+    background-color: var(--fill-primary-strong);
+  }
+
+  /* Opinionated mobile */
+  .mobile-toggle {
+    display: none;
+  }
+
+  @media (min-width: 40rem) {
+    .mobile-toggle {
+      display: flex;
+    }
+  }
+
+  :global(.dark),
+  :global([data-theme="dark"]) {
+    .ellipses,
+    .number-button,
+    .next-button,
+    .last-button,
+    .previous-button,
+    .first-button {
+      border-color: var(--border-color);
+    }
+  }
+}