Phase 1: React Migration Infrastructure Setup (VJ-3)

angular.json

@@ -92,6 +92,7 @@
               "zone.js/testing"
             ],
             "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "scss",
             "assets": [
               {

package.json

@@ -6,7 +6,7 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test --no-watch --browsers=ChromeHeadless",
+    "test": "CHROME_BIN=/usr/bin/google-chrome ng test --no-watch --browsers=ChromeHeadlessCI",
     "test:watch": "ng test",
     "test:coverage": "ng test --no-watch --code-coverage --browsers=ChromeHeadless",
     "test:chrome": "ng test --no-watch --browsers=ChromeHeadless",

react-clinical-portal/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

react-clinical-portal/.prettierrc.json

@@ -0,0 +1,11 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "bracketSpacing": true
+}

react-clinical-portal/README.md

@@ -0,0 +1,56 @@
+# React Clinical Portal - Phase 1
+
+This is the initial React project setup for migrating the Angular Clinical Trial Portal application.
+
+## Architectural Decisions
+
+### Testing Framework: Vitest
+- **Decision**: Vitest instead of Jest + React Testing Library
+- **Reasoning**: Better integration with Vite build system, faster execution, compatible with React Testing Library, working reference implementation in COG-GTM/cypress-realworld-app
+- **Reference**: cypress-realworld-app uses Vitest 0.33.0 with excellent integration
+
+### ESLint Configuration: Modern Flat Config
+- **Decision**: ESLint flat config format (eslint.config.js) with ESLint 9
+- **Reasoning**: Future of ESLint, better TypeScript integration, cleaner configuration, used in COG-GTM/react-hn
+- **Reference**: react-hn demonstrates modern flat config with React plugins
+
+### React Router: Version 7
+- **Decision**: React Router v7.9.1
+- **Reasoning**: Latest stable version, improved TypeScript support, better performance, modern API with BrowserRouter/Routes/Route pattern
+- **Reference**: react-hn uses v7 with clean routing setup
+
+### UI Component Library: Material-UI v5
+- **Decision**: MUI v5 with Emotion styling
+- **Reasoning**: Production-grade component library, excellent TypeScript support, comprehensive documentation
+- **Reference**: cypress-realworld-app demonstrates MUI v5 with theme customization
+
+## Setup
+
+```bash
+npm install
+npm run dev
+```
+
+## Available Scripts
+
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run lint` - Run ESLint
+- `npm run test` - Run tests (single run)
+- `npm run test:watch` - Run tests in watch mode
+- `npm run format:check` - Check Prettier formatting
+
+## Success Criteria Status
+
+- ✅ React project builds successfully with `npm run build`
+- ✅ All ESLint rules pass with `npm run lint` (0 errors)
+- ✅ Prettier formatting passes with `npm run format:check`
+- ✅ Test runner executes successfully
+- ✅ React Router renders at least one route
+- ✅ UI component library (MUI) renders basic components
+
+## References
+
+- Primary: COG-GTM/react-hn - Modern Vite + React + Router v7 setup
+- Secondary: COG-GTM/cypress-realworld-app - MUI v5 + Vitest implementation
+- Prettier Config: Preserved from angular_react_demo/.prettierrc.json

react-clinical-portal/eslint.config.js

@@ -0,0 +1,30 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import react from 'eslint-plugin-react';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+);

react-clinical-portal/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Clinical Trial Portal - React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>