Changed the build tool from Webpack to Vite (#16)

* Changed the build tool from Webpack to Vite. Added React Hook Form. Added .env support. Added recommended VS Code extensions.
* Updated comet-uswds version

.env

@@ -0,0 +1 @@
+API_BASE_URL=/api

.eslintrc.cjs

@@ -0,0 +1,41 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:prettier/recommended',
+    'prettier',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh', 'prettier'],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    '@typescript-eslint/no-unused-vars': 'error',
+    'prettier/prettier': [
+      'error',
+      {
+        semi: true,
+        tabWidth: 2,
+        singleQuote: true,
+        trailingComma: 'all',
+        bracketSpacing: true,
+        useTabs: false,
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['**/*.test.ts', '**/*.test.tsx'],
+      env: {
+        jest: true,
+      },
+    },
+  ],
+};

.gitattributes

@@ -0,0 +1,14 @@
+# Set the default behavior, in case people don't have core.autocrlf set.
+* text=auto eol=lf
+
+# Explicitly declare text files you want to always be normalized and converted
+# to native line endings on checkout.
+# *.c text
+# *.h text
+
+# Declare files that will always have CRLF line endings on checkout.
+# *.sln text eol=crlf
+
+# Denote all files that are truly binary and should not be modified.
+# *.png binary
+# *.jpg binary

.gitignore

@@ -3,7 +3,7 @@
 /tmp
 /out-tsc
 
-# dependencies
+# Dependency directories
 node_modules
 
 # IDEs and editors
@@ -22,18 +22,30 @@ node_modules
 !.vscode/launch.json
 !.vscode/extensions.json
 
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# System Files
+.DS_Store
+Thumbs.db
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
 # misc
 /.sass-cache
 /connect.lock
-/coverage
 /libpeerconnection.log
 npm-debug.log
 yarn-error.log
 testem.log
 /typings
-.env
+*.local
 cypress/videos
-
-# System Files
-.DS_Store
-Thumbs.db

.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

.prettierrc

@@ -1,8 +1,9 @@
 {
   "semi": true,
   "tabWidth": 2,
-  "printWidth": 100,
   "singleQuote": true,
   "trailingComma": "all",
-  "bracketSpacing": true
+  "bracketSpacing": true,
+  "useTabs": false,
+  "plugins": ["prettier-plugin-organize-imports"]
 }

.vscode/extensions.json

@@ -1,3 +1,12 @@
 {
-  "recommendations": ["editorconfig.editorconfig"]
+  "recommendations": [
+    "mgmcdermott.vscode-language-babel",
+    "editorconfig.editorconfig",
+    "irongeek.vscode-env",
+    "dbaeumer.vscode-eslint",
+    "wix.vscode-import-cost",
+    "esbenp.prettier-vscode",
+    "pflannery.vscode-versionlens",
+    "orta.vscode-jest"
+  ]
 }

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+  // Formatting
+  // Uncomment the following line to allow Prettier to auto format your code on save 👇
+  // "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+
+  // Code highlighting
+  "files.associations": {
+    "*.env.*": "env"
+  }
+}

README.md

@@ -2,6 +2,7 @@
 
 The goal of this project is to provide a React with TypeScript starter application, which comes pre-configured with the USWDS-based [Comet Component Library](https://github.com/MetroStar/comet) as well as other tools to accelerate development. Some of these tools are as follows:
 
+- Tooling: [Vite](https://vitejs.dev/)
 - Platform: [React](https://react.dev/) with [TypeScript](https://www.typescriptlang.org/)
 - Component Library: [Comet Component Library](https://github.com/MetroStar/comet)
 - Data Visualization: [Victory Charts](https://formidable.com/open-source/victory/)
@@ -33,7 +34,7 @@ npm install
 2. To start the app, run the following:
 
 ```sh
-npm run start
+npm run dev
 ```
 
 ## Running Unit Tests
@@ -46,6 +47,10 @@ npm run test
 
 Ensure to review the coverage directory for code coverage details.
 
+```sh
+npm run coverage
+```
+
 ## Running Code Quality Checks
 
 To make sure your changes adhere to additional code quality standards, run the following:
@@ -55,6 +60,8 @@ npm run lint
 npm run format
 ```
 
+You can also see the `.vscode/settings.json` file to find how to enable auto-formatting on save.
+
 ## Running End-to-End (E2E) Tests
 
 Note: running E2E tests requires the app to be running as well, run the following:

babel.config.json

@@ -1,13 +1,6 @@
 {
   "presets": [
-    "@babel/preset-typescript",
-    [
-      "@babel/preset-env",
-      {
-        "useBuiltIns": "usage",
-        "corejs": 3
-      }
-    ],
-    "@babel/preset-react"
+    ["@babel/preset-env", { "targets": { "node": "current" } }],
+    "@babel/preset-typescript"
   ]
 }

cypress.config.ts

@@ -1,12 +1,28 @@
 import { defineConfig } from 'cypress';
+import customViteConfig from './vite.config';
 
 export default defineConfig({
+  component: {
+    devServer: {
+      framework: 'react',
+      bundler: 'vite',
+      // optionally pass in vite config
+      viteConfig: customViteConfig,
+      // or a function - the result is merged with
+      // any `vite.config` file that is detected
+      // viteConfig: async () => {
+      //   // ... do things ...
+      //   const modifiedConfig = await injectCustomConfig(baseConfig);
+      //   return modifiedConfig;
+      // },
+    },
+  },
+
   e2e: {
+    baseUrl: 'http://localhost:8080',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
   },
-  env: {
-    base_url: 'http://localhost:8080',
-  },
 });

cypress/e2e/dashboard-and-details.cy.ts

@@ -8,7 +8,7 @@ describe('dashboard spec', () => {
 
   it('verifies access to dashboard after signing in', () => {
     // Navigate to Homepage
-    cy.visit(Cypress.env('base_url'));
+    cy.visit('/');
 
     // Setup Accessibility Testing
     cy.injectAxe();
@@ -18,7 +18,7 @@ describe('dashboard spec', () => {
 
     // Sign In
     cy.get('#auth-link').click();
-    cy.signIn('test', 'test');
+    cy.signIn('test', '12345678');
 
     // Mock launch data
     cy.intercept('GET', '/api/*', {

cypress/e2e/home.cy.ts

@@ -6,7 +6,7 @@ describe('home spec', () => {
 
   it('navigates to home', () => {
     // Navigate to Homepage
-    cy.visit(Cypress.env('base_url'));
+    cy.visit('/');
 
     // Setup Accessibility Testing
     cy.injectAxe();

cypress/e2e/sign-in.cy.ts

@@ -6,7 +6,7 @@ describe('signin spec', () => {
 
   it('navigates to home and signs in', () => {
     // Navigate to Homepage
-    cy.visit(Cypress.env('base_url'));
+    cy.visit('/');
 
     // Setup Accessibility Testing
     cy.injectAxe();
@@ -21,7 +21,7 @@ describe('signin spec', () => {
     cy.checkA11y();
 
     // Login
-    cy.signIn('test', 'test');
+    cy.signIn('test', '12345678');
 
     // Verify Homepage after signin
     cy.get('h1').should('contain', 'Welcome John Doe');

cypress/support/commands.ts

@@ -1,16 +1,59 @@
 /// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
 
 // Sign-in command
 Cypress.Commands.add('signIn', (username, password) => {
-  cy.get('input[name="username"]').type(`${username}`).should('have.value', `${username}`);
-  cy.get('input[name="password"]').type(`${password}`).should('have.value', `${password}`);
+  cy.get('input[name="username"]')
+    .type(`${username}`)
+    .should('have.value', `${username}`);
+  cy.get('input[name="password"]')
+    .type(`${password}`)
+    .should('have.value', `${password}`);
   cy.get('#submit').click();
 });
 
 declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
     interface Chainable {
-      signIn(email: string, password: string): Chainable<void>;
+      signIn(username: string, password: string): Chainable<void>;
     }
   }
 }
+
+export {};