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

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

@@ -1,63 +0,0 @@
-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

@@ -1,91 +0,0 @@
-@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

@@ -1,80 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,60 +0,0 @@
-@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

@@ -1,38 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,125 +0,0 @@
-@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

@@ -1,45 +0,0 @@
-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

@@ -1,94 +0,0 @@
-'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;