feat(daffio): dynamically render doc views (#3415)

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

@@ -7,12 +7,12 @@ import {
 import { DaffDocKind } from '@daffodil/docs-utils';
 
 import { DaffioApiListPageComponent } from './pages/api-list-page/api-list-page.component';
-import { DaffioApiPageComponent } from './pages/api-page/api-page.component';
 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';
+import { DaffioDocsPageComponent } from '../pages/docs-page/docs-page.component';
 
 export const apiRoutes: Routes = [
   <DaffioRoute>{
@@ -33,7 +33,7 @@ export const apiRoutes: Routes = [
       },
       {
         path: '**',
-        component: DaffioApiPageComponent,
+        component: DaffioDocsPageComponent,
         resolve: {
           doc: DocsResolver,
         },

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

@@ -6,27 +6,26 @@ import { DaffContainerModule } from '@daffodil/design/container';
 
 import { DaffioDocsApiRoutingModule } from './api-routing.module';
 import { DaffioApiListModule } from './components/api-list/api-list.module';
+import { daffioDocsApiComponentProvider } from './components/doc/provider';
 import { DaffioApiListPageComponent } from './pages/api-list-page/api-list-page.component';
-import { DaffioApiPageComponent } from './pages/api-page/api-page.component';
-import { DaffioDocViewerModule } from '../components/doc-viewer/doc-viewer.module';
 
 @NgModule({
   imports: [
     CommonModule,
     DaffArticleModule,
     DaffioDocsApiRoutingModule,
     DaffioApiListModule,
-    DaffioDocViewerModule,
 
     DaffContainerModule,
   ],
   declarations: [
     DaffioApiListPageComponent,
-    DaffioApiPageComponent,
   ],
   exports: [
     DaffioApiListPageComponent,
-    DaffioApiPageComponent,
+  ],
+  providers: [
+    daffioDocsApiComponentProvider(),
   ],
 })
 export class DaffioApiModule {}

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

@@ -5,14 +5,14 @@ <h1 class="daffio-api-package__package-name">{{doc.title}}</h1>
       <p class="daffio-api-package__package-description">{{doc.description}}</p>
     }
   </div>
-  <daffio-api-list-section [children]="doc.children | apiPackageFilter:true" class="daffio-doc-viewer__api-section"></daffio-api-list-section>
+  <daffio-api-list-section [children]="doc.children | apiPackageFilter:true"></daffio-api-list-section>
 </div>
 
 @for (package of doc.children | apiPackageFilter; track package.id) {
   <div class="daffio-api-package__wrapper">
     <h2 class="daffio-api-package__subpackage-name">
       <a [routerLink]="package.path">{{package.title}}</a>
     </h2>
-    <daffio-api-list-section [children]="package.children | apiPackageFilter:true" class="daffio-doc-viewer__api-section" [attr.data-section-for-subpackage]="package.id"></daffio-api-list-section>
+    <daffio-api-list-section [children]="package.children | apiPackageFilter:true" [attr.data-section-for-subpackage]="package.id"></daffio-api-list-section>
   </div>
 }

apps/daffio/src/app/docs/api/components/doc/component.html

@@ -0,0 +1,7 @@
+<daffio-doc-article [breadcrumbs]="doc().breadcrumbs">
+	@if (isApiPackage()) {
+		<daffio-api-package [doc]="doc()"></daffio-api-package>
+	} @else {
+		<div [innerHTML]="doc().contents | safe"></div>
+	}
+</daffio-doc-article>

apps/daffio/src/app/docs/api/components/doc/component.ts

@@ -0,0 +1,35 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  input,
+  computed,
+} from '@angular/core';
+import { DaffioSafeHtmlPipe } from 'apps/daffio/src/app/core/html-sanitizer/safe.pipe';
+
+import {
+  DaffApiDoc,
+  DaffDocKind,
+} from '@daffodil/docs-utils';
+
+import { DaffioDocArticleModule } from '../../../components/doc-article/module';
+import { DaffioDocComponent } from '../../../components/doc-renderer/component.type';
+import { DaffioApiPackageComponent } from '../api-package/api-package.component';
+
+@Component({
+  selector: 'daffio-api-doc',
+  templateUrl: './component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DaffioDocArticleModule,
+    DaffioApiPackageComponent,
+    DaffioSafeHtmlPipe,
+  ],
+})
+export class DaffioDocApiComponent implements DaffioDocComponent<DaffApiDoc> {
+  static readonly kind = DaffDocKind.API;
+
+  readonly isApiPackage = computed(() => this.doc().docType === 'package');
+
+  doc = input<DaffApiDoc>();
+}

apps/daffio/src/app/docs/api/components/doc/provider.ts

@@ -0,0 +1,4 @@
+import { DaffioDocApiComponent } from './component';
+import { provideDaffioDocRendererComponents } from '../../../components/doc-renderer/token';
+
+export const daffioDocsApiComponentProvider = () => provideDaffioDocRendererComponents(DaffioDocApiComponent);

apps/daffio/src/app/docs/components/doc-article/component.html

@@ -0,0 +1,33 @@
+<button class="daffio-doc-article__menu-button" (click)="open()">
+	<fa-icon [icon]="faBars"></fa-icon>
+	<div>Menu</div>
+</button>
+<div class="daffio-doc-article__grid">
+  <div class="daffio-doc-article__content">
+    <daff-article>
+      @if (breadcrumbs.length > 0) {
+        <nav aria-label="Breadcrumb">
+          <ol daff-breadcrumb>
+            @for (breadcrumb of breadcrumbs(); track $index) {
+              <li daffBreadcrumbItem [active]="$last">
+                @if ($last) {
+                  {{breadcrumb.label}}
+                } @else {
+                  <a [routerLink]="breadcrumb.path">{{breadcrumb.label}}</a>
+                }
+              </li>
+            }
+          </ol>
+        </nav>
+      }
+
+      <ng-content></ng-content>
+    </daff-article>
+  </div>
+  @if (toc) {
+    <daffio-docs-table-of-contents
+      class="daffio-doc-article__table-of-contents"
+      [tableOfContents]="toc">
+    </daffio-docs-table-of-contents>
+  }
+</div>

apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.scss → apps/daffio/src/app/docs/components/doc-article/component.scss

@@ -6,7 +6,7 @@
 	margin: 0 auto;
 }
 
-.daffio-doc-viewer {
+.daffio-doc-article {
 	&__grid {
 		padding: 24px;
 

apps/daffio/src/app/docs/components/doc-article/component.spec.ts

@@ -0,0 +1,80 @@
+import { Component } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { RouterTestingModule } from '@angular/router/testing';
+import { provideMockStore } from '@ngrx/store/testing';
+
+import { DAFF_ARTICLE_COMPONENTS } from '@daffodil/design/article';
+import {
+  DaffApiPackageDoc,
+  DaffBreadcrumb,
+  DaffDocTableOfContents,
+} from '@daffodil/docs-utils';
+
+import { DaffioDocArticleComponent } from './component';
+import { DaffioApiPackageComponent } from '../../api/components/api-package/api-package.component';
+import { DaffioDocsFactory } from '../../testing/factories/docs.factory';
+import { DaffioDocsTableOfContentsModule } from '../table-of-contents/table-of-contents.module';
+
+@Component({
+  template: `<daffio-doc-article
+		[toc]="tocValue"
+		[breadcrumbs]="breadcrumbsValue"
+	></daffio-doc-article>`,
+})
+class WrapperComponent {
+  tocValue: DaffDocTableOfContents;
+  breadcrumbsValue: Array<DaffBreadcrumb>;
+}
+
+describe('DaffioDocArticleComponent', () => {
+  let component: DaffioDocArticleComponent;
+  let fixture: ComponentFixture<WrapperComponent>;
+  let wrapper: WrapperComponent;
+  const docFactory = new DaffioDocsFactory();
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule,
+        DAFF_ARTICLE_COMPONENTS,
+        DaffioDocsTableOfContentsModule,
+        DaffioApiPackageComponent,
+      ],
+      declarations: [
+        WrapperComponent,
+        DaffioDocArticleComponent,
+      ],
+      providers: [
+        provideMockStore(),
+      ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WrapperComponent);
+    wrapper = fixture.componentInstance;
+    wrapper.tocValue = [];
+    wrapper.breadcrumbsValue = [];
+    fixture.detectChanges();
+
+    component = fixture.debugElement.query(By.directive(DaffioDocArticleComponent)).componentInstance;
+  });
+
+  it('should create', () => {
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should take toc as an input', () => {
+    expect(component.toc).toEqual(wrapper.tocValue);
+  });
+
+  it('should take breadcrumbs as an input', () => {
+    expect(component.breadcrumbs).toEqual(wrapper.breadcrumbsValue);
+  });
+});

apps/daffio/src/app/docs/components/doc-article/component.ts

@@ -0,0 +1,35 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+} from '@angular/core';
+import { faBars } from '@fortawesome/free-solid-svg-icons';
+
+import {
+  DaffBreadcrumb,
+  DaffDocTableOfContents,
+} from '@daffodil/docs-utils';
+
+import { DaffioSidebarService } from '../../../core/sidebar/services/sidebar.service';
+import { DAFFIO_DOCS_LIST_SIDEBAR_ID } from '../../containers/docs-list/sidebar.provider';
+
+@Component({
+  selector: 'daffio-doc-article',
+  templateUrl: './component.html',
+  styleUrls: ['./component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DaffioDocArticleComponent {
+  faBars = faBars;
+
+  constructor(
+    private sidebarService: DaffioSidebarService,
+  ) {}
+
+  @Input() toc?: DaffDocTableOfContents;
+  @Input() breadcrumbs: Array<DaffBreadcrumb> = [];
+
+  open() {
+    this.sidebarService.open(DAFFIO_DOCS_LIST_SIDEBAR_ID);
+  }
+}