@node-core/ui-components 1.0.1-1b9af3ec9e0268bfc734b2489cbc584fa3edf026 → 1.0.1-1ccf19c1836415b6ec7bc2d63ffba4686b390ca9

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

@@ -1,192 +1,64 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../../styles/index.css";
+
 .group {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  gap: calc(var(--spacing, 0.25rem)*2);
+  @apply flex
+    w-full
+    flex-col
+    gap-2;
+
   &:not(.progression) {
     .groupName {
-      padding-inline: calc(var(--spacing, 0.25rem)*2);
-      padding-block: calc(var(--spacing, 0.25rem)*1);
-      font-size: var(--text-xs, 0.75rem);
-      line-height: var(--tw-leading, var(--text-xs--line-height, 1.33333));
-      --tw-font-weight: var(--font-weight-semibold, 600);
-      font-weight: var(--font-weight-semibold, 600);
-      color: var(--color-neutral-800, #556066);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-neutral-600, #929fa5);
-      }
+      @apply px-2
+        py-1
+        text-xs
+        font-semibold
+        text-neutral-800
+        dark:text-neutral-600;
     }
   }
+
   &.progression {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--spacing, 0.25rem)*4);
-    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);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: var(--color-neutral-200, #e9edf0);
-    }
+    @apply flex
+      flex-col
+      gap-4
+      text-sm
+      font-medium
+      text-neutral-800
+      dark:text-neutral-200;
+
     .itemList {
-      position: relative;
-      left: calc(var(--spacing, 0.25rem)*-1);
-      display: flex;
-      flex-direction: column;
-      &::after {
-        content: var(--tw-content);
-        position: absolute;
-      }
-      &::after {
-        content: var(--tw-content);
-        top: calc(var(--spacing, 0.25rem)*0);
-      }
-      &::after {
-        content: var(--tw-content);
-        left: 0.45rem;
-      }
-      &::after {
-        content: var(--tw-content);
-        z-index: 10;
-      }
-      &::after {
-        content: var(--tw-content);
-        height: 100%;
-      }
-      &::after {
-        content: var(--tw-content);
-        width: 1px;
-      }
-      &::after {
-        content: var(--tw-content);
-        background-color: var(--color-neutral-200, #e9edf0);
-      }
-      &::after {
-        content: var(--tw-content);
-        --tw-content: '';
-        content: var(--tw-content);
-      }
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        &::after {
-          content: var(--tw-content);
-          background-color: var(--color-neutral-800, #556066);
-        }
-      }
+      @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 {
-        &:first-child {
-          &::before {
-            content: var(--tw-content);
-            position: absolute;
-          }
-        }
-        &:first-child {
-          &::before {
-            content: var(--tw-content);
-            bottom: calc(50% + 0.25rem);
-          }
-        }
-        &:first-child {
-          &::before {
-            content: var(--tw-content);
-            left: calc(var(--spacing, 0.25rem)*0);
-          }
-        }
-        &:first-child {
-          &::before {
-            content: var(--tw-content);
-            height: calc(var(--spacing, 0.25rem)*20);
-          }
-        }
-        &:first-child {
-          &::before {
-            content: var(--tw-content);
-            width: calc(var(--spacing, 0.25rem)*4);
-          }
-        }
-        &:first-child {
-          &::before {
-            content: var(--tw-content);
-            background-color: var(--color-white, #fff);
-          }
-        }
-        &:first-child {
-          &::before {
-            content: var(--tw-content);
-            --tw-content: '';
-            content: var(--tw-content);
-          }
-        }
-        &:last-child {
-          &::after {
-            content: var(--tw-content);
-            position: absolute;
-          }
-        }
-        &:last-child {
-          &::after {
-            content: var(--tw-content);
-            top: calc(50% + 0.25rem);
-          }
-        }
-        &:last-child {
-          &::after {
-            content: var(--tw-content);
-            left: calc(var(--spacing, 0.25rem)*0);
-          }
-        }
-        &:last-child {
-          &::after {
-            content: var(--tw-content);
-            height: calc(var(--spacing, 0.25rem)*20);
-          }
-        }
-        &:last-child {
-          &::after {
-            content: var(--tw-content);
-            width: calc(var(--spacing, 0.25rem)*4);
-          }
-        }
-        &:last-child {
-          &::after {
-            content: var(--tw-content);
-            background-color: var(--color-white, #fff);
-          }
-        }
-        &:last-child {
-          &::after {
-            content: var(--tw-content);
-            --tw-content: '';
-            content: var(--tw-content);
-          }
-        }
-        &:first-child {
-          &:where([data-theme=dark], [data-theme=dark] *) {
-            &::before {
-              content: var(--tw-content);
-              background-color: var(--color-neutral-950, #0d121c);
-            }
-          }
-        }
-        &:last-child {
-          &:where([data-theme=dark], [data-theme=dark] *) {
-            &::after {
-              content: var(--tw-content);
-              background-color: var(--color-neutral-950, #0d121c);
-            }
-          }
-        }
+        @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;
       }
     }
   }
 }
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-content {
-  syntax: "*";
-  initial-value: "";
-  inherits: false;
-}

package/Containers/Sidebar/SidebarGroup/index.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import SidebarGroup from '#ui/Containers/Sidebar/SidebarGroup';
+
+type Story = StoryObj<typeof SidebarGroup>;
+type Meta = MetaObj<typeof SidebarGroup>;
+
+export const Default: Story = {
+  args: {
+    groupName: 'Example Group',
+    items: [
+      { label: 'Item 1', link: '/item1' },
+      { label: 'Item 2', link: '/item2' },
+      { label: 'Item 3', link: '/item3' },
+    ],
+  },
+};
+
+export const CustomGroup: Story = {
+  args: {
+    groupName: 'Custom Group',
+    items: [
+      { label: 'Custom Item 1', link: '/custom-item1' },
+      { label: 'Custom Item 2', link: '/custom-item2' },
+    ],
+  },
+};
+
+export const EmptyGroup: Story = {
+  args: {
+    groupName: 'Empty Group',
+    items: [],
+  },
+};
+
+export default { component: SidebarGroup } as Meta;

package/Containers/Sidebar/SidebarGroup/index.tsx

@@ -0,0 +1,49 @@
+import classNames from 'classnames';
+import type { ComponentProps, FC } from 'react';
+
+import SidebarItem from '#ui/Containers/Sidebar/SidebarItem';
+import type { FormattedMessage, LinkLike } from '#ui/types';
+
+import styles from './index.module.css';
+
+type SidebarGroupProps = {
+  groupName: FormattedMessage;
+  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={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}
+          showProgressionIcons={showProgressionIcons}
+          {...props}
+        />
+      ))}
+    </ul>
+  </section>
+);
+
+export default SidebarGroup;

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

@@ -1,67 +1,56 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference '../../../styles/index.css';
+
 .item {
-  position: relative;
-  z-index: 20;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  overflow: hidden;
-  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-regular, 400);
-  font-weight: var(--font-weight-regular, 400);
-  color: var(--color-neutral-800, #556066);
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    color: var(--color-neutral-200, #e9edf0);
-  }
+  @apply font-regular
+    relative
+    z-20
+    flex
+    w-full
+    items-center
+    overflow-hidden
+    text-sm
+    text-neutral-800
+    dark:text-neutral-200;
+
   .label {
-    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));
-    --tw-font-weight: var(--font-weight-regular, 400);
-    font-weight: var(--font-weight-regular, 400);
+    @apply font-regular
+      p-2
+      text-sm;
   }
+
   .progressionIcon {
-    flex-shrink: 0;
-    fill: var(--color-neutral-200, #e9edf0);
-    stroke: var(--color-white, #fff);
-    stroke-width: 4;
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      fill: var(--color-neutral-800, #556066);
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      stroke: var(--color-neutral-950, #0d121c);
-    }
+    @apply shrink-0
+      fill-neutral-200
+      stroke-white
+      stroke-[4]
+      dark:fill-neutral-800
+      dark:stroke-neutral-950;
   }
+
   .icon {
-    width: calc(var(--spacing, 0.25rem)*3);
-    height: calc(var(--spacing, 0.25rem)*3);
-    color: var(--color-neutral-500, #b1bcc2);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: var(--color-neutral-200, #e9edf0);
-    }
+    @apply size-3
+      text-neutral-500
+      dark:text-neutral-200;
   }
+
   &.progression {
     .label {
-      padding: calc(var(--spacing, 0.25rem)*1);
+      @apply p-1;
     }
   }
+
   &.active {
-    color: var(--color-neutral-900, #2c3437);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: var(--color-white, #fff);
-    }
+    @apply text-neutral-900
+      dark:text-white;
+
     .progressionIcon {
-      fill: var(--color-green-500, #5fa04e);
+      @apply fill-green-500;
     }
+
     &:not(.progression) .label {
-      border-radius: var(--radius-sm, 0.25rem);
-      background-color: var(--color-green-600, #417e38);
-      color: var(--color-white, #fff);
+      @apply rounded-sm
+        bg-green-600
+        text-white;
     }
   }
 }
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}

package/Containers/Sidebar/SidebarItem/index.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import SidebarItem from '#ui/Containers/Sidebar/SidebarItem';
+
+type Story = StoryObj<typeof SidebarItem>;
+type Meta = MetaObj<typeof SidebarItem>;
+
+export const Default: Story = {
+  args: {
+    label: 'Example Item',
+    link: '/example',
+  },
+};
+
+export default { component: SidebarItem } as Meta;

package/Containers/Sidebar/SidebarItem/index.tsx

@@ -0,0 +1,43 @@
+import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
+import classNames from 'classnames';
+import type { FC } from 'react';
+
+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,
+  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>
+
+    {/^https?:/.test(link) && <ArrowUpRightIcon className={styles.icon} />}
+  </BaseActiveLink>
+);
+
+export default SidebarItem;

package/Containers/Sidebar/index.module.css

@@ -1,48 +1,30 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .wrapper {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  gap: calc(var(--spacing, 0.25rem)*8);
-  overflow: auto;
-  border-right-style: var(--tw-border-style);
-  border-right-width: 0px;
-  border-color: var(--color-neutral-200, #e9edf0);
-  background-color: var(--color-white, #fff);
-  padding-inline: calc(var(--spacing, 0.25rem)*4);
-  padding-block: calc(var(--spacing, 0.25rem)*6);
-  @media (width >= 40rem) {
-    border-right-style: var(--tw-border-style);
-    border-right-width: 1px;
-  }
-  @media (width >= 48rem) {
-    max-width: var(--container-xs, 20rem);
-  }
-  @media (width >= 64rem) {
-    padding-inline: calc(var(--spacing, 0.25rem)*6);
-  }
-  &: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 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;
+
   .navigation {
-    display: none;
-    @media (width >= 40rem) {
-      display: flex;
-    }
+    @apply hidden
+      sm:flex;
   }
+
   .mobileSelect {
-    display: flex;
-    width: 100%;
-    @media (width >= 40rem) {
-      display: none;
-    }
+    @apply flex
+      w-full
+      sm:hidden;
   }
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}

package/Containers/Sidebar/index.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import Sidebar from '#ui/Containers/Sidebar';
+
+type Story = StoryObj<typeof Sidebar>;
+type Meta = MetaObj<typeof Sidebar>;
+
+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;