@node-core/ui-components 0.0.1 → 1.0.1-df203d0fe21ee5d80d258c60dc821e8ac0601ce4

package/Common/BaseCodeBox/index.module.css

@@ -0,0 +1,84 @@
+@reference "../../styles/index.css";
+
+.root {
+  @apply w-full
+    rounded-sm
+    border
+    border-neutral-900
+    bg-neutral-950;
+
+  .content {
+    @apply m-0
+      p-4;
+
+    & > code {
+      @apply font-ibm-plex-mono
+        font-regular
+        scrollbar-thin
+        grid
+        overflow-x-auto
+        bg-transparent
+        p-0
+        text-sm
+        leading-snug
+        text-neutral-400
+        [counter-reset:line];
+
+      & > [class='line'] {
+        @apply relative
+          min-w-0
+          pl-8;
+
+        &:not(:empty:last-child)::before {
+          @apply inline-block
+            content-[''];
+        }
+
+        &:not(:empty:last-child)::after {
+          @apply font-ibm-plex-mono
+            w-4.5
+            absolute
+            left-0
+            top-0
+            mr-4
+            text-right
+            text-neutral-600
+            [content:counter(line)]
+            [counter-increment:line];
+        }
+      }
+    }
+  }
+
+  & > .footer {
+    @apply flex
+      items-center
+      justify-between
+      border-t
+      border-t-neutral-900
+      px-4
+      py-3
+      text-sm
+      font-medium;
+
+    & > .language {
+      @apply text-neutral-400;
+    }
+
+    & > .action {
+      @apply px-3
+        py-1.5
+        font-medium;
+    }
+  }
+}
+
+.notification {
+  @apply flex
+    items-center
+    gap-3;
+}
+
+.icon {
+  @apply size-4;
+}

package/Common/BaseCodeBox/index.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import BaseCodeBox from '#ui/Common/BaseCodeBox';
+
+type Story = StoryObj<typeof BaseCodeBox>;
+type Meta = MetaObj<typeof BaseCodeBox>;
+
+const content = `const http = require('http');
+
+const hostname = '127.0.0.1';
+const port = 3000;
+
+const server = http.createServer((req, res) => {
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'text/plain');
+  res.end('Hello World');
+});
+
+server.listen(port, hostname, () => {
+  console.log(\`Server running at http://\${hostname}:\${port}/\`);
+});`;
+
+const args = {
+  language: 'JavaScript (CJS)',
+  children: <code>{content}</code>,
+};
+
+export const Default: Story = {
+  args,
+};
+
+export const WithCopyButton: Story = {
+  args: {
+    ...args,
+    showCopyButton: true,
+  },
+};
+
+export default { component: BaseCodeBox } as Meta;

package/Common/BaseCodeBox/index.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import {
+  DocumentDuplicateIcon,
+  CodeBracketIcon,
+} from '@heroicons/react/24/outline';
+import classNames from 'classnames';
+import type { FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
+import { Fragment, isValidElement, useRef } from 'react';
+
+import BaseButton from '#ui/Common/BaseButton';
+import type { LinkLike } from '#ui/types';
+
+import styles from './index.module.css';
+
+// Transforms a code element with plain text content into a more structured
+// format for rendering with line numbers
+const transformCode = <T extends ReactElement<PropsWithChildren>>(
+  code: T,
+  language: string
+): ReactElement<HTMLElement> | T => {
+  if (!isValidElement(code)) {
+    // Early return when the `CodeBox` child is not a valid element since the
+    // type is a ReactNode, and can assume any value
+    return code;
+  }
+
+  const content = code.props?.children;
+
+  if (code.type !== 'code' || typeof content !== 'string') {
+    // There is no need to transform an element that is not a code element or
+    // a content that is not a string
+    return code;
+  }
+
+  // Note that since we use `.split` we will have an extra entry
+  // being an empty string, so we need to remove it
+  const lines = content.split('\n');
+
+  const extraStyle = language.length === 0 ? { fontFamily: 'monospace' } : {};
+
+  return (
+    <code style={extraStyle}>
+      {lines
+        .flatMap((line, lineIndex) => {
+          const columns = line.split(' ');
+
+          return [
+            <span key={lineIndex} className="line">
+              {columns.map((column, columnIndex) => (
+                <Fragment key={columnIndex}>
+                  <span>{column}</span>
+                  {columnIndex < columns.length - 1 && <span> </span>}
+                </Fragment>
+              ))}
+            </span>,
+            // Add a break line so the text content is formatted correctly
+            // when copying to clipboard
+            '\n',
+          ];
+        })
+        // Here we remove that empty line from before and
+        // the last flatMap entry which is an `\n`
+        .slice(0, -2)}
+    </code>
+  );
+};
+
+interface CodeBoxProps {
+  language: string;
+  className?: string;
+  onCopy: (text: string, message: ReactNode) => void;
+  as?: LinkLike;
+  copyText: string;
+  copiedText: string;
+  showCopyButton?: boolean;
+}
+
+const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
+  children,
+  language,
+  className,
+  onCopy,
+  copiedText,
+  copyText,
+  as = 'a',
+  showCopyButton = true,
+}: PropsWithChildren<CodeBoxProps>) => {
+  const containerRef = useRef<HTMLPreElement>(null);
+
+  const handleCopy = (): void => {
+    const text = containerRef.current?.textContent;
+    if (text) {
+      onCopy(
+        text,
+        <div className={styles.notification}>
+          <CodeBracketIcon className={styles.icon} />
+          {copiedText}
+        </div>
+      );
+    }
+  };
+
+  return (
+    <div className={styles.root}>
+      <pre
+        ref={containerRef}
+        className={classNames(styles.content, className)}
+        tabIndex={0}
+      >
+        {transformCode(children as ReactElement<PropsWithChildren>, language)}
+      </pre>
+      {language && (
+        <div className={styles.footer}>
+          <span className={styles.language}>{language}</span>
+          {showCopyButton && (
+            <BaseButton
+              as={as}
+              className={styles.action}
+              kind="neutral"
+              onClick={handleCopy}
+            >
+              <DocumentDuplicateIcon className={styles.icon} />
+              {copyText}
+            </BaseButton>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BaseCodeBox;

package/Common/BaseCrossLink/index.module.css

@@ -0,0 +1,51 @@
+@reference "../../styles/index.css";
+
+.crossLink {
+  @apply flex
+    flex-col
+    items-start
+    gap-2
+    truncate
+    rounded-sm
+    border
+    border-solid
+    border-neutral-300
+    bg-white
+    p-3
+    no-underline
+    dark:border-neutral-900
+    dark:bg-neutral-950;
+
+  .header {
+    @apply flex
+      items-center
+      gap-2
+      self-stretch
+      text-xs
+      text-neutral-800
+      dark:text-neutral-100;
+
+    &.reverse {
+      @apply flex-row-reverse
+        justify-start;
+    }
+
+    .icon {
+      @apply size-4
+        text-neutral-600
+        dark:text-neutral-400;
+    }
+  }
+
+  .content {
+    @apply self-stretch
+      truncate
+      text-sm
+      text-neutral-900
+      dark:text-white;
+
+    &.reverse {
+      @apply text-right;
+    }
+  }
+}

package/Common/BaseCrossLink/index.stories.tsx

@@ -0,0 +1,38 @@
+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/Common/BaseCrossLink/index.tsx

@@ -0,0 +1,46 @@
+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/Common/BaseLinkTabs/index.module.css

@@ -0,0 +1,43 @@
+@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/Common/BaseLinkTabs/index.stories.tsx

@@ -0,0 +1,34 @@
+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/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

@@ -0,0 +1,10 @@
+@reference "../../../styles/index.css";
+
+.ellipsis {
+  @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

@@ -0,0 +1,27 @@
+@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/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;