Setup prettier to run on pre-commit (aws-amplify#93)

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierignore

@@ -0,0 +1,2 @@
+.next
+.husky

angular-docs/e2e/protractor.conf.js

@@ -2,36 +2,36 @@
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
-const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
+const { SpecReporter, StacktraceOption } = require("jasmine-spec-reporter");
 
 /**
  * @type { import("protractor").Config }
  */
 exports.config = {
   allScriptsTimeout: 11000,
-  specs: [
-    './src/**/*.e2e-spec.ts'
-  ],
+  specs: ["./src/**/*.e2e-spec.ts"],
   capabilities: {
-    browserName: 'chrome'
+    browserName: "chrome",
   },
   directConnect: true,
   SELENIUM_PROMISE_MANAGER: false,
-  baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
+  baseUrl: "http://localhost:4200/",
+  framework: "jasmine",
   jasmineNodeOpts: {
     showColors: true,
     defaultTimeoutInterval: 30000,
-    print: function() {}
+    print: function () {},
   },
   onPrepare() {
-    require('ts-node').register({
-      project: require('path').join(__dirname, './tsconfig.json')
+    require("ts-node").register({
+      project: require("path").join(__dirname, "./tsconfig.json"),
     });
-    jasmine.getEnv().addReporter(new SpecReporter({
-      spec: {
-        displayStacktrace: StacktraceOption.PRETTY
-      }
-    }));
-  }
-};
+    jasmine.getEnv().addReporter(
+      new SpecReporter({
+        spec: {
+          displayStacktrace: StacktraceOption.PRETTY,
+        },
+      })
+    );
+  },
+};

angular-docs/e2e/src/app.e2e-spec.ts

@@ -16,8 +16,10 @@ describe('workspace-project App', () => {
   afterEach(async () => {
     // Assert that there are no errors emitted from the browser
     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-    expect(logs).not.toContain(jasmine.objectContaining({
-      level: logging.Level.SEVERE,
-    } as logging.Entry));
+    expect(logs).not.toContain(
+      jasmine.objectContaining({
+        level: logging.Level.SEVERE,
+      } as logging.Entry)
+    );
   });
 });

angular-docs/karma.conf.js

@@ -3,14 +3,14 @@
 
 module.exports = function (config) {
   config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    basePath: "",
+    frameworks: ["jasmine", "@angular-devkit/build-angular"],
     plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require("karma-jasmine"),
+      require("karma-chrome-launcher"),
+      require("karma-jasmine-html-reporter"),
+      require("karma-coverage"),
+      require("@angular-devkit/build-angular/plugins/karma"),
     ],
     client: {
       jasmine: {
@@ -19,26 +19,23 @@ module.exports = function (config) {
         // for example, you can disable the random execution with `random: false`
         // or set a specific seed with `seed: 4321`
       },
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
     jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
+      suppressAll: true, // removes the duplicated traces
     },
     coverageReporter: {
-      dir: require('path').join(__dirname, './coverage/angular-docs'),
-      subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
+      dir: require("path").join(__dirname, "./coverage/angular-docs"),
+      subdir: ".",
+      reporters: [{ type: "html" }, { type: "text-summary" }],
     },
-    reporters: ['progress', 'kjhtml'],
+    reporters: ["progress", "kjhtml"],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ["Chrome"],
     singleRun: false,
-    restartOnFileChange: true
+    restartOnFileChange: true,
   });
 };

angular-docs/src/app/app.component.css

@@ -15,4 +15,4 @@ mat-sidenav-container {
 mat-sidenav {
   position: fixed !important;
   top: 64px !important;
-}
+}

angular-docs/src/app/app.module.ts

@@ -30,7 +30,7 @@ import { CustomFormAuthenticatorComponent } from './pages/custom-form-authentica
     CustomComponentAuthenticatorComponent,
     CompositionAuthenticatorComponent,
     OnSubmitAuthenticatorComponent,
-    CustomFormAuthenticatorComponent
+    CustomFormAuthenticatorComponent,
   ],
   imports: [
     UiAngularModule,
@@ -43,9 +43,9 @@ import { CustomFormAuthenticatorComponent } from './pages/custom-form-authentica
     MatButtonModule,
     MatIconModule,
     MatSidenavModule,
-    MatListModule
+    MatListModule,
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
 export class AppModule {}

angular-docs/src/app/common/routes.ts

@@ -11,22 +11,22 @@ export const docRoutes: DocRoutes = [
   {
     path: 'basic-authenticator',
     name: 'Basic Authenticator',
-    component: BasicAuthenticatorComponent
+    component: BasicAuthenticatorComponent,
   },
   {
     path: 'styled-authenticator',
     name: 'Styling Components',
-    component: StyledAuthenticatorComponent
+    component: StyledAuthenticatorComponent,
   },
   {
     path: 'headless-authenticator',
     name: 'Headless Authenticator',
-    component: HeadlessAuthenticatorComponent
+    component: HeadlessAuthenticatorComponent,
   },
   {
     path: 'custom-authenticator',
     name: 'Inserting Custom Components',
-    component: CustomComponentAuthenticatorComponent
+    component: CustomComponentAuthenticatorComponent,
   },
   // {
   //   path: 'on-submit-hook',
@@ -36,8 +36,8 @@ export const docRoutes: DocRoutes = [
   {
     path: 'custom-form',
     name: 'Custom Form Validation',
-    component: CustomFormAuthenticatorComponent
-  }
+    component: CustomFormAuthenticatorComponent,
+  },
   // {
   //   path: 'composition',
   //   name: 'Composing components',

angular-docs/src/app/pages/basic-authenticator/basic-authenticator.component.ts

@@ -3,6 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-basic-authenticator',
   templateUrl: './basic-authenticator.component.html',
-  styleUrls: []
+  styleUrls: [],
 })
 export class BasicAuthenticatorComponent {}

angular-docs/src/app/pages/custom-form-authenticator/custom-form-authenticator.component.ts

@@ -4,12 +4,12 @@ import { StateMachineService } from '@aws-amplify/ui-angular';
 @Component({
   selector: 'app-custom-form-authenticator',
   templateUrl: './custom-form-authenticator.component.html',
-  styleUrls: ['./custom-form-authenticator.component.css']
+  styleUrls: ['./custom-form-authenticator.component.css'],
 })
 export class CustomFormAuthenticatorComponent {
   constructor(private authService: StateMachineService) {}
   public error = {
-    passwordMismatch: true
+    passwordMismatch: true,
   };
 
   public onInput($event) {

angular-docs/src/app/pages/headless-authenticator/headless-authenticator.component.ts

@@ -2,6 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-headless-authenticator',
-  templateUrl: './headless-authenticator.component.html'
+  templateUrl: './headless-authenticator.component.html',
 })
 export class HeadlessAuthenticatorComponent {}

angular-docs/src/app/pages/on-submit-authenticator/on-submit-authenticator.component.ts

@@ -2,12 +2,12 @@ import { Component, OnInit } from '@angular/core';
 import {
   FormError,
   AuthFormData,
-  OnSubmitHookResponse
+  OnSubmitHookResponse,
 } from '@aws-amplify/ui-angular';
 
 @Component({
   selector: 'app-custom-form-authenticator',
-  templateUrl: './on-submit-authenticator.component.html'
+  templateUrl: './on-submit-authenticator.component.html',
 })
 export class OnSubmitAuthenticatorComponent {
   public trimUsername(formData: AuthFormData): void {

angular-docs/src/environments/environment.prod.ts

@@ -1,3 +1,3 @@
 export const environment = {
-  production: true
+  production: true,
 };

angular-docs/src/environments/environment.ts

@@ -3,7 +3,7 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
 };
 
 /*

angular-docs/src/main.ts

@@ -16,4 +16,4 @@ if (environment.production) {
 
 platformBrowserDynamic()
   .bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+  .catch((err) => console.error(err));

angular-docs/src/markdowns/authenticator/basic-authenticator.md

@@ -9,7 +9,7 @@ Amplify provides simple, clean styles to get started with a great experience in
 1. Inside your `style.css`, import the shared css module:
 
 ```css
-@import '~@aws-amplify/ui-angular/theme.css';
+@import "~@aws-amplify/ui-angular/theme.css";
 ```
 
 2. Wrap your app with `amplify-context-provider`:

angular-docs/src/markdowns/authenticator/custom-form.md

@@ -47,7 +47,7 @@ import { AmplifyAuthService } from "@aws-amplify/ui-angular";
 @Component({
   selector: "app-custom-form-authenticator",
   templateUrl: "./custom-form-authenticator.component.html",
-  styleUrls: ["./custom-form-authenticator.component.css"]
+  styleUrls: ["./custom-form-authenticator.component.css"],
 })
 export class CustomFormAuthenticatorComponent {
   // authService provides helper services like submit event emitters.

angular-docs/src/markdowns/authenticator/headless-authenticator.md

@@ -5,5 +5,3 @@ If you do not have the top level `amplify-context-provider`, you will get a _hea
 ```html
 <amplify-authenticator></amplify-authenticator>
 ```
-
-

angular-docs/src/markdowns/authenticator/on-submit.md

@@ -7,9 +7,7 @@
 `onSubmit` hooks have the following shape:
 
 ```typescript
-type OnSubmitHook = (
-  formData: AuthFormData
-) => {
+type OnSubmitHook = (formData: AuthFormData) => {
   data?: AuthFormData;
   error?: FormError;
 };
@@ -22,7 +20,7 @@ type OnSubmitHook = (
 ```ts
 const formData = {
   username: "amplify",
-  password: "myPassword"
+  password: "myPassword",
 };
 ```
 
@@ -35,15 +33,15 @@ Your `onSubmit` hook can output either `error` or `data` object based on your ne
 - If you have any validation errors you want to report, you should return an object with `error` field. This is a map of each input name to its error messages. For example, let's create a validation hook that checks whether username has at least one digit.
 
 ```typescript
-import { OnSubmitHook, AuthFormData } from '@aws-amplify/ui-angular'
+import { OnSubmitHook, AuthFormData } from "@aws-amplify/ui-angular";
 
 const onSignUp: OnSubmitHook = (formData: AuthFormData) => {
   const { username } = formData;
-  const error: FormError = {}
+  const error: FormError = {};
 
   const containsDigit = /\d/.test(username);
   if (!containsDigit) {
-    error.username = ['This field should contain at least one digit.'];
+    error.username = ["This field should contain at least one digit."];
   }
 
   return { error };

angular-docs/src/test.ts

@@ -4,11 +4,15 @@ import 'zone.js/dist/zone-testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
+  platformBrowserDynamicTesting,
 } from '@angular/platform-browser-dynamic/testing';
 
 declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
+  context(
+    path: string,
+    deep?: boolean,
+    filter?: RegExp
+  ): {
     keys(): string[];
     <T>(id: string): T;
   };

docs/next.config.js

@@ -1,9 +1,7 @@
 const { execSync } = require("child_process");
 const path = require("path");
 
-const gitHead = execSync("git rev-parse --abbrev-ref HEAD")
-  .toString()
-  .trim();
+const gitHead = execSync("git rev-parse --abbrev-ref HEAD").toString().trim();
 
 const BRANCH = gitHead === "HEAD" ? "main" : gitHead;
 

docs/postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

docs/src/components/DividerPropControls.tsx

@@ -28,7 +28,7 @@ export const DividerPropControls: DividerPropControlsInterface = ({
             name="size"
             id="size"
             value={size}
-            onChange={event =>
+            onChange={(event) =>
               setSize(event.target.value as DividerOptions["size"])
             }
           >
@@ -43,7 +43,7 @@ export const DividerPropControls: DividerPropControlsInterface = ({
             name="orientation"
             id="orientation"
             value={orientation}
-            onChange={event =>
+            onChange={(event) =>
               setOrientation(
                 event.target.value as DividerOptions["orientation"]
               )