@node-core/ui-components 1.0.1-bc3f4a79ab5f54e7ed1ee525005e7e9f1030495c → 1.0.1-cc5c2626b0639fe2088a736f54169ea3e10ed325

package/Common/Breadcrumbs/index.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import Breadcrumbs from '#ui/Common/Breadcrumbs';
+
+type Story = StoryObj<typeof Breadcrumbs>;
+type Meta = MetaObj<typeof Breadcrumbs>;
+
+export const Default: Story = {
+  args: {
+    links: [
+      {
+        label: 'Learn',
+        href: '/learn',
+      },
+      {
+        label: 'Getting Started',
+        href: '/learn/getting-started',
+      },
+      {
+        label: 'Introduction to Node.js',
+        href: '/learn/getting-started/intro',
+      },
+    ],
+  },
+};
+
+export const Linkless: Story = {
+  args: {
+    links: [
+      {
+        label: 'Learn',
+        href: '',
+      },
+      {
+        label: 'Getting Started',
+        href: '',
+      },
+      {
+        label: 'Introduction to Node.js',
+        href: '',
+      },
+    ],
+  },
+};
+
+export const Truncate: Story = {
+  args: {
+    links: [
+      {
+        label: 'Learn',
+        href: '/learn',
+      },
+      {
+        label: 'Getting Started',
+        href: '/learn/getting-started',
+      },
+      {
+        label: 'Introduction to Node.js',
+        href: '/learn/getting-started/intro',
+      },
+      {
+        label: 'Installation',
+        href: '/learn/getting-started/intro/installation',
+      },
+      {
+        label: 'Documentation',
+        href: '/learn/getting-started/intro/installation/documentation',
+      },
+    ],
+    maxLength: 1,
+  },
+};
+
+export const HiddenHome: Story = {
+  args: {
+    hideHome: true,
+    links: [
+      {
+        label: 'Learn',
+        href: '/learn',
+      },
+      {
+        label: 'Getting Started',
+        href: '/learn/getting-started',
+      },
+      {
+        label: 'Introduction to Node.js',
+        href: '/learn/getting-started/intro',
+      },
+    ],
+  },
+};
+
+export default { component: Breadcrumbs } as Meta;

package/Common/Breadcrumbs/index.tsx

@@ -0,0 +1,81 @@
+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/Common/ChangeHistory/index.module.css

@@ -1,198 +1,83 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .summary {
-  display: flex;
-  height: calc(var(--spacing, 0.25rem)*9);
-  cursor: pointer;
-  align-items: center;
-  gap: calc(var(--spacing, 0.25rem)*2);
-  border-radius: var(--radius-md, 0.375rem);
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: var(--color-neutral-200, #e9edf0);
-  padding: calc(var(--spacing, 0.25rem)*2);
-  font-size: var(--text-sm, 0.875rem);
-  line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
-  color: var(--color-neutral-700, #6e7b83);
-  --tw-outline-style: none;
-  outline-style: none;
-  @media (forced-colors: active) {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-  }
-  -webkit-user-select: none;
-  user-select: none;
-  @media (prefers-reduced-motion: no-preference) {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
-    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
-  }
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    border-color: var(--color-neutral-900, #2c3437);
-  }
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    color: var(--color-neutral-300, #d9e1e4);
-  }
+  @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 {
-    background-color: var(--color-neutral-100, #f6f7f9);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      background-color: var(--color-neutral-900, #2c3437);
-    }
+    @apply bg-neutral-100
+      dark:bg-neutral-900;
   }
 }
+
 .dropdownContentWrapper {
-  position: absolute;
-  top: 100%;
-  right: calc(var(--spacing, 0.25rem)*0);
-  z-index: 50;
-  margin-top: calc(var(--spacing, 0.25rem)*1);
-  max-height: calc(var(--spacing, 0.25rem)*80);
-  width: calc(var(--spacing, 0.25rem)*52);
-  overflow: hidden;
-  border-radius: var(--radius-sm, 0.25rem);
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: var(--color-neutral-200, #e9edf0);
-  background-color: var(--color-white, #fff);
-  --tw-shadow: 0px 4px 6px -2px var(--tw-shadow-color, color-mix(in srgb, #101828 3%, transparent)), 0px 12px 16px -4px var(--tw-shadow-color, color-mix(in srgb, #101828 8%, transparent));
-  @supports (color: color-mix(in lab, red, red)) {
-    --tw-shadow: 0px 4px 6px -2px var(--tw-shadow-color, color-mix(in oklab, var(--color-shadow, #101828) 3%, transparent)), 0px 12px 16px -4px var(--tw-shadow-color, color-mix(in oklab, var(--color-shadow, #101828) 8%, transparent));
-  }
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  &: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 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 {
-  max-height: calc(var(--spacing, 0.25rem)*80);
-  width: calc(var(--spacing, 0.25rem)*52);
-  overflow-y: auto;
+  @apply max-h-80
+    w-52
+    overflow-y-auto;
 }
+
 .dropdownItem {
-  display: block;
-  padding-inline: calc(var(--spacing, 0.25rem)*2.5);
-  padding-block: calc(var(--spacing, 0.25rem)*1.5);
-  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);
-  color: var(--color-neutral-800, #556066);
-  text-decoration-line: none;
-  --tw-outline-style: none;
-  outline-style: none;
-  @media (forced-colors: active) {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-  }
-  @media (prefers-reduced-motion: no-preference) {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
-    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
-  }
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    color: var(--color-white, #fff);
-  }
+  @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 {
-    background-color: var(--color-green-600, #417e38);
-    color: var(--color-white, #fff);
+    @apply bg-green-600
+      text-white;
   }
 }
+
 .dropdownLabel {
-  display: block;
-  font-size: var(--text-sm, 0.875rem);
-  line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
-  --tw-leading: var(--leading-tight, 1.25);
-  line-height: var(--leading-tight, 1.25);
-  --tw-font-weight: var(--font-weight-medium, 500);
-  font-weight: var(--font-weight-medium, 500);
+  @apply block
+    text-sm
+    font-medium
+    leading-tight;
 }
+
 .dropdownVersions {
-  display: block;
-  font-size: var(--text-xs, 0.75rem);
-  line-height: var(--tw-leading, var(--text-xs--line-height, 1.33333));
-  --tw-leading: var(--leading-tight, 1.25);
-  line-height: var(--leading-tight, 1.25);
-  opacity: 75%;
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-inset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-ring-inset {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-offset-width {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0px;
-}
-@property --tw-ring-offset-color {
-  syntax: "*";
-  inherits: false;
-  initial-value: #fff;
-}
-@property --tw-ring-offset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-leading {
-  syntax: "*";
-  inherits: false;
+  @apply block
+    text-xs
+    leading-tight
+    opacity-75;
 }

package/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/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;