Skip to content

Commit 4edd95a

Browse files
authored
feat(daffio): dynamically render doc views (#3415)
1 parent dc9f467 commit 4edd95a

34 files changed

+396
-320
lines changed

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ import {
77
import { DaffDocKind } from '@daffodil/docs-utils';
88

99
import { DaffioApiListPageComponent } from './pages/api-list-page/api-list-page.component';
10-
import { DaffioApiPageComponent } from './pages/api-page/api-page.component';
1110
import { DaffioRoute } from '../../core/router/route.type';
1211
import { DAFFIO_DOCS_LIST_SIDEBAR_REGISTRATION } from '../containers/docs-list/sidebar.provider';
1312
import { daffioDocsIndexResolver } from '../index/resolver';
1413
import { DocsResolver } from '../resolvers/docs-resolver.service';
1514
import { DAFFIO_API_NAV_LIST_SIDEBAR_REGISTRATION } from './sidebar/provider';
15+
import { DaffioDocsPageComponent } from '../pages/docs-page/docs-page.component';
1616

1717
export const apiRoutes: Routes = [
1818
<DaffioRoute>{
@@ -33,7 +33,7 @@ export const apiRoutes: Routes = [
3333
},
3434
{
3535
path: '**',
36-
component: DaffioApiPageComponent,
36+
component: DaffioDocsPageComponent,
3737
resolve: {
3838
doc: DocsResolver,
3939
},

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

+4-5
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,26 @@ import { DaffContainerModule } from '@daffodil/design/container';
66

77
import { DaffioDocsApiRoutingModule } from './api-routing.module';
88
import { DaffioApiListModule } from './components/api-list/api-list.module';
9+
import { daffioDocsApiComponentProvider } from './components/doc/provider';
910
import { DaffioApiListPageComponent } from './pages/api-list-page/api-list-page.component';
10-
import { DaffioApiPageComponent } from './pages/api-page/api-page.component';
11-
import { DaffioDocViewerModule } from '../components/doc-viewer/doc-viewer.module';
1211

1312
@NgModule({
1413
imports: [
1514
CommonModule,
1615
DaffArticleModule,
1716
DaffioDocsApiRoutingModule,
1817
DaffioApiListModule,
19-
DaffioDocViewerModule,
2018

2119
DaffContainerModule,
2220
],
2321
declarations: [
2422
DaffioApiListPageComponent,
25-
DaffioApiPageComponent,
2623
],
2724
exports: [
2825
DaffioApiListPageComponent,
29-
DaffioApiPageComponent,
26+
],
27+
providers: [
28+
daffioDocsApiComponentProvider(),
3029
],
3130
})
3231
export class DaffioApiModule {}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ <h1 class="daffio-api-package__package-name">{{doc.title}}</h1>
55
<p class="daffio-api-package__package-description">{{doc.description}}</p>
66
}
77
</div>
8-
<daffio-api-list-section [children]="doc.children | apiPackageFilter:true" class="daffio-doc-viewer__api-section"></daffio-api-list-section>
8+
<daffio-api-list-section [children]="doc.children | apiPackageFilter:true"></daffio-api-list-section>
99
</div>
1010

1111
@for (package of doc.children | apiPackageFilter; track package.id) {
1212
<div class="daffio-api-package__wrapper">
1313
<h2 class="daffio-api-package__subpackage-name">
1414
<a [routerLink]="package.path">{{package.title}}</a>
1515
</h2>
16-
<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>
16+
<daffio-api-list-section [children]="package.children | apiPackageFilter:true" [attr.data-section-for-subpackage]="package.id"></daffio-api-list-section>
1717
</div>
1818
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<daffio-doc-article [breadcrumbs]="doc().breadcrumbs">
2+
@if (isApiPackage()) {
3+
<daffio-api-package [doc]="doc()"></daffio-api-package>
4+
} @else {
5+
<div [innerHTML]="doc().contents | safe"></div>
6+
}
7+
</daffio-doc-article>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import {
2+
Component,
3+
ChangeDetectionStrategy,
4+
input,
5+
computed,
6+
} from '@angular/core';
7+
import { DaffioSafeHtmlPipe } from 'apps/daffio/src/app/core/html-sanitizer/safe.pipe';
8+
9+
import {
10+
DaffApiDoc,
11+
DaffDocKind,
12+
} from '@daffodil/docs-utils';
13+
14+
import { DaffioDocArticleModule } from '../../../components/doc-article/module';
15+
import { DaffioDocComponent } from '../../../components/doc-renderer/component.type';
16+
import { DaffioApiPackageComponent } from '../api-package/api-package.component';
17+
18+
@Component({
19+
selector: 'daffio-api-doc',
20+
templateUrl: './component.html',
21+
changeDetection: ChangeDetectionStrategy.OnPush,
22+
standalone: true,
23+
imports: [
24+
DaffioDocArticleModule,
25+
DaffioApiPackageComponent,
26+
DaffioSafeHtmlPipe,
27+
],
28+
})
29+
export class DaffioDocApiComponent implements DaffioDocComponent<DaffApiDoc> {
30+
static readonly kind = DaffDocKind.API;
31+
32+
readonly isApiPackage = computed(() => this.doc().docType === 'package');
33+
34+
doc = input<DaffApiDoc>();
35+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { DaffioDocApiComponent } from './component';
2+
import { provideDaffioDocRendererComponents } from '../../../components/doc-renderer/token';
3+
4+
export const daffioDocsApiComponentProvider = () => provideDaffioDocRendererComponents(DaffioDocApiComponent);

apps/daffio/src/app/docs/api/pages/api-page/api-page.component.html

-1
This file was deleted.

apps/daffio/src/app/docs/api/pages/api-page/api-page.component.spec.ts

-70
This file was deleted.

apps/daffio/src/app/docs/api/pages/api-page/api-page.component.ts

-29
This file was deleted.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<button class="daffio-doc-article__menu-button" (click)="open()">
2+
<fa-icon [icon]="faBars"></fa-icon>
3+
<div>Menu</div>
4+
</button>
5+
<div class="daffio-doc-article__grid">
6+
<div class="daffio-doc-article__content">
7+
<daff-article>
8+
@if (breadcrumbs.length > 0) {
9+
<nav aria-label="Breadcrumb">
10+
<ol daff-breadcrumb>
11+
@for (breadcrumb of breadcrumbs(); track $index) {
12+
<li daffBreadcrumbItem [active]="$last">
13+
@if ($last) {
14+
{{breadcrumb.label}}
15+
} @else {
16+
<a [routerLink]="breadcrumb.path">{{breadcrumb.label}}</a>
17+
}
18+
</li>
19+
}
20+
</ol>
21+
</nav>
22+
}
23+
24+
<ng-content></ng-content>
25+
</daff-article>
26+
</div>
27+
@if (toc) {
28+
<daffio-docs-table-of-contents
29+
class="daffio-doc-article__table-of-contents"
30+
[tableOfContents]="toc">
31+
</daffio-docs-table-of-contents>
32+
}
33+
</div>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
margin: 0 auto;
77
}
88

9-
.daffio-doc-viewer {
9+
.daffio-doc-article {
1010
&__grid {
1111
padding: 24px;
1212

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { Component } from '@angular/core';
2+
import {
3+
ComponentFixture,
4+
TestBed,
5+
waitForAsync,
6+
} from '@angular/core/testing';
7+
import { By } from '@angular/platform-browser';
8+
import { RouterTestingModule } from '@angular/router/testing';
9+
import { provideMockStore } from '@ngrx/store/testing';
10+
11+
import { DAFF_ARTICLE_COMPONENTS } from '@daffodil/design/article';
12+
import {
13+
DaffApiPackageDoc,
14+
DaffBreadcrumb,
15+
DaffDocTableOfContents,
16+
} from '@daffodil/docs-utils';
17+
18+
import { DaffioDocArticleComponent } from './component';
19+
import { DaffioApiPackageComponent } from '../../api/components/api-package/api-package.component';
20+
import { DaffioDocsFactory } from '../../testing/factories/docs.factory';
21+
import { DaffioDocsTableOfContentsModule } from '../table-of-contents/table-of-contents.module';
22+
23+
@Component({
24+
template: `<daffio-doc-article
25+
[toc]="tocValue"
26+
[breadcrumbs]="breadcrumbsValue"
27+
></daffio-doc-article>`,
28+
})
29+
class WrapperComponent {
30+
tocValue: DaffDocTableOfContents;
31+
breadcrumbsValue: Array<DaffBreadcrumb>;
32+
}
33+
34+
describe('DaffioDocArticleComponent', () => {
35+
let component: DaffioDocArticleComponent;
36+
let fixture: ComponentFixture<WrapperComponent>;
37+
let wrapper: WrapperComponent;
38+
const docFactory = new DaffioDocsFactory();
39+
40+
beforeEach(waitForAsync(() => {
41+
TestBed.configureTestingModule({
42+
imports: [
43+
RouterTestingModule,
44+
DAFF_ARTICLE_COMPONENTS,
45+
DaffioDocsTableOfContentsModule,
46+
DaffioApiPackageComponent,
47+
],
48+
declarations: [
49+
WrapperComponent,
50+
DaffioDocArticleComponent,
51+
],
52+
providers: [
53+
provideMockStore(),
54+
],
55+
})
56+
.compileComponents();
57+
}));
58+
59+
beforeEach(() => {
60+
fixture = TestBed.createComponent(WrapperComponent);
61+
wrapper = fixture.componentInstance;
62+
wrapper.tocValue = [];
63+
wrapper.breadcrumbsValue = [];
64+
fixture.detectChanges();
65+
66+
component = fixture.debugElement.query(By.directive(DaffioDocArticleComponent)).componentInstance;
67+
});
68+
69+
it('should create', () => {
70+
expect(wrapper).toBeTruthy();
71+
});
72+
73+
it('should take toc as an input', () => {
74+
expect(component.toc).toEqual(wrapper.tocValue);
75+
});
76+
77+
it('should take breadcrumbs as an input', () => {
78+
expect(component.breadcrumbs).toEqual(wrapper.breadcrumbsValue);
79+
});
80+
});
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import {
2+
Component,
3+
ChangeDetectionStrategy,
4+
Input,
5+
} from '@angular/core';
6+
import { faBars } from '@fortawesome/free-solid-svg-icons';
7+
8+
import {
9+
DaffBreadcrumb,
10+
DaffDocTableOfContents,
11+
} from '@daffodil/docs-utils';
12+
13+
import { DaffioSidebarService } from '../../../core/sidebar/services/sidebar.service';
14+
import { DAFFIO_DOCS_LIST_SIDEBAR_ID } from '../../containers/docs-list/sidebar.provider';
15+
16+
@Component({
17+
selector: 'daffio-doc-article',
18+
templateUrl: './component.html',
19+
styleUrls: ['./component.scss'],
20+
changeDetection: ChangeDetectionStrategy.OnPush,
21+
})
22+
export class DaffioDocArticleComponent {
23+
faBars = faBars;
24+
25+
constructor(
26+
private sidebarService: DaffioSidebarService,
27+
) {}
28+
29+
@Input() toc?: DaffDocTableOfContents;
30+
@Input() breadcrumbs: Array<DaffBreadcrumb> = [];
31+
32+
open() {
33+
this.sidebarService.open(DAFFIO_DOCS_LIST_SIDEBAR_ID);
34+
}
35+
}

0 commit comments

Comments
 (0)