docs(nxdev): refresh ui (nrwl#12370)

graph/client/src/app/shell.tsx

@@ -1,4 +1,7 @@
-import { ArrowCircleLeftIcon, DownloadIcon } from '@heroicons/react/solid';
+import {
+  ArrowLeftCircleIcon,
+  ArrowDownTrayIcon,
+} from '@heroicons/react/24/solid';
 import Tippy from '@tippyjs/react';
 import classNames from 'classnames';
 // nx-ignore-next-line
@@ -130,7 +133,7 @@ export function Shell() {
             id="no-projects-chosen"
             className="flex text-slate-700 dark:text-slate-400"
           >
-            <ArrowCircleLeftIcon className="mr-4 h-6 w-6" />
+            <ArrowLeftCircleIcon className="mr-4 h-6 w-6" />
             <h4>Please select projects in the sidebar.</h4>
           </div>
         ) : null}
@@ -170,7 +173,7 @@ export function Shell() {
               data-cy="downloadImageButton"
               onClick={downloadImage}
             >
-              <DownloadIcon className="absolute top-1/2 left-1/2 -mt-3 -ml-3 h-6 w-6" />
+              <ArrowDownTrayIcon className="absolute top-1/2 left-1/2 -mt-3 -ml-3 h-6 w-6" />
             </button>
           </Tippy>
         </div>

graph/client/src/app/sidebar/focused-project-panel.tsx

@@ -1,4 +1,4 @@
-import { ArrowCircleRightIcon, XCircleIcon } from '@heroicons/react/solid';
+import { ArrowRightCircleIcon, XCircleIcon } from '@heroicons/react/24/solid';
 import { memo } from 'react';
 
 export interface FocusedProjectPanelProps {
@@ -16,7 +16,7 @@ export const FocusedProjectPanel = memo(
           onClick={() => resetFocus()}
         >
           <p className="truncate transition duration-200 ease-in-out group-hover:opacity-60">
-            <ArrowCircleRightIcon className="-mt-1 mr-1 inline h-6 w-6" />
+            <ArrowRightCircleIcon className="-mt-1 mr-1 inline h-6 w-6" />
             <span id="focused-project-name">Focused on {focusedProject}</span>
           </p>
           <div className="absolute right-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-500 transition-all duration-200 ease-in-out group-hover:translate-x-0 dark:bg-slate-800 dark:text-slate-300">

graph/client/src/app/sidebar/project-list.tsx

@@ -1,8 +1,8 @@
 import {
-  DocumentSearchIcon,
+  DocumentMagnifyingGlassIcon,
   FlagIcon,
-  LocationMarkerIcon,
-} from '@heroicons/react/solid';
+  MapPinIcon,
+} from '@heroicons/react/24/solid';
 // nx-ignore-next-line
 import type { ProjectGraphNode } from '@nrwl/devkit';
 import { useDepGraphService } from '../hooks/use-dep-graph';
@@ -92,7 +92,7 @@ function ProjectListItem({
           title="Focus on this library"
           onClick={() => focusProject(project.projectGraphNode.name)}
         >
-          <DocumentSearchIcon className="h-5 w-5" />
+          <DocumentMagnifyingGlassIcon className="h-5 w-5" />
         </button>
 
         <ExperimentalFeature>
@@ -108,7 +108,7 @@ function ProjectListItem({
                   : 'ring-slate-200 dark:ring-slate-600'
               } flex items-center rounded-l-md border-slate-300 bg-white p-1 font-medium text-slate-500 shadow-sm ring-1 transition hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-400 dark:ring-slate-600 hover:dark:bg-slate-700`}
             >
-              <LocationMarkerIcon className="h-5 w-5" />
+              <MapPinIcon className="h-5 w-5" />
             </button>
 
             <button

graph/client/src/app/sidebar/sidebar.tsx

@@ -1,4 +1,4 @@
-import { InformationCircleIcon } from '@heroicons/react/solid';
+import { InformationCircleIcon } from '@heroicons/react/24/solid';
 import { useCallback } from 'react';
 import ExperimentalFeature from '../experimental-feature';
 import { useDepGraphService } from '../hooks/use-dep-graph';

graph/client/src/app/sidebar/theme-panel.tsx

@@ -1,5 +1,9 @@
 import { Menu, Transition } from '@headlessui/react';
-import { DesktopComputerIcon, MoonIcon, SunIcon } from '@heroicons/react/solid';
+import {
+  ComputerDesktopIcon,
+  MoonIcon,
+  SunIcon,
+} from '@heroicons/react/24/solid';
 import classNames from 'classnames';
 import { Fragment, useEffect, useState } from 'react';
 import { localStorageThemeKey, Theme, themeResolver } from '../theme-resolver';
@@ -22,7 +26,7 @@ export default function ThemePanel() {
         >
           <span className="sr-only">Theme switcher</span>
           {theme === 'system' && (
-            <DesktopComputerIcon className="h-5 w-5" aria-hidden="true" />
+            <ComputerDesktopIcon className="h-5 w-5" aria-hidden="true" />
           )}
           {theme === 'light' && (
             <SunIcon className="h-5 w-5" aria-hidden="true" />
@@ -54,7 +58,7 @@ export default function ThemePanel() {
                   )}
                   onClick={() => setTheme('system')}
                 >
-                  <DesktopComputerIcon
+                  <ComputerDesktopIcon
                     className="mr-2 h-5 w-5"
                     aria-hidden="true"
                   />

graph/client/src/app/sidebar/tracing-panel.tsx

@@ -1,9 +1,9 @@
 import {
-  DotsVerticalIcon,
+  EllipsisVerticalIcon,
   FlagIcon,
-  LocationMarkerIcon,
+  MapPinIcon,
   XCircleIcon,
-} from '@heroicons/react/solid';
+} from '@heroicons/react/24/solid';
 import { memo } from 'react';
 import { TracingAlgorithmType } from '../machines/interfaces';
 
@@ -55,7 +55,7 @@ export const TracingPanel = memo(
           </div>
 
           <div className="flex flex-row items-center truncate ">
-            <LocationMarkerIcon className="mr-2 h-5 w-5 text-slate-500 dark:text-slate-400" />
+            <MapPinIcon className="mr-2 h-5 w-5 text-slate-500 dark:text-slate-400" />
             {start ? (
               <div
                 className="group relative flex-1 cursor-pointer flex-col items-center overflow-hidden"
@@ -79,7 +79,7 @@ export const TracingPanel = memo(
           </div>
 
           <div>
-            <DotsVerticalIcon className="h-5 w-5 text-slate-500 dark:text-slate-400" />
+            <EllipsisVerticalIcon className="h-5 w-5 text-slate-500 dark:text-slate-400" />
           </div>
 
           <div className="flex flex-row items-center truncate ">

nx-dev/data-access-documents/src/lib/documents.api.ts

@@ -70,21 +70,29 @@ export class DocumentsApi {
 
     if (!found) return null;
 
-    const cardListItems = items?.map((i) => ({
-      name: i.name,
-      path: i.path ?? '/' + path.concat(i.id).join('/'),
-    }));
+    const cardsTemplate = items
+      ?.map((i) => ({
+        title: i.name,
+        description: i.description ?? '',
+        url: i.path ?? '/' + path.concat(i.id).join('/'),
+      }))
+      .map(
+        (card) =>
+          `{% card title="${card.title}" description="${card.description}" url="${card.url}" /%}\n`
+      )
+      .join('');
 
     return {
       filePath: '',
       data: {
         title: found?.name,
       },
-      content: `# ${found?.name}\n\n ${
-        found?.description ?? ''
-      }\n\n {% card-list items="${encodeURI(
-        JSON.stringify(cardListItems)
-      )}" /%}`,
+      content: [
+        `# ${found?.name}\n\n ${found?.description ?? ''}\n\n`,
+        '{% cards %}\n',
+        cardsTemplate,
+        '{% /cards %}\n\n',
+      ].join(''),
     };
   }
 
@@ -214,8 +222,9 @@ export class DocumentsApi {
   /**
    * Displays a list of all concepts, recipes or reference documents that are tagged with the specified tag
    * Tags are defined in map.json
-   * @param tag
    * @returns
+   * @param tags
+   * @param path
    */
   private getRelatedDocumentsSection(tags: string[], path: string[]): string {
     let relatedConcepts: MenuItem[] = [];

nx-dev/data-access-menu/src/lib/menu.utils.ts

@@ -84,18 +84,48 @@ export function getDeepDiveSection(items: MenuItem[]): MenuSection {
 }
 
 export function getPackageApiSection(items: MenuItem[]): MenuSection {
+  const getGuides = (menu: MenuItem) =>
+    menu.itemList?.filter(
+      (x) => !x.path?.includes('executors') && !x.path?.includes('generators')
+    ) || [];
+  const getExecutors = (menu: MenuItem) =>
+    menu.itemList?.filter((x) => x.path?.includes('executors')) || [];
+  const getGenerators = (menu: MenuItem) =>
+    menu.itemList?.filter((x) => x.path?.includes('generators')) || [];
+
   return {
     id: 'official-packages',
     name: 'Reference',
-    itemList: items.filter(
-      (m) =>
-        m.id !== 'add-nx-to-monorepo' &&
-        m.id !== 'cra-to-nx' &&
-        m.id !== 'create-nx-plugin' &&
-        m.id !== 'create-nx-workspace' &&
-        m.id !== 'make-angular-cli-faster' &&
-        m.id !== 'tao'
-    ),
+    itemList: items
+      .filter(
+        (m) =>
+          m.id !== 'add-nx-to-monorepo' &&
+          m.id !== 'cra-to-nx' &&
+          m.id !== 'create-nx-plugin' &&
+          m.id !== 'create-nx-workspace' &&
+          m.id !== 'make-angular-cli-faster' &&
+          m.id !== 'tao'
+      )
+      .map((m) => ({
+        ...m,
+        itemList: [
+          {
+            id: m.id + '-guides',
+            name: 'Guides',
+            itemList: getGuides(m),
+          },
+          {
+            id: m.id + '-executors',
+            name: 'Executors',
+            itemList: getExecutors(m),
+          },
+          {
+            id: m.id + '-generators',
+            name: 'Generators',
+            itemList: getGenerators(m),
+          },
+        ],
+      })),
   };
 }
 

nx-dev/data-access-packages/src/index.ts

@@ -1,3 +1,4 @@
 export * from './lib/get-title-for-schema';
 export * from './lib/get-description-for-schema';
 export * from './lib/lookup';
+export * from './lib/sort-packages';

nx-dev/data-access-packages/src/lib/sort-packages.ts

@@ -0,0 +1,9 @@
+export function sortCorePackagesFirst<ItemType extends { id: string }>(
+  itemList: ItemType[]
+): ItemType[] {
+  const nxPackageIds = ['nx', 'workspace', 'devkit', 'nx-plugin'];
+  return [
+    ...nxPackageIds.map((id) => itemList.find((item) => item.id === id)),
+    ...itemList.filter((item) => !nxPackageIds.includes(item.id)),
+  ].filter((item): item is ItemType => !!item);
+}

nx-dev/feature-doc-viewer/src/lib/content.tsx

@@ -7,8 +7,10 @@ export interface ContentProps {
 
 export function Content(props: ContentProps): JSX.Element {
   return (
-    <div className="min-w-0 flex-auto px-4 pt-8 pb-24 sm:px-6 lg:pb-16 xl:px-8">
-      <div className="prose max-w-none">{renderMarkdown(props.document)}</div>
+    <div className="min-w-0 flex-auto pb-24 lg:pb-16">
+      <div className="prose prose-slate dark:prose-invert max-w-none">
+        {renderMarkdown(props.document)}
+      </div>
     </div>
   );
 }

nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx

@@ -1,25 +1,42 @@
 import { DocumentData } from '@nrwl/nx-dev/models-document';
 import { Menu } from '@nrwl/nx-dev/models-menu';
-import { Sidebar } from '@nrwl/nx-dev/ui-common';
-import cx from 'classnames';
+import { Breadcrumbs, Footer, SidebarContainer } from '@nrwl/nx-dev/ui-common';
 import { NextSeo } from 'next-seo';
 import { useRouter } from 'next/router';
+import { useEffect, useRef } from 'react';
 import { Content } from './content';
 
 export interface DocumentationFeatureDocViewerProps {
   menu: Menu;
   document: DocumentData;
   toc: any;
-  navIsOpen?: boolean;
+  navIsOpen: boolean;
 }
 
 export function DocViewer({
   document,
   menu,
   navIsOpen,
 }: DocumentationFeatureDocViewerProps): JSX.Element {
+  const wrapperElement = useRef(null);
   const router = useRouter();
 
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      if (url.includes('#')) return;
+      if (!wrapperElement) return;
+
+      (wrapperElement as any).current.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: 'smooth',
+      });
+    };
+
+    router.events.on('routeChangeComplete', handleRouteChange);
+    return () => router.events.off('routeChangeComplete', handleRouteChange);
+  }, [router, wrapperElement]);
+
   return (
     <>
       <NextSeo
@@ -51,27 +68,29 @@ export function DocViewer({
           type: 'website',
         }}
       />
-      <div className="mx-auto w-full max-w-screen-lg">
-        <div className="lg:flex">
-          <Sidebar menu={menu} navIsOpen={navIsOpen} />
-          <div
-            id="content-wrapper"
-            className={cx(
-              'w-full min-w-0 flex-auto flex-col pt-16 md:pl-4 lg:static lg:max-h-full lg:overflow-visible',
-              navIsOpen && 'fixed max-h-screen overflow-hidden'
-            )}
-          >
+      <SidebarContainer menu={menu} navIsOpen={navIsOpen} />
+      <div
+        ref={wrapperElement}
+        id="wrapper"
+        data-testid="wrapper"
+        className="relative flex flex-grow flex-col items-stretch justify-start overflow-y-scroll"
+      >
+        <div className="mx-auto w-full grow items-stretch px-4 sm:px-6 lg:px-8 2xl:max-w-6xl">
+          <div id="content-wrapper" className="w-full flex-auto flex-col">
+            <div className="mb-6 pt-8">
+              <Breadcrumbs path={router.asPath} />
+            </div>
             <Content document={document} />
-            <div className="flex w-full items-center space-x-2 px-4 pt-24 pb-24 sm:px-6 lg:pb-16 xl:px-8">
-              <div className="ml-4 flex h-0.5 w-full flex-grow rounded bg-slate-50" />
+            <div className="flex w-full items-center space-x-2 pt-24 pb-24 sm:px-6 lg:pb-16 xl:px-8">
+              <div className="ml-4 flex h-0.5 w-full flex-grow rounded bg-slate-50 dark:bg-slate-800/60" />
               <div className="relative z-0 inline-flex flex-shrink-0 rounded-md shadow-sm">
                 <a
                   aria-hidden="true"
                   href="https://github.com/nrwl/nx/issues/new?assignees=&labels=type%3A+docs&template=3-documentation.md"
                   target="_blank"
                   rel="noreferrer"
                   title="Report an issue on Github"
-                  className="focus:ring-blue-nx-base focus:border-blue-nx-base relative inline-flex items-center rounded-l-md border border-gray-200 bg-white px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1"
+                  className="focus:ring-blue-nx-base focus:border-blue-nx-base relative inline-flex items-center rounded-l-md border border-slate-200 bg-white px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-400 dark:hover:bg-slate-800"
                 >
                   Report an issue
                 </a>
@@ -87,14 +106,15 @@ export function DocViewer({
                   target="_blank"
                   rel="noreferrer"
                   title="Edit this page on Github"
-                  className="focus:ring-blue-nx-base focus:border-blue-nx-base relative -ml-px inline-flex items-center rounded-r-md border border-gray-200 bg-white px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1"
+                  className="focus:ring-blue-nx-base focus:border-blue-nx-base relative -ml-px inline-flex items-center rounded-r-md border border-slate-200 bg-white px-4 py-2 text-xs font-medium text-slate-600 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-400 dark:hover:bg-slate-800"
                 >
                   Edit this page
                 </a>
               </div>
             </div>
           </div>
         </div>
+        <Footer />
       </div>
     </>
   );