Running version

.eslintrc.js

@@ -7,11 +7,10 @@ module.exports = {
     'plugin:cypress/recommended',
   ],
   parserOptions: {
-    parser: '@babel/eslint-parser',
-    ecmaVersion: 2020,
+    ecmaVersion: 2022,
     sourceType: 'module',
   },
-  plugins: ['html', 'prettier', 'babel'],
+  plugins: ['html', 'prettier'],
   rules: {
     'prettier/prettier': ['error'],
     camelcase: 'off',

app/javascript/entrypoints/widget.js

@@ -12,7 +12,7 @@ import {
 } from 'shared/helpers/Validators';
 import router from '../widget/router';
 import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
-const PhoneInput = () => import('../widget/components/Form/PhoneInput');
+const PhoneInput = () => import('../widget/components/Form/PhoneInput.vue');
 
 Vue.use(VueI18n);
 Vue.use(VueDOMPurifyHTML, domPurifyConfig);

app/javascript/widget/App.vue

@@ -346,5 +346,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import '~widget/assets/scss/woot.scss';
+@import 'widget/assets/scss/woot.scss';
 </style>

app/javascript/widget/components/AgentTypingBubble.vue

@@ -8,7 +8,7 @@
           :class="$dm('bg-white', 'dark:bg-slate-700')"
         >
           <img
-            src="~widget/assets/images/typing.gif"
+            src="widget/assets/images/typing.gif"
             alt="Agent is typing a message"
           />
         </div>

app/javascript/widget/components/UserAvatar.vue

@@ -33,7 +33,7 @@ export default {
 
 .user-avatar {
   @include light-shadow;
-  background: url('~widget/assets/images/defaultUser.png') center center
+  background: url('widget/assets/images/defaultUser.png') center center
     no-repeat;
   background-size: cover;
   border-radius: 50%;

babel.config.js

@@ -1,41 +0,0 @@
-/* eslint-disable global-require */
-const plugins = () => [
-  require('babel-plugin-macros'),
-  require('@babel/plugin-proposal-nullish-coalescing-operator'),
-  [
-    require('@babel/plugin-proposal-class-properties').default,
-    {
-      loose: true,
-    },
-  ],
-  [require('babel-plugin-transform-vue-jsx')],
-];
-
-module.exports = api => {
-  const validEnv = ['development', 'test', 'production'];
-  const currentEnv = api.env();
-
-  if (!validEnv.includes(currentEnv)) {
-    throw new Error(
-      `${
-        'Please specify a valid `NODE_ENV` or ' +
-        '`BABEL_ENV` environment variables. Valid values are "development", ' +
-        '"test", and "production". Instead, received: '
-      }${JSON.stringify(currentEnv)}.`
-    );
-  }
-
-  return {
-    presets: [
-      [
-        require('@babel/preset-env').default,
-        {
-          useBuiltIns: 'usage',
-          corejs: 3,
-          targets: '> 0.25%, not dead',
-        },
-      ],
-    ],
-    plugins: plugins(),
-  };
-};

package.json

@@ -45,8 +45,6 @@
     "activestorage": "^5.2.6",
     "autoprefixer": "^10.4.14",
     "axios": "^1.6.0",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-vue-jsx": "^3.7.0",
     "chart.js": "~2.9.4",
     "color2k": "^2.0.2",
     "company-email-validator": "^1.0.8",
@@ -92,30 +90,21 @@
     "wavesurfer.js": "^6.0.4"
   },
   "devDependencies": {
-    "@babel/core": "7.13.16",
-    "@babel/eslint-parser": "^7.22.15",
-    "@babel/plugin-proposal-class-properties": "7.13.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-    "@babel/preset-env": "7.13.15",
     "@size-limit/file": "^8.2.4",
     "@types/jest": "^29.5.2",
     "@vitejs/plugin-vue2": "^2.3.1",
     "@vue/test-utils": "^1.3.6",
     "@vue/vue2-jest": "29",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-jest": "29",
-    "babel-preset-vue": "^2.0.2",
     "cypress": "^13.4.0",
     "eslint": "^8.49.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-babel": "5.3.1",
     "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-html": "7.1.0",
     "eslint-plugin-import": "2.28.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-prettier": "5.0.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-vue": "^9.17.0",
     "expect-more-jest": "^2.4.2",
     "fake-indexeddb": "^4.0.1",
@@ -128,6 +117,7 @@
     "postcss-preset-env": "^8.5.1",
     "prettier": "^3.0.3",
     "rimraf": "^3.0.0",
+    "sass": "^1.70.0",
     "size-limit": "^8.2.4",
     "vite": "^5.0.0",
     "vite-plugin-ruby": "^5.0.0"

postcss.config.js

@@ -1,15 +1,6 @@
-/* eslint-disable */
 module.exports = {
-  plugins: [
-    require('postcss-preset-env')({
-      autoprefixer: {
-        flexbox: 'no-2009',
-      },
-      stage: 3,
-    }),
-    require('postcss-import'),
-    require('postcss-flexbugs-fixes'),
-    require('tailwindcss'),
-    require('autoprefixer'),
-  ],
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 };