vlschematics

NOTE DO NOT DELETE THE SCHEMATICS BRANCH OF THIS PROJECT

A Visual Lease Frontend Reference Implementation

A generic frontend app for VisualLease.

Project Overview and Status

This project serves as the standard template for a Visual Lease frontend application. It includes all required tooling and 3rd-party packages, as well as the VLComponents component library.

The Schematics Branch

The Schematics branch of this project is used by the VLSchematics library as the base template for new Visual Lease frontend projects. Updates this standard template, like new 3rd-party packages or base styles, should be merged into the schematics branch, and the schematics project should be updated.

Updating the VLSchematics template

To add new functionality to the Visual Lease frontend applications, like new/updated libraries or changes to base styles, follow these instructions to update the template used by the VLSchematics project.

1. Clone this project

$ git clone [e-mail]:v3/visuallease/Lightmatter/VL-MS-UI-ReferenceImplementation vlfrontend
$ cd vlfrontend

1. Make your changes, commit them to master, and push

$ git commit -m "Update a library"
$ git push

1. Switch to the the schematics branch and pull to make sure you have the most recent changes *You must make sure your branch is up-to-date, as we will be force-pushing later

$ git checkout schematics && git pull

1. Rebase off the master branch to update the schematics branch with your new template changes

$ git rebase master

1. Force push the schematics branch to push the changes (necesarry because we rebased off master)

$ git push origin schematics --force

1. Head over to the VLSchematics project and follow the instructions to incorporate your changes.

Major Framework and Language Components

• Angular in Typescript
• Akita for state management
• Material IO for UI toolkit
• Sass + Fella styling
• Karma for testing

Style and Codeformat Tooling

• Yarn - package manager
• eslint (NOT tslint) for linting - More below
  • ConfigAirBnB
  • Config Prettier
  • Config Plugin Import
  • Codelyzer
• Prettier for automatic code formatting
• Husky + Lint-Staged for precommit hooks
• Protractor for e2e testing

eslint vs tlsint

tslint has been oficailly deprecated by its maintainers in favor of folding its functionality into eslint (https://github.com/palantir/tslint). We started this project with a standard angular/tslint setup, and then used the following resources to migrate to eslint:

• https://github.com/angular-eslint/angular-eslint
• https://github.com/typescript-eslint/typescript-eslint
• https://github.com/typescript-eslint/tslint-to-eslint-config

Step-by-step docs of the migration can be found on this pr: https://github.com/Lightmatter/vlfrontend/pull/1

tslint rules that have NOT been ported over to eslint

The tslint-to-eslint-config tool provides a list of tslint rules that were carried over to eslint during the migration:

• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "component-class-suffix"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "component-selector"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "contextual-lifecycle"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "directive-class-suffix"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "directive-selector"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "import-spacing"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "jsdoc-format"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "no-conflicting-lifecycle"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "no-host-metadata-property"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "no-input-rename"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "no-inputs-metadata-property"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "no-output-native"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "no-output-on-prefix"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "no-output-rename"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "no-outputs-metadata-property"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "no-reference-import"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "template-accessibility-alt-text"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "template-accessibility-elements-content"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "template-accessibility-label-for"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "template-accessibility-tabindex-no-positive"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "template-accessibility-table-scope"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "template-accessibility-valid-aria"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "template-banana-in-box"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "template-click-events-have-key-events"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "template-mouse-events-have-key-events"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "template-no-autofocus"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "template-no-distracting-elements"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "template-no-negated-async"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "use-lifecycle-interface"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "use-pipe-transform-interface"
• tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "whitespace"

Generic Angular Documentation

This project was generated with Angular CLI version 9.1.0.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.