@node-core/ui-components 1.0.1-23f195d7d72e3651ff23da791e2f997015a34433 → 1.0.1-2aa8ae62b828936ceb5251f37f7c539668856ed5

package/Common/AlertBox/index.module.css

@@ -73,4 +73,11 @@
       @apply bg-danger-700;
     }
   }
+
+  code {
+    /* Ignore the styles from `markdown.css` */
+    all: unset;
+
+    @apply font-ibm-plex-mono;
+  }
 }

package/Common/AlertBox/index.stories.tsx

@@ -6,6 +6,12 @@ import AlertBox from '#ui/Common/AlertBox';
 type Story = StoryObj<typeof AlertBox>;
 type Meta = MetaObj<typeof AlertBox>;
 
+const withMain = (args: React.ComponentProps<typeof AlertBox>) => (
+  <main>
+    <AlertBox {...args} />
+  </main>
+);
+
 export const Info: Story = {
   args: {
     level: 'info',
@@ -46,6 +52,23 @@ export const Danger: Story = {
   },
 };
 
+export const InMarkdown: Story = {
+  args: {
+    level: 'danger',
+    title: '0',
+    children: (
+      <>
+        In a markdown component, <code>Code renders correctly,</code>{' '}
+        <a href="#">
+          <code>even when in a link</code>
+        </a>
+      </>
+    ),
+    size: 'default',
+  },
+  render: withMain,
+};
+
 export const WithIcon: Story = {
   args: {
     level: 'info',

package/Common/AvatarGroup/index.module.css

@@ -4,22 +4,18 @@
   @apply flex
     flex-wrap
     items-center;
-
-  &:not(.expandable) {
-    > span {
-      @apply ml-0;
-    }
-  }
 }
 
 .small {
   > span {
-    @apply -ml-2;
+    @apply -ml-2
+      first:ml-0;
   }
 }
 
 .medium {
   > span {
-    @apply -ml-2.5;
+    @apply -ml-2.5
+      first:ml-0;
   }
 }

package/Common/AvatarGroup/index.tsx

@@ -42,11 +42,7 @@ const AvatarGroup: FC<AvatarGroupProps> = ({
     : undefined;
 
   return (
-    <div
-      className={classNames(styles.avatarGroup, styles[size], {
-        [styles.expandable]: avatars.length > limit,
-      })}
-    >
+    <div className={classNames(styles.avatarGroup, styles[size])}>
       {renderAvatars.map(avatar => (
         <Tooltip
           key={avatar.nickname}

package/Common/BaseButton/index.module.css

@@ -73,11 +73,14 @@
 
   &.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-100
+      @apply bg-neutral-200
         text-neutral-800
         dark:bg-neutral-900
         dark:text-neutral-200;

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

package/Common/Modal/index.module.css

@@ -17,6 +17,7 @@
       w-full
       max-w-3xl
       flex-col
+      gap-2
       overflow-y-auto
       rounded
       border
@@ -47,8 +48,7 @@
   }
 
   .title {
-    @apply mb-2
-      text-3xl
+    @apply text-3xl
       font-semibold
       text-neutral-900
       dark:text-white;
@@ -56,7 +56,7 @@
 
   .description {
     @apply font-regular
-      mb-4
+      mb-2
       text-lg
       text-neutral-800
       dark:text-neutral-200;

package/Common/Modal/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Modal from '#ui/Common/Modal';
+import { Modal, Title, Description, Content } from '#ui/Common/Modal';
 
 type Story = StoryObj<typeof Modal>;
 type Meta = MetaObj<typeof Modal>;
@@ -8,10 +8,12 @@ type Meta = MetaObj<typeof Modal>;
 export const Default: Story = {
   args: {
     open: true,
-    heading: 'Node.js Versions Information',
-    subheading: 'Get all information about Node.js versions and their changes.',
     children: (
-      <>
+      <Content>
+        <Title>Node.js Versions Information</Title>
+        <Description>
+          Get all information about Node.js versions and their changes.
+        </Description>
         <p>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto
           atque sint doloremque, sapiente recusandae debitis libero nostrum
@@ -24,7 +26,7 @@ export const Default: Story = {
           amet minus sit architecto blanditiis hic sed odit cumque numquam
           dignissimos delectus.
         </p>
-      </>
+      </Content>
     ),
   },
 };

package/Common/Modal/index.tsx

@@ -7,15 +7,11 @@ import type { FC, PropsWithChildren } from 'react';
 import styles from './index.module.css';
 
 type ModalProps = PropsWithChildren<{
-  heading: string;
-  subheading?: string;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
 }>;
 
 const Modal: FC<ModalProps> = ({
-  heading,
-  subheading,
   children,
   open = false,
   onOpenChange = () => {},
@@ -28,15 +24,7 @@ const Modal: FC<ModalProps> = ({
             <XMarkIcon />
           </Dialog.Trigger>
 
-          <Dialog.Title className={styles.title}>{heading}</Dialog.Title>
-
-          {subheading && (
-            <Dialog.Description className={styles.description}>
-              {subheading}
-            </Dialog.Description>
-          )}
-
-          <main className={styles.wrapper}>{children}</main>
+          {children}
 
           <Dialog.Close />
         </Dialog.Content>
@@ -45,4 +33,18 @@ const Modal: FC<ModalProps> = ({
   </Dialog.Root>
 );
 
-export default Modal;
+const Title = ({ children }: PropsWithChildren) => (
+  <Dialog.Title className={styles.title}>{children}</Dialog.Title>
+);
+
+const Description = ({ children }: PropsWithChildren) => (
+  <Dialog.Description className={styles.description}>
+    {children}
+  </Dialog.Description>
+);
+
+const Content = ({ children }: PropsWithChildren) => (
+  <main className={styles.wrapper}>{children}</main>
+);
+
+export { Modal, Title, Description, Content };

package/{Common/ProgressionSidebar/ProgressionSidebarIcon → Containers/Sidebar/ProgressionIcon}/index.tsx

@@ -1,6 +1,6 @@
 import type { FC, SVGAttributes } from 'react';
 
-const ProgressionSidebarIcon: FC<SVGAttributes<SVGSVGElement>> = props => (
+const ProgressionIcon: FC<SVGAttributes<SVGSVGElement>> = props => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -13,4 +13,4 @@ const ProgressionSidebarIcon: FC<SVGAttributes<SVGSVGElement>> = props => (
   </svg>
 );
 
-export default ProgressionSidebarIcon;
+export default ProgressionIcon;

package/Containers/Sidebar/SidebarGroup/index.module.css

@@ -5,22 +5,60 @@
     w-full
     flex-col
     gap-2;
-}
 
-.groupName {
-  @apply px-2
-    py-1
-    text-xs
-    font-semibold
-    text-neutral-800
-    dark:text-neutral-600;
-}
+  &:not(.progression) {
+    .groupName {
+      @apply px-2
+        py-1
+        text-xs
+        font-semibold
+        text-neutral-800
+        dark:text-neutral-600;
+    }
+  }
 
-.itemList {
-  @apply m-0
-    flex
-    flex-col
-    items-start
-    gap-0.5
-    p-0;
+  &.progression {
+    @apply flex
+      flex-col
+      gap-4
+      text-sm
+      font-medium
+      text-neutral-800
+      dark:text-neutral-200;
+
+    .itemList {
+      @apply relative
+        -left-1
+        flex
+        flex-col
+        after:absolute
+        after:left-[0.45rem]
+        after:top-0
+        after:z-10
+        after:h-full
+        after:w-px
+        after:bg-neutral-200
+        after:content-['']
+        dark:after:bg-neutral-800;
+
+      a {
+        @apply first:before:absolute
+          first:before:bottom-[calc(50%+0.25rem)]
+          first:before:left-0
+          first:before:h-20
+          first:before:w-4
+          first:before:bg-white
+          first:before:content-['']
+          last:after:absolute
+          last:after:left-0
+          last:after:top-[calc(50%+0.25rem)]
+          last:after:h-20
+          last:after:w-4
+          last:after:bg-white
+          last:after:content-['']
+          first:dark:before:bg-neutral-950
+          last:dark:after:bg-neutral-950;
+      }
+    }
+  }
 }

package/Containers/Sidebar/SidebarGroup/index.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
 
 import SidebarItem from '#ui/Containers/Sidebar/SidebarItem';
@@ -10,18 +11,36 @@ type SidebarGroupProps = {
   items: Array<Omit<ComponentProps<typeof SidebarItem>, 'as' | 'pathname'>>;
   as?: LinkLike;
   pathname?: string;
+  className: string;
+  showProgressionIcons?: boolean;
 };
 
 const SidebarGroup: FC<SidebarGroupProps> = ({
   groupName,
   items,
+  showProgressionIcons,
+  className,
   ...props
 }) => (
-  <section className={styles.group}>
+  <section
+    className={classNames(
+      {
+        [styles.group]: true,
+        [styles.progression]: showProgressionIcons,
+      },
+      className
+    )}
+  >
     <label className={styles.groupName}>{groupName}</label>
     <ul className={styles.itemList}>
       {items.map(({ label, link }) => (
-        <SidebarItem key={link} label={label} link={link} {...props} />
+        <SidebarItem
+          key={link}
+          label={label}
+          link={link}
+          showProgressionIcons={showProgressionIcons}
+          {...props}
+        />
       ))}
     </ul>
   </section>