Skip to content

Commit 1244f49

Browse files
griest024griest024
authored
feat(daffio): add dynamic API components (#3631)
1 parent fccbe25 commit 1244f49

40 files changed

Lines changed: 871 additions & 0 deletions

‎apps/daffio/src/app/docs/api/components/api-default-content/api-default-content.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<daffio-docs-api-base-content [doc]="doc()" [child]="child()"></daffio-docs-api-base-content>

‎apps/daffio/src/app/docs/api/components/api-default-content/api-default-content.component.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import {
2+
Component,
3+
ChangeDetectionStrategy,
4+
input,
5+
} from '@angular/core';
6+
7+
import { DaffApiDoc } from '@daffodil/docs-utils';
8+
9+
import { DaffioDocsApiDynamicContent } from '../../dynamic-content/dynamic-content.type';
10+
import { DaffioDocsApiBaseContentComponent } from '../fragments/api-base-content/api-base-content.component';
11+
12+
@Component({
13+
selector: 'daffio-docs-api-default-content',
14+
templateUrl: './api-default-content.component.html',
15+
changeDetection: ChangeDetectionStrategy.OnPush,
16+
imports: [
17+
DaffioDocsApiBaseContentComponent,
18+
],
19+
})
20+
export class DaffioDocsApiDefaultContentComponent<T extends DaffApiDoc = DaffApiDoc> implements DaffioDocsApiDynamicContent<T> {
21+
doc = input<T>();
22+
child = input(false);
23+
}

‎apps/daffio/src/app/docs/api/components/fragments/api-base-content/api-base-content.component.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@if (child()) {
2+
<h3 [attr.id]="doc().slug">{{doc().name}}</h3>
3+
} @else {
4+
<h1 [attr.id]="doc().slug">{{doc().name}}</h1>
5+
}
6+
<p [innerHTML]="doc().importExample | safe"></p>
7+
<div [innerHTML]="doc().description | safe"></div>
8+
<div [innerHTML]="doc().sourceApiBlock | safe"></div>
9+
<ng-content></ng-content>
10+
@if (!child()) {
11+
@if (doc().examples.length > 0) {
12+
<h2 id="examples">Examples</h2>
13+
}
14+
@for (example of doc().examples; track example.id) {
15+
<h3 [attr.id]="example.id">{{example.caption}}</h3>
16+
<div [innerHTML]="example.body | safe"></div>
17+
}
18+
}

‎apps/daffio/src/app/docs/api/components/fragments/api-base-content/api-base-content.component.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import {
2+
Component,
3+
ChangeDetectionStrategy,
4+
input,
5+
} from '@angular/core';
6+
7+
import {
8+
DaffApiDocBase,
9+
DaffApiType,
10+
} from '@daffodil/docs-utils';
11+
12+
import { DaffioSafeHtmlPipe } from '../../../../../core/html-sanitizer/safe.pipe';
13+
import { DaffioDocsApiDynamicContent } from '../../../dynamic-content/dynamic-content.type';
14+
15+
@Component({
16+
selector: 'daffio-docs-api-base-content',
17+
templateUrl: './api-base-content.component.html',
18+
changeDetection: ChangeDetectionStrategy.OnPush,
19+
imports: [
20+
DaffioSafeHtmlPipe,
21+
],
22+
})
23+
export class DaffioDocsApiBaseContentComponent implements DaffioDocsApiDynamicContent<DaffApiDocBase> {
24+
static role;
25+
26+
doc = input<DaffApiType>();
27+
child = input(false);
28+
}

‎apps/daffio/src/app/docs/api/components/fragments/api-base-content/api-base-content.provider.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { DaffDocsApiRole } from '@daffodil/docs-utils';
2+
3+
import { DaffioDocsApiBaseContentComponent } from './api-base-content.component';
4+
import { provideDaffioDocsApiDynamicContentMultiComponent } from '../../../dynamic-content/dynamic-content-components.token';
5+
6+
export const provideDaffioDocsApiBaseContentComponent = () => provideDaffioDocsApiDynamicContentMultiComponent(
7+
DaffioDocsApiBaseContentComponent,
8+
DaffDocsApiRole.CONSTANT,
9+
);

‎apps/daffio/src/app/docs/api/components/fragments/api-directive-content/api-directive-content-theme.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@use 'theme' as daff-theme;
2+
3+
@mixin daffio-api-directive-content-theme($theme) {
4+
$primary: daff-theme.daff-map-get(daff-theme.$theme, primary);
5+
$secondary: daff-theme.daff-map-get(daff-theme.$theme, secondary);
6+
7+
.daffio-docs-api-directive-content {
8+
&__input-icon {
9+
color: daff-theme.daff-color($primary);
10+
}
11+
12+
&__output-icon {
13+
color: daff-theme.daff-color($secondary);
14+
}
15+
}
16+
}

‎apps/daffio/src/app/docs/api/components/fragments/api-directive-content/api-directive-content.component.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<daffio-docs-api-type-content [child]="child()" [doc]="doc()">
2+
@if (doc().inputs.length > 0) {
3+
@if (child()) {
4+
<h4 class="daffio-docs-api-directive-content__heading"><fa-icon [icon]="faChevronRight" class="daffio-docs-api-directive-content__input-icon"></fa-icon> Inputs</h4>
5+
} @else {
6+
<h2 class="daffio-docs-api-directive-content__heading"><fa-icon [icon]="faChevronRight" class="daffio-docs-api-directive-content__input-icon"></fa-icon> Inputs</h2>
7+
}
8+
<div class="daffio-docs-api-directive-content__member-grid">
9+
@for (input of doc().inputs; track $index) {
10+
<daffio-docs-api-property-block [prop]="input"></daffio-docs-api-property-block>
11+
}
12+
</div>
13+
}
14+
@if (doc().outputs.length > 0) {
15+
@if (child()) {
16+
<h4 class="daffio-docs-api-directive-content__heading"><fa-icon [icon]="faChevronLeft" class="daffio-docs-api-directive-content__output-icon"></fa-icon> Outputs</h4>
17+
} @else {
18+
<h2 class="daffio-docs-api-directive-content__heading"><fa-icon [icon]="faChevronLeft" class="daffio-docs-api-directive-content__output-icon"></fa-icon> Outputs</h2>
19+
}
20+
<div class="daffio-docs-api-directive-content__member-grid">
21+
@for (output of doc().outputs; track $index) {
22+
<daffio-docs-api-property-block [prop]="output"></daffio-docs-api-property-block>
23+
}
24+
</div>
25+
}
26+
</daffio-docs-api-type-content>

‎apps/daffio/src/app/docs/api/components/fragments/api-directive-content/api-directive-content.component.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.daffio-docs-api-directive-content {
2+
&__member-grid {
3+
display: flex;
4+
flex-direction: column;
5+
gap: 2rem;
6+
margin: 2rem 0 0;
7+
}
8+
9+
&__heading {
10+
display: flex;
11+
flex-wrap: wrap;
12+
gap: 0.75rem;
13+
}
14+
}

‎apps/daffio/src/app/docs/api/components/fragments/api-directive-content/api-directive-content.component.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import {
2+
Component,
3+
ChangeDetectionStrategy,
4+
input,
5+
} from '@angular/core';
6+
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
7+
import {
8+
faChevronLeft,
9+
faChevronRight,
10+
} from '@fortawesome/free-solid-svg-icons';
11+
12+
import {
13+
DaffApiDirective,
14+
DaffDocsApiRole,
15+
} from '@daffodil/docs-utils';
16+
17+
import { DaffioDocsApiDynamicContent } from '../../../dynamic-content/dynamic-content.type';
18+
import { DaffioDocsApiPropertyBlockComponent } from '../../property-block/property-block.component';
19+
import { DaffioDocsApiTypeContentComponent } from '../api-type-content/api-type-content.component';
20+
21+
@Component({
22+
selector: 'daffio-docs-api-directive-content',
23+
templateUrl: './api-directive-content.component.html',
24+
styleUrl: './api-directive-content.component.scss',
25+
changeDetection: ChangeDetectionStrategy.OnPush,
26+
imports: [
27+
DaffioDocsApiTypeContentComponent,
28+
DaffioDocsApiPropertyBlockComponent,
29+
FaIconComponent,
30+
],
31+
})
32+
export class DaffioDocsApiDirectiveContentComponent implements DaffioDocsApiDynamicContent<DaffApiDirective> {
33+
faChevronRight = faChevronRight;
34+
faChevronLeft = faChevronLeft;
35+
36+
static role = DaffDocsApiRole.DIRECTIVE;
37+
38+
doc = input<DaffApiDirective>();
39+
child = input(false);
40+
}

‎apps/daffio/src/app/docs/api/components/fragments/api-directive-content/api-directive-content.provider.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { DaffDocsApiRole } from '@daffodil/docs-utils';
2+
3+
import { DaffioDocsApiDirectiveContentComponent } from './api-directive-content.component';
4+
import { provideDaffioDocsApiDynamicContentMultiComponent } from '../../../dynamic-content/dynamic-content-components.token';
5+
6+
export const provideDaffioDocsApiDirectiveContentComponent = () => provideDaffioDocsApiDynamicContentMultiComponent(
7+
DaffioDocsApiDirectiveContentComponent,
8+
DaffDocsApiRole.DIRECTIVE,
9+
DaffDocsApiRole.COMPONENT,
10+
);

0 commit comments

Comments
 (0)