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

package/src/Containers/Sidebar/ProgressionIcon/index.tsx

@@ -0,0 +1,16 @@
+import type { FC, SVGAttributes } from 'react';
+
+const ProgressionIcon: FC<SVGAttributes<SVGSVGElement>> = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="18"
+    viewBox="0 0 16 18"
+    fill="none"
+    {...props}
+  >
+    <path d="M9 3.26795L8 2.6906L7 3.26795L3.5359 5.26795L2.5359 5.8453V7V11V12.1547L3.5359 12.7321L7 14.7321L8 15.3094L9 14.7321L12.4641 12.7321L13.4641 12.1547V11V7V5.8453L12.4641 5.26795L9 3.26795Z" />
+  </svg>
+);
+
+export default ProgressionIcon;

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

@@ -0,0 +1,64 @@
+@reference "../../../styles/index.css";
+
+.group {
+  @apply flex
+    w-full
+    flex-col
+    gap-2;
+
+  &:not(.progression) {
+    .groupName {
+      @apply px-2
+        py-1
+        text-xs
+        font-semibold
+        text-neutral-800
+        dark:text-neutral-600;
+    }
+  }
+
+  &.progression {
+    @apply flex
+      flex-col
+      gap-4
+      text-sm
+      font-medium
+      text-neutral-800
+      dark:text-neutral-200;
+
+    .itemList {
+      @apply relative
+        -left-1
+        flex
+        flex-col
+        after:absolute
+        after:left-[0.45rem]
+        after:top-0
+        after:z-10
+        after:h-full
+        after:w-px
+        after:bg-neutral-200
+        after:content-['']
+        dark:after:bg-neutral-800;
+
+      a {
+        @apply first:before:absolute
+          first:before:bottom-[calc(50%+0.25rem)]
+          first:before:left-0
+          first:before:h-20
+          first:before:w-4
+          first:before:bg-white
+          first:before:content-['']
+          last:after:absolute
+          last:after:left-0
+          last:after:top-[calc(50%+0.25rem)]
+          last:after:h-20
+          last:after:w-4
+          last:after:bg-white
+          last:after:content-['']
+          first:dark:before:bg-neutral-950
+          last:dark:after:bg-neutral-950;
+      }
+    }
+  }
+}

package/src/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/src/Containers/Sidebar/SidebarGroup/index.tsx

@@ -0,0 +1,49 @@
+import classNames from 'classnames';
+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;
+  className: string;
+  showProgressionIcons?: boolean;
+};
+
+const SidebarGroup: FC<SidebarGroupProps> = ({
+  groupName,
+  items,
+  showProgressionIcons,
+  className,
+  ...props
+}) => (
+  <section
+    className={classNames(
+      {
+        [styles.group]: true,
+        [styles.progression]: showProgressionIcons,
+      },
+      className
+    )}
+  >
+    <label className={styles.groupName}>{groupName}</label>
+    <ul className={styles.itemList}>
+      {items.map(({ label, link }) => (
+        <SidebarItem
+          key={link}
+          label={label}
+          link={link}
+          showProgressionIcons={showProgressionIcons}
+          {...props}
+        />
+      ))}
+    </ul>
+  </section>
+);
+
+export default SidebarGroup;

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

@@ -0,0 +1,56 @@
+@reference '../../../styles/index.css';
+
+.item {
+  @apply font-regular
+    relative
+    z-20
+    flex
+    w-full
+    items-center
+    overflow-hidden
+    text-sm
+    text-neutral-800
+    dark:text-neutral-200;
+
+  .label {
+    @apply font-regular
+      p-2
+      text-sm;
+  }
+
+  .progressionIcon {
+    @apply shrink-0
+      fill-neutral-200
+      stroke-white
+      stroke-[4]
+      dark:fill-neutral-800
+      dark:stroke-neutral-950;
+  }
+
+  .icon {
+    @apply size-3
+      text-neutral-500
+      dark:text-neutral-200;
+  }
+
+  &.progression {
+    .label {
+      @apply p-1;
+    }
+  }
+
+  &.active {
+    @apply text-neutral-900
+      dark:text-white;
+
+    .progressionIcon {
+      @apply fill-green-500;
+    }
+
+    &:not(.progression) .label {
+      @apply rounded-sm
+        bg-green-600
+        text-white;
+    }
+  }
+}

package/src/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/src/Containers/Sidebar/SidebarItem/index.tsx

@@ -0,0 +1,43 @@
+import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
+import classNames from 'classnames';
+import type { FC } from 'react';
+
+import BaseActiveLink from '#ui/Common/BaseActiveLink';
+import type { FormattedMessage, LinkLike } from '#ui/types';
+
+import styles from './index.module.css';
+import ProgressionIcon from '../ProgressionIcon';
+
+type SidebarItemProps = {
+  label: FormattedMessage;
+  link: string;
+  as?: LinkLike;
+  pathname?: string;
+  showProgressionIcons?: boolean;
+};
+
+const SidebarItem: FC<SidebarItemProps> = ({
+  label,
+  link,
+  showProgressionIcons = false,
+  ...props
+}) => (
+  <BaseActiveLink
+    className={classNames({
+      [styles.item]: true,
+      [styles.progression]: showProgressionIcons,
+    })}
+    href={link}
+    activeClassName={styles.active}
+    {...props}
+  >
+    {showProgressionIcons && (
+      <ProgressionIcon className={styles.progressionIcon} />
+    )}
+    <span className={styles.label}>{label}</span>
+
+    {/^https?:/.test(link) && <ArrowUpRightIcon className={styles.icon} />}
+  </BaseActiveLink>
+);
+
+export default SidebarItem;

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

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

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

@@ -0,0 +1,88 @@
+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>;
+
+const 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,
+  pathname: '/item1',
+};
+
+export const Default: Story = { args };
+export const Progression: Story = {
+  args: { ...args, showProgressionIcons: true },
+};
+
+export default { component: Sidebar } as Meta;

package/src/Containers/Sidebar/index.tsx

@@ -0,0 +1,70 @@
+import type { ComponentProps, FC, PropsWithChildren } 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<
+    Pick<ComponentProps<typeof SidebarGroup>, 'items' | 'groupName'>
+  >;
+  pathname?: string;
+  title: string;
+  onSelect: (value: string) => void;
+  as?: LinkLike;
+  showProgressionIcons?: boolean;
+  placeholder?: string;
+};
+
+const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
+  groups,
+  pathname,
+  title,
+  onSelect,
+  as,
+  showProgressionIcons = false,
+  children,
+  placeholder,
+}) => {
+  const selectItems = groups.map(({ items, groupName }) => ({
+    label: groupName,
+    items: items.map(({ label, link }) => ({ value: link, label })),
+  }));
+
+  const currentItem = selectItems
+    .flatMap(item => item.items)
+    .find(item => pathname === item.value);
+
+  return (
+    <aside className={styles.wrapper}>
+      {children}
+
+      {selectItems.length > 0 && (
+        <Select
+          label={title}
+          values={selectItems}
+          defaultValue={currentItem?.value}
+          placeholder={placeholder}
+          onChange={onSelect}
+          className={styles.mobileSelect}
+        />
+      )}
+
+      {groups.map(({ groupName, items }) => (
+        <SidebarGroup
+          key={groupName.toString()}
+          groupName={groupName}
+          items={items}
+          pathname={pathname}
+          as={as}
+          showProgressionIcons={showProgressionIcons}
+          className={styles.navigation}
+        />
+      ))}
+    </aside>
+  );
+};
+
+export default SideBar;

package/src/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;