@byline/ui 0.9.3 → 0.10.1

package/src/components/pager/pagination.tsx

@@ -0,0 +1,265 @@
+'use client'
+
+// usePagination hook from...
+// https://github.com/mui/material-ui/blob/master/packages/mui-material/src/usePagination/usePagination.js
+// https://github.com/mui/material-ui/blob/master/LICENSE
+/* eslint-disable react/jsx-pascal-case */
+import React, { useContext } from 'react'
+
+import cx from 'classnames'
+
+import { Ellipses } from './ellipses.js'
+import { FirstButton } from './first-button'
+import { usePagination } from './hooks/usePagination'
+import { LastButton } from './last-button'
+import { NextButton } from './next-button'
+import { NumberButton } from './number-button'
+import styles from './pagination.module.css'
+import { PreviousButton } from './previous-button'
+import type { Variant } from './@types'
+import type { UsePaginationItem, UsePaginationProps } from './hooks/types/usePagination'
+
+const PAGINATION_NAME = 'Pagination'
+const ROOT_NAME = 'Root'
+const PAGER_NAME = 'Pager'
+
+export interface PagerContextType {
+  variant: Variant
+  count: number
+  currentPage: number
+  hideNextButton?: boolean
+  hidePrevButton?: boolean
+  items: UsePaginationItem[]
+  showFirstButton?: boolean
+  showLastButton?: boolean
+  eventsEnabled?: boolean
+}
+
+export const PagerContext = React.createContext<PagerContextType>({
+  variant: 'default',
+  count: 1,
+  currentPage: 1,
+  hideNextButton: false,
+  hidePrevButton: false,
+  items: [],
+  showFirstButton: false,
+  showLastButton: false,
+  eventsEnabled: false,
+})
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// Pagination
+
+/**
+ * See ./hooks/types/usePagination.ts
+ */
+export interface PaginationProps extends UsePaginationProps {
+  className?: string
+  'aria-label'?: string
+  variant?: Variant
+  children?: React.ReactNode
+}
+
+export const Pagination = ({
+  children,
+  variant = 'default',
+  ...rest
+}: PaginationProps): React.JSX.Element => {
+  const { items } = usePagination({
+    ...rest,
+  })
+
+  const {
+    count,
+    page: currentPage,
+    hideNextButton,
+    hidePrevButton,
+    showFirstButton,
+    showLastButton,
+    onChange,
+  } = rest
+
+  const eventsEnabled = onChange != null
+
+  const context = React.useMemo(() => {
+    return {
+      variant,
+      items,
+      count,
+      currentPage,
+      hideNextButton,
+      hidePrevButton,
+      showFirstButton,
+      showLastButton,
+      eventsEnabled,
+    }
+  }, [
+    variant,
+    items,
+    count,
+    currentPage,
+    hideNextButton,
+    hidePrevButton,
+    showFirstButton,
+    showLastButton,
+    eventsEnabled,
+  ])
+
+  return <PagerContext value={context}>{children}</PagerContext>
+}
+
+Pagination.displayName = PAGINATION_NAME
+
+// Hook helper usePager
+export function usePager(): PagerContextType {
+  const context = useContext(PagerContext)
+  if (context === undefined) {
+    throw new Error('usePager must be used within a PagerContext')
+  }
+  return context
+}
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// First, Previous, Next, Last and Page number buttons
+
+// Define the ref type
+export type RefType = HTMLButtonElement | HTMLElement
+
+export type PagerButtonProps = {
+  className?: string
+  disabled?: boolean
+  children?: React.ReactNode
+  render?: React.ReactElement
+  onClick?: React.ReactEventHandler<Element> | undefined
+}
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// Pager container component
+export interface PagerProps {
+  children?: React.ReactNode
+  renderFirst?: (key: string, item: UsePaginationItem) => React.ReactNode
+  renderPrevious?: (key: string, item: UsePaginationItem) => React.ReactNode
+  renderPageNumber?: (key: string, item: UsePaginationItem) => React.ReactNode
+  renderNext?: (key: string, item: UsePaginationItem) => React.ReactNode
+  renderLast?: (key: string, item: UsePaginationItem, count: number) => React.ReactNode
+  renderEllipses?: (key: string) => React.ReactNode
+}
+
+const Pager = ({
+  renderFirst = (key, item) => (
+    <Pagination.First key={key} disabled={item.disabled} onClick={item.onClick} />
+  ),
+  renderPrevious = (key, item) => (
+    <Pagination.Previous key={key} disabled={item.disabled} onClick={item.onClick} />
+  ),
+  renderPageNumber = (key, item) => (
+    <Pagination.Number
+      key={key}
+      page={item.page}
+      disabled={item.disabled}
+      selected={item.selected}
+      activeClassName="active"
+      onClick={item.onClick}
+    />
+  ),
+  renderNext = (key, item) => (
+    <Pagination.Next key={key} page={item.page} disabled={item.disabled} onClick={item.onClick} />
+  ),
+  renderLast = (key, item, count) => (
+    <Pagination.Last key={key} disabled={item.disabled} count={count} onClick={item.onClick} />
+  ),
+  renderEllipses = (key) => <Ellipses key={key} />,
+}: PagerProps): React.JSX.Element => {
+  const { items, count } = React.useContext(PagerContext)
+
+  return (
+    <>
+      {items.map((item, index) => {
+        const key = `${item.page}-${index}`
+        switch (item.type) {
+          case 'start-ellipsis':
+          case 'end-ellipsis':
+            return renderEllipses(key)
+          case 'first':
+            return renderFirst(key, item)
+          case 'previous':
+            return renderPrevious(key, item)
+          case 'page':
+            return renderPageNumber(key, item)
+          case 'next':
+            return renderNext(key, item)
+          case 'last':
+            return renderLast(key, item, count)
+          default:
+            return null
+        }
+      })}
+    </>
+  )
+}
+
+Pager.displayName = PAGER_NAME
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// Root
+export type RootElement = React.ComponentRef<'nav'>
+type PrimitiveRootProps = React.ComponentPropsWithoutRef<'nav'>
+
+export interface RootProps extends PrimitiveRootProps {
+  className?: string
+  itemsClassName?: string
+  dataTestId?: string
+  ariaLabel?: string
+  children?: React.ReactNode
+}
+
+const Root = ({
+  ref,
+  className,
+  itemsClassName,
+  children,
+  ariaLabel,
+  dataTestId,
+  ...rest
+}: RootProps & {
+  ref?: React.RefObject<RootElement>
+}) => {
+  const { variant } = usePager()
+
+  return (
+    <nav
+      data-testid={dataTestId}
+      ref={ref}
+      className={cx(
+        'infonomic-pagination-root',
+        styles['pagination-root'],
+        'pagination-root',
+        className
+      )}
+      {...rest}
+      aria-label={ariaLabel ?? 'Pager navigation'}
+    >
+      <ul
+        className={cx(
+          'infonomic-pagination-items',
+          styles['pagination-items'],
+          styles[variant],
+          itemsClassName
+        )}
+      >
+        {children}
+      </ul>
+    </nav>
+  )
+}
+
+Root.displayName = ROOT_NAME
+
+Pagination.Pager = Pager
+Pagination.Root = Root
+Pagination.First = FirstButton
+Pagination.Previous = PreviousButton
+Pagination.Number = NumberButton
+Pagination.Next = NextButton
+Pagination.Last = LastButton
+Pagination.Ellipses = Ellipses

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

@@ -0,0 +1,56 @@
+'use client'
+
+import React from 'react'
+
+import cx from 'classnames'
+
+import { ChevronLeftIcon } from '../../icons/chevron-left-icon.js'
+import { usePager } from './pagination'
+import styles from './pagination.module.css'
+import type { PagerButtonProps, RefType } from './pagination'
+
+export const PreviousButton = ({
+  ref,
+  className,
+  disabled,
+  render,
+  children,
+  ...rest
+}: PagerButtonProps & {
+  ref?: React.RefObject<RefType>
+}) => {
+  const { showFirstButton, variant } = usePager()
+
+  const sharedProps = {
+    className: cx(
+      styles['previous-button'],
+      styles[variant],
+      { [styles['rounded-left']]: showFirstButton == null || showFirstButton === false },
+      'pagination-previous',
+      className
+    ),
+    disabled,
+    title: 'Previous',
+    'data-testid': 'pagination-previous',
+    ...(disabled ? { 'aria-disabled': true } : { 'aria-label': 'Previous' }),
+    ...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 ?? <ChevronLeftIcon width="18px" height="18px" />}
+        </button>
+      )}
+    </li>
+  )
+}
+
+PreviousButton.displayName = 'PreviousButton'

package/src/components/scroll-area/scroll-area.module.css

@@ -0,0 +1,74 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  .root,
+  :global(.infonomic-scroll-area) {
+    border-radius: 4px;
+    overflow: hidden;
+    background-color: inherit;
+    --scrollbar-size: 10px;
+  }
+
+  .viewport,
+  :global(.infonomic-scroll-area-viewport) {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+  }
+
+  .scrollbar,
+  :global(.infonomic-scroll-area-scrollbar) {
+    display: flex;
+    /* ensures no selection */
+    user-select: none;
+    /* disable browser handling of all panning and zooming gestures on touch devices */
+    touch-action: none;
+    padding: 2px;
+    background: var(--surface-panel-scrollbar);
+    transition: background 160ms ease-out;
+
+    &:hover {
+      background: var(--surface-panel-scrollbar);
+    }
+
+    &[data-orientation="vertical"] {
+      width: var(--scrollbar-size);
+    }
+
+    &[data-orientation="horizontal"] {
+      flex-direction: column;
+      height: var(--scrollbar-size);
+    }
+  }
+
+  .thumb,
+  :global(.infonomic-scroll-area-thumb) {
+    flex: 1;
+    background: var(--surface-panel-scrollbar-thumb);
+    border-radius: var(--border-radius-sm);
+    position: relative;
+
+    /* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      height: 100%;
+      min-width: 44px;
+      min-height: 44px;
+    }
+  }
+
+  .corner,
+  :global(.infonomic-scroll-area-corner) {
+    background: var(--surface-panel-scrollbar);
+  }
+}

package/src/components/scroll-area/scroll-area.tsx

@@ -0,0 +1,32 @@
+import type React from 'react'
+
+import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area'
+import cx from 'classnames'
+
+import styles from './scroll-area.module.css'
+
+interface ScrollAreaProps extends React.ComponentProps<typeof ScrollAreaPrimitive.Root> {}
+
+export const ScrollArea = ({ children, style, className }: ScrollAreaProps) => (
+  <ScrollAreaPrimitive.Root
+    style={style}
+    className={cx('infonomic-scroll-area', styles.root, className)}
+  >
+    <ScrollAreaPrimitive.Viewport className={cx('infonomic-scroll-area-viewport', styles.viewport)}>
+      <ScrollAreaPrimitive.Content>{children}</ScrollAreaPrimitive.Content>
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollAreaPrimitive.Scrollbar
+      className={cx('infonomic-scroll-area-scrollbar', styles.scrollbar)}
+      orientation="vertical"
+    >
+      <ScrollAreaPrimitive.Thumb className={cx('infonomic-scroll-area-thumb', styles.thumb)} />
+    </ScrollAreaPrimitive.Scrollbar>
+    <ScrollAreaPrimitive.Scrollbar
+      className={cx('infonomic-scroll-area-scrollbar', styles.scrollbar)}
+      orientation="horizontal"
+    >
+      <ScrollAreaPrimitive.Thumb className={cx('infonomic-scroll-area-thumb', styles.thumb)} />
+    </ScrollAreaPrimitive.Scrollbar>
+    <ScrollAreaPrimitive.Corner className={cx('infonomic-scroll-area-corner', styles.corner)} />
+  </ScrollAreaPrimitive.Root>
+)

package/src/components/scroll-to-top/scroll-to-top.module.css

@@ -0,0 +1,86 @@
+@layer byline-base, byline-utilities, byline-theme, byline-typography, byline-components;
+
+@layer byline-components {
+  .scroll-to-top,
+  :global(.infonomic-scroll-to-top) {
+    display: flex;
+    position: fixed;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    visibility: hidden;
+    align-items: center;
+    text-decoration: none;
+    border-style: none;
+    padding: 0;
+    margin: 0;
+    outline: none;
+    z-index: 20;
+    justify-content: center;
+    bottom: 45px;
+    right: 30px;
+    color: var(--text-on-primary-strong);
+    background-color: var(--fill-primary-strong);
+    transition-property: all, color;
+    transition-duration: 0.3s, 1ms;
+    transition-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1), ease;
+    transition-delay: 0s, 0s;
+    cursor: pointer;
+  }
+
+  .scroll-to-top span,
+  :global(.infonomic-scroll-to-top span) {
+    width: 18px;
+    padding-bottom: 3px;
+  }
+
+  .scroll-to-top span svg path,
+  :global(.infonomic-scroll-to-top span svg path) {
+    stroke: none;
+    fill: var(--text-on-primary-strong);
+  }
+
+  .scroll-to-top:hover,
+  .scroll-to-top:focus,
+  :global(.infonomic-scroll-to-top:hover),
+  :global(.infonomic-scroll-to-top:focus) {
+    color: var(--text-on-primary-strong);
+    background-color: var(--fill-primary-strong-hover);
+    transform: translateY(-5px);
+  }
+
+  .scroll-to-top-shown,
+  :global(.infonomic-scroll-to-top-shown) {
+    min-width: 0;
+    opacity: 1;
+    visibility: visible;
+    padding: 0;
+    width: 40px;
+    height: 40px;
+    bottom: 20px;
+    right: 10px;
+    border-radius: 20px;
+  }
+
+  @media screen and (min-width: 587px) {
+    .scroll-to-top,
+    :global(.infonomic-scroll-to-top) {
+      bottom: 45px;
+      right: 45px;
+    }
+
+    .scroll-to-top span,
+    :global(.infonomic-scroll-to-top span) {
+      width: 18px;
+    }
+
+    .scroll-to-top-shown,
+    :global(.infonomic-scroll-to-top-shown) {
+      width: 42px;
+      height: 42px;
+      border-radius: 21px;
+      bottom: 22px;
+      right: 22px;
+    }
+  }
+}

package/src/components/scroll-to-top/scroll-to-top.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import { type ComponentProps, type MouseEvent, useEffect, useState } from 'react'
+
+import cx from 'classnames'
+
+import styles from './scroll-to-top.module.css'
+
+export interface ScrollToTopProps extends ComponentProps<'button'> {
+  /**
+   * The scroll position (Y-axis) in pixels that triggers the button to appear.
+   * @default 200
+   */
+  showAt?: number
+  /**
+   * The target scroll position (Y-axis) to scroll to when clicked.
+   * @default -65
+   */
+  offset?: number
+}
+
+export function ScrollToTop({
+  className,
+  showAt = 200,
+  offset = -65,
+  type = 'button',
+  'aria-label': ariaLabel = 'Scroll to top',
+  onClick,
+  ...props
+}: ScrollToTopProps) {
+  const [show, setShow] = useState(false)
+  const iconTitle = ariaLabel.trim() ? ariaLabel : 'Scroll to top'
+
+  const handleOnClick = (e: MouseEvent<HTMLButtonElement>): void => {
+    window.scrollTo({ top: offset, left: 0, behavior: 'smooth' })
+    onClick?.(e)
+  }
+
+  useEffect(() => {
+    let ticking = false
+
+    const handleOnScroll = (): void => {
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          setShow(window.scrollY > showAt)
+          ticking = false
+        })
+        ticking = true
+      }
+    }
+
+    window.addEventListener('scroll', handleOnScroll, { passive: true })
+    return () => {
+      window.removeEventListener('scroll', handleOnScroll)
+    }
+  }, [showAt])
+
+  return (
+    <button
+      type={type}
+      aria-label={ariaLabel}
+      onClick={handleOnClick}
+      className={cx(
+        'infonomic-scroll-to-top',
+        styles['scroll-to-top'],
+        {
+          'infonomic-scroll-to-top-shown': show,
+          [styles['scroll-to-top-shown']]: show,
+        },
+        className
+      )}
+      {...props}
+    >
+      <span aria-hidden="true">
+        <svg
+          className="icon"
+          style={{ fill: 'currentColor' }}
+          focusable="false"
+          viewBox="0 0 51 32"
+        >
+          <title>{iconTitle}</title>
+          <path d="M25.4,9.8L45.6,30l4.5-4.5L25.4,0.8L0.8,25.4L5.3,30L25.4,9.8z" />
+        </svg>
+      </span>
+    </button>
+  )
+}

package/src/components/section/section.module.css

@@ -0,0 +1,14 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  .section,
+  :global(.infonomic-section) {
+    width: 100%;
+    position: relative;
+  }
+}

package/src/components/section/section.tsx

@@ -0,0 +1,23 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import styles from './section.module.css'
+
+type SectionIntrinsicProps = React.JSX.IntrinsicElements['section']
+export interface SectionProps extends SectionIntrinsicProps {}
+
+export const Section = function Section({
+  ref,
+  className,
+  children,
+  ...rest
+}: SectionProps & {
+  ref?: React.RefObject<HTMLElement>
+}): React.JSX.Element {
+  return (
+    <section className={cx('infonomic-section', styles.section, className)} ref={ref} {...rest}>
+      {children}
+    </section>
+  )
+}

package/src/components/shimmer/shimmer.module.css

@@ -0,0 +1,61 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+/* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
+@layer byline-components {
+  .shimmer,
+  :global(.infonomic-shimmer) {
+    position: relative;
+    overflow: hidden;
+    background-color: #f0f0f0;
+    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+  }
+
+  :global(.dark),
+  :global([data-theme="dark"]) {
+    .shimmer,
+    :global(.infonomic-shimmer) {
+      background-color: #141414;
+      background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.01), transparent);
+    }
+  }
+
+  .shimmerContainer,
+  :global(.infonomic-shimmer-container) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .rectangular,
+  :global(.infonomic-shimmer-rectangular) {
+    border-radius: 0.25rem;
+  }
+
+  .text,
+  :global(.infonomic-shimmer-text) {
+    border-radius: 0.125rem;
+    height: 1rem;
+  }
+
+  .circular,
+  :global(.infonomic-shimmer-circular) {
+    border-radius: 50%;
+    aspect-ratio: 1;
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+
+    100% {
+      background-position: 200% 0;
+    }
+  }
+}