@node-core/ui-components 0.0.1 → 1.0.1-1d5a7f279720e5e4da66f43d06a6a9a14cb7c2d2

package/Common/Tooltip/index.stories.tsx

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

@@ -0,0 +1,48 @@
+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.module.css

@@ -0,0 +1,70 @@
+@reference "../../styles/index.css";
+
+.articleLayout {
+  @apply max-w-8xl
+    mx-auto
+    block
+    w-full
+    sm:grid
+    sm:grid-cols-[theme(spacing.52)_1fr]
+    sm:grid-rows-[1fr]
+    sm:overflow-visible
+    sm:[grid-template-areas:'sidebar_main''sidebar_footer']
+    md:grid-cols-[theme(spacing.64)_1fr]
+    lg:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
+    lg:[grid-template-areas:'sidebar_main_metabar''sidebar_footer_metabar']
+    xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)];
+
+  > *:nth-child(1) {
+    @apply [grid-area:sidebar]
+      lg:sticky
+      lg:top-0
+      lg:h-[100vh]
+      lg:overflow-y-auto;
+  }
+
+  > *:nth-child(2) {
+    @apply contents
+      sm:max-lg:block;
+
+    > *:first-child {
+      @apply sm:bg-gradient-subtle
+        sm:dark:bg-gradient-subtle-dark
+        xl:px-18
+        p-4
+        [grid-area:main]
+        motion-safe:scroll-smooth
+        sm:bg-fixed
+        sm:p-12;
+    }
+
+    > *:last-child {
+      @apply mt-8
+        border-t
+        [grid-area:metabar]
+        sm:mt-0
+        lg:sticky
+        lg:top-0
+        lg:max-w-xs
+        lg:border-l
+        lg:border-t-0;
+    }
+  }
+
+  > *:nth-child(3) {
+    @apply sticky
+      bottom-0
+      flex
+      w-full
+      flex-col
+      items-center
+      self-stretch
+      border-t
+      border-t-neutral-200
+      bg-white
+      py-4
+      [grid-area:footer]
+      dark:border-t-neutral-900
+      dark:bg-neutral-950;
+  }
+}

package/Containers/Article/index.stories.tsx

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

@@ -0,0 +1,9 @@
+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.module.css

@@ -0,0 +1,46 @@
+@reference "../../styles/index.css";
+
+.footer {
+  @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 {
+    @apply flex
+      flex-wrap
+      content-start
+      items-center
+      justify-center
+      gap-1
+      self-stretch;
+
+    a {
+      @apply whitespace-nowrap;
+    }
+  }
+
+  .sectionSecondary {
+    @apply flex
+      flex-col
+      items-center
+      gap-1
+      md:flex-row;
+
+    .social {
+      @apply flex
+        items-center
+        gap-1;
+    }
+  }
+}

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

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