Karina/wmdp 33 linter typechecker (#6)

* yarn create next-app --typescript

* clean up auto-generated pages, public and styles

* next.config.js: setup i18n locale for internationalization

* next.config.js: add code comment re: internationalization

* add html tags for VO

* Update app/styles/Home.module.css

update stickcy nav

Co-authored-by: Rocket <[email protected]>

* Update app/README.md

Co-authored-by: Rocket <[email protected]>

* Update app/README.md

Co-authored-by: Rocket <[email protected]>

* tsconfig: target es6

* add babelec

* add __mocks__ with mock styles for testing

* -test: add first jest test and snapshot test for Home page
- add jest.setup.js to require jest-dom

* - add jest.config.js
- package.json: add react testing library, babel and jest dependencies
- add first test
- update jsx
- yarn.lock updated with new packages

* .eslintrc.json: extend nava eslint config

* package.json: add eslint-config-nava

* add ts check to all js files

* add dev note regarding incremental type checking

* add TS-specific eslint

* update read me with development typecheck and linting tips

* update read me with development typecheck and linting tips

* add and setup prettier

* Update app/.babelrc

Co-authored-by: Rocket <[email protected]>

* Update app/package.json

Co-authored-by: Rocket <[email protected]>

* Update package.json

add scripts to package.json

* run prettier

* add checkJs to tsconfig, remove duplicate code from js files

* add typescript parser and implement type information with linting

* eslintrc: add prettier recommended plugin

* preettierrc: add trailing comma check, remove redundant code

* README: add auto-generated modified note

* Update app/README.md

Co-authored-by: Rocket <[email protected]>

* add testRegex and testPathIgnorePatterns

* re-add localesubpaths to next.config.js

* tsconfig.json: remove inline comment

* README: add docimentation for eslint and tsconfig

* setup jest-axe

* add new lines add end of files

* jest.config.js: add inline comments

* README - add documentation for test

* README: add tsconfig documentation

* README: add test script documentation

* README: add documentation for dependencies

* yarn.lock

* Update app/__mocks__/styleMock.js

Co-authored-by: Rocket <[email protected]>

Co-authored-by: Rocket <[email protected]>

Author: karinamzalez

app/.babelrc

@@ -3,6 +3,9 @@
    * `next/babel` is required for our React tests to work
    * https://nextjs.org/docs/advanced-features/customizing-babel-config
    */
-  "presets": ["next/babel"],
+  "presets": [
+    "next/babel",
+    "@babel/preset-typescript"
+  ],
   "plugins": []
 }

app/.eslintrc.json

@@ -1,3 +1,20 @@
 {
-  "extends": "next/core-web-vitals"
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "tsconfigRootDir": "__dirname",
+      "project": ["./tsconfig.json"]
+    },
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:prettier/recommended",
+    "prettier",
+    "next",
+    "nava"
+  ],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-explicit-any": "error"
+  }
 }

app/.prettierrc.json

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

app/README.md

@@ -22,6 +22,39 @@ A starter [API route](https://nextjs.org/docs/api-routes/introduction) can be ac
 
 The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
+## Local Linter and Typechecker Setup
+
+### Setting up up linting and typechecking for local development
+
+For linting, this application is leveraging `eslint`, `prettier` and Nava's [eslint-config-nava](https://github.com/navapbc/eslint-config-nava). Although, these will be run on CI and prior to commit, it is still recommended that we tell our code editor to auto-fix eslint and prettier errors on save. 
+
+In VSCode, do so by creating a `.vscode/settings.json` file with:
+
+```
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}
+```
+
+For typechecking, this application is leveraging Next.js' [incremental typechecking](https://nextjs.org/docs/basic-features/typescript#incremental-type-checking). NextJS will run type checking as a part of `next build`-- Although it is still recommended that we set up type checking using our code editor for development. In VSCode, do so by adding the following to your `.vscode/settings.json` file
+
+```
+"typescript.validate.enable": true
+```
+
+Note: make sure TypeScript and Javascript Language Features are enabled in VS Code Extensions.
+
+### Eslint rules explained
+
+- "@typescript-eslint/no-unused-vars": "error"
+	- Disallows unused variables-- prevents dead code accumulation.  
+- "@typescript-eslint/no-explicit-any": "error"
+	- Disallows usage of `any` type. The usage of `any` defeats the purpose of typescript. Consider using `unknown` type instead instead.  
+
 ### Tsconfig additions to auto-generated file
 
 - `target: es6` -- nextJS set this valule to `es5` by default. 
@@ -34,4 +67,25 @@ The `pages/api` directory is mapped to `/api/*`. Files in this directory are tre
 ### Package.json 
 
 #### Scripts
-- `test`: runs `jest --ci --coverage`. [--ci option](https://jestjs.io/docs/cli#--ci) is provided so that snapshots don't get created automatically, it will require Jest to be run with `--updateSnapshot`. [--coverage option](https://jestjs.io/docs/cli#--coverageboolean) is provided to instruct jest to collect and report test coverage in output. 
+- `format`: instructs prettier to rewrite files with fixes for formatting violations. 
+- `format-check`: instructs prettier to only check files for violations without fixing them. 
+- `test`: runs `jest --ci --coverage`. [--ci option](https://jestjs.io/docs/cli#--ci) is provided to prevent automatic creation of snapshots. This requires Jest to be run with `--updateSnapshot`. [--coverage option](https://jestjs.io/docs/cli#--coverageboolean) is provided to instruct jest to collect and report test coverage in output. 
+- `ts:check`: runs `tsc --noEmit`. [--noEmit option](https://www.typescriptlang.org/tsconfig#noEmit) is provided to prevent type checker compiler from outputting files. 
+
+#### Dependencies
+- `@typescript-eslint/parser`: implemented in .eslint.json via `"parser": "@typescript-eslint/parser"`. This [plugin](https://www.npmjs.com/package/@typescript-eslint/parser) works in tandem with other plugins to help facilitate the usage of ESlint with TypeScript. 
+- `@types/jest-axe`: This package contains type definitions for [jest-axe](https://www.npmjs.com/package/jest-axe).
+
+#### Dev Dependencies
+- `@babel/preset-typescript`: This [module](https://babeljs.io/docs/en/babel-preset-typescript) allows us to use babel to transpile TypeScript into Javascript, specifically for [jest testing](https://jestjs.io/docs/getting-started#using-typescript) in our case. Implemented in .babelrc > presets. 
+- `@testing-library/dom`: This [module](https://github.com/testing-library/dom-testing-library) provides querying fo. 
+- `@testing-library/jest-dom`: This [module](https://testing-library.com/docs/ecosystem-jest-dom/) is a companion for testing-library/dom-- it provides DOM element matchers for jest. 
+- `@testing-library/react`: This [module](https://testing-library.com/docs/react-testing-library/intro/) works in tandem with testing-library/dom to add APIs for testing React components.
+- `babel-jest`: This [module](https://www.npmjs.com/package/babel-jest) works to compile JavaScript/Typescript code using babel for testing. Automatically implemented if `jest-cli` is used.
+- `eslint`: This [module](https://www.npmjs.com/package/eslint) provides linting. Configuration implemented in .eslintrc. 
+- `eslint-config-nava`:  This [module](https://github.com/navapbc/eslint-config-nava) contains nava's preferred configurations for eslint. It is implemented in .eslintrc > extensions > nava. 
+- `eslint-config-next`: This [module](https://nextjs.org/docs/basic-features/eslint) is automatically installed by nextJS, it includes out of the eslint configuration. Implemented in .eslintrc.json > extends > next.
+- `eslint-config-prettier`: This [module](https://github.com/prettier/eslint-config-prettier) turns off eslint rules that may conflict with prettier. Implemented in .eslintrc > extends > prettier. 
+- `jest-environment-jsdom`: This [module](https://www.npmjs.com/package/jest-environment-jsdom) simulates the DOM for testing. Implemented  in jest.config.js > testEnvironment.
+- `prettier`: This [module](https://prettier.io/) is used for code formatting. Implemented in .prettierrc.json.
+- `ts-jest`: This [module](https://www.npmjs.com/package/ts-jest) lets ys yse hest to test our project written in TypeScript. Implemented in jest.config.js > preset > ts-jest

app/__mocks__/styleMock.js

@@ -1 +1 @@
-module.exports = {}
+module.exports = {};

app/next.config.js

@@ -1,14 +1,15 @@
 /** @type {import('next').NextConfig} */
+
 const nextConfig = {
   i18n: {
     // TODO: implement i18n internationalization-- look into nextJS subpath routing
     locales: ['en-US', 'es-ES'],
     defaultLocale: 'en-US',
     localeSubpaths: {
       es: "es"
-    },
+    }
   },
-  reactStrictMode: true
-}
+  reactStrictMode: true,
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

app/package.json

@@ -5,12 +5,16 @@
   "scripts": {
     "build": "next build",
     "dev": "next dev",
+    "format": "prettier --write '**/*.{js,json,md,mdx,ts,tsx,scss,yaml,yml}'",
+    "format-check": "prettier --check '**/*.{js,json,md,mdx,ts,tsx,scss,yaml,yml}'",
     "lint": "next lint",
     "start": "next start",
-    "test": "jest --ci --coverage"
+    "test": "jest --ci --coverage",
+    "ts:check": "tsc --noEmit"
   },
   "dependencies": {
     "@types/jest-axe": "^3.5.3",
+    "@typescript-eslint/parser": "^5.26.0",
     "jest-axe": "^6.0.0",
     "next": "12.1.6",
     "react": "18.1.0",
@@ -27,11 +31,16 @@
     "@types/react-dom": "18.0.4",
     "@types/testing-library__jest-dom": "^5.14.3",
     "@types/testing-library__react": "^10.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.25.0",
     "babel-jest": "^28.1.0",
-    "eslint": "8.15.0",
+    "eslint": "^8.15.0",
+    "eslint-config-nava": "^11.0.0",
     "eslint-config-next": "12.1.6",
+    "eslint-config-prettier": "^8.5.0",
     "jest": "^28.1.0",
+    "jest-cli": "^28.1.0",
     "jest-environment-jsdom": "^28.1.0",
+    "prettier": "^2.6.2",
     "ts-jest": "^28.0.2",
     "typescript": "4.6.4"
   }

app/pages/_app.tsx

@@ -1,8 +1,8 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import '../styles/globals.css';
+import type { AppProps } from 'next/app';
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;

app/pages/api/hello.ts

@@ -1,13 +1,13 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from 'next';
 
 type Data = {
-  name: string
-}
+  name: string;
+};
 
 export default function handler(
   req: NextApiRequest,
   res: NextApiResponse<Data>
 ) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' });
 }

app/pages/index.tsx

@@ -16,15 +16,18 @@ const Home: NextPage = () => {
 
       <main className={styles.main}>
         <h1 className={styles.title}>
-          Welcome to your <a href="https://github.com/navapbc/template-application-nextjs">Next.js Template!</a>
+          Welcome to your{' '}
+          <a href="https://github.com/navapbc/template-application-nextjs">
+            Next.js Template!
+          </a>
         </h1>
       </main>
 
       <footer className={styles.footer}>
         <nav aria-label="Secondary">Placeholder Footer</nav>
       </footer>
     </div>
-  )
+  );
 };
 
-export default Home;
+export default Home;

app/test/pages/index.test.tsx

@@ -1,16 +1,14 @@
 // test/pages/index.test.js
 
 import { render, screen } from "@testing-library/react";
-import { axe, toHaveNoViolations } from "jest-axe";
+import { axe } from "jest-axe";
 import Home from "@pages/index";
 
-describe("Home", () => {
-  it("should render the heading", () => {
+describe('Home', () => {
+  it('should render the heading', () => {
     render(<Home />);
 
-    const heading = screen.getByText(
-      /Next.js Template!/i
-    );
+    const heading = screen.getByText(/Next.js Template!/i);
 
     expect(heading).toBeInTheDocument();
     expect(heading).toMatchSnapshot();

app/tsconfig.json

@@ -7,6 +7,7 @@
     "target": "es6",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
+    "checkJs": true,
     "skipLibCheck": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,