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 {
+}