// Theme muted color
+```
+
+## Usage Example
+
+```tsx
+// 1. Configure content
+// bottomSheetConfig.tsx
+export const bottomSheetConfig = {
+ 'trade-options': {
+ body:
+ }
+};
+
+// 2. Place component
+// App.tsx
+
+
+// 3. Control sheet
+// AnyComponent.tsx
+const { setBottomSheet } = useBottomSheetStore();
+
+// Open with 50% height
+setBottomSheet(true, 'trade-options', '50%');
+
+// Close
+setBottomSheet(false);
+```
+
+## Key Features
+
+1. **Single Instance**
+ - One bottom sheet instance for entire app
+ - Content switched through configuration
+ - Prevents multiple sheets
+
+2. **Gesture Support**
+ - Drag to dismiss
+ - Smooth animations
+ - Touch event cleanup
+
+3. **Theme Integration**
+ - Uses Tailwind CSS variables
+ - Dark mode support
+ - Consistent styling
+
+4. **Dynamic Height**
+ - Percentage values
+ - Pixel values
+ - Viewport height
+
+5. **Performance**
+ - Event listener cleanup
+ - Optimized re-renders
+ - Efficient state updates
diff --git a/src/components/README.md b/src/components/README.md
index e6b8da3..751fd67 100644
--- a/src/components/README.md
+++ b/src/components/README.md
@@ -1,127 +1,102 @@
-# Components Documentation
-
-## Table of Contents
-- [BottomSheet](#bottomsheet)
-- [TradeParam](#tradeparam)
-- [TradeButton](#tradebutton)
-- [Chart](#chart)
-- [DurationOptions](#durationoptions)
-- [AddMarketButton](#addmarketbutton)
-
-## BottomSheet
-
-A reusable bottom sheet component with drag-to-dismiss functionality.
-
-### Key Features
-- Single instance pattern using Zustand store
-- Dynamic height support (%, px, vh)
-- Theme-aware using Tailwind CSS variables
-- Drag gesture support with proper event cleanup
-- Content management through configuration
-
-### Usage
-
-```tsx
-// 1. Configure content in bottomSheetConfig.tsx
-export const bottomSheetConfig = {
- 'my-key': {
- body:
- }
-};
-
-// 2. Place component at root level
-
-
-// 3. Control from anywhere using the store
-const { setBottomSheet } = useBottomSheetStore();
-setBottomSheet(true, 'my-key', '50%');
-```
-
-### State Management
-```typescript
-interface BottomSheetState {
- showBottomSheet: boolean;
- key: string | null;
- height: string;
- setBottomSheet: (show: boolean, key?: string, height?: string) => void;
-}
-```
+# Component Architecture
-### Recent Changes
-- Removed click-outside-to-close behavior
-- Added proper event listener cleanup
-- Migrated to theme-aware colors using Tailwind CSS variables
-- Improved touch event handling
-- Added dynamic height support
+This directory contains React components following Atomic Component Design principles. The components are organized to be modular, self-contained, and independently testable.
-## TradeParam
+## Component Organization
-A card component for displaying trade parameters.
-
-### Usage
-```tsx
-
```
-
-### Props
-```typescript
-interface TradeParamProps {
- label: string;
- value: string;
- onClick?: () => void;
-}
+components/
+├── AddMarketButton/ # Market selection functionality
+├── BottomNav/ # Bottom navigation bar
+├── BottomSheet/ # Bottom sheet
+├── Chart/ # Trading chart visualization
+├── DurationOptions/ # Trade duration selection
+├── TradeButton/ # Trade execution controls
+├── TradeFields/ # Trade parameter inputs
+└── ui/ # Shared UI components
```
-### Recent Changes
-- Made component purely presentational
-- Added optional onClick handler
-- Cursor pointer only shows when onClick is provided
-
-## TradeButton
-
-[Documentation for TradeButton component]
-
-## Chart
-
-[Documentation for Chart component]
-
-## DurationOptions
-
-[Documentation for DurationOptions component]
-
-## AddMarketButton
-
-[Documentation for AddMarketButton component]
-
----
-
-## Component Design Principles
-
-### 1. State Management
-- Use Zustand for global state
-- Keep components as pure as possible
-- Pass event handlers from parent components
-
-### 2. Styling
-- Use Tailwind CSS with theme variables
-- Follow design system color tokens
-- Ensure dark mode compatibility
-
-### 3. Performance
-- Implement proper cleanup
-- Use React.memo where beneficial
-- Lazy load when appropriate
-
-### 4. Accessibility
-- Follow WCAG guidelines
-- Ensure proper keyboard navigation
-- Maintain appropriate color contrast
-
-### 5. Testing
-- Write comprehensive unit tests
-- Test edge cases
-- Mock external dependencies
+## Design Principles
+
+1. **Atomic Design**
+ - Components are built from smallest to largest
+ - Each component has a single responsibility
+ - Components are self-contained with their own styles and logic
+
+2. **Styling**
+ - Uses TailwindCSS for consistent styling
+ - Styles are encapsulated within components
+ - Follows utility-first CSS principles
+
+3. **State Management**
+ - Local state for component-specific logic
+ - Zustand for shared/global state
+ - Props for component configuration
+
+4. **Testing**
+ - Each component has its own test suite
+ - Tests cover component rendering and interactions
+ - Mock external dependencies when needed
+
+## Component Guidelines
+
+1. **File Structure**
+ ```
+ ComponentName/
+ ├── ComponentName.tsx # Main component implementation
+ ├── index.ts # Public exports
+ └── __tests__/ # Test files
+ └── ComponentName.test.tsx
+ ```
+
+2. **Component Implementation**
+ ```typescript
+ import { useState } from 'react';
+ import { cn } from '@/lib/utils';
+
+ interface ComponentProps {
+ // Props interface
+ }
+
+ export function Component({ ...props }: ComponentProps) {
+ // Implementation
+ }
+ ```
+
+3. **Testing Pattern**
+ ```typescript
+ import { render, screen } from '@testing-library/react';
+ import { Component } from './Component';
+
+ describe('Component', () => {
+ it('should render correctly', () => {
+ render(
);
+ // Assertions
+ });
+ });
+ ```
+
+## Best Practices
+
+1. **Component Design**
+ - Keep components focused and single-purpose
+ - Use TypeScript interfaces for props
+ - Implement proper error boundaries
+ - Handle loading and error states
+
+2. **Performance**
+ - Implement lazy loading where appropriate
+ - Memoize expensive calculations
+ - Optimize re-renders using React.memo when needed
+
+3. **Accessibility**
+ - Use semantic HTML elements
+ - Include ARIA attributes where necessary
+ - Ensure keyboard navigation support
+ - Maintain proper color contrast
+
+4. **Code Quality**
+ - Follow consistent naming conventions
+ - Document complex logic
+ - Write comprehensive tests
+ - Use proper TypeScript types
From 486ae856ec00d5340851da06a5299b7707100e55 Mon Sep 17 00:00:00 2001
From: ahmadtaimoor-deriv
<129935294+ahmadtaimoor-deriv@users.noreply.github.com>
Date: Tue, 4 Feb 2025 13:46:47 +0800
Subject: [PATCH 6/7] adding refs in llms.txt
---
llms.txt | 1 +
1 file changed, 1 insertion(+)
diff --git a/llms.txt b/llms.txt
index c410ab6..66470a4 100644
--- a/llms.txt
+++ b/llms.txt
@@ -14,6 +14,7 @@ The application is structured around modular, self-contained components and uses
## Architecture
- [Component Structure](src/components/README.md): Details on Atomic Component Design implementation and component organization
+- [Bottom Sheet Store](src/stores/bottomSheetStore.ts): Centralized bottom sheet state management
- [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
From 90eb2edbfd44c35d53dd3b03f93ed32e408c62d0 Mon Sep 17 00:00:00 2001
From: ahmadtaimoor-deriv
<129935294+ahmadtaimoor-deriv@users.noreply.github.com>
Date: Tue, 4 Feb 2025 14:14:08 +0800
Subject: [PATCH 7/7] add onDragDown callback
---
src/components/BottomSheet/BottomSheet.tsx | 5 +-
src/components/BottomSheet/README.md | 209 ++++++++-------------
src/stores/bottomSheetStore.ts | 11 +-
3 files changed, 92 insertions(+), 133 deletions(-)
diff --git a/src/components/BottomSheet/BottomSheet.tsx b/src/components/BottomSheet/BottomSheet.tsx
index 29fa8c9..bdd6cab 100644
--- a/src/components/BottomSheet/BottomSheet.tsx
+++ b/src/components/BottomSheet/BottomSheet.tsx
@@ -3,7 +3,7 @@ import { useBottomSheetStore } from "@/stores/bottomSheetStore";
import { bottomSheetConfig } from "@/config/bottomSheetConfig";
export const BottomSheet = () => {
- const { showBottomSheet, key, height, setBottomSheet } = useBottomSheetStore();
+ const { showBottomSheet, key, height, onDragDown, setBottomSheet } = useBottomSheetStore();
const sheetRef = useRef
(null);
const dragStartY = useRef(0);
@@ -26,8 +26,9 @@ export const BottomSheet = () => {
if (deltaY > 0) {
sheetRef.current.style.transform = `translateY(${deltaY}px)`;
+ onDragDown?.();
}
- }, []);
+ }, [onDragDown]);
const handleTouchEnd = useCallback(() => {
if (!sheetRef.current) return;
diff --git a/src/components/BottomSheet/README.md b/src/components/BottomSheet/README.md
index 44a58a5..d68bb0e 100644
--- a/src/components/BottomSheet/README.md
+++ b/src/components/BottomSheet/README.md
@@ -1,167 +1,122 @@
# BottomSheet Component
## Overview
-A bottom sheet component that slides up from the bottom of the screen with drag-to-dismiss functionality. Uses Zustand for state management and a configuration-based approach for content.
+A reusable bottom sheet component with drag-to-dismiss functionality and drag callback support.
-## Internal Working
+## Features
+- Single instance pattern using Zustand store
+- Dynamic height support (%, px, vh)
+- Theme-aware using Tailwind CSS variables
+- Drag gesture support with callback
+- Content management through configuration
+
+## Usage
+
+### Basic Usage
+```tsx
+const { setBottomSheet } = useBottomSheetStore();
+
+// Show bottom sheet
+setBottomSheet(true, 'content-key', '50%');
+
+// Hide bottom sheet
+setBottomSheet(false);
+```
+
+### With Drag Callback
+```tsx
+const handleDragDown = () => {
+ console.log('Bottom sheet is being dragged down');
+ // Your drag down logic here
+};
+
+setBottomSheet(true, 'content-key', '50%', handleDragDown);
+```
+
+## State Management
-### 1. State Management
```typescript
-// bottomSheetStore.ts
interface BottomSheetState {
showBottomSheet: boolean; // Controls visibility
key: string | null; // Content identifier
height: string; // Sheet height
- setBottomSheet: (show: boolean, key?: string, height?: string) => void;
+ onDragDown?: () => void; // Optional drag callback
+ setBottomSheet: (
+ show: boolean,
+ key?: string,
+ height?: string,
+ onDragDown?: () => void
+ ) => void;
}
```
-The component uses Zustand to maintain a single source of truth for:
-- Visibility state
-- Current content key
-- Sheet height
+## Height Support
+- Percentage: '50%' (converted to vh)
+- Pixels: '380px'
+- Viewport height: '75vh'
-### 2. Content Configuration
-```typescript
-// bottomSheetConfig.tsx
-interface BottomSheetConfig {
- [key: string]: {
- body: ReactNode;
- }
-}
-```
+## Gesture Handling
-Content is configured through a central config file, allowing for:
-- Reusable content definitions
-- Type-safe content management
-- Easy content updates
+### Drag to Dismiss
+- Drag down on handle bar to dismiss
+- Threshold: 100px vertical distance
+- Smooth animation on release
+- Optional callback during drag
-### 3. Gesture Handling
+### Event Cleanup
+- Event listeners added only when sheet is shown
+- Proper cleanup on sheet close and unmount
-#### Touch Start
-```typescript
-const handleTouchStart = (e: React.TouchEvent) => {
- dragStartY.current = e.touches[0].clientY;
- currentY.current = 0;
- isDragging.current = true;
-}
+## Styling
+Uses Tailwind CSS variables for theme support:
+```tsx
+className="bg-background" // Theme background
+className="bg-muted" // Theme muted color
```
-- Captures initial touch position
-- Sets up dragging state
-#### Touch Move
+## Implementation Details
+
+### Touch Event Handling
```typescript
const handleTouchMove = (e: TouchEvent) => {
if (!isDragging.current) return;
-
+
const deltaY = e.touches[0].clientY - dragStartY.current;
if (deltaY > 0) {
+ // Update sheet position
sheetRef.current.style.transform = `translateY(${deltaY}px)`;
+ // Call drag callback if provided
+ onDragDown?.();
}
-}
-```
-- Calculates drag distance
-- Updates sheet position
-- Only allows downward dragging
-
-#### Touch End
-```typescript
-const handleTouchEnd = () => {
- if (currentY.current > 100) {
- setBottomSheet(false);
- }
- // Reset position and state
-}
-```
-- Checks if drag distance exceeds threshold
-- Closes sheet if threshold met
-- Resets position and state
-
-### 4. Event Cleanup
-```typescript
-useEffect(() => {
- if (showBottomSheet) {
- document.addEventListener("touchmove", handleTouchMove);
- document.addEventListener("touchend", handleTouchEnd);
-
- return () => {
- document.removeEventListener("touchmove", handleTouchMove);
- document.removeEventListener("touchend", handleTouchEnd);
- };
- }
-}, [showBottomSheet, handleTouchMove, handleTouchEnd]);
+};
```
-- Adds event listeners when sheet is shown
-- Removes listeners when sheet is closed
-- Prevents memory leaks
-### 5. Height Management
+### Height Processing
```typescript
const processedHeight = height.endsWith('%')
? `${parseFloat(height)}vh`
: height;
```
-Supports multiple height formats:
-- Percentage (converted to vh)
-- Pixels
-- Viewport height
-
-### 6. Styling
-Uses Tailwind CSS variables for theme-aware styling:
-```tsx
- // Theme background
-
// Theme muted color
-```
-## Usage Example
+## Example
```tsx
-// 1. Configure content
-// bottomSheetConfig.tsx
-export const bottomSheetConfig = {
- 'trade-options': {
- body:
- }
-};
-
-// 2. Place component
-// App.tsx
-
-
-// 3. Control sheet
-// AnyComponent.tsx
-const { setBottomSheet } = useBottomSheetStore();
-
-// Open with 50% height
-setBottomSheet(true, 'trade-options', '50%');
+import { useBottomSheetStore } from "@/stores/bottomSheetStore";
-// Close
-setBottomSheet(false);
-```
-
-## Key Features
+function MyComponent() {
+ const { setBottomSheet } = useBottomSheetStore();
-1. **Single Instance**
- - One bottom sheet instance for entire app
- - Content switched through configuration
- - Prevents multiple sheets
+ const handleDragDown = () => {
+ // Handle drag down event
+ };
-2. **Gesture Support**
- - Drag to dismiss
- - Smooth animations
- - Touch event cleanup
+ const showSheet = () => {
+ setBottomSheet(true, 'my-content', '50%', handleDragDown);
+ };
-3. **Theme Integration**
- - Uses Tailwind CSS variables
- - Dark mode support
- - Consistent styling
-
-4. **Dynamic Height**
- - Percentage values
- - Pixel values
- - Viewport height
-
-5. **Performance**
- - Event listener cleanup
- - Optimized re-renders
- - Efficient state updates
+ return (
+
+ );
+}
diff --git a/src/stores/bottomSheetStore.ts b/src/stores/bottomSheetStore.ts
index 5f89a56..a8f3278 100644
--- a/src/stores/bottomSheetStore.ts
+++ b/src/stores/bottomSheetStore.ts
@@ -4,16 +4,19 @@ interface BottomSheetState {
showBottomSheet: boolean;
key: string | null;
height: string;
- setBottomSheet: (show: boolean, key?: string, height?: string) => void;
+ onDragDown?: () => void;
+ setBottomSheet: (show: boolean, key?: string, height?: string, onDragDown?: () => void) => void;
}
export const useBottomSheetStore = create((set) => ({
showBottomSheet: false,
key: null,
- height: '400px',
- setBottomSheet: (show: boolean, key?: string, height?: string) => set({
+ height: '380px',
+ onDragDown: undefined,
+ setBottomSheet: (show: boolean, key?: string, height?: string, onDragDown?: () => void) => set({
showBottomSheet: show,
key: show ? key || null : null,
- height: height || '400px'
+ height: height || '380px',
+ onDragDown: onDragDown
}),
}));