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

package/Containers/NavBar/NavItem/index.module.css

@@ -1,74 +1,60 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../../styles/index.css";
+
 .navItem {
-  display: inline-flex;
-  align-items: center;
-  gap: calc(var(--spacing, 0.25rem)*2);
-  border-radius: var(--radius-sm, 0.25rem);
-  padding-inline: calc(var(--spacing, 0.25rem)*3);
-  padding-block: calc(var(--spacing, 0.25rem)*2);
-  @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));
-  }
+  @apply inline-flex
+    items-center
+    gap-2
+    rounded-sm
+    px-3
+    py-2
+    motion-safe:transition-colors;
+
   .label {
-    font-size: var(--text-base, 1rem);
-    line-height: var(--tw-leading, var(--text-base--line-height, 1.5));
-    --tw-font-weight: var(--font-weight-medium, 500);
-    font-weight: var(--font-weight-medium, 500);
-    @media (width >= 64rem) {
-      font-size: var(--text-sm, 0.875rem);
-      line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
-    }
+    @apply text-base
+      font-medium
+      lg:text-sm;
   }
+
   .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;
   }
+
   &:hover {
-    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;
   }
+
   &.nav {
     .label {
-      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;
     }
+
     &.active {
-      background-color: var(--color-green-600, #417e38);
+      @apply bg-green-600;
+
       .label {
-        color: var(--color-white, #fff);
+        @apply text-white;
       }
+
       .icon {
-        color: var(--color-white, #fff);
-        opacity: 50%;
+        @apply text-white
+          opacity-50;
       }
     }
   }
+
   &.footer {
     .label {
-      color: var(--color-neutral-800, #556066);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-white, #fff);
-      }
+      @apply text-neutral-800
+        dark:text-white;
     }
+
     &:hover {
-      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;
     }
   }
 }
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}

package/Containers/NavBar/NavItem/index.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import NavItem from '#ui/Containers/NavBar/NavItem';
+
+type Story = StoryObj<typeof NavItem>;
+type Meta = MetaObj<typeof NavItem>;
+
+export const Default: Story = {
+  args: {
+    href: '/learn',
+    children: 'Learn',
+  },
+};
+
+export const WithExternalLink: Story = {
+  args: {
+    href: 'https://nodejs.org/en',
+    children: 'Learn',
+    target: '_blank',
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    href: 'https://nodejs.org/en',
+    children: <b>Learn</b>,
+  },
+};
+
+export const FooterItem: Story = {
+  args: {
+    href: '/about',
+    children: 'Trademark Policy',
+    type: 'footer',
+  },
+};
+
+export default { component: NavItem } as Meta;

package/Containers/NavBar/NavItem/index.tsx

@@ -0,0 +1,44 @@
+import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
+import classNames from 'classnames';
+import type { FC, HTMLAttributeAnchorTarget, PropsWithChildren } from 'react';
+
+import BaseActiveLink from '#ui/Common/BaseActiveLink';
+import type { LinkLike } from '#ui/types';
+
+import styles from './index.module.css';
+
+type NavItemType = 'nav' | 'footer';
+
+type NavItemProps = {
+  href: string;
+  type?: NavItemType;
+  className?: string;
+  target?: HTMLAttributeAnchorTarget | undefined;
+
+  pathname: string;
+  as: LinkLike;
+};
+
+const NavItem: FC<PropsWithChildren<NavItemProps>> = ({
+  href = '',
+  type = 'nav',
+  children,
+  className,
+  target,
+  ...props
+}) => (
+  <BaseActiveLink
+    target={target}
+    href={href}
+    className={classNames(styles.navItem, styles[type], className)}
+    activeClassName={styles.active}
+    allowSubPath={href.startsWith('/')}
+    {...props}
+  >
+    <span className={styles.label}>{children}</span>
+
+    {target === '_blank' && <ArrowUpRightIcon className={styles.icon} />}
+  </BaseActiveLink>
+);
+
+export default NavItem;

package/Containers/NavBar/index.module.css

@@ -1,205 +1,125 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .container {
-  border-color: var(--color-neutral-200, #e9edf0);
-  background-color: var(--color-white, #fff);
-  @media (width >= 64rem) {
-    display: flex;
-  }
-  @media (width >= 64rem) {
-    height: calc(var(--spacing, 0.25rem)*16);
-  }
-  @media (width >= 64rem) {
-    flex-direction: row;
-  }
-  @media (width >= 64rem) {
-    align-items: center;
-  }
-  @media (width >= 64rem) {
-    gap: calc(var(--spacing, 0.25rem)*8);
-  }
-  @media (width >= 64rem) {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 1px;
-  }
-  @media (width >= 64rem) {
-    padding-inline: calc(var(--spacing, 0.25rem)*8);
-  }
-  &: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 border-neutral-200
+    bg-white
+    lg:flex
+    lg:h-16
+    lg:flex-row
+    lg:items-center
+    lg:gap-8
+    lg:border-b
+    lg:px-8
+    dark:border-neutral-900
+    dark:bg-neutral-950;
 }
+
 .nodeIconAndMobileItemsToggler {
-  display: flex;
-  height: calc(var(--spacing, 0.25rem)*16);
-  flex-shrink: 0;
-  align-items: center;
-  border-bottom-style: var(--tw-border-style);
-  border-bottom-width: 1px;
-  border-color: var(--color-neutral-200, #e9edf0);
-  padding-inline: calc(var(--spacing, 0.25rem)*4);
-  @media (width >= 64rem) {
-    display: flex;
-  }
-  @media (width >= 64rem) {
-    height: 100%;
-  }
-  @media (width >= 64rem) {
-    align-items: center;
-  }
-  @media (width >= 64rem) {
-    border-style: var(--tw-border-style);
-    border-width: 0px;
-  }
-  @media (width >= 64rem) {
-    padding-inline: calc(var(--spacing, 0.25rem)*0);
-  }
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    border-color: var(--color-neutral-900, #2c3437);
-  }
+  @apply flex
+    h-16
+    shrink-0
+    items-center
+    border-b
+    border-neutral-200
+    px-4
+    lg:flex
+    lg:h-full
+    lg:items-center
+    lg:border-0
+    lg:px-0
+    dark:border-neutral-900;
 }
+
 .sidebarItemToggler {
-  position: absolute;
-  right: calc(var(--spacing, 0.25rem)*4);
-  z-index: -10;
-  --tw-translate-y: -200%;
-  translate: var(--tw-translate-x) var(--tw-translate-y);
-  appearance: none;
-  opacity: 0%;
+  @apply absolute
+    right-4
+    -z-10
+    -translate-y-[200%]
+    appearance-none
+    opacity-0;
 }
+
 .nodeIconWrapper {
-  height: 30px;
-  flex: 1;
+  @apply h-[30px]
+    flex-1;
 }
+
 .navInteractionIcon,
 .sidebarItemToggler {
-  width: calc(var(--spacing, 0.25rem)*6);
-  height: calc(var(--spacing, 0.25rem)*6);
+  @apply size-6;
 }
+
 .sidebarItemTogglerLabel {
-  display: block;
-  cursor: pointer;
-  @media (width >= 64rem) {
-    display: none;
-  }
+  @apply block
+    cursor-pointer
+    lg:hidden;
 }
+
 .main {
-  flex: 1;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: calc(var(--spacing, 0.25rem)*4);
-  @media (width >= 64rem) {
-    display: flex;
-  }
-  @media (width >= 64rem) {
-    flex-direction: row;
-  }
-  @media (width >= 64rem) {
-    align-items: center;
-  }
+  @apply flex-1
+    flex-col
+    justify-between
+    gap-4
+    lg:flex
+    lg:flex-row
+    lg:items-center;
 }
+
 .navItems {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--spacing, 0.25rem)*0);
-  border-bottom-style: var(--tw-border-style);
-  border-bottom-width: 1px;
-  border-color: var(--color-neutral-200, #e9edf0);
-  padding: calc(var(--spacing, 0.25rem)*4);
-  @media (width >= 64rem) {
-    flex: 1;
-  }
-  @media (width >= 64rem) {
-    flex-direction: row;
-  }
-  @media (width >= 64rem) {
-    gap: calc(var(--spacing, 0.25rem)*1);
-  }
-  @media (width >= 64rem) {
-    border-style: var(--tw-border-style);
-    border-width: 0px;
-  }
-  @media (width >= 64rem) {
-    padding: calc(var(--spacing, 0.25rem)*0);
-  }
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    border-color: var(--color-neutral-900, #2c3437);
-  }
+  @apply flex
+    flex-col
+    gap-0
+    border-b
+    border-neutral-200
+    p-4
+    lg:flex-1
+    lg:flex-row
+    lg:gap-1
+    lg:border-0
+    lg:p-0
+    dark:border-neutral-900;
 }
+
 .actionsWrapper {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: calc(var(--spacing, 0.25rem)*2);
-  border-bottom-style: var(--tw-border-style);
-  border-bottom-width: 1px;
-  border-color: var(--color-neutral-200, #e9edf0);
-  padding: calc(var(--spacing, 0.25rem)*4);
-  @media (width >= 40rem) {
-    flex-wrap: nowrap;
-  }
-  @media (width >= 64rem) {
-    flex-basis: calc(var(--spacing, 0.25rem)*96);
-  }
-  @media (width >= 64rem) {
-    border-style: var(--tw-border-style);
-    border-width: 0px;
-  }
-  @media (width >= 64rem) {
-    padding: calc(var(--spacing, 0.25rem)*0);
-  }
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    border-color: var(--color-neutral-900, #2c3437);
-  }
+  @apply flex
+    flex-row
+    flex-wrap
+    items-center
+    justify-between
+    gap-2
+    border-b
+    border-neutral-200
+    p-4
+    sm:flex-nowrap
+    lg:basis-96
+    lg:border-0
+    lg:p-0
+    dark:border-neutral-900;
 }
+
 span.searchButtonSkeleton {
-  margin-block: 1px;
-  margin-right: calc(var(--spacing, 0.25rem)*2);
-  flex-grow: 1;
-  border-radius: var(--radius-xl, 0.75rem);
+  @apply my-px
+    mr-2
+    flex-grow
+    rounded-xl;
+
   &:empty {
-    height: calc(var(--spacing, 0.25rem)*10);
+    @apply h-10;
   }
 }
+
 .ghIconWrapper {
-  width: calc(var(--spacing, 0.25rem)*9);
-  height: calc(var(--spacing, 0.25rem)*9);
-  border-radius: var(--radius-md, 0.375rem);
-  padding: calc(var(--spacing, 0.25rem)*2);
+  @apply size-9
+    rounded-md
+    p-2;
+
   svg {
-    fill: var(--color-neutral-700, #6e7b83);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      fill: var(--color-neutral-300, #d9e1e4);
-    }
+    @apply fill-neutral-700
+      dark:fill-neutral-300;
   }
+
   &:hover {
-    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;
   }
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-translate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}

package/Containers/NavBar/index.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import NavBar from '#ui/Containers/NavBar';
+
+type Story = StoryObj<typeof NavBar>;
+type Meta = MetaObj<typeof NavBar>;
+
+export const Default: Story = {
+  args: {
+    as: 'a',
+    Logo: 'a',
+    pathname: '/',
+
+    children: <a>Some other child</a>,
+
+    navItems: [
+      {
+        text: 'Learn',
+        link: '/',
+      },
+      {
+        text: 'About',
+        link: '/about',
+      },
+      {
+        text: 'Docs',
+        link: '/docs',
+      },
+      {
+        text: 'Download',
+        link: '/download',
+      },
+      {
+        text: 'Blog',
+        link: '/blog',
+      },
+      {
+        text: 'Certification',
+        link: 'https://openjsf.org/certification',
+      },
+    ],
+  },
+};
+
+export default { component: NavBar } as Meta;

package/Containers/NavBar/index.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import Hamburger from '@heroicons/react/24/solid/Bars3Icon';
+import XMark from '@heroicons/react/24/solid/XMarkIcon';
+import * as Label from '@radix-ui/react-label';
+import classNames from 'classnames';
+import { useState } from 'react';
+import type {
+  FC,
+  HTMLAttributeAnchorTarget,
+  PropsWithChildren,
+  ElementType,
+} from 'react';
+
+import NavItem from '#ui/Containers/NavBar/NavItem';
+import type { FormattedMessage, LinkLike } from '#ui/types';
+
+import style from './index.module.css';
+
+const navInteractionIcons = {
+  show: <Hamburger className={style.navInteractionIcon} />,
+  close: <XMark className={style.navInteractionIcon} />,
+};
+
+type NavbarProps = {
+  navItems: Array<{
+    text: FormattedMessage;
+    link: string;
+    target?: HTMLAttributeAnchorTarget | undefined;
+  }>;
+  Logo: ElementType;
+  as: LinkLike;
+  pathname: string;
+  sidebarItemTogglerAriaLabel: string;
+};
+
+const NavBar: FC<PropsWithChildren<NavbarProps>> = ({
+  children,
+  Logo,
+  as: Component = 'a',
+  navItems,
+  pathname,
+  sidebarItemTogglerAriaLabel,
+}) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  return (
+    <nav className={style.container}>
+      <div className={style.nodeIconAndMobileItemsToggler}>
+        <Component className={style.nodeIconWrapper} href="/" aria-label="Home">
+          <Logo />
+        </Component>
+
+        <Label.Root
+          className={style.sidebarItemTogglerLabel}
+          htmlFor="sidebarItemToggler"
+          role="button"
+          aria-label={sidebarItemTogglerAriaLabel}
+        >
+          {navInteractionIcons[isMenuOpen ? 'close' : 'show']}
+        </Label.Root>
+      </div>
+
+      <input
+        className={classNames(['peer', style.sidebarItemToggler])}
+        id="sidebarItemToggler"
+        type="checkbox"
+        onChange={e => setIsMenuOpen(() => e.target.checked)}
+        aria-label={sidebarItemTogglerAriaLabel}
+        tabIndex={-1}
+      />
+
+      <div className={`${style.main} hidden peer-checked:flex`}>
+        <div className={style.navItems}>
+          {navItems.map(({ text, link, target }) => (
+            <NavItem
+              pathname={pathname}
+              as={Component}
+              key={link}
+              href={link}
+              target={target}
+            >
+              {text}
+            </NavItem>
+          ))}
+        </div>
+
+        <div className={style.actionsWrapper}>{children}</div>
+      </div>
+    </nav>
+  );
+};
+
+export default NavBar;

package/Containers/Sidebar/ProgressionIcon/index.tsx

@@ -0,0 +1,16 @@
+import type { FC, SVGAttributes } from 'react';
+
+const ProgressionIcon: FC<SVGAttributes<SVGSVGElement>> = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="18"
+    viewBox="0 0 16 18"
+    fill="none"
+    {...props}
+  >
+    <path d="M9 3.26795L8 2.6906L7 3.26795L3.5359 5.26795L2.5359 5.8453V7V11V12.1547L3.5359 12.7321L7 14.7321L8 15.3094L9 14.7321L12.4641 12.7321L13.4641 12.1547V11V7V5.8453L12.4641 5.26795L9 3.26795Z" />
+  </svg>
+);
+
+export default ProgressionIcon;