chore: add prettier to workspace (#26)

Add prettier to workspace and enable the precommit hook and linter

closes #3

Author: smithad15

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 dist
 lerna-debug.log
-yarn-debug.log
+yarn-debug.log
+yarn-error.log

.prettierignore

@@ -0,0 +1,2 @@
+dist
+coverage

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

.yarnrc

@@ -1 +1 @@
---install.exact true
+--add.exact true

CONTRIBUTING.md

@@ -6,4 +6,4 @@ This repo utilizes [Yarn Workspaces](https://yarnpkg.com/lang/en/docs/workspaces
 
 ## Commit Message Guidelines
 
-We follow the [Conventional Commits](https://conventionalcommits.org/) guidelines. These are enforced through the use of [commitlint](http://marionebl.github.io/commitlint). If you would like a more interactive way of formatting your commit messages, run `yarn commit` once your changes are staged.
+We follow the [Conventional Commits](https://conventionalcommits.org/) guidelines. These are enforced through the use of [commitlint](http://marionebl.github.io/commitlint). If you would like a more interactive way of formatting your commit messages, run `yarn commit` once your changes are staged.

README.md

@@ -1,4 +1,5 @@
 # @angular-redux
+
 [![CircleCI](https://circleci.com/gh/angular-redux/platform/tree/master.svg?style=svg)](https://circleci.com/gh/angular-redux/platform/tree/master)
 
 [Redux](https://redux.js.org/) bindings for [Angular](https://angular.io/) applications.

package.json

@@ -7,13 +7,23 @@
     "build": "lerna run build",
     "lint": "lerna run lint",
     "commit": "commit",
-    "commitmsg": "commitlint -E GIT_PARAMS"
+    "prettier": "prettier --write \"**/*.*(ts|js|css|scss|json|md)\"",
+    "pre-commit": "lint-staged",
+    "commit-msg": "commitlint -E GIT_PARAMS"
+  },
+  "lint-staged": {
+    "*.{ts,js,css,scss,json,md}": [
+      "prettier --write",
+      "git add"
+    ]
   },
   "devDependencies": {
-    "@commitlint/cli": "^7.0.0",
-    "@commitlint/config-conventional": "^7.0.1",
-    "@commitlint/prompt-cli": "^7.0.0",
-    "husky": "^0.14.3",
-    "lerna": "2.11.0"
+    "@commitlint/cli": "7.0.0",
+    "@commitlint/config-conventional": "7.0.1",
+    "@commitlint/prompt-cli": "7.0.0",
+    "husky": "0.14.3",
+    "lerna": "2.11.0",
+    "lint-staged": "7.2.0",
+    "prettier": "1.13.7"
   }
 }

packages/example-app/.angular-cli.json

@@ -7,20 +7,15 @@
     {
       "root": "src",
       "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
+      "assets": ["assets", "favicon.ico"],
       "index": "index.html",
       "main": "main.ts",
       "polyfills": "polyfills.ts",
       "test": "test.ts",
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "zoo",
-      "styles": [
-        "styles.css"
-      ],
+      "styles": ["styles.css"],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
       "environments": {

packages/example-app/README.md

@@ -5,16 +5,17 @@
 This is a sample project showing how the following packages work together to make a simple
 application.
 
-* [redux](https://github.com/reactjs/redux) Predictable state container for Javascript.
-* [redux-observable](https://github.com/redux-observable/redux-observable) Side-effect handling with Observables
-* [@angular-redux/store](https://github.com/angular-redux/store) Redux + Angular bindings
-* [@angular-redux/router](https://github.com/angular-redux/router) Time travel with the Angular router
-* [@angular-redux/form](https://github.com/angular-redux/form) Time travel with Angular forms
-* [Redux DevTools Chrome Extension](https://github.com/zalmoxisus/redux-devtools-extension)
+- [redux](https://github.com/reactjs/redux) Predictable state container for Javascript.
+- [redux-observable](https://github.com/redux-observable/redux-observable) Side-effect handling with Observables
+- [@angular-redux/store](https://github.com/angular-redux/store) Redux + Angular bindings
+- [@angular-redux/router](https://github.com/angular-redux/router) Time travel with the Angular router
+- [@angular-redux/form](https://github.com/angular-redux/form) Time travel with Angular forms
+- [Redux DevTools Chrome Extension](https://github.com/zalmoxisus/redux-devtools-extension)
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-rc.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

packages/example-app/karma.conf.js

@@ -1,7 +1,7 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/0.13/config/configuration-file.html
 
-module.exports = function (config) {
+module.exports = function(config) {
   config.set({
     basePath: '',
     frameworks: ['jasmine', '@angular/cli'],
@@ -10,35 +10,34 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+      require('@angular/cli/plugins/karma'),
     ],
-    client:{
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    client: {
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
-    files: [
-      { pattern: './src/test.ts', watched: false }
-    ],
+    files: [{ pattern: './src/test.ts', watched: false }],
     preprocessors: {
-      './src/test.ts': ['@angular/cli']
+      './src/test.ts': ['@angular/cli'],
     },
     mime: {
-      'text/x-typescript': ['ts','tsx']
+      'text/x-typescript': ['ts', 'tsx'],
     },
     coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
-      fixWebpackSourcePaths: true
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true,
     },
     angularCli: {
-      environment: 'dev'
+      environment: 'dev',
     },
-    reporters: config.angularCli && config.angularCli.codeCoverage
-              ? ['progress', 'coverage-istanbul']
-              : ['progress', 'kjhtml'],
+    reporters:
+      config.angularCli && config.angularCli.codeCoverage
+        ? ['progress', 'coverage-istanbul']
+        : ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
     browsers: ['Chrome'],
-    singleRun: false
+    singleRun: false,
   });
 };

packages/example-app/protractor.conf.js

@@ -5,26 +5,26 @@ const { SpecReporter } = require('jasmine-spec-reporter');
 
 exports.config = {
   allScriptsTimeout: 11000,
-  specs: [
-    './e2e/**/*.e2e-spec.ts'
-  ],
+  specs: ['./e2e/**/*.e2e-spec.ts'],
   capabilities: {
-    'browserName': 'chrome'
+    browserName: 'chrome',
   },
   directConnect: true,
   baseUrl: 'http://localhost:4200/',
   framework: 'jasmine',
   jasmineNodeOpts: {
     showColors: true,
     defaultTimeoutInterval: 30000,
-    print: function() {}
+    print: function() {},
   },
   beforeLaunch: function() {
     require('ts-node').register({
-      project: 'e2e/tsconfig.e2e.json'
+      project: 'e2e/tsconfig.e2e.json',
     });
   },
   onPrepare() {
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-  }
+    jasmine
+      .getEnv()
+      .addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  },
 };

packages/example-app/src/app/animals/animal-list/component.css

@@ -1,2 +1,7 @@
-.header { display: flex; }
-.header-cell { flex-basis: 25%; font-weight: bold; }
+.header {
+  display: flex;
+}
+.header-cell {
+  flex-basis: 25%;
+  font-weight: bold;
+}

packages/example-app/src/app/animals/animal-list/component.spec.ts

@@ -8,8 +8,8 @@ import { AnimalType } from '../model';
 
 @Component({ selector: 'zoo-animal', template: '' })
 class MockAnimalComponent {
-  @Input() key: string
-  @Input() animalType: AnimalType
+  @Input() key: string;
+  @Input() animalType: AnimalType;
 }
 
 describe('AnimalListComponent', () => {
@@ -29,6 +29,8 @@ describe('AnimalListComponent', () => {
     fixture.detectChanges();
 
     const titleElement = fixture.debugElement.query(By.css('h2'));
-    expect(titleElement.nativeElement.textContent).toContain('We have Wallabies');
+    expect(titleElement.nativeElement.textContent).toContain(
+      'We have Wallabies',
+    );
   }));
 });

packages/example-app/src/app/animals/animal/component.css

@@ -1,2 +1,6 @@
-:host { display: flex; }
-div { flex-basis: 25%; }
+:host {
+  display: flex;
+}
+div {
+  flex-basis: 25%;
+}

packages/example-app/src/app/animals/animal/component.spec.ts

@@ -1,5 +1,8 @@
 import { async, TestBed } from '@angular/core/testing';
-import { NgReduxTestingModule, MockNgRedux } from '@angular-redux/store/testing';
+import {
+  NgReduxTestingModule,
+  MockNgRedux,
+} from '@angular-redux/store/testing';
 import { AnimalComponent } from './component';
 import { CoreModule } from '../../core/module';
 import 'rxjs/add/operator/toArray';
@@ -10,8 +13,10 @@ describe('AnimalComponent', () => {
   let spyConfigureSubStore;
 
   beforeEach(async(() => {
-    spyConfigureSubStore = spyOn(MockNgRedux.mockInstance, 'configureSubStore')
-      .and.callThrough();
+    spyConfigureSubStore = spyOn(
+      MockNgRedux.mockInstance,
+      'configureSubStore',
+    ).and.callThrough();
 
     MockNgRedux.reset();
     TestBed.configureTestingModule({
@@ -31,62 +36,57 @@ describe('AnimalComponent', () => {
   it('should use the key to create a subStore', () =>
     expect(spyConfigureSubStore).toHaveBeenCalledWith(
       ['WALLABIES', 'items', 'id1'],
-      jasmine.any(Function)));
+      jasmine.any(Function),
+    ));
 
   it('select name data from the substore', async(() => {
-    const mockSubStore = MockNgRedux.getSubStore(
-      ['WALLABIES', 'items', 'id1']);
+    const mockSubStore = MockNgRedux.getSubStore(['WALLABIES', 'items', 'id1']);
 
     const selectorStub = mockSubStore.getSelectorStub('name');
     selectorStub.next('Wilbert');
     selectorStub.complete();
 
-    animalComponent.name$
-      .subscribe(
-        name => expect(name).toEqual('Wilbert'));
+    animalComponent.name$.subscribe(name => expect(name).toEqual('Wilbert'));
   }));
 
   it('select ticket price data from the substore', async(() => {
-    const mockSubStore = MockNgRedux.getSubStore(
-      ['WALLABIES', 'items', 'id1']);
+    const mockSubStore = MockNgRedux.getSubStore(['WALLABIES', 'items', 'id1']);
 
     const selectorStub = mockSubStore.getSelectorStub('ticketPrice');
     selectorStub.next(2);
     selectorStub.complete();
 
-    animalComponent.ticketPrice$
-      .subscribe(
-        ticketPrice => expect(ticketPrice).toEqual(2));
+    animalComponent.ticketPrice$.subscribe(ticketPrice =>
+      expect(ticketPrice).toEqual(2),
+    );
   }));
 
   it('select ticket quantity data from the substore', async(() => {
-    const mockSubStore = MockNgRedux.getSubStore(
-      ['WALLABIES', 'items', 'id1']);
+    const mockSubStore = MockNgRedux.getSubStore(['WALLABIES', 'items', 'id1']);
 
     const selectorStub = mockSubStore.getSelectorStub('tickets');
     selectorStub.next(4);
     selectorStub.complete();
 
-    animalComponent.numTickets$
-      .subscribe(
-        numTickets => expect(numTickets).toEqual(4));
+    animalComponent.numTickets$.subscribe(numTickets =>
+      expect(numTickets).toEqual(4),
+    );
   }));
 
   it('should use reasonable defaults if ticket price is missing', async(() => {
-    animalComponent.ticketPrice$
-      .subscribe(
-        ticketPrice => expect(ticketPrice).toEqual(0));
+    animalComponent.ticketPrice$.subscribe(ticketPrice =>
+      expect(ticketPrice).toEqual(0),
+    );
   }));
 
   it('should use reasonable defaults if ticket quantity is missing', async(() => {
-    animalComponent.numTickets$
-      .subscribe(
-        numTickets => expect(numTickets).toEqual(0));
+    animalComponent.numTickets$.subscribe(numTickets =>
+      expect(numTickets).toEqual(0),
+    );
   }));
 
   it('should compute the subtotal as the ticket quantity changes', async(() => {
-    const mockSubStore = MockNgRedux.getSubStore(
-      ['WALLABIES', 'items', 'id1']);
+    const mockSubStore = MockNgRedux.getSubStore(['WALLABIES', 'items', 'id1']);
 
     const priceStub = mockSubStore.getSelectorStub('ticketPrice');
     priceStub.next(1);
@@ -100,7 +100,6 @@ describe('AnimalComponent', () => {
 
     animalComponent.subTotal$
       .toArray()
-      .subscribe(
-        subTotals => expect(subTotals).toEqual([5, 10, 15]));
+      .subscribe(subTotals => expect(subTotals).toEqual([5, 10, 15]));
   }));
 });

packages/example-app/src/app/animals/animal/component.ts

@@ -28,14 +28,13 @@ export class AnimalComponent {
   @Input() key: string;
   @Input() animalType: string;
 
-  @select()                  readonly name$: Observable<string>;
-  @select('tickets')         readonly numTickets$: Observable<number>;
-  @select('ticketPrice')     readonly ticketPrice$: Observable<number>;
-  @select$(null, toSubTotal) readonly subTotal$: Observable<number>;
+  @select() readonly name$: Observable<string>;
+  @select('tickets') readonly numTickets$: Observable<number>;
+  @select('ticketPrice') readonly ticketPrice$: Observable<number>;
+  @select$(null, toSubTotal)
+  readonly subTotal$: Observable<number>;
 
-  getBasePath = () => this.key ?
-    [ this.animalType, 'items', this.key ] :
-    null;
+  getBasePath = () => (this.key ? [this.animalType, 'items', this.key] : null);
 
   @dispatch() addTicket = () => ({ type: 'ADD_TICKET' });
   @dispatch() removeTicket = () => ({ type: 'REMOVE_TICKET' });