feat(daffio): create packages sidebar

apps/daffio/package.json

@@ -40,6 +40,7 @@
     "@daffodil/design": "0.0.0-PLACEHOLDER",
     "@daffodil/router": "0.0.0-PLACEHOLDER",
     "@daffodil/tools-dgeni": "0.0.0-PLACEHOLDER",
-    "@daffodil/theme-switch": "0.0.0-PLACEHOLDER"
+    "@daffodil/theme-switch": "0.0.0-PLACEHOLDER",
+    "@ngrx/component": "0.0.0-PLACEHOLDER"
   }
 }

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

@@ -14,6 +14,7 @@ import { DaffioDocsSidebarContentComponent } from './core/sidebar/components/doc
 import { DaffioMarketingSidebarContentComponent } from './core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.component';
 import { DaffioSidebarFooterComponent } from './core/sidebar/components/sidebar-footer/sidebar-footer.component';
 import { DaffioSidebarHeaderComponent } from './core/sidebar/components/sidebar-header/sidebar-header.component';
+import { DaffioDocsSidebarContainer } from './core/sidebar/containers/docs-sidebar/docs-sidebar.component';
 import { TemplateComponent } from './core/template/template.component';
 import { DaffioRouterNamedViewsEnum } from './named-views/models/named-views.enum';
 
@@ -39,12 +40,10 @@ export const appRoutes: Routes = [
           },
         },
       },
-
       <DaffRouteWithNamedViews>{
         path: '',
         children: [
           { path: 'api', loadChildren: () => import('./api/api.module').then(m => m.DaffioApiModule) },
-          { path: 'guides', loadChildren: () => import('./guides/guides.module').then(m => m.DaffioGuidesModule) },
         ],
         data: {
           daffNamedViews: {
@@ -56,6 +55,20 @@ export const appRoutes: Routes = [
           },
         },
       },
+      <DaffRouteWithNamedViews>{
+        path: '',
+        children: [
+          { path: 'guides', loadChildren: () => import('./guides/guides.module').then(m => m.DaffioGuidesModule) },
+        ],
+        data: {
+          daffNamedViews: {
+            [DaffioRouterNamedViewsEnum.NAV]: DaffioDocsHeaderContainer,
+            [DaffioRouterNamedViewsEnum.SIDEBARHEADER]: DaffioSidebarHeaderComponent,
+            [DaffioRouterNamedViewsEnum.SIDEBARCONTENT]: DaffioDocsSidebarContainer,
+            [DaffioRouterNamedViewsEnum.SIDEBARFOOTER]: DaffioSidebarFooterComponent,
+          },
+        },
+      },
     ],
   },
   {

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

@@ -23,6 +23,7 @@ import { DaffioDocsSidebarContentComponentModule } from './core/sidebar/componen
 import { DaffioMarketingSidebarContentComponentModule } from './core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.module';
 import { DaffioSidebarFooterComponentModule } from './core/sidebar/components/sidebar-footer/sidebar-footer.module';
 import { DaffioSidebarHeaderComponentModule } from './core/sidebar/components/sidebar-header/sidebar-header.module';
+import { DaffioDocsSidebarContainerModule } from './core/sidebar/containers/docs-sidebar/docs-sidebar.module';
 import { TemplateModule } from './core/template/template.module';
 import { environment } from '../environments/environment';
 
@@ -44,6 +45,7 @@ import { environment } from '../environments/environment';
     DaffioSidebarFooterComponentModule,
     DaffioSimpleFooterComponentModule,
     DaffioMarketingFooterComponentModule,
+    DaffioDocsSidebarContainerModule,
 
     //Make sure this loads after Router and Store
     StoreRouterConnectingModule.forRoot({ serializer: FullRouterStateSerializer,

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

@@ -14,10 +14,14 @@ export enum SidebarActionTypes {
 
 export class ToggleSidebar implements Action {
   readonly type = SidebarActionTypes.ToggleSidebarAction;
+
+  constructor(public payload?: string) {}
 }
 
 export class OpenSidebar implements Action {
   readonly type = SidebarActionTypes.OpenSidebarAction;
+
+  constructor(public payload?: string) {}
 }
 
 export class CloseSidebar implements Action {
@@ -27,22 +31,21 @@ export class CloseSidebar implements Action {
 export class SetSidebarVisibility implements Action {
   readonly type = SidebarActionTypes.SetSidebarVisibilityAction;
 
-  constructor(public payload: boolean){}
+  constructor(public payload: boolean) {}
 }
 
 export class SetSidebarState implements Action {
   readonly type = SidebarActionTypes.SetSidebarStateAction;
 
-  constructor(public payload: { mode?: DaffSidebarMode; open?: boolean }){}
+  constructor(public payload: { mode?: DaffSidebarMode; open?: boolean; kind?: string }) {}
 }
 
 export class SetSidebarMode implements Action {
   readonly type = SidebarActionTypes.SetSidebarModeAction;
 
-  constructor(public payload: DaffSidebarMode){}
+  constructor(public payload: DaffSidebarMode) {}
 }
 
-
 export class ResetMode implements Action {
   readonly type = SidebarActionTypes.ResetModeAction;
 }

apps/daffio/src/app/core/sidebar/containers/docs-sidebar/docs-sidebar.component.html

@@ -0,0 +1,6 @@
+<ng-container *ngrxLet="sidebarKind$; let sidebarKind">
+  <ng-container *ngrxLet="isBigTablet$; let isBigTablet">
+    <daffio-docs-packages-list-container *ngIf="isBigTablet || sidebarKind === contentSidebarKind"></daffio-docs-packages-list-container>
+    <daffio-docs-sidebar-content *ngIf="!isBigTablet && !sidebarKind"></daffio-docs-sidebar-content>
+  </ng-container>
+</ng-container>

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

@@ -0,0 +1,149 @@
+import {
+  BreakpointObserver,
+  BreakpointState,
+} from '@angular/cdk/layout';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { RouterTestingModule } from '@angular/router/testing';
+import { LetModule } from '@ngrx/component';
+import {
+  MockStore,
+  provideMockStore,
+} from '@ngrx/store/testing';
+import { DaffioDocsPackagesListContainerModule } from 'apps/daffio/src/app/guides/containers/packages-list/packages-list.module';
+import { BehaviorSubject } from 'rxjs';
+
+import { DaffBreakpoints } from '@daffodil/design';
+
+import {
+  DAFFIO_DOCS_CONTENT_SIDEBAR_KIND,
+  DaffioDocsSidebarContainer,
+} from './docs-sidebar.component';
+import { DaffioDocsSidebarContentComponentModule } from '../../components/docs-sidebar-content/docs-sidebar-content.module';
+import { selectSidebarKind } from '../../reducers';
+
+describe('DaffioDocsSidebarContainer', () => {
+  let component: DaffioDocsSidebarContainer;
+  let fixture: ComponentFixture<DaffioDocsSidebarContainer>;
+  let store: MockStore;
+  let breakpointSpy: jasmine.SpyObj<BreakpointObserver>;
+  let breakpointState: BehaviorSubject<BreakpointState>;
+
+  beforeEach(waitForAsync(() => {
+    breakpointSpy = jasmine.createSpyObj('BreakpointObserver', ['observe']);
+
+    TestBed.configureTestingModule({
+      imports: [
+        LetModule,
+        RouterTestingModule,
+        HttpClientTestingModule,
+        DaffioDocsPackagesListContainerModule,
+        DaffioDocsSidebarContentComponentModule,
+      ],
+      declarations: [
+        DaffioDocsSidebarContainer,
+      ],
+      providers: [
+        provideMockStore(),
+        {
+          provide: BreakpointObserver,
+          useValue: breakpointSpy,
+        },
+      ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    store = TestBed.inject(MockStore);
+    breakpointState = new BehaviorSubject({ matches: false, breakpoints: {}});
+    breakpointSpy.observe.withArgs(DaffBreakpoints.BIG_TABLET).and.returnValue(breakpointState);
+    store.overrideSelector(selectSidebarKind, undefined);
+
+    fixture = TestBed.createComponent(DaffioDocsSidebarContainer);
+    component = fixture.componentInstance;
+
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    store.resetSelectors();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('when the breakpoint is big tablet', () => {
+    beforeEach(() => {
+      breakpointState.next({
+        matches: true,
+        breakpoints: {},
+      });
+      fixture.detectChanges();
+    });
+
+    describe('and when the sidebar kind is unset', () => {
+      beforeEach(() => {
+        store.overrideSelector(selectSidebarKind, undefined);
+        store.setState({});
+        fixture.detectChanges();
+      });
+
+      it('should render <daffio-docs-packages-list-container>', () => {
+        expect(fixture.debugElement.query(By.css('daffio-docs-packages-list-container'))).toBeTruthy();
+      });
+    });
+
+    describe('and when the sidebar kind is content', () => {
+      beforeEach(() => {
+        store.overrideSelector(selectSidebarKind, DAFFIO_DOCS_CONTENT_SIDEBAR_KIND);
+        store.setState({});
+        fixture.detectChanges();
+      });
+
+      it('should render <daffio-docs-packages-list-container>', () => {
+        expect(fixture.debugElement.query(By.css('daffio-docs-packages-list-container'))).toBeTruthy();
+      });
+    });
+  });
+
+  describe('when the breakpoint is not big tablet', () => {
+    beforeEach(() => {
+      breakpointState.next({
+        matches: false,
+        breakpoints: {},
+      });
+      fixture.detectChanges();
+    });
+
+    describe('and when the sidebar kind is unset', () => {
+      beforeEach(() => {
+        store.overrideSelector(selectSidebarKind, undefined);
+        store.setState({});
+        fixture.detectChanges();
+      });
+
+      it('should render <daffio-docs-sidebar-content>', () => {
+        expect(fixture.debugElement.query(By.css('daffio-docs-sidebar-content'))).toBeTruthy();
+      });
+    });
+
+    describe('and when the sidebar kind is content', () => {
+      beforeEach(() => {
+        store.overrideSelector(selectSidebarKind, DAFFIO_DOCS_CONTENT_SIDEBAR_KIND);
+        store.setState({});
+        fixture.detectChanges();
+      });
+
+      it('should render <daffio-docs-packages-list-container>', () => {
+        expect(fixture.debugElement.query(By.css('daffio-docs-packages-list-container'))).toBeTruthy();
+      });
+    });
+  });
+});

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

@@ -0,0 +1,48 @@
+import { BreakpointObserver } from '@angular/cdk/layout';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+} from '@angular/core';
+import {
+  select,
+  Store,
+} from '@ngrx/store';
+import {
+  Observable,
+  map,
+} from 'rxjs';
+
+import { DaffBreakpoints } from '@daffodil/design';
+
+import { selectSidebarKind } from '../../reducers';
+
+export const DAFFIO_DOCS_CONTENT_SIDEBAR_KIND = 'content';
+
+/**
+ * @private
+ * This component stores all of the sidebars within daff.io/docs
+ */
+@Component({
+  selector: 'daffio-docs-sidebar-container',
+  templateUrl: './docs-sidebar.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DaffioDocsSidebarContainer implements OnInit {
+  contentSidebarKind = DAFFIO_DOCS_CONTENT_SIDEBAR_KIND;
+
+  constructor(
+    private store: Store,
+    private breakpointObserver: BreakpointObserver,
+  ) {}
+
+  sidebarKind$: Observable<string | undefined>;
+  isBigTablet$: Observable<boolean>;
+
+  ngOnInit() {
+    this.isBigTablet$ = this.breakpointObserver.observe(DaffBreakpoints.BIG_TABLET).pipe(
+      map(({ matches }) => matches),
+    );
+    this.sidebarKind$ = this.store.pipe(select(selectSidebarKind));
+  }
+}

apps/daffio/src/app/core/sidebar/containers/docs-sidebar/docs-sidebar.module.ts

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { LetModule } from '@ngrx/component';
+import { DaffioDocsPackagesListContainerModule } from 'apps/daffio/src/app/guides/containers/packages-list/packages-list.module';
+
+import { DaffioDocsSidebarContainer } from './docs-sidebar.component';
+import { DaffioDocsSidebarContentComponentModule } from '../../components/docs-sidebar-content/docs-sidebar-content.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule,
+    LetModule,
+
+    DaffioDocsPackagesListContainerModule,
+    DaffioDocsSidebarContentComponentModule,
+  ],
+  declarations: [
+    DaffioDocsSidebarContainer,
+  ],
+  exports: [
+    DaffioDocsSidebarContainer,
+  ],
+})
+export class DaffioDocsSidebarContainerModule {}