From 1a195e432871a4990dc453bd17329bc03e03aa48 Mon Sep 17 00:00:00 2001 From: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> Date: Wed, 15 Nov 2023 06:57:49 +0530 Subject: [PATCH] feat: Add SidebarItem, sideBarGroup and sideBar components (#6065) * feat: Add SidebarItem, sideBarGroup and sideBar components * feat: Add styling to sideBarGroup * Update components/Common/Sidebar/index.tsx Co-authored-by: canerakdas Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * Update types/sidebar.ts Co-authored-by: Augustin Mauroy Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * Update components/Common/Sidebar/index.tsx Co-authored-by: canerakdas Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * Update components/Common/Sidebar/index.tsx Co-authored-by: canerakdas Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * Update components/Common/SidebarItem/index.module.css Co-authored-by: canerakdas Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * Update components/Common/SidebarItem/index.tsx Co-authored-by: canerakdas Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * feat: refactored component structure for sidebar * removed console log * Update components/Common/Sidebar/SidebarGroup/index.module.css Co-authored-by: canerakdas Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * Update components/Common/Sidebar/SidebarGroup/index.module.css Co-authored-by: canerakdas Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * Update components/Common/Sidebar/SidebarGroup/index.module.css Co-authored-by: canerakdas Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * Update components/Common/Sidebar/SidebarGroup/index.tsx Co-authored-by: canerakdas Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * Update components/Common/Sidebar/SidebarGroup/index.tsx Co-authored-by: canerakdas Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * removed unused import * feat:refactored sidebar component removed internal state * updated styling to match ui with figma design * updated styling * minor code refactoring and updated storybook to make it look like real page * fixed lint issues * updated imports * chore: address review feedback, align with figma --------- Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> Co-authored-by: Manikanta Mavireddy Co-authored-by: canerakdas Co-authored-by: Augustin Mauroy Co-authored-by: Brian Muenzenmeyer --- .../Sidebar/SidebarGroup/index.module.css | 23 +++ .../Common/Sidebar/SidebarGroup/index.tsx | 35 ++++ .../Sidebar/SidebarItem/index.module.css | 25 +++ .../Common/Sidebar/SidebarItem/index.tsx | 28 +++ components/Common/Sidebar/index.module.css | 15 ++ components/Common/Sidebar/index.stories.tsx | 160 ++++++++++++++++++ components/Common/Sidebar/index.tsx | 26 +++ 7 files changed, 312 insertions(+) create mode 100644 components/Common/Sidebar/SidebarGroup/index.module.css create mode 100644 components/Common/Sidebar/SidebarGroup/index.tsx create mode 100644 components/Common/Sidebar/SidebarItem/index.module.css create mode 100644 components/Common/Sidebar/SidebarItem/index.tsx create mode 100644 components/Common/Sidebar/index.module.css create mode 100644 components/Common/Sidebar/index.stories.tsx create mode 100644 components/Common/Sidebar/index.tsx diff --git a/components/Common/Sidebar/SidebarGroup/index.module.css b/components/Common/Sidebar/SidebarGroup/index.module.css new file mode 100644 index 0000000000000..ef0cad9cb873a --- /dev/null +++ b/components/Common/Sidebar/SidebarGroup/index.module.css @@ -0,0 +1,23 @@ +.group { + @apply flex + w-full + flex-col + gap-2; +} + +.groupName { + @apply px-2 + text-xs + font-semibold + text-neutral-800 + dark:text-neutral-200; +} + +.itemList { + @apply m-0 + flex + flex-col + items-start + gap-0.5 + p-0; +} diff --git a/components/Common/Sidebar/SidebarGroup/index.tsx b/components/Common/Sidebar/SidebarGroup/index.tsx new file mode 100644 index 0000000000000..a43669477a7c4 --- /dev/null +++ b/components/Common/Sidebar/SidebarGroup/index.tsx @@ -0,0 +1,35 @@ +import type { ComponentProps, FC } from 'react'; + +import SidebarItem from '@/components/Common/Sidebar/SidebarItem'; + +import styles from './index.module.css'; + +type SidebarGroupProps = { + groupName: string; + items: ComponentProps[]; + activeItem?: ComponentProps; +}; + +const SidebarGroup: FC = ({ + groupName, + items, + activeItem, +}) => ( +
+ +
    + {items.map(({ title, url }) => ( + + ))} +
+
+); + +export default SidebarGroup; diff --git a/components/Common/Sidebar/SidebarItem/index.module.css b/components/Common/Sidebar/SidebarItem/index.module.css new file mode 100644 index 0000000000000..5f076a9abc973 --- /dev/null +++ b/components/Common/Sidebar/SidebarItem/index.module.css @@ -0,0 +1,25 @@ +.sideBarItem { + @apply flex + w-full + list-none; + + a { + @apply w-full + p-2 + text-sm + font-regular + text-neutral-800 + dark:text-neutral-200; + } +} + +.active { + @apply rounded + bg-green-600; + + a, + a:hover { + @apply text-white + dark:text-white; + } +} diff --git a/components/Common/Sidebar/SidebarItem/index.tsx b/components/Common/Sidebar/SidebarItem/index.tsx new file mode 100644 index 0000000000000..fab6eee211b9e --- /dev/null +++ b/components/Common/Sidebar/SidebarItem/index.tsx @@ -0,0 +1,28 @@ +import classNames from 'classnames'; +import type { FC } from 'react'; + +import Link from '@/components/Link'; + +import styles from './index.module.css'; + +type SidebarItemProps = { + title: string; + url: string; + isActive?: boolean; +}; + +const SidebarItem: FC = ({ + url, + title, + isActive = false, +}) => ( +
  • + {title} +
    • +); + +export default SidebarItem; diff --git a/components/Common/Sidebar/index.module.css b/components/Common/Sidebar/index.module.css new file mode 100644 index 0000000000000..a282849847d98 --- /dev/null +++ b/components/Common/Sidebar/index.module.css @@ -0,0 +1,15 @@ +.sideBar { + @apply flex + flex-col + items-start + gap-8 + overflow-auto + border-r + border-r-neutral-200 + bg-white + px-4 + py-6 + dark:border-r-neutral-900 + dark:bg-neutral-950 + md:max-w-xs; +} diff --git a/components/Common/Sidebar/index.stories.tsx b/components/Common/Sidebar/index.stories.tsx new file mode 100644 index 0000000000000..59a5da132053a --- /dev/null +++ b/components/Common/Sidebar/index.stories.tsx @@ -0,0 +1,160 @@ +import type { Meta as MetaObj, StoryObj } from '@storybook/react'; + +import Sidebar from '@/components/Common/Sidebar'; + +type Story = StoryObj; +type Meta = MetaObj; + +export const Default: Story = { + args: { + groups: [ + { + groupName: 'About Node.js', + items: [ + { + url: '/item1', + title: 'About Node.js', + }, + { + url: '/item2', + title: 'Project Governance', + }, + { + url: '/item3', + title: 'Releases', + }, + { + url: '/item4', + title: 'Branding', + }, + { + url: '/item5', + title: 'Privacy Policy', + }, + { + url: '/item6', + title: 'Security Reporting', + }, + ], + }, + { + groupName: 'Get Involved', + items: [ + { + url: '/item7', + title: 'Get Involved', + }, + { + url: '/item8', + title: 'Collab Summit', + }, + { + url: '/item9', + title: 'Contribute', + }, + { + url: '/item10', + title: 'Code of Conduct', + }, + ], + }, + { + groupName: 'Download', + items: [ + { + url: '/item11', + title: 'Download', + }, + { + url: '/item12', + title: 'Package Manager', + }, + { + url: '/item13', + title: 'Previous Releases', + }, + ], + }, + ], + }, +}; + +export const ActiveItem: Story = { + args: { + groups: [ + { + groupName: 'About Node.js', + items: [ + { + url: '/item1', + title: 'About Node.js', + }, + { + url: '/item2', + title: 'Project Governance', + }, + { + url: '/item3', + title: 'Releases', + }, + { + url: '/item4', + title: 'Branding', + }, + { + url: '/item5', + title: 'Privacy Policy', + }, + { + url: '/item6', + title: 'Security Reporting', + }, + ], + }, + { + groupName: 'Get Involved', + items: [ + { + url: '/item7', + title: 'Get Involved', + }, + { + url: '/item8', + title: 'Collab Summit', + }, + { + url: '/item9', + title: 'Contribute', + }, + { + url: '/item10', + title: 'Code of Conduct', + }, + ], + }, + { + groupName: 'Download', + items: [ + { + url: '/item11', + title: 'Download', + }, + { + url: '/item12', + title: 'Package Manager', + }, + { + url: '/item13', + title: 'Previous Releases', + }, + ], + }, + ], + activeItem: { + url: '/item1', + title: 'About Node.js', + }, + }, +}; + +export default { component: Sidebar } as Meta; diff --git a/components/Common/Sidebar/index.tsx b/components/Common/Sidebar/index.tsx new file mode 100644 index 0000000000000..f6538bf168925 --- /dev/null +++ b/components/Common/Sidebar/index.tsx @@ -0,0 +1,26 @@ +import type { ComponentProps, FC } from 'react'; + +import SidebarGroup from '@/components/Common/Sidebar/SidebarGroup'; +import type SidebarItem from '@/components/Common/Sidebar/SidebarItem'; + +import styles from './index.module.css'; + +type SidebarProps = { + groups: ComponentProps[]; + activeItem?: ComponentProps; +}; + +const SideBar: FC = ({ groups, activeItem }) => ( + +); + +export default SideBar;