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

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

@@ -1,29 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import Banner from '#ui/Common/Banner';
-
-type Story = StoryObj<typeof Banner>;
-type Meta = MetaObj<typeof Banner>;
-
-export const Default: Story = {
-  args: {
-    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    type: 'default',
-  },
-};
-
-export const Error: Story = {
-  args: {
-    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    type: 'error',
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    type: 'warning',
-  },
-};
-
-export default { component: Banner } as Meta;

package/src/Common/Banner/index.tsx

@@ -1,18 +0,0 @@
-import type { FC, PropsWithChildren } from 'react';
-
-import styles from './index.module.css';
-
-export type BannerProps = {
-  type?: 'default' | 'warning' | 'error';
-};
-
-const Banner: FC<PropsWithChildren<BannerProps>> = ({
-  type = 'default',
-  children,
-}) => (
-  <div className={`${styles.banner} ${styles[type] || styles.default}`}>
-    {children}
-  </div>
-);
-
-export default Banner;

package/src/Common/BaseActiveLink/__tests__/index.test.jsx

@@ -1,52 +0,0 @@
-import { describe, it } from 'node:test';
-import assert from 'node:assert/strict';
-
-import { render, screen } from '@testing-library/react';
-
-import ActiveLink from '..';
-
-describe('ActiveLink', () => {
-  it('renders as localized link', async () => {
-    render(
-      <ActiveLink className="link" activeClassName="active" href="/link">
-        Link
-      </ActiveLink>
-    );
-
-    assert.equal(
-      (await screen.findByText('Link')).getAttribute('href'),
-      '/link'
-    );
-  });
-
-  it('ignores active class when href not matches location.href', async () => {
-    render(
-      <ActiveLink className="link" activeClassName="active" href="/not-link">
-        Link
-      </ActiveLink>
-    );
-
-    assert.equal(
-      (await screen.findByText('Link')).getAttribute('class'),
-      'link'
-    );
-  });
-
-  it('sets active class when href matches location.href', async () => {
-    render(
-      <ActiveLink
-        className="link"
-        activeClassName="active"
-        href="/link"
-        pathname="/link"
-      >
-        Link
-      </ActiveLink>
-    );
-
-    assert.equal(
-      (await screen.findByText('Link')).getAttribute('class'),
-      'link active'
-    );
-  });
-});

package/src/Common/BaseActiveLink/index.tsx

@@ -1,34 +0,0 @@
-import classNames from 'classnames';
-import type { ComponentProps, FC } from 'react';
-
-import type { LinkLike } from '#ui/types';
-
-export type ActiveLocalizedLinkProps = ComponentProps<LinkLike> & {
-  activeClassName?: string;
-  allowSubPath?: boolean;
-  pathname?: string;
-  as?: LinkLike;
-};
-
-const BaseActiveLink: FC<ActiveLocalizedLinkProps> = ({
-  activeClassName = 'active',
-  allowSubPath = false,
-  className,
-  href = '',
-  pathname = '/',
-  as: Component = 'a',
-  ...props
-}) => {
-  const finalClassName = classNames(className, {
-    [activeClassName]: allowSubPath
-      ? // When using allowSubPath we want only to check if
-        // the current pathname starts with the utmost upper level
-        // of an href (e.g. /docs/...)
-        pathname.startsWith(`/${href.toString().split('/')[1]}`)
-      : href.toString() === pathname,
-  });
-
-  return <Component className={finalClassName} href={href} {...props} />;
-};
-
-export default BaseActiveLink;

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

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

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

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

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

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

@@ -1,122 +0,0 @@
-'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

@@ -1,51 +0,0 @@
-@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;
-    }
-  }
-}