feat(dgeni,daffio): render package API doc exports (#2991)

Co-authored-by: xelaint <xelaint@gmail.com>

apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.ts

@@ -19,7 +19,7 @@ export class DaffioDocsHeaderContainer {
   links: any[] = [
     { path: '/docs/guides', title: 'Guides' },
     { path: '/docs/packages', title: 'Packages' },
-    { path: '/docs/api', title: 'API Index' },
+    { path: '/docs/api', title: 'API Reference' },
   ];
 
   constructor(private store: Store<any>) { }

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

@@ -13,6 +13,6 @@ export class DaffioDocsSidebarContentComponent {
   links: any[] = [
     { path: '/docs/guides', title: 'Guides' },
     { path: '/docs/packages', title: 'Packages' },
-    { path: '/docs/api', title: 'API Index' },
+    { path: '/docs/api', title: 'API Reference' },
   ];
 }

apps/daffio/src/app/docs/api/components/api-list-section/api-list-section-theme.scss

@@ -0,0 +1,20 @@
+@use 'theme' as daff-theme;
+
+@mixin daffio-api-list-section-theme($theme) {
+	$neutral: daff-theme.daff-map-deep-get($theme, 'core.neutral');
+	$base: daff-theme.daff-map-deep-get($theme, "core.base");
+	$base-contrast: daff-theme.daff-map-deep-get($theme, "core.base-contrast");
+
+	.daffio-api-list-section {
+		&__item {
+			&:focus {
+				box-shadow: 0 0 0 4px rgba($base-contrast, 0.1);
+				outline: none;
+			}
+
+			&:after {
+				background: daff-theme.daff-illuminate($base, $neutral, 2);
+			}
+		}
+	}
+}

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

@@ -0,0 +1,6 @@
+@for (childDoc of children; track childDoc.id) {
+  <a [routerLink]="childDoc.path" class="daffio-api-list-section__item" >
+    <div class="daffio-api-list-section__item-name">{{ childDoc.title }}</div>
+    <label class="daffio-api-list-section__item-label {{ childDoc.docType }}">{{ childDoc.docType }}</label>
+  </a>
+}

apps/daffio/src/app/docs/api/components/api-list-section/api-list-section.component.scss

@@ -0,0 +1,70 @@
+@use '../../../../../scss/type-descriptors/mixins' as type-mixin;
+@use 'utilities' as daff;
+
+$api-list-section-item-border-radius: 4px;
+
+:host {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 8px 24px;
+
+  @include daff.breakpoint(tablet) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include daff.breakpoint(small-laptop) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+	a {
+		text-decoration: none;
+	}
+}
+
+.daffio-api-list-section {
+	&__item {
+		display: flex;
+		align-items: center;
+		border-radius: $api-list-section-item-border-radius;
+		font-weight: normal;
+		justify-content: space-between;
+		overflow: hidden;
+		padding: 8px;
+		position: relative;
+
+		&::after {
+			content: '';
+			border-radius: $api-list-section-item-border-radius;
+			position: absolute;
+			left: 0;
+			top: 0;
+			height: 100%;
+			width: 100%;
+			opacity: 0;
+			transition: opacity 300ms;
+			z-index: 1;
+		}
+
+		&:hover {
+			&::after {
+				opacity: 1;
+			}
+		}
+	}
+
+	&__item-name {
+		@include daff.text-truncate();
+	}
+
+	&__item-label {
+		@include type-mixin.type-label();
+		height: 1.5rem;
+		padding: 4px;
+		margin-left: 16px;
+	}
+
+	&__item-name,
+	&__item-label {
+		z-index: 2;
+	}
+}

apps/daffio/src/app/docs/api/components/api-list-section/api-list-section.component.spec.ts

@@ -0,0 +1,85 @@
+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 { DaffioApiListSectionComponent } from './api-list-section.component';
+import { DaffioApiReference } from '../../models/api-reference';
+
+@Component({
+  template: `
+    <daffio-api-list-section [children]="apiListValue"></daffio-api-list-section>
+  `,
+  standalone: true,
+  imports: [
+    DaffioApiListSectionComponent,
+  ],
+})
+class WrapperComponent {
+  apiListValue: Array<DaffioApiReference> = [
+    {
+      id: 'name1Component',
+      title: 'title1Component',
+      path: 'path1',
+      docType: 'docType1',
+      docTypeShorthand: 'dt',
+      children: [],
+    },
+    {
+      id: 'name2Module',
+      title: 'title2Module',
+      path: 'path2',
+      docType: 'docType2',
+      docTypeShorthand: 'dt',
+      children: [],
+    },
+  ];
+}
+
+describe('DaffioApiListSectionComponent', () => {
+  let wrapper: WrapperComponent;
+  let fixture: ComponentFixture<WrapperComponent>;
+  let component: DaffioApiListSectionComponent;
+  let links;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        WrapperComponent,
+        RouterTestingModule,
+      ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WrapperComponent);
+    wrapper = fixture.componentInstance;
+    fixture.detectChanges();
+
+    component = fixture.debugElement.query(By.css('daffio-api-list-section')).componentInstance;
+    links = fixture.debugElement.queryAll(By.css('a'));
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should be able to take children as input', () => {
+    expect(component.children).toEqual(wrapper.apiListValue);
+  });
+
+  it('should render a link for every doc in children', () => {
+    expect(links.length).toEqual(component.children.length);
+  });
+
+  describe('on link', () => {
+    it('should set routerLink', () => {
+      expect(links[0].attributes['ng-reflect-router-link']).toEqual(component.children[0].path);
+    });
+  });
+});

apps/daffio/src/app/docs/api/components/api-list-section/api-list-section.component.ts

@@ -0,0 +1,28 @@
+import {
+  Component,
+  Input,
+  ChangeDetectionStrategy,
+  HostBinding,
+} from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+import { DaffioApiReference } from '../../models/api-reference';
+
+@Component({
+  selector: 'daffio-api-list-section',
+  templateUrl: './api-list-section.component.html',
+  styleUrls: ['./api-list-section.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    RouterLink,
+  ],
+})
+export class DaffioApiListSectionComponent {
+  @HostBinding('class.daffio-api-list-section') class = true;
+
+  /**
+   * A list of references for API documents.
+   */
+  @Input() children: Array<DaffioApiReference>;
+}

apps/daffio/src/app/docs/api/components/api-list/api-list-theme.scss

@@ -19,16 +19,5 @@
 				color: daff-theme.daff-illuminate($base-contrast, $neutral, 3);
 			}
 		}
-
-		&__item {
-			&:focus {
-				box-shadow: 0 0 0 4px rgba($base-contrast, 0.1);
-				outline: none;
-			}
-
-			&:after {
-				background: daff-theme.daff-illuminate($base, $neutral, 2);
-			}
-		}
 	}
 }

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

@@ -2,10 +2,5 @@
   <h2 class="daffio-api-list__package-name">
     <a [routerLink]="doc.path">{{ doc.title }}</a>
   </h2>
-  <div class="daffio-api-list__list">
-    <a *ngFor="let childDoc of doc.children" [routerLink]="childDoc.path" class="daffio-api-list__item" >
-      <div class="daffio-api-list__item-name">{{ childDoc.title }}</div>
-      <label class="daffio-api-list__item-label {{ childDoc.docType }}">{{ childDoc.docType }}</label>
-    </a>
-  </div>
+  <daffio-api-list-section [children]="doc.children"></daffio-api-list-section>
 </div>

apps/daffio/src/app/docs/api/components/api-list/api-list.component.scss

@@ -1,11 +1,10 @@
 @use '../../../../../scss/type-descriptors/mixins' as type-mixin;
 @use 'utilities' as daff;
 
-$api-list-item-border-radius: 4px;
-
 :host {
 	display: flex;
 	flex-direction: column;
+	gap: 48px;
 
 	a {
 		text-decoration: none;
@@ -16,18 +15,13 @@ $api-list-item-border-radius: 4px;
 	&__package {
 		display: flex;
 		flex-direction: column;
-		margin: 0 0 48px;
-
-		&:last-child {
-			margin: 0;
-		}
+		gap: 24px;
 	}
 
 	&__package-name {
 		font-size: 1.125rem;
 		font-weight: 600;
 		line-height: 1.375rem;
-		margin: 0 0 24px;
 
 		@include daff.breakpoint(mobile) {
 			font-size: 1.25rem;
@@ -42,63 +36,4 @@ $api-list-item-border-radius: 4px;
 			}
 		}
 	}
-
-	&__list {
-		display: grid;
-		grid-template-columns: 1fr;
-		grid-gap: 8px 24px;
-
-		@include daff.breakpoint(tablet) {
-			grid-template-columns: repeat(2, 1fr);
-		}
-
-		@include daff.breakpoint(small-laptop) {
-			grid-template-columns: repeat(3, 1fr);
-		}
-	}
-
-	&__item {
-		display: flex;
-		align-items: center;
-		border-radius: $api-list-item-border-radius;
-		justify-content: space-between;
-		overflow: hidden;
-		padding: 8px;
-		position: relative;
-
-		&::after {
-			content: '';
-			border-radius: $api-list-item-border-radius;
-			position: absolute;
-			left: 0;
-			top: 0;
-			height: 100%;
-			width: 100%;
-			opacity: 0;
-			transition: opacity 300ms;
-			z-index: 1;
-		}
-
-		&:hover {
-			&::after {
-				opacity: 1;
-			}
-		}
-	}
-
-	&__item-name {
-		@include daff.text-truncate();
-	}
-
-	&__item-label {
-		@include type-mixin.type-label();
-		height: 1.5rem;
-		padding: 4px;
-		margin-left: 16px;
-	}
-
-	&__item-name,
-	&__item-label {
-		z-index: 2;
-	}
 }