Migrate from Create React App to Vite

.env

@@ -2,21 +2,18 @@
 # These values are overwritten by config.json when deployed.
 
 # Base URL path for the enviroment
-PUBLIC_URL = '/dev/'
+VITE_BASE_URL = '/dev/'
 
 # Name of enviroment for build
-REACT_APP_KBASE_ENV=ci-europa
+VITE_KBASE_ENV=ci-europa
 # Domain of enviroment for build
-REACT_APP_KBASE_DOMAIN=ci-europa.kbase.us
-# The following must be a subdomain of REACT_APP_KBASE_DOMAIN
-REACT_APP_KBASE_LEGACY_DOMAIN=legacy.ci-europa.kbase.us
+VITE_KBASE_DOMAIN=ci-europa.kbase.us
+# The following must be a subdomain of VITE_KBASE_DOMAIN
+VITE_KBASE_LEGACY_DOMAIN=legacy.ci-europa.kbase.us
 
 # Backup cookie name and domain, empty if unused by enviroment
-REACT_APP_KBASE_BACKUP_COOKIE_NAME = 'test_kbase_backup_session'
-REACT_APP_KBASE_BACKUP_COOKIE_DOMAIN = 'localhost'
+VITE_KBASE_BACKUP_COOKIE_NAME = 'test_kbase_backup_session'
+VITE_KBASE_BACKUP_COOKIE_DOMAIN = 'localhost'
 
 # Comma-separated list of allowed external redirect domains (supports wildcards like *.berdl.kbase.us)
-REACT_APP_REDIRECT_WHITELIST = '*.kbase.us'
-
-EXTEND_ESLINT=true
-SKIP_PREFLIGHT_CHECK=true
+VITE_REDIRECT_WHITELIST = '*.kbase.us'

.eslintrc.json

@@ -4,7 +4,14 @@
     "react-app",
     "plugin:@typescript-eslint/recommended"
   ],
-  "ignorePatterns": ["package-lock.json", "!.stylelintrc.json", "*.mdx"],
+  "ignorePatterns": [
+    "package-lock.json",
+    "!.stylelintrc.json",
+    "*.mdx",
+    "node_modules",
+    "build",
+    "storybook-static"
+  ],
   "overrides": [
     {
       "files": ["package.json"],
@@ -16,6 +23,13 @@
     {
       "files": ["*.json"],
       "rules": { "no-unused-expressions": ["off"] }
+    },
+    {
+      "files": ["**/*.stories.tsx", "**/setupTests.ts"],
+      "rules": {
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "no-console": "off"
+      }
     }
   ],
   "parser": "@typescript-eslint/parser",

.github/workflows/reusable_build-push.yml

@@ -34,9 +34,9 @@ jobs:
           password: '${{ secrets.GHCR_TOKEN }}'
 
       - name: Set up Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22'
 
       - name: Install app
         run: npm ci
@@ -45,7 +45,7 @@ jobs:
         run: npm run lint:strict
 
       - name: Run tests
-        run: npm test . -- --coverage --verbose
+        run: npm test -- --run --coverage
 
       - name: Run multi-enviroment build
         run: ./scripts/build_deploy.sh

.gitignore

@@ -11,6 +11,8 @@
 # production
 /build
 /deploy
+/storybook-static
+debug-storybook.log
 
 # misc
 .DS_Store

.nvmrc

@@ -1 +1 @@
-v20.11.1
+v22.22.0

.storybook/main.ts

@@ -0,0 +1,16 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+};
+
+export default config;

.storybook/manager.js → .storybook/manager.ts

@@ -1,24 +1,17 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 
 addons.setConfig({
   isFullscreen: false,
   showNav: true,
   showPanel: true,
   panelPosition: 'bottom',
   enableShortcuts: true,
-  isToolshown: true,
+  showToolbar: true,
   theme: undefined,
   selectedPanel: undefined,
   initialActive: 'sidebar',
   sidebar: {
     showRoots: false,
     collapsedRoots: ['other'],
   },
-  toolbar: {
-    title: { hidden: false, },
-    zoom: { hidden: false, },
-    eject: { hidden: false, },
-    copy: { hidden: false, },
-    fullscreen: { hidden: false, },
-  },
 });

.storybook/preview.tsx

@@ -0,0 +1,36 @@
+import '../src/index.scss';
+import { Provider } from 'react-redux';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { createTestStore } from '../src/app/store';
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    options: {
+      storySort: (a, b) => {
+        const keyA = a.title;
+        const keyB = b.title;
+        return keyA === keyB
+          ? 0
+          : keyA.localeCompare(keyB, undefined, { numeric: true });
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Provider store={createTestStore()}>
+        <Router>
+          <Story />
+        </Router>
+      </Provider>
+    ),
+  ],
+};
+
+export default preview;