@infonomic/uikit 2.0.0 → 2.1.0

package/src/components/pager/index.ts

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

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

@@ -0,0 +1,57 @@
+'use client'
+
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+
+import { DoubleArrowRightIcon } from '@radix-ui/react-icons'
+import { Slot } from '@radix-ui/react-slot'
+import cx from 'classnames'
+import type React from 'react'
+import type { PagerButtonProps, RefType } from './pagination'
+import { usePager } from './pagination'
+
+import styles from './pagination.module.css'
+
+export type LastButtonProps = PagerButtonProps & {
+  count: number
+}
+
+export const LastButton = ({
+  ref,
+  className,
+  disabled,
+  count,
+  asChild,
+  children,
+  ...rest
+}: LastButtonProps & {
+  ref?: React.RefObject<RefType>
+}) => {
+  const { variant } = usePager()
+  const Comp = asChild != null ? Slot : ('button' as React.ElementType)
+
+  const aria = disabled ? { 'aria-disabled': true } : { 'aria-label': 'Last' }
+
+  return (
+    <li className={styles['mobile-toggle']}>
+      <Comp
+        ref={ref}
+        className={cx(
+          styles['last-button'],
+          styles[variant],
+          styles['rounded-right'],
+          'pagination-last',
+          className
+        )}
+        disabled={disabled}
+        title="Last"
+        data-testid="pagination-last"
+        {...aria}
+        {...rest}
+      >
+        {(asChild ?? false) ? children : <DoubleArrowRightIcon />}
+      </Comp>
+    </li>
+  )
+}
+
+LastButton.displayName = 'LastButton'

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

@@ -0,0 +1,55 @@
+'use client'
+
+import { ChevronRightIcon } from '@radix-ui/react-icons'
+import { Slot } from '@radix-ui/react-slot'
+import cx from 'classnames'
+import type React from 'react'
+import type { PagerButtonProps, RefType } from './pagination'
+import { usePager } from './pagination'
+
+import styles from './pagination.module.css'
+
+export type NextButtonProps = PagerButtonProps & {
+  page: number | null
+}
+
+export const NextButton = ({
+  ref,
+  className,
+  disabled,
+  page,
+  asChild,
+  children,
+  ...rest
+}: NextButtonProps & {
+  ref?: React.RefObject<RefType>
+}) => {
+  const Comp = asChild != null ? Slot : ('button' as React.ElementType)
+  const { variant, showLastButton } = usePager()
+
+  const aria = disabled ? { 'aria-disabled': true } : { 'aria-label': 'Next' }
+
+  return (
+    <li className={styles['mobile-toggle']}>
+      <Comp
+        ref={ref}
+        className={cx(
+          styles['next-button'],
+          [styles[variant]],
+          { [styles['rounded-right']]: showLastButton == null || showLastButton === false },
+          'pagination-next',
+          className
+        )}
+        disabled={disabled}
+        title="Next"
+        data-testid="pagination-next"
+        {...aria}
+        {...rest}
+      >
+        {(asChild ?? false) ? children : <ChevronRightIcon />}
+      </Comp>
+    </li>
+  )
+}
+
+NextButton.displayName = 'NextButton'

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

@@ -0,0 +1,83 @@
+'use client'
+
+import { Slot } from '@radix-ui/react-slot'
+import cx from 'classnames'
+import type React from 'react'
+import { useMediaQuery } from '../../hooks/use-media-query'
+
+import type { PagerButtonProps, RefType } from './pagination'
+import { usePager } from './pagination'
+
+import styles from './pagination.module.css'
+
+export type NumberButtonProps = PagerButtonProps & {
+  page: number | null
+  activeClassName?: string
+  selected?: boolean
+}
+
+export const NumberButton = ({
+  ref,
+  page,
+  className,
+  disabled,
+  activeClassName,
+  asChild,
+  children,
+  ...rest
+}: NumberButtonProps & {
+  ref?: React.RefObject<RefType>
+}) => {
+  const mobile = useMediaQuery('(max-width: 640px)')
+  const {
+    variant,
+    currentPage,
+    count,
+    showFirstButton,
+    showLastButton,
+    hideNextButton,
+    hidePrevButton,
+  } = usePager()
+
+  const Comp = asChild != null ? Slot : ('button' as React.ElementType)
+
+  const active = page === currentPage
+
+  return (
+    <li className="flex">
+      <Comp
+        ref={ref}
+        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={disabled}
+        aria-current={currentPage === page}
+        aria-label={currentPage === page ? `Current Page, Page ${page}` : `Page ${page}`}
+        {...rest}
+      >
+        {(asChild ?? false) ? children : <>{page}</>}
+      </Comp>
+    </li>
+  )
+}
+
+NumberButton.displayName = 'NumberButton'

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

@@ -0,0 +1,165 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .pagination-root {
+    display: flex;
+    padding: 0;
+    align-items: center;
+  }
+
+  .pagination-items {
+    display: flex;
+    align-items: center;
+    list-style: none;
+  }
+
+  .pagination-items {
+    display: flex;
+    align-items: center;
+    list-style: none;
+  }
+
+  .pagination-items.dashboard li,
+  .pagination-items.default li {
+    margin-right: -1px;
+  }
+
+  .pagination-items.classic li {
+    margin-right: 0;
+  }
+
+  .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(--primary-500);
+    background-color: white;
+    color: var(--gray-900);
+    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: white;
+    background-color: var(--primary-600);
+  }
+
+  .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 {
+    background-color: var(--primary-600);
+    color: white;
+  }
+
+
+  /* Opinionated mobile */
+  .mobile-toggle {
+    display: none;
+  }
+
+  @media(min-width: 640px) {
+
+    .mobile-toggle {
+      display: flex;
+    }
+  }
+
+  /* 🌙 Dark via `.dark` class. We rely on the 
+  * consuming application to detect a user's preferred
+  * color scheme - either by header or cookie, and set
+  * a root html class accordingly
+  */
+  :global(.dark) {
+
+    .ellipses,
+    .number-button,
+    .next-button,
+    .last-button,
+    .previous-button,
+    .first-button {
+      border-color: var(--canvas-700);
+      background-color: var(--canvas-800);
+      color: var(--gray-200);
+    }
+
+    .number-button:hover,
+    .next-button:hover,
+    .last-button:hover,
+    .previous-button:hover,
+    .first-button:hover {
+      background-color: var(--canvas-700);
+    }
+
+    .number-button.active {
+      background-color: var(--primary-500);
+      color: white;
+    }
+  }
+}

package/src/components/pager/pagination.stories.tsx

@@ -0,0 +1,190 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { EventPager } from './event-pager.js'
+
+const meta: Meta<typeof EventPager> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Components/Pager',
+  component: EventPager,
+}
+
+export default meta
+
+const DefaultPager = (): React.JSX.Element => {
+  const [page, setPage] = React.useState(1)
+
+  const handlePageChange = (event: any, number: number): void => {
+    setPage(number)
+  }
+
+  return (
+    <>
+      <style>
+        {`
+        .event-pager {
+          margin-bottom: 1rem;
+        }
+      `}
+      </style>
+      <div style={{ marginBottom: '2rem', maxWidth: '600px' }}>
+        <p style={{ marginBottom: '1rem' }}>Stateful Pagers: Current page: {page}</p>
+        <EventPager
+          page={page}
+          count={24}
+          className="event-pager"
+          onChange={handlePageChange}
+          showFirstButton
+          showLastButton
+          componentName="pager1"
+          aria-label="Pager 1"
+        />
+        <EventPager
+          page={page}
+          count={24}
+          className="event-pager"
+          onChange={handlePageChange}
+          componentName="pager2"
+          aria-label="Pager 2"
+        />
+        <EventPager
+          page={page}
+          count={24}
+          className="event-pager"
+          onChange={handlePageChange}
+          componentName="pager3"
+          hideNextButton
+          hidePrevButton
+          aria-label="Pager 3"
+        />
+      </div>
+    </>
+  )
+}
+
+const ClassicPager = (): React.JSX.Element => {
+  const [page, setPage] = React.useState(1)
+
+  const handlePageChange = (event: any, number: number): void => {
+    setPage(number)
+  }
+
+  return (
+    <>
+      <style>
+        {`
+        .event-pager {
+          margin-bottom: 1rem;
+        }
+      `}
+      </style>
+      <div style={{ marginBottom: '2rem', maxWidth: '600px' }}>
+        <p style={{ marginBottom: '1rem' }}>Stateful Pagers: Current page: {page}</p>
+        <EventPager
+          variant="classic"
+          className="event-pager"
+          page={page}
+          count={24}
+          onChange={handlePageChange}
+          showFirstButton
+          showLastButton
+          componentName="pager1"
+          aria-label="Pager 1"
+        />
+        <EventPager
+          variant="classic"
+          className="event-pager"
+          page={page}
+          count={24}
+          onChange={handlePageChange}
+          componentName="pager2"
+          aria-label="Pager 2"
+        />
+        <EventPager
+          variant="classic"
+          className="event-pager"
+          page={page}
+          count={24}
+          onChange={handlePageChange}
+          componentName="pager3"
+          hideNextButton
+          hidePrevButton
+          aria-label="Pager 3"
+        />
+      </div>
+    </>
+  )
+}
+
+const DashboardPager = (): React.JSX.Element => {
+  const [page, setPage] = React.useState(1)
+
+  const handlePageChange = (event: any, number: number): void => {
+    setPage(number)
+  }
+
+  return (
+    <>
+      <style>
+        {`
+        .event-pager {
+          margin-bottom: 1rem;
+        }
+      `}
+      </style>
+      <div style={{ marginBottom: '2rem', maxWidth: '600px' }}>
+        <p style={{ marginBottom: '1rem' }}>Stateful Pagers: Current page: {page}</p>
+        <EventPager
+          variant="dashboard"
+          className="event-pager"
+          page={page}
+          count={24}
+          onChange={handlePageChange}
+          showFirstButton
+          showLastButton
+          componentName="pager1"
+          aria-label="Pager 1"
+        />
+        <EventPager
+          variant="dashboard"
+          className="event-pager"
+          page={page}
+          count={24}
+          onChange={handlePageChange}
+          componentName="pager2"
+          aria-label="Pager 2"
+        />
+        <EventPager
+          variant="dashboard"
+          className="event-pager"
+          page={page}
+          count={24}
+          onChange={handlePageChange}
+          componentName="pager3"
+          hideNextButton
+          hidePrevButton
+          aria-label="Pager 3"
+        />
+      </div>
+    </>
+  )
+}
+
+type Story = StoryObj<typeof EventPager>
+
+export const Default: Story = {
+  render: () => <DefaultPager />,
+}
+
+export const Classic: Story = {
+  render: () => <ClassicPager />,
+}
+
+export const Dashboard: Story = {
+  render: () => <DashboardPager />,
+}