@node-core/ui-components 1.0.1-f948ce8a25da149fc61135f90a43e189c4909f5d → 1.2.0

package/Containers/NavBar/index.tsx

@@ -1,94 +0,0 @@
-'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.stories.tsx

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

@@ -1,30 +0,0 @@
-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.stories.tsx

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

@@ -1,26 +0,0 @@
-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.stories.tsx

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

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

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