@node-core/ui-components 1.0.1-bc3f4a79ab5f54e7ed1ee525005e7e9f1030495c → 1.0.1-cc5c2626b0639fe2088a736f54169ea3e10ed325

package/Common/BaseLinkTabs/index.tsx

@@ -0,0 +1,53 @@
+import type { FC, PropsWithChildren } from 'react';
+
+import Select from '#ui/Common/Select';
+import type { LinkLike } from '#ui/types';
+
+import styles from './index.module.css';
+
+type LinkTab = { key: string; label: string; link: string };
+
+export type LinkTabsProps = PropsWithChildren<{
+  label?: string;
+  tabs: Array<LinkTab>;
+  activeTab: string;
+  as?: LinkLike;
+  onSelect: (value: string) => void;
+}>;
+
+const BaseLinkTabs: FC<LinkTabsProps> = ({
+  tabs,
+  label,
+  activeTab,
+  children,
+  as: Component = 'a',
+  onSelect,
+}) => (
+  <>
+    <div className={styles.tabsList}>
+      {tabs.map(tab => (
+        <Component
+          key={tab.key}
+          href={tab.link}
+          className={styles.tabsTrigger}
+          data-state={tab.key === activeTab ? 'active' : 'inactive'}
+        >
+          {tab.label}
+        </Component>
+      ))}
+    </div>
+
+    <div className={styles.tabsSelect}>
+      <Select
+        label={label}
+        defaultValue={tabs.find(tab => tab.key === activeTab)?.link}
+        values={tabs.map(tab => ({ label: tab.label, value: tab.link }))}
+        onChange={onSelect}
+      />
+    </div>
+
+    {children}
+  </>
+);
+
+export default BaseLinkTabs;

package/Common/BasePagination/Ellipsis/index.module.css

@@ -1,16 +1,10 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../../styles/index.css";
+
 .ellipsis {
-  width: calc(var(--spacing, 0.25rem)*10);
-  padding-inline: calc(var(--spacing, 0.25rem)*3);
-  padding-block: calc(var(--spacing, 0.25rem)*2.5);
-  --tw-leading: 1;
-  line-height: 1;
-  color: var(--color-neutral-800, #556066);
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    color: var(--color-neutral-200, #e9edf0);
-  }
-}
-@property --tw-leading {
-  syntax: "*";
-  inherits: false;
+  @apply w-10
+    px-3
+    py-2.5
+    leading-none
+    text-neutral-800
+    dark:text-neutral-200;
 }

package/Common/BasePagination/Ellipsis/index.stories.tsx

@@ -0,0 +1,10 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import Ellipsis from '#ui/Common/BasePagination/Ellipsis';
+
+type Story = StoryObj<typeof Ellipsis>;
+type Meta = MetaObj<typeof Ellipsis>;
+
+export const Default: Story = {};
+
+export default { component: Ellipsis } as Meta;

package/Common/BasePagination/Ellipsis/index.tsx

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+
+import styles from './index.module.css';
+
+const Ellipsis: FC = () => (
+  <span aria-hidden="true" className={styles.ellipsis}>
+    ...
+  </span>
+);
+
+export default Ellipsis;

package/Common/BasePagination/PaginationListItem/__tests__/index.test.jsx

@@ -0,0 +1,58 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+
+import { render, screen } from '@testing-library/react';
+
+import { isVisible } from '../../../../../../tests/utilities.mjs';
+
+import PaginationListItem from '#ui/Common/BasePagination/PaginationListItem';
+
+function renderPaginationListItem({
+  url,
+  pageNumber,
+  currentPage,
+  totalPages,
+}) {
+  render(
+    <PaginationListItem
+      url={url}
+      pageNumber={pageNumber}
+      currentPage={currentPage}
+      totalPages={totalPages}
+    />
+  );
+}
+
+describe('PaginationListItem', () => {
+  it('Renders the list item correctly, including the corresponding ARIA attributes', () => {
+    const pageNumber = 1;
+    const totalPages = 10;
+    const url = 'http://';
+
+    renderPaginationListItem({
+      url,
+      currentPage: 1,
+      pageNumber,
+      totalPages,
+    });
+
+    const listItem = screen.getByRole('listitem');
+
+    assert.ok(isVisible());
+    assert.equal(listItem.getAttribute('aria-posinset'), String(pageNumber));
+    assert.equal(listItem.getAttribute('aria-setsize'), String(totalPages));
+
+    assert.equal(screen.getByRole('link').getAttribute('href'), url);
+  });
+
+  it('Assigns aria-current="page" attribute to the link when the current page is equal to the page number', () => {
+    renderPaginationListItem({
+      url: 'http://',
+      currentPage: 1,
+      pageNumber: 1,
+      totalPages: 10,
+    });
+
+    assert.equal(screen.getByRole('link').getAttribute('aria-current'), 'page');
+  });
+});

package/Common/BasePagination/PaginationListItem/index.module.css

@@ -1,42 +1,27 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../../styles/index.css";
+
 .listItem,
 .listItem:link,
 .listItem:active {
-  display: flex;
-  width: calc(var(--spacing, 0.25rem)*10);
-  height: calc(var(--spacing, 0.25rem)*10);
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-sm, 0.25rem);
-  padding-inline: calc(var(--spacing, 0.25rem)*3);
-  padding-block: calc(var(--spacing, 0.25rem)*2.5);
-  color: var(--color-neutral-800, #556066);
-  @media (prefers-reduced-motion: no-preference) {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
-    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
-  }
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    color: var(--color-neutral-200, #e9edf0);
-  }
-  &[aria-current="page"] {
-    cursor: default;
-  }
-  &[aria-current="page"] {
-    background-color: var(--color-green-600, #417e38);
-  }
-  &[aria-current="page"] {
-    color: var(--color-white, #fff);
-  }
+  @apply aria-current:bg-green-600
+    aria-current:text-white
+    aria-current:cursor-default
+    flex
+    size-10
+    cursor-pointer
+    items-center
+    justify-center
+    rounded-sm
+    px-3
+    py-2.5
+    text-neutral-800
+    motion-safe:transition-colors
+    dark:text-neutral-200;
+
   &:hover:not([aria-current='page']) {
-    background-color: var(--color-neutral-100, #f6f7f9);
-    color: var(--color-neutral-800, #556066);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      background-color: var(--color-neutral-900, #2c3437);
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: var(--color-neutral-200, #e9edf0);
-    }
+    @apply bg-neutral-100
+      text-neutral-800
+      dark:bg-neutral-900
+      dark:text-neutral-200;
   }
 }

package/Common/BasePagination/PaginationListItem/index.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import PaginationListItem from '#ui/Common/BasePagination/PaginationListItem';
+
+type Story = StoryObj<typeof PaginationListItem>;
+type Meta = MetaObj<typeof PaginationListItem>;
+
+export const Default: Story = {
+  args: {
+    url: '#',
+    pageNumber: 1,
+    currentPage: 2,
+    totalPages: 2,
+  },
+  decorators: [
+    Story => (
+      <ul className="list-none">
+        <Story />
+      </ul>
+    ),
+  ],
+};
+
+export const CurrentPage: Story = {
+  args: {
+    url: '#',
+    pageNumber: 1,
+    currentPage: 1,
+    totalPages: 1,
+  },
+  decorators: [
+    Story => (
+      <ul className="list-none">
+        <Story />
+      </ul>
+    ),
+  ],
+};
+
+export default { component: PaginationListItem } as Meta;

package/Common/BasePagination/PaginationListItem/index.tsx

@@ -0,0 +1,39 @@
+import type { FC } from 'react';
+
+import type { LinkLike } from '#ui/types';
+
+import styles from './index.module.css';
+
+export type PaginationListItemProps = {
+  url: string;
+  pageNumber: number;
+  // One-based number of the current page
+  currentPage: number;
+  totalPages: number;
+  as?: LinkLike;
+  label: string;
+};
+
+const PaginationListItem: FC<PaginationListItemProps> = ({
+  url,
+  pageNumber,
+  currentPage,
+  totalPages,
+  as: Component = 'a',
+  label,
+}) => {
+  return (
+    <li key={pageNumber} aria-setsize={totalPages} aria-posinset={pageNumber}>
+      <Component
+        href={url}
+        aria-label={label}
+        className={styles.listItem}
+        {...(pageNumber === currentPage && { 'aria-current': 'page' })}
+      >
+        <span>{pageNumber}</span>
+      </Component>
+    </li>
+  );
+};
+
+export default PaginationListItem;

package/Common/BasePagination/PrevNextArrow.tsx

@@ -0,0 +1,15 @@
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid';
+import type { FC, SVGAttributes } from 'react';
+
+type PrevNextArrowProps = {
+  type: 'previous' | 'next';
+} & SVGAttributes<SVGSVGElement>;
+
+const PrevNextArrow: FC<PrevNextArrowProps> = ({ type, ...extra }) => {
+  const ChevronComponent =
+    type === 'previous' ? ChevronLeftIcon : ChevronRightIcon;
+
+  return <ChevronComponent {...extra} />;
+};
+
+export default PrevNextArrow;

package/Common/BasePagination/__tests__/index.test.jsx

@@ -0,0 +1,180 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+
+import { render, screen } from '@testing-library/react';
+
+import { isVisible } from '../../../../../tests/utilities.mjs';
+
+import BasePagination from '#ui/Common/BasePagination';
+
+const getPageLabel = number => number.toString();
+const labels = {
+  aria: 'Aria',
+  prevAria: 'Previous Aria',
+  prev: 'Previous',
+  nextAria: 'Next Aria',
+  next: 'Next',
+};
+
+function renderPagination({
+  currentPage = 1,
+  pages,
+  currentPageSiblingsCount,
+}) {
+  const parsedPages = new Array(pages)
+    .fill({ url: 'page' })
+    .map(item => ({ url: `${item.url}-${Math.random()}` }));
+
+  render(
+    <BasePagination
+      currentPage={currentPage}
+      pages={parsedPages}
+      currentPageSiblingsCount={currentPageSiblingsCount}
+      getPageLabel={getPageLabel}
+      labels={labels}
+    />
+  );
+
+  return {
+    currentPage,
+    parsedPages,
+  };
+}
+
+describe('Pagination', () => {
+  describe('Rendering', () => {
+    it('Renders the navigation buttons even if no pages are passed to it', () => {
+      renderPagination({ currentPage: 0, pages: 0 });
+
+      assert.ok(isVisible(screen.getByRole('navigation')));
+      assert.ok(
+        isVisible(
+          screen.getByRole('button', {
+            name: labels.prevAria,
+          })
+        )
+      );
+      assert.ok(
+        isVisible(
+          screen.getByRole('button', {
+            name: labels.nextAria,
+          })
+        )
+      );
+    });
+
+    it('Renders the passed pages and current page', () => {
+      const { currentPage, parsedPages } = renderPagination({
+        pages: 4,
+      });
+
+      const pageElements = screen.getAllByRole('link');
+
+      assert.equal(pageElements.length, parsedPages.length);
+
+      pageElements.forEach((page, index) => {
+        if (index + 1 === currentPage) {
+          assert.strictEqual(page.getAttribute('aria-current'), 'page');
+        }
+
+        assert.ok(isVisible(page));
+      });
+    });
+  });
+
+  describe('Ellipsis behavior', () => {
+    it('When the pages size is equal or smaller than currentPageSiblingsCount + 5, all pages are shown', () => {
+      renderPagination({
+        pages: 6,
+      });
+
+      assert.ok(!screen.queryByText('...')?.ownerDocument);
+
+      const pageElements = screen.getAllByRole('link');
+
+      assert.deepEqual(
+        pageElements.map(element => element.textContent),
+        ['1', '2', '3', '4', '5', '6']
+      );
+    });
+
+    it('Shows left ellipsis when the left sibling of the current page is at least two pages away from the first page', () => {
+      renderPagination({
+        currentPage: 5,
+        pages: 8,
+      });
+
+      assert.ok(isVisible(screen.getByText('...')));
+
+      const pageElements = screen.getAllByRole('link');
+
+      assert.deepEqual(
+        pageElements.map(element => element.textContent),
+        ['1', '4', '5', '6', '7', '8']
+      );
+    });
+
+    it('Shows right ellipsis when the right sibling of the current page is at least two pages away from the last page', () => {
+      renderPagination({
+        currentPage: 3,
+        pages: 8,
+      });
+
+      assert.ok(isVisible(screen.getByText('...')));
+
+      const pageElements = screen.getAllByRole('link');
+
+      assert.deepEqual(
+        pageElements.map(element => element.textContent),
+        ['1', '2', '3', '4', '5', '8']
+      );
+    });
+
+    it('Shows right and left ellipses when the current page siblings are both at least two pages away from the first and last pages', () => {
+      renderPagination({
+        currentPage: 5,
+        pages: 10,
+      });
+
+      assert.equal(screen.getAllByText('...').length, 2);
+
+      const pageElements = screen.getAllByRole('link');
+
+      assert.deepEqual(
+        pageElements.map(element => element.textContent),
+        ['1', '4', '5', '6', '10']
+      );
+    });
+  });
+
+  describe('Navigation buttons', () => {
+    it('Disables "Previous" button when the currentPage is equal to the first page', () => {
+      renderPagination({
+        pages: 2,
+      });
+
+      assert.ok(
+        screen
+          .getByRole('button', {
+            name: labels.prevAria,
+          })
+          .getAttribute('aria-disabled')
+      );
+    });
+
+    it('Disables "Next" button when the currentPage is equal to the last page', () => {
+      renderPagination({
+        currentPage: 2,
+        pages: 2,
+      });
+
+      assert.ok(
+        screen
+          .getByRole('button', {
+            name: labels.nextAria,
+          })
+          .getAttribute('aria-disabled')
+      );
+    });
+  });
+});

package/Common/BasePagination/index.module.css

@@ -1,40 +1,39 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .pagination {
-  display: grid;
-  align-items: center;
-  justify-content: space-between;
-  row-gap: calc(var(--spacing, 0.25rem)*5);
-  grid-template-areas: 'pages pages pages''prev . next';
-  @media (width >= 48rem) {
-    row-gap: calc(var(--spacing, 0.25rem)*0);
-  }
-  @media (width >= 48rem) {
-    grid-template-areas: 'prev pages next';
-  }
+  @apply grid
+    items-center
+    justify-between
+    gap-y-5
+    [grid-template-areas:'pages_pages_pages''prev_._next']
+    md:gap-y-0
+    md:[grid-template-areas:'prev_pages_next'];
 }
+
 .previousButton,
 .nextButton {
-  font-size: var(--text-sm, 0.875rem);
-  line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
+  @apply text-sm;
 }
+
 .previousButton {
-  grid-area: prev;
+  @apply [grid-area:prev];
 }
+
 .nextButton {
-  grid-area: next;
+  @apply [grid-area:next];
 }
+
 .arrowIcon {
-  height: calc(var(--spacing, 0.25rem)*5);
-  flex-shrink: 0;
-  color: var(--color-neutral-600, #929fa5);
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    color: var(--color-neutral-400, #cbd4d9);
-  }
+  @apply h-5
+    shrink-0
+    text-neutral-600
+    dark:text-neutral-400;
 }
+
 .list {
-  display: flex;
-  list-style-type: none;
-  justify-content: center;
-  gap: calc(var(--spacing, 0.25rem)*1);
-  grid-area: pages;
+  @apply flex
+    list-none
+    justify-center
+    gap-1
+    [grid-area:pages];
 }

package/Common/BasePagination/index.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import BasePagination from '#ui/Common/BasePagination';
+
+type Story = StoryObj<typeof BasePagination>;
+type Meta = MetaObj<typeof BasePagination>;
+
+export const Default: Story = {
+  args: {
+    currentPage: 1,
+    currentPageSiblingsCount: 1,
+    pages: [{ url: '1' }, { url: '2' }, { url: '3' }],
+    getPageLabel: value => `Page: ${value}`,
+    labels: {
+      aria: 'Aria',
+      prevAria: 'Previous Aria',
+      prev: 'Previous',
+      nextAria: 'Next Aria',
+      next: 'Next',
+    },
+  },
+};
+
+export const LeftEllipsis: Story = {
+  args: {
+    ...Default.args,
+    currentPage: 5,
+    pages: [
+      { url: '1' },
+      { url: '2' },
+      { url: '3' },
+      { url: '4' },
+      { url: '5' },
+      { url: '6' },
+      { url: '7' },
+      { url: '8' },
+    ],
+  },
+};
+
+export const RightEllipsis: Story = {
+  args: {
+    ...LeftEllipsis.args,
+    currentPage: 3,
+  },
+};
+
+export const TwoEllipses: Story = {
+  args: {
+    ...Default.args,
+    currentPage: 5,
+    pages: [
+      { url: '1' },
+      { url: '2' },
+      { url: '3' },
+      { url: '4' },
+      { url: '5' },
+      { url: '6' },
+      { url: '7' },
+      { url: '8' },
+      { url: '9' },
+      { url: '10' },
+    ],
+  },
+};
+
+export default { component: BasePagination } as Meta;