migrate to vite

.eslintrc.json

@@ -1,15 +1,33 @@
 {
   "extends": [
     "eslint:recommended",
+    "airbnb",
     "plugin:react/recommended",
     "plugin:react/jsx-runtime",
     "plugin:react-hooks/recommended",
+    "plugin:storybook/recommended",
     "prettier"
   ],
+  "globals": { "google": "readonly" },
   "rules": {
     "react/prop-types": 0,
     "no-console": 1,
-    "no-unused-vars": 0
+    "no-unused-vars": 0,
+    "no-param-reassign": 0,
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": "arrow-function",
+        "unnamedComponents": "arrow-function"
+      }
+    ],
+    "react/jsx-props-no-spreading": [
+      2,
+      {
+        "explicitSpread": "ignore",
+        "exceptions": ["ContactInput", "ContactCheckbox", "TextField", "svg"]
+      }
+    ]
   },
   "plugins": ["react", "import", "jsx-a11y"],
   "parserOptions": {
@@ -25,7 +43,21 @@
     "node": true,
     "es2021": true
   },
+  "overrides": [
+    {
+      "files": ["./src/stories/*.stories.js", "./vite.config.js"],
+      "rules": {
+        "import/no-extraneous-dependencies": [2, { "devDependencies": true }]
+      }
+    }
+  ],
   "settings": {
+    "import/resolver": {
+      "node": {
+        "moduleDirectory": ["node_modules", "src"],
+        "paths": ["src"]
+      }
+    },
     "react": {
       "version": "detect"
     }

.gitignore

@@ -31,4 +31,5 @@ resources/
 .env
 
 # testing
-newrelic_agent.log
+newrelic_agent.log
+*storybook.log

.storybook/main.js

@@ -1,8 +1,16 @@
-module.exports = {
-  "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/preset-create-react-app"],
-  "framework": {
-    name: "@storybook/react-webpack5",
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions'
+  ],
+  framework: {
+    name: '@storybook/react-vite',
     options: {}
   }
-};
+};
+export default config;

.storybook/preview.js

@@ -1,13 +1,17 @@
 import withThemeProvider from './decorators/withThemeProvider';
 
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
     }
   }
 };
 
 export const decorators = [withThemeProvider];
+
+export default preview;

.svgrrc.json

@@ -5,5 +5,6 @@
   "exportType": "default",
   "prettierConfig": ".prettierrc",
   "ref": true,
-  "titleProp": true
+  "titleProp": true,
+  "ext": "jsx"
 }