docs: Create initial migration planning documents for React migration

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
2025-07-18 06:39:08 +00:00 · 2025-07-18 06:39:08 +00:00 · 2066b2aa63
commit 2066b2aa63
parent 75e3525cfd
3 changed files with 203 additions and 0 deletions
--- a/react-bootstrap-migration/analysis_report.md
+++ b/react-bootstrap-migration/analysis_report.md
@ -0,0 +1,57 @@
+# Analysis Report: Angular Clarity to React+Bootstrap Migration
+
+This document provides an analysis of the `angular-clarity-master` project to inform its migration to a React and Bootstrap-based stack.
+
+## 1. Project Overview
+
+The existing application is a feature-rich web application built with Angular and the VMWare Clarity design system. It appears to be an enterprise-level application with modules for administration, a "builder" tool (likely for dashboards or forms), and foundational ("fnd") utilities.
+
+## 2. Technology Stack
+
+-   **Framework**: Angular
+-   **UI Library**: VMWare Clarity
+-   **Language**: TypeScript
+-   **Styling**: SCSS
+-   **API Communication**: Angular's HttpClient, likely wrapped in custom services.
+
+## 3. Architecture Analysis
+
+### 3.1. Project Structure
+
+The project follows a standard Angular CLI structure. Key directories of interest for migration are:
+-   `src/app/modules`: Contains the feature modules of the application. This modularity should be preserved in the React application structure.
+-   `src/app/services`: Contains Angular services that encapsulate business logic, API calls, and state management.
+-   `src/app/models`: Contains TypeScript data models (classes and interfaces) that can be largely reused in the new React project.
+
+### 3.2. State Management
+
+-   State seems to be managed through a combination of component state and Angular services.
+-   `UserInfoService` manages user session data, storing it in `sessionStorage`. This will be replaced by a React Context (e.g., `AuthContext`) in the new application.
+-   There is no clear evidence of a centralized state management library like NgRx, but service-based state is common.
+
+### 3.3. Routing
+
+-   The application likely uses `@angular/router` for navigation. The specific routes need to be extracted from the routing module (e.g., `app-routing.module.ts`) to be replicated using `react-router-dom`.
+-   The routes are likely organized hierarchically, corresponding to the feature modules.
+
+### 3.4. Components & UI
+
+-   The application uses Angular components with templates and SCSS styles. These will be converted to React functional components using JSX.
+-   The VMWare Clarity components will be replaced with `react-bootstrap` components or standard Bootstrap classes. A mapping will be required (e.g., Clarity Datagrid -> Bootstrap Table).
+-   Custom SCSS will need to be reviewed and migrated.
+
+### 3.5. Services & Logic
+
+-   **API Services**: Services like `ApiRequestService`, `LoginService`, `UserRegistrationService` handle HTTP requests. This logic will be migrated to custom hooks (e.g., `useApi`) or standalone service modules that use a library like `axios`.
+-   **Business Logic**: Logic encapsulated in services will be moved into custom hooks or utility functions, depending on whether it's related to component lifecycle/state or is pure business logic.
+-   **Configuration**: `AppConfig` service provides application-level configuration. This can be replaced with a configuration file (`config.ts`) and/or a React Context.
+
+## 4. Migration Strategy
+
+1.  **Setup React Project**: Initialize a new TypeScript-based React project (using Vite or Create React App).
+2.  **Core Services**: Re-implement core services first: configuration, API client, authentication context, and notifications.
+3.  **Component Migration**: Migrate components on a per-module basis, starting with the authentication flow (login, registration).
+4.  **Styling**: Apply Bootstrap styling and migrate custom SCSS as components are converted.
+5.  **Data Models**: Reuse TypeScript interfaces from the `models` directory.
+
+This analysis will be used to generate a detailed task list for the migration.
--- a/react-bootstrap-migration/instruction.md
+++ b/react-bootstrap-migration/instruction.md
@ -0,0 +1,69 @@
+# Migration Instructions: React + Bootstrap Application
+
+This document contains instructions for setting up, running, and building the migrated React application.
+
+## 1. Prerequisites
+
+-   Node.js (v16 or higher)
+-   npm or yarn
+
+## 2. Project Setup
+
+1.  **Clone the repository:**
+    ```bash
+    git clone <repository-url>
+    ```
+
+2.  **Navigate to the project directory:**
+    ```bash
+    cd react-bootstrap-migration
+    ```
+
+3.  **Install dependencies:**
+    ```bash
+    npm install
+    ```
+    or
+    ```bash
+    yarn install
+    ```
+
+## 3. Configuration
+
+The application configuration is located in `src/config.ts`. Update the `apiBaseUrl` and other settings to match your environment.
+
+```typescript
+// src/config.ts
+export const config = {
+  apiBaseUrl: 'http://localhost:8080/api', // Update with your backend URL
+  // ... other settings
+};
+```
+
+## 4. Running the Application
+
+To run the application in development mode:
+
+```bash
+npm start
+```
+or
+```bash
+yarn start
+```
+
+This will start the development server, and you can view the application at `http://localhost:3000`.
+
+## 5. Building the Application
+
+To create a production build of the application:
+
+```bash
+npm run build
+```
+or
+```bash
+yarn build
+```
+
+The build artifacts will be stored in the `build/` directory. These are the static files that can be deployed to any web server.
--- a/react-bootstrap-migration/task_list.md
+++ b/react-bootstrap-migration/task_list.md
@ -0,0 +1,77 @@
+# Task List: Angular Clarity to React+Bootstrap Migration
+
+This document tracks the tasks required to migrate the application from Angular/Clarity to React/Bootstrap.
+
+## Phase 1: Project Setup & Core Implementation
+
+-   [ ] **Task 1: Initialize React Project**
+    -   [ ] Use Vite to create a new React project with the TypeScript template.
+    -   [ ] Name the project `react-bootstrap-migration`.
+-   [ ] **Task 2: Install Dependencies**
+    -   [ ] Install `react-router-dom` for routing.
+    -   [ ] Install `bootstrap` and `react-bootstrap`.
+    -   [ ] Install `axios` for HTTP requests.
+    -   [ ] Install `sass` for styling.
+-   [ ] **Task 3: Setup Project Structure**
+    -   [ ] Create directories: `src/components`, `src/hooks`, `src/contexts`, `src/services`, `src/pages`, `src/types`, `src/styles`.
+-   [ ] **Task 4: Implement Core Configuration**
+    -   [ ] Create a `config.ts` to replace `AppConfig`.
+-   [ ] **Task 5: Implement API Client**
+    -   [ ] Create an `axios` instance to replace `ApiRequestService`.
+    -   [ ] Implement interceptors for adding auth tokens and handling errors.
+-   [ ] **Task 6: Implement Auth Context**
+    -   [ ] Create an `AuthContext` to manage user state, replacing `UserInfoService`.
+    -   [ ] Implement login, logout, and session persistence logic.
+-   [ ] **Task 7: Implement Notification System**
+    -   [ ] Create a `NotificationContext` and component to replace `AlertService`. Use `react-bootstrap` Toasts or Alerts.
+
+## Phase 2: Feature Migration
+
+### Authentication
+-   [ ] **Task 8: Setup Routing**
+    -   [ ] Configure `react-router-dom` with public and private routes.
+-   [ ] **Task 9: Migrate Login Page**
+    -   [ ] Create a `LoginPage` component.
+    -   [ ] Convert login form and logic from `LoginService`.
+-   [ ] **Task 10: Migrate User Registration**
+    -   [ ] Create a `UserRegistrationPage` component.
+    -   [ ] Convert `UserRegistrationComponent` logic and `UserRegistrationService` calls.
+-   [ ] **Task 11: Migrate Password Reset**
+    -   [ ] Create a `PasswordResetPage` component.
+    -   [ ] Convert `PasswordResetComponent` logic and `ForgotpassService` calls.
+
+### Admin Module
+-   [ ] **Task 12: Migrate Menu Group Feature**
+    -   [ ] Create `EditMenuGroup` and `ReadOnlyMenuGroup` components.
+    -   [ ] Re-implement logic from `MenuGroupService`.
+-   [ ] **Task 13: Migrate User Maintenance**
+    -   [ ] Create user list and edit components.
+    -   [ ] Re-implement logic from `UsermaintanceService`.
+-   [ ] ...(other admin features)
+
+### Builder Module
+-   [ ] **Task 14: Migrate Dashboard**
+    -   [ ] Create `Dashboard` page.
+    -   [ ] Convert `DashboardnewComponent`.
+-   [ ] **Task 15: Migrate Line Chart Gadget**
+    -   [ ] Create `LineChart` component using a library like `react-chartjs-2` or `recharts`.
+    -   [ ] Convert data fetching logic.
+-   [ ] ...(other builder features)
+
+### FND Module
+-   [ ] **Task 16: Migrate API Registry**
+    -   [ ] Create components for `addapiregistery` and `editapiregistery`.
+-   [ ] ...(other fnd features)
+
+## Phase 3: Finalization
+-   [ ] **Task 17: Review and Refactor**
+    -   [ ] Code review all migrated components and hooks.
+    -   [ ] Ensure consistent coding style and best practices.
+-   [ ] **Task 18: Finalize Styling**
+    -   [ ] Perform a full UI review to ensure Bootstrap is applied correctly.
+    -   [ ] Fix any styling inconsistencies.
+-   [ ] **Task 19: Create Documentation**
+    -   [ ] Write `instruction.md` with detailed setup, build, and run instructions.
+    -   [ ] Update `analysis_report.md` with any findings during migration.
+-   [ ] **Task 20: Final Deliverable Packaging**
+    -   [ ] Ensure all logs, reports, and the final project are organized.