From 3ccf4b0b0140449cfdb767e8d5a2276db8b5407b Mon Sep 17 00:00:00 2001 From: avivkeller Date: Fri, 6 Jun 2025 11:27:11 -0400 Subject: [PATCH 1/5] chore(ui): merge SideBar and ProgressionSideBar --- .../components/withProgressionSidebar.tsx | 48 ------ apps/site/components/withSidebar.tsx | 6 +- apps/site/layouts/Learn.tsx | 4 +- .../ProgressionSidebarGroup/index.module.css | 47 ------ .../ProgressionSidebarGroup/index.tsx | 35 ---- .../ProgressionSidebarItem/index.module.css | 39 ----- .../ProgressionSidebarItem/index.tsx | 32 ---- .../ProgressionSidebar/index.module.css | 30 ---- .../ProgressionSidebar/index.stories.tsx | 79 --------- .../Common/ProgressionSidebar/index.tsx | 59 ------- .../Containers/DocSideBar/index.tsx | 0 .../Sidebar/ProgressionIcon}/index.tsx | 4 +- .../Containers/Sidebar/SidebarGroup/index.tsx | 10 +- .../Sidebar/SidebarItem/index.module.css | 33 +++- .../Containers/Sidebar/SidebarItem/index.tsx | 18 ++- .../Containers/Sidebar/index.module.css | 7 +- .../Containers/Sidebar/index.stories.tsx | 152 +++++++++--------- .../Containers/Sidebar/index.tsx | 3 + 18 files changed, 142 insertions(+), 464 deletions(-) delete mode 100644 apps/site/components/withProgressionSidebar.tsx delete mode 100644 packages/ui-components/Common/ProgressionSidebar/ProgressionSidebarGroup/index.module.css delete mode 100644 packages/ui-components/Common/ProgressionSidebar/ProgressionSidebarGroup/index.tsx delete mode 100644 packages/ui-components/Common/ProgressionSidebar/ProgressionSidebarItem/index.module.css delete mode 100644 packages/ui-components/Common/ProgressionSidebar/ProgressionSidebarItem/index.tsx delete mode 100644 packages/ui-components/Common/ProgressionSidebar/index.module.css delete mode 100644 packages/ui-components/Common/ProgressionSidebar/index.stories.tsx delete mode 100644 packages/ui-components/Common/ProgressionSidebar/index.tsx create mode 100644 packages/ui-components/Containers/DocSideBar/index.tsx rename packages/ui-components/{Common/ProgressionSidebar/ProgressionSidebarIcon => Containers/Sidebar/ProgressionIcon}/index.tsx (77%) diff --git a/apps/site/components/withProgressionSidebar.tsx b/apps/site/components/withProgressionSidebar.tsx deleted file mode 100644 index a98d27e801f85..0000000000000 --- a/apps/site/components/withProgressionSidebar.tsx +++ /dev/null @@ -1,48 +0,0 @@ -'use client'; - -import ProgressionSidebar from '@node-core/ui-components/Common/ProgressionSidebar'; -import { usePathname } from 'next/navigation'; -import { useLocale, useTranslations } from 'next-intl'; -import type { RichTranslationValues } from 'next-intl'; -import type { FC } from 'react'; - -import Link from '#site/components/Link'; -import { useSiteNavigation } from '#site/hooks/server'; -import { useRouter } from '#site/navigation.mjs'; -import type { NavigationKeys } from '#site/types'; - -type WithProgressionSidebarProps = { - navKey: NavigationKeys; - context?: Record; -}; - -const WithProgressionSidebar: FC = ({ - navKey, - context, -}) => { - const { getSideNavigation } = useSiteNavigation(); - const pathname = usePathname(); - const locale = useLocale(); - const t = useTranslations(); - const { push } = useRouter(); - const [[, sidebarNavigation]] = getSideNavigation([navKey], context); - - const mappedProgressionSidebarItems = sidebarNavigation.items.map( - ([, { label, items }]) => ({ - groupName: label, - items: items.map(([, item]) => item), - }) - ); - - return ( - - ); -}; - -export default WithProgressionSidebar; diff --git a/apps/site/components/withSidebar.tsx b/apps/site/components/withSidebar.tsx index 5e93888d994c7..e8c1cf6518658 100644 --- a/apps/site/components/withSidebar.tsx +++ b/apps/site/components/withSidebar.tsx @@ -14,9 +14,10 @@ import type { NavigationKeys } from '#site/types'; type WithSidebarProps = { navKeys: Array; context?: Record; + showProgressionIcons?: boolean; }; -const WithSidebar: FC = ({ navKeys, context }) => { +const WithSidebar: FC = ({ navKeys, context, ...props }) => { const { getSideNavigation } = useSiteNavigation(); const pathname = usePathname()!; const locale = useLocale(); @@ -35,8 +36,9 @@ const WithSidebar: FC = ({ navKeys, context }) => { groups={mappedSidebarItems} pathname={pathname.replace(`/${locale}`, '')} title={t('components.common.sidebar.title')} - onSelect={value => push(value)} + onSelect={push} as={Link} + {...props} /> ); }; diff --git a/apps/site/layouts/Learn.tsx b/apps/site/layouts/Learn.tsx index 19927fd1c2d03..cbfd0b71808ca 100644 --- a/apps/site/layouts/Learn.tsx +++ b/apps/site/layouts/Learn.tsx @@ -5,7 +5,7 @@ import WithBreadcrumbs from '#site/components/withBreadcrumbs'; import WithFooter from '#site/components/withFooter'; import WithMetaBar from '#site/components/withMetaBar'; import WithNavBar from '#site/components/withNavBar'; -import WithProgressionSidebar from '#site/components/withProgressionSidebar'; +import SideBar from '#site/components/withSidebar'; import WithSidebarCrossLinks from '#site/components/withSidebarCrossLinks'; const LearnLayout: FC = ({ children }) => ( @@ -13,7 +13,7 @@ const LearnLayout: FC = ({ children }) => (
- +
diff --git a/packages/ui-components/Common/ProgressionSidebar/ProgressionSidebarGroup/index.module.css b/packages/ui-components/Common/ProgressionSidebar/ProgressionSidebarGroup/index.module.css deleted file mode 100644 index 909d230df577a..0000000000000 --- a/packages/ui-components/Common/ProgressionSidebar/ProgressionSidebarGroup/index.module.css +++ /dev/null @@ -1,47 +0,0 @@ -@reference "../../../styles/index.css"; - -.group { - @apply flex - flex-col - gap-4 - text-sm - font-medium - text-neutral-800 - dark:text-neutral-200; - - .items { - @apply relative - -left-1 - flex - flex-col - gap-2 - 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; - } - } -} diff --git a/packages/ui-components/Common/ProgressionSidebar/ProgressionSidebarGroup/index.tsx b/packages/ui-components/Common/ProgressionSidebar/ProgressionSidebarGroup/index.tsx deleted file mode 100644 index e0c681ca9c75a..0000000000000 --- a/packages/ui-components/Common/ProgressionSidebar/ProgressionSidebarGroup/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import type { ComponentProps, FC } from 'react'; - -import ProgressionSidebarItem from '#ui/Common/ProgressionSidebar/ProgressionSidebarItem'; -import type { FormattedMessage, LinkLike } from '#ui/types'; - -import styles from './index.module.css'; - -type ProgressionSidebarGroupProps = { - groupName: FormattedMessage; - items: Array>; - pathname?: string; - as?: LinkLike; -}; - -const ProgressionSidebarGroup: FC = ({ - groupName, - items, - ...props -}) => ( -
- {groupName} -
- {items.map(({ label, link }) => ( - - ))} -
-
-); - -export default ProgressionSidebarGroup; diff --git a/packages/ui-components/Common/ProgressionSidebar/ProgressionSidebarItem/index.module.css b/packages/ui-components/Common/ProgressionSidebar/ProgressionSidebarItem/index.module.css deleted file mode 100644 index 523ca8dd62e3f..0000000000000 --- a/packages/ui-components/Common/ProgressionSidebar/ProgressionSidebarItem/index.module.css +++ /dev/null @@ -1,39 +0,0 @@ -@reference "../../../styles/index.css"; - -a.item { - @apply font-regular - relative - z-20 - flex - w-full - items-center - gap-1 - overflow-hidden - text-sm - text-neutral-800 - dark:text-neutral-200; - - &:hover { - @apply text-neutral-900 - motion-safe:transition-colors - dark:text-white; - } - - svg { - @apply shrink-0 - fill-neutral-200 - stroke-white - stroke-[4] - dark:fill-neutral-800 - dark:stroke-neutral-950; - } - - &.active { - @apply text-neutral-900 - dark:text-white; - - svg { - @apply fill-green-500; - } - } -} diff --git a/packages/ui-components/Common/ProgressionSidebar/ProgressionSidebarItem/index.tsx b/packages/ui-components/Common/ProgressionSidebar/ProgressionSidebarItem/index.tsx deleted file mode 100644 index bfe313b8dbdce..0000000000000 --- a/packages/ui-components/Common/ProgressionSidebar/ProgressionSidebarItem/index.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import type { FC } from 'react'; - -import BaseActiveLink from '#ui/Common/BaseActiveLink'; -import ProgressionSidebarIcon from '#ui/Common/ProgressionSidebar/ProgressionSidebarIcon'; -import type { FormattedMessage, LinkLike } from '#ui/types'; - -import styles from './index.module.css'; - -type ProgressionSidebarItemProps = { - label: FormattedMessage; - link: string; - as?: LinkLike; - pathname?: string; -}; - -const ProgressionSidebarItem: FC = ({ - label, - link, - ...props -}) => ( - - - {label} - -); - -export default ProgressionSidebarItem; diff --git a/packages/ui-components/Common/ProgressionSidebar/index.module.css b/packages/ui-components/Common/ProgressionSidebar/index.module.css deleted file mode 100644 index 5be47ed42f100..0000000000000 --- a/packages/ui-components/Common/ProgressionSidebar/index.module.css +++ /dev/null @@ -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; - - > section { - @apply hidden - sm:flex; - } - - > span { - @apply flex - w-full - sm:hidden; - } -} diff --git a/packages/ui-components/Common/ProgressionSidebar/index.stories.tsx b/packages/ui-components/Common/ProgressionSidebar/index.stories.tsx deleted file mode 100644 index f40b33b36f837..0000000000000 --- a/packages/ui-components/Common/ProgressionSidebar/index.stories.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import type { Meta as MetaObj, StoryObj } from '@storybook/react'; - -import ProgressionSidebar from '#ui/Common/ProgressionSidebar'; - -type Story = StoryObj; -type Meta = MetaObj; - -export const Default: Story = { - args: { - groups: [ - { - groupName: 'Getting Started', - items: [ - { - label: 'Introduction to Node.js', - link: '/', - }, - { - label: 'How to install Node.js', - link: '/how-to-install-nodejs', - }, - { - label: 'How much JavaScript do you need to know to use Node.js?', - link: '/how-much-javascript-do-you-need-to-know-to-use-nodejs', - }, - { - label: 'Differences between Node.js and the Browser', - link: '/differences-between-nodejs-and-the-browser', - }, - { - label: 'The V8 JavaScript Engine', - link: '/the-v8-javascript-engine', - }, - { - label: 'An introduction to the npm package manager', - link: '/an-introduction-to-the-npm-package-manager', - }, - ], - }, - { - groupName: 'Asynchronous Work', - items: [ - { - label: 'Asynchronous flow control', - link: '/asynchronous-flow-control', - }, - { - label: 'Overview of Blocking vs Non-Blocking', - link: '/overview-of-blocking-vs-non-blocking', - }, - ], - }, - { - groupName: 'Manipulating Files', - items: [ - { - label: 'Node.js file stats', - link: '/nodejs-file-stats', - }, - { - label: 'Node.js File Paths', - link: '/nodejs-file-paths', - }, - ], - }, - { - groupName: 'Single item', - items: [ - { - label: 'Item', - link: '/item', - }, - ], - }, - ], - }, -}; - -export default { component: ProgressionSidebar } as Meta; diff --git a/packages/ui-components/Common/ProgressionSidebar/index.tsx b/packages/ui-components/Common/ProgressionSidebar/index.tsx deleted file mode 100644 index 0afab901b55f1..0000000000000 --- a/packages/ui-components/Common/ProgressionSidebar/index.tsx +++ /dev/null @@ -1,59 +0,0 @@ -'use client'; - -import { useRef, type ComponentProps, type FC } from 'react'; - -import ProgressionSidebarGroup from '#ui/Common/ProgressionSidebar/ProgressionSidebarGroup'; -import Select from '#ui/Common/Select'; -import type { LinkLike } from '#ui/types'; - -import styles from './index.module.css'; - -type ProgressionSidebarProps = { - groups: Array>; - pathname?: string; - title: string; - onSelect: (value: string) => void; - as?: LinkLike; -}; - -const ProgressionSidebar: FC = ({ - groups, - pathname, - title, - onSelect, - as, -}) => { - const ref = useRef(null); - 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 ( -