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

package/src/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/src/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/src/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/src/Common/ThemeToggle/index.module.css

@@ -1,15 +0,0 @@
-@reference "../../styles/index.css";
-
-.themeToggle {
-  @apply size-9
-    rounded-md
-    p-2
-    text-neutral-700
-    motion-safe:transition-colors
-    dark:text-neutral-300;
-
-  &:hover {
-    @apply bg-neutral-100
-      dark:bg-neutral-900;
-  }
-}

package/src/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/src/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/src/Common/Tooltip/index.module.css

@@ -1,43 +0,0 @@
-@reference "../../styles/index.css";
-
-.content {
-  @apply rounded-md
-    border
-    bg-white
-    text-sm
-    font-medium
-    text-neutral-900
-    shadow-lg
-    dark:bg-neutral-950
-    dark:text-white;
-
-  &.default {
-    @apply border-neutral-200
-      dark:border-neutral-900;
-
-    .arrow {
-      @apply fill-neutral-200
-        dark:fill-neutral-900;
-    }
-  }
-
-  &.error {
-    @apply border-danger-400
-      dark:border-danger-900;
-
-    .arrow {
-      @apply fill-danger-400
-        dark:fill-danger-900;
-    }
-  }
-
-  &.warning {
-    @apply border-warning-400
-      dark:border-warning-900;
-
-    .arrow {
-      @apply fill-warning-400
-        dark:fill-warning-900;
-    }
-  }
-}

package/src/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/src/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/src/Containers/Article/index.module.css

@@ -1,70 +0,0 @@
-@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/src/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/src/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/src/Containers/Footer/index.module.css

@@ -1,46 +0,0 @@
-@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/src/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/src/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;