Merge pull request #24 from pulibrary/i17-18

Add eslint, prettier and eslint-accessibility.

.circleci/config.yml

@@ -10,12 +10,15 @@ jobs:
       - checkout
       - node/install:
           install-yarn: true
-          node-version: '18.4'
+          node-version: "18.4"
       - node/install-packages:
           pkg-manager: yarn
       - run:
           command: yarn test
           name: Run yarn tests
+      - run:
+          name: Run eslint and prettier
+          command: yarn lint
 workflows:
   test_my_app:
     jobs:

.eslintrc

@@ -0,0 +1,19 @@
+{
+  "env": {
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:vue/vue3-recommended",
+    "plugin:vuejs-accessibility/recommended",
+    "prettier"
+  ],
+  "parser": "vue-eslint-parser",
+  "parserOptions": {
+    "parser": "@typescript-eslint/parser",
+    "sourceType": "module"
+  },
+  "rules": {
+    "vue/require-default-prop": "off"
+  }
+}

.github/ISSUE_TEMPLATE/accessibility.md

@@ -1,38 +1,32 @@
 ---
 name: Accessibility
 about: Report an accessibility issue
-title: ''
+title: ""
 labels: accessibility general
-assignees: ''
-
+assignees: ""
 ---
-### Steps to recreate
 
+### Steps to recreate
 
 ### URL
 
-
 ### Issues
 
-
 ### Severity
 
-
 ### WCAG Conformance level (A, AA, AAA)
 
-
 ### User impact
 
-
 ### Recommended fix
 
-
 ### Acceptance criteria
+
 - [ ] I can successfully use this feature with Voice Over in Safari.
 - [ ] I have checked this feature using one of the following browser extensions and confirmed that it does not add any level A or level AA issues:
-    * axe dev tools
-    * Lighthouse
-    * Wave
+  - axe dev tools
+  - Lighthouse
+  - Wave
 - [ ] ...
 
-### Notes
+### Notes

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,26 +1,29 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 ### Expected behavior
+
 A clear and concise description of what you expected to happen.
 
 ### Actual behavior
+
 Include screenshots, or links and browser version if relevant
 
 ### Steps to replicate
 
 ### Impact of this bug
+
 E.g. "I can't work until this is fixed" or "I have a workaround"
 
 ### Honeybadger link and code snippet, if applicable
 
 ```
+
 ```
 
-### Implementation notes, if any
+### Implementation notes, if any

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 ### User story
@@ -13,11 +12,11 @@ assignees: ''
 
 - [ ] I can successfully use this feature with Voice Over in Safari.
 - [ ] I have checked this feature using one of the following browser extensions and confirmed that it does not add any level A or level AA issues:
-    * axe dev tools
-    * Lighthouse
-    * Wave
+  - axe dev tools
+  - Lighthouse
+  - Wave
 - [ ] ...
 
 ### Concrete example
 
-### Implementation notes, if any
+### Implementation notes, if any

.github/ISSUE_TEMPLATE/maintenance_task.md

@@ -1,8 +1,7 @@
 ---
 name: Maintenance task
 about: Document some maintenance that needs to be done
-title: ''
+title: ""
 labels: maintenance
-assignees: ''
-
----
+assignees: ""
+---

.github/ISSUE_TEMPLATE/new_component.md

@@ -1,43 +1,46 @@
 ---
 name: Add a New Bento UI Component
 about: Add a New Search Result Component to UI
-title: 'Add [Name] Component to UI'
-labels: ''
-assignees: ''
-
+title: "Add [Name] Component to UI"
+labels: ""
+assignees: ""
 ---
 
 ## Description
+
 What the component displays
 
 ### All Search API Information
+
 What call you need to make to populate the component with results.
 
 ### Supporting Service Documentation
+
 Other Background Information.
 
 ### Labeling
-What heading should be used for the component. 
+
+What heading should be used for the component.
 
 ### Acceptance Criteria
 
 - [ ] Displays a heading
 - [ ] Display an icon next to the heading relevant to the component type (i.e a book for the catalog)
-- [ ] Displays up to three search results. 
+- [ ] Displays up to three search results.
 - [ ] Provides a link to see more results in the source user interface.
-- [ ] Displays the number of total results in the source interface. 
+- [ ] Displays the number of total results in the source interface.
 - [ ] Each Search Result Should display the following
-    * Title Field as a link to the record in source service
-    * Author or equivalent
-    * Format type or equivalent
-    * Icon relevant to format type
-    * Other Fields relevant to the component
+  - Title Field as a link to the record in source service
+  - Author or equivalent
+  - Format type or equivalent
+  - Icon relevant to format type
+  - Other Fields relevant to the component
 - [ ] I can successfully use this feature with Voice Over in Safari.
 - [ ] I have checked this feature using one of the following browser extensions and confirmed that it does not add any level A or level AA issues:
-    * axe dev tools
-    * Lighthouse
-    * Wave
-
+  - axe dev tools
+  - Lighthouse
+  - Wave
 
 ### Implementation Notes
-As Needed. 
+
+As Needed.

.prettierrc.json

@@ -0,0 +1 @@
+{}

README.md

@@ -1,7 +1,7 @@
 # Library All Search
 
 Front end for the Library's all search bento-style application. Client of
-https://github.com/pulibrary/allsearch_api. 
+https://github.com/pulibrary/allsearch_api.
 
 ## Dev environment
 
@@ -28,11 +28,14 @@ If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has a
 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
 
 ## Running tests
+
 ### From the command line
+
 - If you want to run the tests and have them immediate exit, run `yarn test --run`
 - If you want to run the tests in ['watch' mode](https://vitest.dev/guide/features.html#watch-mode) (automatically runs tests again when related files are changed), run `yarn test` or `yarn test --watch`
 
 ### Using the Vitest VSCode Plugin
+
 1. Click on the flask icon ('Testing') in the left panel
 1. Click the 'play' button in the left panel to run the tests
 1. Alternately, go to the file of the test you want to run and click the icon to the left of the test to re-run it. If you have not run the test previously, it will be an arrow, if you have run it, it will be a green check if it passed and a red x if it failed on the previous run.

package.json

@@ -7,16 +7,25 @@
     "dev": "vite",
     "build": "vue-tsc && vite build",
     "preview": "vite preview",
-    "test": "vitest"
+    "test": "vitest",
+    "lint": "eslint --fix --ext .js,.vue --ignore-path .gitignore --fix src",
+    "format": "prettier .  --write"
   },
   "dependencies": {
     "vue": "^3.3.4"
   },
   "devDependencies": {
+    "@typescript-eslint/parser": "^6.7.3",
     "@vitejs/plugin-vue": "^4.2.3",
+    "eslint": "^8.50.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "eslint-plugin-vuejs-accessibility": "^2.2.0",
+    "prettier": "^3.0.3",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
     "vitest": "^0.34.5",
+    "vue-eslint-parser": "^9.3.1",
     "vue-tsc": "^1.8.5"
   }
 }

src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
+import HelloWorld from "./components/HelloWorld.vue";
 </script>
 
 <template>

src/components/HelloWorld.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref } from "vue";
 
-defineProps<{ msg: string }>()
+defineProps<{ msg: string }>();
 
-const count = ref(0)
+const count = ref(0);
 </script>
 
 <template>

src/components/__tests__/sum.test.js

@@ -7,5 +7,5 @@ function sum(a, b) {
 }
 
 test("add 2 numbers", () => {
-  expect(sum(2,3)).toEqual(5);
+  expect(sum(2, 3)).toEqual(5);
 });

src/main.ts

@@ -1,5 +1,5 @@
-import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
+import { createApp } from "vue";
+import "./style.css";
+import App from "./App.vue";
 
-createApp(App).mount('#app')
+createApp(App).mount("#app");

vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
-})
+});