feat(docs,daffio): set full API docs in design component doc (#3635)

Author: griest024

apps/daffio/src/app/docs/design/components/component-content/component-content.component.html

@@ -13,9 +13,9 @@ <h1>{{doc().title}}</h1>
 				Usage
 			</daff-tab-label>
 			<daff-tab-panel>
-				<daff-article
+				<div
 					[innerHtml]="doc().contents | safe">
-				</daff-article>
+				</div>
 			</daff-tab-panel>
 		</daff-tab>
 
@@ -24,9 +24,12 @@ <h1>{{doc().title}}</h1>
 				API
 			</daff-tab-label>
 			<daff-tab-panel>
-				@for (apiDoc of doc().api; track $index) {
-					<section [innerHtml]="apiDoc | safe"></section>
-					<hr>
+				@for (kv of doc().api | keyvalue | daffioDocsDesignApiSortSectionLabels; track kv.key) {
+					<h2 [attr.id]="kv.key">{{getSectionLabel(kv.key)}}</h2>
+					@for (apiDoc of kv.value; track $index) {
+						<ng-template [ngComponentOutlet]="getApiComponent(apiDoc)" [ngComponentOutletInputs]="{doc: apiDoc, child: true}"></ng-template>
+						<hr>
+					}
 				}
 			</daff-tab-panel>
 		</daff-tab>

apps/daffio/src/app/docs/design/components/component-content/component-content.component.spec.ts

@@ -16,11 +16,14 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { DaffTabsComponent } from '@daffodil/design/tabs';
 import {
   DaffDocKind,
+  DaffDocsApiRole,
   DaffPackageGuideDoc,
 } from '@daffodil/docs-utils';
 
 import { DaffioDocsDesignComponentContentComponent } from './component-content.component';
 import { DaffioActiveHeaderService } from '../../../../core/dynamic-fragment/service';
+import { DaffioDocsApiDefaultContentComponent } from '../../../api/components/api-default-content/api-default-content.component';
+import { DaffioDocsApiDynamicContentComponentService } from '../../../api/dynamic-content/dynamic-content-component.service';
 import { DaffioDocViewerComponent } from '../../../components/doc-viewer/doc-viewer.component';
 
 @Component({
@@ -51,6 +54,7 @@ describe('DaffioDocsDesignComponentContentComponent', () => {
       ],
       providers: [
         DaffioActiveHeaderService,
+        DaffioDocsApiDynamicContentComponentService,
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),
       ],
@@ -75,7 +79,10 @@ describe('DaffioDocsDesignComponentContentComponent', () => {
         lvl: 2,
         slug: 'toc',
       }],
-      api: ['<div id="api">api</div>'],
+      api: {
+        // TODO: add better test when we have doc factories
+        [DaffDocsApiRole.COMPONENT]: [<any>{}],
+      },
       contents: '<div id="contents">contents</div>',
       longDescription: '<div id="longDescription">longDescription</div>',
       breadcrumbs: [],
@@ -122,7 +129,7 @@ describe('DaffioDocsDesignComponentContentComponent', () => {
     });
 
     it('should render the api', () => {
-      expect(fixture.debugElement.query(By.css('#api')).nativeElement.innerText).toEqual('api');
+      expect(fixture.debugElement.query(By.directive(DaffioDocsApiDefaultContentComponent))).toBeDefined();
     });
 
     it('should pass the API toc to the article', () => {

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

@@ -1,3 +1,7 @@
+import {
+  KeyValuePipe,
+  NgComponentOutlet,
+} from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -13,13 +17,17 @@ import {
   DaffTabsComponent,
 } from '@daffodil/design/tabs';
 import {
+  DaffApiDoc,
   DaffDocKind,
+  daffDocsApiRoleGetSectionLabel,
   DaffPackageGuideDoc,
 } from '@daffodil/docs-utils';
 
 import { DaffioSafeHtmlPipe } from '../../../../core/html-sanitizer/safe.pipe';
+import { DaffioDocsApiDynamicContentComponentService } from '../../../api/dynamic-content/dynamic-content-component.service';
 import { DaffioDocViewerComponent } from '../../../components/doc-viewer/doc-viewer.component';
 import { DaffioDocsDynamicContent } from '../../../dynamic-content/dynamic-content.type';
+import { DaffioDocsDesignApiSortSectionLabels } from '../../pipes/sort-api-section-labels.pipe';
 
 @Component({
   selector: 'daffio-docs-design-component-content',
@@ -30,6 +38,9 @@ import { DaffioDocsDynamicContent } from '../../../dynamic-content/dynamic-conte
     DAFF_ARTICLE_COMPONENTS,
     DaffioDocViewerComponent,
     DaffioSafeHtmlPipe,
+    KeyValuePipe,
+    DaffioDocsDesignApiSortSectionLabels,
+    NgComponentOutlet,
   ],
 })
 export class DaffioDocsDesignComponentContentComponent implements DaffioDocsDynamicContent<DaffPackageGuideDoc> {
@@ -39,6 +50,7 @@ export class DaffioDocsDesignComponentContentComponent implements DaffioDocsDyna
 
   readonly USAGE_TAB_ID = 'usage-tab';
   readonly API_TAB_ID = 'api-tab';
+  readonly getSectionLabel = daffDocsApiRoleGetSectionLabel;
 
   tabs = viewChild.required(DaffTabsComponent);
   doc = input<DaffPackageGuideDoc>();
@@ -53,6 +65,14 @@ export class DaffioDocsDesignComponentContentComponent implements DaffioDocsDyna
     }
   });
 
+  constructor(
+    private apiComponentService: DaffioDocsApiDynamicContentComponentService,
+  ) {}
+
+  getApiComponent(doc: DaffApiDoc) {
+    return this.apiComponentService.getComponent(doc);
+  }
+
   setTab(tab: string) {
     this._tab.set(tab);
   }

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

@@ -15,6 +15,7 @@ import {
 import { DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_REGISTRATION } from './containers/docs-list/sidebar.provider';
 import { DaffioDocsDesignComponentOverviewPageComponent } from './pages/components-overview/component-overview.component';
 import { DaffioDocsDesignOverviewPageComponent } from './pages/overview/overview.component';
+import { daffioDocsDesignComponentDocResolver } from './services/component-doc.resolver';
 import { DaffioRoute } from '../../core/router/route.type';
 import { DaffioDocsPageComponent } from '../pages/docs-page/docs-page.component';
 import { DocsResolver } from '../resolvers/docs-resolver.service';
@@ -45,7 +46,23 @@ export const docsDesignRoutes: Routes = [
       },
       {
         path: DAFF_DOC_KIND_PATH_SEGMENT_MAP[DaffDocKind.COMPONENT],
-        component: DaffioDocsDesignComponentOverviewPageComponent,
+        children: [
+          {
+            path: '',
+            pathMatch: 'full',
+            component: DaffioDocsDesignComponentOverviewPageComponent,
+          },
+					<DaffioRoute>{
+					  path: '**',
+					  component: DaffioDocsPageComponent,
+					  resolve: {
+					    doc: daffioDocsDesignComponentDocResolver,
+					  },
+					  data: {
+					    sidebarMode: DaffSidebarModeEnum.SideFixed,
+					  },
+					},
+        ],
       },
       <DaffioRoute>{
         path: '**',

apps/daffio/src/app/docs/design/services/component-doc.resolver.ts

@@ -0,0 +1,49 @@
+import { inject } from '@angular/core';
+import {
+  ActivatedRouteSnapshot,
+  RedirectCommand,
+  ResolveFn,
+  Router,
+  RouterStateSnapshot,
+} from '@angular/router';
+import {
+  switchMap,
+  combineLatest,
+  map,
+  take,
+  catchError,
+  of,
+} from 'rxjs';
+
+import {
+  daffUriTruncateLeadingSlash,
+  daffUriTruncateQueryFragment,
+} from '@daffodil/core/routing';
+import {
+  DaffApiDoc,
+  daffDocsApiArrayToDict,
+  DaffPackageGuideDoc,
+} from '@daffodil/docs-utils';
+
+import { DaffioDocsService } from '../../services/docs.service';
+
+export const daffioDocsDesignComponentDocResolver: ResolveFn<DaffPackageGuideDoc> = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+  const docService = inject(DaffioDocsService);
+  const router = inject(Router);
+
+  return docService
+  //remove any route fragment and initial slash from the route.
+    .get<DaffPackageGuideDoc>(daffUriTruncateLeadingSlash(daffUriTruncateQueryFragment(state.url)))
+    .pipe(
+      switchMap((packageDoc) =>
+        combineLatest(packageDoc.symbols.map((d) => docService.get<DaffApiDoc>(d))).pipe(
+          map((apiDocs) => ({
+            ...packageDoc,
+            api: daffDocsApiArrayToDict(apiDocs),
+          })),
+        ),
+      ),
+      take(1),
+      catchError((err) => of(new RedirectCommand(router.parseUrl('/404'), { skipLocationChange: true }))),
+    );
+};

libs/docs-utils/src/doc/package-guide.type.ts

@@ -1,5 +1,7 @@
 import { DaffDoc } from './type';
+import { DaffDocsApiRole } from '../api/public_api';
 import { DaffDocTableOfContents } from '../toc/public_api';
+import { DaffApiDoc } from './api/public_api';
 
 /**
  * A guide doc for a package.
@@ -10,9 +12,11 @@ export interface DaffPackageGuideDoc extends DaffDoc {
    */
   symbols: Array<string>;
   /**
-   * A list of rendered API docs.
+   * A list of API docs.
    */
-  api: Array<string>;
+  api: {
+    [key in DaffDocsApiRole]?: Array<DaffApiDoc>;
+  };
   /**
    * A table of contents for the API section.
    */