Merge pull request #8 from deriv-com/shafin/ChampionTrader/feat-migra…

…te-to-rsbuild

This PR migrates the build system from Vite to Rsbuild for improved p…

README.md

@@ -30,20 +30,20 @@ npm run dev
 ```
 
 After a few seconds, your project should be accessible at the address
-[http://localhost:5173/](http://localhost:5173/)
+[http://localhost:4113/](http://localhost:4113/)
 
 ## Environment Configuration
 
 The application supports different environments (development, staging, production) with environment-specific configurations. Create a `.env` file in the project root with the following variables:
 
 ```bash
 # WebSocket Configuration
-VITE_WS_URL=ws://localhost:8080           # WebSocket server URL
-VITE_WS_PUBLIC_PATH=/ws                   # Public WebSocket endpoint path
-VITE_WS_PROTECTED_PATH=/protected/ws      # Protected WebSocket endpoint path
+RSBUILD_WS_URL=ws://options-trading-api.deriv.ai          # WebSocket server URL
+RSBUILD_WS_PUBLIC_PATH=/ws                   # Public WebSocket endpoint path
+RSBUILD_WS_PROTECTED_PATH=/ws                # Protected WebSocket endpoint path
 
 # REST API Configuration
-VITE_REST_URL=http://localhost:8080       # REST API server URL
+RSBUILD_REST_URL=http://options-trading-api.deriv.ai      # REST API server URL
 ```
 
 Default configurations per environment:

STRUCTURE.md

@@ -0,0 +1,178 @@
+# Project Structure
+
+## Root Directory
+
+```
+/
+├── .env.example              # Environment variables template
+├── .gitignore               # Git ignore rules
+├── components.json          # UI components configuration
+├── global.css              # Global styles
+├── index.html              # Entry HTML file
+├── jest.config.cjs         # Jest testing configuration
+├── package.json            # Project dependencies and scripts
+├── postcss.config.cjs      # PostCSS configuration
+├── rsbuild.config.ts       # Rsbuild configuration
+├── styleguide.css         # Style guide definitions
+├── tailwind.config.cjs    # Tailwind CSS configuration
+└── tsconfig.json          # TypeScript configuration
+```
+
+## Source Code (/src)
+
+### Core Files
+```
+src/
+├── App.tsx                # Root React component
+├── index.tsx             # Application entry point
+├── global.css           # Global styles
+└── env.d.ts             # Environment type definitions
+```
+
+### Components
+```
+src/components/
+├── AddMarketButton/      # Market selection functionality
+├── BottomNav/           # Bottom navigation bar
+├── Chart/               # Trading chart visualization
+├── DurationOptions/     # Trade duration selection
+├── TradeButton/        # Trade execution controls
+├── TradeFields/        # Trade parameter inputs
+└── ui/                 # Shared UI components
+    ├── button.tsx
+    ├── card.tsx
+    ├── switch.tsx
+    └── toggle.tsx
+```
+
+### Layouts
+```
+src/layouts/
+└── MainLayout/          # Main application layout
+    ├── Footer.tsx
+    ├── Header.tsx
+    ├── MainLayout.tsx
+    └── __tests__/
+```
+
+### Screens
+```
+src/screens/
+├── MenuPage/           # Menu screen
+├── PositionsPage/      # Trading positions screen
+└── TradePage/         # Main trading screen
+```
+
+### State Management
+```
+src/stores/
+├── tradeStore.ts       # Trading state management
+└── websocketStore.ts   # WebSocket connection state
+```
+
+### Services
+```
+src/services/
+└── api/
+    ├── rest/           # REST API services
+    │   └── instrument/ # Instrument-related endpoints
+    └── websocket/      # WebSocket services
+        ├── base/       # Base WebSocket functionality
+        ├── contract/   # Contract-specific WebSocket
+        └── market/     # Market data WebSocket
+```
+
+### Hooks
+```
+src/hooks/
+└── websocket/          # WebSocket integration hooks
+    ├── useContractWebSocket.ts
+    └── useMarketWebSocket.ts
+```
+
+### Configuration & Utilities
+```
+src/config/
+└── api.ts             # API configuration
+
+src/lib/
+└── utils.ts           # Utility functions
+
+src/types/
+└── jest.d.ts         # Jest type definitions
+```
+
+## Module Dependencies
+
+### Core Dependencies
+- React and ReactDOM for UI
+- TypeScript for type safety
+- TailwindCSS for styling
+- Zustand for state management
+- Axios for HTTP requests
+
+### Development Dependencies
+- Rsbuild for build tooling
+- Jest and React Testing Library for testing
+- ESLint for code quality
+- PostCSS and Autoprefixer for CSS processing
+
+## Key Patterns
+
+1. **Component Organization**
+   - Atomic design principles
+   - Each component in its own directory
+   - Co-located tests with components
+
+2. **State Management**
+   - Zustand stores for global state
+   - Component-local state where appropriate
+   - WebSocket state centralization
+
+3. **API Integration**
+   - REST services for static data
+   - WebSocket services for real-time data
+   - Type-safe API interfaces
+
+4. **Testing Structure**
+   - Tests co-located with implementation
+   - Separate test directories for complex modules
+   - Shared test utilities and mocks
+
+## Configuration Files
+
+1. **Build & Development**
+   - `rsbuild.config.ts`: Build configuration
+   - `tsconfig.json`: TypeScript settings
+   - `postcss.config.cjs`: CSS processing
+   - `tailwind.config.cjs`: Styling utilities
+
+2. **Testing**
+   - `jest.config.cjs`: Test runner configuration
+   - `src/setupTests.ts`: Test environment setup
+
+3. **Environment**
+   - `.env.example`: Environment variable template
+   - `src/env.d.ts`: Environment type definitions
+
+## Best Practices
+
+1. **File Organization**
+   - Feature-based directory structure
+   - Clear separation of concerns
+   - Co-located tests and types
+
+2. **Naming Conventions**
+   - PascalCase for components
+   - camelCase for utilities and hooks
+   - kebab-case for CSS classes
+
+3. **Import Paths**
+   - Alias imports from `@/*`
+   - Relative imports for closely related files
+   - Explicit import ordering
+
+4. **Testing Organization**
+   - `__tests__` directories for test files
+   - `.test.tsx` suffix for test files
+   - Shared test utilities in appropriate directories

llms.txt

@@ -0,0 +1,40 @@
+# Champion Trader
+
+> Champion Trader is a modern React TypeScript trading application that provides real-time market data and contract pricing through WebSocket connections. Built with React 18, TypeScript, TailwindCSS, Zustand for state management, and Axios for API communication, it follows Test-Driven Development (TDD) methodology and Atomic Component Design principles.
+
+The application is structured around modular, self-contained components and uses a sophisticated WebSocket architecture for real-time data handling. It supports multiple environments (development, staging, production) with environment-specific configurations.
+
+## Project Structure
+
+- [Project Overview](STRUCTURE.md): Complete project structure, organization, and best practices
+- [Directory Layout](STRUCTURE.md#source-code-src): Detailed source code organization
+- [Configuration Files](STRUCTURE.md#configuration-files): Build, development, and testing configurations
+- [Module Dependencies](STRUCTURE.md#module-dependencies): Core and development dependencies
+
+## Architecture
+
+- [Component Structure](src/components/README.md): Details on Atomic Component Design implementation and component organization
+- [WebSocket Architecture](src/services/api/websocket/README.md): Comprehensive documentation of the WebSocket implementation for real-time market data and contract pricing
+- [State Management](src/stores/README.md): Information about Zustand store implementation and state management patterns
+
+## API Integration
+
+- [REST API Documentation](src/services/api/rest/README.md): Available endpoints and usage examples for REST API integration
+- [WebSocket Hooks](src/hooks/websocket/README.md): React hooks for WebSocket integration, including market and contract data subscriptions
+
+## Development
+
+- [Getting Started](README.md): Project setup, prerequisites, and basic usage
+- [Development Guidelines](README.md#development-guidelines): Coding standards and best practices
+- [Import Path Configuration](README.md#import-paths): Path alias usage and configuration
+
+## Testing
+
+- [Testing Guidelines](README.md#testing-guidelines): TDD approach and testing requirements
+- [WebSocket Testing](src/services/api/websocket/README.md#testing): WebSocket-specific testing patterns and examples
+
+## Optional
+
+- [Environment Configuration](README.md#environment-configuration): Detailed environment-specific settings
+- [Version Control Guidelines](README.md#version-control): Commit message format and branching strategy
+- [Production Build](README.md#building-for-production): Production build process and optimization