@node-core/ui-components 0.0.1 → 1.0.1-31c31c9e3d61d76150eae83e7d2385b86cfdef71

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;