@node-core/ui-components 1.0.1-2a5d26feb99da533fd0280486510163fa30d4322 → 1.0.1-2aa8ae62b828936ceb5251f37f7c539668856ed5

package/Common/BaseButton/index.tsx

@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import type { FC, AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
+
+import type { LinkLike } from '#ui/types';
+
+import styles from './index.module.css';
+
+export type ButtonProps = (
+  | AnchorHTMLAttributes<HTMLAnchorElement>
+  | ButtonHTMLAttributes<HTMLButtonElement>
+) & {
+  kind?: 'neutral' | 'primary' | 'secondary' | 'special';
+  size?: 'default' | 'small';
+  disabled?: boolean;
+  as?: LinkLike;
+};
+
+const BaseButton: FC<ButtonProps> = ({
+  kind = 'primary',
+  size = 'default',
+  disabled = false,
+  className,
+  as: Component = 'a',
+  ...props
+}) => {
+  if ('href' in props && Component) {
+    return (
+      <Component
+        role="button"
+        href={disabled ? undefined : props.href}
+        aria-disabled={disabled}
+        className={classNames(
+          styles.button,
+          styles[kind],
+          styles[size],
+          className
+        )}
+        tabIndex={disabled ? -1 : 0}
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <button
+      disabled={disabled}
+      className={classNames(
+        styles.button,
+        styles[kind],
+        styles[size],
+        className
+      )}
+      type="button"
+      {...(props as ButtonHTMLAttributes<HTMLButtonElement>)}
+    />
+  );
+};
+
+export default BaseButton;

package/Common/BaseCodeBox/index.module.css

@@ -1,96 +1,78 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .root {
-  width: 100%;
-  border-radius: var(--radius-sm, 0.25rem);
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: var(--color-neutral-900, #2c3437);
-  background-color: var(--color-neutral-950, #0d121c);
+  @apply w-full
+    rounded-sm
+    border
+    border-neutral-900
+    bg-neutral-950;
+
   .content {
-    margin: calc(var(--spacing, 0.25rem)*0);
-    padding: calc(var(--spacing, 0.25rem)*4);
+    @apply m-0
+      p-4;
+
     & > code {
-      display: grid;
-      overflow-x: auto;
-      background-color: transparent;
-      padding: calc(var(--spacing, 0.25rem)*0);
-      font-family: var(--font-ibm-plex-mono, var(--font-ibm-plex-mono));
-      font-size: var(--text-sm, 0.875rem);
-      line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
-      --tw-leading: var(--leading-snug, 1.375);
-      line-height: var(--leading-snug, 1.375);
-      --tw-font-weight: var(--font-weight-regular, 400);
-      font-weight: var(--font-weight-regular, 400);
-      color: var(--color-neutral-400, #cbd4d9);
-      counter-reset: line;
-      scrollbar-width: thin;
+      @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'] {
-        position: relative;
-        min-width: calc(var(--spacing, 0.25rem)*0);
-        padding-left: calc(var(--spacing, 0.25rem)*8);
+        @apply relative
+          min-w-0
+          pl-8;
+
         &:not(:empty:last-child)::before {
-          display: inline-block;
-          --tw-content: '';
-          content: var(--tw-content);
+          @apply inline-block
+            content-[''];
         }
+
         &:not(:empty:last-child)::after {
-          position: absolute;
-          top: calc(var(--spacing, 0.25rem)*0);
-          left: calc(var(--spacing, 0.25rem)*0);
-          margin-right: calc(var(--spacing, 0.25rem)*4);
-          width: calc(var(--spacing, 0.25rem)*4.5);
-          text-align: right;
-          font-family: var(--font-ibm-plex-mono, var(--font-ibm-plex-mono));
-          color: var(--color-neutral-600, #929fa5);
-          content: counter(line);
-          counter-increment: line;
+          @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 {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-top-style: var(--tw-border-style);
-    border-top-width: 1px;
-    border-top-color: var(--color-neutral-900, #2c3437);
-    padding-inline: calc(var(--spacing, 0.25rem)*4);
-    padding-block: calc(var(--spacing, 0.25rem)*3);
-    font-size: var(--text-sm, 0.875rem);
-    line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
-    --tw-font-weight: var(--font-weight-medium, 500);
-    font-weight: var(--font-weight-medium, 500);
+    @apply flex
+      items-center
+      justify-between
+      border-t
+      border-t-neutral-900
+      px-4
+      py-3
+      text-sm
+      font-medium;
+
     & > .language {
-      color: var(--color-neutral-400, #cbd4d9);
+      @apply text-neutral-400;
     }
+
     & > .action {
-      padding-inline: calc(var(--spacing, 0.25rem)*3);
-      padding-block: calc(var(--spacing, 0.25rem)*1.5);
-      --tw-font-weight: var(--font-weight-medium, 500);
-      font-weight: var(--font-weight-medium, 500);
+      @apply px-3
+        py-1.5
+        font-medium;
     }
   }
 }
+
 .icon {
-  width: calc(var(--spacing, 0.25rem)*4);
-  height: calc(var(--spacing, 0.25rem)*4);
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-leading {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-content {
-  syntax: "*";
-  inherits: false;
-  initial-value: "";
+  @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,122 @@
+'use client';
+
+import { DocumentDuplicateIcon } from '@heroicons/react/24/outline';
+import classNames from 'classnames';
+import type { FC, PropsWithChildren, ReactElement } 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) => void;
+  as?: LinkLike;
+  buttonText: string;
+  showCopyButton?: boolean;
+}
+
+const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
+  children,
+  language,
+  className,
+  onCopy,
+  buttonText,
+  as = 'a',
+  showCopyButton = true,
+}: PropsWithChildren<CodeBoxProps>) => {
+  const containerRef = useRef<HTMLPreElement>(null);
+
+  const handleCopy = (): void => {
+    const text = containerRef.current?.textContent;
+    if (text) {
+      onCopy(text);
+    }
+  };
+
+  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} />
+              {buttonText}
+            </BaseButton>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BaseCodeBox;

package/Common/BaseCrossLink/index.module.css

@@ -1,69 +1,51 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .crossLink {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: calc(var(--spacing, 0.25rem)*2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  border-radius: var(--radius-sm, 0.25rem);
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  --tw-border-style: solid;
-  border-style: solid;
-  border-color: var(--color-neutral-300, #d9e1e4);
-  background-color: var(--color-white, #fff);
-  padding: calc(var(--spacing, 0.25rem)*3);
-  text-decoration-line: none;
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    border-color: var(--color-neutral-900, #2c3437);
-  }
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    background-color: var(--color-neutral-950, #0d121c);
-  }
+  @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 {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--spacing, 0.25rem)*2);
-    align-self: stretch;
-    font-size: var(--text-xs, 0.75rem);
-    line-height: var(--tw-leading, var(--text-xs--line-height, 1.33333));
-    color: var(--color-neutral-800, #556066);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: var(--color-neutral-100, #f6f7f9);
-    }
+    @apply flex
+      items-center
+      gap-2
+      self-stretch
+      text-xs
+      text-neutral-800
+      dark:text-neutral-100;
+
     &.reverse {
-      flex-direction: row-reverse;
-      justify-content: flex-start;
+      @apply flex-row-reverse
+        justify-start;
     }
+
     .icon {
-      width: calc(var(--spacing, 0.25rem)*4);
-      height: calc(var(--spacing, 0.25rem)*4);
-      color: var(--color-neutral-600, #929fa5);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-neutral-400, #cbd4d9);
-      }
+      @apply size-4
+        text-neutral-600
+        dark:text-neutral-400;
     }
   }
+
   .content {
-    align-self: stretch;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: var(--text-sm, 0.875rem);
-    line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
-    color: var(--color-neutral-900, #2c3437);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: var(--color-white, #fff);
-    }
+    @apply self-stretch
+      truncate
+      text-sm
+      text-neutral-900
+      dark:text-white;
+
     &.reverse {
-      text-align: right;
+      @apply text-right;
     }
   }
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}

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

@@ -1,77 +1,43 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .tabsList {
-  margin-top: calc(var(--spacing, 0.25rem)*10);
-  margin-bottom: calc(var(--spacing, 0.25rem)*6);
-  display: flex;
-  gap: calc(var(--spacing, 0.25rem)*2);
-  border-bottom-style: var(--tw-border-style);
-  border-bottom-width: 1px;
-  border-bottom-color: var(--color-neutral-200, #e9edf0);
-  font-family: var(--font-open-sans, var(--font-open-sans));
-  @media (width < 670px) {
-    display: none;
-  }
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    border-bottom-color: var(--color-neutral-800, #556066);
-  }
+  @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 {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 2px;
-    border-bottom-color: transparent;
-    padding-inline: calc(var(--spacing, 0.25rem)*1);
-    padding-bottom: 11px;
-    font-size: var(--text-sm, 0.875rem);
-    line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
-    --tw-font-weight: var(--font-weight-semibold, 600);
-    font-weight: var(--font-weight-semibold, 600);
-    color: var(--color-neutral-800, #556066);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: var(--color-neutral-200, #e9edf0);
-    }
-    &:not([data-state='active']):hover {
-      border-bottom-color: var(--color-neutral-900, #2c3437);
-      color: var(--color-neutral-900, #2c3437);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        border-bottom-color: var(--color-neutral-300, #d9e1e4);
-      }
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-neutral-300, #d9e1e4);
-      }
-    }
+    @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'] {
-      border-bottom-color: var(--color-green-600, #417e38);
-      color: var(--color-green-600, #417e38);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        border-bottom-color: var(--color-green-400, #84ba64);
-      }
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-green-400, #84ba64);
-      }
+      @apply border-b-green-600
+        text-green-600
+        dark:border-b-green-400
+        dark:text-green-400;
     }
   }
 }
+
 .tabsSelect {
-  @media (width >= 40rem) {
-    visibility: visible;
-  }
-  @media (width >= 48rem) {
-    display: none;
-  }
+  @apply sm:visible
+    md:hidden;
+
   > span {
-    margin-block: calc(var(--spacing, 0.25rem)*6);
-    display: none;
-    width: 100%;
-    @media (width < 670px) {
-      display: flex;
-    }
+    @apply max-xs:flex
+      my-6
+      hidden
+      w-full;
   }
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}