From f4e07f528cc407097ad9db2f7bf1a8683a87e700 Mon Sep 17 00:00:00 2001
From: Scott Rees <6165315+reesscot@users.noreply.github.com>
Date: Thu, 15 Jul 2021 09:02:40 -0700
Subject: [PATCH] Setup prettier to run on pre-commit (#93)

---
 .husky/.gitignore                             |  1 +
 .husky/pre-commit                             |  4 +
 .prettierignore                               |  2 +
 angular-docs/e2e/protractor.conf.js           | 34 +++----
 angular-docs/e2e/src/app.e2e-spec.ts          |  8 +-
 angular-docs/karma.conf.js                    | 33 +++----
 angular-docs/src/app/app.component.css        |  2 +-
 angular-docs/src/app/app.module.ts            |  6 +-
 angular-docs/src/app/common/routes.ts         | 12 +--
 .../basic-authenticator.component.ts          |  2 +-
 .../custom-form-authenticator.component.ts    |  4 +-
 .../headless-authenticator.component.ts       |  2 +-
 .../on-submit-authenticator.component.ts      |  4 +-
 .../src/environments/environment.prod.ts      |  2 +-
 angular-docs/src/environments/environment.ts  |  2 +-
 angular-docs/src/main.ts                      |  2 +-
 .../authenticator/basic-authenticator.md      |  2 +-
 .../markdowns/authenticator/custom-form.md    |  2 +-
 .../authenticator/headless-authenticator.md   |  2 -
 .../src/markdowns/authenticator/on-submit.md  | 12 +--
 angular-docs/src/test.ts                      |  8 +-
 docs/next.config.js                           |  4 +-
 docs/postcss.config.js                        |  2 +-
 docs/src/components/DividerPropControls.tsx   |  4 +-
 docs/src/components/Feature.tsx               |  4 +-
 docs/src/components/Layout.tsx                |  6 +-
 docs/src/components/customComponents.tsx      |  2 +-
 docs/src/components/useDividerProps.tsx       |  2 +-
 docs/src/components/useImageProps.tsx         |  2 +-
 docs/src/components/useStyleProps.tsx         |  2 +-
 docs/src/data/pages.preval.ts                 |  2 +-
 docs/src/pages/ui/primitives/button/demo.tsx  |  4 +-
 docs/src/pages/ui/primitives/button/index.mdx | 92 ++++++++++++-------
 docs/src/pages/ui/primitives/flex/demo.tsx    | 43 ++++++---
 docs/src/pages/ui/primitives/text/demo.tsx    | 14 +--
 docs/src/pages/ui/primitives/view/demo.tsx    |  7 +-
 docs/src/pages/ui/primitives/view/index.mdx   | 34 ++-----
 docs/src/plugins/remark-layout.js             |  2 +-
 docs/src/utils/getContentPaths.tsx            |  2 +-
 .../sign-in/auth-with-sms-mfa.tsx             |  2 +-
 package.json                                  | 11 ++-
 packages/angular/README.md                    |  5 +-
 .../angular/projects/ui-angular/karma.conf.js | 24 ++---
 .../ui-angular/src/lib/common/helpers.ts      | 12 +--
 .../src/lib/common/types/common-types.ts      |  4 +-
 .../amplify-authenticator.component.ts        | 18 ++--
 .../amplify-confirm-sign-up.component.ts      | 20 ++--
 .../amplify-sign-in.component.ts              | 17 ++--
 .../amplify-sign-out.component.ts             |  2 +-
 .../amplify-sign-up.component.ts              | 17 ++--
 .../amplify-input/amplify-input.component.ts  |  8 +-
 .../amplify-validation-error.component.ts     |  2 +-
 .../services/authenticator-context.service.ts |  2 +-
 .../src/lib/services/state-machine.service.ts | 10 +-
 .../ui-angular/src/lib/ui-angular.module.ts   |  6 +-
 .../angular/projects/ui-angular/src/test.ts   |  8 +-
 packages/core/.eslintrc.js                    |  8 +-
 packages/core/src/validators/index.ts         |  4 +-
 packages/e2e/README.md                        | 16 ++--
 .../authenticator/sign-up/sign-up.steps.ts    |  8 +-
 packages/e2e/cypress/support/index.js         |  2 +-
 .../amplify/README.md                         |  2 +
 .../LaunchImage.imageset/README.md            |  2 +-
 .../LaunchImage.imageset/README.md            |  2 +-
 .../ConfirmSignIn/ConfirmSignIn.tsx           |  2 +-
 .../ConfirmSignUp/ConfirmSignUp.tsx           |  2 +-
 .../Authenticator/SetupTOTP/SetupTOTP.tsx     |  2 +-
 .../Authenticator/SignIn/SignIn.tsx           |  2 +-
 .../Authenticator/SignUp/SignUp.tsx           |  4 +-
 .../src/components/Authenticator/index.tsx    |  2 +-
 .../Authenticator/shared/UserNameAlias.tsx    |  2 +-
 .../react/src/primitives/Divider/Divider.tsx  |  2 +-
 .../react/src/primitives/Divider/index.ts     |  2 +-
 packages/react/src/primitives/Flex/Flex.tsx   |  5 +-
 packages/react/src/primitives/Image/Image.tsx |  2 +-
 packages/react/src/primitives/Image/index.ts  |  2 +-
 packages/react/src/primitives/Text/Text.tsx   |  2 +-
 packages/react/src/primitives/View/View.tsx   |  2 +-
 .../shared/__tests__/utils.test.tsx           |  2 +-
 packages/react/src/primitives/shared/utils.ts | 21 +++--
 .../react/src/primitives/types/divider.ts     |  5 +-
 packages/react/src/primitives/types/flex.ts   |  8 +-
 packages/react/src/primitives/types/image.ts  |  5 +-
 packages/react/src/primitives/types/index.ts  | 12 +--
 packages/react/src/primitives/types/style.ts  | 13 ++-
 packages/react/src/primitives/types/view.ts   |  7 +-
 packages/vue/.eslintrc.js                     | 18 ++--
 packages/vue/src/composables/useAuth.ts       |  8 +-
 postcss.config.js                             |  4 +-
 vue-docs/.eslintrc.js                         | 10 +-
 vue-docs/README.md                            |  5 +
 vue-docs/babel.config.js                      |  6 +-
 vue-docs/postcss.config.js                    |  4 +-
 vue-docs/src/shims-vue.d.ts                   |  9 +-
 vue-docs/src/utils/code-examples.js           |  2 +-
 vue-docs/tailwind.config.js                   |  6 +-
 yarn.lock                                     | 76 ++++++++++++++-
 97 files changed, 491 insertions(+), 349 deletions(-)
 create mode 100644 .husky/.gitignore
 create mode 100755 .husky/pre-commit
 create mode 100644 .prettierignore

diff --git a/.husky/.gitignore b/.husky/.gitignore
new file mode 100644
index 00000000000..31354ec1389
--- /dev/null
+++ b/.husky/.gitignore
@@ -0,0 +1 @@
+_
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 00000000000..36af219892f
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000000..209af13c738
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,2 @@
+.next
+.husky
diff --git a/angular-docs/e2e/protractor.conf.js b/angular-docs/e2e/protractor.conf.js
index 361e7f0cdfa..355ba2c1a20 100644
--- a/angular-docs/e2e/protractor.conf.js
+++ b/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
-      }
-    }));
-  }
-};
\ No newline at end of file
+    jasmine.getEnv().addReporter(
+      new SpecReporter({
+        spec: {
+          displayStacktrace: StacktraceOption.PRETTY,
+        },
+      })
+    );
+  },
+};
diff --git a/angular-docs/e2e/src/app.e2e-spec.ts b/angular-docs/e2e/src/app.e2e-spec.ts
index 59e171c4822..b3f8b7781dc 100644
--- a/angular-docs/e2e/src/app.e2e-spec.ts
+++ b/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)
+    );
   });
 });
diff --git a/angular-docs/karma.conf.js b/angular-docs/karma.conf.js
index 0512dcc2ef2..ae762fd9c97 100644
--- a/angular-docs/karma.conf.js
+++ b/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,
   });
 };
diff --git a/angular-docs/src/app/app.component.css b/angular-docs/src/app/app.component.css
index aa7a86a8163..315a5467ce4 100644
--- a/angular-docs/src/app/app.component.css
+++ b/angular-docs/src/app/app.component.css
@@ -15,4 +15,4 @@ mat-sidenav-container {
 mat-sidenav {
   position: fixed !important;
   top: 64px !important;
-}
\ No newline at end of file
+}
diff --git a/angular-docs/src/app/app.module.ts b/angular-docs/src/app/app.module.ts
index 7305139a8b5..02aecf5f8fd 100644
--- a/angular-docs/src/app/app.module.ts
+++ b/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 {}
diff --git a/angular-docs/src/app/common/routes.ts b/angular-docs/src/app/common/routes.ts
index e599ceb0159..547ab7ea190 100644
--- a/angular-docs/src/app/common/routes.ts
+++ b/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',
diff --git a/angular-docs/src/app/pages/basic-authenticator/basic-authenticator.component.ts b/angular-docs/src/app/pages/basic-authenticator/basic-authenticator.component.ts
index 296ec109d4d..32b107f97e7 100644
--- a/angular-docs/src/app/pages/basic-authenticator/basic-authenticator.component.ts
+++ b/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 {}
diff --git a/angular-docs/src/app/pages/custom-form-authenticator/custom-form-authenticator.component.ts b/angular-docs/src/app/pages/custom-form-authenticator/custom-form-authenticator.component.ts
index 82833d5c68a..7608433cf54 100644
--- a/angular-docs/src/app/pages/custom-form-authenticator/custom-form-authenticator.component.ts
+++ b/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) {
diff --git a/angular-docs/src/app/pages/headless-authenticator/headless-authenticator.component.ts b/angular-docs/src/app/pages/headless-authenticator/headless-authenticator.component.ts
index dc4d7bebc53..e878a4f0eea 100644
--- a/angular-docs/src/app/pages/headless-authenticator/headless-authenticator.component.ts
+++ b/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 {}
diff --git a/angular-docs/src/app/pages/on-submit-authenticator/on-submit-authenticator.component.ts b/angular-docs/src/app/pages/on-submit-authenticator/on-submit-authenticator.component.ts
index 9589fd5302a..5daabdd0af3 100644
--- a/angular-docs/src/app/pages/on-submit-authenticator/on-submit-authenticator.component.ts
+++ b/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 {
diff --git a/angular-docs/src/environments/environment.prod.ts b/angular-docs/src/environments/environment.prod.ts
index 3612073bc31..c9669790be1 100644
--- a/angular-docs/src/environments/environment.prod.ts
+++ b/angular-docs/src/environments/environment.prod.ts
@@ -1,3 +1,3 @@
 export const environment = {
-  production: true
+  production: true,
 };
diff --git a/angular-docs/src/environments/environment.ts b/angular-docs/src/environments/environment.ts
index 7b4f817adb7..99c3763cad6 100644
--- a/angular-docs/src/environments/environment.ts
+++ b/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,
 };
 
 /*
diff --git a/angular-docs/src/main.ts b/angular-docs/src/main.ts
index 03632aa9bcf..07388214e7c 100644
--- a/angular-docs/src/main.ts
+++ b/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));
diff --git a/angular-docs/src/markdowns/authenticator/basic-authenticator.md b/angular-docs/src/markdowns/authenticator/basic-authenticator.md
index 10269eb9014..b34ff9a72a8 100644
--- a/angular-docs/src/markdowns/authenticator/basic-authenticator.md
+++ b/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`:
diff --git a/angular-docs/src/markdowns/authenticator/custom-form.md b/angular-docs/src/markdowns/authenticator/custom-form.md
index 707fd65e788..026a5e758f2 100644
--- a/angular-docs/src/markdowns/authenticator/custom-form.md
+++ b/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.
diff --git a/angular-docs/src/markdowns/authenticator/headless-authenticator.md b/angular-docs/src/markdowns/authenticator/headless-authenticator.md
index 85e9c25450f..30106a14525 100644
--- a/angular-docs/src/markdowns/authenticator/headless-authenticator.md
+++ b/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>
 ```
-
-
diff --git a/angular-docs/src/markdowns/authenticator/on-submit.md b/angular-docs/src/markdowns/authenticator/on-submit.md
index c4a97eb9bbc..3ffa1652313 100644
--- a/angular-docs/src/markdowns/authenticator/on-submit.md
+++ b/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 };
diff --git a/angular-docs/src/test.ts b/angular-docs/src/test.ts
index 50193eb0f28..bb60ce8db4d 100644
--- a/angular-docs/src/test.ts
+++ b/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;
   };
diff --git a/docs/next.config.js b/docs/next.config.js
index 8ba3bb83dca..d9097e88080 100644
--- a/docs/next.config.js
+++ b/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;
 
diff --git a/docs/postcss.config.js b/docs/postcss.config.js
index 33ad091d26d..12a703d900d 100644
--- a/docs/postcss.config.js
+++ b/docs/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/docs/src/components/DividerPropControls.tsx b/docs/src/components/DividerPropControls.tsx
index 09c87db7c91..e00473b4726 100644
--- a/docs/src/components/DividerPropControls.tsx
+++ b/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"]
               )
diff --git a/docs/src/components/Feature.tsx b/docs/src/components/Feature.tsx
index d6fa8a88980..1449190b660 100644
--- a/docs/src/components/Feature.tsx
+++ b/docs/src/components/Feature.tsx
@@ -18,7 +18,7 @@ const parser = new Parser(
   new GherkinClassicTokenMatcher() // or GherkinInMarkdownTokenMatcher()
 );
 
-const required = message => {
+const required = (message) => {
   throw new Error(message);
 };
 
@@ -32,7 +32,7 @@ export function Feature({
   useEffect(() => {
     import(
       `raw-loader!../../../packages/e2e/cypress/integration${asPath}/${name}.feature`
-    ).then(exports => setSource(exports.default));
+    ).then((exports) => setSource(exports.default));
   }, [asPath, name]);
 
   if (!source) {
diff --git a/docs/src/components/Layout.tsx b/docs/src/components/Layout.tsx
index e4d3d245ed9..7d55677c115 100644
--- a/docs/src/components/Layout.tsx
+++ b/docs/src/components/Layout.tsx
@@ -54,7 +54,7 @@ export default function Layout({
   const { platform } = router.query as { platform: string };
 
   const groupedPages = Object.entries(
-    groupBy(pages, page => {
+    groupBy(pages, (page) => {
       const [, folder = ""] = page.slug.split("/");
       return folder;
     })
@@ -68,7 +68,7 @@ export default function Layout({
           "#__next > section:first-of-type h3",
         ].join(",")
       ),
-    ].map(node => [node.innerHTML, node.tagName.toLowerCase()]);
+    ].map((node) => [node.innerHTML, node.tagName.toLowerCase()]);
 
     setHeaders(htmlHeaders);
   }, [children]);
@@ -149,7 +149,7 @@ export default function Layout({
                           </DirectoryGroupHeaderStyle>
                         )}
                         <DirectoryLinksStyle>
-                          {pages.map(page =>
+                          {pages.map((page) =>
                             folder ? (
                               <DirectoryGroupItemStyle
                                 isActive={href === page.href}
diff --git a/docs/src/components/customComponents.tsx b/docs/src/components/customComponents.tsx
index ef73014097a..51c2dd95da4 100644
--- a/docs/src/components/customComponents.tsx
+++ b/docs/src/components/customComponents.tsx
@@ -9,7 +9,7 @@ export const customComponents = {
       />
     );
   },
-  "Authenticator.SignUp.Button": props => {
+  "Authenticator.SignUp.Button": (props) => {
     return props.type === "submit" ? (
       <button
         className="px-4 py-2 font-bold text-white bg-purple-500 border-b-4 border-purple-700 rounded-md shadow hover:bg-purple-600"
diff --git a/docs/src/components/useDividerProps.tsx b/docs/src/components/useDividerProps.tsx
index 4a221d6a5af..5134d7c2d38 100644
--- a/docs/src/components/useDividerProps.tsx
+++ b/docs/src/components/useDividerProps.tsx
@@ -10,7 +10,7 @@ interface UseDividerProps {
   (initialValues: DividerOptions): DividerPropControlsProps;
 }
 
-export const useDividerProps: UseDividerProps = initialValues => {
+export const useDividerProps: UseDividerProps = (initialValues) => {
   const [size, setSize] = useState<DividerOptions["size"]>(initialValues.size);
   const [orientation, setOrientation] = useState<DividerOptions["orientation"]>(
     initialValues.orientation
diff --git a/docs/src/components/useImageProps.tsx b/docs/src/components/useImageProps.tsx
index cbed8b38d71..2e817290594 100644
--- a/docs/src/components/useImageProps.tsx
+++ b/docs/src/components/useImageProps.tsx
@@ -6,7 +6,7 @@ interface UseImageProps {
   (initialValues: ImageOptions): ImagePropControlsProps;
 }
 
-export const useImageProps: UseImageProps = initialValues => {
+export const useImageProps: UseImageProps = (initialValues) => {
   const [alt, setAlt] = useState<ImageOptions["alt"]>(initialValues.alt);
   const [sizes, setSizes] = useState<ImageOptions["sizes"]>(
     initialValues.sizes
diff --git a/docs/src/components/useStyleProps.tsx b/docs/src/components/useStyleProps.tsx
index 1d49f1bb9ed..4131abd6082 100644
--- a/docs/src/components/useStyleProps.tsx
+++ b/docs/src/components/useStyleProps.tsx
@@ -6,7 +6,7 @@ interface UseStyleProps {
   (initialValues: StyleProps): StylePropControlsProps;
 }
 
-export const useStyleProps: UseStyleProps = initialValues => {
+export const useStyleProps: UseStyleProps = (initialValues) => {
   const [width, setWidth] = useState<StyleProps["width"]>(initialValues.width);
   const [height, setHeight] = useState<StyleProps["height"]>(
     initialValues.height
diff --git a/docs/src/data/pages.preval.ts b/docs/src/data/pages.preval.ts
index fb03f72dc3c..64b4769200b 100644
--- a/docs/src/data/pages.preval.ts
+++ b/docs/src/data/pages.preval.ts
@@ -9,7 +9,7 @@ function pluckMeta({ frontmatter, href, slug }) {
 async function getPagesManifest() {
   const paths = await getContentPaths();
   const pages = await Promise.all(
-    paths.map(getPageFromSlug).map(page => page.then(pluckMeta))
+    paths.map(getPageFromSlug).map((page) => page.then(pluckMeta))
   );
 
   return pages;
diff --git a/docs/src/pages/ui/primitives/button/demo.tsx b/docs/src/pages/ui/primitives/button/demo.tsx
index 65b60083801..e7856ce2306 100644
--- a/docs/src/pages/ui/primitives/button/demo.tsx
+++ b/docs/src/pages/ui/primitives/button/demo.tsx
@@ -61,7 +61,7 @@ export const ButtonDemo = () => {
         <select
           value={variant}
           placeholder="Select button variant"
-          onChange={event => setVariant(event.target.value as ButtonVariant)}
+          onChange={(event) => setVariant(event.target.value as ButtonVariant)}
         >
           <option value="primary">primary</option>
           <option value="secondary">secondary</option>
@@ -70,7 +70,7 @@ export const ButtonDemo = () => {
         </select>
         <select
           value={size}
-          onChange={event => setSize(event.target.value as ButtonSize)}
+          onChange={(event) => setSize(event.target.value as ButtonSize)}
         >
           <option value="small">small</option>
           <option value="medium">medium</option>
diff --git a/docs/src/pages/ui/primitives/button/index.mdx b/docs/src/pages/ui/primitives/button/index.mdx
index 14d9466f381..e3896d35583 100644
--- a/docs/src/pages/ui/primitives/button/index.mdx
+++ b/docs/src/pages/ui/primitives/button/index.mdx
@@ -2,8 +2,8 @@
 title: Button
 ---
 
-import { Button } from "@aws-amplify/ui-react"
-import { ButtonDemo } from "./demo"
+import { Button } from "@aws-amplify/ui-react";
+import { ButtonDemo } from "./demo";
 
 ## Installation
 
@@ -12,10 +12,12 @@ npm install @aws-amplify/ui-react
 ```
 
 ## Demo
-<ButtonDemo/>
+
+<ButtonDemo />
 
 ## Usage
-Import the button component and styles. 
+
+Import the button component and styles.
 
 ```jsx
 import { Button } from "@aws-amplify/ui-react";
@@ -23,23 +25,26 @@ import "@aws-amplify/ui-react/styles.css";
 // For smaller bundle size, import just the button styling:
 // import "@aws-amplify/ui-react/dist/primitives/Button/styles.css";
 
-<Button>Hello world</Button>
+<Button>Hello world</Button>;
 ```
+
 <Button>Hello world</Button>
 
 ### Button onClick
+
 Use the `onClick` prop to add a click handler to the button.
 
 ```jsx
 import { Button } from "@aws-amplify/ui-react";
 import "@aws-amplify/ui-react/styles.css";
 
-<Button onClick={() => alert("👋 hello")}>Click me</Button>
+<Button onClick={() => alert("👋 hello")}>Click me</Button>;
 ```
-<Button onClick={() => alert("👋 hello")}>Click me</Button>
 
+<Button onClick={() => alert("👋 hello")}>Click me</Button>
 
 ### Button sizes
+
 Use the `size` prop to change the button size. Available options are `large`, `medium`, and `small`.
 
 ```jsx
@@ -50,12 +55,13 @@ import "@aws-amplify/ui-react/styles.css";
 <Button size="medium">Medium</Button>
 <Button size="small">Small</Button>
 ```
+
 <Button size="large">Large</Button>
 <Button size="medium">Medium</Button>
 <Button size="small">Small</Button>
 
-
 ### Button variants
+
 Use the `variant` prop to change the button variant. Available options are `primary`, `secondary`, `tertiary` and `link`.
 
 ```jsx
@@ -67,6 +73,7 @@ import "@aws-amplify/ui-react/styles.css";
 <Button variant="tertiary">Tertiary</Button>
 <Button variant="link">Link</Button>
 ```
+
 <Button variant="primary">Primary</Button>
 <Button variant="secondary">Secondary</Button>
 <Button variant="tertiary">Tertiary</Button>
@@ -78,12 +85,17 @@ import "@aws-amplify/ui-react/styles.css";
 import { Button } from "@aws-amplify/ui-react";
 import "@aws-amplify/ui-react/styles.css";
 
-<Button isLoading={true} loadingText="Loading..." variant="primary">Hello</Button>
+<Button isLoading={true} loadingText="Loading..." variant="primary">
+  Hello
+</Button>;
 ```
-<Button isLoading={true} loadingText="Loading..." variant="primary">Hello</Button>
 
+<Button isLoading={true} loadingText="Loading..." variant="primary">
+  Hello
+</Button>
 
 ### Other states
+
 ```jsx
 import { Button } from "@aws-amplify/ui-react";
 import "@aws-amplify/ui-react/styles.css";
@@ -91,20 +103,22 @@ import "@aws-amplify/ui-react/styles.css";
 <Button isDisabled={true}>Disabled</Button>
 <Button isFullWidth={true}>Full width</Button>
 ```
+
 <Button isDisabled={true}>Disabled</Button>
 <Button isFullWidth={true}>Full width</Button>
 
-
 ### Accessibility
-Setting an `aria-label` attribute for an icon button: 
+
+Setting an `aria-label` attribute for an icon button:
+
 ```jsx
 import { Button } from "@aws-amplify/ui-react";
 import "@aws-amplify/ui-react/styles.css";
 
-<Button ariaLabel="To the moon!">🚀</Button>
+<Button ariaLabel="To the moon!">🚀</Button>;
 ```
-<Button ariaLabel="To the moon!">🚀</Button>
 
+<Button ariaLabel="To the moon!">🚀</Button>
 
 ### CSS Styling
 
@@ -125,31 +139,39 @@ import { Button } from "@aws-amplify/ui-react";
 import "@aws-amplify/ui-react/styles.css";
 import "./styles.css";
 
-<Button className="my-custom-button" variant="primary">My button</Button>
+<Button className="my-custom-button" variant="primary">
+  My button
+</Button>;
 ```
-<Button className="my-custom-button" variant="primary">My button</Button>
 
+<Button className="my-custom-button" variant="primary">
+  My button
+</Button>
 
-Or override the variables inline: 
+Or override the variables inline:
 
 ```jsx
 <div
   style={{
     "--amplify-ui-button-colors-bg-primary": "#0057ff",
-    "--amplify-ui-button-colors-bg-primary-hover": "#4d89fc"
+    "--amplify-ui-button-colors-bg-primary-hover": "#4d89fc",
   }}
-  >
-  <Button 
-    variant="primary">
-    My button
-  </Button>
+>
+  <Button variant="primary">My button</Button>
 </div>
 ```
-<div style={{"--amplify-ui-button-colors-bg-primary": "#0057ff", "--amplify-ui-button-colors-bg-primary-hover": "#4d89fc"}}>
+
+<div
+  style={{
+    "--amplify-ui-button-colors-bg-primary": "#0057ff",
+    "--amplify-ui-button-colors-bg-primary-hover": "#4d89fc",
+  }}
+>
   <Button variant="primary">My button</Button>
 </div>
 
 #### Override styling using the classname and data attribute selectors:
+
 Use the `amplify-ui-button` class and data attributes to style all buttons.
 
 ```css
@@ -160,27 +182,29 @@ Use the `amplify-ui-button` class and data attributes to style all buttons.
 }
 
 /* Example: Override only primary variant styles */
-.amplify-ui-button[data-variant=primary] {
+.amplify-ui-button[data-variant="primary"] {
   background-color: teal;
   color: white;
 }
 
 /* Example: Override loading styles */
-.amplify-ui-button[data-loading=true] {
+.amplify-ui-button[data-loading="true"] {
   opacity: 0.8;
 }
 
 /* Example: Override disabled styles */
-.amplify-ui-button[disabled=true] {
+.amplify-ui-button[disabled="true"] {
   opacity: 0.8;
 }
 
 /* Example: Override button styles using Tailwind CSS */
 .amplify-ui-button {
-   @apply bg-blue-500 hover:bg-blue-700 text-white;
+  @apply bg-blue-500 hover:bg-blue-700 text-white;
 }
 ```
+
 To replace the button styling, unset it:
+
 ```css
 .amplify-ui-button {
   all: unset;
@@ -189,9 +213,10 @@ To replace the button styling, unset it:
 ```
 
 #### Styling a button instance
-To override styling on a specific button 
 
-*Using an class selector:*
+To override styling on a specific button
+
+_Using an class selector:_
 
 ```css
 /* Example: class selector styling override */
@@ -199,13 +224,14 @@ To override styling on a specific button
   background: linear-gradient(90deg, #fdbb2d 0%, #22c1c3 100%);
 }
 ```
+
 ```jsx
 <Button className="colorful-button">I'm colorful!</Button>
 ```
-<Button className="colorful-button">I'm colorful!</Button>
 
+<Button className="colorful-button">I'm colorful!</Button>
 
-*Using an id selector:*
+_Using an id selector:_
 
 ```css
 /* Example: id selector styling override */
@@ -221,7 +247,9 @@ To override styling on a specific button
   );
 }
 ```
+
 ```jsx
 <Button id="gradient-button">I'm beautiful!</Button>
 ```
+
 <Button id="gradient-button">I'm beautiful!</Button>
diff --git a/docs/src/pages/ui/primitives/flex/demo.tsx b/docs/src/pages/ui/primitives/flex/demo.tsx
index 015c829c472..4c3f85bedcf 100644
--- a/docs/src/pages/ui/primitives/flex/demo.tsx
+++ b/docs/src/pages/ui/primitives/flex/demo.tsx
@@ -1,12 +1,8 @@
 import { useState } from "react";
 
-import { Property } from 'csstype';
+import { Property } from "csstype";
 
-import {
-  Flex,
-  Button,
-  View,
-} from "@aws-amplify/ui-react";
+import { Flex, Button, View } from "@aws-amplify/ui-react";
 
 const JustifyContentProps: Property.JustifyContent[] = [
   "flex-start",
@@ -60,9 +56,8 @@ const Direction = () => {
 const Gap = () => <Flex gap="3rem">{mockElements(3)}</Flex>;
 
 const JustifyContent = () => {
-  const [justifyContent, setJustifyContent] = useState<Property.JustifyContent>(
-    "flex-start"
-  );
+  const [justifyContent, setJustifyContent] =
+    useState<Property.JustifyContent>("flex-start");
 
   return (
     <View>
@@ -105,9 +100,29 @@ const AlignItems = () => {
       </Flex>
       <br />
       <Flex alignItems={alignItems}>
-        <View backgroundColor="#b794f4" height="100px" padding="2rem" color="white">Wow!</View>
-        <View backgroundColor="#805AD5" padding="10px 2rem 0 2rem" color="white">I love to use</View>
-        <View backgroundColor="#322659" height="70px" padding="2rem" color="white">Flex</View>
+        <View
+          backgroundColor="#b794f4"
+          height="100px"
+          padding="2rem"
+          color="white"
+        >
+          Wow!
+        </View>
+        <View
+          backgroundColor="#805AD5"
+          padding="10px 2rem 0 2rem"
+          color="white"
+        >
+          I love to use
+        </View>
+        <View
+          backgroundColor="#322659"
+          height="70px"
+          padding="2rem"
+          color="white"
+        >
+          Flex
+        </View>
       </Flex>
     </View>
   );
@@ -148,7 +163,7 @@ const mockStyle = {
   backgroundColor: "#805AD5",
 };
 
-const mockElements = elements => {
+const mockElements = (elements) => {
   const arr =
     typeof elements === "number" ? [...Array(elements)] : [...elements];
   return arr.map((char, i) => (
@@ -158,7 +173,7 @@ const mockElements = elements => {
   ));
 };
 
-const selectDemo = demoType => {
+const selectDemo = (demoType) => {
   switch (demoType) {
     case "direction":
       return <Direction />;
diff --git a/docs/src/pages/ui/primitives/text/demo.tsx b/docs/src/pages/ui/primitives/text/demo.tsx
index ba5755ef735..051fbc44255 100644
--- a/docs/src/pages/ui/primitives/text/demo.tsx
+++ b/docs/src/pages/ui/primitives/text/demo.tsx
@@ -21,7 +21,7 @@ export const TextDemo = ({ children }) => {
             id="display_text"
             name="display_text"
             value={text}
-            onChange={event => setText(event.target.value)}
+            onChange={(event) => setText(event.target.value)}
           />
         </div>
       </div>
@@ -35,7 +35,7 @@ export const TextDemo = ({ children }) => {
             id="color"
             name="color"
             value={color}
-            onChange={event => setColor(event.target.value)}
+            onChange={(event) => setColor(event.target.value)}
           />
         </div>
       </div>
@@ -49,7 +49,7 @@ export const TextDemo = ({ children }) => {
             id="line_height"
             name="line_height"
             value={lineHeight}
-            onChange={event => setLineHeight(event.target.value)}
+            onChange={(event) => setLineHeight(event.target.value)}
           />
         </div>
       </div>
@@ -63,7 +63,7 @@ export const TextDemo = ({ children }) => {
             id="font_weight"
             name="font_weight"
             value={fontWeight}
-            onChange={event => setFontWeight(event.target.value)}
+            onChange={(event) => setFontWeight(event.target.value)}
           />
         </div>
       </div>
@@ -77,7 +77,7 @@ export const TextDemo = ({ children }) => {
             id="font_style"
             name="font_style"
             value={fontStyle}
-            onChange={event => setFontStyle(event.target.value)}
+            onChange={(event) => setFontStyle(event.target.value)}
           />
         </div>
       </div>
@@ -91,7 +91,7 @@ export const TextDemo = ({ children }) => {
             id="text_decoration"
             name="text_decoration"
             value={textDecoration}
-            onChange={event => setTextDecoration(event.target.value)}
+            onChange={(event) => setTextDecoration(event.target.value)}
           />
         </div>
       </div>
@@ -105,7 +105,7 @@ export const TextDemo = ({ children }) => {
             type="checkbox"
             id="is_truncated"
             name="is_truncated"
-            onChange={event => setIsTruncated(!isTruncated)}
+            onChange={(event) => setIsTruncated(!isTruncated)}
           />
         </div>
       </div>
diff --git a/docs/src/pages/ui/primitives/view/demo.tsx b/docs/src/pages/ui/primitives/view/demo.tsx
index ad013258637..41117089be7 100644
--- a/docs/src/pages/ui/primitives/view/demo.tsx
+++ b/docs/src/pages/ui/primitives/view/demo.tsx
@@ -40,9 +40,8 @@ export const ViewDemo = ({ children }) => {
   const [border, setBorder] = React.useState<string>("1px solid black");
   const [borderRadius, setBorderRadius] = React.useState<string>("4px");
   const [opacity, setOpacity] = React.useState<string>("100%");
-  const [customAttribute, setCustomAttribute] = React.useState<string>(
-    "data-demo"
-  );
+  const [customAttribute, setCustomAttribute] =
+    React.useState<string>("data-demo");
   const [asElementType, setAs] = React.useState<ViewAsHTMLElementTypes>("div");
   const customAttributes = {};
   if (customAttribute) {
@@ -58,7 +57,7 @@ export const ViewDemo = ({ children }) => {
             id="as"
             value={asElementType}
             placeholder="As element type"
-            onChange={event =>
+            onChange={(event) =>
               setAs(event.target.value as ViewAsHTMLElementTypes)
             }
           >
diff --git a/docs/src/pages/ui/primitives/view/index.mdx b/docs/src/pages/ui/primitives/view/index.mdx
index 837fc6f03dd..305057fbcd1 100644
--- a/docs/src/pages/ui/primitives/view/index.mdx
+++ b/docs/src/pages/ui/primitives/view/index.mdx
@@ -2,8 +2,8 @@
 title: View
 ---
 
-import { View } from "@aws-amplify/ui-react"
-import { ViewDemo } from "./demo"
+import { View } from "@aws-amplify/ui-react";
+import { ViewDemo } from "./demo";
 
 ## Installation
 
@@ -41,11 +41,7 @@ Change the HTML element rendered by View with the `as` property
 ### Disabled state
 
 ```jsx
-<View
-  as="button"
-  isDisabled={true}
-  onClick={() => alert("This won't fire 🚫")}
->
+<View as="button" isDisabled={true} onClick={() => alert("This won't fire 🚫")}>
   Disabled
 </View>
 ```
@@ -59,39 +55,29 @@ Change the HTML element rendered by View with the `as` property
 Setting an `aria-label` attribute and `role` for an icon button
 
 ```jsx
-<View
-  ariaLabel="To the moon!"
-  role="button"
-  onClick={() => alert("👋 hello")}>
+<View ariaLabel="To the moon!" role="button" onClick={() => alert("👋 hello")}>
   🚀
 </View>
 ```
 
-<View
-  ariaLabel="To the moon!"
-  role="button"
-  onClick={() => alert("👋 hello")}>
+<View ariaLabel="To the moon!" role="button" onClick={() => alert("👋 hello")}>
   🚀
 </View>
 
 ### Custom attributes
+
 Pass any attribute to the underlying HTML element
 
 ```jsx
-<View
-  as="progress"
-  data-progress-bar
-  max="100"
-  value="50"
-/>
-
+<View as="progress" data-progress-bar max="100" value="50" />
 ```
+
 <View
   as="progress"
   data-progress-bar
   max="100"
   value="50"
-  style={{all: "revert"}}
+  style={{ all: "revert" }}
 />
 
 ### CSS Styling
@@ -115,7 +101,7 @@ import { View } from "@aws-amplify/ui-react";
 import "@aws-amplify/ui-react/styles.css";
 import "./styles.css";
 
-<View className="mountain-view">🏔</View>
+<View className="mountain-view">🏔</View>;
 ```
 
 <View className="mountain-view">🏔</View>
diff --git a/docs/src/plugins/remark-layout.js b/docs/src/plugins/remark-layout.js
index fc64f7a0837..c432e471ee9 100644
--- a/docs/src/plugins/remark-layout.js
+++ b/docs/src/plugins/remark-layout.js
@@ -1,6 +1,6 @@
 // See https://astexplorer.net/ for converting JSX to AST
 
-module.exports = () => ast => {
+module.exports = () => (ast) => {
   const layoutUrl = "@/components/Layout";
 
   // import Layout from "@/components/Layout";
diff --git a/docs/src/utils/getContentPaths.tsx b/docs/src/utils/getContentPaths.tsx
index ca55fa8bce2..42b1d69526a 100644
--- a/docs/src/utils/getContentPaths.tsx
+++ b/docs/src/utils/getContentPaths.tsx
@@ -9,7 +9,7 @@ const cwd = path.resolve(process.cwd(), "src/pages");
 export async function getContentPaths(pattern = "**/index.mdx") {
   return glob
     .sync(pattern, { cwd })
-    .map(contentPath => {
+    .map((contentPath) => {
       return path.normalize(`/${path.dirname(contentPath)}`);
     })
     .sort();
diff --git a/examples/next/pages/ui/components/authenticator/sign-in/auth-with-sms-mfa.tsx b/examples/next/pages/ui/components/authenticator/sign-in/auth-with-sms-mfa.tsx
index ba4b5b4dfc6..e1f3b6785f9 100644
--- a/examples/next/pages/ui/components/authenticator/sign-in/auth-with-sms-mfa.tsx
+++ b/examples/next/pages/ui/components/authenticator/sign-in/auth-with-sms-mfa.tsx
@@ -6,7 +6,7 @@ import awsExports from "@environments/auth-with-phone-and-sms-mfa/src/aws-export
 Amplify.configure({
   ...awsExports,
   auth: {
-    login_mechanisms: ['phone_number'],
+    login_mechanisms: ["phone_number"],
   },
 });
 
diff --git a/package.json b/package.json
index e672880f673..65cc63892d0 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
     "build:vue": "yarn vue-docs build",
     "build:theme-base": "yarn theme-base build",
     "dev:angular": "yarn angular-docs start",
-    "dev:vue": "yarn vue-docs serve --port 3001 --host localhost"
+    "dev:vue": "yarn vue-docs serve --port 3001 --host localhost",
+    "prepare": "husky install"
   },
   "workspaces": [
     "docs",
@@ -37,5 +38,13 @@
   "dependencies": {
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0"
+  },
+  "devDependencies": {
+    "husky": ">=6",
+    "lint-staged": ">=10",
+    "prettier": "2.3.2"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,css,md,mdx}": "prettier --write"
   }
 }
diff --git a/packages/angular/README.md b/packages/angular/README.md
index b9ca0bee5cd..f5bb217f19c 100644
--- a/packages/angular/README.md
+++ b/packages/angular/README.md
@@ -2,7 +2,8 @@
 
 ## Getting Started
 
-To build: 
+To build:
+
 ```bash
 yarn build
 ```
@@ -11,4 +12,4 @@ To build and watch for changes:
 
 ```bash
 yarn build --watch
-```
\ No newline at end of file
+```
diff --git a/packages/angular/projects/ui-angular/karma.conf.js b/packages/angular/projects/ui-angular/karma.conf.js
index 160c9b385f8..b8c8d463882 100644
--- a/packages/angular/projects/ui-angular/karma.conf.js
+++ b/packages/angular/projects/ui-angular/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: {
@@ -25,16 +25,16 @@ module.exports = function (config) {
       suppressAll: true, // removes the duplicated traces
     },
     coverageReporter: {
-      dir: require('path').join(__dirname, '../../coverage/ui-angular'),
-      subdir: '.',
-      reporters: [{ type: 'html' }, { type: 'text-summary' }],
+      dir: require("path").join(__dirname, "../../coverage/ui-angular"),
+      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,
   });
diff --git a/packages/angular/projects/ui-angular/src/lib/common/helpers.ts b/packages/angular/projects/ui-angular/src/lib/common/helpers.ts
index 3f23fae4445..3517fae2dd5 100644
--- a/packages/angular/projects/ui-angular/src/lib/common/helpers.ts
+++ b/packages/angular/projects/ui-angular/src/lib/common/helpers.ts
@@ -5,24 +5,24 @@ export const getAttributeMap: AttributeInfoProvider = () => ({
   // TODO: Replace this with I18n translations
   username: {
     label: 'Username',
-    placeholder: 'Enter your username'
+    placeholder: 'Enter your username',
   },
   password: {
     label: 'Password',
-    placeholder: 'Enter your password'
+    placeholder: 'Enter your password',
   },
   email: {
     label: 'Email',
-    placeholder: 'Enter your email'
+    placeholder: 'Enter your email',
   },
   phone_number: {
     label: 'Phone Number',
-    placeholder: 'Enter your phone number'
+    placeholder: 'Enter your phone number',
   },
   code: {
     label: 'Confirmation Code',
-    placeholder: 'Enter your confirmation code'
-  }
+    placeholder: 'Enter your confirmation code',
+  },
 });
 
 export const mapInputErrors = (controls: Record<string, AbstractControl>) => {
diff --git a/packages/angular/projects/ui-angular/src/lib/common/types/common-types.ts b/packages/angular/projects/ui-angular/src/lib/common/types/common-types.ts
index 941595eebf2..cf0da57e5f2 100644
--- a/packages/angular/projects/ui-angular/src/lib/common/types/common-types.ts
+++ b/packages/angular/projects/ui-angular/src/lib/common/types/common-types.ts
@@ -8,13 +8,13 @@ export const supportedInputTypes = [
   'button',
   'submit',
   'radio',
-  'tel'
+  'tel',
 ] as const;
 
 export type InputType = typeof supportedInputTypes[number];
 
 export const isInputType = (value: string): value is InputType => {
-  return supportedInputTypes.find(inputType => inputType === value)
+  return supportedInputTypes.find((inputType) => inputType === value)
     ? true
     : false;
 };
diff --git a/packages/angular/projects/ui-angular/src/lib/components/amplify-authenticator/amplify-authenticator.component.ts b/packages/angular/projects/ui-angular/src/lib/components/amplify-authenticator/amplify-authenticator.component.ts
index 045ddd36066..ba12eb2a802 100644
--- a/packages/angular/projects/ui-angular/src/lib/components/amplify-authenticator/amplify-authenticator.component.ts
+++ b/packages/angular/projects/ui-angular/src/lib/components/amplify-authenticator/amplify-authenticator.component.ts
@@ -8,13 +8,13 @@ import {
   Output,
   QueryList,
   TemplateRef,
-  ViewEncapsulation
+  ViewEncapsulation,
 } from '@angular/core';
 import { AuthState } from '../../common/types';
 import { AmplifyOverrideDirective } from '../../directives/amplify-override.directive';
 import {
   StateMachineService,
-  AuthenticatorContextService
+  AuthenticatorContextService,
 } from '../../services';
 import { CustomComponents, OnSubmitHook } from '../../common';
 import { State } from 'xstate';
@@ -24,7 +24,7 @@ import { AuthFormData } from '@aws-amplify/ui-core';
   selector: 'amplify-authenticator',
   templateUrl: './amplify-authenticator.component.html',
   providers: [AuthenticatorContextService], // make sure custom components are scoped to this authenticator only
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
 })
 export class AmplifyAuthenticatorComponent implements AfterContentInit {
   // Custom events
@@ -42,7 +42,7 @@ export class AmplifyAuthenticatorComponent implements AfterContentInit {
   public customComponents: CustomComponents = {};
   public context = () => ({
     user: this.stateMachine.user,
-    username: this.stateMachine.user?.username
+    username: this.stateMachine.user?.username,
   }); // use a function so that this is reevaluated whenever context is requested
 
   constructor(
@@ -61,16 +61,16 @@ export class AmplifyAuthenticatorComponent implements AfterContentInit {
     this.contextService.props = {
       signIn: {
         onSignInInput: this.onSignInInput,
-        onSignInSubmit: this.onSignInSubmit
+        onSignInSubmit: this.onSignInSubmit,
       },
       signUp: {
         onSignUpInput: this.onSignUpInput,
-        onSignUpSubmit: this.onSignUpSubmit
+        onSignUpSubmit: this.onSignUpSubmit,
       },
       confirmSignUp: {
         onConfirmSignUpInput: this.onConfirmSignUpInput,
-        onConfirmSignUpSubmit: this.onConfirmSignUpSubmit
-      }
+        onConfirmSignUpSubmit: this.onConfirmSignUpSubmit,
+      },
     };
   }
 
@@ -87,7 +87,7 @@ export class AmplifyAuthenticatorComponent implements AfterContentInit {
   ): Record<string, TemplateRef<any>> {
     if (!componentQuery) return {};
     const customComponents: Record<string, TemplateRef<any>> = {};
-    componentQuery.forEach(component => {
+    componentQuery.forEach((component) => {
       customComponents[component.name] = component.template;
     });
 
diff --git a/packages/angular/projects/ui-angular/src/lib/components/amplify-confirm-sign-up/amplify-confirm-sign-up.component.ts b/packages/angular/projects/ui-angular/src/lib/components/amplify-confirm-sign-up/amplify-confirm-sign-up.component.ts
index 3e41c84a785..07e7a9645f1 100644
--- a/packages/angular/projects/ui-angular/src/lib/components/amplify-confirm-sign-up/amplify-confirm-sign-up.component.ts
+++ b/packages/angular/projects/ui-angular/src/lib/components/amplify-confirm-sign-up/amplify-confirm-sign-up.component.ts
@@ -3,7 +3,7 @@ import {
   EventEmitter,
   HostBinding,
   Output,
-  TemplateRef
+  TemplateRef,
 } from '@angular/core';
 import { AuthEvent, AuthMachineState } from '@aws-amplify/ui-core';
 import { Logger } from '@aws-amplify/core';
@@ -11,14 +11,14 @@ import { Event, Subscription } from 'xstate';
 import { AuthFormData, FormError } from '../../common';
 import {
   AuthenticatorContextService,
-  StateMachineService
+  StateMachineService,
 } from '../../services';
 
 const logger = new Logger('ConfirmSignUp');
 
 @Component({
   selector: 'amplify-confirm-sign-up',
-  templateUrl: './amplify-confirm-sign-up.component.html'
+  templateUrl: './amplify-confirm-sign-up.component.html',
 })
 export class AmplifyConfirmSignUpComponent {
   // custom events
@@ -30,7 +30,7 @@ export class AmplifyConfirmSignUpComponent {
   private authSubscription: Subscription;
   public username: string;
   public context = () => ({
-    errors: this.contextService.formError
+    errors: this.contextService.formError,
   });
 
   constructor(
@@ -40,7 +40,7 @@ export class AmplifyConfirmSignUpComponent {
 
   ngOnInit(): void {
     // TODO: alias for subscribe
-    this.authSubscription = this.stateMachine.authService.subscribe(state =>
+    this.authSubscription = this.stateMachine.authService.subscribe((state) =>
       this.onStateUpdate(state)
     );
     const username = this.stateMachine.user?.username;
@@ -48,7 +48,7 @@ export class AmplifyConfirmSignUpComponent {
       this.username = username;
       this.send({
         type: 'INPUT',
-        data: { name: 'username', value: this.username }
+        data: { name: 'username', value: this.username },
       });
     }
   }
@@ -101,8 +101,8 @@ export class AmplifyConfirmSignUpComponent {
     this.send({
       type: 'RESEND',
       data: {
-        username: this.stateMachine.user?.username
-      }
+        username: this.stateMachine.user?.username,
+      },
     });
   }
 
@@ -111,7 +111,7 @@ export class AmplifyConfirmSignUpComponent {
     const { name, value } = $event.target;
     this.send({
       type: 'INPUT',
-      data: { name, value }
+      data: { name, value },
     });
   }
 
@@ -127,7 +127,7 @@ export class AmplifyConfirmSignUpComponent {
     } else {
       this.send({
         type: 'SUBMIT',
-        data: formValues
+        data: formValues,
       });
     }
   }
diff --git a/packages/angular/projects/ui-angular/src/lib/components/amplify-sign-in/amplify-sign-in.component.ts b/packages/angular/projects/ui-angular/src/lib/components/amplify-sign-in/amplify-sign-in.component.ts
index b4e0b2ea049..aa434119b18 100644
--- a/packages/angular/projects/ui-angular/src/lib/components/amplify-sign-in/amplify-sign-in.component.ts
+++ b/packages/angular/projects/ui-angular/src/lib/components/amplify-sign-in/amplify-sign-in.component.ts
@@ -9,11 +9,11 @@ import {
   OnInit,
   Output,
   TemplateRef,
-  ViewEncapsulation
+  ViewEncapsulation,
 } from '@angular/core';
 import {
   AuthenticatorContextService,
-  StateMachineService
+  StateMachineService,
 } from '../../services';
 import { AuthFormData, FormError, OnSubmitHook } from '../../common';
 import { Event, Subscription } from 'xstate';
@@ -24,10 +24,11 @@ const logger = new Logger('SignIn');
 @Component({
   selector: 'amplify-sign-in',
   templateUrl: './amplify-sign-in.component.html',
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
 })
 export class AmplifySignInComponent
-  implements AfterContentInit, OnInit, OnDestroy {
+  implements AfterContentInit, OnInit, OnDestroy
+{
   // Custom events
   @Output() onSignInInput = new EventEmitter<AuthFormData>();
   @Output() onSignInSubmit = new EventEmitter<AuthFormData>();
@@ -36,7 +37,7 @@ export class AmplifySignInComponent
   public customComponents: Record<string, TemplateRef<any>> = {};
   private authSubscription: Subscription;
   public context = () => ({
-    errors: this.contextService.formError
+    errors: this.contextService.formError,
   });
 
   constructor(
@@ -45,7 +46,7 @@ export class AmplifySignInComponent
   ) {}
 
   ngOnInit(): void {
-    this.authSubscription = this.stateMachine.authService.subscribe(state =>
+    this.authSubscription = this.stateMachine.authService.subscribe((state) =>
       this.onStateUpdate(state)
     );
   }
@@ -99,7 +100,7 @@ export class AmplifySignInComponent
     const { name, value } = $event.target;
     this.send({
       type: 'INPUT',
-      data: { name, value }
+      data: { name, value },
     });
   }
 
@@ -115,7 +116,7 @@ export class AmplifySignInComponent
     } else {
       this.send({
         type: 'SUBMIT',
-        data: formValues
+        data: formValues,
       });
     }
   }
diff --git a/packages/angular/projects/ui-angular/src/lib/components/amplify-sign-out/amplify-sign-out.component.ts b/packages/angular/projects/ui-angular/src/lib/components/amplify-sign-out/amplify-sign-out.component.ts
index 68fb0c1ace5..c4520e82a4f 100644
--- a/packages/angular/projects/ui-angular/src/lib/components/amplify-sign-out/amplify-sign-out.component.ts
+++ b/packages/angular/projects/ui-angular/src/lib/components/amplify-sign-out/amplify-sign-out.component.ts
@@ -3,7 +3,7 @@ import { StateMachineService } from '../../services/state-machine.service';
 @Component({
   selector: 'amplify-sign-out',
   templateUrl: './amplify-sign-out.component.html',
-  styleUrls: []
+  styleUrls: [],
 })
 export class AmplifySignOutComponent {
   constructor(private stateMachine: StateMachineService) {}
diff --git a/packages/angular/projects/ui-angular/src/lib/components/amplify-sign-up/amplify-sign-up.component.ts b/packages/angular/projects/ui-angular/src/lib/components/amplify-sign-up/amplify-sign-up.component.ts
index 416b48789cc..a620180279b 100644
--- a/packages/angular/projects/ui-angular/src/lib/components/amplify-sign-up/amplify-sign-up.component.ts
+++ b/packages/angular/projects/ui-angular/src/lib/components/amplify-sign-up/amplify-sign-up.component.ts
@@ -7,12 +7,12 @@ import {
   Input,
   OnDestroy,
   OnInit,
-  TemplateRef
+  TemplateRef,
 } from '@angular/core';
 import { AuthFormData, FormError, OnSubmitHook } from '../../common';
 import {
   AuthenticatorContextService,
-  StateMachineService
+  StateMachineService,
 } from '../../services';
 import { Subscription, Event } from 'xstate';
 import { AuthEvent, AuthMachineState } from '@aws-amplify/ui-core';
@@ -20,10 +20,11 @@ import { AuthEvent, AuthMachineState } from '@aws-amplify/ui-core';
 const logger = new Logger('SignUp');
 @Component({
   selector: 'amplify-sign-up',
-  templateUrl: './amplify-sign-up.component.html'
+  templateUrl: './amplify-sign-up.component.html',
 })
 export class AmplifySignUpComponent
-  implements AfterContentInit, OnInit, OnDestroy {
+  implements AfterContentInit, OnInit, OnDestroy
+{
   // Custom events
   public onSignUpInput = new EventEmitter<any>();
   public onSignUpSubmit = new EventEmitter<any>();
@@ -33,7 +34,7 @@ export class AmplifySignUpComponent
   private authSubscription: Subscription;
   public customComponents: Record<string, TemplateRef<any>>;
   public context = () => ({
-    errors: this.contextService.formError
+    errors: this.contextService.formError,
   });
 
   constructor(
@@ -42,7 +43,7 @@ export class AmplifySignUpComponent
   ) {}
 
   ngOnInit(): void {
-    this.authSubscription = this.stateMachine.authService.subscribe(state =>
+    this.authSubscription = this.stateMachine.authService.subscribe((state) =>
       this.onStateUpdate(state)
     );
   }
@@ -95,7 +96,7 @@ export class AmplifySignUpComponent
     } else {
       this.send({
         type: 'SUBMIT',
-        data: formValues
+        data: formValues,
       });
     }
   }
@@ -105,7 +106,7 @@ export class AmplifySignUpComponent
     const { name, value } = $event.target;
     this.send({
       type: 'INPUT',
-      data: { name, value }
+      data: { name, value },
     });
   }
 
diff --git a/packages/angular/projects/ui-angular/src/lib/primitives/amplify-input/amplify-input.component.ts b/packages/angular/projects/ui-angular/src/lib/primitives/amplify-input/amplify-input.component.ts
index 9d31da8ec84..afef104d0ef 100644
--- a/packages/angular/projects/ui-angular/src/lib/primitives/amplify-input/amplify-input.component.ts
+++ b/packages/angular/projects/ui-angular/src/lib/primitives/amplify-input/amplify-input.component.ts
@@ -3,7 +3,7 @@ import {
   ControlContainer,
   FormGroup,
   FormGroupDirective,
-  ValidationErrors
+  ValidationErrors,
 } from '@angular/forms';
 import {
   AuthAttribute,
@@ -11,7 +11,7 @@ import {
   getAttributeMap,
   AttributeInfo,
   isInputType,
-  FormError
+  FormError,
 } from '../../common';
 import { AuthenticatorContextService } from '../../services';
 
@@ -24,8 +24,8 @@ import { AuthenticatorContextService } from '../../services';
   templateUrl: './amplify-input.component.html',
   viewProviders: [
     // https://stackoverflow.com/a/46452442/10103143
-    { provide: ControlContainer, useExisting: FormGroupDirective }
-  ]
+    { provide: ControlContainer, useExisting: FormGroupDirective },
+  ],
 })
 export class AmplifyInputComponent {
   @Input() name: AuthAttribute;
diff --git a/packages/angular/projects/ui-angular/src/lib/primitives/amplify-validation-error/amplify-validation-error.component.ts b/packages/angular/projects/ui-angular/src/lib/primitives/amplify-validation-error/amplify-validation-error.component.ts
index a9318495ae7..65093636c4b 100644
--- a/packages/angular/projects/ui-angular/src/lib/primitives/amplify-validation-error/amplify-validation-error.component.ts
+++ b/packages/angular/projects/ui-angular/src/lib/primitives/amplify-validation-error/amplify-validation-error.component.ts
@@ -5,7 +5,7 @@ import { getErrorMessage } from './validation-error-messages';
 
 @Component({
   selector: 'amplify-validation-error',
-  templateUrl: './amplify-validation-error.component.html'
+  templateUrl: './amplify-validation-error.component.html',
 })
 export class AmplifyValidationErrorComponent implements OnInit {
   @Input() errors: ValidationErrors;
diff --git a/packages/angular/projects/ui-angular/src/lib/services/authenticator-context.service.ts b/packages/angular/projects/ui-angular/src/lib/services/authenticator-context.service.ts
index 6ef852e785f..50dae8503bb 100644
--- a/packages/angular/projects/ui-angular/src/lib/services/authenticator-context.service.ts
+++ b/packages/angular/projects/ui-angular/src/lib/services/authenticator-context.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { CustomComponents, FormError, PropContext } from '../common';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class AuthenticatorContextService {
   constructor() {}
diff --git a/packages/angular/projects/ui-angular/src/lib/services/state-machine.service.ts b/packages/angular/projects/ui-angular/src/lib/services/state-machine.service.ts
index 7e77052607f..23417b69275 100644
--- a/packages/angular/projects/ui-angular/src/lib/services/state-machine.service.ts
+++ b/packages/angular/projects/ui-angular/src/lib/services/state-machine.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import {
   AuthInterpreter,
   authMachine,
-  AuthMachineState
+  AuthMachineState,
 } from '@aws-amplify/ui-core';
 import { Logger } from '@aws-amplify/core';
 import { interpret } from 'xstate';
@@ -13,7 +13,7 @@ const logger = new Logger('StateHachine');
  * and custom components passed by the user.
  */
 @Injectable({
-  providedIn: 'root' // ensure we have a singleton service
+  providedIn: 'root', // ensure we have a singleton service
 })
 export class StateMachineService {
   private _authState: AuthMachineState;
@@ -22,8 +22,8 @@ export class StateMachineService {
 
   public get services() {
     return {
-      submit: formData =>
-        this._authService.send({ type: 'SUBMIT', data: formData })
+      submit: (formData) =>
+        this._authService.send({ type: 'SUBMIT', data: formData }),
     } as const;
   }
   public set authState(authState: AuthMachineState) {
@@ -44,7 +44,7 @@ export class StateMachineService {
 
   constructor() {
     this._authService = interpret(authMachine, { devTools: true })
-      .onTransition(state => {
+      .onTransition((state) => {
         logger.log('transitioned to', state, this._authService);
         const user = state.context?.user;
         if (user) this._user = user;
diff --git a/packages/angular/projects/ui-angular/src/lib/ui-angular.module.ts b/packages/angular/projects/ui-angular/src/lib/ui-angular.module.ts
index f2146b5a182..9e4f6704838 100644
--- a/packages/angular/projects/ui-angular/src/lib/ui-angular.module.ts
+++ b/packages/angular/projects/ui-angular/src/lib/ui-angular.module.ts
@@ -21,7 +21,7 @@ import { AmplifyConfirmSignUpComponent } from './components/amplify-confirm-sign
     AmplifyInputComponent,
     AmplifyValidationErrorComponent,
     AmplifyOverrideDirective,
-    AmplifyConfirmSignUpComponent
+    AmplifyConfirmSignUpComponent,
   ],
   imports: [CommonModule, ReactiveFormsModule],
   exports: [
@@ -31,7 +31,7 @@ import { AmplifyConfirmSignUpComponent } from './components/amplify-confirm-sign
     AmplifyContextProviderComponent,
     AmplifyInputComponent,
     AmplifyValidationErrorComponent,
-    AmplifyOverrideDirective
-  ]
+    AmplifyOverrideDirective,
+  ],
 })
 export class UiAngularModule {}
diff --git a/packages/angular/projects/ui-angular/src/test.ts b/packages/angular/projects/ui-angular/src/test.ts
index 303b32a220b..a3e49a06513 100644
--- a/packages/angular/projects/ui-angular/src/test.ts
+++ b/packages/angular/projects/ui-angular/src/test.ts
@@ -5,11 +5,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;
   };
diff --git a/packages/core/.eslintrc.js b/packages/core/.eslintrc.js
index 6ad274181ec..5e67833ac6a 100644
--- a/packages/core/.eslintrc.js
+++ b/packages/core/.eslintrc.js
@@ -1,18 +1,18 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
   },
   extends: ["eslint:recommended"],
   parser: "babel-eslint",
   parserOptions: {
     ecmaVersion: 2020,
     sourceType: "module",
-    allowImportExportEverywhere: true
+    allowImportExportEverywhere: true,
   },
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-undef": "off"
-  }
+    "no-undef": "off",
+  },
 };
diff --git a/packages/core/src/validators/index.ts b/packages/core/src/validators/index.ts
index 89ed78e1f95..99475ab4fb2 100644
--- a/packages/core/src/validators/index.ts
+++ b/packages/core/src/validators/index.ts
@@ -22,7 +22,7 @@ export const minLength: (fieldName: string, minLength: number) => Validator = (
   fieldName,
   minLength = 4
 ) => {
-  return formData => {
+  return (formData) => {
     const fieldValue: string = formData[fieldName];
     if (fieldValue.length < minLength) {
       return {
@@ -38,7 +38,7 @@ export const runValidators = async (
   validators: Validator[]
 ) => {
   const errors = await Promise.all(
-    validators.map(validator => validator(formData))
+    validators.map((validator) => validator(formData))
   );
   const mergedError = merge({}, ...errors);
 
diff --git a/packages/e2e/README.md b/packages/e2e/README.md
index bbe93bebe4a..ffedfc5c06f 100644
--- a/packages/e2e/README.md
+++ b/packages/e2e/README.md
@@ -1,13 +1,13 @@
-*****This README is still in progress*
+**\***This README is still in progress\*
 
 # Testing E2E with Cypress
 
 ### Making new tests
 
-* Navigate to `./cypress/integration/components/<whatever-component-you-want>`
-* Make a new `.feature` file for your test suite
-  * You can follow the example of one of the other existing `.feature` files
-* Create a new folder following the naming convention of the `.feature` you made, and inside that folder, make a `.steps.ts` file with the same name. Then, write your Cypress tests in that file.
-* Make sure you have the `examples/next` app running on `localhost:3000`, as Cypress will look to that port to test against
-* From this project directory, run `yarn dev` to open Cypress. Then, choose which test to run in the UI.
-* Cypress will automatically re-run tests every time you make an edit to the test file.
+- Navigate to `./cypress/integration/components/<whatever-component-you-want>`
+- Make a new `.feature` file for your test suite
+  - You can follow the example of one of the other existing `.feature` files
+- Create a new folder following the naming convention of the `.feature` you made, and inside that folder, make a `.steps.ts` file with the same name. Then, write your Cypress tests in that file.
+- Make sure you have the `examples/next` app running on `localhost:3000`, as Cypress will look to that port to test against
+- From this project directory, run `yarn dev` to open Cypress. Then, choose which test to run in the UI.
+- Cypress will automatically re-run tests every time you make an edit to the test file.
diff --git a/packages/e2e/cypress/integration/ui/components/authenticator/sign-up/sign-up.steps.ts b/packages/e2e/cypress/integration/ui/components/authenticator/sign-up/sign-up.steps.ts
index 4c7224f457d..d079210a56e 100644
--- a/packages/e2e/cypress/integration/ui/components/authenticator/sign-up/sign-up.steps.ts
+++ b/packages/e2e/cypress/integration/ui/components/authenticator/sign-up/sign-up.steps.ts
@@ -4,11 +4,11 @@ const now = Date.now();
 const randomNumber = window.crypto.getRandomValues(new Uint32Array(1))[0];
 const password = `test-${randomNumber}`;
 
-Given("I'm running the example {string}", url => {
+Given("I'm running the example {string}", (url) => {
   cy.visit(url);
 });
 
-And("I click {string}", text => {
+And("I click {string}", (text) => {
   cy.findByText(text).click();
 });
 
@@ -24,11 +24,11 @@ And("I type a new confirm password", () => {
   cy.findByLabelText(/^confirm password$/i).type(`${password}`);
 });
 
-And("I type the email {string}", email => {
+And("I type the email {string}", (email) => {
   cy.findByLabelText("Email address").type(email);
 });
 
-And("I type the phone number {string}", phone => {
+And("I type the phone number {string}", (phone) => {
   cy.findByLabelText("Phone number").type(phone);
 });
 
diff --git a/packages/e2e/cypress/support/index.js b/packages/e2e/cypress/support/index.js
index d68db96df26..d076cec9fd3 100644
--- a/packages/e2e/cypress/support/index.js
+++ b/packages/e2e/cypress/support/index.js
@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
diff --git a/packages/flutter/example/amplify_authenticator_example/amplify/README.md b/packages/flutter/example/amplify_authenticator_example/amplify/README.md
index 7c0a9e285fa..42ce84e7f74 100644
--- a/packages/flutter/example/amplify_authenticator_example/amplify/README.md
+++ b/packages/flutter/example/amplify_authenticator_example/amplify/README.md
@@ -1,7 +1,9 @@
 # Getting Started with Amplify CLI
+
 This directory was generated by [Amplify CLI](https://docs.amplify.aws/cli).
 
 Helpful resources:
+
 - Amplify documentation: https://docs.amplify.aws
 - Amplify CLI documentation: https://docs.amplify.aws/cli
 - More details on this folder & generated files: https://docs.amplify.aws/cli/reference/files
diff --git a/packages/flutter/example/amplify_authenticator_example/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md b/packages/flutter/example/amplify_authenticator_example/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md
index 89c2725b70f..b5b843ad3b8 100644
--- a/packages/flutter/example/amplify_authenticator_example/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md
+++ b/packages/flutter/example/amplify_authenticator_example/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md
@@ -2,4 +2,4 @@
 
 You can customize the launch screen with your own desired assets by replacing the image files in this directory.
 
-You can also do it by opening your Flutter project's Xcode project with `open ios/Runner.xcworkspace`, selecting `Runner/Assets.xcassets` in the Project Navigator and dropping in the desired images.
\ No newline at end of file
+You can also do it by opening your Flutter project's Xcode project with `open ios/Runner.xcworkspace`, selecting `Runner/Assets.xcassets` in the Project Navigator and dropping in the desired images.
diff --git a/packages/flutter/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md b/packages/flutter/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md
index 89c2725b70f..b5b843ad3b8 100644
--- a/packages/flutter/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md
+++ b/packages/flutter/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md
@@ -2,4 +2,4 @@
 
 You can customize the launch screen with your own desired assets by replacing the image files in this directory.
 
-You can also do it by opening your Flutter project's Xcode project with `open ios/Runner.xcworkspace`, selecting `Runner/Assets.xcassets` in the Project Navigator and dropping in the desired images.
\ No newline at end of file
+You can also do it by opening your Flutter project's Xcode project with `open ios/Runner.xcworkspace`, selecting `Runner/Assets.xcassets` in the Project Navigator and dropping in the desired images.
diff --git a/packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx b/packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx
index 4edf2561564..80919ddded3 100644
--- a/packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx
+++ b/packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx
@@ -37,7 +37,7 @@ export const ConfirmSignIn = (): JSX.Element => {
     <Form
       data-amplify-authenticator-confirmsignin=""
       method="post"
-      onSubmit={event => {
+      onSubmit={(event) => {
         event.preventDefault();
 
         const formData = new FormData(event.target);
diff --git a/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx b/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx
index 69123253a70..18810cc1f5d 100644
--- a/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx
+++ b/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx
@@ -42,7 +42,7 @@ export function ConfirmSignUp() {
     <Form
       data-amplify-authenticator-confirmsignup=""
       method="post"
-      onSubmit={event => {
+      onSubmit={(event) => {
         event.preventDefault();
 
         const formData = new FormData(event.target);
diff --git a/packages/react/src/components/Authenticator/SetupTOTP/SetupTOTP.tsx b/packages/react/src/components/Authenticator/SetupTOTP/SetupTOTP.tsx
index 2e90acdc5c6..9b09da297d9 100644
--- a/packages/react/src/components/Authenticator/SetupTOTP/SetupTOTP.tsx
+++ b/packages/react/src/components/Authenticator/SetupTOTP/SetupTOTP.tsx
@@ -58,7 +58,7 @@ export const SetupTOTP = (): JSX.Element => {
     <Form
       data-amplify-authenticator-setup-totp=""
       method="post"
-      onSubmit={event => {
+      onSubmit={(event) => {
         event.preventDefault();
 
         const formData = new FormData(event.target);
diff --git a/packages/react/src/components/Authenticator/SignIn/SignIn.tsx b/packages/react/src/components/Authenticator/SignIn/SignIn.tsx
index 59f03d5e82e..3f56c1f5509 100644
--- a/packages/react/src/components/Authenticator/SignIn/SignIn.tsx
+++ b/packages/react/src/components/Authenticator/SignIn/SignIn.tsx
@@ -26,7 +26,7 @@ export function SignIn() {
     <Form
       data-amplify-authenticator-signin=""
       method="post"
-      onSubmit={event => {
+      onSubmit={(event) => {
         event.preventDefault();
 
         const formData = new FormData(event.target);
diff --git a/packages/react/src/components/Authenticator/SignUp/SignUp.tsx b/packages/react/src/components/Authenticator/SignUp/SignUp.tsx
index ad4bbfd5b50..235b4eb4361 100644
--- a/packages/react/src/components/Authenticator/SignUp/SignUp.tsx
+++ b/packages/react/src/components/Authenticator/SignUp/SignUp.tsx
@@ -35,7 +35,7 @@ export function SignUp() {
     <Form
       data-amplify-authenticator-signup=""
       method="post"
-      onSubmit={event => {
+      onSubmit={(event) => {
         event.preventDefault();
 
         const formData = new FormData(event.target);
@@ -57,7 +57,7 @@ export function SignUp() {
         />
         <SignUp.PasswordControl />
         <SignUp.ConfirmPasswordControl />
-        {secondaryAliases.map(alias => (
+        {secondaryAliases.map((alias) => (
           <SignUp.AliasControl
             key={alias}
             label={UserNameAliasNames[alias].name}
diff --git a/packages/react/src/components/Authenticator/index.tsx b/packages/react/src/components/Authenticator/index.tsx
index 28acb31e130..e449732c39e 100644
--- a/packages/react/src/components/Authenticator/index.tsx
+++ b/packages/react/src/components/Authenticator/index.tsx
@@ -12,7 +12,7 @@ import { SignUp } from "./SignUp";
 
 export function Authenticator({
   className = null,
-  children = context => null,
+  children = (context) => null,
 }) {
   const service = useInterpret(authMachine, {
     devTools: process.env.NODE_ENV === "development",
diff --git a/packages/react/src/components/Authenticator/shared/UserNameAlias.tsx b/packages/react/src/components/Authenticator/shared/UserNameAlias.tsx
index ff268f7cfd1..c1796020f81 100644
--- a/packages/react/src/components/Authenticator/shared/UserNameAlias.tsx
+++ b/packages/react/src/components/Authenticator/shared/UserNameAlias.tsx
@@ -17,7 +17,7 @@ export function UserNameAlias(props: UserNameAliasProps) {
   let type = "text";
   const name = loginMechanisms
     .map(
-      v => UserNameAliasNames[v]?.name ?? UserNameAliasNames["username"].name
+      (v) => UserNameAliasNames[v]?.name ?? UserNameAliasNames["username"].name
     )
     .join(" or ");
 
diff --git a/packages/react/src/primitives/Divider/Divider.tsx b/packages/react/src/primitives/Divider/Divider.tsx
index ef3a3494dfc..4d581e92869 100644
--- a/packages/react/src/primitives/Divider/Divider.tsx
+++ b/packages/react/src/primitives/Divider/Divider.tsx
@@ -4,7 +4,7 @@ import { ComponentClassNames } from "../shared";
 import { DividerProps } from "../types";
 import { View } from "../View";
 
-export const Divider: React.FC<DividerProps> = props => {
+export const Divider: React.FC<DividerProps> = (props) => {
   const {
     className,
     orientation = "horizontal",
diff --git a/packages/react/src/primitives/Divider/index.ts b/packages/react/src/primitives/Divider/index.ts
index 1f84888dc70..dde73a62ccb 100644
--- a/packages/react/src/primitives/Divider/index.ts
+++ b/packages/react/src/primitives/Divider/index.ts
@@ -1 +1 @@
-export * from './Divider';
+export * from "./Divider";
diff --git a/packages/react/src/primitives/Flex/Flex.tsx b/packages/react/src/primitives/Flex/Flex.tsx
index 7b7921797f3..ebccd37fc22 100644
--- a/packages/react/src/primitives/Flex/Flex.tsx
+++ b/packages/react/src/primitives/Flex/Flex.tsx
@@ -5,10 +5,7 @@ import { FlexProps } from "../types";
 import { View } from "../View";
 
 export const Flex: React.FC<FlexProps> = ({ className, children, ...rest }) => (
-  <View
-    className={classNames(ComponentClassNames.Flex, className)}
-    {...rest}
-  >
+  <View className={classNames(ComponentClassNames.Flex, className)} {...rest}>
     {children}
   </View>
 );
diff --git a/packages/react/src/primitives/Image/Image.tsx b/packages/react/src/primitives/Image/Image.tsx
index 42fd1735192..78965481ba1 100644
--- a/packages/react/src/primitives/Image/Image.tsx
+++ b/packages/react/src/primitives/Image/Image.tsx
@@ -3,6 +3,6 @@ import { ComponentClassNames } from "../shared";
 import { ImageProps } from "../types";
 import { View } from "../View";
 
-export const Image: React.FC<ImageProps> = props => (
+export const Image: React.FC<ImageProps> = (props) => (
   <View as="img" className={ComponentClassNames.Image} {...props} />
 );
diff --git a/packages/react/src/primitives/Image/index.ts b/packages/react/src/primitives/Image/index.ts
index 4bbac90149c..321f81e82aa 100644
--- a/packages/react/src/primitives/Image/index.ts
+++ b/packages/react/src/primitives/Image/index.ts
@@ -1 +1 @@
-export * from './Image';
+export * from "./Image";
diff --git a/packages/react/src/primitives/Text/Text.tsx b/packages/react/src/primitives/Text/Text.tsx
index 670024976fb..fe9ba17e279 100644
--- a/packages/react/src/primitives/Text/Text.tsx
+++ b/packages/react/src/primitives/Text/Text.tsx
@@ -4,7 +4,7 @@ import { ComponentClassNames } from "../shared/constants";
 import { TextProps } from "../types/text";
 import { View } from "@aws-amplify/ui-react";
 
-export const Text: React.FC<TextProps> = props => {
+export const Text: React.FC<TextProps> = (props) => {
   const { className, children, id, isTruncated, variant, ...rest } = props;
   return (
     <View
diff --git a/packages/react/src/primitives/View/View.tsx b/packages/react/src/primitives/View/View.tsx
index ab8d6bddb2d..9cfd7707e40 100644
--- a/packages/react/src/primitives/View/View.tsx
+++ b/packages/react/src/primitives/View/View.tsx
@@ -4,7 +4,7 @@ import { ComponentClassNames } from "../shared/constants";
 import { convertStylePropsToStyleObj, getNonStyleProps } from "../shared/utils";
 import { ViewProps } from "../types/index";
 
-export const View: React.FC<ViewProps> = props => {
+export const View: React.FC<ViewProps> = (props) => {
   const {
     as: asElementTag,
     className,
diff --git a/packages/react/src/primitives/shared/__tests__/utils.test.tsx b/packages/react/src/primitives/shared/__tests__/utils.test.tsx
index 9918e1b9313..11a56663577 100644
--- a/packages/react/src/primitives/shared/__tests__/utils.test.tsx
+++ b/packages/react/src/primitives/shared/__tests__/utils.test.tsx
@@ -25,7 +25,7 @@ const props: ViewProps = {
 describe("convertStylePropsToStyleObj: ", () => {
   it("should convert style props to a style object", () => {
     const style = convertStylePropsToStyleObj(props);
-    Object.keys(ComponentPropsToStylePropsMap).forEach(prop => {
+    Object.keys(ComponentPropsToStylePropsMap).forEach((prop) => {
       expect(style[prop]).toBe(props[prop]);
     });
     expect(style["as"]).toBeUndefined();
diff --git a/packages/react/src/primitives/shared/utils.ts b/packages/react/src/primitives/shared/utils.ts
index a99025d3ed0..5a1f32ff5c9 100644
--- a/packages/react/src/primitives/shared/utils.ts
+++ b/packages/react/src/primitives/shared/utils.ts
@@ -1,6 +1,11 @@
-import { ComponentPropsToStylePropsMap, AllStyleProps, ComponentPropToStyleProp } from "../types/index";
+import {
+  ComponentPropsToStylePropsMap,
+  AllStyleProps,
+  ComponentPropToStyleProp,
+} from "../types/index";
 
-export const strHasLength = (str: unknown): str is string => typeof str === 'string' && str.length > 0;
+export const strHasLength = (str: unknown): str is string =>
+  typeof str === "string" && str.length > 0;
 
 /**
  * Convert style props to CSS variables for React style prop
@@ -9,14 +14,18 @@ export const strHasLength = (str: unknown): str is string => typeof str === 'str
  */
 export const convertStylePropsToStyleObj = (props: AllStyleProps) => {
   let style: React.CSSProperties = {};
-  (Object.keys(ComponentPropsToStylePropsMap) as Array<keyof ComponentPropToStyleProp>).forEach((stylePropKey) => {
+  (
+    Object.keys(ComponentPropsToStylePropsMap) as Array<
+      keyof ComponentPropToStyleProp
+    >
+  ).forEach((stylePropKey) => {
     const stylePropValue = props[stylePropKey];
     if (
       stylePropValue != null &&
-      (typeof stylePropValue !== 'string' || strHasLength(stylePropValue))
+      (typeof stylePropValue !== "string" || strHasLength(stylePropValue))
     ) {
       const reactStyleProp = ComponentPropsToStylePropsMap[stylePropKey];
-      style = {...style, [reactStyleProp]: stylePropValue };
+      style = { ...style, [reactStyleProp]: stylePropValue };
     }
   });
   return style;
@@ -29,7 +38,7 @@ export const convertStylePropsToStyleObj = (props: AllStyleProps) => {
  */
 export const getNonStyleProps = (props: {}) => {
   const nonStyleProps = {};
-  Object.keys(props).forEach(propKey => {
+  Object.keys(props).forEach((propKey) => {
     if (!(propKey in ComponentPropsToStylePropsMap)) {
       nonStyleProps[propKey] = props[propKey];
     }
diff --git a/packages/react/src/primitives/types/divider.ts b/packages/react/src/primitives/types/divider.ts
index 19509930700..052fe3b1bfe 100644
--- a/packages/react/src/primitives/types/divider.ts
+++ b/packages/react/src/primitives/types/divider.ts
@@ -18,4 +18,7 @@ export interface DividerOptions {
   size?: DividerSize;
 }
 
-export interface DividerProps extends DividerOptions, BaseComponentProps, BaseStyleProps { }
+export interface DividerProps
+  extends DividerOptions,
+    BaseComponentProps,
+    BaseStyleProps {}
diff --git a/packages/react/src/primitives/types/flex.ts b/packages/react/src/primitives/types/flex.ts
index 512fdc2ef2c..6a16e9cbe59 100644
--- a/packages/react/src/primitives/types/flex.ts
+++ b/packages/react/src/primitives/types/flex.ts
@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import { Property } from "csstype";
 
 import { BaseComponentProps } from "./base";
 
@@ -9,8 +9,8 @@ export interface FlexStyleProps {
   alignItems?: Property.AlignItems;
 
   /**
-  * Sets the distribution of space between and around content items
-  */
+   * Sets the distribution of space between and around content items
+   */
   alignContent?: Property.AlignContent;
 
   /**
@@ -40,4 +40,4 @@ export interface FlexStyleProps {
   wrap?: Property.FlexWrap;
 }
 
-export interface FlexProps extends FlexStyleProps, BaseComponentProps { }
+export interface FlexProps extends FlexStyleProps, BaseComponentProps {}
diff --git a/packages/react/src/primitives/types/image.ts b/packages/react/src/primitives/types/image.ts
index abf1e044e05..fc7da1b609f 100644
--- a/packages/react/src/primitives/types/image.ts
+++ b/packages/react/src/primitives/types/image.ts
@@ -53,4 +53,7 @@ export interface ImageOptions extends ImageStyleProps {
   onError?(error: string | React.SyntheticEvent<HTMLImageElement, Event>): void;
 }
 
-export interface ImageProps extends ImageOptions, BaseComponentProps, BaseStyleProps { }
+export interface ImageProps
+  extends ImageOptions,
+    BaseComponentProps,
+    BaseStyleProps {}
diff --git a/packages/react/src/primitives/types/index.ts b/packages/react/src/primitives/types/index.ts
index d6cc0137f8f..5a2339cc79f 100644
--- a/packages/react/src/primitives/types/index.ts
+++ b/packages/react/src/primitives/types/index.ts
@@ -1,7 +1,7 @@
-export * from './base';
-export * from './button';
+export * from "./base";
+export * from "./button";
 export * from "./flex";
-export * from './divider';
-export * from './image';
-export * from './view';
-export * from './style';
+export * from "./divider";
+export * from "./image";
+export * from "./view";
+export * from "./style";
diff --git a/packages/react/src/primitives/types/style.ts b/packages/react/src/primitives/types/style.ts
index 25557da3cca..1522bf2e81d 100644
--- a/packages/react/src/primitives/types/style.ts
+++ b/packages/react/src/primitives/types/style.ts
@@ -24,11 +24,14 @@ export interface BaseStyleProps {
   width?: Property.Width;
 }
 
-export interface AllStyleProps extends BaseStyleProps, ImageStyleProps, FlexStyleProps { }
+export interface AllStyleProps
+  extends BaseStyleProps,
+    ImageStyleProps,
+    FlexStyleProps {}
 
 export type ComponentPropToStyleProp = {
-  [key in keyof AllStyleProps]: keyof React.CSSProperties
-}
+  [key in keyof AllStyleProps]: keyof React.CSSProperties;
+};
 
 /**
  * Maps from component style props to React `style` props
@@ -57,10 +60,10 @@ export const ComponentPropsToStylePropsMap: ComponentPropToStyleProp = {
   minHeight: "minHeight",
   minWidth: "minWidth",
   objectFit: "objectFit",
-  objectPosition: 'objectPosition',
+  objectPosition: "objectPosition",
   opacity: "opacity",
   padding: "padding",
   textDecoration: "textDecoration",
   width: "width",
   wrap: "flexWrap",
-}
+};
diff --git a/packages/react/src/primitives/types/view.ts b/packages/react/src/primitives/types/view.ts
index f24b9a474dd..46923d1cea0 100644
--- a/packages/react/src/primitives/types/view.ts
+++ b/packages/react/src/primitives/types/view.ts
@@ -1,10 +1,13 @@
 import { AriaProps, BaseComponentProps } from "./base";
 import { BaseStyleProps } from "./style";
-import { Property } from 'csstype';
+import { Property } from "csstype";
 
 export type ViewAsHTMLElementTypes = keyof JSX.IntrinsicElements;
 
-export interface ViewProps extends BaseComponentProps, BaseStyleProps, AriaProps {
+export interface ViewProps
+  extends BaseComponentProps,
+    BaseStyleProps,
+    AriaProps {
   as?: ViewAsHTMLElementTypes;
 
   role?: string;
diff --git a/packages/vue/.eslintrc.js b/packages/vue/.eslintrc.js
index 5a32afb5c67..e0f051eab9a 100644
--- a/packages/vue/.eslintrc.js
+++ b/packages/vue/.eslintrc.js
@@ -1,21 +1,21 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
   },
   extends: [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/typescript/recommended'
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/typescript/recommended",
   ],
   parserOptions: {
     ecmaVersion: 2020,
     allowImportExportEverywhere: true,
-    sourceType: 'module'
+    sourceType: "module",
   },
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    '@typescript-eslint/ban-ts-comment': 'off'
-  }
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+  },
 };
diff --git a/packages/vue/src/composables/useAuth.ts b/packages/vue/src/composables/useAuth.ts
index 93878f64103..a2564f81cb6 100644
--- a/packages/vue/src/composables/useAuth.ts
+++ b/packages/vue/src/composables/useAuth.ts
@@ -1,7 +1,7 @@
-import { useService } from '@xstate/vue';
-import { authService } from '@aws-amplify/ui-core';
-import { Ref } from 'vue';
-import { PayloadSender, EventObject } from 'xstate';
+import { useService } from "@xstate/vue";
+import { authService } from "@aws-amplify/ui-core";
+import { Ref } from "vue";
+import { PayloadSender, EventObject } from "xstate";
 
 export const useAuth = (): useAuthInterface => {
   return useService(authService);
diff --git a/postcss.config.js b/postcss.config.js
index dce53663e15..4a15258b06e 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -3,5 +3,5 @@ module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
-  }
-}
+  },
+};
diff --git a/vue-docs/.eslintrc.js b/vue-docs/.eslintrc.js
index fab0507f968..7efb2ef3579 100644
--- a/vue-docs/.eslintrc.js
+++ b/vue-docs/.eslintrc.js
@@ -1,23 +1,23 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
   },
   extends: [
     "plugin:vue/vue3-essential",
     "eslint:recommended",
-    "@vue/typescript/recommended"
+    "@vue/typescript/recommended",
   ],
   parserOptions: {
     ecmaVersion: 2020,
     sourceType: "module",
-    allowImportExportEverywhere: true
+    allowImportExportEverywhere: true,
   },
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "no-useless-escape": "off",
-    "no-undef": "off"
-  }
+    "no-undef": "off",
+  },
 };
diff --git a/vue-docs/README.md b/vue-docs/README.md
index ba8fa4b5983..dcb86a27d6e 100644
--- a/vue-docs/README.md
+++ b/vue-docs/README.md
@@ -1,24 +1,29 @@
 # vue-docs
 
 ## Project setup
+
 ```
 npm install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
 npm run serve
 ```
 
 ### Compiles and minifies for production
+
 ```
 npm run build
 ```
 
 ### Lints and fixes files
+
 ```
 npm run lint
 ```
 
 ### Customize configuration
+
 See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/vue-docs/babel.config.js b/vue-docs/babel.config.js
index e9558405fdc..162a3ea97c2 100644
--- a/vue-docs/babel.config.js
+++ b/vue-docs/babel.config.js
@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
+  presets: ["@vue/cli-plugin-babel/preset"],
+};
diff --git a/vue-docs/postcss.config.js b/vue-docs/postcss.config.js
index dce53663e15..4a15258b06e 100644
--- a/vue-docs/postcss.config.js
+++ b/vue-docs/postcss.config.js
@@ -3,5 +3,5 @@ module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
-  }
-}
+  },
+};
diff --git a/vue-docs/src/shims-vue.d.ts b/vue-docs/src/shims-vue.d.ts
index 13d3bc4606e..55e0ca6b82d 100644
--- a/vue-docs/src/shims-vue.d.ts
+++ b/vue-docs/src/shims-vue.d.ts
@@ -1,7 +1,6 @@
 /* eslint-disable */
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }
-
diff --git a/vue-docs/src/utils/code-examples.js b/vue-docs/src/utils/code-examples.js
index 4d2cf1ef439..40a0a9eb716 100644
--- a/vue-docs/src/utils/code-examples.js
+++ b/vue-docs/src/utils/code-examples.js
@@ -245,5 +245,5 @@ export {
   eventTable,
   exampleSignIn,
   propTable,
-  customPassword
+  customPassword,
 };
diff --git a/vue-docs/tailwind.config.js b/vue-docs/tailwind.config.js
index ec39f7e536c..eb924babf4b 100644
--- a/vue-docs/tailwind.config.js
+++ b/vue-docs/tailwind.config.js
@@ -2,10 +2,10 @@ module.exports = {
   purge: [],
   darkMode: false, // or 'media' or 'class'
   theme: {
-    extend: {}
+    extend: {},
   },
   variants: {
-    extend: {}
+    extend: {},
   },
-  plugins: []
+  plugins: [],
 };
diff --git a/yarn.lock b/yarn.lock
index 928a1121324..ed63d3ca8e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7736,7 +7736,7 @@ commander@^6.0.0, commander@^6.2.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
   integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
 
-commander@^7.0.0, commander@^7.1.0:
+commander@^7.0.0, commander@^7.1.0, commander@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
@@ -10575,6 +10575,11 @@ get-orientation@1.1.2:
   dependencies:
     stream-parser "^0.3.1"
 
+get-own-enumerable-property-symbols@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
+  integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
+
 get-package-type@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
@@ -11337,6 +11342,11 @@ humanize-ms@^1.2.1:
   dependencies:
     ms "^2.0.0"
 
+husky@>=6:
+  version "7.0.1"
+  resolved "https://registry.npmjs.org/husky/-/husky-7.0.1.tgz#579f4180b5da4520263e8713cc832942b48e1f1c"
+  integrity sha512-gceRaITVZ+cJH9sNHqx5tFwbzlLCVxtVZcusME8JYQ8Edy5mpGDOqD8QBCdMhpyo9a+JXddnujQ4rpY2Ff9SJA==
+
 hygen@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/hygen/-/hygen-6.1.0.tgz#0428edb32aead724d040354fa03585a858dda509"
@@ -11969,6 +11979,11 @@ is-number@^7.0.0:
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
+is-obj@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+  integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=
+
 is-obj@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
@@ -12054,6 +12069,11 @@ is-regex@^1.0.4, is-regex@^1.1.3:
     call-bind "^1.0.2"
     has-symbols "^1.0.2"
 
+is-regexp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
+  integrity sha1-/S2INUXEa6xaYz57mgnof6LLUGk=
+
 is-resolvable@^1.0.0, is-resolvable@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
@@ -13259,7 +13279,28 @@ linkify-it@^3.0.1:
   dependencies:
     uc.micro "^1.0.1"
 
-listr2@^3.8.3:
+lint-staged@>=10:
+  version "11.0.1"
+  resolved "https://registry.npmjs.org/lint-staged/-/lint-staged-11.0.1.tgz#1b8ae8ed5a52ed87252db95fe008c2618c85f55a"
+  integrity sha512-RkTA1ulE6jAGFskxpGAwxfVRXjHp7D9gFg/+KMARUWMPiVFP0t28Em2u0gL8sA0w3/ck3TC57F2v2RNeQ5XPnw==
+  dependencies:
+    chalk "^4.1.1"
+    cli-truncate "^2.1.0"
+    commander "^7.2.0"
+    cosmiconfig "^7.0.0"
+    debug "^4.3.1"
+    dedent "^0.7.0"
+    enquirer "^2.3.6"
+    execa "^5.0.0"
+    listr2 "^3.8.2"
+    log-symbols "^4.1.0"
+    micromatch "^4.0.4"
+    normalize-path "^3.0.0"
+    please-upgrade-node "^3.2.0"
+    string-argv "0.3.1"
+    stringify-object "^3.3.0"
+
+listr2@^3.8.2, listr2@^3.8.3:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/listr2/-/listr2-3.10.0.tgz#58105a53ed7fa1430d1b738c6055ef7bb006160f"
   integrity sha512-eP40ZHihu70sSmqFNbNy2NL1YwImmlMmPh9WO5sLmPDleurMHt3n+SwEWNu2kzKScexZnkyFtc1VI0z/TGlmpw==
@@ -15633,6 +15674,13 @@ platform@1.3.6:
   resolved "https://registry.yarnpkg.com/platform/-/platform-1.3.6.tgz#48b4ce983164b209c2d45a107adb31f473a6e7a7"
   integrity sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==
 
+please-upgrade-node@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"
+  integrity sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==
+  dependencies:
+    semver-compare "^1.0.0"
+
 pngjs@^3.3.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
@@ -16296,6 +16344,11 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
+prettier@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d"
+  integrity sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==
+
 prettier@^1.18.2:
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
@@ -17532,6 +17585,11 @@ selfsigned@^1.10.8:
   dependencies:
     node-forge "^0.10.0"
 
+semver-compare@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
+  integrity sha1-De4hahyUGrN+nvsXiPavxf9VN/w=
+
 semver-dsl@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/semver-dsl/-/semver-dsl-1.0.1.tgz#d3678de5555e8a61f629eed025366ae5f27340a0"
@@ -18340,6 +18398,11 @@ string-argv@0.0.2:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.0.2.tgz#dac30408690c21f3c3630a3ff3a05877bdcbd736"
   integrity sha1-2sMECGkMIfPDYwo/86BYd73L1zY=
 
+string-argv@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
+  integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==
+
 string-hash@1.1.3, string-hash@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
@@ -18441,6 +18504,15 @@ stringify-entities@^3.0.1, stringify-entities@^3.1.0:
     character-entities-legacy "^1.0.0"
     xtend "^4.0.0"
 
+stringify-object@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
+  integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==
+  dependencies:
+    get-own-enumerable-property-symbols "^3.0.0"
+    is-obj "^1.0.1"
+    is-regexp "^1.0.0"
+
 strip-ansi@6.0.0, strip-ansi@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"