Add example app (#52)

* add showcase app

* Add styles

* add live json renderer

* Fix JSON editor

* fix pefixes in the showcase

* fix lint

* fix tests

* Update test-dynamic-control.component.ts

* Update workspace.json

Co-authored-by: ihor-panasiuk95 <[email protected]>

apps/showcase/.browserslistrc

@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

apps/showcase/.eslintrc.json

@@ -0,0 +1,28 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "showcase",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

apps/showcase/karma.conf.ci.js

@@ -0,0 +1,19 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+const { join } = require('path');
+const getBaseKarmaConfig = require('../../karma-configs/karma.conf.ci');
+
+module.exports = function (config) {
+  const baseConfig = getBaseKarmaConfig(config);
+
+  config.set({
+    ...baseConfig,
+    coverageIstanbulReporter: {
+      ...baseConfig.coverageIstanbulReporter,
+      dir: join(__dirname, '../../coverage/libs/showcase'),
+    },
+  });
+
+  return config;
+};

apps/showcase/karma.conf.js

@@ -0,0 +1,16 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+const { join } = require('path');
+const getBaseKarmaConfig = require('../../karma-configs/karma.conf.base');
+
+module.exports = function (config) {
+  const baseConfig = getBaseKarmaConfig(config);
+  config.set({
+    ...baseConfig,
+    coverageIstanbulReporter: {
+      ...baseConfig.coverageIstanbulReporter,
+      dir: join(__dirname, '../../coverage/libs/showcase'),
+    },
+  });
+};

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

@@ -0,0 +1,51 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+    {
+        path: '',
+        children: [
+            { path: '', redirectTo: 'simple-form-without-renderer', pathMatch: 'prefix' },
+            {
+                path: 'simple-form-native-approach',
+                loadChildren: () => import('./modules/simple-form-native-approach/simple-form-native-approach.module').then(x => x.SimpleFormNativeApproachModule)
+            },
+            {
+                path: 'simple-form-without-renderer',
+                loadChildren: () => import('./modules/simple-form-without-renderer/simple-form-without-renderer.module').then(x => x.SimpleFormWithoutRendererModule)
+            },
+            { path: 'simple-form', loadChildren: () => import('./modules/simple-form/simple-form.module').then(x => x.SimpleFormModule) },
+            {
+                path: 'simple-form-ng-temlate',
+                loadChildren: () => import('./modules/simple-form-ng-template/simple-form-ng-template.module').then(x => x.SimpleFormNgTemplateModule)
+            },
+            {
+                path: 'simple-form-with-controls-styling',
+                loadChildren: () => import('./modules/simple-form-with-controls-styling/simple-form-with-controls-styling.module').then(x => x.SimpleFormWithControlsStylingModule)
+            },
+            // {
+            //     path: 'forms-from-server',
+            //     loadChildren: () => import('./modules/forms-from-server/forms-from-server.module').then(x => x.FormsFromServerModule)
+            // },
+            {
+                path: 'simple-form-with-inputs-binder-directive',
+                loadChildren: () => import('./modules/simple-form-with-inputs-binder-directive/simple-form-with-inputs-binder-directive.module').then(x => x.SimpleFormWitInputsBinderModule)
+            },
+            // {
+            //     path: 'dynamic-form-wizard',
+            //     loadChildren: () => import('./modules/wizard/wizard.module').then(x => x.WizardModule)
+            // },
+            {
+                path: 'live-json-renderer',
+                loadChildren: () => import('./modules/live-json-renderer/live-json-renderer.module').then(x => x.LiveJsonRendererModule)
+            }
+        ]
+    },
+    { path: '**', pathMatch: 'full', redirectTo: 'simple-form-without-renderer' }
+];
+
+@NgModule({
+    imports: [RouterModule.forRoot(routes)],
+    exports: [RouterModule]
+})
+export class AppRoutingModule {}

apps/showcase/src/app/app.component.html

@@ -0,0 +1,39 @@
+<div class="sidebar menu">
+    <div class="title">Dynamic Form Showcase</div>
+    <button
+        *ngFor="let formButton of formButtons"
+        type="button"
+        [routerLink]="formButton.path"
+        routerLinkActive="btn-active"
+        class="btn btn-dark"
+    >
+        {{ formButton.title }}
+    </button>
+</div>
+<div class="content">
+    <div><router-outlet (activate)="activateRoute($event)" (deactivate)="deactivateRoute($event)"></router-outlet></div>
+</div>
+<div class="sidebar form-state-reflection" *ngIf="currentComponent && !currentComponent.hideFormStateReflection">
+    <div class="card form-output">
+        <div class="card-header">Form output</div>
+        <div class="card-body">
+            <pre
+                class="json-display"
+                [innerHtml]="currentComponent.formGroup ? (currentComponent.formGroup.valueChanges | async | prettyjson: 3) : ''"
+            ></pre>
+        </div>
+    </div>
+    <div class="card form-state">
+        <div class="card-header">Form State</div>
+        <div class="card-body">
+            <ng-container>
+                <div *ngFor="let fs of formStateReflectings" class="input-group mb-3">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text" id="inputGroup-sizing-sm">{{ fs.title }}</span>
+                    </div>
+                    <input type="text" readonly class="form-control" [value]="parse(fs.selector())" />
+                </div>
+            </ng-container>
+        </div>
+    </div>
+</div>

apps/showcase/src/app/app.component.scss

@@ -0,0 +1,118 @@
+:host {
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+}
+
+.btn-active {
+    background-color: #003b75;
+}
+
+.menu {
+    min-width: 350px;
+    max-width: 350px;
+}
+
+.menu,
+.form-state-reflection {
+    overflow-y: auto;
+}
+
+.form-state-reflection {
+    min-width: 300px;
+    max-width: 400px;
+}
+
+.sidebar {
+    background-color: #484848;
+    padding: 0px 25px 0px 25px;
+
+    button {
+        width: 100%;
+    }
+
+    .title {
+        margin: 0px 25px 25px 25px;
+        border-bottom: white 2px solid;
+        padding: 15px 25px 15px 25px;
+        font-weight: 600;
+        font-size: 1.5rem;
+        text-align: center;
+        color: #a3f1f1;
+    }
+}
+
+.content {
+    width: 100%;
+    background-color: #9da8ef;
+    display: flex;
+    justify-content: center;
+    overflow-y: auto;
+    > div {
+        margin-top: auto;
+        margin-bottom: auto;
+    }
+}
+
+.card {
+    border-radius: 10px;
+    margin-top: 50px;
+}
+
+.form-output {
+    height: 500px;
+
+    .card-body {
+        overflow: auto;
+    }
+}
+
+.form-state {
+    .input-group-prepend {
+        span {
+            width: 90px;
+        }
+    }
+
+    .form-control[readonly] {
+        background-color: white;
+    }
+}
+
+@media screen and (max-width: 992px) {
+    .menu,
+    .form-state-reflection {
+        max-width: 400px;
+        min-width: 250px;
+    }
+
+    .form-state {
+        .input-group-prepend {
+            span {
+                width: 65px;
+            }
+        }
+    }
+
+    .title {
+        font-size: 1rem !important;
+    }
+
+    .form-output .card-body {
+        max-height: 100px;
+    }
+
+    .input-group-text {
+        font-size: 0.8rem;
+        font-weight: 400;
+    }
+}
+
+@media screen and (max-width: 820px) {
+    :host {
+        min-width: 820px;
+    }
+}

apps/showcase/src/app/app.component.ts

@@ -0,0 +1,81 @@
+import { Component, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+
+export function isPrimitive(obj): boolean {
+    switch (typeof obj) {
+        case 'bigint':
+        case 'boolean':
+        case 'number':
+        case 'string':
+        case 'symbol':
+            return true;
+        default: return false;
+    }
+}
+
+@Component({
+    selector: 'showcase-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss']
+})
+export class AppComponent implements OnDestroy {
+    private forms = {
+        'Simple form native approach': 'simple-form-native-approach',
+        'Simple form without renderer': 'simple-form-without-renderer',
+        'Simple form': 'simple-form',
+        'Simple form with <ng-teplate></ng-template>': 'simple-form-ng-temlate',
+        'Simple form with controls styling': 'simple-form-with-controls-styling',
+        // 'Forms from server': 'forms-from-server',
+        'Simple form with inputs binder directive': 'simple-form-with-inputs-binder-directive',
+        'Live JSON renderer': 'live-json-renderer',
+        // 'Dynamic form wizard': 'dynamic-form-wizard'
+    };
+
+    formState = {
+        Controls: 'controls',
+        Valid: 'valid',
+        Dirty: 'dirty',
+        Pristine: 'pristine'
+    };
+
+    public formButtons = Object.keys(this.forms).map(key => ({ title: key, path: this.forms[key] }));
+    public formStateReflecting = Object.keys(this.formState).map(key => ({
+        title: key,
+        selector: () => this.currentComponent.formGroup[this.formState[key]]
+    }));
+
+    public get formStateReflectings() {
+        if (this.currentComponent.formGroup) {
+            return Object.keys(this.formState).map(key => ({
+                title: key,
+                selector: () => this.currentComponent.formGroup[this.formState[key]]
+            }));
+        }
+
+        return [];
+    }
+
+    private subscriptions: Subscription[] = [];
+
+    currentComponent: any;
+
+    ngOnDestroy() {
+        this.subscriptions.forEach(t => t.unsubscribe());
+    }
+
+    activateRoute(component: any) {
+        this.currentComponent = component;
+    }
+
+    deactivateRoute(component: any) {
+        console.log(component);
+    }
+
+    parse(obj) {
+        if (isPrimitive(obj)) {
+            return obj;
+        } else {
+            return Object.keys(obj).join(', ');
+        }
+    }
+}

apps/showcase/src/app/app.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule, JsonPipe } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { PrettyJsonModule, ɵc } from 'angular2-prettyjson';
+import { DynamicFormModule } from '@skynet-ng/dynamic-form';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+
+@NgModule({
+    declarations: [AppComponent],
+    imports: [BrowserModule, CommonModule, AppRoutingModule, DynamicFormModule, PrettyJsonModule, BrowserAnimationsModule],
+    providers: [{ provide: JsonPipe, useClass: ɵc }],
+    bootstrap: [AppComponent]
+})
+export class AppModule {}