feat(adoption): provide builder page to create StackBlitz demos

Signed-off-by: Bozhidar Dryanovski <[email protected]>

Author: bdryanovski

src/app/app-routing.module.ts

@@ -46,7 +46,7 @@ import { LandingPage } from './pages/landing.page';
 import { OverviewPage } from './pages/overview.page';
 import { ApproachesPage } from './pages/approaches.page';
 import { DifferencesPage } from './pages/differences.page';
-
+import { TemplateBuilderPage } from './pages/template-builder.page';
 export const componentRoutes = [
   { path: 'overview', component: OverviewPage },
   { path: 'accordion', component: AccordionPage },
@@ -88,6 +88,7 @@ export const getStartedRoutes = [
   { path: 'get-started', component: GettingStartedPage },
   { path: 'differences', component: DifferencesPage },
   { path: 'approaches', component: ApproachesPage },
+  { path: 'builder', component: TemplateBuilderPage },
 ];
 
 const routes: Routes = [

src/app/app.module.ts

@@ -58,6 +58,8 @@ import { ApproachesPage } from './pages/approaches.page';
 import { MenuTitlePipe } from './pipes/menu-title.pipe';
 import { OverviewPage } from './pages/overview.page';
 import { DifferencesPage } from './pages/differences.page';
+import { TemplateBuilderPage } from './pages/template-builder.page';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -105,6 +107,8 @@ import { DifferencesPage } from './pages/differences.page';
     TooltipPage,
     AdoptionToolingPage,
 
+    TemplateBuilderPage,
+
     /* Interface Components */
     EslintIntroBlockComponent,
     SourceCodeComponent,
@@ -114,7 +118,7 @@ import { DifferencesPage } from './pages/differences.page';
 
     MenuTitlePipe,
   ],
-  imports: [BrowserModule, BrowserAnimationsModule, CdsModule, AppRoutingModule, ClarityModule],
+  imports: [BrowserModule, BrowserAnimationsModule, FormsModule, CdsModule, AppRoutingModule, ClarityModule],
   providers: [],
   bootstrap: [AppComponent],
 })

src/app/components/demo.component.ts

@@ -15,27 +15,18 @@ import { SupportedTemplates } from '../templates';
 // Icons
 import {
   ClarityIcons,
-  landscapeIcon,
   boltIcon,
-  terminalIcon,
-  codeIcon,
-  betaIcon,
-  viewColumnsIcon,
 } from '@cds/core/icon';
 
-ClarityIcons.addIcons(landscapeIcon, boltIcon, terminalIcon, codeIcon, betaIcon, viewColumnsIcon);
+ClarityIcons.addIcons(boltIcon);
 
 export interface DemoTabData {
-  id?: string;
   name: string;
   files: { [filename: string]: string };
   language?: SourceCodeLanguages;
   template: SupportedTemplates;
 }
 
-// Generate Preview IDs
-let PreviewID = 0;
-
 @Component({
   selector: 'demo',
   template: `
@@ -60,31 +51,10 @@ let PreviewID = 0;
   providers: [StackblitzService],
 })
 export class Demo {
-  inOverflow = true;
-
   @Input('tabs') tabs: DemoTabData[] = [];
 
   constructor(private stackblitz: StackblitzService) {}
 
-  ngOnInit(): void {
-    if (Array.isArray(this.tabs)) {
-      // auto attach unique id for every tab - later used for embedding the preview
-      this.tabs = this.tabs.map(tab => {
-        tab.id = this.generateId();
-        return tab;
-      });
-    }
-  }
-
-  /**
-   * Generate hash key for attaching preview container
-   *
-   * @returns number
-   */
-  public generateId(): string {
-    return PreviewID++ + '';
-  }
-
   public async openStackblitz(tab: DemoTabData): Promise<void> {
     await this.stackblitz.open(tab.template, tab.files);
   }

src/app/components/sourcecode.component.ts

@@ -30,7 +30,7 @@ export type SourceCodeLanguages = 'ts' | 'js' | 'html' | 'bash' | 'json' | undef
 export class SourceCodeComponent {
   @Input() content: string | null = '';
   @Input() language: SourceCodeLanguages = 'ts';
-  @Input() src = '';
+  @Input() src: string = '' ;
   formattedContent = '';
 
   ngOnInit() {

src/app/pages/accordion.page.ts

@@ -26,7 +26,7 @@ import { DemoTabData } from '../components/demo.component';
     </status-block>
 
     <demo [tabs]="demo1">
-      <h3 cds-text="section">With expanded, disabled and exapandable panels</h3>
+      <h3 cds-text="section">With expanded, disabled and expandable panels</h3>
     </demo>
   `,
 })
@@ -37,15 +37,15 @@ export class AccordionPage {
       files: {
         'src/app/app.component.ts': 'accordion/accordion.1.angular.txt',
       },
-      language: 'ts',
+
       template: 'angular',
     },
     {
       name: 'Core',
       files: {
         'src/app/app.component.ts': 'accordion/accordion.1.core.txt',
       },
-      language: 'ts',
+
       template: 'core',
     },
   ];

src/app/pages/alert.page.ts

@@ -42,15 +42,15 @@ export class AlertPage {
       files: {
         'src/app/app.component.ts': 'alert/alert.1.angular.txt',
       },
-      language: 'ts',
+
       template: 'angular',
     },
     {
       name: 'Core',
       files: {
         'src/app/app.component.ts': 'alert/alert.1.core.txt',
       },
-      language: 'ts',
+
       template: 'core',
     },
   ];
@@ -61,15 +61,15 @@ export class AlertPage {
       files: {
         'src/app/app.component.ts': 'alert/alert.2.angular.txt',
       },
-      language: 'ts',
+
       template: 'angular',
     },
     {
       name: 'Core',
       files: {
         'src/app/app.component.ts': 'alert/alert.2.core.txt',
       },
-      language: 'ts',
+
       template: 'core',
     },
   ];
@@ -80,15 +80,15 @@ export class AlertPage {
       files: {
         'src/app/app.component.ts': 'alert/alert.3.angular.txt',
       },
-      language: 'ts',
+
       template: 'angular',
     },
     {
       name: 'Core',
       files: {
         'src/app/app.component.ts': 'alert/alert.3.core.txt',
       },
-      language: 'ts',
+
       template: 'core',
     },
   ];

src/app/pages/badge.page.ts

@@ -31,15 +31,15 @@ export class BadgePage {
       files: {
         'src/app/app.component.ts': 'badges/badge.1.angular.txt',
       },
-      language: 'ts',
+
       template: 'angular',
     },
     {
       name: 'Core',
       files: {
         'src/app/app.component.ts': 'badges/badge.1.core.txt',
       },
-      language: 'ts',
+
       template: 'core',
     },
   ];
@@ -50,15 +50,15 @@ export class BadgePage {
       files: {
         'src/app/app.component.ts': 'badges/badge.2.angular.txt',
       },
-      language: 'ts',
+
       template: 'angular',
     },
     {
       name: 'Core',
       files: {
         'src/app/app.component.ts': 'badges/badge.2.core.txt',
       },
-      language: 'ts',
+
       template: 'core',
     },
   ];

src/app/pages/button.page.ts

@@ -49,15 +49,15 @@ export class ButtonPage {
       files: {
         'src/app/app.component.ts': 'button/button.1.angular.txt',
       },
-      language: 'ts',
+
       template: 'angular',
     },
     {
       name: 'Core',
       files: {
         'src/app/app.component.ts': 'button/button.1.core.txt',
       },
-      language: 'ts',
+
       template: 'core',
     },
   ];
@@ -68,15 +68,15 @@ export class ButtonPage {
       files: {
         'src/app/app.component.ts': 'button/button.2.angular.txt',
       },
-      language: 'ts',
+
       template: 'angular',
     },
     {
       name: 'Core',
       files: {
         'src/app/app.component.ts': 'button/button.2.core.txt',
       },
-      language: 'ts',
+
       template: 'core',
     },
   ];
@@ -87,15 +87,15 @@ export class ButtonPage {
       files: {
         'src/app/app.component.ts': 'button/button.3.angular.txt',
       },
-      language: 'ts',
+
       template: 'angular',
     },
     {
       name: 'Core',
       files: {
         'src/app/app.component.ts': 'button/button.3.core.txt',
       },
-      language: 'ts',
+
       template: 'core',
     },
   ];
@@ -106,15 +106,15 @@ export class ButtonPage {
       files: {
         'src/app/app.component.ts': 'button/button.4.angular.txt',
       },
-      language: 'ts',
+
       template: 'angular',
     },
     {
       name: 'Core',
       files: {
         'src/app/app.component.ts': 'button/button.4.core.txt',
       },
-      language: 'ts',
+
       template: 'core',
     },
   ];
@@ -125,15 +125,15 @@ export class ButtonPage {
       files: {
         'src/app/app.component.ts': 'button/button.5.angular.txt',
       },
-      language: 'ts',
+
       template: 'angular',
     },
     {
       name: 'Core',
       files: {
         'src/app/app.component.ts': 'button/button.5.core.txt',
       },
-      language: 'ts',
+
       template: 'core',
     },
   ];
@@ -144,15 +144,15 @@ export class ButtonPage {
       files: {
         'src/app/app.component.ts': 'button/button.6.angular.txt',
       },
-      language: 'ts',
+
       template: 'angular',
     },
     {
       name: 'Core',
       files: {
         'src/app/app.component.ts': 'button/button.6.core.txt',
       },
-      language: 'ts',
+
       template: 'core',
     },
   ];

src/app/pages/card.page.ts

@@ -23,15 +23,15 @@ export class CardPage {
       files: {
         'src/app/app.component.ts': 'card/card.1.angular.txt',
       },
-      language: 'ts',
+
       template: 'angular',
     },
     {
       name: 'Core',
       files: {
         'src/app/app.component.ts': 'card/card.1.core.txt',
       },
-      language: 'ts',
+
       template: 'core',
     },
   ];
@@ -42,15 +42,15 @@ export class CardPage {
       files: {
         'src/app/app.component.ts': 'card/card.2.angular.txt',
       },
-      language: 'ts',
+
       template: 'angular',
     },
     {
       name: 'Core',
       files: {
         'src/app/app.component.ts': 'card/card.2.core.txt',
       },
-      language: 'ts',
+
       template: 'core',
     },
   ];