feat(docs): add capability to use playground module in the docs appli…

…cation (#310)

docs/app/app.module.ts

@@ -55,7 +55,7 @@ import { BlockHelperService } from './docs/utils/block-helper.service';
     NbLayoutModule,
     NbTabsetModule,
     NbMenuModule.forRoot(),
-    NbThemeModule.forRoot({ name: 'default' }),
+    NbThemeModule.forRoot({ name: 'docs' }),
     NbSidebarModule.forRoot(),
     RouterModule.forRoot(routes, { useHash: true }),
   ],

docs/app/app.routes.ts

@@ -31,6 +31,10 @@ export const routes: Routes = [
         component: NgdPageComponent,
       }],
   },
+  {
+    path: 'example',
+    loadChildren: '../../src/playground/playground.module#NbPlaygroundModule',
+  },
   {
     path: '**',
     redirectTo: 'home',

docs/app/styles/_themes.scss

@@ -4,7 +4,19 @@
 @import '../../../src/framework/theme/styles/themes';
 
 // which themes you what to enable (empty to enable all - not recommended)
-$nb-enabled-themes: (default);
+$nb-enabled-themes: (docs, default);
+
+// TODO remove
+$nb-themes: nb-register-theme((
+  landing-font: Exo,
+  landing-golden: #ffd22d,
+  landing-red: #fc3b41,
+  landing-fg: #b7b7fe,
+  landing-fg-light: #e0e0ff,
+  landing-highlight: #42db7d,
+  landing-primary: #8a7fff,
+  landing-bg: #13113b,
+), default, default);
 
 $nb-themes: nb-register-theme((
   font-main: Roboto,
@@ -113,5 +125,5 @@ $nb-themes: nb-register-theme((
 
   tabs-font-size: 1.25rem,
   tabs-active-font-weight: font-weight-normal
-), default, default);
+), docs, default);
 

docs/tsconfig.app.json

@@ -23,5 +23,9 @@
   "exclude": [
     "test.ts",
     "**/*.spec.ts"
+  ],
+  "include": [
+    "../docs/**/*",
+    "../src/playground/playground.module.ts"
   ]
 }

src/app/app.module.ts

@@ -66,10 +66,9 @@ import {
   NbMenuTestComponent,
 } from './menu-test/menu-test.component';
 import { NbUserTestComponent } from './user-test/user-test.component';
-import { NbDynamicToAddComponent, NbThemeDynamicTestComponent } from './layout-test/theme-dynamic-test.component';
+import { NbThemeDynamicTestComponent } from './layout-test/theme-dynamic-test.component';
 import { NbActionsTestComponent } from './actions-test/actions-test.component';
 import { NbBootstrapTestComponent } from './bootstrap-test/bootstrap-test.component';
-import { NbPopoverTestComponent } from './popover-test/popover-test.component';
 import { NbContextMenuTestComponent } from './context-menu-test/context-menu-test.component';
 
 import { routes } from './app.routes';
@@ -83,6 +82,8 @@ import { NbCardTestComponent } from './card-test/card-test.component';
 import { NbAclTestComponent } from './acl-test/acl-test.component';
 import { AuthGuard } from './auth-guard.service';
 import { RoleProvider } from './role.provider';
+import { NbDynamicToAddComponent } from './dynamic.component';
+import { NbPlaygroundModule } from '../playground/playground.module';
 
 const NB_TEST_COMPONENTS = [
   NbAppComponent,
@@ -113,12 +114,10 @@ const NB_TEST_COMPONENTS = [
   NbSearchTestComponent,
   NbSearchTestCustomizedComponent,
   NbBootstrapTestComponent,
-  NbDynamicToAddComponent,
   NbThemeDynamicTestComponent,
   NbThemeBreakpointTestComponent,
   NbActionsTestComponent,
   NbFormsTestComponent,
-  NbPopoverTestComponent,
   NbCheckboxTestComponent,
   NbAclTestComponent,
   NbContextMenuTestComponent,
@@ -143,6 +142,7 @@ const NB_TEST_COMPONENTS = [
     NbPopoverModule,
     NbContextMenuModule,
     NbCheckboxModule,
+    NbPlaygroundModule,
     NbAuthModule.forRoot({
       forms: {
         login: {

src/app/app.routes.ts

@@ -41,7 +41,6 @@ import { NbSidebarTestComponent } from './sidebar-test/sidebar-test.component';
 import { NbTabsetTestComponent } from './tabset-test/tabset-test.component';
 import { NbUserTestComponent } from './user-test/user-test.component';
 import { NbCardTestComponent } from './card-test/card-test.component';
-import { NbPopoverTestComponent } from './popover-test/popover-test.component';
 import {
   NbAuthComponent,
   NbLoginComponent,
@@ -54,8 +53,10 @@ import { AuthGuard } from './auth-guard.service';
 import { NbCheckboxTestComponent } from './checkbox-test/checkbox-test.component';
 import { NbAclTestComponent } from './acl-test/acl-test.component';
 import { NbContextMenuTestComponent } from './context-menu-test/context-menu-test.component';
+import { routes as playgroundRoutes } from '../playground/playground-routing.module';
 
 export const routes: Routes = [
+  ...playgroundRoutes,
   {
     path: '',
     component: NbCardTestComponent,
@@ -251,10 +252,6 @@ export const routes: Routes = [
     path: 'forms',
     component: NbFormsTestComponent,
   },
-  {
-    path: 'popover',
-    component: NbPopoverTestComponent,
-  },
   {
     path: 'acl',
     component: NbAclTestComponent,

src/app/dynamic.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'nb-dynamic-to-add',
+  template: `
+    <div>
+      <strong>hello from dynamically inserted component: {{text}}</strong>
+    </div>
+  `,
+})
+export class NbDynamicToAddComponent {
+
+  @Input()
+  text: string = '';
+}

src/app/layout-test/theme-dynamic-test.component.ts

@@ -4,23 +4,10 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component, Input, ComponentFactoryResolver } from '@angular/core';
+import { Component, ComponentFactoryResolver } from '@angular/core';
 
 import { NbThemeService } from '@nebular/theme';
-
-@Component({
-  selector: 'nb-dynamic-to-add',
-  template: `
-    <div>
-      <strong>hello from dynamically inserted component: {{text}}</strong>
-    </div>
-  `,
-})
-export class NbDynamicToAddComponent {
-
-  @Input()
-  text: string = '';
-}
+import { NbDynamicToAddComponent } from '../dynamic.component';
 
 @Component({
   selector: 'nb-dynamic-test',
@@ -34,7 +21,7 @@ export class NbDynamicToAddComponent {
       </nb-layout-header>
 
       <nb-sidebar right>
-          Sidebar content
+        Sidebar content
       </nb-sidebar>
 
       <nb-layout-column>
@@ -51,10 +38,11 @@ export class NbDynamicToAddComponent {
         &copy; Akveo 2017
       </nb-layout-footer>
     </nb-layout>
-`,
+  `,
 })
 export class NbThemeDynamicTestComponent {
-  constructor(private themeService: NbThemeService, private componentFactoryResolver: ComponentFactoryResolver) {}
+  constructor(private themeService: NbThemeService, private componentFactoryResolver: ComponentFactoryResolver) {
+  }
 
   addDynamicComponent() {
     this.themeService.appendToLayoutTop(NbDynamicToAddComponent).subscribe(cRef => console.info(cRef));

src/playground/examples/index.ts

@@ -0,0 +1 @@
+export * from './popover-example.component';

src/app/popover-test/popover-test.component.ts → src/playground/examples/popover-example.component.ts

@@ -5,15 +5,14 @@
  */
 
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NbDynamicToAddComponent } from '../layout-test/theme-dynamic-test.component';
+import { NbDynamicToAddComponent } from '../../app/dynamic.component';
 
 @Component({
-  selector: 'nb-popover-test',
+  selector: 'nb-popover-example',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <nb-layout>
       <nb-layout-column>
-
         <nb-card>
           <nb-card-header>Content Type</nb-card-header>
           <nb-card-body>
@@ -146,11 +145,12 @@ import { NbDynamicToAddComponent } from '../layout-test/theme-dynamic-test.compo
             </button>
           </nb-card-body>
         </nb-card>
+
       </nb-layout-column>
     </nb-layout>
   `,
 })
-export class NbPopoverTestComponent {
+export class NbPopoverExampleComponent {
 
   customPopoverComponent = NbDynamicToAddComponent;
 

src/playground/playground-routing.module.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { NbPopoverExampleComponent } from './examples';
+import { NbPlaygroundComponent } from './playground.component';
+
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: NbPlaygroundComponent,
+    children: [
+      { path: 'popover', component: NbPopoverExampleComponent },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class NbPlaygroundRoutingModule {
+}

src/playground/playground.component.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+
+@Component({
+  selector: 'nb-playground',
+  template: '<router-outlet></router-outlet>',
+})
+
+export class NbPlaygroundComponent implements OnInit {
+  constructor(private themeService: NbThemeService) {
+  }
+
+  ngOnInit() {
+    this.themeService.changeTheme('default');
+  }
+}

src/playground/playground.module.ts

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NbCardModule, NbLayoutModule, NbPopoverModule } from '@nebular/theme';
+
+import { NbPlaygroundRoutingModule } from './playground-routing.module';
+import { NbPlaygroundComponent } from './playground.component';
+import { NbPopoverExampleComponent } from './examples';
+import { NbDynamicToAddComponent } from '../app/dynamic.component';
+
+export const NB_MODULES = [
+  NbCardModule,
+  NbLayoutModule,
+  NbPopoverModule,
+];
+
+export const NB_EXAMPLE_COMPONENTS = [
+  NbPopoverExampleComponent,
+];
+
+export const NB_ENTRY_COMPONENTS = [
+  NbDynamicToAddComponent,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    NbPlaygroundRoutingModule,
+    ...NB_MODULES,
+  ],
+  exports: [
+    ...NB_ENTRY_COMPONENTS,
+    ...NB_EXAMPLE_COMPONENTS,
+  ],
+  declarations: [
+    NbPlaygroundComponent,
+    ...NB_ENTRY_COMPONENTS,
+    ...NB_EXAMPLE_COMPONENTS,
+  ],
+  entryComponents: [
+    ...NB_ENTRY_COMPONENTS,
+  ],
+})
+export class NbPlaygroundModule {
+}