(WIP) feat: added common components package and docs

.circleci/config.yml

@@ -125,6 +125,7 @@ jobs:
             - run: yarn run build:mosaic-luxon-adapter
             - run: yarn run build:mosaic-moment-adapter
             - run: yarn run styles:built-all
+            - run: yarn run build:mosaic-common-components
             - persist_to_workspace:
                   root: ~/mosaic
                   paths:
@@ -187,6 +188,13 @@ jobs:
                   at: ~/mosaic
             - run: yarn run unit:mosaic-luxon-adapter
 
+    test_unit_mosaic-common-components:
+        <<: *job_defaults
+        steps:
+            - attach_workspace:
+                  at: ~/mosaic
+            - run: yarn run unit:mosaic-common-components
+
     deploy-docs-next:
         <<: *job_defaults
         steps:
@@ -350,6 +358,10 @@ workflows:
                   requires:
                       - build_packages
 
+            - test_unit_mosaic-common-components:
+                  requires:
+                      - build_packages
+
             - test_unit_mosaic:
                   requires:
                       - build_packages

angular.json

@@ -211,9 +211,6 @@
                         "tsConfig": "packages/mosaic/tsconfig.spec.json",
                         "codeCoverage": true
                     }
-                },
-                "configurations": {
-                    "production": {}
                 }
             }
         },
@@ -301,6 +298,37 @@
                 }
             }
         },
+        "mosaic-common-components": {
+            "projectType": "library",
+            "root": "packages/mosaic-common-components",
+            "sourceRoot": "packages/mosaic-common-components",
+            "architect": {
+                "packagr": {
+                    "builder": "@angular-devkit/build-angular:ng-packagr",
+                    "options": {
+                        "tsConfig": "packages/mosaic-common-components/tsconfig.lib.json",
+                        "project": "packages/mosaic-common-components/ng-package.json"
+                    }
+                },
+                "build": {
+                    "builder": "@ptsecurity/builders:packager",
+                    "options": {
+                        "buildTarget": "packagr",
+                        "versionPlaceholder": "{{VERSION}}",
+                        "ngVersionPlaceholder": "{{NG_VERSION}}"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "karmaConfig": "packages/mosaic-common-components/karma.conf.js",
+                        "main": "packages/mosaic-common-components/test.ts",
+                        "tsConfig": "packages/mosaic-common-components/tsconfig.spec.json",
+                        "codeCoverage": true
+                    }
+                }
+            }
+        },
         "schematics": {
             "projectType": "library",
             "root": "packages/mosaic/schematics",
@@ -2050,6 +2078,46 @@
                     }
                 }
             }
+        },
+        "dev-sites-menu": {
+            "projectType": "application",
+            "root": "packages/mosaic-dev/sites-menu",
+            "sourceRoot": "packages/mosaic-dev/sites-menu",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist/mosaic-dev/sites-menu",
+                        "tsConfig": "packages/mosaic-dev/sites-menu/tsconfig.app.json",
+                        "index": "packages/mosaic-dev/index.html",
+                        "main": "packages/mosaic-dev/sites-menu/main.ts",
+                        "polyfills": "packages/mosaic-dev/polyfills.ts"
+                    },
+                    "configurations": {
+                        "production": {
+                            "budgets": [
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "6kb"
+                                }
+                            ],
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "extractCss": true,
+                            "namedChunks": false,
+                            "vendorChunk": false,
+                            "statsJson": true
+                        }
+                    }
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "dev-sites-menu:build"
+                    }
+                }
+            }
         }
 
     },

package.json

@@ -121,6 +121,8 @@
         "build:mosaic": "ng build mosaic",
         "build:mosaic-examples-module": "ts-node --project ./tools/example-module/tsconfig.json ./tools/example-module/index.ts",
         "build:mosaic-examples": "ng build mosaic-examples",
+        "build:mosaic-common-components": "ng build mosaic-common-components",
+        "build:mosaic-common-components:styles": "gulp mosaic-common-components:bundle-theming-scss",
         "build:schematics": "ng build schematics",
         "build:schematics-test": "ng build schematics-test",
         "build:tokens": "node ./packages/mosaic/design-tokens/build.js packages/mosaic/design-tokens/",
@@ -131,6 +133,7 @@
         "styles:built-all": "gulp styles:built-all",
         "unit:cdk": "ng test cdk",
         "unit:mosaic": "ng test mosaic",
+        "unit:mosaic-common-components": "ng test mosaic-common-components",
         "unit:mosaic-moment-adapter": "ng test mosaic-moment-adapter",
         "unit:mosaic-luxon-adapter": "ng test mosaic-luxon-adapter",
         "unit:schematics": "gulp unit:schematics",
@@ -182,6 +185,7 @@
         "server-dev:select": "ng serve dev-select --port 3003",
         "server-dev:sidebar": "ng serve dev-sidebar --port 3003",
         "server-dev:sidepanel": "ng serve dev-sidepanel --port 3003",
+        "server-dev:sitemenu": "ng serve dev-sites-menu --port 3003",
         "server-dev:splitter": "ng serve dev-splitter --port 3003",
         "server-dev:table": "ng serve dev-table --port 3003",
         "server-dev:tabs": "ng serve dev-tabs --port 3003",

packages/docs/src/app/components/component-viewer/component-overview.template.html

@@ -1,19 +1,14 @@
 <div [@fadeInOut]="isLoad ? 'fadeIn' : 'fadeOut'" >
-    <span class="mc-display-3 title">
-        {{documentName}}
-    </span>
-    <div *ngIf="documentLost" class="mc-alert mc-alert_error mc-alert_dismissible">
-                <span>Oops, {{documentName}} component seems to be lost... But you can help us find it!
-                    Just send a Pull Request to this repository:
-                    <a class="docs-markdown__a" href="//github.com/positive-js/mosaic/pulls"> Mosaic</a>
-                </span>
-    </div>
-    <doc-viewer
-        documentUrl="docs-content/overviews/{{componentViewer.componentDocItem.packageName}}/{{componentViewer.componentDocItem.id}}.html"
-        class="docs-component-view-text-content docs-component-overview"
-        [class.docs-component-overview_hidden]="documentLost"
-        (contentRendered)="scrollToSelectedContentSection()"
-        (contentRenderFailed)="showDocumentLostAlert()">
-    </doc-viewer>
+    <ng-container *ngIf="componentViewer.componentDocItem | async; let docItem">
+        <span class="mc-display-3 title">
+            {{docItem.id}}
+        </span>
+        <doc-viewer
+            [documentUrl]="getOverviewDocumentUrl(docItem)"
+            class="docs-component-view-text-content docs-component-overview"
+            (contentRendered)="scrollToSelectedContentSection()"
+            (contentRenderFailed)="showDocumentLostAlert()">
+        </doc-viewer>
+    </ng-container>
     <anchors #toc ></anchors>
 </div>

packages/docs/src/app/components/component-viewer/component-viewer.component.ts

@@ -1,7 +1,7 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { ChangeDetectorRef, Component, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router, Params, NavigationStart } from '@angular/router';
-import { combineLatest, Subject } from 'rxjs';
+import { combineLatest, ReplaySubject, Subject } from 'rxjs';
 import { map, takeUntil } from 'rxjs/operators';
 
 import { DocItem, DocumentationItems } from '../../shared/documentation-items/documentation-items';
@@ -16,27 +16,42 @@ import { AnchorsComponent } from '../anchors/anchors.component';
 })
 export class ComponentViewerComponent implements OnDestroy {
 
-    componentDocItem: DocItem;
+    componentDocItem = new ReplaySubject<DocItem>(1);
+    sections: Set<string> = new Set(['overview', 'api']);
 
     private destroyed: Subject<boolean> = new Subject();
 
     constructor(routeActivated: ActivatedRoute,
+                private router: Router,
                 public docItems: DocumentationItems
     ) {
+        const routeAndParentParams = [routeActivated.params];
+
+        if (routeActivated.parent) {
+            routeAndParentParams.push(routeActivated.parent.params);
+        }
+
         // Listen to changes on the current route for the doc id (e.g. button/checkbox) and the
         // parent route for the section (mosaic/cdk).
-
-        combineLatest([routeActivated.params, routeActivated.parent.params]).pipe(
-            map((p: [Params, Params]) => ({id: p[0].id, section: p[1].section})),
-            map((p) => ({doc: docItems.getItemById(p.id, p.section), section: p.section}),
+        combineLatest(routeAndParentParams).pipe(
+            map((params: Params[]) => ({id: params[0].id, section: params[1].section})),
+            map((docIdAndSection: {id: string; section: string}) =>
+                    ({
+                            doc: docItems.getItemById(docIdAndSection.id, docIdAndSection.section),
+                            section: docIdAndSection.section
+                    }
+                    ),
                 takeUntil(this.destroyed))
-        ).subscribe((d) => {
-            this.componentDocItem = d.doc;
+        ).subscribe((docItemAndSection: {doc: DocItem | undefined; section: string}) => {
+            if (docItemAndSection.doc !== undefined) {
+                this.componentDocItem.next(docItemAndSection.doc);
+            }
         });
     }
 
     ngOnDestroy(): void {
         this.destroyed.next();
+        this.destroyed.complete();
     }
 }
 
@@ -65,8 +80,6 @@ export class ComponentViewerComponent implements OnDestroy {
 export class ComponentOverviewComponent implements OnDestroy {
     currentUrl: string;
     routeSeparator: string = '/overview';
-    documentName: string = '';
-    documentLost: boolean = false;
     isLoad: boolean = true;
 
     @ViewChild('toc', {static: false}) anchorsComponent: AnchorsComponent;
@@ -90,12 +103,22 @@ export class ComponentOverviewComponent implements OnDestroy {
         });
     }
 
+    getOverviewDocumentUrl(doc: DocItem) {
+        // Use the explicit overview path if specified. Otherwise, compute an overview path based
+        // on the package name and doc item id. Overviews for components are commonly stored in a
+        // folder named after the component while the overview file is named similarly. e.g.
+        //    `cdk#overlay`     -> `cdk/overlay/overlay.md`
+        //    `material#button` -> `material/button/button.md`
+        const overviewPath = doc.overviewPath || `${doc.packageName}/${doc.id}.html`;
+
+        return `docs-content/overviews/${overviewPath}`;
+    }
+
     getRoute(route: string): string {
         return route.split(this.routeSeparator)[0];
     }
 
     scrollToSelectedContentSection() {
-        this.documentLost = false;
         this.showView();
         this.createCopyIcons();
 
@@ -156,7 +179,6 @@ export class ComponentOverviewComponent implements OnDestroy {
     }
 
     showDocumentLostAlert() {
-        this.documentLost = true;
         this.showView();
 
         if (this.anchorsComponent) {
@@ -165,12 +187,12 @@ export class ComponentOverviewComponent implements OnDestroy {
     }
 
     showView() {
-        this.documentName = this.componentViewer.componentDocItem.id;
         this.isLoad = true;
         this.ref.detectChanges();
     }
 
     ngOnDestroy() {
         this.destroyed.next();
+        this.destroyed.complete();
     }
 }

packages/docs/src/app/components/main-layout/main-layout.component.scss

@@ -7,7 +7,7 @@
 .content {
     width: calc(100% - 600px); // for Edge
     margin: {
-        top: 64px;
+        top: 48px;
         left: 300px;
         right: 300px;
         bottom: 62px;

packages/docs/src/app/components/main-layout/main-layout.component.ts

@@ -1,32 +1,33 @@
-import { Component } from '@angular/core';
-import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
+import { Component, ViewEncapsulation } from '@angular/core';
+import { NavigationExtras, Router } from '@angular/router';
 
 
 @Component({
     templateUrl: './main-layout.component.html',
-    styleUrls: ['./main-layout.component.scss']
+    styleUrls: ['./main-layout.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class MainLayoutComponent {
     nextRoute: string = '';
+
     extras: NavigationExtras = {
         preserveFragment: true,
         queryParamsHandling: 'preserve'
     };
 
-    constructor(private router: Router,
-                private route: ActivatedRoute) {
+    constructor(private router: Router) {
         const href = location.href;
 
         if (href.match('github')) {
             this.setNextRoute();
         } else {
-            this.setDefaultRoute();
+           this.setDefaultRoute();
         }
     }
 
     setDefaultRoute() {
         if (location.pathname === '/') {
-            this.router.navigate(['button/overview'], this.extras);
+            this.router.navigate(['components/button'], this.extras);
         }
     }
 
@@ -36,7 +37,7 @@ export class MainLayoutComponent {
         if (this.nextRoute) {
             this.router.navigate([this.nextRoute], this.extras);
         } else {
-            this.router.navigate(['button/overview'], this.extras);
+            this.router.navigate(['components/button'], this.extras);
         }
         localStorage.removeItem('PT_nextRoute');
     }