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

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

@@ -0,0 +1,145 @@
+@reference "../../styles/index.css";
+
+.button {
+  @apply px-4.5
+    relative
+    inline-flex
+    items-center
+    justify-center
+    gap-2
+    py-2.5
+    text-center
+    font-semibold
+    motion-safe:transition-colors;
+
+  svg {
+    @apply size-5;
+  }
+
+  &[aria-disabled='true'] {
+    @apply cursor-not-allowed;
+  }
+
+  &.small {
+    @apply px-3
+      py-2
+      text-sm;
+  }
+
+  &.neutral {
+    @apply rounded-sm
+      bg-neutral-900
+      text-white
+      dark:text-neutral-200;
+
+    &:hover:not([aria-disabled='true']) {
+      @apply bg-neutral-800;
+    }
+
+    &[aria-disabled='true'] {
+      @apply bg-neutral-900
+        opacity-50;
+    }
+
+    &:focus {
+      @apply bg-neutral-800;
+    }
+  }
+
+  &.primary {
+    @apply shadow-xs
+      rounded-sm
+      border
+      border-green-600
+      bg-green-600
+      text-white;
+
+    &:hover:not([aria-disabled='true']) {
+      @apply border-green-700
+        bg-green-700
+        text-white;
+    }
+
+    &:focus {
+      @apply border-green-700
+        bg-green-700;
+    }
+
+    &[aria-disabled='true'] {
+      @apply bg-green-600
+        opacity-50;
+    }
+  }
+
+  &.secondary {
+    @apply rounded-lg
+      border
+      border-neutral-200
+      text-neutral-800
+      dark:border-neutral-900
+      dark:text-neutral-200;
+
+    &:hover:not([aria-disabled='true']) {
+      @apply bg-neutral-200
+        text-neutral-800
+        dark:bg-neutral-900
+        dark:text-neutral-200;
+    }
+
+    &[aria-disabled='true'] {
+      @apply bg-transparent
+        opacity-50;
+    }
+
+    &:focus {
+      @apply bg-neutral-100
+        text-neutral-800
+        dark:bg-neutral-900
+        dark:text-neutral-200;
+    }
+  }
+
+  &.special {
+    @apply before:bg-gradient-glow-backdrop
+      shadow-xs
+      rounded-lg
+      border
+      border-green-600/30
+      bg-green-600/10
+      text-white
+      before:absolute
+      before:left-0
+      before:right-0
+      before:top-0
+      before:-z-10
+      before:mx-auto
+      before:h-full
+      before:w-full
+      before:opacity-30
+      before:content-['']
+      after:absolute
+      after:-top-px
+      after:left-0
+      after:right-0
+      after:mx-auto
+      after:h-px
+      after:w-2/5
+      after:bg-gradient-to-r
+      after:from-green-600/0
+      after:via-green-600
+      after:to-green-600/0
+      after:content-[''];
+
+    &[aria-disabled='true'] {
+      @apply opacity-50;
+    }
+
+    &:hover:not([aria-disabled='true']) {
+      @apply bg-green-600/20;
+    }
+
+    &:focus {
+      @apply bg-green-600/20;
+    }
+  }
+}

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

@@ -0,0 +1,67 @@
+import { ArrowRightIcon } from '@heroicons/react/24/solid';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import BaseButton from '#ui/Common/BaseButton';
+
+type Story = StoryObj<typeof BaseButton>;
+type Meta = MetaObj<typeof BaseButton>;
+
+export const Neutral: Story = {
+  args: {
+    kind: 'neutral',
+    children: 'Download Node (LTS)',
+    disabled: false,
+    size: 'default',
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    kind: 'primary',
+    children: 'Download Node (LTS)',
+    disabled: false,
+    size: 'default',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    kind: 'secondary',
+    children: 'Download Node (LTS)',
+    disabled: false,
+    size: 'default',
+  },
+};
+
+export const Special: Story = {
+  args: {
+    kind: 'special',
+    children: 'Download Node (LTS)',
+    disabled: false,
+    size: 'default',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    kind: 'primary',
+    children: (
+      <>
+        Back to Home
+        <ArrowRightIcon />
+      </>
+    ),
+    disabled: false,
+    size: 'default',
+  },
+};
+
+export default {
+  component: BaseButton,
+  argTypes: {
+    size: {
+      options: ['default', 'small'],
+      control: { type: 'radio' },
+    },
+  },
+} as Meta;

package/src/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/src/Common/BaseCodeBox/index.module.css

@@ -0,0 +1,78 @@
+@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;
+    }
+  }
+}
+
+.icon {
+  @apply size-4;
+}

package/src/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/src/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/src/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/src/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/src/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/src/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;
+  }
+}