docs(nxdev): add filter button & state on packages view (#11308)

nx-dev/nx-dev/pages/packages.tsx

@@ -3,6 +3,7 @@ import { Footer, Header } from '@nrwl/nx-dev/ui-common';
 import { ReferencesIndexItem } from '@nrwl/nx-dev/ui-references';
 import { NextSeo } from 'next-seo';
 import { useRouter } from 'next/router';
+import { useState } from 'react';
 import { ReferencesSection } from '../../ui-references/src/lib/references-section';
 import { nxMenuApi } from '../lib/api';
 
@@ -20,15 +21,18 @@ export async function getStaticProps(): Promise<{ props: ReferencesProps }> {
 
 export function Packages(props: ReferencesProps): JSX.Element {
   const router = useRouter();
+  const [targetPackageId, setTargetPackageId] = useState<string>('');
+  const updateTargetPackageId = (id: string) =>
+    id === targetPackageId ? setTargetPackageId('') : setTargetPackageId(id);
   const nxPackageIds = ['nx', 'workspace', 'devkit', 'nx-plugin'];
-  const references = [
+  const references: MenuItem[] = [
     ...nxPackageIds.map((id) =>
       props.references.itemList.find((pkg) => pkg.id === id)
     ),
     ...props.references.itemList.filter(
       (pkg) => !nxPackageIds.includes(pkg.id)
     ),
-  ];
+  ].filter((pkg): pkg is MenuItem => !!pkg);
 
   return (
     <>
@@ -81,12 +85,18 @@ export function Packages(props: ReferencesProps): JSX.Element {
                   key={'ref-' + category.id}
                   path={category.path as string}
                   name={category.name as string}
-                  id={category.id as string}
+                  id={category.id}
+                  active={targetPackageId}
+                  callback={updateTargetPackageId}
                 />
               ))}
             </nav>
 
-            {references.map((category: MenuItem, index, all) => (
+            {references
+              .filter((pkg) =>
+                !!targetPackageId ? pkg.id === targetPackageId : true
+              )
+              .map((category: MenuItem, index, all) => (
                 <div key={[category.id, index].join('-')} className="py-10">
                   <ReferencesSection section={category} />
                   {!(index + 1 === all.length) && (

nx-dev/ui-references/src/lib/references-index-item.tsx

@@ -1,14 +1,21 @@
-import Link from 'next/link';
+import cx from 'classnames';
 import { iconsMap } from './icons-map';
 
 export function ReferencesIndexItem(pkg: {
+  active: string;
+  callback: (id: any) => any;
   id: string;
   name: string;
   path: string;
 }): JSX.Element {
   return (
-    <Link href={'#' + pkg.id}>
-      <a className="group relative flex items-center justify-center gap-3 overflow-hidden rounded-lg border border-slate-200 px-3 py-2 text-slate-700 transition hover:bg-slate-100">
+    <button
+      onClick={() => pkg.callback(pkg.id)}
+      className={cx(
+        'group relative flex items-center justify-center gap-3 overflow-hidden rounded-lg border border-slate-200 px-3 py-2 text-slate-700 transition hover:bg-slate-50',
+        pkg.active === pkg.id ? 'bg-slate-200' : ''
+      )}
+    >
       <img
         className="h-5 w-5 object-cover opacity-75"
         loading="lazy"
@@ -18,7 +25,6 @@ export function ReferencesIndexItem(pkg: {
       />
 
       <span className="text-base font-medium">{pkg.name}</span>
-      </a>
-    </Link>
+    </button>
   );
 }