feat!: Webpack/Jest to Vite/Vitest migration (#2716)

Co-authored-by: Brandon Lenz <15805554+brandonlenz@users.noreply.github.com>

.browserslistrc

@@ -1,5 +1,4 @@
 # Supported browsers
 > 2%
 last 2 versions
-IE 11
 not dead

.eslintrc

@@ -1,13 +1,14 @@
 {
-  "parser": "@babel/eslint-parser",
+  "root": true,
   "plugins": [
     "import",
     "@typescript-eslint",
     "jsx-a11y",
     "react",
     "react-hooks",
     "no-only-tests",
-    "security"
+    "security",
+    "vitest"
   ],
   "env": {
     "browser": true,
@@ -21,16 +22,12 @@
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true
-    }
+    },
+    "requireConfigFile": false
   },
   "settings": {
     "react": {
       "version": "detect"
-    },
-    "import/resolver": {
-      "webpack": {
-        "config": "./webpack.config.js"
-      }
     }
   },
   "overrides": [
@@ -53,7 +50,10 @@
       "extends": [
         "plugin:@typescript-eslint/recommended",
         "prettier"
-      ]
+      ],
+      "rules": {
+        "import/no-unresolved": "off"
+      }
     }
   ],
   "extends": [
@@ -63,8 +63,10 @@
     "plugin:import/typescript",
     "plugin:react/recommended",
     "plugin:jsx-a11y/recommended",
-    "prettier",
-    "plugin:security/recommended-legacy"
+    "plugin:security/recommended-legacy",
+    "plugin:storybook/recommended",
+    "plugin:vitest/recommended",
+    "prettier"
   ],
   "rules": {
     "no-only-tests/no-only-tests": "error",

.github/dependabot.yml

@@ -28,10 +28,4 @@ updates:
       - dependency-name: '@types/react-dom'
         versions:
           - '>=18.0.0'
-      - dependency-name: '@storybook/react'
-        versions:
-          - '>=7.0.0'
-      - dependency-name: '@storybook/addon-essentials'
-        versions:
-          - '>=7.0.0'
       - dependency-name: 'uswds'

.github/workflows/build-and-test.yml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node: [ '16', '18' ]
+        node: [ '18' ]
 
     name: Node ${{ matrix.node }} tests
 
@@ -32,7 +32,7 @@ jobs:
         run: yarn --frozen-lockfile
 
       - name: Run Jest tests with coverage
-        run: yarn test:coverage -w 1
+        run: yarn test:coverage
 
       - name: Run node server side tests
         run: yarn test:serverside

.husky/pre-commit

@@ -0,0 +1,3 @@
+yarn run lint
+yarn run format:check
+yarn run test related --silent

.storybook/custom-styles.scss

@@ -1,3 +1,4 @@
+@forward '../src/styles/uswds-theme';
 @use 'uswds-core' as *;
 
 // Add custom styles for storybook implementation

.storybook/main.ts

@@ -1,114 +1,20 @@
-import type { StorybookConfig } from '@storybook/react-webpack5'
-
-const path = require('path')
-
-const uswdsIncludePaths = [
-  './node_modules/@uswds',
-  './node_modules/@uswds/uswds/packages',
-]
-
-const webpackConfig = (config) => {
-  config.resolve.alias.uswds = path.resolve(
-    __dirname,
-    '../node_modules/@uswds/uswds'
-  )
-
-  config.module.rules = config.module.rules.filter(
-    (rule) => rule.test && rule.test.toString() !== '/\\.css$/'
-  )
-  config.module.rules.push({
-    test: /\.(sa|sc|c)ss$/,
-    exclude: /\.module\.(sa|sc|c)ss$/i,
-    use: [
-      'style-loader',
-      'css-loader',
-      {
-        loader: 'sass-loader',
-        options: {
-          sourceMap: true,
-          sassOptions: {
-            includePaths: uswdsIncludePaths,
-          },
-        },
-      },
-    ],
-    include: path.resolve(__dirname, '../'),
-  })
-
-  config.module.rules.push({
-    test: /\.module\.(sa|sc|c)ss$/i,
-    include: path.resolve(__dirname, '../src'),
-    use: [
-      'style-loader',
-      {
-        loader: 'css-loader',
-        options: {
-          modules: {
-            localIdentName: '[path][name]__[local]--[hash:base64:5]',
-          },
-        },
-      },
-      {
-        loader: 'sass-loader',
-        options: {
-          sourceMap: true,
-          sassOptions: {
-            includePaths: uswdsIncludePaths,
-          },
-        },
-      },
-    ],
-  })
-
-  const fileLoaderRule = config.module.rules.find(
-    (rule) => rule.test && rule.test.test('.svg')
-  )
-  fileLoaderRule.exclude = /\.svg$/
-
-  config.module.rules.push({
-    test: /\.svg$/,
-    oneOf: [
-      {
-        issuer: /\.[jt]sx?$/,
-        resourceQuery: /svgr/,
-        use: [
-          {
-            loader: '@svgr/webpack',
-            options: {
-              icon: true,
-            },
-          },
-        ],
-      },
-      {
-        type: 'asset',
-      },
-    ],
-  })
-
-  return config
-}
-
-module.exports = {
-  stories: ['../src/**/*.stories.@(ts|tsx)'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
-  typescript: {
-    check: false,
-    checkOptions: {},
-    reactDocgen: 'react-docgen-typescript',
-    reactDocgenTypescriptOptions: {
-      tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
-    },
-  },
-  webpackFinal: async (config) => {
-    return webpackConfig(config)
-  },
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
   framework: {
-    name: '@storybook/react-webpack5',
-    options: { strictMode: false },
+    name: '@storybook/react-vite',
+    options: {},
   },
   docs: {
     autodocs: 'tag',
   },
-  staticDirs: ['./public'],
-} as StorybookConfig
+  staticDirs: ['public'],
+}
+export default config

.stylelintrc

@@ -1,10 +1,12 @@
 {
-  "plugins": ["stylelint-scss", "stylelint-prettier"],
+  "plugins": ["stylelint-prettier"],
   "rules": {
     "at-rule-no-unknown": null,
     "scss/at-rule-no-unknown": true,
     "prettier/prettier": true,
-    "selector-class-pattern": ""
+    "selector-class-pattern": "",
+    "scss/function-no-unknown": null,
+    "at-rule-empty-line-before": null
   },
-  "extends": ["stylelint-config-recommended", "stylelint-prettier/recommended", "stylelint-config-sass-guidelines", "stylelint-config-css-modules"],
+  "extends": ["stylelint-config-recommended", "stylelint-prettier/recommended", "stylelint-config-sass-guidelines", "stylelint-config-css-modules", "stylelint-config-standard-scss"]
 }