UI Component Library
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The UI Component Library of the ElmecV2-Demo project is a collection of reusable, cross-platform interface elements built using React Native and Expo. It is designed to provide a consistent user experience across iOS, Android, and Web platforms, adhering to ELMEC's branding guidelines. The library focuses on performance optimization through virtualization (FlatList), memoization, and lazy loading to ensure a fluid mobile experience. Sources: README.md:10-40, VALIDACION-COMPLETA.md:120-135
The library encompasses specialized modules for administrative monitoring, real-time communication, and media handling. It integrates deeply with the project's state management (Zustand) and backend services (Supabase) to provide reactive components that handle real-time updates and optimistic UI changes. Sources: README.md:43-55, REPORTE_CHAT_MODULE.md:235-255
Core UI Modules
Administrative Dashboard Components
The AdminDashboard module provides high-level visualization of system metrics and user activity. It utilizes specialized sub-components like StatCard and SimpleChart to present data to administrative users. Sources: components/AdminDashboard.tsx:32-45
- StatCard: A memoized component that displays specific metrics (Total Users, Requests, etc.) with trend indicators and themed icons.
- SimpleChart: A custom-built bar chart component for visualizing data distributions, such as request status.
- MetricsList: A detailed breakdown of key performance indicators like resolution rates and satisfaction scores.
The diagram illustrates the hierarchical structure of the Administration Dashboard, showing how the main view decomposes into interactive selectors, statistical grids, and visual charts. Sources: components/AdminDashboard.tsx:110-210
Messaging & Communication UI
The communication components are primarily housed within the chat module. The ChatRoom component serves as the primary interface for real-time interaction, supporting various message types and status indicators. Sources: app/(tabs)/chat/[roomId].tsx:145-165
| Component Feature | Description | File Reference |
|---|---|---|
| Message Bubble | Distinct styles for own/other messages with reply previews. | app/(tabs)/chat/[roomId].tsx:605-620 |
| Typing Indicator | Animated dots appearing when other participants are typing. | app/(tabs)/chat/[roomId].tsx:818-840 |
| Emoji Picker | Category-based selection grid (Frecuentes, Personas, etc.). | app/(tabs)/chat/[roomId].tsx:45-135 |
| Attachment Menu | Linear gradient buttons for Camera, Gallery, and Files. | app/(tabs)/chat/[roomId].tsx:885-920 |
| Audio Player | Progress-aware waveform interface for voice notes. | app/(tabs)/chat/[roomId].tsx:658-690 |
File & Media Handling
The UI library includes specialized components for media management, specifically for the "Requests" module and "Chat" rooms. This includes FileUploadComponent for selecting images or documents and an ImageViewer for full-screen inspection. Sources: RESUMEN_FINAL.md:135-155, FIXES-APLICADOS.md:38-55
This sequence shows the standard flow for UI components handling external media, from local selection to cloud persistence and database association. Sources: app/(tabs)/chat/[roomId].tsx:245-290, RESUMEN_FINAL.md:160-180
Implementation Details
Shared Design Constants
The library utilizes a standardized color palette and typography, often implemented via LinearGradient for headers and interactive elements. Sources: app/(tabs)/chat/[roomId].tsx:850-865, components/AdminDashboard.tsx:320-350
// Example of corporate colors implemented in Admin components
const colors = {
primary: '#1e40af', // Blue
success: '#10b981', // Green
warning: '#f59e0b', // Amber
danger: '#ef4444', // Red
background: '#f9fafb'
};
Sources: components/AdminDashboard.tsx:78-95, FIXES-APLICADOS.md:270-285
Messaging Interaction Logic
The input interface handles multiple states, including text input, audio recording, and editing mode. Sources: app/(tabs)/chat/[roomId].tsx:925-970
The flow represents the dynamic UI states of the chat input component based on user context and interaction type. Sources: app/(tabs)/chat/[roomId].tsx:200-240, app/(tabs)/chat/[roomId].tsx:925-970
Technical Specifications
Input Handling Parameters
The main input components (TextInput) are configured for specific behaviors within the mobile environment:
- multiline: Enabled for messages and request descriptions.
- maxLength: Capped at 1000 characters for messages.
- behavior:
KeyboardAvoidingViewset to 'padding' for iOS and 'height' for Android to maintain visibility.
Sources: app/(tabs)/chat/[roomId].tsx:848-855, app/(tabs)/chat/[roomId].tsx:930-945
Performance Optimizations
- Virtualization:
FlatListis configured withinitialNumToRender={15}andwindowSize={10}to handle large message histories without memory lag. Sources: app/(tabs)/chat/[roomId].tsx:785-795 - Memoization: Static components like
StatCardandSimpleChartuseReact.memoto prevent unnecessary re-renders during dashboard updates. Sources: components/AdminDashboard.tsx:75-105
Conclusion
The ElmecV2-Demo UI Component Library provides a robust foundation for the application's interface, bridging backend data with interactive mobile views. By leveraging specialized components for data visualization, real-time messaging, and media management, the library ensures that complex workflows (like request management and administrative oversight) remain intuitive and performant. Sources: VALIDACION-COMPLETA.md:220-235, RESUMEN_FINAL.md:250-265