Merge pull request #57 from deriv-com/f_positon_fix

Removing border from contract Details desktop, add component readme files and renaming left-sidebar

llms.txt

@@ -29,6 +29,24 @@ The following components are implemented but reserved for future use:
 - [Stake Component](src/components/Stake/README.md)
   - [SSE Integration](src/components/Stake/hooks/useStakeSSE.ts)
   - [Validation](src/components/Stake/utils/validation.ts)
+- [Positions Sidebar](src/components/PositionsSidebar/README.md)
+  - Overview: A sidebar component that displays open and closed trading positions
+  - Features:
+    - Tab switching between open and closed positions
+    - Filtering by trade types (for open positions)
+    - Filtering by time periods (for closed positions)
+    - Real-time position updates
+    - Total profit/loss display
+  - Components:
+    - FilterDropdown: Reusable dropdown component for position filtering
+    - Custom Hooks:
+      - useFilteredPositions: Manages position filtering logic
+  - Implementation:
+    - Follows Atomic Design principles
+    - Uses TypeScript for type safety
+    - Implements TDD with comprehensive test coverage
+    - Responsive layout with proper overflow handling
+    - Modular and maintainable code structure
 
 ## Typography System
 

src/components/AccountSwitcher/README.md

@@ -0,0 +1,102 @@
+# AccountSwitcher Component
+
+A component that enables users to view and switch between different trading accounts. It displays account information and provides a smooth switching mechanism.
+
+## Features
+
+- Account list display
+- Account switching functionality
+- Current account information display
+- Real-time balance updates
+- Smooth transitions
+
+## Component Structure
+
+```
+AccountSwitcher/
+├── AccountInfo.tsx      # Account information display
+├── AccountSwitcher.tsx # Main switcher component
+├── index.ts            # Exports
+└── README.md           # This file
+```
+
+## Usage
+
+```tsx
+import { AccountSwitcher } from '@/components/AccountSwitcher';
+
+function Header() {
+  return (
+    <div className="header">
+      <AccountSwitcher />
+    </div>
+  );
+}
+```
+
+## Components
+
+### AccountSwitcher
+
+Main component that handles the account switching functionality.
+
+#### Props
+None - The component uses internal state management through stores.
+
+### AccountInfo
+
+Component that displays individual account information.
+
+#### Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| accountId | string | Unique identifier for the account |
+| balance | string | Account balance |
+| currency | string | Account currency code |
+| isActive | boolean | Whether this is the currently selected account |
+
+## State Management
+
+The component uses Zustand for state management:
+- Account list
+- Current account
+- Loading states
+- Error states
+
+## Features
+
+### Account Display
+- Account ID
+- Account type
+- Balance with currency
+- Active status indicator
+
+### Switching Mechanism
+- Smooth transition animation
+- Loading state handling
+- Error handling
+- Success confirmation
+
+## Styling
+
+The component uses TailwindCSS for styling:
+- Responsive dropdown
+- Hover and active states
+- Proper spacing and alignment
+- Consistent typography
+
+## Best Practices
+
+1. Handle loading states appropriately
+2. Provide error feedback
+3. Maintain responsive design
+4. Clean up listeners on unmount
+5. Follow atomic design principles
+6. Maintain test coverage
+
+## Related Components
+
+- BalanceDisplay: Shows account balance
+- CurrencyIcon: Displays currency symbols
+- NotificationProvider: Shows switching notifications

src/components/BottomNav/README.md

@@ -1,95 +1,131 @@
-# Bottom Navigation Component
+# BottomNav Component
 
-A responsive bottom navigation bar component for the Champion Trader application that provides primary navigation on mobile devices.
+A mobile-first navigation component that provides easy access to primary application features through a bottom navigation bar.
 
-## Overview
+## Features
 
-The Bottom Navigation component implements a mobile-first navigation interface that adapts based on the user's authentication status and device type. It follows atomic component design principles and is implemented using Test-Driven Development (TDD).
+- Mobile-optimized navigation
+- Icon and label display
+- Active route indication
+- Badge support
+- Smooth transitions
+- Touch-friendly design
 
 ## Component Structure
 
 ```
 BottomNav/
 ├── BottomNav.tsx    # Main component
-├── index.ts        # Public exports
-└── __tests__/     # Test suite
-    └── BottomNav.test.tsx
+├── index.ts         # Exports
+└── README.md        # This file
 ```
 
 ## Usage
 
-```typescript
+```tsx
 import { BottomNav } from '@/components/BottomNav';
 
-function App() {
+function MobileLayout() {
   return (
-    <div>
-      <main>{/* Main content */}</main>
+    <div className="mobile-layout">
+      <main>{/* Content */}</main>
       <BottomNav />
     </div>
   );
 }
 ```
 
-## Features
-
-- Responsive mobile-first design
-- Authentication-aware navigation
-- Smooth transitions and animations
-- Active route highlighting
-- Device-type specific rendering
+## Props
 
-## Implementation Details
+| Prop | Type | Description |
+|------|------|-------------|
+| className? | string | Optional CSS classes |
+| items? | NavItem[] | Optional custom navigation items |
 
-The component follows atomic design principles:
-- Self-contained navigation logic
-- Independent state management
-- Clear prop interfaces
-- Comprehensive test coverage
-
-### State Management
-
-The component manages:
-- Authentication state via clientStore
-- Active route state
-- Device type detection
-- Navigation state
-
-### Navigation Items
-
-Navigation items are conditionally rendered based on authentication status:
+## Types
 
 ```typescript
 interface NavItem {
   label: string;
-  icon: React.ReactNode;
+  icon: IconComponent;
   path: string;
-  requiresAuth: boolean;
+  badge?: number | string;
 }
 ```
 
-## Testing
+## Features
 
-The component includes comprehensive tests following TDD methodology:
-- Unit tests for navigation logic
-- Authentication state tests
-- Device type rendering tests
-- Route handling tests
-- Transition animation tests
+### Navigation Items
+- Icon representation
+- Text labels
+- Active state
+- Optional badges
+- Touch targets
+
+### Interactions
+- Touch feedback
+- Active highlighting
+- Route transitions
+- Badge updates
+
+### Responsive Behavior
+- Portrait/Landscape handling
+- Safe area support
+- Keyboard awareness
+- Gesture handling
+
+## Styling
+
+The component uses TailwindCSS for styling:
+- Mobile-first design
+- Touch-friendly sizing
+- Active states
+- Badge styling
+- iOS/Android adaptations
+
+## State Management
+
+The component integrates with:
+- Route management
+- Badge updates
+- Device orientation
+- Keyboard visibility
 
 ## Best Practices
 
-- Uses TailwindCSS for consistent styling
-- Implements proper cleanup for event listeners
-- Handles all authentication states
-- Provides clear visual feedback
-- Maintains accessibility standards
-- Supports keyboard navigation
-
-## Responsive Design
-
-The component implements responsive behavior:
-- Full-width on mobile devices
-- Hidden on desktop (uses side navigation instead)
-- Adapts to device orientation changes
-- Handles safe area insets on mobile devices
+1. Use clear, recognizable icons
+2. Keep labels short and clear
+3. Ensure adequate touch targets
+4. Handle safe areas properly
+5. Follow atomic design principles
+6. Maintain test coverage
+
+## Accessibility
+
+The component implements:
+- ARIA roles
+- Touch targets
+- Focus indicators
+- Screen reader support
+- High contrast modes
+
+## Platform Considerations
+
+### iOS
+- Safe area insets
+- Bottom sheet interaction
+- Gesture handling
+- Native-like feel
+
+### Android
+- Material Design alignment
+- Back button handling
+- Navigation patterns
+- System UI integration
+
+## Related Components
+
+- SideNav: Desktop navigation
+- MenuSidebar: Expanded menu
+- Header: Top navigation
+- PositionsSidebar: Trading panel