diff --git a/react-bootstrap-migration/analysis_report.md b/react-bootstrap-migration/analysis_report.md new file mode 100644 index 0000000..56057a9 --- /dev/null +++ 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. diff --git a/react-bootstrap-migration/instruction.md b/react-bootstrap-migration/instruction.md new file mode 100644 index 0000000..1edf4fe --- /dev/null +++ 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 + ``` + +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. diff --git a/react-bootstrap-migration/task_list.md b/react-bootstrap-migration/task_list.md new file mode 100644 index 0000000..9571c53 --- /dev/null +++ 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.