chore: adding prettier workflow to github actions (#29)

initial prettier run

fixing workflow to only run on push

fixing angular.json

fixing ubuntu version

updating prettier version

.github/workflows/prettier.yml

@@ -0,0 +1,11 @@
+name: Run Prettier
+on:
+  push:
+jobs:
+  lint:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Run Prettier
+        run: npm install -g prettier && npx prettier --check .

CODE_OF_CONDUCT.md

@@ -125,4 +125,4 @@ enforcement ladder](https://github.com/mozilla/diversity).
 
 For answers to common questions about this code of conduct, see the FAQ at
 https://www.contributor-covenant.org/faq. Translations are available at
-https://www.contributor-covenant.org/translations.
+https://www.contributor-covenant.org/translations.

CONTRIBUTING.md

@@ -29,4 +29,4 @@ that you are force pushing changes.
 Additionally, we require commits to be atomic and squashed where needed.
 This will keep the git history clean on master. To squash commits use the `git rebase -i @~2` command to do an interactive
 rebase. This will allow you to merge multiple commits into one.
-To read up more on this please visit: [Git Tools Rewriting History](https://git-scm.com/book/en/v2/Git-Tools-Rewriting-History)
+To read up more on this please visit: [Git Tools Rewriting History](https://git-scm.com/book/en/v2/Git-Tools-Rewriting-History)

README.md

@@ -3,16 +3,19 @@
 ![Astral Accessibility](docs/astral.png)
 
 # Astral is in alpha
+
 Astral is currently in an alpha phase. You can use it today with much of its feature set implemented, but it's a few features shy, along with some general polishing away from a 1.x release.
 
 # Overview
+
 Astral Accessibility is an open source accessibility widget that can be easily embedded to any website. It provides a set of
 accessibility features that can be used by people with accessibility needs to improve their experience on the web. Read why we
 started this project [here](blue.verto.health/advancing-accessibility-with-astral/).
 
 [Click here](https://astral-accessibility.pages.dev/) for a demo!
 
 ## Features
+
 - Screen Reader (text to speech)
 - Contrast
 - Saturation
@@ -21,7 +24,9 @@ started this project [here](blue.verto.health/advancing-accessibility-with-astra
 - More to come!
 
 ## Usage
+
 Astral is built with Angular Elements. You can use it in your website in under 30 seconds. To add it, simply include the Javascript and initialize it:
+
 ```html
 <script src="https://astral-accessibility.pages.dev/main.js"></script>
 <script>
@@ -30,23 +35,33 @@ Astral is built with Angular Elements. You can use it in your website in under 3
 ```
 
 ## Development Setup
+
 1. Clone the repository
+
 ```
 git clone [email protected]:verto-health/astral-accessibility.git
 ```
+
 2. Install dependencies
+
 ```
 $ yarn install
 ```
+
 3. Run the development server and visit `http://localhost:8000`
+
 ```bash
 $ yarn run start:demo
 ```
+
 This will watch for changes and automatically reload when you make changes in both Angular and the demo app under `projects/demo`.
 
 ### Running E2E Tests With Cypress
+
 After running the steps above, you will have access to the Cypress test suite. To run Cypress locally, run the following command in your terminal
+
 ```
 $ yarn cypress open
 ```
+
 Choose E2E Testing, and select a browser to start running the Specs

angular.json

@@ -70,4 +70,4 @@
       }
     }
   }
-}
+}

cypress/support/commands.ts

@@ -10,61 +10,61 @@
 // ***********************************************
 
 // https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__wait-for-resource
-Cypress.Commands.add('waitForResource', (name, options = {}) => {
-  if (Cypress.browser.family === 'firefox') {
-    cy.log('Skip waitForResource in Firefox')
+Cypress.Commands.add("waitForResource", (name, options = {}) => {
+  if (Cypress.browser.family === "firefox") {
+    cy.log("Skip waitForResource in Firefox");
 
-    return
+    return;
   }
 
-  cy.log(`Waiting for resource ${name}`)
+  cy.log(`Waiting for resource ${name}`);
 
-  const log = false // let's not log inner commands
-  const timeout = options.timeout || Cypress.config('defaultCommandTimeout')
+  const log = false; // let's not log inner commands
+  const timeout = options.timeout || Cypress.config("defaultCommandTimeout");
 
   cy.window({ log }).then(
     // note that ".then" method has options first, callback second
     // https://on.cypress.io/then
     { log, timeout },
     (win) => {
       return new Cypress.Promise((resolve, reject) => {
-        let foundResource
+        let foundResource;
 
         // control how long we should try finding the resource
         // and if it is still not found. An explicit "reject"
         // allows us to show nice informative message
         setTimeout(() => {
           if (foundResource) {
             // nothing needs to be done, successfully found the resource
-            return
+            return;
           }
 
-          clearInterval(interval)
-          reject(new Error(`Timed out waiting for resource ${name}`))
-        }, timeout)
+          clearInterval(interval);
+          reject(new Error(`Timed out waiting for resource ${name}`));
+        }, timeout);
 
         const interval = setInterval(() => {
           foundResource = win.performance
-          .getEntriesByType('resource')
-          .find((item) => item.name.endsWith(name))
+            .getEntriesByType("resource")
+            .find((item) => item.name.endsWith(name));
 
           if (!foundResource) {
             // resource not found, will try again
-            return
+            return;
           }
 
-          clearInterval(interval)
+          clearInterval(interval);
           // because cy.log changes the subject, let's resolve the returned promise
           // with log + returned actual result
           resolve(
-            cy.log('✅ success').then(() => {
+            cy.log("✅ success").then(() => {
               // let's resolve with the found performance object
               // to allow tests to inspect it
-              return foundResource
-            })
-          )
-        }, 100)
-      })
-    }
-  )
-})
+              return foundResource;
+            }),
+          );
+        }, 100);
+      });
+    },
+  );
+});

cypress/support/component-index.html

@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <title>Components App</title>
   </head>
   <body>
     <div data-cy-root></div>
   </body>
-</html>
+</html>

cypress/support/component.ts

@@ -14,12 +14,12 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-import { mount } from 'cypress/angular'
+import { mount } from "cypress/angular";
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
@@ -28,12 +28,12 @@ import { mount } from 'cypress/angular'
 declare global {
   namespace Cypress {
     interface Chainable {
-      mount: typeof mount
+      mount: typeof mount;
     }
   }
 }
 
-Cypress.Commands.add('mount', mount)
+Cypress.Commands.add("mount", mount);
 
 // Example use:
-// cy.mount(MyComponent)
+// cy.mount(MyComponent)

cypress/support/e2e.ts

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')

package.json

@@ -46,8 +46,8 @@
     "ng-packagr": "^14.1.0",
     "ngx-build-plus": "14",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.2",
     "primeicons": "^6.0.1",
     "typescript": "~4.7.2"
   }
-}
+}

projects/astral-accessibility/README.md

@@ -5,7 +5,8 @@ This library was generated with [Angular CLI](https://github.com/angular/angular
 ## Code scaffolding
 
 Run `ng generate component component-name --project astral-accessibility` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project astral-accessibility`.
-> Note: Don't forget to add `--project astral-accessibility` or else it will be added to the default project in your `angular.json` file. 
+
+> Note: Don't forget to add `--project astral-accessibility` or else it will be added to the default project in your `angular.json` file.
 
 ## Build
 

projects/astral-accessibility/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,26 @@ 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/astral-accessibility'),
-      subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
+      dir: require("path").join(
+        __dirname,
+        "../../coverage/astral-accessibility",
+      ),
+      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,
   });
 };

projects/astral-accessibility/ng-package.json

@@ -1,10 +1,8 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../dist/astral-accessibility",
-  "assets": [
-    "./assets/*"
-  ],
+  "assets": ["./assets/*"],
   "lib": {
     "entryFile": "src/public-api.ts"
   }
-}
+}