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,19 +85,25 @@ 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
-              <div key={[category.id, index].join('-')} className="py-10">
+              .filter((pkg) =>
-                <ReferencesSection section={category} />
+                !!targetPackageId ? pkg.id === targetPackageId : true
-                {!(index + 1 === all.length) && (
+              )
-                  <div className="inset-x-0 bottom-0 mt-8 h-1 rounded-full bg-gradient-to-r from-[#8154E8] to-[#47BC99]"></div>
+              .map((category: MenuItem, index, all) => (
-                )}
+                <div key={[category.id, index].join('-')} className="py-10">
-              </div>
+                  <ReferencesSection section={category} />
-            ))}
+                  {!(index + 1 === all.length) && (
+                    <div className="inset-x-0 bottom-0 mt-8 h-1 rounded-full bg-gradient-to-r from-[#8154E8] to-[#47BC99]"></div>
+                  )}
+                </div>
+              ))}
           </section>
         </div>
       </main>

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

@@ -1,24 +1,30 @@
-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}>
+    <button
-      <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">
+      onClick={() => pkg.callback(pkg.id)}
-        <img
+      className={cx(
-          className="h-5 w-5 object-cover opacity-75"
+        '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',
-          loading="lazy"
+        pkg.active === pkg.id ? 'bg-slate-200' : ''
-          src={iconsMap[pkg.id]}
+      )}
-          alt={pkg.name + ' illustration'}
+    >
-          aria-hidden="true"
+      <img
-        />
+        className="h-5 w-5 object-cover opacity-75"
+        loading="lazy"
+        src={iconsMap[pkg.id]}
+        alt={pkg.name + ' illustration'}
+        aria-hidden="true"
+      />
 
-        <span className="text-base font-medium">{pkg.name}</span>
+      <span className="text-base font-medium">{pkg.name}</span>
-      </a>
+    </button>
-    </Link>
   );
 }