@node-core/ui-components 1.0.1-ed840c2c5b3a7f7a58ec6d75280c2b34129fb5dc → 1.0.1-f1580a0a3365d3d4d0236b80ce9eff447d2890dd

package/Common/ThemeToggle/__tests__/index.test.jsx

@@ -1,35 +0,0 @@
-import { describe, it, beforeEach } from 'node:test';
-import assert from 'node:assert/strict';
-
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import ThemeToggle from '../';
-
-let mockCurrentTheme = 'light';
-
-const toggleTheme = () => {
-  mockCurrentTheme = mockCurrentTheme === 'light' ? 'dark' : 'light';
-};
-
-describe('ThemeToggle', () => {
-  let toggle;
-
-  beforeEach(() => {
-    mockCurrentTheme = 'light';
-
-    render(<ThemeToggle onClick={toggleTheme} />);
-    toggle = screen.getByRole('button');
-  });
-
-  it('switches dark theme to light theme', async () => {
-    mockCurrentTheme = 'dark';
-    await userEvent.click(toggle);
-    assert.equal(mockCurrentTheme, 'light');
-  });
-
-  it('switches light theme to dark theme', async () => {
-    await userEvent.click(toggle);
-    assert.equal(mockCurrentTheme, 'dark');
-  });
-});

package/Common/ThemeToggle/index.stories.tsx

@@ -1,10 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import ThemeToggle from '#ui/Common/ThemeToggle';
-
-type Story = StoryObj<typeof ThemeToggle>;
-type Meta = MetaObj<typeof ThemeToggle>;
-
-export const Default: Story = {};
-
-export default { component: ThemeToggle } as Meta;

package/Common/ThemeToggle/index.tsx

@@ -1,15 +0,0 @@
-import { MoonIcon, SunIcon } from '@heroicons/react/24/outline';
-import type { FC, ButtonHTMLAttributes } from 'react';
-
-import styles from './index.module.css';
-
-const ThemeToggle: FC<ButtonHTMLAttributes<HTMLButtonElement>> = props => {
-  return (
-    <button type="button" className={styles.themeToggle} {...props}>
-      <MoonIcon className="block dark:hidden" height="20" />
-      <SunIcon className="hidden dark:block" height="20" />
-    </button>
-  );
-};
-
-export default ThemeToggle;

package/Common/Tooltip/index.stories.tsx

@@ -1,73 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import Tooltip from '#ui/Common/Tooltip';
-
-type Story = StoryObj<typeof Tooltip>;
-type Meta = MetaObj<typeof Tooltip>;
-
-const defaultProps = {
-  children: <a>Rocket Turtle</a>,
-  content: <div className="p-3">🚀 🐢</div>,
-};
-
-export const Default: Story = {
-  args: defaultProps,
-};
-
-export const Warning: Story = {
-  args: {
-    ...defaultProps,
-    kind: 'warning',
-  },
-};
-
-export const Error: Story = {
-  args: {
-    ...defaultProps,
-    kind: 'error',
-  },
-};
-
-export const LeftSide: Story = {
-  args: {
-    ...defaultProps,
-    side: 'left',
-  },
-  decorators: [
-    Story => (
-      <div className="flex w-72 justify-end">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const RightSide: Story = {
-  args: {
-    ...defaultProps,
-    side: 'left',
-  },
-  decorators: [
-    Story => (
-      <div className="flex w-72 justify-start">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const TopSide: Story = {
-  args: {
-    ...defaultProps,
-    side: 'top',
-  },
-  decorators: [
-    Story => (
-      <div className="flex h-72 items-end">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default { component: Tooltip } as Meta;

package/Common/Tooltip/index.tsx

@@ -1,48 +0,0 @@
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import classNames from 'classnames';
-import type { FC, PropsWithChildren, ReactNode } from 'react';
-
-import styles from './index.module.css';
-
-type TooltipProps = {
-  asChild?: boolean;
-  content: ReactNode;
-  kind?: 'default' | 'warning' | 'error';
-  side?: TooltipPrimitive.TooltipContentProps['side'];
-  container?: HTMLElement | null;
-};
-
-const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
-  kind = 'default',
-  children,
-  content,
-  asChild = false,
-  side = 'bottom',
-  container,
-}) => (
-  <TooltipPrimitive.Provider delayDuration={200}>
-    <TooltipPrimitive.Root>
-      <TooltipPrimitive.Trigger asChild={asChild}>
-        {children}
-      </TooltipPrimitive.Trigger>
-      <TooltipPrimitive.Portal container={container}>
-        <TooltipPrimitive.Content
-          side={side}
-          sideOffset={4}
-          className={classNames(styles[kind], styles.content, {
-            'mx-1.5': side === 'top' || side === 'bottom',
-          })}
-        >
-          {content}
-          <TooltipPrimitive.Arrow
-            className={styles.arrow}
-            width={14}
-            height={6}
-          />
-        </TooltipPrimitive.Content>
-      </TooltipPrimitive.Portal>
-    </TooltipPrimitive.Root>
-  </TooltipPrimitive.Provider>
-);
-
-export default Tooltip;

package/Containers/Article/index.stories.tsx

@@ -1,39 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import Article from '.';
-
-type Story = StoryObj<typeof Article>;
-type Meta = MetaObj<typeof Article>;
-
-const Sidebar = () => (
-  <div className="text-center">
-    <h3>Sidebar</h3>
-    <ul>
-      <li>Navigation Item 1</li>
-      <li>Navigation Item 2</li>
-      <li>Navigation Item 3</li>
-      <li>Navigation Item 4</li>
-    </ul>
-  </div>
-);
-
-export const Default: Story = {
-  args: {
-    children: (
-      <>
-        <Sidebar />
-        <div>
-          <main>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            </p>
-          </main>
-          <Sidebar />
-        </div>
-      </>
-    ),
-  },
-};
-
-export default { component: Article } as Meta;

package/Containers/Article/index.tsx

@@ -1,9 +0,0 @@
-import type { FC, PropsWithChildren } from 'react';
-
-import styles from './index.module.css';
-
-const ArticleLayout: FC<PropsWithChildren> = ({ children }) => (
-  <div className={styles.articleLayout}>{children}</div>
-);
-
-export default ArticleLayout;

package/Containers/Footer/index.stories.tsx

@@ -1,27 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import Footer from '#ui/Containers/Footer';
-
-type Story = StoryObj<typeof Footer>;
-type Meta = MetaObj<typeof Footer>;
-
-export const Default: Story = {
-  args: {
-    navigation: {
-      footerLinks: [
-        { link: '/', text: 'Home' },
-        { link: 'https://openjsf.org', text: 'OpenJS Foundation' },
-      ],
-      socialLinks: [
-        { icon: 'github', link: 'https://github.com' },
-        { icon: 'mastodon', link: 'https://mastodon.social' },
-        { icon: 'twitter', link: 'https://twitter.com' },
-        { icon: 'slack', link: 'https://slack.com' },
-        { icon: 'linkedin', link: 'https://linkedin.com' },
-        { icon: 'bluesky', link: 'https://bsky.app' },
-      ],
-    },
-  },
-};
-
-export default { component: Footer } as Meta;

package/Containers/Footer/index.tsx

@@ -1,95 +0,0 @@
-'use client';
-
-import type { FC, SVGProps } from 'react';
-
-import NavItem from '#ui/Containers/NavBar/NavItem';
-import {
-  Bluesky,
-  Discord,
-  GitHub,
-  LinkedIn,
-  Mastodon,
-  Slack,
-  X,
-} from '#ui/Icons/Social';
-import type { LinkLike } from '#ui/types';
-
-import styles from './index.module.css';
-
-const footerSocialIcons: Record<string, React.FC<SVGProps<SVGSVGElement>>> = {
-  github: GitHub,
-  mastodon: Mastodon,
-  twitter: X,
-  slack: Slack,
-  linkedin: LinkedIn,
-  bluesky: Bluesky,
-  discord: Discord,
-};
-
-type Navigation = {
-  socialLinks: Array<{
-    icon: string;
-    link: string;
-  }>;
-  footerLinks: Array<{
-    text: string;
-    link: string;
-  }>;
-};
-
-const Footer: FC<{
-  pathname: string;
-  as: LinkLike;
-  navigation: Navigation;
-}> = ({ pathname = '/', as = 'a', navigation }) => {
-  const openJSlink = navigation.footerLinks.at(-1)!;
-
-  return (
-    <footer className={styles.footer}>
-      <div className={styles.sectionPrimary}>
-        {navigation.footerLinks.slice(0, -1).map(item => (
-          <NavItem
-            key={item.link}
-            type="footer"
-            href={item.link}
-            as={as}
-            pathname={pathname}
-          >
-            {item.text}
-          </NavItem>
-        ))}
-      </div>
-
-      <div className={styles.sectionSecondary}>
-        <NavItem
-          type="footer"
-          href={openJSlink.link}
-          as={as}
-          pathname={pathname}
-        >
-          &copy; {openJSlink.text}
-        </NavItem>
-
-        <div className={styles.social}>
-          {navigation.socialLinks.map(link => {
-            const SocialIcon = footerSocialIcons[link.icon];
-
-            return (
-              <NavItem
-                key={link.icon}
-                href={link.link}
-                type="footer"
-                as={as}
-                pathname={pathname}
-              >
-                <SocialIcon width={20} height={20} aria-label={link.link} />
-              </NavItem>
-            );
-          })}
-        </div>
-      </div>
-    </footer>
-  );
-};
-
-export default Footer;

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