@node-core/ui-components 1.0.1-a0f03ae69979a5fea7c16262ff88cbeef11452c2 → 1.0.1-a356572cf397450a3eeeb973d6fe6d6803a24059

package/Common/Skeleton/index.tsx

@@ -1,39 +0,0 @@
-import classNames from 'classnames';
-import type { FC, PropsWithChildren } from 'react';
-import { isValidElement } from 'react';
-
-import styles from './index.module.css';
-
-type SkeletonProps = { hide?: boolean; loading?: boolean; className?: string };
-
-const Skeleton: FC<PropsWithChildren<SkeletonProps>> = ({
-  children,
-  className,
-  hide = false,
-  loading = true,
-}) => {
-  // This can be used to completely hide the children after the Skeleton has loaded
-  // If certain criterias do not match. This is useful for conditional rendering without
-  // changing the actual tree that the Skeleton is wrapping
-  if (!loading && hide) {
-    return null;
-  }
-
-  // If we finished loading, we can hide the Skeleton and render the children tree
-  if (!loading) {
-    return children;
-  }
-
-  return (
-    <span
-      tabIndex={-1}
-      aria-hidden="true"
-      className={classNames(styles.skeleton, className)}
-      data-inline-skeleton={isValidElement(children) ? undefined : true}
-    >
-      {children}
-    </span>
-  );
-};
-
-export default Skeleton;

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

@@ -1,52 +0,0 @@
-import { describe, it } from 'node:test';
-import assert from 'node:assert/strict';
-
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import Tabs from '../index';
-
-const Sut = ({ addons }) => {
-  const tabs = [
-    { key: 'package', label: 'Package Manager' },
-    { key: 'prebuilt', label: 'Prebuilt Installer' },
-    { key: 'source', label: 'Source Code' },
-  ];
-
-  return (
-    <Tabs tabs={tabs} defaultValue="package" addons={addons}>
-      <TabsPrimitive.Content value="package">
-        Package Manager
-      </TabsPrimitive.Content>
-      <TabsPrimitive.Content value="prebuilt">
-        Prebuilt Installer
-      </TabsPrimitive.Content>
-      <TabsPrimitive.Content value="source">Source Code</TabsPrimitive.Content>
-    </Tabs>
-  );
-};
-
-describe('Tabs', () => {
-  it('should render the correct number of tabs', async () => {
-    render(<Sut />);
-
-    assert.strictEqual(screen.getAllByRole('tab').length, 3);
-  });
-
-  it('should render the correct tab content when clicked', async () => {
-    render(<Sut />);
-
-    assert.equal(screen.getByRole('tabpanel').textContent, 'Package Manager');
-
-    await userEvent.click(screen.getByRole('tab', { name: 'Source Code' }));
-
-    assert.equal(screen.getByRole('tabpanel').textContent, 'Source Code');
-  });
-
-  it('should render the given addons', async () => {
-    render(<Sut addons={<a href="/">addon</a>} />);
-
-    assert.ok(screen.getByRole('link', { name: 'addon' }).ownerDocument);
-  });
-});

package/Common/Tabs/index.stories.tsx

@@ -1,50 +0,0 @@
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-import type { ComponentProps } from 'react';
-
-import Tabs from '#ui/Common/Tabs';
-
-type Story = StoryObj<typeof Tabs>;
-type Meta = MetaObj<typeof Tabs>;
-
-const defaultArgs: ComponentProps<typeof Tabs> = {
-  defaultValue: 'prebuilt',
-  tabs: [
-    {
-      key: 'package',
-      label: 'Package Manager',
-    },
-    {
-      key: 'prebuilt',
-      label: 'Prebuilt Installer',
-    },
-    {
-      key: 'source',
-      label: 'Source Code',
-    },
-  ],
-  children: (
-    <>
-      <TabsPrimitive.Content value="package">
-        Package Manager
-      </TabsPrimitive.Content>
-      <TabsPrimitive.Content value="prebuilt">
-        Prebuilt Installer
-      </TabsPrimitive.Content>
-      <TabsPrimitive.Content value="source">Source Code</TabsPrimitive.Content>
-    </>
-  ),
-};
-
-export const Default: Story = {
-  args: defaultArgs,
-};
-
-export const WithAddon: Story = {
-  args: {
-    ...defaultArgs,
-    addons: 'addon',
-  },
-};
-
-export default { component: Tabs } as Meta;

package/Common/Tabs/index.tsx

@@ -1,54 +0,0 @@
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import classNames from 'classnames';
-import type { FC, PropsWithChildren, ReactNode } from 'react';
-
-import styles from './index.module.css';
-
-type Tab = {
-  key: string;
-  label: string;
-  secondaryLabel?: string;
-  value?: string;
-};
-
-type TabsProps = TabsPrimitive.TabsProps & {
-  tabs: Array<Tab>;
-  addons?: ReactNode;
-  triggerClassName?: string;
-};
-
-const Tabs: FC<PropsWithChildren<TabsProps>> = ({
-  tabs,
-  addons,
-  triggerClassName,
-  children,
-  ...props
-}) => (
-  <TabsPrimitive.Root
-    {...props}
-    className={classNames(styles.tabsRoot, props.className)}
-  >
-    <TabsPrimitive.List className={styles.tabsList}>
-      {tabs.map(tab => (
-        <TabsPrimitive.Trigger
-          key={tab.key}
-          value={tab.value ?? tab.key}
-          className={classNames(styles.tabsTrigger, triggerClassName)}
-        >
-          {tab.label}
-          {tab.secondaryLabel ? (
-            <span className={styles.tabSecondaryLabel}>
-              {tab.secondaryLabel}
-            </span>
-          ) : null}
-        </TabsPrimitive.Trigger>
-      ))}
-
-      {addons && <div className={styles.addons}>{addons}</div>}
-    </TabsPrimitive.List>
-
-    {children}
-  </TabsPrimitive.Root>
-);
-
-export default Tabs;

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);
-  });
-});