CMDCT-3657 - swap react-scripts to vite (#11702)

Enterprise-CMCS · May 21, 2024 · 6f75db1 · 6f75db1
1 parent 7ca5df3
commit 6f75db1
Show file tree

Hide file tree

Showing 9 changed files with 987 additions and 5,249 deletions.
diff --git a/services/ui-src/index.html b/services/ui-src/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" content="Medicaid Data Collection Tool" />
+  <meta name="theme-color" content="#ffffff" />
+  <title>Managed Care Reporting</title>
+  <script src="/env-config.js"></script>
+  <link rel="icon" href="/favicon.ico" />
+  <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
+  <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
+  <!-- Tealium Analytics Tag Manager -->
+  <script>
+    var tealiumEnvMap = {
+      "mdctmcr.cms.gov": "prod",
+      "mdctmcrval.cms.gov": "qa",
+    };
+    var tealiumEnv = tealiumEnvMap[window.location.hostname] || "dev";
+    var tealiumUrl = `https://tags.tiqcdn.com/utag/cmsgov/cms-general/${tealiumEnv}/utag.sync.js`;
+    document.write(`<script src="${tealiumUrl}" async><\/script>`);
+  </script>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <!-- Tealium Analytics Tag Manager -->
+  <script>
+    window.utag_cfg_ovrd = { noview: true };
+  </script>
+  <script>
+    (function (t, e, a, l, i, u, m) {
+      t = "cmsgov/cms-general";
+      e = tealiumEnv;
+      a = "/" + t + "/" + e + "/utag.js";
+      l = "//tags.tiqcdn.com/utag" + a;
+      i = document;
+      u = "script";
+      m = i.createElement(u);
+      m.src = l;
+      m.type = "text/java" + u;
+      m.async = true;
+      l = i.getElementsByTagName(u)[0];
+      l.parentNode.insertBefore(m, l);
+    })();
+  </script>
+  <div id="root"></div>
+  <script type="module" src="/src/index.tsx"></script>
+</body>
+
+</html>
diff --git a/services/ui-src/package.json b/services/ui-src/package.json
@@ -4,8 +4,9 @@
   "version": "1.0.0",
   "license": "CC0-1.0",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
     "coverage": "jest --coverage",
     "test": "jest --setupFiles dotenv/config",
     "watchTest": "jest --setupFiles dotenv/config --watch",
@@ -19,6 +20,7 @@
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "@hookform/resolvers": "^2.8.4",
+    "@vitejs/plugin-react": "^4.2.1",
     "aws-amplify": "^5.3.4",
     "bootstrap": "^5.1.3",
     "date-fns": "^2.26.0",
@@ -28,6 +30,7 @@
     "framer-motion": "^4",
     "history": "^5.3.0",
     "html-react-parser": "^3.0.1",
+    "jest": "^27.4.3",
     "launchdarkly-react-client-sdk": "^3.0.1",
     "nth-check": "2.1.1",
     "object-path": "^0.11.8",
@@ -39,9 +42,10 @@
     "react-hook-form": "^7.20.5",
     "react-icons": "^4.3.1",
     "react-router-dom": "6.22.3",
-    "react-scripts": "^5.0.0",
     "react-uuid": "^1.0.3",
     "sass": "^1.37.5",
+    "vite": "^5.2.11",
+    "vite-tsconfig-paths": "^4.3.2",
     "yup": "^0.32.11",
     "zustand": "^4.4.6"
   },

diff --git a/services/ui-src/public/index.html b/services/ui-src/public/index.html
diff --git a/services/ui-src/src/styles/index.scss b/services/ui-src/src/styles/index.scss
@@ -1,6 +1,6 @@
 // necessary to render the UsaBanner correctly
 $image-path: "~@cmsgov/design-system/dist/images";
-@import "@cmsgov/design-system/dist/scss/index";
+@import "@cmsgov/design-system/dist/css/index";
 
 @mixin tabbed-focus {
   box-shadow: 0 0 0 3px #fff,

diff --git a/services/ui-src/src/utils/other/parsing.ts b/services/ui-src/src/utils/other/parsing.ts
@@ -1,5 +1,5 @@
 import React, { ReactElement } from "react";
-import * as DOMPurify from "dompurify";
+import DOMPurify from "dompurify";
 import parse from "html-react-parser";
 // components
 import { Link as RouterLink } from "react-router-dom";

diff --git a/services/ui-src/tsconfig.json b/services/ui-src/tsconfig.json
@@ -1,8 +1,16 @@
 {
   "compilerOptions": {
     "incremental": true,
-    "target": "ES2020",
-    "lib": ["es6", "dom", "ES2021.String"],
+    "target": "ESNext",
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "ES2021.String"
+    ],
+    "types": [
+      "vite/client"
+    ],
     "jsx": "react-jsx",
     "sourceMap": true,
     "module": "esnext",
@@ -22,5 +30,8 @@
     "isolatedModules": true,
     "noEmit": true
   },
-  "include": ["src", "tests"]
-}
+  "include": [
+    "src",
+    "tests"
+  ]
+}
diff --git a/services/ui-src/vite-env.d.ts b/services/ui-src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/services/ui-src/vite.config.ts b/services/ui-src/vite.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import viteTsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  base: "/",
+  plugins: [react(), viteTsconfigPaths()],
+  server: {
+    open: true,
+    port: 3000,
+  },
+  define: {
+    global: "globalThis",
+  },
+  build: {
+    outDir: "./build",
+  },
+});