Merge pull request #560 from RobbyDeLaet/feature/showcase-pretty-print

feat(stark-demo): add pretty-print component to Showcase Demo

showcase/src/app/app.component.html

@@ -40,6 +40,9 @@
 			<a mat-list-item uiSref="demo-keyboard-directives" uiSrefActive="active">
 				<span matLine>Keyboard Directives</span>
 			</a>
+			<a mat-list-item uiSref="demo-pretty-print" uiSrefActive="active">
+				<span matLine>Pretty Print</span>
+			</a>
 			<a mat-list-item uiSref="demo-table" uiSrefActive="active">
 				<span matLine>Table</span>
 			</a>

showcase/src/app/app.routes.ts

@@ -1,4 +1,12 @@
-import { ActionBarComponent, ButtonComponent, ExampleViewerComponent, KeyboardDirectivesComponent, TableComponent } from "./demo";
+import {
+	ActionBarComponent,
+	ButtonComponent,
+	ExampleViewerComponent,
+	KeyboardDirectivesComponent,
+	PrettyPrintComponent,
+	TableComponent
+} from "./demo";
+
 import { HomeComponent } from "./home";
 import { NoContentComponent } from "./no-content";
 import { Ng2StateDeclaration } from "@uirouter/angular";
@@ -9,6 +17,7 @@ export const APP_STATES: Ng2StateDeclaration[] = [
 	{ name: "demo-button", url: "/demo/button", component: ButtonComponent },
 	{ name: "demo-example-viewer", url: "/demo/example-viewer", component: ExampleViewerComponent },
 	{ name: "demo-keyboard-directives", url: "/demo/keyboard-directives", component: KeyboardDirectivesComponent },
+	{ name: "demo-pretty-print", url: "/demo/pretty-print", component: PrettyPrintComponent },
 	{ name: "demo-table", url: "/demo/table", component: TableComponent },
 	{ name: "otherwise", url: "/otherwise", component: NoContentComponent }
 ];

showcase/src/app/demo/demo.module.ts

@@ -16,18 +16,22 @@ import { ActionBarComponent } from "./action-bar/action-bar.component";
 import { ButtonComponent } from "./button/button.component";
 import { ExampleViewerComponent } from "./example-viewer/example-viewer.component";
 import { KeyboardDirectivesComponent } from "./keyboard-directives/keyboard-directives.component";
+import { PrettyPrintComponent } from "./pretty-print/pretty-print.component";
 import { TableComponent } from "./table/table.component";
 import { SharedModule } from "../shared/shared.module";
 import {
 	StarkActionBarModule,
+	StarkKeyboardDirectivesModule,
+	StarkPrettyPrintModule,
 	StarkSliderModule,
 	StarkTableModule,
-	StarkSvgViewBoxModule,
-	StarkKeyboardDirectivesModule
+	StarkSvgViewBoxModule
 } from "@nationalbankbelgium/stark-ui";
 
 @NgModule({
 	imports: [
+		CommonModule,
+		FormsModule,
 		MatButtonModule,
 		MatCardModule,
 		MatFormFieldModule,
@@ -36,17 +40,30 @@ import {
 		MatTooltipModule,
 		MatSnackBarModule,
 		MatTabsModule,
-		CommonModule,
-		FormsModule,
 		TranslateModule,
 		SharedModule,
 		StarkActionBarModule,
+		StarkKeyboardDirectivesModule,
+		StarkPrettyPrintModule,
 		StarkSliderModule,
 		StarkSvgViewBoxModule,
-		StarkKeyboardDirectivesModule,
 		StarkTableModule
 	],
-	declarations: [ActionBarComponent, ButtonComponent, ExampleViewerComponent, KeyboardDirectivesComponent, TableComponent],
-	exports: [ActionBarComponent, ButtonComponent, ExampleViewerComponent, KeyboardDirectivesComponent, TableComponent]
+	declarations: [
+		ActionBarComponent,
+		ButtonComponent,
+		ExampleViewerComponent,
+		KeyboardDirectivesComponent,
+		PrettyPrintComponent,
+		TableComponent
+	],
+	exports: [
+		ActionBarComponent,
+		ButtonComponent,
+		ExampleViewerComponent,
+		KeyboardDirectivesComponent,
+		PrettyPrintComponent,
+		TableComponent
+	]
 })
 export class DemoModule {}

showcase/src/app/demo/index.ts

@@ -2,5 +2,6 @@ export * from "./action-bar";
 export * from "./button";
 export * from "./example-viewer";
 export * from "./keyboard-directives";
+export * from "./pretty-print";
 export * from "./table";
 export * from "./demo.module";

showcase/src/app/demo/pretty-print/index.ts

@@ -0,0 +1 @@
+export * from "./pretty-print.component";

showcase/src/app/demo/pretty-print/pretty-print.component.html

@@ -0,0 +1,22 @@
+<example-viewer *ngFor="let fileType of fileTypes; trackBy: trackFileTypes"
+				[extensions]="['HTML', 'SCSS', 'TS']"
+				[filesPath]="fileType.path"
+				[title]="fileType.title">
+	<mat-tab-group>
+		<mat-tab label="{{ 'SHOWCASE.DEMO.PRETTY-PRINT.ORIGINAL_CODE'  | translate }}">
+			<div class="code-block">{{ fileType.rawData }}</div>
+		</mat-tab>
+		<mat-tab label="{{ 'SHOWCASE.DEMO.PRETTY-PRINT.PRETTY_PRINTED' | translate }}">
+			<div class="code-block">
+				<stark-pretty-print [data]="fileType.rawData"
+									[format]="fileType.format"
+									[enableHighlighting]="false"></stark-pretty-print>
+			</div>
+		</mat-tab>
+		<mat-tab label="{{ 'SHOWCASE.DEMO.PRETTY-PRINT.PRETTY_PRINTED_WITH_HIGHLIGHTING' | translate }}">
+			<stark-pretty-print [data]="fileType.rawData"
+								[format]="fileType.format"
+								[enableHighlighting]="true"></stark-pretty-print>
+		</mat-tab>
+	</mat-tab-group>
+</example-viewer>

showcase/src/app/demo/pretty-print/pretty-print.component.scss

@@ -0,0 +1,5 @@
+.code-block {
+  background-color: #e6e6e6;
+  overflow-x: auto;
+  padding: 8px;
+}

showcase/src/app/demo/pretty-print/pretty-print.component.ts

@@ -0,0 +1,153 @@
+import { Component, OnInit, Inject } from "@angular/core";
+import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+import { StarkPrettyPrintFormat } from "@nationalbankbelgium/stark-ui";
+
+export interface FileType {
+	format: StarkPrettyPrintFormat;
+	title: string;
+	path: string;
+	rawData: string;
+}
+
+@Component({
+	selector: "showcase-demo-pretty-print",
+	templateUrl: "./pretty-print.component.html",
+	styleUrls: ["./pretty-print.component.scss"]
+})
+export class PrettyPrintComponent implements OnInit {
+	public fileTypes: FileType[] = [];
+
+	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
+
+	public ngOnInit(): void {
+		this.addCss();
+		this.addScss();
+		this.addHtml();
+		this.addJavascript();
+		this.addTypescript();
+		this.addJson();
+		this.addXml();
+		this.addSql();
+	}
+
+	public trackFileTypes(_index: number, fileType: any): string {
+		return fileType.format;
+	}
+
+	private addCss(): void {
+		const fileType: FileType = {
+			format: "css",
+			title: "SHOWCASE.DEMO.PRETTY-PRINT.CSS",
+			path: "pretty-print/css",
+			rawData: [
+				"body{background: #D2DA9C url(leftcolbg.jpg)repeat-y left top;color: #FFF;}",
+				"p{margin-bottom:1em}ul{margin-left:20px;margin-bottom:1em}"
+			].join("")
+		};
+		this.fileTypes.push(fileType);
+	}
+
+	private addScss(): void {
+		const fileType: FileType = {
+			format: "scss",
+			title: "SHOWCASE.DEMO.PRETTY-PRINT.SCSS",
+			path: "pretty-print/scss",
+			rawData: [
+				"$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }"
+			].join("")
+		};
+		this.fileTypes.push(fileType);
+	}
+
+	private addHtml(): void {
+		const fileType: FileType = {
+			format: "html",
+			title: "SHOWCASE.DEMO.PRETTY-PRINT.HTML",
+			path: "pretty-print/html",
+			rawData: [
+				"<!DOCTYPE html><html><head><style>body {background-color: powderblue;}h1{color: blue;}p{color: red;}",
+				"</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>"
+			].join("")
+		};
+		this.fileTypes.push(fileType);
+	}
+
+	private addJavascript(): void {
+		const fileType: FileType = {
+			format: "javascript",
+			title: "SHOWCASE.DEMO.PRETTY-PRINT.JAVASCRIPT",
+			path: "pretty-print/javascript",
+			rawData: [
+				"function calculateData(seed, operationFn) {",
+				"var data = operationFn(seed);",
+				"if (!data){",
+				"data = 'could not calculate data';",
+				"}",
+				"return data;",
+				"}"
+			].join("")
+		};
+		this.fileTypes.push(fileType);
+	}
+
+	private addTypescript(): void {
+		const fileType: FileType = {
+			format: "typescript",
+			title: "SHOWCASE.DEMO.PRETTY-PRINT.TYPESCRIPT",
+			path: "pretty-print/typescript",
+			rawData: [
+				"function calculateData(seed:any, operationFn:Function):any {",
+				"var data:any = operationFn(seed);",
+				"if (!data){",
+				"data = 'could not calculate data';",
+				"}",
+				"return data;",
+				"}"
+			].join("")
+		};
+		this.fileTypes.push(fileType);
+	}
+
+	private addJson(): void {
+		const fileType: FileType = {
+			format: "json",
+			title: "SHOWCASE.DEMO.PRETTY-PRINT.JSON",
+			path: "pretty-print/json",
+			rawData: [
+				'{"menu": { "id": "file", "value": "File",',
+				'"menuitem": [{"value": "New", "onclick": "CreateNewDoc()"},',
+				'{"value": "Open", "onclick": "OpenDoc()"},',
+				'{"value": "Close", "onclick": "CloseDoc()"}]}}'
+			].join("")
+		};
+		this.fileTypes.push(fileType);
+	}
+
+	private addXml(): void {
+		const fileType: FileType = {
+			format: "xml",
+			title: "SHOWCASE.DEMO.PRETTY-PRINT.XML",
+			path: "pretty-print/xml",
+			rawData: [
+				'<menu id="file" value="File"><menuitem value="New" onclick="CreateNewDoc()" />',
+				'<menuitem value="Open" onclick="OpenDoc()" />',
+				'<menuitem value="Close" onclick="CloseDoc()" /></menu>'
+			].join("")
+		};
+		this.fileTypes.push(fileType);
+	}
+
+	private addSql(): void {
+		const fileType: FileType = {
+			format: "sql",
+			title: "SHOWCASE.DEMO.PRETTY-PRINT.SQL",
+			path: "pretty-print/sql",
+			rawData: [
+				"SELECT DISTINCT Name FROM Production.Product AS p WHERE EXISTS (SELECT * ",
+				"FROM Production.ProductModel AS pm WHERE p.ProductModelID = pm.ProductModelID ",
+				"AND pm.Name LIKE 'Long-Sleeve Logo Jersey%')"
+			].join("")
+		};
+		this.fileTypes.push(fileType);
+	}
+}

showcase/src/assets/examples/pretty-print/css.html

@@ -0,0 +1,10 @@
+<h3>Original Code</h3>
+<pre class="code-block">{{rawCssData}}</pre>
+
+<h3>Pretty Printed</h3>
+<div class="code-block">
+	<stark-pretty-print [data]="rawCssData" format="css" [enableHighlighting]="false"></stark-pretty-print>
+</div>
+
+<h3>Pretty Printed & Highlighted</h3>
+<stark-pretty-print [data]="rawCssData" format="css" [enableHighlighting]="true"></stark-pretty-print>

showcase/src/assets/examples/pretty-print/css.scss

@@ -0,0 +1,5 @@
+.code-block {
+  background-color: #e6e6e6;
+  overflow-x: auto;
+  padding: 8px;
+}

showcase/src/assets/examples/pretty-print/css.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+	selector: "pretty-print-example",
+	templateUrl: "./pretty-print.component.html",
+	styleUrls: ["./pretty-print.component.scss"]
+})
+export class PrettyPrintComponent implements OnInit {
+	public rawCssData: string;
+
+	public ngOnInit(): void {
+		this.rawCssData = [
+			"body{background: #D2DA9C url(leftcolbg.jpg)repeat-y left top;color: #FFF;}",
+			"p{margin-bottom:1em}ul{margin-left:20px;margin-bottom:1em}"
+		].join("");
+	}
+}

showcase/src/assets/examples/pretty-print/html.html

@@ -0,0 +1,10 @@
+<h3>Original Code</h3>
+<pre class="code-block">{{rawHtmlData}}</pre>
+
+<h3>Pretty Printed</h3>
+<div class="code-block">
+	<stark-pretty-print [data]="rawHtmlData" format="hHtml" [enableHighlighting]="false"></stark-pretty-print>
+</div>
+
+<h3>Pretty Printed & Highlighted</h3>
+<stark-pretty-print [data]="rawHtmlData" format="hHtml" [enableHighlighting]="true"></stark-pretty-print>

showcase/src/assets/examples/pretty-print/html.scss

@@ -0,0 +1,5 @@
+.code-block {
+  background-color: #e6e6e6;
+  overflow-x: auto;
+  padding: 8px;
+}

showcase/src/assets/examples/pretty-print/html.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+	selector: "pretty-print-example",
+	templateUrl: "./pretty-print.component.html",
+	styleUrls: ["./pretty-print.component.scss"]
+})
+export class PrettyPrintComponent implements OnInit {
+	public rawHtmlData: string;
+
+	public ngOnInit(): void {
+		this.rawHtmlData = [
+			"<!DOCTYPE html><html><head><style>body {background-color: powderblue;}h1{color: blue;}p{color: red;}",
+			"</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>"
+		].join("");
+	}
+}

showcase/src/assets/examples/pretty-print/javascript.html

@@ -0,0 +1,10 @@
+<h3>Original Code</h3>
+<pre class="code-block">{{rawJavascriptData}}</pre>
+
+<h3>Pretty Printed</h3>
+<div class="code-block">
+	<stark-pretty-print [data]="rawJavascriptData" format="javascript" [enableHighlighting]="false"></stark-pretty-print>
+</div>
+
+<h3>Pretty Printed & Highlighted</h3>
+<stark-pretty-print [data]="rawJavascriptData" format="javascript" [enableHighlighting]="true"></stark-pretty-print>

showcase/src/assets/examples/pretty-print/javascript.scss

@@ -0,0 +1,5 @@
+.code-block {
+  background-color: #e6e6e6;
+  overflow-x: auto;
+  padding: 8px;
+}

showcase/src/assets/examples/pretty-print/javascript.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+	selector: "pretty-print-example",
+	templateUrl: "./pretty-print.component.html",
+	styleUrls: ["./pretty-print.component.scss"]
+})
+export class PrettyPrintComponent implements OnInit {
+	public rawJavascriptData: string;
+
+	public ngOnInit(): void {
+		this.rawJavascriptData = [
+			"function calculateData(seed, operationFn) {",
+			"var data = operationFn(seed);",
+			"if (!data){",
+			"data = 'could not calculate data';",
+			"}",
+			"return data;",
+			"}"
+		].join("");
+	}
+}