feat(daffio): add pakcages list sidebar

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

@@ -9,7 +9,7 @@ import { DaffioApiListModule } from './components/api-list/api-list.module';
 import { DaffioApiListPageComponent } from './pages/api-list-page/api-list-page.component';
 import { DaffioApiPageComponent } from './pages/api-page/api-page.component';
 import { DaffioDocViewerModule } from '../docs/components/doc-viewer/doc-viewer.module';
-import { DaffioDocsSidebarModule } from '../docs/containers/sidebar/sidebar.module';
+import { DaffioDocsPackagesSidebarComponentModule } from '../guides/components/packages-sidebar/packages-sidebar.module';
 
 @NgModule({
   imports: [
@@ -18,7 +18,7 @@ import { DaffioDocsSidebarModule } from '../docs/containers/sidebar/sidebar.modu
     DaffioDocsApiRoutingModule,
     DaffioApiListModule,
     DaffioDocViewerModule,
-    DaffioDocsSidebarModule,
+    DaffioDocsPackagesSidebarComponentModule,
 
     DaffContainerModule,
   ],

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

@@ -13,6 +13,7 @@ import { DaffioMarketingSidebarContentComponent } from './core/sidebar/component
 import { DaffioMarketingSidebarFooterComponent } from './core/sidebar/components/marketing-sidebar/marketing-sidebar-footer/marketing-sidebar-footer.component';
 import { DaffioMarketingSidebarHeaderComponent } from './core/sidebar/components/marketing-sidebar/marketing-sidebar-header/marketing-sidebar-header.component';
 import { TemplateComponent } from './core/template/template.component';
+import { DaffioDocsPackagesSidebarComponent } from './guides/components/packages-sidebar/packages-sidebar.component';
 import { DaffioRouterNamedViewsEnum } from './named-views/models/named-views.enum';
 
 export const appRoutes: Routes = [
@@ -57,7 +58,7 @@ export const appRoutes: Routes = [
         data: {
           daffNamedViews: {
             [DaffioRouterNamedViewsEnum.NAV]: DaffioDocsHeaderContainer,
-            [DaffioRouterNamedViewsEnum.SIDEBAR]: DaffioDocsSidebarComponent,
+            [DaffioRouterNamedViewsEnum.SIDEBARCONTENT]: DaffioDocsPackagesSidebarComponent,
           },
         },
       },

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

@@ -20,6 +20,7 @@ import { DaffioMarketingHeaderContainerModule } from './core/header/containers/m
 import { DaffioDocsSidebarComponentModule } from './core/sidebar/components/docs-sidebar/docs-sidebar.module';
 import { DaffioMarketingSidebarComponentModule } from './core/sidebar/components/marketing-sidebar/marketing-sidebar.module';
 import { TemplateModule } from './core/template/template.module';
+import { DaffioDocsPackagesSidebarComponentModule } from './guides/components/packages-sidebar/packages-sidebar.module';
 import { environment } from '../environments/environment';
 
 @NgModule({
@@ -36,6 +37,7 @@ import { environment } from '../environments/environment';
     DaffioDocsHeaderContainerModule,
     DaffioMarketingSidebarComponentModule,
     DaffioDocsSidebarComponentModule,
+    DaffioDocsPackagesSidebarComponentModule,
 
     //Make sure this loads after Router and Store
     StoreRouterConnectingModule.forRoot({ serializer: FullRouterStateSerializer,

apps/daffio/src/app/core/sidebar/effects/sidebar-routing-mode.effects.ts

@@ -31,7 +31,7 @@ export class DaffioSidebarRoutingModeEffects {
 
   changeModeWhenVisitingConfiguredRoute$ = createEffect(() => (): Observable<Action> => combineLatest(
     this.actions$.pipe<RouterNavigatedAction>(ofType(ROUTER_NAVIGATED)),
-    this.breakpointsObserver.observe(DaffBreakpoints.TABLET),
+    this.breakpointsObserver.observe(DaffBreakpoints.BIG_TABLET),
   ).pipe(
     map(([action, state]) => {
       const mode = computeDeepestSidebarMode(action.payload.routerState.root);

apps/daffio/src/app/core/sidebar/sidebar.module.ts

@@ -9,7 +9,7 @@ import { DaffRouterNamedViewOutletModule } from '@daffodil/router';
 
 import { DaffioSidebarViewportContainer } from './containers/sidebar-viewport/sidebar-viewport.component';
 import { DaffioSidebarStateModule } from './sidebar.state.module';
-import { DaffioGuidesNavModule } from '../../guides/components/guides-nav/guides-nav.module';
+import { DaffioDocsPackagesListContainerModule } from '../../guides/containers/packages-list/packages-list.module';
 
 @NgModule({
   imports: [
@@ -21,7 +21,7 @@ import { DaffioGuidesNavModule } from '../../guides/components/guides-nav/guides
     DaffButtonModule,
 
     DaffioSidebarStateModule,
-    DaffioGuidesNavModule,
+    DaffioDocsPackagesListContainerModule,
     DaffRouterNamedViewOutletModule,
   ],
   declarations: [

apps/daffio/src/app/guides/components/packages-list/packages-list.component.html

@@ -0,0 +1,9 @@
+<ul daff-tree [tree]="_tree" *ngIf="_tree">
+	<ng-template #daffTreeItemWithChildrenTpl let-node>
+			<button daffTreeItem [node]="node">{{ node.title }} </button>
+	</ng-template>
+
+	<ng-template #daffTreeItemTpl let-node>
+			<a daffTreeItem [node]="node" [routerLink]="node.url">{{ node.title }}</a>
+	</ng-template>
+</ul>

apps/daffio/src/app/guides/components/packages-list/packages-list.component.spec.ts

@@ -0,0 +1,74 @@
+import {
+  waitForAsync,
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { DaffTreeModule } from '@daffodil/design/tree';
+
+import { DaffioGuidesNavComponent } from './guides-nav.component';
+
+describe('DaffioGuidesNavComponent', () => {
+  let component: DaffioGuidesNavComponent;
+  let fixture: ComponentFixture<DaffioGuidesNavComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        DaffioGuidesNavComponent,
+      ],
+      imports: [
+        RouterTestingModule,
+        NoopAnimationsModule,
+        DaffTreeModule,
+      ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DaffioGuidesNavComponent);
+    component = fixture.componentInstance;
+    const guideWithoutChildren = {
+      id: 'id2',
+      title: 'title2',
+      children: [],
+    };
+    const guideWithChildren = {
+      id: 'id3',
+      title: 'title3',
+      children: [
+        {
+          id: 'id4',
+          title: 'title4',
+          children: [],
+        },
+      ],
+    };
+
+    component.guideList = {
+      id: 'root',
+      title: 'root',
+      children: [
+        guideWithoutChildren,
+        guideWithChildren,
+      ],
+    };
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render an anchor tag when the guide child has no children', () => {
+    const anchorTags = fixture.debugElement.queryAll(By.css('a'));
+    expect(anchorTags.length).toEqual(1);
+    const buttons = fixture.debugElement.queryAll(By.css('button'));
+    expect(buttons.length).toEqual(1);
+    console.log(fixture.debugElement.nativeElement.innerHTML);
+  });
+});

apps/daffio/src/app/guides/components/packages-list/packages-list.component.ts

@@ -0,0 +1,50 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+} from '@angular/core';
+import { RouterLinkActive } from '@angular/router';
+
+import {
+  DaffTreeData,
+  daffTransformTreeInPlace,
+} from '@daffodil/design/tree';
+
+import { DaffioGuideList } from '../../../docs/models/guide-list';
+
+const visit = (guide: DaffioGuideList): DaffTreeData<unknown> => ({
+  id: guide.id,
+  title: guide.title,
+  url: guide.path,
+  items: [],
+  data: {},
+});
+
+@Component({
+  selector: 'daffio-docs-packages-list',
+  templateUrl: './packages-list.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DaffioDocsPackagesListComponent {
+
+  _guideList: DaffioGuideList;
+  /**
+   * The guide list to render
+   */
+  @Input()
+  get guideList(): DaffioGuideList {
+    return this._guideList;
+  };
+  set guideList(val: DaffioGuideList) {
+    if(this._guideList !== val) {
+      this._tree = daffTransformTreeInPlace(val, visit, 'children');
+    }
+    this._guideList = val;
+  }
+
+  _tree: DaffTreeData<unknown>;
+
+  activeRouterLinkConfiguration: RouterLinkActive['routerLinkActiveOptions'] = {
+    exact: true,
+  };
+}

apps/daffio/src/app/guides/components/packages-list/packages-list.module.ts

@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { DaffTreeModule } from '@daffodil/design/tree';
+
+import { DaffioDocsPackagesListComponent } from './packages-list.component';
+
+@NgModule({
+  declarations: [
+    DaffioDocsPackagesListComponent,
+  ],
+  exports: [
+    DaffioDocsPackagesListComponent,
+  ],
+  imports: [
+    CommonModule,
+    RouterModule,
+    DaffTreeModule,
+  ],
+})
+export class DaffioDocsPackagesListComponentModule { }

apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.html

@@ -0,0 +1 @@
+<daffio-docs-packages-list-container></daffio-docs-packages-list-container>

apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.scss

@@ -0,0 +1,4 @@
+:host {
+	display: block;
+	padding: 24px 0;
+}