@node-core/ui-components 1.0.1-ab0ba1dcb1d91392c44e91b1e74e9f565e460543 → 1.0.1-b2d4fae0fc29bf3aeebacb37572f47a0a81dd8ed

package/src/Common/BaseCrossLink/index.stories.tsx

@@ -1,38 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import BaseCrossLink from '#ui/Common/BaseCrossLink';
-
-type Story = StoryObj<typeof BaseCrossLink>;
-type Meta = MetaObj<typeof BaseCrossLink>;
-
-export const Prev: Story = {
-  args: {
-    type: 'previous',
-    text: 'How to install Node.js',
-    link: 'https://nodejs.dev/en/learn/how-to-install-nodejs/',
-  },
-  decorators: [
-    Story => (
-      <div className="w-[305px]">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const Next: Story = {
-  args: {
-    type: 'next',
-    text: 'How much JavaScript do you need to know to use Node.js?',
-    link: 'https://nodejs.dev/en/learn/how-much-javascript-do-you-need-to-know-to-use-nodejs/',
-  },
-  decorators: [
-    Story => (
-      <div className="w-[305px]">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default { component: BaseCrossLink } as Meta;

package/src/Common/BaseCrossLink/index.tsx

@@ -1,46 +0,0 @@
-import classNames from 'classnames';
-import type { FC } from 'react';
-
-import PrevNextArrow from '#ui/Common/BasePagination/PrevNextArrow';
-import type { LinkLike, FormattedMessage } from '#ui/types';
-
-import styles from './index.module.css';
-
-export type CrossLinkProps = {
-  type: 'previous' | 'next';
-  text: FormattedMessage;
-  label: string;
-  link: string;
-  as: LinkLike;
-};
-
-const BaseCrossLink: FC<CrossLinkProps> = ({
-  type,
-  label,
-  text,
-  link,
-  as: Component = 'a',
-}) => {
-  return (
-    <Component className={styles.crossLink} href={link}>
-      <span
-        className={classNames(styles.header, {
-          [styles.reverse]: type === 'next',
-        })}
-      >
-        <PrevNextArrow className={styles.icon} type={type} />
-        {label}
-      </span>
-
-      <span
-        className={classNames(styles.content, {
-          [styles.reverse]: type === 'next',
-        })}
-      >
-        {text}
-      </span>
-    </Component>
-  );
-};
-
-export default BaseCrossLink;

package/src/Common/BaseLinkTabs/index.module.css

@@ -1,43 +0,0 @@
-@reference "../../styles/index.css";
-
-.tabsList {
-  @apply font-open-sans
-    max-xs:hidden
-    mb-6
-    mt-10
-    flex
-    gap-2
-    border-b
-    border-b-neutral-200
-    dark:border-b-neutral-800;
-
-  .tabsTrigger {
-    @apply border-b-2
-      border-b-transparent
-      px-1
-      pb-[11px]
-      text-sm
-      font-semibold
-      text-neutral-800
-      dark:text-neutral-200;
-
-    &[data-state='active'] {
-      @apply border-b-green-600
-        text-green-600
-        dark:border-b-green-400
-        dark:text-green-400;
-    }
-  }
-}
-
-.tabsSelect {
-  @apply sm:visible
-    md:hidden;
-
-  > span {
-    @apply max-xs:flex
-      my-6
-      hidden
-      w-full;
-  }
-}

package/src/Common/BaseLinkTabs/index.stories.tsx

@@ -1,34 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import BaseLinkTabs from '#ui/Common/BaseLinkTabs';
-
-type Story = StoryObj<typeof BaseLinkTabs>;
-type Meta = MetaObj<typeof BaseLinkTabs>;
-
-export const Default: Story = {
-  args: {
-    label: 'Select Tab',
-    tabs: [
-      {
-        key: 'package',
-        label: 'Package Manager',
-        link: '/package-manager',
-      },
-      {
-        key: 'prebuilt',
-        label: 'Prebuilt Installer',
-        link: '/prebuilt-installer',
-      },
-      {
-        key: 'source',
-        label: 'Source Code',
-        link: '/source-code',
-      },
-    ],
-    activeTab: 'prebuilt',
-    children: <p>Tab content goes here</p>,
-    onSelect: console.log,
-  },
-};
-
-export default { component: BaseLinkTabs } as Meta;

package/src/Common/BaseLinkTabs/index.tsx

@@ -1,53 +0,0 @@
-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/src/Common/BasePagination/Ellipsis/index.module.css

@@ -1,10 +0,0 @@
-@reference "../../../styles/index.css";
-
-.ellipsis {
-  @apply w-10
-    px-3
-    py-2.5
-    leading-none
-    text-neutral-800
-    dark:text-neutral-200;
-}

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

@@ -1,10 +0,0 @@
-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/src/Common/BasePagination/Ellipsis/index.tsx

@@ -1,11 +0,0 @@
-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/src/Common/BasePagination/PaginationListItem/__tests__/index.test.jsx

@@ -1,58 +0,0 @@
-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/src/Common/BasePagination/PaginationListItem/index.module.css

@@ -1,27 +0,0 @@
-@reference "../../../styles/index.css";
-
-.listItem,
-.listItem:link,
-.listItem:active {
-  @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']) {
-    @apply bg-neutral-100
-      text-neutral-800
-      dark:bg-neutral-900
-      dark:text-neutral-200;
-  }
-}

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

@@ -1,40 +0,0 @@
-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/src/Common/BasePagination/PaginationListItem/index.tsx

@@ -1,39 +0,0 @@
-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/src/Common/BasePagination/PrevNextArrow.tsx

@@ -1,15 +0,0 @@
-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/src/Common/BasePagination/__tests__/index.test.jsx

@@ -1,180 +0,0 @@
-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/src/Common/BasePagination/index.module.css

@@ -1,39 +0,0 @@
-@reference "../../styles/index.css";
-
-.pagination {
-  @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 {
-  @apply text-sm;
-}
-
-.previousButton {
-  @apply [grid-area:prev];
-}
-
-.nextButton {
-  @apply [grid-area:next];
-}
-
-.arrowIcon {
-  @apply h-5
-    shrink-0
-    text-neutral-600
-    dark:text-neutral-400;
-}
-
-.list {
-  @apply flex
-    list-none
-    justify-center
-    gap-1
-    [grid-area:pages];
-}