Add example app (#62)

Co-authored-by: ihor-panasiuk95 <ihor.panasiuk95@gmail.com>

Author: skynetigor

apps/example/.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/example/.eslintrc.json

@@ -0,0 +1,20 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

apps/example/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.conf');
+
+module.exports = function (config) {
+  const baseConfig = getBaseKarmaConfig();
+  config.set({
+    ...baseConfig,
+    coverageIstanbulReporter: {
+      ...baseConfig.coverageIstanbulReporter,
+      dir: join(__dirname, '../../coverage/apps/example'),
+    },
+  });
+};

apps/example/src/app/app.component.ts

@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+import { DynamicFormGroup } from '@skynet-ng/dynamic-form';
+import { TextfieldControl } from './models';
+
+@Component({
+  selector: 'example-app-root',
+  template: `
+    <div class="flex justify-center items-center absolute w-full h-full bg-gray-200">
+      <div class="bg-white flex flex-col w-96 border-gray-300 border border-solid p-5 rounded-md gap-4">
+        <dynamic-form-outlet class="flex flex-col gap-4" [dynamicFormGroup]="dynamicFormGroup"></dynamic-form-outlet>
+        <button class="self-end h-10 inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700">
+          Submit
+        </button>
+      </div>
+    </div>
+  `
+})
+export class AppComponent {
+  dynamicFormGroup = new DynamicFormGroup({
+    name: new TextfieldControl({
+      initialInputs: {
+        label: 'Name',
+        placeholder: 'Enter your name'
+      }
+    }),
+    surname: new TextfieldControl({
+      initialInputs: {
+        label: 'Surname',
+        placeholder: 'Enter your surname'
+      }
+    }),
+    age: new TextfieldControl({
+      initialInputs: {
+        label: 'Age',
+        placeholder: 'Enter your age',
+        type: 'number'
+      }
+    })
+  });
+}

apps/example/src/app/app.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { DynamicFormModule } from '@skynet-ng/dynamic-form';
+import { AppComponent } from './app.component';
+import { TextfieldComponent } from './components';
+
+@NgModule({
+  declarations: [AppComponent, TextfieldComponent],
+  imports: [
+    BrowserModule,
+    DynamicFormModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

apps/example/src/app/components/index.ts

@@ -0,0 +1 @@
+export { TextfieldComponent } from './textfield/textfield.component';

apps/example/src/app/components/textfield/textfield.component.ts

@@ -0,0 +1,71 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { Component, forwardRef, Input } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'textfield-control',
+  template: `
+    <div class="flex flex-col gap-1">
+      <label class="block text-sm font-medium text-gray-700">{{ label }}</label>
+      <input
+        class="block w-full border border-gray-300 rounded-md sm:text-sm shadow-sm outline-indigo-500 p-3"
+        [disabled]="isDisabled"
+        [type]="type"
+        [(ngModel)]="value"
+        [placeholder]="placeholder"
+        [disabled]="isDisabled"
+      />
+    </div>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TextfieldComponent),
+      multi: true,
+    },
+  ],
+})
+export class TextfieldComponent implements ControlValueAccessor {
+  private _value: string;
+
+  get value(): any {
+    return this._value;
+  }
+  set value(value: any) {
+    if (value !== this._value) {
+      this._value = value;
+      this.onChange(value);
+    }
+  }
+
+  isDisabled: boolean;
+
+  @Input()
+  label: string;
+
+  @Input()
+  placeholder = '';
+
+  @Input()
+  type: 'text' | 'number' = 'text';
+
+  onChange = (_) => {};
+
+  onTouch = () => {};
+
+  writeValue(value: any): void {
+    this._value = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  setDisabledState(isDisabled: boolean) {
+    this.isDisabled = isDisabled;
+  }
+}

apps/example/src/app/models/index.ts

@@ -0,0 +1 @@
+export { TextfieldControl } from './textfield.control';

apps/example/src/app/models/textfield.control.ts

@@ -0,0 +1,8 @@
+import { AbstractDynamicControl, ControlConfiguration } from '@skynet-ng/dynamic-form';
+import { TextfieldComponent } from '../components';
+
+export class TextfieldControl extends AbstractDynamicControl<TextfieldComponent> {
+    constructor(config: ControlConfiguration<any, any, string>) {
+        super(config, TextfieldComponent);
+    }
+}