feat(daffio): add design docs route

apps/daffio/src/app/core/router/route.type.ts

@@ -16,5 +16,6 @@ export interface DaffioRoute extends Route {
   & DaffioRouteWithSidebars['data']
   & {
     docKind?: DaffDocKind;
+    docPrefix?: string;
   };
 }

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

@@ -26,9 +26,6 @@ export const apiRoutes: Routes = [
       {
         path: '',
         component: DaffioApiListPageComponent,
-        resolve: {
-          reference: () => inject(DaffioDocsIndexService).getList(DaffDocKind.API),
-        },
       },
       {
         path: '**',

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

@@ -1,28 +1,21 @@
 import {
   Component,
   Input,
-  Injectable,
 } from '@angular/core';
 import {
   ComponentFixture,
   TestBed,
   waitForAsync,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { cold } from 'jasmine-marbles';
-import { BehaviorSubject } from 'rxjs';
+import { of } from 'rxjs';
 
 import { DaffioApiListPageComponent } from './api-list-page.component';
+import { DaffioDocsIndexService } from '../../../services/index.service';
 import { DaffioApiListComponent } from '../../components/api-list/api-list.component';
 import { DaffioApiReference } from '../../models/api-reference';
 
-@Injectable({ providedIn: 'root' })
-class ActivatedRouteStub {
-  data = new BehaviorSubject({});
-};
-
 @Component({
   template: '',
   selector: 'daffio-api-list',
@@ -34,7 +27,7 @@ class MockDaffioApiListComponent {
 describe('DaffioApiListPageComponent', () => {
   let component: DaffioApiListPageComponent;
   let fixture: ComponentFixture<DaffioApiListPageComponent>;
-  let activatedRoute: ActivatedRouteStub;
+  let indexServiceSpy: jasmine.SpyObj<DaffioDocsIndexService>;
 
   const stubDocsList: DaffioApiReference = {
     id: 'id',
@@ -62,6 +55,8 @@ describe('DaffioApiListPageComponent', () => {
   };
 
   beforeEach(waitForAsync(() => {
+    indexServiceSpy = jasmine.createSpyObj('DaffioDocsIndexService', ['getList']);
+
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule,
@@ -71,16 +66,17 @@ describe('DaffioApiListPageComponent', () => {
         DaffioApiListPageComponent,
       ],
       providers: [
-        { provide: ActivatedRoute, useExisting: ActivatedRouteStub },
+        {
+          provide: DaffioDocsIndexService,
+          useValue: indexServiceSpy,
+        },
       ],
     })
       .compileComponents();
   }));
 
   beforeEach(() => {
-    activatedRoute = TestBed.inject(ActivatedRouteStub);
-    activatedRoute.data.next({ reference: stubDocsList });
-
+    indexServiceSpy.getList.and.returnValue(of(stubDocsList));
     fixture = TestBed.createComponent(DaffioApiListPageComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
@@ -90,17 +86,10 @@ describe('DaffioApiListPageComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should initialize apiList$ from a route resolver', () => {
-    const expected = cold('b', { b: stubDocsList });
-    expect(component.apiList$).toBeObservable(expected);
-  });
-
   describe('on <daffio-api-list>', () => {
     let apiListComponent: DaffioApiListComponent;
 
     beforeEach(() => {
-      activatedRoute.data.next({ reference: stubDocsList });
-      fixture.detectChanges();
       apiListComponent = fixture.debugElement.query(By.css('daffio-api-list')).componentInstance;
     });
 

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

@@ -3,10 +3,9 @@ import {
   Component,
   OnInit,
 } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
 
+import { DaffioDocsIndexService } from '../../../services/index.service';
 import { DaffioApiReference } from '../../models/api-reference';
 
 @Component({
@@ -21,11 +20,11 @@ export class DaffioApiListPageComponent implements OnInit {
    */
   apiList$: Observable<DaffioApiReference>;
 
-  constructor(private route: ActivatedRoute) { }
+  constructor(
+    private index: DaffioDocsIndexService<DaffioApiReference>,
+  ) { }
 
   ngOnInit() {
-    this.apiList$ = this.route.data.pipe(
-      map((data: { reference: DaffioApiReference }) => data.reference),
-    );
+    this.apiList$ = this.index.getList();
   }
 }

apps/daffio/src/app/docs/containers/docs-list/docs-list.component.ts

@@ -4,17 +4,8 @@ import {
   Component,
   OnInit,
 } from '@angular/core';
-import {
-  distinctUntilChanged,
-  map,
-  Observable,
-  switchMap,
-  tap,
-} from 'rxjs';
-
-import { DaffRouterActivatedRoute } from '@daffodil/router';
+import { Observable } from 'rxjs';
 
-import { DaffioRoute } from '../../../core/router/route.type';
 import { DaffioDocsListComponent } from '../../components/docs-list/docs-list.component';
 import { DaffioDocList } from '../../models/doc-list';
 import { DaffioDocsIndexService } from '../../services/index.service';
@@ -36,16 +27,10 @@ export class DaffioDocsListContainer implements OnInit {
   docsList$: Observable<DaffioDocList>;
 
   constructor(
-    private route: DaffRouterActivatedRoute,
     private index: DaffioDocsIndexService,
   ) {}
 
   ngOnInit() {
-    this.docsList$ = this.route.route$.pipe(
-      switchMap((route) => route.data),
-      map((data: DaffioRoute['data']) => data.docKind),
-      distinctUntilChanged(),
-      switchMap((kind) => this.index.getList(kind)),
-    );
+    this.docsList$ = this.index.getList();
   }
 }

apps/daffio/src/app/docs/design/containers/docs-list/docs-list.component.html

@@ -0,0 +1 @@
+<daffio-docs-list [list]="docsList$ | async"></daffio-docs-list>

apps/daffio/src/app/docs/design/containers/docs-list/docs-list.component.spec.ts

@@ -0,0 +1,39 @@
+import {
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import {
+  waitForAsync,
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { DaffioDocsDesignListContainer } from './docs-list.component';
+
+describe('DaffioDocsDesignListContainer', () => {
+  let component: DaffioDocsDesignListContainer;
+  let fixture: ComponentFixture<DaffioDocsDesignListContainer>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [DaffioDocsDesignListContainer,
+        RouterTestingModule,
+        NoopAnimationsModule],
+      providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DaffioDocsDesignListContainer);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/daffio/src/app/docs/design/containers/docs-list/docs-list.component.ts

@@ -0,0 +1,36 @@
+import { AsyncPipe } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+} from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { DaffioDocsListComponent } from '../../../components/docs-list/docs-list.component';
+import { DaffioDocList } from '../../../models/doc-list';
+import { DaffioDocsDesignIndexService } from '../../services/index.service';
+
+@Component({
+  selector: 'daffio-docs-design-list-container',
+  templateUrl: './docs-list.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    DaffioDocsListComponent,
+  ],
+  providers: [
+    DaffioDocsDesignIndexService,
+  ],
+})
+export class DaffioDocsDesignListContainer implements OnInit {
+  docsList$: Observable<DaffioDocList>;
+
+  constructor(
+    private index: DaffioDocsDesignIndexService,
+  ) {}
+
+  ngOnInit() {
+    this.docsList$ = this.index.getList();
+  }
+}

apps/daffio/src/app/docs/design/containers/docs-list/sidebar.provider.ts

@@ -0,0 +1,12 @@
+import { DaffioDocsDesignListContainer } from './docs-list.component';
+import { DaffioSidebarFooterComponent } from '../../../../core/sidebar/components/sidebar-footer/sidebar-footer.component';
+import { DaffioSidebarHeaderComponent } from '../../../../core/sidebar/components/sidebar-header/sidebar-header.component';
+
+export const DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_ID = 'daffioDocsList';
+
+export const DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_REGISTRATION = {
+  id: DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_ID,
+  header: DaffioSidebarHeaderComponent,
+  body: DaffioDocsDesignListContainer,
+  footer: DaffioSidebarFooterComponent,
+};

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

@@ -0,0 +1,68 @@
+import { NgModule } from '@angular/core';
+import {
+  Routes,
+  RouterModule,
+} from '@angular/router';
+
+import { DaffSidebarModeEnum } from '@daffodil/design/sidebar';
+import {
+  DAFF_DOC_KIND_PATH_SEGMENT_MAP,
+  DAFF_DOCS_DESIGN_PATH,
+  DAFF_DOCS_PATH,
+  DaffDocKind,
+} from '@daffodil/docs-utils';
+
+import { DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_REGISTRATION } from './containers/docs-list/sidebar.provider';
+import { DaffioDocsDesignOverviewPageComponent } from './pages/overview/overview.component';
+import { DAFF_NAV_SIDEBAR_REGISTRATION } from '../../core/nav/sidebar.provider';
+import { DaffioRoute } from '../../core/router/route.type';
+import { DaffioDocsPageComponent } from '../pages/docs-page/docs-page.component';
+import { DocsResolver } from '../resolvers/docs-resolver.service';
+
+export const docsDesignRoutes: Routes = [
+  <DaffioRoute>{
+    path: '',
+    data: {
+      docPrefix: `${DAFF_DOCS_PATH}/${DAFF_DOCS_DESIGN_PATH}`,
+      daffioSidebars: {
+        [DAFF_NAV_SIDEBAR_REGISTRATION.id]: DAFF_NAV_SIDEBAR_REGISTRATION,
+        [DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_REGISTRATION.id]: DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_REGISTRATION,
+      },
+      daffioDockedSidebar: DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_REGISTRATION.id,
+      // daffNamedViews: {
+      //   [DaffioRouterNamedViewsEnum.FOOTER]: DaffioSimpleFooterComponent,
+      // },
+    },
+    children: [
+      {
+        path: DAFF_DOC_KIND_PATH_SEGMENT_MAP[DaffDocKind.API],
+        loadChildren: () => import('../api/api.module').then(m => m.DaffioApiModule),
+      },
+      {
+        path: '',
+        pathMatch: 'full',
+        component: DaffioDocsDesignOverviewPageComponent,
+      },
+      <DaffioRoute>{
+        path: '**',
+        component: DaffioDocsPageComponent,
+        resolve: {
+          doc: DocsResolver,
+        },
+        data: {
+          sidebarMode: DaffSidebarModeEnum.SideFixed,
+        },
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(docsDesignRoutes),
+  ],
+  exports: [
+    RouterModule,
+  ],
+})
+export class DaffioDocsDesignRoutingModule { }

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

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+
+import { DaffioDocsDesignRoutingModule } from './design-routing.module';
+
+@NgModule({
+  imports: [
+    DaffioDocsDesignRoutingModule,
+  ],
+})
+export class DaffioDocsDesignModule {}

apps/daffio/src/app/docs/design/pages/overview/overview.component.html

@@ -0,0 +1,5 @@
+<daff-container size="md">
+	<h1 class="daffio-docs-design-overview__title">Daffodil Design</h1>
+	<p class="daffio-docs-design-overview__subtitle">Design and build seamless, intuitive, and accessible experiences with Daffodil Design System — an open-source library built with Angular.</p>
+	<a daff-button color="primary" routerLink="./getting-started">Get started</a>
+</daff-container>

apps/daffio/src/app/docs/design/pages/overview/overview.component.scss

@@ -0,0 +1,25 @@
+@use 'utilities' as daff;
+
+:host {
+	display: block;
+	padding: 48px 24px;
+
+	@include daff.breakpoint(tablet) {
+		padding: 48px 96px;
+	}
+}
+
+.daffio-docs-design-overview {
+	&__title {
+		@include daff.headline-xl();
+		margin: 0 0 16px;
+		padding: 0;
+	}
+
+	&__subtitle {
+		@include daff.body-lg;
+		font-weight: 400;
+		margin: 0 0 32px;
+		padding: 0;
+	}
+}