@node-core/ui-components 1.0.1-79dc76991a4c35cbd47e62c12e8d3507e3d9a7c4 → 1.0.1-8cf10eb7218cb2c7b5c6edbdec0de828c91d58f7

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/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/DataTag/index.module.css

@@ -49,4 +49,8 @@
   &.ctor {
     @apply bg-accent2-600;
   }
+
+  &.global {
+    @apply bg-amber-600;
+  }
 }

package/Common/DataTag/index.stories.tsx

@@ -8,7 +8,16 @@ 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']
+      {[
+        'event',
+        'method',
+        'property',
+        'class',
+        'module',
+        'classMethod',
+        'ctor',
+        'global',
+      ]
         .map(kind =>
           ['sm', 'md', 'lg'].map(size => (
             <div

package/Common/DataTag/index.tsx

@@ -11,6 +11,7 @@ export type DataTagProps = {
     | 'class'
     | 'module'
     | 'classMethod'
+    | 'global'
     | 'ctor';
   size?: 'lg' | 'md' | 'sm';
 };
@@ -25,6 +26,7 @@ const symbolMap = {
   class: 'C',
   module: 'M',
   classMethod: 'S',
+  global: 'G',
   ctor: 'C',
 } as const;
 

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>

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

@@ -1,35 +1,56 @@
-@reference "../../../styles/index.css";
+@reference '../../../styles/index.css';
 
-.sideBarItem {
-  @apply flex
+.item {
+  @apply font-regular
+    relative
+    z-20
+    flex
     w-full
-    list-none
+    items-center
+    overflow-hidden
+    text-sm
     text-neutral-800
     dark:text-neutral-200;
 
-  a {
-    @apply inline-flex
-      items-center
-      gap-2
-      p-2;
-  }
-
   .label {
     @apply font-regular
-      w-full
+      p-2
       text-sm;
   }
 
+  .progressionIcon {
+    @apply shrink-0
+      fill-neutral-200
+      stroke-white
+      stroke-[4]
+      dark:fill-neutral-800
+      dark:stroke-neutral-950;
+  }
+
   .icon {
     @apply size-3
       text-neutral-500
       dark:text-neutral-200;
   }
-}
 
-.active {
-  @apply rounded-sm
-    bg-green-600
-    text-white
-    dark:text-white;
+  &.progression {
+    .label {
+      @apply p-1;
+    }
+  }
+
+  &.active {
+    @apply text-neutral-900
+      dark:text-white;
+
+    .progressionIcon {
+      @apply fill-green-500;
+    }
+
+    &:not(.progression) .label {
+      @apply rounded-sm
+        bg-green-600
+        text-white;
+    }
+  }
 }

package/Containers/Sidebar/SidebarItem/index.tsx

@@ -1,26 +1,43 @@
 import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
+import classNames from 'classnames';
 import type { FC } from 'react';
 
-import ActiveLink from '#ui/Common/BaseActiveLink';
+import BaseActiveLink from '#ui/Common/BaseActiveLink';
 import type { FormattedMessage, LinkLike } from '#ui/types';
 
 import styles from './index.module.css';
+import ProgressionIcon from '../ProgressionIcon';
 
 type SidebarItemProps = {
   label: FormattedMessage;
   link: string;
   as?: LinkLike;
   pathname?: string;
+  showProgressionIcons?: boolean;
 };
 
-const SidebarItem: FC<SidebarItemProps> = ({ label, link, ...props }) => (
-  <li className={styles.sideBarItem}>
-    <ActiveLink href={link} activeClassName={styles.active} {...props}>
-      <span className={styles.label}>{label}</span>
+const SidebarItem: FC<SidebarItemProps> = ({
+  label,
+  link,
+  showProgressionIcons = false,
+  ...props
+}) => (
+  <BaseActiveLink
+    className={classNames({
+      [styles.item]: true,
+      [styles.progression]: showProgressionIcons,
+    })}
+    href={link}
+    activeClassName={styles.active}
+    {...props}
+  >
+    {showProgressionIcons && (
+      <ProgressionIcon className={styles.progressionIcon} />
+    )}
+    <span className={styles.label}>{label}</span>
 
-      {link.startsWith('http') && <ArrowUpRightIcon className={styles.icon} />}
-    </ActiveLink>
-  </li>
+    {/^https?:/.test(link) && <ArrowUpRightIcon className={styles.icon} />}
+  </BaseActiveLink>
 );
 
 export default SidebarItem;

package/Containers/Sidebar/index.module.css

@@ -4,26 +4,25 @@
   @apply flex
     w-full
     flex-col
-    items-start
     gap-8
     overflow-auto
-    overflow-x-hidden
-    border-r-neutral-200
+    border-r-0
+    border-neutral-200
     bg-white
     px-4
     py-6
     sm:border-r
     md:max-w-xs
     lg:px-6
-    dark:border-r-neutral-900
+    dark:border-neutral-900
     dark:bg-neutral-950;
 
-  > section {
+  .navigation {
     @apply hidden
       sm:flex;
   }
 
-  > span {
+  .mobileSelect {
     @apply flex
       w-full
       sm:hidden;

package/Containers/Sidebar/index.stories.tsx

@@ -5,80 +5,84 @@ import Sidebar from '#ui/Containers/Sidebar';
 type Story = StoryObj<typeof Sidebar>;
 type Meta = MetaObj<typeof Sidebar>;
 
-export const Default: Story = {
-  args: {
-    groups: [
-      {
-        groupName: 'About Node.js',
-        items: [
-          {
-            link: '/item1',
-            label: 'About Node.js',
-          },
-          {
-            link: '/item2',
-            label: 'Project Governance',
-          },
-          {
-            link: '/item3',
-            label: 'Releases',
-          },
-          {
-            link: '/item4',
-            label: 'Branding',
-          },
-          {
-            link: '/item5',
-            label: 'Privacy Policy',
-          },
-          {
-            link: '/item6',
-            label: 'Security Reporting',
-          },
-        ],
-      },
-      {
-        groupName: 'Get Involved',
-        items: [
-          {
-            link: '/item7',
-            label: 'Get Involved',
-          },
-          {
-            link: '/item8',
-            label: 'Collab Summit',
-          },
-          {
-            link: '/item9',
-            label: 'Contribute',
-          },
-          {
-            link: '/item10',
-            label: 'Code of Conduct',
-          },
-        ],
-      },
-      {
-        groupName: 'Download',
-        items: [
-          {
-            link: '/item11',
-            label: 'Download',
-          },
-          {
-            link: '/item12',
-            label: 'Package Manager',
-          },
-          {
-            link: '/item13',
-            label: 'Node.js Releases',
-          },
-        ],
-      },
-    ],
-    title: 'Sidebar',
-    onSelect: console.log,
-  },
+const args = {
+  groups: [
+    {
+      groupName: 'About Node.js',
+      items: [
+        {
+          link: '/item1',
+          label: 'About Node.js',
+        },
+        {
+          link: '/item2',
+          label: 'Project Governance',
+        },
+        {
+          link: '/item3',
+          label: 'Releases',
+        },
+        {
+          link: '/item4',
+          label: 'Branding',
+        },
+        {
+          link: '/item5',
+          label: 'Privacy Policy',
+        },
+        {
+          link: '/item6',
+          label: 'Security Reporting',
+        },
+      ],
+    },
+    {
+      groupName: 'Get Involved',
+      items: [
+        {
+          link: '/item7',
+          label: 'Get Involved',
+        },
+        {
+          link: '/item8',
+          label: 'Collab Summit',
+        },
+        {
+          link: '/item9',
+          label: 'Contribute',
+        },
+        {
+          link: '/item10',
+          label: 'Code of Conduct',
+        },
+      ],
+    },
+    {
+      groupName: 'Download',
+      items: [
+        {
+          link: '/item11',
+          label: 'Download',
+        },
+        {
+          link: '/item12',
+          label: 'Package Manager',
+        },
+        {
+          link: '/item13',
+          label: 'Node.js Releases',
+        },
+      ],
+    },
+  ],
+  title: 'Sidebar',
+  onSelect: console.log,
+  pathname: '/item1',
+};
+
+export const Default: Story = { args };
+export const Progression: Story = {
+  args: { ...args, showProgressionIcons: true },
 };
 
 export default { component: Sidebar } as Meta;

package/Containers/Sidebar/index.tsx

@@ -1,4 +1,4 @@
-import type { ComponentProps, FC } from 'react';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
 
 import Select from '#ui/Common/Select';
 import SidebarGroup from '#ui/Containers/Sidebar/SidebarGroup';
@@ -7,19 +7,24 @@ import type { LinkLike } from '#ui/types';
 import styles from './index.module.css';
 
 type SidebarProps = {
-  groups: Array<Omit<ComponentProps<typeof SidebarGroup>, 'as' | 'pathname'>>;
+  groups: Array<
+    Pick<ComponentProps<typeof SidebarGroup>, 'items' | 'groupName'>
+  >;
   pathname?: string;
   title: string;
   onSelect: (value: string) => void;
   as?: LinkLike;
+  showProgressionIcons?: boolean;
 };
 
-const SideBar: FC<SidebarProps> = ({
+const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
   groups,
   pathname,
   title,
   onSelect,
   as,
+  showProgressionIcons = false,
+  children,
 }) => {
   const selectItems = groups.map(({ items, groupName }) => ({
     label: groupName,
@@ -27,18 +32,20 @@ const SideBar: FC<SidebarProps> = ({
   }));
 
   const currentItem = selectItems
-    .map(item => item.items)
-    .flat()
+    .flatMap(item => item.items)
     .find(item => pathname === item.value);
 
   return (
     <aside className={styles.wrapper}>
+      {children}
+
       {selectItems.length > 0 && (
         <Select
           label={title}
           values={selectItems}
           defaultValue={currentItem?.value}
           onChange={onSelect}
+          className={styles.mobileSelect}
         />
       )}
 
@@ -49,6 +56,8 @@ const SideBar: FC<SidebarProps> = ({
           items={items}
           pathname={pathname}
           as={as}
+          showProgressionIcons={showProgressionIcons}
+          className={styles.navigation}
         />
       ))}
     </aside>

package/package.json

@@ -13,57 +13,54 @@
   "files": [
     "Common",
     "Containers",
-    "MDX",
     "Icons",
+    "MDX",
+    "stylelint",
     "styles",
-    "types.ts",
-    "stylelint"
+    "types.ts"
   ],
   "dependencies": {
     "@heroicons/react": "^2.2.0",
-    "@radix-ui/react-avatar": "^1.1.9",
-    "@radix-ui/react-dialog": "^1.1.7",
-    "@radix-ui/react-dropdown-menu": "~2.1.6",
-    "@radix-ui/react-label": "~2.1.2",
-    "@radix-ui/react-select": "~2.2.2",
-    "@radix-ui/react-separator": "~1.1.3",
-    "@radix-ui/react-tabs": "~1.1.9",
-    "@radix-ui/react-toast": "~1.2.6",
-    "@radix-ui/react-tooltip": "~1.2.4",
-    "@tailwindcss/postcss": "~4.1.5",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "~2.1.15",
+    "@radix-ui/react-label": "~2.1.7",
+    "@radix-ui/react-select": "~2.2.5",
+    "@radix-ui/react-separator": "~1.1.7",
+    "@radix-ui/react-tabs": "~1.1.12",
+    "@radix-ui/react-toast": "~1.2.14",
+    "@radix-ui/react-tooltip": "~1.2.7",
+    "@tailwindcss/postcss": "~4.1.8",
     "@vcarl/remark-headings": "~0.1.0",
     "classnames": "~2.5.1",
     "postcss-calc": "^10.1.1",
     "tailwindcss": "~4.0.17"
   },
   "devDependencies": {
-    "@storybook/addon-controls": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-themes": "^8.6.12",
-    "@storybook/addon-viewport": "^8.6.12",
+    "@storybook/addon-themes": "^9.0.3",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-webpack5": "^8.6.12",
+    "@storybook/react": "^9.0.3",
+    "@storybook/react-webpack5": "^9.0.3",
     "@testing-library/user-event": "~14.6.1",
     "@types/node": "22.15.3",
-    "@types/react": "^19.1.0",
+    "@types/react": "^19.1.6",
     "cross-env": "^7.0.3",
     "css-loader": "~7.1.2",
     "eslint-plugin-react": "~7.37.4",
-    "eslint-plugin-storybook": "~0.12.0",
+    "eslint-plugin-storybook": "~9.0.3",
     "global-jsdom": "^26.0.0",
     "postcss-loader": "~8.1.1",
     "react": "^19.1.0",
-    "storybook": "^8.6.11",
+    "storybook": "^9.0.3",
     "style-loader": "~4.0.0",
-    "stylelint": "^16.19.1",
+    "stylelint": "^16.20.0",
     "stylelint-config-standard": "^38.0.0",
     "stylelint-order": "7.0.0",
     "stylelint-selector-bem-pattern": "4.0.1",
     "tsx": "^4.19.3",
     "typescript": "~5.8.2",
-    "typescript-eslint": "~8.31.1"
+    "typescript-eslint": "~8.33.1"
   },
   "imports": {
     "#ui/*": [
@@ -77,17 +74,17 @@
   "engines": {
     "node": ">=20"
   },
-  "version": "1.0.1-79dc76991a4c35cbd47e62c12e8d3507e3d9a7c4",
+  "version": "1.0.1-8cf10eb7218cb2c7b5c6edbdec0de828c91d58f7",
   "scripts": {
-    "check-types": "tsc --noEmit",
     "lint": "turbo run lint:js lint:css",
     "lint:css": "stylelint \"**/*.css\" --allow-empty-input --cache --cache-strategy=content --cache-location=.stylelintcache",
-    "lint:fix": "turbo run lint:js lint:css --no-cache -- --fix",
+    "lint:fix": "node --run lint -- -- --fix",
     "lint:js": "eslint \"**/*.{js,mjs,ts,tsx}\"",
+    "lint:types": "tsc --noEmit",
     "storybook": "cross-env NODE_NO_WARNINGS=1 storybook dev -p 6006 --quiet",
     "storybook:build": "cross-env NODE_NO_WARNINGS=1 storybook build --quiet --webpack-stats-json",
-    "test": "turbo test:unit",
+    "test": "node --run test:unit",
     "test:unit": "cross-env NODE_NO_WARNINGS=1 node --experimental-test-coverage --test-coverage-exclude=**/*.test.* --enable-source-maps --import=global-jsdom/register --import=tsx --import=../../tests/setup.mjs --test **/*.test.*",
-    "test:unit:watch": "cross-env NODE_OPTIONS=\"--watch\" pnpm test:unit"
+    "test:unit:watch": "node --run test:unit -- --watch"
   }
 }

package/Common/ProgressionSidebar/ProgressionSidebarGroup/index.module.css

@@ -1,47 +0,0 @@
-@reference "../../../styles/index.css";
-
-.group {
-  @apply flex
-    flex-col
-    gap-4
-    text-sm
-    font-medium
-    text-neutral-800
-    dark:text-neutral-200;
-
-  .items {
-    @apply relative
-      -left-1
-      flex
-      flex-col
-      gap-2
-      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/Common/ProgressionSidebar/ProgressionSidebarGroup/index.tsx

@@ -1,35 +0,0 @@
-import type { ComponentProps, FC } from 'react';
-
-import ProgressionSidebarItem from '#ui/Common/ProgressionSidebar/ProgressionSidebarItem';
-import type { FormattedMessage, LinkLike } from '#ui/types';
-
-import styles from './index.module.css';
-
-type ProgressionSidebarGroupProps = {
-  groupName: FormattedMessage;
-  items: Array<ComponentProps<typeof ProgressionSidebarItem>>;
-  pathname?: string;
-  as?: LinkLike;
-};
-
-const ProgressionSidebarGroup: FC<ProgressionSidebarGroupProps> = ({
-  groupName,
-  items,
-  ...props
-}) => (
-  <section className={styles.group}>
-    {groupName}
-    <div className={styles.items}>
-      {items.map(({ label, link }) => (
-        <ProgressionSidebarItem
-          key={link}
-          label={label}
-          link={link}
-          {...props}
-        />
-      ))}
-    </div>
-  </section>
-);
-
-export default ProgressionSidebarGroup;

package/Common/ProgressionSidebar/ProgressionSidebarItem/index.module.css

@@ -1,39 +0,0 @@
-@reference "../../../styles/index.css";
-
-a.item {
-  @apply font-regular
-    relative
-    z-20
-    flex
-    w-full
-    items-center
-    gap-1
-    overflow-hidden
-    text-sm
-    text-neutral-800
-    dark:text-neutral-200;
-
-  &:hover {
-    @apply text-neutral-900
-      motion-safe:transition-colors
-      dark:text-white;
-  }
-
-  svg {
-    @apply shrink-0
-      fill-neutral-200
-      stroke-white
-      stroke-[4]
-      dark:fill-neutral-800
-      dark:stroke-neutral-950;
-  }
-
-  &.active {
-    @apply text-neutral-900
-      dark:text-white;
-
-    svg {
-      @apply fill-green-500;
-    }
-  }
-}

package/Common/ProgressionSidebar/ProgressionSidebarItem/index.tsx

@@ -1,32 +0,0 @@
-import type { FC } from 'react';
-
-import BaseActiveLink from '#ui/Common/BaseActiveLink';
-import ProgressionSidebarIcon from '#ui/Common/ProgressionSidebar/ProgressionSidebarIcon';
-import type { FormattedMessage, LinkLike } from '#ui/types';
-
-import styles from './index.module.css';
-
-type ProgressionSidebarItemProps = {
-  label: FormattedMessage;
-  link: string;
-  as?: LinkLike;
-  pathname?: string;
-};
-
-const ProgressionSidebarItem: FC<ProgressionSidebarItemProps> = ({
-  label,
-  link,
-  ...props
-}) => (
-  <BaseActiveLink
-    className={styles.item}
-    activeClassName={styles.active}
-    href={link}
-    {...props}
-  >
-    <ProgressionSidebarIcon />
-    {label}
-  </BaseActiveLink>
-);
-
-export default ProgressionSidebarItem;

package/Common/ProgressionSidebar/index.module.css

@@ -1,30 +0,0 @@
-@reference "../../styles/index.css";
-
-.wrapper {
-  @apply flex
-    w-full
-    flex-col
-    gap-8
-    overflow-auto
-    border-r-0
-    border-neutral-200
-    bg-white
-    px-4
-    py-6
-    sm:border-r
-    md:max-w-xs
-    lg:px-6
-    dark:border-neutral-900
-    dark:bg-neutral-950;
-
-  > section {
-    @apply hidden
-      sm:flex;
-  }
-
-  > span {
-    @apply flex
-      w-full
-      sm:hidden;
-  }
-}

package/Common/ProgressionSidebar/index.stories.tsx

@@ -1,79 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import ProgressionSidebar from '#ui/Common/ProgressionSidebar';
-
-type Story = StoryObj<typeof ProgressionSidebar>;
-type Meta = MetaObj<typeof ProgressionSidebar>;
-
-export const Default: Story = {
-  args: {
-    groups: [
-      {
-        groupName: 'Getting Started',
-        items: [
-          {
-            label: 'Introduction to Node.js',
-            link: '/',
-          },
-          {
-            label: 'How to install Node.js',
-            link: '/how-to-install-nodejs',
-          },
-          {
-            label: 'How much JavaScript do you need to know to use Node.js?',
-            link: '/how-much-javascript-do-you-need-to-know-to-use-nodejs',
-          },
-          {
-            label: 'Differences between Node.js and the Browser',
-            link: '/differences-between-nodejs-and-the-browser',
-          },
-          {
-            label: 'The V8 JavaScript Engine',
-            link: '/the-v8-javascript-engine',
-          },
-          {
-            label: 'An introduction to the npm package manager',
-            link: '/an-introduction-to-the-npm-package-manager',
-          },
-        ],
-      },
-      {
-        groupName: 'Asynchronous Work',
-        items: [
-          {
-            label: 'Asynchronous flow control',
-            link: '/asynchronous-flow-control',
-          },
-          {
-            label: 'Overview of Blocking vs Non-Blocking',
-            link: '/overview-of-blocking-vs-non-blocking',
-          },
-        ],
-      },
-      {
-        groupName: 'Manipulating Files',
-        items: [
-          {
-            label: 'Node.js file stats',
-            link: '/nodejs-file-stats',
-          },
-          {
-            label: 'Node.js File Paths',
-            link: '/nodejs-file-paths',
-          },
-        ],
-      },
-      {
-        groupName: 'Single item',
-        items: [
-          {
-            label: 'Item',
-            link: '/item',
-          },
-        ],
-      },
-    ],
-  },
-};
-
-export default { component: ProgressionSidebar } as Meta;

package/Common/ProgressionSidebar/index.tsx

@@ -1,59 +0,0 @@
-'use client';
-
-import { useRef, type ComponentProps, type FC } from 'react';
-
-import ProgressionSidebarGroup from '#ui/Common/ProgressionSidebar/ProgressionSidebarGroup';
-import Select from '#ui/Common/Select';
-import type { LinkLike } from '#ui/types';
-
-import styles from './index.module.css';
-
-type ProgressionSidebarProps = {
-  groups: Array<ComponentProps<typeof ProgressionSidebarGroup>>;
-  pathname?: string;
-  title: string;
-  onSelect: (value: string) => void;
-  as?: LinkLike;
-};
-
-const ProgressionSidebar: FC<ProgressionSidebarProps> = ({
-  groups,
-  pathname,
-  title,
-  onSelect,
-  as,
-}) => {
-  const ref = useRef<HTMLElement>(null);
-  const selectItems = groups.map(({ items, groupName }) => ({
-    label: groupName,
-    items: items.map(({ label, link }) => ({ value: link, label })),
-  }));
-
-  const currentItem = selectItems
-    .map(item => item.items)
-    .flat()
-    .find(item => pathname === item.value);
-
-  return (
-    <nav className={styles.wrapper} ref={ref}>
-      <Select
-        label={title}
-        onChange={onSelect}
-        values={selectItems}
-        defaultValue={currentItem?.value}
-      />
-
-      {groups.map(({ groupName, items }) => (
-        <ProgressionSidebarGroup
-          key={groupName.toString()}
-          groupName={groupName}
-          items={items}
-          as={as}
-          pathname={pathname}
-        />
-      ))}
-    </nav>
-  );
-};
-
-export default ProgressionSidebar;