From 01dbb28f677886f4514f83977ab766cb79537706 Mon Sep 17 00:00:00 2001 From: griest024 Date: Tue, 10 Dec 2024 11:47:25 -0500 Subject: [PATCH] feat(daffio): only render root api nav items (#3354) --- .../src/app/docs/api/api-routing.module.ts | 4 ++ .../nav-list/nav-list.component.html | 5 ++ .../nav-list/nav-list.component.spec.ts | 70 +++++++++++++++++++ .../components/nav-list/nav-list.component.ts | 33 +++++++++ .../src/app/docs/api/sidebar/component.ts | 25 +++++++ .../src/app/docs/api/sidebar/provider.ts | 11 +++ .../src/app/docs/composables/nav-index.ts | 23 ++++++ .../docs-list/docs-list.component.ts | 27 +------ .../docs-list/docs-list.component.ts | 25 +------ .../component-overview.component.ts | 37 ++++------ .../package-cards/package-cards.component.ts | 33 +++------ 11 files changed, 199 insertions(+), 94 deletions(-) create mode 100644 apps/daffio/src/app/docs/api/components/nav-list/nav-list.component.html create mode 100644 apps/daffio/src/app/docs/api/components/nav-list/nav-list.component.spec.ts create mode 100644 apps/daffio/src/app/docs/api/components/nav-list/nav-list.component.ts create mode 100644 apps/daffio/src/app/docs/api/sidebar/component.ts create mode 100644 apps/daffio/src/app/docs/api/sidebar/provider.ts create mode 100644 apps/daffio/src/app/docs/composables/nav-index.ts diff --git a/apps/daffio/src/app/docs/api/api-routing.module.ts b/apps/daffio/src/app/docs/api/api-routing.module.ts index 676b8292d5..5594f0f805 100644 --- a/apps/daffio/src/app/docs/api/api-routing.module.ts +++ b/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 = [ { path: '', data: { docKind: DaffDocKind.API, + daffioSidebars: { + [DAFFIO_API_NAV_LIST_SIDEBAR_REGISTRATION.id]: DAFFIO_API_NAV_LIST_SIDEBAR_REGISTRATION, + }, }, resolve: { index: daffioDocsIndexResolver, diff --git a/apps/daffio/src/app/docs/api/components/nav-list/nav-list.component.html b/apps/daffio/src/app/docs/api/components/nav-list/nav-list.component.html new file mode 100644 index 0000000000..edda057463 --- /dev/null +++ b/apps/daffio/src/app/docs/api/components/nav-list/nav-list.component.html @@ -0,0 +1,5 @@ + + @for (doc of navList.children; track $index) { + {{ doc.title }} + } + \ No newline at end of file diff --git a/apps/daffio/src/app/docs/api/components/nav-list/nav-list.component.spec.ts b/apps/daffio/src/app/docs/api/components/nav-list/nav-list.component.spec.ts new file mode 100644 index 0000000000..3de94da63c --- /dev/null +++ b/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; + + 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 = { + 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); + }); +}); diff --git a/apps/daffio/src/app/docs/api/components/nav-list/nav-list.component.ts b/apps/daffio/src/app/docs/api/components/nav-list/nav-list.component.ts new file mode 100644 index 0000000000..a1812557b0 --- /dev/null +++ b/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; +} diff --git a/apps/daffio/src/app/docs/api/sidebar/component.ts b/apps/daffio/src/app/docs/api/sidebar/component.ts new file mode 100644 index 0000000000..e2638b48c1 --- /dev/null +++ b/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: ` + + `, + standalone: true, + imports: [ + DaffioApiNavListComponent, + AsyncPipe, + ], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DaffioApiNavListSidebarContainer { + list$ = useDaffioNavList().list; +} diff --git a/apps/daffio/src/app/docs/api/sidebar/provider.ts b/apps/daffio/src/app/docs/api/sidebar/provider.ts new file mode 100644 index 0000000000..4cf3e1117c --- /dev/null +++ b/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, +}; diff --git a/apps/daffio/src/app/docs/composables/nav-index.ts b/apps/daffio/src/app/docs/composables/nav-index.ts new file mode 100644 index 0000000000..3ada76f5ac --- /dev/null +++ b/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 = () => { + const route = inject(DaffRouterActivatedRoute); + const list: Observable = route.route$.pipe( + switchMap((r) => r.data), + filter(Boolean), + map((data) => data.index), + ); + + return { + list, + }; +}; diff --git a/apps/daffio/src/app/docs/containers/docs-list/docs-list.component.ts b/apps/daffio/src/app/docs/containers/docs-list/docs-list.component.ts index 8c475a8c80..21e4d38156 100644 --- a/apps/daffio/src/app/docs/containers/docs-list/docs-list.component.ts +++ b/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; - - 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; } diff --git a/apps/daffio/src/app/docs/design/containers/docs-list/docs-list.component.ts b/apps/daffio/src/app/docs/design/containers/docs-list/docs-list.component.ts index 78a24d9a9d..cc59dda7b6 100644 --- a/apps/daffio/src/app/docs/design/containers/docs-list/docs-list.component.ts +++ b/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; - - 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().list; } diff --git a/apps/daffio/src/app/docs/design/pages/components-overview/component-overview.component.ts b/apps/daffio/src/app/docs/design/pages/components-overview/component-overview.component.ts index 358588a24b..4a3ceda9be 100644 --- a/apps/daffio/src/app/docs/design/pages/components-overview/component-overview.component.ts +++ b/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>; - - 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> = useDaffioNavList().list.pipe( + map((docsList) => + docsList + .children + .find(({ id }) => id === 'components') + .children + .filter(({ id }) => !!id) + .flatMap((d) => d.children.length ? d.children : d), + ), + ); } diff --git a/apps/daffio/src/app/docs/packages/containers/package-cards/package-cards.component.ts b/apps/daffio/src/app/docs/packages/containers/package-cards/package-cards.component.ts index a3ad07323f..a8225aba8c 100644 --- a/apps/daffio/src/app/docs/packages/containers/package-cards/package-cards.component.ts +++ b/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; - - 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> = useDaffioNavList().list.pipe( + map((guidesTree) => guidesTree.children.map((p) => ({ + title: p.title, + path: `/${getPath(p)}`, + description: '', + }))), + ); }