Users/benfeely/docs (#3)

* Some refactoring and cleanup of directory structure.

* Style updates for nav.

* Fix some style issues when subnav is not used.

* Fix regression in the collapsing subnav.

* More updates for responsive nav.

* Bug fix.

* Update fabric lib to use module per component.

* Final touches for this round in docs.

* Update to docs.

Author: benfeely

apps/demo/src/app/app.component.html

@@ -4,20 +4,20 @@ <h2>Getting up and running...</h2>
 
   <ol>
     <li>Add <i>AngularReactBrowserModule</i>> to <i>app.module.ts</i> in place of the default <i>BrowserModule</i>.</li>
-    <li>Add <i>AngularReactFabricModule</i> or <i>AngularReactFabricModule</i> to <i>app.module.ts</i> imports.</li>
+    <li>Add <i>Fab[component]Module</i> or <i>Mat[component]Module</i> to <i>app.module.ts</i> imports.</li>
     <li>Add Fabric or Material components to your views.</li>
   </ol>
 </div>
 
 <div>
-  <fabric-button label="Test Dialog" (onClick)="toggleDialog()"></fabric-button>
-  <fabric-dialog [hidden]="dialogHidden" (onDismiss)="toggleDialog()" key="d2" title="Fabric [React] Dialog" subText="Use Fabric React components inside your Angular app!" [type]="DialogType.largeHeader">
+  <fab-button label="Test Dialog" (onClick)="toggleDialog()"></fab-button>
+  <fab-dialog [hidden]="dialogHidden" (onDismiss)="toggleDialog()" key="d2" title="Fabric [React] Dialog" subText="Use Fabric React components inside your Angular app!" [type]="DialogType.largeHeader">
     Hello world! {{ counter }}
-    <fabric-dialog-footer>
-      <fabric-button (onClick)="incrementCounter()" label='Save' style="margin-right:10px;"></fabric-button>
-      <fabric-button (onClick)="toggleDialog()" label='Cancel'></fabric-button>
-    </fabric-dialog-footer>
-  </fabric-dialog>
+    <fab-dialog-footer>
+      <fab-button (onClick)="incrementCounter()" label='Save' style="margin-right:10px;"></fab-button>
+      <fab-button (onClick)="toggleDialog()" label='Cancel'></fab-button>
+    </fab-dialog-footer>
+  </fab-dialog>
 </div>
 
 <img src="assets/app-module-dif.png">

apps/demo/src/app/app.module.ts

@@ -2,12 +2,12 @@ import { NgModule } from '@angular/core';
 import { NxModule } from '@nrwl/nx';
 
 import { AngularReactBrowserModule } from '@angular-react/core';
-import { AngularReactFabricModule } from '@angular-react/fabric';
+import { FabButtonComponent, FabDialogModule } from '@angular-react/fabric';
 import { AppComponent } from './app.component';
 
 
 @NgModule({
-  imports: [AngularReactBrowserModule, NxModule.forRoot(), AngularReactFabricModule],
+  imports: [AngularReactBrowserModule, NxModule.forRoot(), FabButtonComponent, FabDialogModule],
   declarations: [AppComponent],
   bootstrap: [AppComponent]
 })

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

@@ -1,29 +1,34 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { LandingComponent } from './containers/landing/landing.component';
-import { AngularPerfComponent } from './containers/angular-perf/angular-perf.component';
-import { MixedPerfComponent } from './containers/mixed-perf/mixed-perf.component';
-import { FabricComponent } from './containers/fabric/fabric.component';
-import { MaterialComponent } from './containers/material/material.component';
-import { ProfilesComponent } from './containers/profiles/profiles.component';
+import {
+  AngularPerfComponent,
+  ComponentDocsComponent,
+  DocsComponent,
+  FabricComponent,
+  LandingComponent,
+  MaterialComponent,
+  MixedPerfComponent,
+  PerformanceComponent,
+  ProfilesComponent,
+} from './containers';
 
 
 const routes: Routes = [
     { path: 'landing', redirectTo: '' },
     { path: '', component: LandingComponent },
-    { path: 'performance', children: [
+    { path: 'performance', component: PerformanceComponent, children: [
       { path: '', redirectTo: 'angular', pathMatch: 'full' },
       { path: 'angular', component: AngularPerfComponent },
       { path: 'mixed', component: MixedPerfComponent },
       { path: 'profiles', component: ProfilesComponent },
     ] },
-    { path: 'components', children: [
+    { path: 'components', component: ComponentDocsComponent, children: [
       { path: '', redirectTo: 'fabric', pathMatch: 'full' },
       { path: 'fabric', component: FabricComponent },
       { path: 'material', component: MaterialComponent },
     ] },
-    { path: 'docs', component: LandingComponent },
+    { path: 'docs', component: DocsComponent },
 ];
 
 @NgModule({
@@ -33,6 +38,5 @@ const routes: Routes = [
     exports: [
         RouterModule
     ],
-    declarations: []
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

apps/docs/src/app/app.component.html

@@ -1,3 +1,5 @@
 <app-navbar></app-navbar>
+
 <router-outlet></router-outlet>
+
 <app-icons></app-icons>

apps/docs/src/app/app.component.scss

@@ -4,9 +4,10 @@
   height: 100%;
   display: block;
   box-sizing: border-box;
-  border-top: $navPrimaryHeight + $navSecondaryHeight + 2 solid transparent;
+  border-top: $navPrimaryHeight + 1 solid transparent;
 
-  /deep/ > * {
+  /deep/ .page {
     background: $snow;
+    padding: 20px;
   }
 }

apps/docs/src/app/app.component.ts

@@ -1,15 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() { }
-
-}
+export class AppComponent {}

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

@@ -4,30 +4,34 @@ import { NxModule } from '@nrwl/nx';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AngularReactBrowserModule, registerElement } from '@angular-react/core';
-import { AngularReactFabricModule } from '@angular-react/fabric';
 
-import { AppComponent } from './app.component';
-import { ComponentsModule } from './components/components.module';
-import { ReactComponentsModule } from './react-components/react-components.module';
-import { AppRoutingModule } from './app-routing.module';
-import { ContainersModule } from './containers/containers.module';
+import { SharedModule } from './shared';
+import { ComponentsModule } from './components';
+import { LandingComponent, ComponentDocsModule, DocsModule, PerformanceModule } from './containers';
 import { MaterialModule } from './material.module';
+import { AppRoutingModule } from './app-routing.module';
+import { ReactComponentsModule } from './react-components';
+import { AppComponent } from './app.component';
+import { FabricModule } from './fabric.module';
 
 
 @NgModule({
   imports: [
     AngularReactBrowserModule,
     NxModule.forRoot(),
-    AngularReactFabricModule,
     AppRoutingModule,
     BrowserAnimationsModule,
     MaterialModule,
+    FabricModule,
 
-    ContainersModule,
-    ComponentsModule,
+    SharedModule,
     ReactComponentsModule,
+    ComponentsModule,
+    ComponentDocsModule,
+    DocsModule,
+    PerformanceModule,
   ],
-  declarations: [AppComponent],
+  declarations: [AppComponent, LandingComponent],
   bootstrap: [AppComponent],
   schemas: [NO_ERRORS_SCHEMA]
 })

apps/docs/src/app/components/components.module.ts

@@ -1,28 +1,44 @@
 import { RouterModule } from '@angular/router';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { AngularReactFabricModule } from '@angular-react/fabric';
+
+import { ReactComponentsModule } from '../react-components';
 
 import { DotComponent } from './dot/dot.component';
-import { ReactComponentsModule } from '../react-components/react-components.module';
 import { TriangleComponent } from './triangle/triangle.component';
 import { NavbarComponent } from './navbar/navbar.component';
 import { MaterialModule } from '../material.module';
-import { SidebarComponent } from './sidebar/sidebar.component';
 import { IconsComponent } from './icons/icons.component';
+import { SubNavComponent } from './sub-nav/sub-nav.component';
+import { SharedModule } from '../shared';
+import { FabricModule } from '../fabric.module';
 
 
 const components = [
   DotComponent,
-  TriangleComponent,
-  NavbarComponent,
-  SidebarComponent,
   IconsComponent,
+  NavbarComponent,
+  SubNavComponent,
+  TriangleComponent,
 ];
 
 @NgModule({
-  imports: [CommonModule, RouterModule, AngularReactFabricModule, ReactComponentsModule, MaterialModule],
+  imports: [
+    CommonModule,
+    RouterModule,
+    FabricModule,
+    ReactComponentsModule,
+    MaterialModule,
+    SharedModule,
+  ],
   declarations: components,
   exports: components,
 })
 export class ComponentsModule { }
+
+export {
+  DotComponent,
+  IconsComponent,
+  NavbarComponent,
+  TriangleComponent,
+}

apps/docs/src/app/components/icons/icons.component.html

@@ -20,4 +20,16 @@
     />
   </symbol>
 
+  <symbol id="microsoft" aria-labelledby="simpleicons-microsoft-icon" role="img" viewBox="0 0 24 24">
+    <title id="simpleicons-microsoft-icon">Microsoft icon</title>
+    <path d="M11.4 24H0V12.6h11.4V24zM24 24H12.6V12.6H24V24zM11.4 11.4H0V0h11.4v11.4zm12.6 0H12.6V0H24v11.4z"
+    />
+  </symbol>
+
+  <symbol id="google" aria-labelledby="simpleicons-google-icon" role="img" viewBox="0 0 24 24">
+    <title id="simpleicons-google-icon">Google icon</title>
+    <path d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"
+    />
+  </symbol>
+
 </svg>

apps/docs/src/app/components/index.ts

@@ -0,0 +1 @@
+export * from './components.module';