Changed the build tool from Webpack to Vite

.env

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

.eslintrc.cjs

@@ -0,0 +1,28 @@
+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',
+  },
+  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

@@ -1,19 +1,74 @@
-# compiled output
-/dist
-/tmp
-/out-tsc
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
 
-# dependencies
-node_modules
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
 
-# IDEs and editors
+# Build directories
+dist
+dist-ssr
+tmp
+out-tsc
+
+
+# IDEs and Editor directories and files
 /.idea
 .project
 .classpath
 .c9/
 *.launch
 .settings/
 *.sublime-workspace
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
 # IDE - VSCode
 .vscode/*
@@ -22,18 +77,98 @@ node_modules
 !.vscode/launch.json
 !.vscode/extensions.json
 
-# misc
-/.sass-cache
-/connect.lock
-/coverage
-/libpeerconnection.log
-npm-debug.log
-yarn-error.log
-testem.log
-/typings
-.env
-cypress/videos
-
 # System Files
 .DS_Store
 Thumbs.db
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# SASS cache
+/.sass-cache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+*.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# Cypress
+cypress/videos
+
+# misc
+/connect.lock

.prettierignore

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

.prettierrc

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

.vscode/extensions.json

@@ -1,3 +1,16 @@
 {
-  "recommendations": ["editorconfig.editorconfig"]
+  "recommendations": [
+    "ms-vscode.vscode-typescript-next",
+    "mgmcdermott.vscode-language-babel",
+    "editorconfig.editorconfig",
+    "irongeek.vscode-env",
+    "dbaeumer.vscode-eslint",
+    "wix.vscode-import-cost",
+    "esbenp.prettier-vscode",
+    "ofhumanbondage.react-proptypes-intellisense",
+    "pflannery.vscode-versionlens",
+    "orta.vscode-jest",
+    "streetsidesoftware.code-spell-checker",
+    "davidanson.vscode-markdownlint"
+  ]
 }

.vscode/settings.json

@@ -0,0 +1,23 @@
+{
+  // Formatting
+  // Uncomment the following 2 lines below to allow Prettier to auto format your code on save 👇
+  // "notebook.formatOnSave.enabled": true,
+  // "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"
+  },
+
+  // Code Spell Checker
+  "cSpell.words": ["macbook", "metrostar", "tanstack", "uswds"]
+}

README.md

@@ -2,10 +2,12 @@
 
 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/)
-- State Management: [Recoil](https://recoiljs.org/)
+- State Management: [TanStack Query](https://tanstack.com/query/latest) & [Recoil](https://recoiljs.org/)
+- Forms: [React Hook Form](https://www.react-hook-form.com/)
 - Unit Testing: [Jest](https://jestjs.io/) with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
 - Code Analysis: [ES Lint](https://eslint.org/)
 - Code Formatting: [Prettier](https://prettier.io/)
@@ -33,7 +35,7 @@ npm install
 2. To start the app, run the following:
 
 ```sh
-npm run start
+npm run dev
 ```
 
 ## Running Unit Tests
@@ -46,6 +48,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 +61,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"
   ]
 }