From a73c145da2dc3b62dce1145537b824479b2f22a4 Mon Sep 17 00:00:00 2001 From: xelaint Date: Wed, 17 Jan 2024 11:17:18 -0500 Subject: [PATCH] feat(daffio): create packages sidebar --- apps/daffio/package.json | 3 +- apps/daffio/src/app/app-routing.module.ts | 15 +++- apps/daffio/src/app/app.module.ts | 2 + .../core/sidebar/actions/sidebar.actions.ts | 6 +- .../sidebar-viewport-theme.scss | 19 ----- .../src/app/core/sidebar/reducers/index.ts | 5 ++ .../core/sidebar/reducers/sidebar.reducer.ts | 8 ++- .../src/app/core/sidebar/sidebar.module.ts | 4 +- .../doc-viewer/doc-viewer.component.html | 4 +- .../doc-viewer/doc-viewer.component.ts | 8 ++- .../containers/sidebar/sidebar.component.html | 3 - .../containers/sidebar/sidebar.component.scss | 0 .../sidebar/sidebar.component.spec.ts | 70 ------------------- .../containers/sidebar/sidebar.component.ts | 27 ------- .../docs/containers/sidebar/sidebar.module.ts | 24 ------- .../packages-list.component.html} | 0 .../packages-list.component.spec.ts} | 12 ++-- .../packages-list.component.ts} | 6 +- .../packages-list.module.ts} | 8 +-- .../packages-sidebar.component.html | 6 ++ .../packages-sidebar.component.scss | 4 ++ .../packages-sidebar.component.spec.ts | 37 ++++++++++ .../packages-sidebar.component.ts | 28 ++++++++ .../packages-sidebar.module.ts | 28 ++++++++ .../packages-list.component.html | 1 + .../packages-list.component.spec.ts | 37 ++++++++++ .../packages-list/packages-list.component.ts | 28 ++++++++ .../packages-list/packages-list.module.ts | 21 ++++++ .../sidebar-viewport.component.spec.ts | 2 - package-lock.json | 22 ++++++ package.json | 1 + 31 files changed, 269 insertions(+), 170 deletions(-) delete mode 100644 apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport-theme.scss delete mode 100644 apps/daffio/src/app/docs/containers/sidebar/sidebar.component.html delete mode 100644 apps/daffio/src/app/docs/containers/sidebar/sidebar.component.scss delete mode 100644 apps/daffio/src/app/docs/containers/sidebar/sidebar.component.spec.ts delete mode 100644 apps/daffio/src/app/docs/containers/sidebar/sidebar.component.ts delete mode 100644 apps/daffio/src/app/docs/containers/sidebar/sidebar.module.ts rename apps/daffio/src/app/guides/components/{guides-nav/guides-nav.component.html => packages-list/packages-list.component.html} (100%) rename apps/daffio/src/app/guides/components/{guides-nav/guides-nav.component.spec.ts => packages-list/packages-list.component.spec.ts} (81%) rename apps/daffio/src/app/guides/components/{guides-nav/guides-nav.component.ts => packages-list/packages-list.component.ts} (87%) rename apps/daffio/src/app/guides/components/{guides-nav/guides-nav.module.ts => packages-list/packages-list.module.ts} (61%) create mode 100644 apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.html create mode 100644 apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.scss create mode 100644 apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.spec.ts create mode 100644 apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.ts create mode 100644 apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.module.ts create mode 100644 apps/daffio/src/app/guides/containers/packages-list/packages-list.component.html create mode 100644 apps/daffio/src/app/guides/containers/packages-list/packages-list.component.spec.ts create mode 100644 apps/daffio/src/app/guides/containers/packages-list/packages-list.component.ts create mode 100644 apps/daffio/src/app/guides/containers/packages-list/packages-list.module.ts diff --git a/apps/daffio/package.json b/apps/daffio/package.json index 96e7ad0551..3f55ce888e 100644 --- a/apps/daffio/package.json +++ b/apps/daffio/package.json @@ -39,6 +39,7 @@ "@daffodil/docs-utils": "0.0.0-PLACEHOLDER", "@daffodil/design": "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" } } diff --git a/apps/daffio/src/app/app-routing.module.ts b/apps/daffio/src/app/app-routing.module.ts index fec141d8a7..84b601128f 100644 --- a/apps/daffio/src/app/app-routing.module.ts +++ b/apps/daffio/src/app/app-routing.module.ts @@ -13,6 +13,7 @@ import { DaffioMarketingSidebarContentComponent } from './core/sidebar/component import { DaffioSidebarFooterComponent } from './core/sidebar/components/sidebar-footer/sidebar-footer.component'; import { DaffioSidebarHeaderComponent } from './core/sidebar/components/sidebar-header/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 = [ @@ -36,12 +37,10 @@ export const appRoutes: Routes = [ }, }, }, - { 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: { @@ -52,6 +51,18 @@ export const appRoutes: Routes = [ }, }, }, + { + path: '', + children: [ + { path: 'guides', loadChildren: () => import('./guides/guides.module').then(m => m.DaffioGuidesModule) }, + ], + data: { + daffNamedViews: { + [DaffioRouterNamedViewsEnum.NAV]: DaffioDocsHeaderContainer, + [DaffioRouterNamedViewsEnum.SIDEBARCONTENT]: DaffioDocsPackagesSidebarComponent, + }, + }, + }, ], }, { diff --git a/apps/daffio/src/app/app.module.ts b/apps/daffio/src/app/app.module.ts index dba4fe83bd..6956e92e49 100644 --- a/apps/daffio/src/app/app.module.ts +++ b/apps/daffio/src/app/app.module.ts @@ -22,6 +22,7 @@ import { DaffioMarketingSidebarContentComponentModule } from './core/sidebar/com import { DaffioSidebarFooterComponentModule } from './core/sidebar/components/sidebar-footer/sidebar-footer.module'; import { DaffioSidebarHeaderComponentModule } from './core/sidebar/components/sidebar-header/sidebar-header.module'; import { TemplateModule } from './core/template/template.module'; +import { DaffioDocsPackagesSidebarComponentModule } from './guides/components/packages-sidebar/packages-sidebar.module'; import { environment } from '../environments/environment'; @NgModule({ @@ -40,6 +41,7 @@ import { environment } from '../environments/environment'; DaffioDocsSidebarContentComponentModule, DaffioSidebarHeaderComponentModule, DaffioSidebarFooterComponentModule, + DaffioDocsPackagesSidebarComponentModule, //Make sure this loads after Router and Store StoreRouterConnectingModule.forRoot({ serializer: FullRouterStateSerializer, diff --git a/apps/daffio/src/app/core/sidebar/actions/sidebar.actions.ts b/apps/daffio/src/app/core/sidebar/actions/sidebar.actions.ts index 948cf1ec26..32c3a63b2e 100644 --- a/apps/daffio/src/app/core/sidebar/actions/sidebar.actions.ts +++ b/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 { @@ -33,7 +37,7 @@ export class SetSidebarVisibility implements Action { 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 { diff --git a/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport-theme.scss b/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport-theme.scss deleted file mode 100644 index daa8e7cb10..0000000000 --- a/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport-theme.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use 'sass:map'; -@use 'theme' as daff-theme; - -@mixin daffio-sidebar-viewport-theme($theme) { - $gray: daff-theme.daff-map-deep-get($theme, 'core.gray'); - $base: daff-theme.daff-map-deep-get($theme, 'core.base'); - $base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast'); - $primary: map.get($theme, primary); - - .daffio-sidebar-viewport { - &__get-started { - background: daff-theme.daff-illuminate($base, $gray, 2); - - &:hover { - background: daff-theme.daff-illuminate($base, $gray, 3); - } - } - } -} \ No newline at end of file diff --git a/apps/daffio/src/app/core/sidebar/reducers/index.ts b/apps/daffio/src/app/core/sidebar/reducers/index.ts index f903265d01..bd8627f128 100644 --- a/apps/daffio/src/app/core/sidebar/reducers/index.ts +++ b/apps/daffio/src/app/core/sidebar/reducers/index.ts @@ -40,6 +40,11 @@ export const selectShowSidebar: MemoizedSelector, boolean> = fromDaffioSidebar.getShowSidebar, ); +export const selectSidebarKind: MemoizedSelector, string> = createSelector( + daffioSidebarStateSelector, + fromDaffioSidebar.getKind, +); + export const selectSidebarMode: MemoizedSelector, DaffSidebarMode> = createSelector( daffioSidebarStateSelector, fromDaffioSidebar.getMode, diff --git a/apps/daffio/src/app/core/sidebar/reducers/sidebar.reducer.ts b/apps/daffio/src/app/core/sidebar/reducers/sidebar.reducer.ts index 512ee207f5..fb5398bf73 100644 --- a/apps/daffio/src/app/core/sidebar/reducers/sidebar.reducer.ts +++ b/apps/daffio/src/app/core/sidebar/reducers/sidebar.reducer.ts @@ -8,6 +8,7 @@ import { export interface State { showSidebar: boolean; mode: DaffSidebarMode; + kind?: string; } export const initialState: State = { @@ -18,18 +19,18 @@ export const initialState: State = { export function reducer(state = initialState, action: SidebarActions): State { switch (action.type) { case SidebarActionTypes.ToggleSidebarAction: - return { ...state, showSidebar: !state.showSidebar }; + return { ...state, showSidebar: !state.showSidebar, kind: action.payload }; case SidebarActionTypes.CloseSidebarAction: return { ...state, showSidebar: false }; case SidebarActionTypes.OpenSidebarAction: - return { ...state, showSidebar: true }; + return { ...state, showSidebar: true, kind: action.payload }; case SidebarActionTypes.SetSidebarVisibilityAction: return { ...state, showSidebar: action.payload }; case SidebarActionTypes.SetSidebarStateAction: return { ...state, mode: action.payload?.mode ?? state.mode, - showSidebar: action.payload?.open ?? state.showSidebar, + showSidebar: action.payload?.open ?? state.showSidebar, kind: action.payload.kind, }; case SidebarActionTypes.SetSidebarModeAction: return { ...state, mode: action.payload }; @@ -42,3 +43,4 @@ export function reducer(state = initialState, action: SidebarActions): State { export const getShowSidebar = (state: State) => state.showSidebar; export const getMode = (state: State) => state.mode; +export const getKind = (state: State) => state.kind; diff --git a/apps/daffio/src/app/core/sidebar/sidebar.module.ts b/apps/daffio/src/app/core/sidebar/sidebar.module.ts index 71b21c9bc7..d242c87f5c 100644 --- a/apps/daffio/src/app/core/sidebar/sidebar.module.ts +++ b/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: [ diff --git a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.html b/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.html index 558f1ff228..259670b657 100644 --- a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.html +++ b/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.html @@ -1,7 +1,7 @@ - +
) {} /** * The doc to render @@ -34,4 +36,8 @@ export class DaffioDocViewerComponent implements OnChanges { //It is necessary to bypass the default angular sanitization to keep id tags in the injected html. These id tags are used for fragment routing. this.sanitizedContent = this.sanitizer.bypassSecurityTrustHtml(this.doc.contents); } + + open() { + this.store.dispatch(new ToggleSidebar('content')); + } } diff --git a/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.html b/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.html deleted file mode 100644 index 8f7e3a7365..0000000000 --- a/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.html +++ /dev/null @@ -1,3 +0,0 @@ - - -API Index \ No newline at end of file diff --git a/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.scss b/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.spec.ts b/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.spec.ts deleted file mode 100644 index 4be0f92264..0000000000 --- a/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.spec.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { HttpClientTestingModule } from '@angular/common/http/testing'; -import { - ComponentFixture, - TestBed, - waitForAsync, -} from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { RouterTestingModule } from '@angular/router/testing'; -import { DaffioGuidesNavModule } from 'apps/daffio/src/app/guides/components/guides-nav/guides-nav.module'; -import { of } from 'rxjs'; - -import { DaffioDocsSidebarContainer } from './sidebar.component'; -import { DaffioGuidesNavComponent } from '../../../guides/components/guides-nav/guides-nav.component'; -import { DaffioDocsService } from '../../services/docs.service'; -import { mockGuides } from '../../testing/factories/guide-list.factory'; - -describe('DaffioDocsSidebarContainer', () => { - let component: DaffioDocsSidebarContainer; - let fixture: ComponentFixture; - let docServiceSpy: jasmine.SpyObj; - - beforeEach(waitForAsync(() => { - docServiceSpy = jasmine.createSpyObj('DaffioDocsService', ['getGuideList']); - - TestBed.configureTestingModule({ - imports: [ - RouterTestingModule, - NoopAnimationsModule, - DaffioGuidesNavModule, - HttpClientTestingModule, - ], - declarations: [ - DaffioDocsSidebarContainer, - ], - providers: [ - { - provide: DaffioDocsService, - useValue: docServiceSpy, - }, - ], - }) - .compileComponents(); - })); - - beforeEach(() => { - docServiceSpy.getGuideList.and.returnValue(of(mockGuides)); - - fixture = TestBed.createComponent(DaffioDocsSidebarContainer); - component = fixture.componentInstance; - - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); - - describe('on ', () => { - let guidesNav: DaffioGuidesNavComponent; - - beforeEach(() => { - guidesNav = fixture.debugElement.query(By.directive(DaffioGuidesNavComponent)).componentInstance; - }); - - it('should set guideList', () => { - expect(guidesNav.guideList).toEqual(mockGuides); - }); - }); -}); diff --git a/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.ts b/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.ts deleted file mode 100644 index 6a2f34cb00..0000000000 --- a/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { - ChangeDetectionStrategy, - Component, - OnInit, -} from '@angular/core'; -import { Observable } from 'rxjs'; - -import { DaffioDoc } from '../../models/doc'; -import { DaffioGuideList } from '../../models/guide-list'; -import { DaffioDocsService } from '../../services/docs.service'; - -@Component({ - selector: 'daffio-sidebar-container', - templateUrl: './sidebar.component.html', - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class DaffioDocsSidebarContainer implements OnInit{ - sidebarContents$: Observable; - - constructor( - private docService: DaffioDocsService, - ) {} - - ngOnInit() { - this.sidebarContents$ = this.docService.getGuideList(); - } -} diff --git a/apps/daffio/src/app/docs/containers/sidebar/sidebar.module.ts b/apps/daffio/src/app/docs/containers/sidebar/sidebar.module.ts deleted file mode 100644 index 893d0168fd..0000000000 --- a/apps/daffio/src/app/docs/containers/sidebar/sidebar.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { DaffButtonModule } from '@daffodil/design/button'; - -import { DaffioDocsSidebarContainer } from './sidebar.component'; -import { DaffioGuidesNavModule } from '../../../guides/components/guides-nav/guides-nav.module'; - -@NgModule({ - imports: [ - CommonModule, - RouterModule, - DaffButtonModule, - DaffioGuidesNavModule, - ], - declarations: [ - DaffioDocsSidebarContainer, - ], - exports: [ - DaffioDocsSidebarContainer, - ], -}) -export class DaffioDocsSidebarModule {} diff --git a/apps/daffio/src/app/guides/components/guides-nav/guides-nav.component.html b/apps/daffio/src/app/guides/components/packages-list/packages-list.component.html similarity index 100% rename from apps/daffio/src/app/guides/components/guides-nav/guides-nav.component.html rename to apps/daffio/src/app/guides/components/packages-list/packages-list.component.html diff --git a/apps/daffio/src/app/guides/components/guides-nav/guides-nav.component.spec.ts b/apps/daffio/src/app/guides/components/packages-list/packages-list.component.spec.ts similarity index 81% rename from apps/daffio/src/app/guides/components/guides-nav/guides-nav.component.spec.ts rename to apps/daffio/src/app/guides/components/packages-list/packages-list.component.spec.ts index 3c59166fb3..aa7fe504c8 100644 --- a/apps/daffio/src/app/guides/components/guides-nav/guides-nav.component.spec.ts +++ b/apps/daffio/src/app/guides/components/packages-list/packages-list.component.spec.ts @@ -9,16 +9,16 @@ import { RouterTestingModule } from '@angular/router/testing'; import { DaffTreeModule } from '@daffodil/design/tree'; -import { DaffioGuidesNavComponent } from './guides-nav.component'; +import { DaffioDocsPackagesListComponent } from './packages-list.component'; -describe('DaffioGuidesNavComponent', () => { - let component: DaffioGuidesNavComponent; - let fixture: ComponentFixture; +describe('DaffioDocsPackagesListComponent', () => { + let component: DaffioDocsPackagesListComponent; + let fixture: ComponentFixture; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ declarations: [ - DaffioGuidesNavComponent, + DaffioDocsPackagesListComponent, ], imports: [ RouterTestingModule, @@ -30,7 +30,7 @@ describe('DaffioGuidesNavComponent', () => { })); beforeEach(() => { - fixture = TestBed.createComponent(DaffioGuidesNavComponent); + fixture = TestBed.createComponent(DaffioDocsPackagesListComponent); component = fixture.componentInstance; const guideWithoutChildren = { id: 'id2', diff --git a/apps/daffio/src/app/guides/components/guides-nav/guides-nav.component.ts b/apps/daffio/src/app/guides/components/packages-list/packages-list.component.ts similarity index 87% rename from apps/daffio/src/app/guides/components/guides-nav/guides-nav.component.ts rename to apps/daffio/src/app/guides/components/packages-list/packages-list.component.ts index bd778f7e9b..0e23d70630 100644 --- a/apps/daffio/src/app/guides/components/guides-nav/guides-nav.component.ts +++ b/apps/daffio/src/app/guides/components/packages-list/packages-list.component.ts @@ -21,11 +21,11 @@ const visit = (guide: DaffioGuideList): DaffTreeData => ({ }); @Component({ - selector: 'daffio-guides-nav', - templateUrl: './guides-nav.component.html', + selector: 'daffio-docs-packages-list', + templateUrl: './packages-list.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class DaffioGuidesNavComponent { +export class DaffioDocsPackagesListComponent { _guideList: DaffioGuideList; /** diff --git a/apps/daffio/src/app/guides/components/guides-nav/guides-nav.module.ts b/apps/daffio/src/app/guides/components/packages-list/packages-list.module.ts similarity index 61% rename from apps/daffio/src/app/guides/components/guides-nav/guides-nav.module.ts rename to apps/daffio/src/app/guides/components/packages-list/packages-list.module.ts index 8ed419e7ba..e04c5d2504 100644 --- a/apps/daffio/src/app/guides/components/guides-nav/guides-nav.module.ts +++ b/apps/daffio/src/app/guides/components/packages-list/packages-list.module.ts @@ -4,14 +4,14 @@ import { RouterModule } from '@angular/router'; import { DaffTreeModule } from '@daffodil/design/tree'; -import { DaffioGuidesNavComponent } from './guides-nav.component'; +import { DaffioDocsPackagesListComponent } from './packages-list.component'; @NgModule({ declarations: [ - DaffioGuidesNavComponent, + DaffioDocsPackagesListComponent, ], exports: [ - DaffioGuidesNavComponent, + DaffioDocsPackagesListComponent, ], imports: [ CommonModule, @@ -19,4 +19,4 @@ import { DaffioGuidesNavComponent } from './guides-nav.component'; DaffTreeModule, ], }) -export class DaffioGuidesNavModule { } +export class DaffioDocsPackagesListComponentModule { } diff --git a/apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.html b/apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.html new file mode 100644 index 0000000000..ae9a2874df --- /dev/null +++ b/apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.html @@ -0,0 +1,6 @@ + + + + + + diff --git a/apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.scss b/apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.scss new file mode 100644 index 0000000000..44e1076e84 --- /dev/null +++ b/apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.scss @@ -0,0 +1,4 @@ +:host { + display: block; + padding: 24px 0; +} \ No newline at end of file diff --git a/apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.spec.ts b/apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.spec.ts new file mode 100644 index 0000000000..070bd5713b --- /dev/null +++ b/apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.spec.ts @@ -0,0 +1,37 @@ +import { + ComponentFixture, + TestBed, + waitForAsync, +} from '@angular/core/testing'; + +import { DaffioDocsPackagesSidebarComponent } from './packages-sidebar.component'; +import { DaffioDocsPackagesListContainerModule } from '../../containers/packages-list/packages-list.module'; + +describe('DaffioDocsPackagesSidebarComponent', () => { + let component: DaffioDocsPackagesSidebarComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + + TestBed.configureTestingModule({ + imports: [ + DaffioDocsPackagesListContainerModule, + ], + declarations: [ + DaffioDocsPackagesSidebarComponent, + ], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DaffioDocsPackagesSidebarComponent); + component = fixture.componentInstance; + + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.ts b/apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.ts new file mode 100644 index 0000000000..65c55d7230 --- /dev/null +++ b/apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.ts @@ -0,0 +1,28 @@ +import { + ChangeDetectionStrategy, + Component, + OnInit, +} from '@angular/core'; +import { + select, + Store, +} from '@ngrx/store'; +import { Observable } from 'rxjs'; + +import { selectSidebarKind } from '../../../core/sidebar/reducers'; + +@Component({ + selector: 'daffio-docs-packages-sidebar', + templateUrl: './packages-sidebar.component.html', + styleUrls: ['./packages-sidebar.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DaffioDocsPackagesSidebarComponent implements OnInit { + constructor(private store: Store) {} + + sidebarKind$: Observable; + + ngOnInit() { + this.sidebarKind$ = this.store.pipe(select(selectSidebarKind)); + } +} diff --git a/apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.module.ts b/apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.module.ts new file mode 100644 index 0000000000..d4cc37c9be --- /dev/null +++ b/apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.module.ts @@ -0,0 +1,28 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { LetModule } from '@ngrx/component'; + +import { DaffButtonModule } from '@daffodil/design/button'; + +import { DaffioDocsPackagesSidebarComponent } from './packages-sidebar.component'; +import { DaffioDocsSidebarContentComponentModule } from '../../../core/sidebar/components/docs-sidebar-content/docs-sidebar-content.module'; +import { DaffioDocsPackagesListContainerModule } from '../../../guides/containers/packages-list/packages-list.module'; + +@NgModule({ + imports: [ + CommonModule, + RouterModule, + LetModule, + DaffButtonModule, + DaffioDocsPackagesListContainerModule, + DaffioDocsSidebarContentComponentModule, + ], + declarations: [ + DaffioDocsPackagesSidebarComponent, + ], + exports: [ + DaffioDocsPackagesSidebarComponent, + ], +}) +export class DaffioDocsPackagesSidebarComponentModule {} diff --git a/apps/daffio/src/app/guides/containers/packages-list/packages-list.component.html b/apps/daffio/src/app/guides/containers/packages-list/packages-list.component.html new file mode 100644 index 0000000000..c3b058c7f7 --- /dev/null +++ b/apps/daffio/src/app/guides/containers/packages-list/packages-list.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/daffio/src/app/guides/containers/packages-list/packages-list.component.spec.ts b/apps/daffio/src/app/guides/containers/packages-list/packages-list.component.spec.ts new file mode 100644 index 0000000000..51dde92bda --- /dev/null +++ b/apps/daffio/src/app/guides/containers/packages-list/packages-list.component.spec.ts @@ -0,0 +1,37 @@ +import { + waitForAsync, + ComponentFixture, + TestBed, +} from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { RouterTestingModule } from '@angular/router/testing'; + +import { DaffioDocsPackagesListContainer } from './packages-list.component'; + +describe('DaffioDocsPackagesListContainer', () => { + let component: DaffioDocsPackagesListContainer; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ + DaffioDocsPackagesListContainer, + ], + imports: [ + RouterTestingModule, + NoopAnimationsModule, + ], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DaffioDocsPackagesListContainer); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/daffio/src/app/guides/containers/packages-list/packages-list.component.ts b/apps/daffio/src/app/guides/containers/packages-list/packages-list.component.ts new file mode 100644 index 0000000000..6ab342da11 --- /dev/null +++ b/apps/daffio/src/app/guides/containers/packages-list/packages-list.component.ts @@ -0,0 +1,28 @@ +import { + ChangeDetectionStrategy, + Component, + OnInit, +} from '@angular/core'; +import { Observable } from 'rxjs'; + +import { DaffioDoc } from '../../../docs/models/doc'; +import { DaffioGuideList } from '../../../docs/models/guide-list'; +import { DaffioDocsService } from '../../../docs/services/docs.service'; + +@Component({ + selector: 'daffio-docs-packages-list-container', + templateUrl: './packages-list.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DaffioDocsPackagesListContainer implements OnInit { + + packagesList$: Observable; + + constructor( + private docService: DaffioDocsService, + ) {} + + ngOnInit() { + this.packagesList$ = this.docService.getGuideList(); + } +} diff --git a/apps/daffio/src/app/guides/containers/packages-list/packages-list.module.ts b/apps/daffio/src/app/guides/containers/packages-list/packages-list.module.ts new file mode 100644 index 0000000000..4aaefa63ac --- /dev/null +++ b/apps/daffio/src/app/guides/containers/packages-list/packages-list.module.ts @@ -0,0 +1,21 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { DaffioDocsPackagesListContainer } from './packages-list.component'; +import { DaffioDocsPackagesListComponentModule } from '../../components/packages-list/packages-list.module'; + +@NgModule({ + declarations: [ + DaffioDocsPackagesListContainer, + ], + exports: [ + DaffioDocsPackagesListContainer, + ], + imports: [ + CommonModule, + RouterModule, + DaffioDocsPackagesListComponentModule, + ], +}) +export class DaffioDocsPackagesListContainerModule { } diff --git a/apps/design-land/src/app/core/sidebar-viewport/sidebar-viewport.component.spec.ts b/apps/design-land/src/app/core/sidebar-viewport/sidebar-viewport.component.spec.ts index 555845ba7c..55c4b76d38 100644 --- a/apps/design-land/src/app/core/sidebar-viewport/sidebar-viewport.component.spec.ts +++ b/apps/design-land/src/app/core/sidebar-viewport/sidebar-viewport.component.spec.ts @@ -7,7 +7,6 @@ import { import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { RouterTestingModule } from '@angular/router/testing'; -import { DaffioGuidesNavModule } from 'apps/daffio/src/app/guides/components/guides-nav/guides-nav.module'; import { DaffSidebarModule, @@ -31,7 +30,6 @@ describe('DesignLandSidebarViewportComponent', () => { RouterTestingModule, NoopAnimationsModule, DaffSidebarModule, - DaffioGuidesNavModule, HttpClientTestingModule, ], declarations: [ diff --git a/package-lock.json b/package-lock.json index 7e0365e9a6..008a258a92 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,6 +29,7 @@ "@fortawesome/free-brands-svg-icons": "^6.4.2", "@fortawesome/free-regular-svg-icons": "^6.4.2", "@fortawesome/free-solid-svg-icons": "^6.4.2", + "@ngrx/component": "^15.0.0", "@ngrx/effects": "^15.0.0", "@ngrx/entity": "^15.0.0", "@ngrx/router-store": "^15.0.0", @@ -6107,6 +6108,19 @@ "integrity": "sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA==", "dev": true }, + "node_modules/@ngrx/component": { + "version": "15.4.0", + "resolved": "https://registry.npmjs.org/@ngrx/component/-/component-15.4.0.tgz", + "integrity": "sha512-mkSFYAOBQ6i8BNioJj0PWcXQ6D9x6LYmhmDdMrs9cUeCRT4ePbvy05D3m+45UPSQQoNMtS+g209D63tYXYy3uQ==", + "dependencies": { + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@angular/common": "^15.0.0", + "@angular/core": "^15.0.0", + "rxjs": "^6.5.3 || ^7.5.0" + } + }, "node_modules/@ngrx/effects": { "version": "15.4.0", "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-15.4.0.tgz", @@ -39496,6 +39510,14 @@ "integrity": "sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA==", "dev": true }, + "@ngrx/component": { + "version": "15.4.0", + "resolved": "https://registry.npmjs.org/@ngrx/component/-/component-15.4.0.tgz", + "integrity": "sha512-mkSFYAOBQ6i8BNioJj0PWcXQ6D9x6LYmhmDdMrs9cUeCRT4ePbvy05D3m+45UPSQQoNMtS+g209D63tYXYy3uQ==", + "requires": { + "tslib": "^2.0.0" + } + }, "@ngrx/effects": { "version": "15.4.0", "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-15.4.0.tgz", diff --git a/package.json b/package.json index 084f9a12f9..711d50c93c 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@fortawesome/free-brands-svg-icons": "^6.4.2", "@fortawesome/free-regular-svg-icons": "^6.4.2", "@fortawesome/free-solid-svg-icons": "^6.4.2", + "@ngrx/component": "^15.0.0", "@ngrx/effects": "^15.0.0", "@ngrx/entity": "^15.0.0", "@ngrx/router-store": "^15.0.0",