feat: add starter app (#323)

projects/ng-aquila/src/schematics/ng-add/files/app.component.html

@@ -0,0 +1,112 @@
+<h1 nxHeadline="section">Aquila Insurance App</h1>
+
+<nx-message *ngIf="formGroup.invalid" nxContext="info" class="nx-margin-top-s">
+    Please fill out your application details.
+</nx-message>
+
+<form class="form-example" [formGroup]="formGroup" class="nx-margin-top-s">
+    <div nxLayout="grid">
+        <div nxRow>
+            <div nxCol="12,12,6">
+                <nx-formfield nxLabel="Your Name">
+                    <input nxInput formControlName="name" />
+                    <nx-error nxFormfieldError>
+                        <strong>Please note:</strong> this field is required!
+                    </nx-error>
+                </nx-formfield>
+            </div>
+
+            <div nxCol="12,12,6">
+                <nx-formfield nxLabel="Number of items">
+                    <nx-dropdown formControlName="items">
+                        <nx-dropdown-item nxValue="1">1</nx-dropdown-item>
+                        <nx-dropdown-item nxValue="2">2</nx-dropdown-item>
+                        <nx-dropdown-item nxValue="3">3</nx-dropdown-item>
+                    </nx-dropdown>
+                    <nx-error nxFormfieldError>
+                        Please select an option.
+                    </nx-error>
+                </nx-formfield>
+            </div>
+        </div>
+        <div nxRow>
+            <div nxCol="12,12,6">
+                <nx-formfield nxLabel="E-Mail">
+                    <input nxInput formControlName="email" />
+
+                    <nx-icon nxFormfieldAppendix name="info-circle-o" [nxPopoverTriggerFor]="popoverEmail"
+                        nxPopoverTrigger="hover">
+                    </nx-icon>
+                    <nx-error nxFormfieldError>
+                        Please provide a valid email address.
+                    </nx-error>
+                </nx-formfield>
+            </div>
+        </div>
+        <div nxRow>
+            <div nxCol="12">
+                <nx-checkbox class="nx-margin-bottom-s" formControlName="consent">I have read and understood
+                    <a nxPlainButton (click)="openConsentDialog()">the disclaimer and conditions.</a>
+                </nx-checkbox>
+            </div>
+        </div>
+        <div nxRow>
+            <div nxCol="12,6">
+                <button nxButton type="submit" (click)="openSubmitDialog()"
+                    [disabled]="formGroup.invalid">Submit</button>
+            </div>
+        </div>
+    </div>
+</form>
+
+<footer nx-footer>
+    <nx-footer-copyright>
+        &copy; Aposin
+    </nx-footer-copyright>
+</footer>
+
+<nx-popover #popoverEmail>
+    <div style="max-width: 200px;">
+        Please enter your email address.
+    </div>
+</nx-popover>
+
+<ng-template #consentTemplate>
+    <div nxModalContent>
+        <h3 nxHeadline="subsection-medium" class="nx-margin-bottom-3m">
+            Modal with Disclaimer
+        </h3>
+
+        <p nxCopytext class="nx-margin-bottom-s nx-font-weight-bold">
+            Conditions and Disclaimer
+        </p>
+        <p nxCopytext class="nx-margin-bottom-m">
+            Some copy text that describes what this overlay is all about. Tdiam nonumy
+            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+            voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem
+            ipsum dolor sit amet, consetetur sadipscing et justo duo dolores et ea
+            rebum. Lorem ipsum dolor sit amet, consetetur sadipscing Some copy text
+            that describes what this overlay is all about. Tdiam nonumy eirmod tempor
+            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+            vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor
+            sit amet, consetetur sadipscing et justo duo dolores et ea rebum.
+        </p>
+    </div>
+</ng-template>
+
+<ng-template #submitTemplate>
+    <div nxModalContent>
+        <h3 nxHeadline="subsection-medium" class="nx-margin-bottom-m">
+            Your data has been submitted to the backend
+        </h3>
+
+        <p nxCopytext class="nx-margin-bottom-m">
+            Congratulations, this ends the Starter App user journey. We hope you will use the Starter App as a
+            foundation to
+            build
+            something awesome!
+        </p>
+    </div>
+</ng-template>
+
+<!-- Copyright APOSIN 2021 -->

projects/ng-aquila/src/schematics/ng-add/files/app.component.spec.ts

@@ -0,0 +1,73 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+import { NxModalModule } from '@aposin/ng-aquila/modal';
+import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NxButtonModule } from '@aposin/ng-aquila/button';
+import { NxCheckboxModule } from '@aposin/ng-aquila/checkbox';
+import { NxDocumentationIconModule } from '@aposin/ng-aquila/documentation-icons';
+import { NxDropdownModule } from '@aposin/ng-aquila/dropdown';
+import { NxFooterModule } from '@aposin/ng-aquila/footer';
+import { NxFormfieldModule } from '@aposin/ng-aquila/formfield';
+import { NxGridModule } from '@aposin/ng-aquila/grid';
+import { NxHeadlineModule } from '@aposin/ng-aquila/headline';
+import { NxIconModule } from '@aposin/ng-aquila/icon';
+import { NxInputModule } from '@aposin/ng-aquila/input';
+import { NxLinkModule } from '@aposin/ng-aquila/link';
+import { NxMessageModule } from '@aposin/ng-aquila/message';
+import { NxOverlayModule } from '@aposin/ng-aquila/overlay';
+import { NxPopoverModule } from '@aposin/ng-aquila/popover';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+      imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        FormsModule,
+        HttpClientJsonpModule,
+        HttpClientModule,
+        ReactiveFormsModule,
+        NxButtonModule,
+        NxCheckboxModule,
+        NxDocumentationIconModule,
+        NxDropdownModule,
+        NxFooterModule,
+        NxFormfieldModule,
+        NxGridModule,
+        NxHeadlineModule,
+        NxIconModule,
+        NxInputModule,
+        NxLinkModule,
+        NxMessageModule,
+        NxModalModule,
+        NxOverlayModule,
+        NxPopoverModule
+      ]
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should create the form`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.formGroup).toBeTruthy();
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('h1.nx-heading--section').textContent).toContain('Aquila Insurance App');
+  });
+});

projects/ng-aquila/src/schematics/ng-add/files/app.component.ts

@@ -0,0 +1,44 @@
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { Component, ViewChild, TemplateRef } from '@angular/core';
+import { NxDialogService, NxModalRef } from '@aposin/ng-aquila/modal';
+
+@Component({
+  // tslint:disable-next-line
+  selector: 'app-root',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  @ViewChild('consentTemplate') consentTemplateRef: TemplateRef<any>;
+  @ViewChild('submitTemplate') submitTemplateRef: TemplateRef<any>;
+  dialogRef: NxModalRef<any, any>;
+  formGroup: FormGroup;
+
+  constructor(public dialogService: NxDialogService) {
+    this.formGroup = new FormBuilder().group({
+      name: ['', Validators.required],
+      items: ['', Validators.required],
+      email: ['', [Validators.email, Validators.required]],
+      consent: [false, Validators.requiredTrue]
+    });
+  }
+
+  openConsentDialog(): void {
+    this.dialogRef = this.dialogService.open(this.consentTemplateRef, {
+      ariaLabel: 'A modal with content',
+      showCloseIcon: true
+    });
+  }
+
+  openSubmitDialog(): void {
+    this.dialogRef = this.dialogService.open(this.submitTemplateRef, {
+      ariaLabel: 'The final modal of the Starter App',
+      showCloseIcon: false
+    });
+  }
+
+  closeDialog() {
+    this.dialogRef.close();
+  }
+}
+
+/**  Copyright APOSIN 2021 */

projects/ng-aquila/src/schematics/ng-add/files/app.module.ts

@@ -0,0 +1,58 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';
+
+import { NxButtonModule } from '@aposin/ng-aquila/button';
+import { NxCheckboxModule } from '@aposin/ng-aquila/checkbox';
+import { NxDocumentationIconModule } from '@aposin/ng-aquila/documentation-icons';
+import { NxDropdownModule } from '@aposin/ng-aquila/dropdown';
+import { NxFooterModule } from '@aposin/ng-aquila/footer';
+import { NxFormfieldModule } from '@aposin/ng-aquila/formfield';
+import { NxGridModule } from '@aposin/ng-aquila/grid';
+import { NxHeadlineModule } from '@aposin/ng-aquila/headline';
+import { NxIconModule } from '@aposin/ng-aquila/icon';
+import { NxInputModule } from '@aposin/ng-aquila/input';
+import { NxLinkModule } from '@aposin/ng-aquila/link';
+import { NxMessageModule } from '@aposin/ng-aquila/message';
+import { NxModalModule } from '@aposin/ng-aquila/modal';
+import { NxOverlayModule } from '@aposin/ng-aquila/overlay';
+import { NxPopoverModule } from '@aposin/ng-aquila/popover';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    FormsModule,
+    HttpClientJsonpModule,
+    HttpClientModule,
+    ReactiveFormsModule,
+    RouterModule.forRoot([]),
+    NxButtonModule,
+    NxCheckboxModule,
+    NxDocumentationIconModule,
+    NxDropdownModule,
+    NxFooterModule,
+    NxFormfieldModule,
+    NxGridModule,
+    NxHeadlineModule,
+    NxIconModule,
+    NxInputModule,
+    NxLinkModule,
+    NxMessageModule,
+    NxModalModule,
+    NxOverlayModule,
+    NxPopoverModule
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+
+/**  Copyright APOSIN 2021 */

projects/ng-aquila/src/schematics/ng-add/index.spec.ts

@@ -38,6 +38,13 @@ describe('ng-aquila ng add', () => {
     it('should add css var ponyfill', async () => {
       expect(testSetup.appTree.readContent('projects/aquila-testing/src/polyfills.ts')).toContain('cssVars(');
     });
+
+    it('should not write Starter App files by default', () => {
+      expect(testSetup.appTree.readContent('projects/aquila-testing/src/app/app.component.ts'))
+        .not.toContain('openConsentDialog()');
+      expect(testSetup.appTree.readContent('projects/aquila-testing/src/app/app.component.html'))
+        .not.toContain('Aquila Insurance App');
+    });
   });
 
   describe('expert', () => {
@@ -66,4 +73,18 @@ describe('ng-aquila ng add', () => {
       expect(testProjectConfig.targets.get('build')?.options?.styles).not.toContain('node_modules/@aposin/ng-aquila/themes/aposin.css');
     });
   });
+
+  describe('starter app', () => {
+    beforeEach(async () => {
+      await testSetup.runMigration({ starter: true });
+      testProjectConfig = await getTestProjectConfig();
+    });
+
+    it('should update Starter App files', () => {
+      expect(testSetup.appTree.readContent('projects/aquila-testing/src/app/app.component.ts'))
+        .toContain('openConsentDialog()');
+      expect(testSetup.appTree.readContent('projects/aquila-testing/src/app/app.component.html'))
+        .toContain('Aquila Insurance App');
+    });
+  });
 });

projects/ng-aquila/src/schematics/ng-add/schema.json

@@ -34,6 +34,12 @@
       "description": "Option that no theme is added",
       "type": "boolean",
       "default": false
+    },
+    "starter": {
+      "description": "Option that creates the Starter App",
+      "type": "boolean",
+      "default": false,
+      "x-prompt": "Do you want to update your project with the Aquila Starter App? (WARNING: this will replace existing project files!)"
     }
   },
   "required": []

projects/ng-aquila/src/schematics/ng-add/schema.ts

@@ -15,4 +15,7 @@ export interface Schema {
 
   /** Whether no theme should be added. */
   noTheme: boolean;
+
+  /** Whether the Starter App should be added. */
+  starter: boolean;
 }