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

package/src/Common/Breadcrumbs/index.tsx

@@ -1,81 +0,0 @@
-import type { FC } from 'react';
-import { useMemo } from 'react';
-
-import BreadcrumbHomeLink from '#ui/Common/Breadcrumbs/BreadcrumbHomeLink';
-import BreadcrumbItem from '#ui/Common/Breadcrumbs/BreadcrumbItem';
-import BreadcrumbLink from '#ui/Common/Breadcrumbs/BreadcrumbLink';
-import BreadcrumbRoot from '#ui/Common/Breadcrumbs/BreadcrumbRoot';
-import BreadcrumbTruncatedItem from '#ui/Common/Breadcrumbs/BreadcrumbTruncatedItem';
-import type { FormattedMessage, LinkLike } from '#ui/types';
-
-export type BreadcrumbLink = {
-  label: FormattedMessage;
-  href: string | undefined;
-};
-
-type BreadcrumbsProps = {
-  links: Array<BreadcrumbLink>;
-  maxLength?: number;
-  hideHome?: boolean;
-  as: LinkLike;
-  homeLinkAriaLabel?: string;
-};
-
-const Breadcrumbs: FC<BreadcrumbsProps> = ({
-  links = [],
-  maxLength = 5,
-  hideHome = false,
-  as = 'a',
-  homeLinkAriaLabel,
-}) => {
-  const totalLength = links.length + +!hideHome;
-  const lengthOffset = maxLength - totalLength;
-  const isOverflow = lengthOffset < 0;
-
-  const items = useMemo(
-    () =>
-      links.map((link, index, items) => {
-        const position = index + 1;
-        const isLastItem = index === items.length - 1;
-        const hidden =
-          // We add 1 here to take into account of the truncated breadcrumb.
-          position <= Math.abs(lengthOffset) + 1 && isOverflow && !isLastItem;
-
-        return (
-          <BreadcrumbItem
-            key={link.label.toString()}
-            hidden={hidden}
-            hideSeparator={isLastItem}
-            position={position + +!hideHome}
-          >
-            {link.href || isLastItem ? (
-              <BreadcrumbLink
-                as={as}
-                href={link.href || undefined}
-                active={isLastItem}
-              >
-                {link.label}
-              </BreadcrumbLink>
-            ) : (
-              <span className="opacity-70">{link.label}</span>
-            )}
-          </BreadcrumbItem>
-        );
-      }),
-    [hideHome, isOverflow, lengthOffset, links]
-  );
-
-  return (
-    <BreadcrumbRoot>
-      {!hideHome && (
-        <BreadcrumbItem position={1}>
-          <BreadcrumbHomeLink as={as} aria-label={homeLinkAriaLabel} />
-        </BreadcrumbItem>
-      )}
-      {isOverflow && <BreadcrumbTruncatedItem />}
-      {items}
-    </BreadcrumbRoot>
-  );
-};
-
-export default Breadcrumbs;

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

@@ -1,83 +0,0 @@
-@reference "../../styles/index.css";
-
-.summary {
-  @apply outline-hidden
-    flex
-    h-9
-    cursor-pointer
-    select-none
-    items-center
-    gap-2
-    rounded-md
-    border
-    border-neutral-200
-    p-2
-    text-sm
-    text-neutral-700
-    motion-safe:transition-colors
-    dark:border-neutral-900
-    dark:text-neutral-300;
-
-  &:hover,
-  &:focus-visible {
-    @apply bg-neutral-100
-      dark:bg-neutral-900;
-  }
-}
-
-.dropdownContentWrapper {
-  @apply absolute
-    right-0
-    top-full
-    z-50
-    mt-1
-    max-h-80
-    w-52
-    overflow-hidden
-    rounded-sm
-    border
-    border-neutral-200
-    bg-white
-    shadow-lg
-    dark:border-neutral-900
-    dark:bg-neutral-950;
-}
-
-.dropdownContentInner {
-  @apply max-h-80
-    w-52
-    overflow-y-auto;
-}
-
-.dropdownItem {
-  @apply outline-hidden
-    block
-    px-2.5
-    py-1.5
-    text-sm
-    font-medium
-    text-neutral-800
-    no-underline
-    motion-safe:transition-colors
-    dark:text-white;
-
-  &:hover,
-  &:focus-visible {
-    @apply bg-green-600
-      text-white;
-  }
-}
-
-.dropdownLabel {
-  @apply block
-    text-sm
-    font-medium
-    leading-tight;
-}
-
-.dropdownVersions {
-  @apply block
-    text-xs
-    leading-tight
-    opacity-75;
-}

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

@@ -1,130 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import ChangeHistory from '#ui/Common/ChangeHistory';
-
-type Story = StoryObj<typeof ChangeHistory>;
-type Meta = MetaObj<typeof ChangeHistory>;
-
-const SAMPLE_CHANGES = [
-  {
-    versions: ['v15.4.0'],
-    label: 'No longer experimental',
-    url: 'https://github.com/nodejs/node/pull/12345',
-  },
-  {
-    versions: ['v15.0.0', 'v14.17.0'],
-    label: 'Added in v15.0.0, v14.17.0',
-    url: 'https://github.com/nodejs/node/pull/67890',
-  },
-  {
-    versions: ['v16.0.0'],
-    label: 'Deprecated in 16',
-  },
-];
-
-const LARGE_SAMPLE_CHANGES = [
-  {
-    versions: ['v20.0.0'],
-    label: 'Breaking change in v20',
-    url: 'https://github.com/nodejs/node/pull/50001',
-  },
-  {
-    versions: ['v19.8.0'],
-    label: 'Performance improvement',
-    url: 'https://github.com/nodejs/node/pull/49999',
-  },
-  {
-    versions: ['v19.0.0'],
-    label: 'API redesign',
-    url: 'https://github.com/nodejs/node/pull/49000',
-  },
-  {
-    versions: ['v18.17.0', 'v18.16.1'],
-    label: 'Security fix backported',
-    url: 'https://github.com/nodejs/node/pull/48500',
-  },
-  {
-    versions: ['v18.0.0'],
-    label: 'Major version release',
-    url: 'https://github.com/nodejs/node/pull/47000',
-  },
-  {
-    versions: ['v17.9.0'],
-    label: 'Experimental feature added',
-    url: 'https://github.com/nodejs/node/pull/46500',
-  },
-  {
-    versions: ['v17.0.0'],
-    label: 'Node.js 17 release',
-    url: 'https://github.com/nodejs/node/pull/45000',
-  },
-  {
-    versions: ['v16.15.0', 'v16.14.2'],
-    label: 'Bug fix release',
-    url: 'https://github.com/nodejs/node/pull/44000',
-  },
-  {
-    versions: ['v16.0.0'],
-    label: 'Deprecated in v16',
-    url: 'https://github.com/nodejs/node/pull/43000',
-  },
-  {
-    versions: ['v15.14.0'],
-    label: 'Feature enhancement',
-    url: 'https://github.com/nodejs/node/pull/42000',
-  },
-  {
-    versions: ['v15.0.0', 'v14.17.0'],
-    label: 'Initial implementation',
-    url: 'https://github.com/nodejs/node/pull/41000',
-  },
-  {
-    versions: ['v14.18.0'],
-    label: 'Documentation update',
-    url: 'https://github.com/nodejs/node/pull/40000',
-  },
-  {
-    versions: ['v14.0.0'],
-    label: 'Added to stable API',
-    url: 'https://github.com/nodejs/node/pull/39000',
-  },
-  {
-    versions: ['v13.14.0'],
-    label: 'Experimental flag removed',
-    url: 'https://github.com/nodejs/node/pull/38000',
-  },
-  {
-    versions: ['v12.22.0', 'v12.21.0'],
-    label: 'Backported to LTS',
-    url: 'https://github.com/nodejs/node/pull/37000',
-  },
-  {
-    versions: ['v12.0.0'],
-    label: 'First experimental version',
-    url: 'https://github.com/nodejs/node/pull/36000',
-  },
-];
-
-export const Default: Story = {
-  render: args => (
-    <div className="right-0 flex justify-end">
-      <ChangeHistory {...args} />
-    </div>
-  ),
-  args: {
-    changes: SAMPLE_CHANGES,
-  },
-};
-
-export const LargeHistory: Story = {
-  render: args => (
-    <div className="right-0 flex justify-end">
-      <ChangeHistory {...args} />
-    </div>
-  ),
-  args: {
-    changes: LARGE_SAMPLE_CHANGES,
-  },
-};
-
-export default { component: ChangeHistory } as Meta;

package/src/Common/ChangeHistory/index.tsx

@@ -1,67 +0,0 @@
-import { ChevronDownIcon, ClockIcon } from '@heroicons/react/24/outline';
-import classNames from 'classnames';
-import type { FC, ComponentProps } from 'react';
-
-import type { LinkLike } from '#ui/types.js';
-
-import styles from './index.module.css';
-
-export type HistoryChange = {
-  versions: Array<string>;
-  label: string;
-  url?: string;
-};
-
-type ChangeHistoryProps = ComponentProps<'div'> & {
-  label: string;
-  changes: Array<HistoryChange>;
-  as?: LinkLike;
-};
-
-const ChangeHistory: FC<ChangeHistoryProps> = ({
-  label = 'History',
-  changes = [],
-  className,
-  as: As = 'a',
-  'aria-label': ariaLabel = label,
-  ...props
-}) => (
-  <div className={classNames('relative', 'inline-block', className)} {...props}>
-    <details className="group">
-      <summary className={styles.summary} role="button" aria-haspopup="menu">
-        <ClockIcon className="size-4" />
-        <span>{label}</span>
-        <ChevronDownIcon className="size-3 group-open:rotate-180 motion-safe:transition-transform" />
-      </summary>
-      <div
-        className={styles.dropdownContentWrapper}
-        role="menu"
-        aria-label={ariaLabel}
-      >
-        <div className={styles.dropdownContentInner}>
-          {changes.map((change, index) => {
-            const MenuItem = change.url ? As : 'div';
-
-            return (
-              <MenuItem
-                key={index}
-                className={styles.dropdownItem}
-                role="menuitem"
-                tabIndex={0}
-                aria-label={`${change.label}: ${change.versions.join(', ')}`}
-                href={change.url}
-              >
-                <div className={styles.dropdownLabel}>{change.label}</div>
-                <div className={styles.dropdownVersions}>
-                  {change.versions.join(', ')}
-                </div>
-              </MenuItem>
-            );
-          })}
-        </div>
-      </div>
-    </details>
-  </div>
-);
-
-export default ChangeHistory;

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

@@ -1,56 +0,0 @@
-@reference "../../styles/index.css";
-
-.root {
-  > [role='tabpanel'] > :first-child {
-    @apply rounded-t-none;
-  }
-
-  > div:nth-of-type(1) {
-    @apply flex
-      rounded-t
-      border-x
-      border-t
-      border-neutral-900
-      bg-neutral-950
-      px-2
-      pt-3
-      md:px-4;
-
-    .trigger {
-      @apply border-b
-        border-b-transparent
-        px-1
-        text-neutral-200;
-
-      &[data-state='active'] {
-        @apply border-b-green-400
-          text-green-400;
-      }
-    }
-
-    .link {
-      @apply hidden
-        items-center
-        gap-2
-        text-center
-        text-neutral-200
-        motion-safe:transition-colors
-        lg:flex;
-
-      & > .icon {
-        @apply size-4
-          text-neutral-300;
-      }
-
-      &:is(:link, :visited) {
-        &:hover {
-          @apply text-neutral-400;
-
-          & > .icon {
-            @apply text-neutral-600;
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,73 +0,0 @@
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-import type { FC } from 'react';
-
-import BaseCodeBox from '#ui/Common/BaseCodeBox';
-import CodeTabs from '#ui/Common/CodeTabs';
-
-type Story = StoryObj<typeof CodeTabs>;
-type Meta = MetaObj<typeof CodeTabs>;
-
-const mjsContent = `import * as http from '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 cjsContent = `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 boxProps = {
-  onCopy: console.log,
-  buttonText: '[Button Text]',
-};
-
-const TabsContent: FC = () => (
-  <>
-    <TabsPrimitive.Content key="mjs" value="mjs">
-      <BaseCodeBox language="JavaScript (MJS)" {...boxProps}>
-        <code>{mjsContent}</code>
-      </BaseCodeBox>
-    </TabsPrimitive.Content>
-    <TabsPrimitive.Content key="cjs" value="cjs">
-      <BaseCodeBox language="JavaScript (CJS)" {...boxProps}>
-        <code>{cjsContent}</code>
-      </BaseCodeBox>
-    </TabsPrimitive.Content>
-  </>
-);
-
-export const Default: Story = {};
-
-export default {
-  component: CodeTabs,
-  args: {
-    children: <TabsContent />,
-    defaultValue: 'mjs',
-    tabs: [
-      { key: 'mjs', label: 'MJS' },
-      { key: 'cjs', label: 'CJS' },
-    ],
-  },
-} as Meta;

package/src/Common/CodeTabs/index.tsx

@@ -1,16 +0,0 @@
-import type { ComponentProps, FC } from 'react';
-
-import Tabs from '#ui/Common/Tabs';
-
-import styles from './index.module.css';
-
-type CodeTabsProps = Pick<
-  ComponentProps<typeof Tabs>,
-  'tabs' | 'defaultValue' | 'children' | 'addons'
->;
-
-const CodeTabs: FC<CodeTabsProps> = ({ ...props }) => (
-  <Tabs {...props} className={styles.root} triggerClassName={styles.trigger} />
-);
-
-export default CodeTabs;

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

@@ -1,56 +0,0 @@
-@reference "../../styles/index.css";
-
-.dataTag {
-  @apply flex
-    items-center
-    justify-center
-    rounded-full
-    font-semibold
-    text-white;
-
-  &.lg {
-    @apply size-12
-      text-2xl;
-  }
-
-  &.md {
-    @apply size-10
-      text-xl;
-  }
-
-  &.sm {
-    @apply size-8;
-  }
-
-  &.event {
-    @apply bg-accent1-600;
-  }
-
-  &.method {
-    @apply bg-info-600;
-  }
-
-  &.property {
-    @apply bg-green-600;
-  }
-
-  &.class {
-    @apply bg-warning-600;
-  }
-
-  &.module {
-    @apply bg-red-600;
-  }
-
-  &.classMethod {
-    @apply bg-blue-600;
-  }
-
-  &.ctor {
-    @apply bg-accent2-600;
-  }
-
-  &.global {
-    @apply bg-amber-600;
-  }
-}

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

@@ -1,40 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import DataTag, { type DataTagProps } from '#ui/Common/DataTag';
-
-type Story = StoryObj<typeof DataTag>;
-type Meta = MetaObj<typeof DataTag>;
-
-export const DataTags: Story = {
-  render: () => (
-    <div className="grid grid-cols-3 gap-6 p-6">
-      {[
-        'event',
-        'method',
-        'property',
-        'class',
-        'module',
-        'classMethod',
-        'ctor',
-        'global',
-      ]
-        .map(kind =>
-          ['sm', 'md', 'lg'].map(size => (
-            <div
-              key={`${kind}-${size}`}
-              className="flex justify-center"
-              title={kind}
-            >
-              <DataTag
-                kind={kind as DataTagProps['kind']}
-                size={size as DataTagProps['size']}
-              />
-            </div>
-          ))
-        )
-        .flat()}
-    </div>
-  ),
-};
-
-export default { component: DataTag } as Meta;

package/src/Common/DataTag/index.tsx

@@ -1,39 +0,0 @@
-import classNames from 'classnames';
-import type { FC } from 'react';
-
-import styles from './index.module.css';
-
-export type DataTagProps = {
-  kind:
-    | 'event'
-    | 'method'
-    | 'property'
-    | 'class'
-    | 'module'
-    | 'classMethod'
-    | 'global'
-    | 'ctor';
-  size?: 'lg' | 'md' | 'sm';
-};
-
-// These symbols match up with the types used in
-// node core, and the ones defined at
-// https://github.com/nodejs/api-docs-tooling/blob/main/src/types.d.ts#L22 (`HeadingMetadataEntry['type']`)
-const symbolMap = {
-  event: 'E',
-  method: 'M',
-  property: 'P',
-  class: 'C',
-  module: 'M',
-  classMethod: 'S',
-  global: 'G',
-  ctor: 'C',
-} as const;
-
-const DataTag: FC<DataTagProps> = ({ kind, size = 'md' }) => (
-  <div className={classNames(styles.dataTag, styles[size], styles[kind])}>
-    <span>{symbolMap[kind]}</span>
-  </div>
-);
-
-export default DataTag;

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

@@ -1,32 +0,0 @@
-@reference "../../styles/index.css";
-
-.glowingBackdrop {
-  @apply absolute
-    left-0
-    top-0
-    -z-10
-    size-full
-    opacity-50
-    after:absolute
-    after:inset-0
-    after:m-auto
-    after:aspect-square
-    after:w-[300px]
-    after:rounded-full
-    after:bg-green-300
-    after:blur-[120px]
-    after:content-['']
-    md:opacity-100
-    dark:after:bg-green-700;
-
-  svg {
-    @apply absolute
-      inset-0
-      m-auto
-      aspect-[1.67]
-      max-w-[1004px]
-      object-cover
-      text-neutral-300
-      dark:text-neutral-900/75;
-  }
-}

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

@@ -1,10 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import GlowingBackdrop from '#ui/Common/GlowingBackdrop';
-
-type Story = StoryObj<typeof GlowingBackdrop>;
-type Meta = MetaObj<typeof GlowingBackdrop>;
-
-export const Default: Story = {};
-
-export default { component: GlowingBackdrop } as Meta;

package/src/Common/GlowingBackdrop/index.tsx

@@ -1,13 +0,0 @@
-import type { FC } from 'react';
-
-import HexagonGrid from '#ui/Icons/HexagonGrid';
-
-import styles from './index.module.css';
-
-const GlowingBackdrop: FC = () => (
-  <div className={styles.glowingBackdrop}>
-    <HexagonGrid />
-  </div>
-);
-
-export default GlowingBackdrop;