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

package/Containers/Footer/index.module.css

@@ -1,61 +1,46 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .footer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: calc(var(--spacing, 0.25rem)*6);
-  border-top-style: var(--tw-border-style);
-  border-top-width: 1px;
-  border-color: var(--color-neutral-200, #e9edf0);
-  background-color: var(--color-white, #fff);
-  padding-block: calc(var(--spacing, 0.25rem)*4);
-  @media (width >= 40rem) {
-    padding-inline: calc(var(--spacing, 0.25rem)*8);
-  }
-  @media (width >= 48rem) {
-    flex-direction: row;
-  }
-  @media (width >= 48rem) {
-    justify-content: space-between;
-  }
-  @media (width >= 48rem) {
-    padding-block: calc(var(--spacing, 0.25rem)*5);
-  }
-  &: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
+    flex-col
+    items-center
+    gap-6
+    border-t
+    border-neutral-200
+    bg-white
+    py-4
+    sm:px-8
+    md:flex-row
+    md:justify-between
+    md:py-5
+    dark:border-neutral-900
+    dark:bg-neutral-950;
+
   .sectionPrimary {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: flex-start;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--spacing, 0.25rem)*1);
-    align-self: stretch;
+    @apply flex
+      flex-wrap
+      content-start
+      items-center
+      justify-center
+      gap-1
+      self-stretch;
+
     a {
-      white-space: nowrap;
+      @apply whitespace-nowrap;
     }
   }
+
   .sectionSecondary {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: calc(var(--spacing, 0.25rem)*1);
-    @media (width >= 48rem) {
-      flex-direction: row;
-    }
+    @apply flex
+      flex-col
+      items-center
+      gap-1
+      md:flex-row;
+
     .social {
-      display: flex;
-      align-items: center;
-      gap: calc(var(--spacing, 0.25rem)*1);
+      @apply flex
+        items-center
+        gap-1;
     }
   }
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}

package/Containers/Footer/index.stories.tsx

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

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

@@ -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/Containers/MetaBar/index.module.css

@@ -1,123 +1,91 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .wrapper {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: calc(var(--spacing, 0.25rem)*8);
-  border-color: var(--color-neutral-200, #e9edf0);
-  padding-inline: calc(var(--spacing, 0.25rem)*4);
-  padding-block: calc(var(--spacing, 0.25rem)*6);
-  overflow-wrap: anywhere;
-  @media (width >= 64rem) {
-    position: sticky;
-  }
-  @media (width >= 64rem) {
-    top: calc(var(--spacing, 0.25rem)*0);
-  }
-  @media (width >= 64rem) {
-    max-height: 100vh;
-  }
-  @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);
-  }
+  @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 {
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    gap: calc(var(--spacing, 0.25rem)*1.5);
-    padding-bottom: calc(var(--spacing, 0.25rem)*12);
-    scrollbar-width: none;
-    @media (width >= 64rem) {
-      max-height: calc(100vh - var(--header-height));
-    }
-    @media (width >= 64rem) {
-      overflow-y: auto;
-    }
-    &::-webkit-scrollbar {
-      display: none;
-    }
+    @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 {
-    margin-bottom: 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-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 mb-2
+      text-sm
+      font-medium
+      text-neutral-800
+      dark:text-neutral-200;
   }
+
   dd {
-    margin-bottom: calc(var(--spacing, 0.25rem)*8);
-    display: flex;
-    align-items: center;
-    gap: 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));
-    color: var(--color-neutral-900, #2c3437);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: var(--color-white, #fff);
-    }
+    @apply mb-8
+      flex
+      items-center
+      gap-2
+      text-sm
+      text-neutral-900
+      dark:text-white;
+
     a {
-      --tw-font-weight: var(--font-weight-semibold, 600);
-      font-weight: var(--font-weight-semibold, 600);
-      color: var(--color-neutral-900, #2c3437);
-      text-decoration-line: underline;
-      @media (width < 670px) {
-        display: inline-block;
-      }
-      @media (width < 670px) {
-        padding-block: calc(var(--spacing, 0.25rem)*1);
-      }
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-white, #fff);
-      }
+      @apply max-xs:inline-block
+        max-xs:py-1
+        font-semibold
+        text-neutral-900
+        underline
+        dark:text-white;
+
       &:hover {
-        color: var(--color-neutral-800, #556066);
-        &:where([data-theme=dark], [data-theme=dark] *) {
-          color: var(--color-neutral-200, #e9edf0);
-        }
+        @apply text-neutral-800
+          dark:text-neutral-200;
       }
     }
+
     ol {
-      display: flex;
-      width: 100%;
-      list-style-type: none;
-      flex-direction: column;
-      gap: calc(var(--spacing, 0.25rem)*1.5);
-      padding: calc(var(--spacing, 0.25rem)*0);
+      @apply flex
+        w-full
+        list-none
+        flex-col
+        gap-1.5
+        p-0;
     }
+
     svg {
-      width: calc(var(--spacing, 0.25rem)*4);
-      height: calc(var(--spacing, 0.25rem)*4);
-      color: var(--color-neutral-600, #929fa5);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-neutral-400, #cbd4d9);
-      }
+      @apply size-4
+        text-neutral-600
+        dark:text-neutral-400;
     }
+
     &:last-child {
-      margin-bottom: calc(var(--spacing, 0.25rem)*0);
+      @apply mb-0;
     }
   }
+
   [data-on-dark] {
-    display: none;
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      display: block;
-    }
+    @apply hidden
+      dark:block;
   }
+
   [data-on-light] {
-    display: block;
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      display: none;
-    }
+    @apply block
+      dark:hidden;
   }
 }
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}

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