@node-core/ui-components 0.0.1 → 1.0.1-df203d0fe21ee5d80d258c60dc821e8ac0601ce4

package/Containers/NavBar/index.module.css

@@ -0,0 +1,125 @@
+@reference "../../styles/index.css";
+
+.container {
+  @apply border-neutral-200
+    bg-white
+    lg:flex
+    lg:h-16
+    lg:flex-row
+    lg:items-center
+    lg:gap-8
+    lg:border-b
+    lg:px-8
+    dark:border-neutral-900
+    dark:bg-neutral-950;
+}
+
+.nodeIconAndMobileItemsToggler {
+  @apply flex
+    h-16
+    shrink-0
+    items-center
+    border-b
+    border-neutral-200
+    px-4
+    lg:flex
+    lg:h-full
+    lg:items-center
+    lg:border-0
+    lg:px-0
+    dark:border-neutral-900;
+}
+
+.sidebarItemToggler {
+  @apply absolute
+    right-4
+    -z-10
+    -translate-y-[200%]
+    appearance-none
+    opacity-0;
+}
+
+.nodeIconWrapper {
+  @apply h-[30px]
+    flex-1;
+}
+
+.navInteractionIcon,
+.sidebarItemToggler {
+  @apply size-6;
+}
+
+.sidebarItemTogglerLabel {
+  @apply block
+    cursor-pointer
+    lg:hidden;
+}
+
+.main {
+  @apply flex-1
+    flex-col
+    justify-between
+    gap-4
+    lg:flex
+    lg:flex-row
+    lg:items-center;
+}
+
+.navItems {
+  @apply flex
+    flex-col
+    gap-0
+    border-b
+    border-neutral-200
+    p-4
+    lg:flex-1
+    lg:flex-row
+    lg:gap-1
+    lg:border-0
+    lg:p-0
+    dark:border-neutral-900;
+}
+
+.actionsWrapper {
+  @apply flex
+    flex-row
+    flex-wrap
+    items-center
+    justify-between
+    gap-2
+    border-b
+    border-neutral-200
+    p-4
+    sm:flex-nowrap
+    lg:basis-96
+    lg:border-0
+    lg:p-0
+    dark:border-neutral-900;
+}
+
+span.searchButtonSkeleton {
+  @apply my-px
+    mr-2
+    flex-grow
+    rounded-xl;
+
+  &:empty {
+    @apply h-10;
+  }
+}
+
+.ghIconWrapper {
+  @apply size-9
+    rounded-md
+    p-2;
+
+  svg {
+    @apply fill-neutral-700
+      dark:fill-neutral-300;
+  }
+
+  &:hover {
+    @apply bg-neutral-100
+      dark:bg-neutral-900;
+  }
+}

package/Containers/NavBar/index.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import NavBar from '#ui/Containers/NavBar';
+
+type Story = StoryObj<typeof NavBar>;
+type Meta = MetaObj<typeof NavBar>;
+
+export const Default: Story = {
+  args: {
+    as: 'a',
+    Logo: 'a',
+    pathname: '/',
+
+    children: <a>Some other child</a>,
+
+    navItems: [
+      {
+        text: 'Learn',
+        link: '/',
+      },
+      {
+        text: 'About',
+        link: '/about',
+      },
+      {
+        text: 'Docs',
+        link: '/docs',
+      },
+      {
+        text: 'Download',
+        link: '/download',
+      },
+      {
+        text: 'Blog',
+        link: '/blog',
+      },
+      {
+        text: 'Certification',
+        link: 'https://openjsf.org/certification',
+      },
+    ],
+  },
+};
+
+export default { component: NavBar } as Meta;

package/Containers/NavBar/index.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import Hamburger from '@heroicons/react/24/solid/Bars3Icon';
+import XMark from '@heroicons/react/24/solid/XMarkIcon';
+import * as Label from '@radix-ui/react-label';
+import classNames from 'classnames';
+import { useState } from 'react';
+import type {
+  FC,
+  HTMLAttributeAnchorTarget,
+  PropsWithChildren,
+  ElementType,
+} from 'react';
+
+import NavItem from '#ui/Containers/NavBar/NavItem';
+import type { FormattedMessage, LinkLike } from '#ui/types';
+
+import style from './index.module.css';
+
+const navInteractionIcons = {
+  show: <Hamburger className={style.navInteractionIcon} />,
+  close: <XMark className={style.navInteractionIcon} />,
+};
+
+type NavbarProps = {
+  navItems: Array<{
+    text: FormattedMessage;
+    link: string;
+    target?: HTMLAttributeAnchorTarget | undefined;
+  }>;
+  Logo: ElementType;
+  as: LinkLike;
+  pathname: string;
+  sidebarItemTogglerAriaLabel: string;
+};
+
+const NavBar: FC<PropsWithChildren<NavbarProps>> = ({
+  children,
+  Logo,
+  as: Component = 'a',
+  navItems,
+  pathname,
+  sidebarItemTogglerAriaLabel,
+}) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  return (
+    <nav className={style.container}>
+      <div className={style.nodeIconAndMobileItemsToggler}>
+        <Component className={style.nodeIconWrapper} href="/" aria-label="Home">
+          <Logo />
+        </Component>
+
+        <Label.Root
+          className={style.sidebarItemTogglerLabel}
+          htmlFor="sidebarItemToggler"
+          role="button"
+          aria-label={sidebarItemTogglerAriaLabel}
+        >
+          {navInteractionIcons[isMenuOpen ? 'close' : 'show']}
+        </Label.Root>
+      </div>
+
+      <input
+        className={classNames(['peer', style.sidebarItemToggler])}
+        id="sidebarItemToggler"
+        type="checkbox"
+        onChange={e => setIsMenuOpen(() => e.target.checked)}
+        aria-label={sidebarItemTogglerAriaLabel}
+        tabIndex={-1}
+      />
+
+      <div className={`${style.main} hidden peer-checked:flex`}>
+        <div className={style.navItems}>
+          {navItems.map(({ text, link, target }) => (
+            <NavItem
+              pathname={pathname}
+              as={Component}
+              key={link}
+              href={link}
+              target={target}
+            >
+              {text}
+            </NavItem>
+          ))}
+        </div>
+
+        <div className={style.actionsWrapper}>{children}</div>
+      </div>
+    </nav>
+  );
+};
+
+export default NavBar;

package/Containers/Sidebar/SidebarGroup/index.module.css

@@ -0,0 +1,26 @@
+@reference "../../../styles/index.css";
+
+.group {
+  @apply flex
+    w-full
+    flex-col
+    gap-2;
+}
+
+.groupName {
+  @apply px-2
+    py-1
+    text-xs
+    font-semibold
+    text-neutral-800
+    dark:text-neutral-600;
+}
+
+.itemList {
+  @apply m-0
+    flex
+    flex-col
+    items-start
+    gap-0.5
+    p-0;
+}

package/Containers/Sidebar/SidebarGroup/index.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import SidebarGroup from '#ui/Containers/Sidebar/SidebarGroup';
+
+type Story = StoryObj<typeof SidebarGroup>;
+type Meta = MetaObj<typeof SidebarGroup>;
+
+export const Default: Story = {
+  args: {
+    groupName: 'Example Group',
+    items: [
+      { label: 'Item 1', link: '/item1' },
+      { label: 'Item 2', link: '/item2' },
+      { label: 'Item 3', link: '/item3' },
+    ],
+  },
+};
+
+export const CustomGroup: Story = {
+  args: {
+    groupName: 'Custom Group',
+    items: [
+      { label: 'Custom Item 1', link: '/custom-item1' },
+      { label: 'Custom Item 2', link: '/custom-item2' },
+    ],
+  },
+};
+
+export const EmptyGroup: Story = {
+  args: {
+    groupName: 'Empty Group',
+    items: [],
+  },
+};
+
+export default { component: SidebarGroup } as Meta;

package/Containers/Sidebar/SidebarGroup/index.tsx

@@ -0,0 +1,30 @@
+import type { ComponentProps, FC } from 'react';
+
+import SidebarItem from '#ui/Containers/Sidebar/SidebarItem';
+import type { FormattedMessage, LinkLike } from '#ui/types';
+
+import styles from './index.module.css';
+
+type SidebarGroupProps = {
+  groupName: FormattedMessage;
+  items: Array<Omit<ComponentProps<typeof SidebarItem>, 'as' | 'pathname'>>;
+  as?: LinkLike;
+  pathname?: string;
+};
+
+const SidebarGroup: FC<SidebarGroupProps> = ({
+  groupName,
+  items,
+  ...props
+}) => (
+  <section className={styles.group}>
+    <label className={styles.groupName}>{groupName}</label>
+    <ul className={styles.itemList}>
+      {items.map(({ label, link }) => (
+        <SidebarItem key={link} label={label} link={link} {...props} />
+      ))}
+    </ul>
+  </section>
+);
+
+export default SidebarGroup;

package/Containers/Sidebar/SidebarItem/index.module.css

@@ -0,0 +1,35 @@
+@reference "../../../styles/index.css";
+
+.sideBarItem {
+  @apply flex
+    w-full
+    list-none
+    text-neutral-800
+    dark:text-neutral-200;
+
+  a {
+    @apply inline-flex
+      items-center
+      gap-2
+      p-2;
+  }
+
+  .label {
+    @apply font-regular
+      w-full
+      text-sm;
+  }
+
+  .icon {
+    @apply size-3
+      text-neutral-500
+      dark:text-neutral-200;
+  }
+}
+
+.active {
+  @apply rounded-sm
+    bg-green-600
+    text-white
+    dark:text-white;
+}

package/Containers/Sidebar/SidebarItem/index.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import SidebarItem from '#ui/Containers/Sidebar/SidebarItem';
+
+type Story = StoryObj<typeof SidebarItem>;
+type Meta = MetaObj<typeof SidebarItem>;
+
+export const Default: Story = {
+  args: {
+    label: 'Example Item',
+    link: '/example',
+  },
+};
+
+export default { component: SidebarItem } as Meta;

package/Containers/Sidebar/SidebarItem/index.tsx

@@ -0,0 +1,26 @@
+import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
+import type { FC } from 'react';
+
+import ActiveLink from '#ui/Common/BaseActiveLink';
+import type { FormattedMessage, LinkLike } from '#ui/types';
+
+import styles from './index.module.css';
+
+type SidebarItemProps = {
+  label: FormattedMessage;
+  link: string;
+  as?: LinkLike;
+  pathname?: string;
+};
+
+const SidebarItem: FC<SidebarItemProps> = ({ label, link, ...props }) => (
+  <li className={styles.sideBarItem}>
+    <ActiveLink href={link} activeClassName={styles.active} {...props}>
+      <span className={styles.label}>{label}</span>
+
+      {link.startsWith('http') && <ArrowUpRightIcon className={styles.icon} />}
+    </ActiveLink>
+  </li>
+);
+
+export default SidebarItem;

package/Containers/Sidebar/index.module.css

@@ -0,0 +1,31 @@
+@reference "../../styles/index.css";
+
+.wrapper {
+  @apply flex
+    w-full
+    flex-col
+    items-start
+    gap-8
+    overflow-auto
+    overflow-x-hidden
+    border-r-neutral-200
+    bg-white
+    px-4
+    py-6
+    sm:border-r
+    md:max-w-xs
+    lg:px-6
+    dark:border-r-neutral-900
+    dark:bg-neutral-950;
+
+  > section {
+    @apply hidden
+      sm:flex;
+  }
+
+  > span {
+    @apply flex
+      w-full
+      sm:hidden;
+  }
+}

package/Containers/Sidebar/index.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import Sidebar from '#ui/Containers/Sidebar';
+
+type Story = StoryObj<typeof Sidebar>;
+type Meta = MetaObj<typeof Sidebar>;
+
+export const Default: Story = {
+  args: {
+    groups: [
+      {
+        groupName: 'About Node.js',
+        items: [
+          {
+            link: '/item1',
+            label: 'About Node.js',
+          },
+          {
+            link: '/item2',
+            label: 'Project Governance',
+          },
+          {
+            link: '/item3',
+            label: 'Releases',
+          },
+          {
+            link: '/item4',
+            label: 'Branding',
+          },
+          {
+            link: '/item5',
+            label: 'Privacy Policy',
+          },
+          {
+            link: '/item6',
+            label: 'Security Reporting',
+          },
+        ],
+      },
+      {
+        groupName: 'Get Involved',
+        items: [
+          {
+            link: '/item7',
+            label: 'Get Involved',
+          },
+          {
+            link: '/item8',
+            label: 'Collab Summit',
+          },
+          {
+            link: '/item9',
+            label: 'Contribute',
+          },
+          {
+            link: '/item10',
+            label: 'Code of Conduct',
+          },
+        ],
+      },
+      {
+        groupName: 'Download',
+        items: [
+          {
+            link: '/item11',
+            label: 'Download',
+          },
+          {
+            link: '/item12',
+            label: 'Package Manager',
+          },
+          {
+            link: '/item13',
+            label: 'Node.js Releases',
+          },
+        ],
+      },
+    ],
+    title: 'Sidebar',
+    onSelect: console.log,
+  },
+};
+
+export default { component: Sidebar } as Meta;

package/Containers/Sidebar/index.tsx

@@ -0,0 +1,58 @@
+import type { ComponentProps, FC } from 'react';
+
+import Select from '#ui/Common/Select';
+import SidebarGroup from '#ui/Containers/Sidebar/SidebarGroup';
+import type { LinkLike } from '#ui/types';
+
+import styles from './index.module.css';
+
+type SidebarProps = {
+  groups: Array<Omit<ComponentProps<typeof SidebarGroup>, 'as' | 'pathname'>>;
+  pathname?: string;
+  title: string;
+  onSelect: (value: string) => void;
+  as?: LinkLike;
+};
+
+const SideBar: FC<SidebarProps> = ({
+  groups,
+  pathname,
+  title,
+  onSelect,
+  as,
+}) => {
+  const selectItems = groups.map(({ items, groupName }) => ({
+    label: groupName,
+    items: items.map(({ label, link }) => ({ value: link, label })),
+  }));
+
+  const currentItem = selectItems
+    .map(item => item.items)
+    .flat()
+    .find(item => pathname === item.value);
+
+  return (
+    <aside className={styles.wrapper}>
+      {selectItems.length > 0 && (
+        <Select
+          label={title}
+          values={selectItems}
+          defaultValue={currentItem?.value}
+          onChange={onSelect}
+        />
+      )}
+
+      {groups.map(({ groupName, items }) => (
+        <SidebarGroup
+          key={groupName.toString()}
+          groupName={groupName}
+          items={items}
+          pathname={pathname}
+          as={as}
+        />
+      ))}
+    </aside>
+  );
+};
+
+export default SideBar;

package/Icons/HexagonGrid.stories.tsx

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