@node-core/ui-components 1.0.1-a459447336d99556960d6f9e1c997327b29e4974 → 1.0.1-ab0ba1dcb1d91392c44e91b1e74e9f565e460543

package/src/Containers/MetaBar/__tests__/index.test.jsx

@@ -0,0 +1,63 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+
+import { render } from '@testing-library/react';
+
+import MetaBar from '..';
+
+describe('MetaBar', () => {
+  it('does not render h5s in the table of contents', () => {
+    const { queryByText, getByText } = render(
+      <MetaBar
+        items={{}}
+        headings={{
+          items: [
+            {
+              value: 'Heading Level 1',
+              depth: 1,
+              data: { id: 'heading-1' },
+            },
+            {
+              value: 'Heading Level 2',
+              depth: 2,
+              data: { id: 'heading-2' },
+            },
+            {
+              value: 'Heading Level 3',
+              depth: 3,
+              data: { id: 'heading-3' },
+            },
+            {
+              value: 'Heading Level 4',
+              depth: 4,
+              data: { id: 'heading-4' },
+            },
+            {
+              value: 'Heading Level 5',
+              depth: 5,
+              data: { id: 'heading-5' },
+            },
+            {
+              value: 'Heading Level 6',
+              depth: 6,
+              data: { id: 'heading-6' },
+            },
+          ],
+        }}
+      />
+    );
+
+    const h1Element = queryByText('Heading Level 1');
+    assert.ok(!h1Element?.ownerDocument);
+
+    getByText('Heading Level 2');
+    getByText('Heading Level 3');
+    getByText('Heading Level 4');
+
+    const h5Element = queryByText('Heading Level 5');
+    assert.ok(!h5Element?.ownerDocument);
+
+    const h6Element = queryByText('Heading Level 6');
+    assert.ok(!h6Element?.ownerDocument);
+  });
+});

package/src/Containers/MetaBar/index.module.css

@@ -0,0 +1,91 @@
+@reference "../../styles/index.css";
+
+.wrapper {
+  @apply flex
+    w-full
+    flex-col
+    items-start
+    gap-8
+    border-neutral-200
+    px-4
+    py-6
+    [overflow-wrap:anywhere]
+    lg:sticky
+    lg:top-0
+    lg:max-h-screen
+    lg:px-6
+    dark:border-neutral-900;
+
+  dl {
+    @apply flex
+      w-full
+      flex-col
+      gap-1.5
+      pb-12
+      [scrollbar-width:none]
+      lg:max-h-[calc(100vh-var(--header-height))]
+      lg:overflow-y-auto
+      [&::-webkit-scrollbar]:hidden;
+  }
+
+  dt {
+    @apply mb-2
+      text-sm
+      font-medium
+      text-neutral-800
+      dark:text-neutral-200;
+  }
+
+  dd {
+    @apply mb-8
+      flex
+      items-center
+      gap-2
+      text-sm
+      text-neutral-900
+      dark:text-white;
+
+    a {
+      @apply max-xs:inline-block
+        max-xs:py-1
+        font-semibold
+        text-neutral-900
+        underline
+        dark:text-white;
+
+      &:hover {
+        @apply text-neutral-800
+          dark:text-neutral-200;
+      }
+    }
+
+    ol {
+      @apply flex
+        w-full
+        list-none
+        flex-col
+        gap-1.5
+        p-0;
+    }
+
+    svg {
+      @apply size-4
+        text-neutral-600
+        dark:text-neutral-400;
+    }
+
+    &:last-child {
+      @apply mb-0;
+    }
+  }
+
+  [data-on-dark] {
+    @apply hidden
+      dark:block;
+  }
+
+  [data-on-light] {
+    @apply block
+      dark:hidden;
+  }
+}

package/src/Containers/MetaBar/index.stories.tsx

@@ -0,0 +1,80 @@
+import { CodeBracketIcon } from '@heroicons/react/24/outline';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import MetaBar from '#ui/Containers/MetaBar';
+import GitHubIcon from '#ui/Icons/Social/GitHub';
+
+type Story = StoryObj<typeof MetaBar>;
+type Meta = MetaObj<typeof MetaBar>;
+
+export const Default: Story = {
+  args: {
+    items: {
+      'components.metabar.lastUpdated': new Date(
+        '17 October 2023'
+      ).toLocaleDateString(),
+      'components.metabar.readingTime': '15 minutes',
+      'components.metabar.addedIn': 'v1.0.0',
+      'components.metabar.author': 'The Node.js Project',
+      'components.metabar.authors': <p>...</p>,
+      'components.metabar.contribute': (
+        <>
+          <GitHubIcon className="fill-neutral-700 dark:fill-neutral-100" />
+          <a href="/contribute">Edit this page</a>
+        </>
+      ),
+      'components.metabar.viewAs': (
+        <>
+          <CodeBracketIcon />
+          <a href="/json">JSON</a>
+        </>
+      ),
+    },
+    headings: {
+      items: [
+        {
+          value: 'OpenSSL update assessment, and Node.js project plans',
+          depth: 1,
+          data: { id: 'heading-1' },
+        },
+        {
+          value: 'Summary',
+          depth: 2,
+          data: { id: 'summary' },
+        },
+        {
+          value: 'Analysis',
+          depth: 2,
+          data: { id: 'analysis' },
+        },
+        {
+          value: 'The c_rehash script allows command injection (CVE-2022-2068)',
+          depth: 3,
+          data: { id: 'the_c_rehash' },
+        },
+        {
+          value: 'Contact and future updates',
+          depth: 3,
+          data: { id: 'contact_and_future_updates' },
+        },
+        {
+          value: 'Email',
+          depth: 4,
+          data: { id: 'email' },
+        },
+        {
+          value: 'Slack',
+          depth: 4,
+          data: { id: 'slack' },
+        },
+        {
+          value: '#node-website',
+          depth: 5, // h5s do not get shown
+          data: { id: 'node-website' },
+        },
+      ],
+    },
+  },
+};
+
+export default { component: MetaBar } as Meta;

package/src/Containers/MetaBar/index.tsx

@@ -0,0 +1,72 @@
+import type { Heading } from '@vcarl/remark-headings';
+import { Fragment, useMemo } from 'react';
+import type { FC } from 'react';
+
+import type { LinkLike } from '#ui/types';
+
+import styles from './index.module.css';
+
+type MetaBarProps = {
+  items: Partial<Record<string, React.ReactNode>>;
+  headings?: {
+    items: Array<Heading>;
+    minDepth?: number;
+  };
+  as?: LinkLike;
+  heading: string;
+};
+
+const MetaBar: FC<MetaBarProps> = ({
+  items,
+  headings,
+  as: Component = 'a',
+  heading,
+}) => {
+  // The default depth of headings to display in the table of contents.
+  const { minDepth = 2, items: headingItems = [] } = headings || {};
+
+  const filteredHeadings = useMemo(
+    () => headingItems.filter(({ depth }) => depth >= minDepth && depth <= 4),
+    [minDepth, headingItems]
+  );
+
+  return (
+    <div className={styles.wrapper}>
+      <dl>
+        {Object.entries(items)
+          .filter(([, value]) => !!value)
+          .map(([key, value]) => (
+            <Fragment key={key}>
+              <dt>{key}</dt>
+              <dd>{value}</dd>
+            </Fragment>
+          ))}
+
+        {filteredHeadings.length > 0 && (
+          <>
+            <dt>{heading}</dt>
+            <dd>
+              <ol>
+                {filteredHeadings.map(head => (
+                  <li
+                    key={head.value}
+                    className={
+                      head.depth === 3 ? 'pl-2' : head.depth === 4 ? 'pl-4' : ''
+                    }
+                  >
+                    <Component href={`#${head?.data?.id}`}>
+                      {' '}
+                      {head.value}
+                    </Component>
+                  </li>
+                ))}
+              </ol>
+            </dd>
+          </>
+        )}
+      </dl>
+    </div>
+  );
+};
+
+export default MetaBar;

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

@@ -0,0 +1,60 @@
+@reference "../../../styles/index.css";
+
+.navItem {
+  @apply inline-flex
+    items-center
+    gap-2
+    rounded-sm
+    px-3
+    py-2
+    motion-safe:transition-colors;
+
+  .label {
+    @apply text-base
+      font-medium
+      lg:text-sm;
+  }
+
+  .icon {
+    @apply size-3
+      text-neutral-500
+      dark:text-neutral-200;
+  }
+
+  &:hover {
+    @apply bg-neutral-100
+      dark:bg-neutral-900;
+  }
+
+  &.nav {
+    .label {
+      @apply text-neutral-900
+        dark:text-white;
+    }
+
+    &.active {
+      @apply bg-green-600;
+
+      .label {
+        @apply text-white;
+      }
+
+      .icon {
+        @apply text-white
+          opacity-50;
+      }
+    }
+  }
+
+  &.footer {
+    .label {
+      @apply text-neutral-800
+        dark:text-white;
+    }
+
+    &:hover {
+      @apply bg-neutral-100
+        dark:bg-neutral-900;
+    }
+  }
+}

package/src/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/src/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/src/Containers/NavBar/index.module.css

@@ -0,0 +1,125 @@
+@reference "../../styles/index.css";
+
+.container {
+  @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 {
+  @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 {
+  @apply absolute
+    right-4
+    -z-10
+    -translate-y-[200%]
+    appearance-none
+    opacity-0;
+}
+
+.nodeIconWrapper {
+  @apply h-[30px]
+    flex-1;
+}
+
+.navInteractionIcon,
+.sidebarItemToggler {
+  @apply size-6;
+}
+
+.sidebarItemTogglerLabel {
+  @apply block
+    cursor-pointer
+    lg:hidden;
+}
+
+.main {
+  @apply flex-1
+    flex-col
+    justify-between
+    gap-4
+    lg:flex
+    lg:flex-row
+    lg:items-center;
+}
+
+.navItems {
+  @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 {
+  @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 {
+  @apply my-px
+    mr-2
+    flex-grow
+    rounded-xl;
+
+  &:empty {
+    @apply h-10;
+  }
+}
+
+.ghIconWrapper {
+  @apply size-9
+    rounded-md
+    p-2;
+
+  svg {
+    @apply fill-neutral-700
+      dark:fill-neutral-300;
+  }
+
+  &:hover {
+    @apply bg-neutral-100
+      dark:bg-neutral-900;
+  }
+}

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