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

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

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

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

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

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

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

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

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

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

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

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

@@ -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;