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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,53 @@
+@reference "../../styles/index.css";
+
+.languageDropdown {
+  @apply h-9
+    w-9
+    rounded-md
+    p-2
+    text-neutral-700
+    motion-safe:transition-colors
+    dark:text-neutral-300;
+
+  &:hover {
+    @apply bg-neutral-100
+      dark:bg-neutral-900;
+  }
+}
+
+.dropDownContent {
+  @apply max-h-80
+    w-48
+    overflow-hidden
+    rounded-sm
+    border
+    border-neutral-200
+    bg-white
+    shadow-lg
+    dark:border-neutral-900
+    dark:bg-neutral-950;
+
+  > div {
+    @apply max-h-80
+      w-48
+      overflow-y-auto;
+  }
+}
+
+.dropDownItem {
+  @apply outline-hidden
+    cursor-pointer
+    px-2.5
+    py-1.5
+    text-sm
+    font-medium
+    text-neutral-800
+    data-[highlighted]:bg-green-600
+    data-[highlighted]:text-white
+    dark:text-white;
+}
+
+.currentDropDown {
+  @apply bg-green-600
+    text-white;
+}

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

@@ -0,0 +1,19 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import LanguageDropDown from '#ui/Common/LanguageDropDown';
+
+type Story = StoryObj<typeof LanguageDropDown>;
+type Meta = MetaObj<typeof LanguageDropDown>;
+
+export const Default: Story = {
+  args: {
+    availableLanguages: [
+      { name: 'English', code: 'en', localName: 'English' },
+      { name: 'French', code: 'fr', localName: 'Français' },
+      { name: 'Spanish', code: 'es', localName: 'Español' },
+    ],
+    currentLanguage: 'en',
+  },
+};
+
+export default { component: LanguageDropDown } as Meta;