feat(daffio): only render root api nav items (#3354)

apps/daffio/src/app/docs/api/api-routing.module.ts

@@ -12,12 +12,16 @@ import { DaffioRoute } from '../../core/router/route.type';
 import { DAFFIO_DOCS_LIST_SIDEBAR_REGISTRATION } from '../containers/docs-list/sidebar.provider';
 import { daffioDocsIndexResolver } from '../index/resolver';
 import { DocsResolver } from '../resolvers/docs-resolver.service';
+import { DAFFIO_API_NAV_LIST_SIDEBAR_REGISTRATION } from './sidebar/provider';
 
 export const apiRoutes: Routes = [
   <DaffioRoute>{
     path: '',
     data: {
       docKind: DaffDocKind.API,
+      daffioSidebars: {
+        [DAFFIO_API_NAV_LIST_SIDEBAR_REGISTRATION.id]: DAFFIO_API_NAV_LIST_SIDEBAR_REGISTRATION,
+      },
     },
     resolve: {
       index: daffioDocsIndexResolver,

apps/daffio/src/app/docs/api/components/nav-list/nav-list.component.html

@@ -0,0 +1,5 @@
+<daff-nav-list>
+  @for (doc of navList.children; track $index) {
+    <a daff-list-item [active]="rla.isActive" routerLinkActive [routerLinkActiveOptions]="ROUTER_LINK_ACTIVE_CONFIG" #rla="routerLinkActive" [node]="doc" [routerLink]="doc.path">{{ doc.title }}</a>
+  }
+</daff-nav-list>

apps/daffio/src/app/docs/api/components/nav-list/nav-list.component.spec.ts

@@ -0,0 +1,70 @@
+import {
+  waitForAsync,
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { DaffTreeModule } from '@daffodil/design/tree';
+import { DaffDocsApiNavList } from '@daffodil/docs-utils';
+
+import { DaffioApiNavListComponent } from './nav-list.component';
+
+describe('DaffioApiNavListComponent', () => {
+  let component: DaffioApiNavListComponent;
+  let fixture: ComponentFixture<DaffioApiNavListComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        DaffioApiNavListComponent,
+        RouterTestingModule,
+        NoopAnimationsModule,
+        DaffTreeModule,
+      ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DaffioApiNavListComponent);
+    component = fixture.componentInstance;
+    const guideWithoutChildren = {
+      id: 'id2',
+      title: 'title2',
+      children: [],
+    };
+    const guideWithChildren = {
+      id: 'id3',
+      title: 'title3',
+      children: [
+        {
+          id: 'id4',
+          title: 'title4',
+          children: [],
+        },
+      ],
+    };
+
+    component.navList = <DaffDocsApiNavList>{
+      id: 'root',
+      title: 'root',
+      children: [
+        guideWithoutChildren,
+        guideWithChildren,
+      ],
+    };
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render an anchor tag for each of the direct children', () => {
+    const anchorTags = fixture.debugElement.queryAll(By.css('a'));
+    expect(anchorTags.length).toEqual(2);
+  });
+});

apps/daffio/src/app/docs/api/components/nav-list/nav-list.component.ts

@@ -0,0 +1,33 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+} from '@angular/core';
+import {
+  RouterLink,
+  RouterLinkActive,
+} from '@angular/router';
+
+import { DAFF_LIST_COMPONENTS } from '@daffodil/design/list';
+import { DaffDocsApiNavList } from '@daffodil/docs-utils';
+
+const DEFAULT_ROUTER_LINK_ACTIVE_CONFIG: RouterLinkActive['routerLinkActiveOptions'] = {
+  exact: true,
+};
+
+@Component({
+  selector: 'daffio-api-nav-list',
+  templateUrl: './nav-list.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    RouterLink,
+    DAFF_LIST_COMPONENTS,
+    RouterLinkActive,
+  ],
+})
+export class DaffioApiNavListComponent {
+  @Input() navList: DaffDocsApiNavList;
+
+  readonly ROUTER_LINK_ACTIVE_CONFIG = DEFAULT_ROUTER_LINK_ACTIVE_CONFIG;
+}

apps/daffio/src/app/docs/api/sidebar/component.ts

@@ -0,0 +1,25 @@
+import { AsyncPipe } from '@angular/common';
+import {
+  Component,
+  ChangeDetectionStrategy,
+} from '@angular/core';
+
+import { DaffDocsApiNavList } from '@daffodil/docs-utils';
+
+import { useDaffioNavList } from '../../composables/nav-index';
+import { DaffioApiNavListComponent } from '../components/nav-list/nav-list.component';
+
+@Component({
+  template: `
+    <daffio-api-nav-list [navList]="list$ | async"></daffio-api-nav-list>
+  `,
+  standalone: true,
+  imports: [
+    DaffioApiNavListComponent,
+    AsyncPipe,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DaffioApiNavListSidebarContainer {
+  list$ = useDaffioNavList<DaffDocsApiNavList>().list;
+}

apps/daffio/src/app/docs/api/sidebar/provider.ts

@@ -0,0 +1,11 @@
+import { DaffioApiNavListSidebarContainer } from './component';
+import { DaffioSidebarFooterComponent } from '../../../core/sidebar/components/sidebar-footer/sidebar-footer.component';
+import { DaffioSidebarHeaderComponent } from '../../../core/sidebar/components/sidebar-header/sidebar-header.component';
+import { DAFFIO_DOCS_LIST_SIDEBAR_ID } from '../../containers/docs-list/sidebar.provider';
+
+export const DAFFIO_API_NAV_LIST_SIDEBAR_REGISTRATION = {
+  id: DAFFIO_DOCS_LIST_SIDEBAR_ID,
+  header: DaffioSidebarHeaderComponent,
+  body: DaffioApiNavListSidebarContainer,
+  footer: DaffioSidebarFooterComponent,
+};

apps/daffio/src/app/docs/composables/nav-index.ts

@@ -0,0 +1,23 @@
+import { inject } from '@angular/core';
+import {
+  switchMap,
+  filter,
+  map,
+  Observable,
+} from 'rxjs';
+
+import { DaffDocsNavList } from '@daffodil/docs-utils';
+import { DaffRouterActivatedRoute } from '@daffodil/router';
+
+export const useDaffioNavList = <T extends DaffDocsNavList = DaffDocsNavList>() => {
+  const route = inject(DaffRouterActivatedRoute);
+  const list: Observable<T> = route.route$.pipe(
+    switchMap((r) => r.data),
+    filter(Boolean),
+    map((data) => data.index),
+  );
+
+  return {
+    list,
+  };
+};

apps/daffio/src/app/docs/containers/docs-list/docs-list.component.ts

@@ -2,19 +2,10 @@ import { AsyncPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
-  OnInit,
 } from '@angular/core';
-import {
-  filter,
-  map,
-  Observable,
-  switchMap,
-} from 'rxjs';
-
-import { DaffDocsNavList } from '@daffodil/docs-utils';
-import { DaffRouterActivatedRoute } from '@daffodil/router';
 
 import { DaffioDocsListComponent } from '../../components/docs-list/docs-list.component';
+import { useDaffioNavList } from '../../composables/nav-index';
 
 @Component({
   selector: 'daffio-docs-list-container',
@@ -26,18 +17,6 @@ import { DaffioDocsListComponent } from '../../components/docs-list/docs-list.co
     DaffioDocsListComponent,
   ],
 })
-export class DaffioDocsListContainer implements OnInit {
-  docsList$: Observable<DaffDocsNavList>;
-
-  constructor(
-    private route: DaffRouterActivatedRoute,
-  ) {}
-
-  ngOnInit() {
-    this.docsList$ = this.route.route$.pipe(
-      switchMap((route) => route.data),
-      filter(Boolean),
-      map((data) => data.index),
-    );
-  }
+export class DaffioDocsListContainer {
+  docsList$ = useDaffioNavList().list;
 }

apps/daffio/src/app/docs/design/containers/docs-list/docs-list.component.ts

@@ -2,19 +2,12 @@ import { AsyncPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
-  OnInit,
 } from '@angular/core';
-import {
-  filter,
-  map,
-  Observable,
-  switchMap,
-} from 'rxjs';
 
 import { DaffDocsDesignGuideNavList } from '@daffodil/docs-utils';
-import { DaffRouterActivatedRoute } from '@daffodil/router';
 
 import { DaffioDocsListComponent } from '../../../components/docs-list/docs-list.component';
+import { useDaffioNavList } from '../../../composables/nav-index';
 
 @Component({
   selector: 'daffio-docs-design-list-container',
@@ -26,18 +19,6 @@ import { DaffioDocsListComponent } from '../../../components/docs-list/docs-list
     DaffioDocsListComponent,
   ],
 })
-export class DaffioDocsDesignListContainer implements OnInit {
-  docsList$: Observable<DaffDocsDesignGuideNavList>;
-
-  constructor(
-    private route: DaffRouterActivatedRoute,
-  ) {}
-
-  ngOnInit() {
-    this.docsList$ = this.route.route$.pipe(
-      switchMap((route) => route.data),
-      filter(Boolean),
-      map((data) => data.index),
-    );
-  }
+export class DaffioDocsDesignListContainer {
+  docsList$ = useDaffioNavList<DaffDocsDesignGuideNavList>().list;
 }

apps/daffio/src/app/docs/design/pages/components-overview/component-overview.component.ts

@@ -2,11 +2,9 @@ import { AsyncPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
-  OnInit,
 } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import {
-  switchMap,
   map,
   Observable,
 } from 'rxjs';
@@ -15,7 +13,8 @@ import { DAFF_CARD_COMPONENTS } from '@daffodil/design/card';
 import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
 import { DAFF_HERO_COMPONENTS } from '@daffodil/design/hero';
 import { DaffDocsDesignGuideNavList } from '@daffodil/docs-utils';
-import { DaffRouterActivatedRoute } from '@daffodil/router';
+
+import { useDaffioNavList } from '../../../composables/nav-index';
 
 @Component({
   selector: 'daffio-docs-design-component-overview',
@@ -31,25 +30,15 @@ import { DaffRouterActivatedRoute } from '@daffodil/router';
     DAFF_CONTAINER_COMPONENTS,
   ],
 })
-export class DaffioDocsDesignComponentOverviewPageComponent implements OnInit {
-  components$: Observable<Array<DaffDocsDesignGuideNavList>>;
-
-  constructor(
-    private route: DaffRouterActivatedRoute,
-  ) {}
-
-  ngOnInit() {
-    this.components$ = this.route.route$.pipe(
-      switchMap((route) => route.data),
-      map((data) => data.index),
-      map((docsList: DaffDocsDesignGuideNavList) =>
-        docsList
-          .children
-          .find(({ id }) => id === 'components')
-          .children
-          .filter(({ id }) => !!id)
-          .flatMap((d) => d.children.length ? d.children : d),
-      ),
-    );
-  }
+export class DaffioDocsDesignComponentOverviewPageComponent {
+  components$: Observable<Array<DaffDocsDesignGuideNavList>> = useDaffioNavList<DaffDocsDesignGuideNavList>().list.pipe(
+    map((docsList) =>
+      docsList
+        .children
+        .find(({ id }) => id === 'components')
+        .children
+        .filter(({ id }) => !!id)
+        .flatMap((d) => d.children.length ? d.children : d),
+    ),
+  );
 }

apps/daffio/src/app/docs/packages/containers/package-cards/package-cards.component.ts

@@ -1,18 +1,15 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  OnInit,
 } from '@angular/core';
 import {
-  filter,
   map,
   Observable,
-  switchMap,
 } from 'rxjs';
 
 import { DaffDocsNavList } from '@daffodil/docs-utils';
-import { DaffRouterActivatedRoute } from '@daffodil/router';
 
+import { useDaffioNavList } from '../../../composables/nav-index';
 import { DaffioPackage } from '../../components/package-cards/package-cards.component';
 
 function getPath(doc: DaffDocsNavList): string {
@@ -24,24 +21,12 @@ function getPath(doc: DaffDocsNavList): string {
   templateUrl: './package-cards.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DaffioDocsPackageCardsContainer implements OnInit {
-
-  packagesList$: Observable<DaffioPackage[]>;
-
-  constructor(
-    private route: DaffRouterActivatedRoute,
-  ) {}
-
-  ngOnInit() {
-    this.packagesList$ = this.route.route$.pipe(
-      switchMap((route) => route.data),
-      map((data) => data.index),
-      filter(Boolean),
-      map((guidesTree) => guidesTree.children.map((p) => ({
-        title: p.title,
-        path: `/${getPath(p)}`,
-        description: '',
-      }))),
-    );
-  }
+export class DaffioDocsPackageCardsContainer {
+  packagesList$: Observable<Array<DaffioPackage>> = useDaffioNavList().list.pipe(
+    map((guidesTree) => guidesTree.children.map((p) => ({
+      title: p.title,
+      path: `/${getPath(p)}`,
+      description: '',
+    }))),
+  );
 }