Skip to content

Ui Components

Jump to bottom
Radch-enko edited this page Jul 24, 2025 · 2 revisions

UI Components

This document covers the reusable UI components in the tablet client application, including date/time pickers, modal dialogs, form controls, and the overall design system implementation. These components form the building blocks for the tablet interface and are designed to be composable and consistent across different features.

For information about how these components integrate into specific features, see Booking Features. For details about the overall navigation and app structure, see Navigation & App Structure.

Overview

The UI component system in the tablet application is built using Compose Multiplatform and follows Material3 design principles. Components are organized into reusable modules that can be composed together to create complex user interfaces while maintaining consistency and performance.

The system includes specialized components for:

  • Date and time selection
  • Modal dialogs and overlays
  • Loading states and error handling
  • Form controls and input validation
  • Success/failure feedback patterns

Component Architecture

component-architecture.svg

Component Hierarchy and Dependencies

The UI components follow a hierarchical structure where lower-level components (theme, common utilities) are composed into higher-level specialized components, which are then integrated into feature modules.

Date and Time Picker Components

DatePickerView

The DatePickerView component provides adaptive date selection functionality using the CALF (Compose Adaptive Layout Foundation) library for cross-platform compatibility.

Property Type Description
currentDate LocalDateTime Initial date to display
onChangeDate (LocalDate) -> Unit Callback when date changes
modifier Modifier Compose modifier for styling

The component uses rememberAdaptiveDatePickerState to manage selection state and converts between different time representations using utility functions from the domain layer.

datepickerview.svg

Date Selection Flow

TimePickerView

The TimePickerView component handles time selection with 24-hour format support and vertical layout optimization for tablet screens.

Property Type Description
currentDate LocalDateTime Initial time to display
onSnap (LocalTime) -> Unit Callback when time changes
modifier Modifier Compose modifier for styling

The component automatically responds to hour and minute changes using LaunchedEffect and converts the selected time to LocalTime format.

DateTimePickerModalView

The combined modal dialog integrates both date and time selection in a single interface, providing a complete date-time selection experience.

Modal Layout Structure

The modal uses a responsive layout with specific width allocations for optimal tablet usage. The confirmation button displays the selected date/time or shows a booking conflict message.

Modal Dialog System

FastBooking Modal States

The fast booking feature demonstrates a sophisticated modal state management system with different UI representations based on the booking process state.

fastbooking-modal-states.svg

Modal State Transitions

The modal system uses sealed interface ModalConfig to represent different states:

Modal Type Purpose Components Used
LoadingModal Shows progress during booking Loader, CrossButtonView
SuccessModal Confirms successful booking SuccessFastSelectRoomView
FailureModal Handles booking failures FailureFastSelectRoomView

Dialog Properties and Behavior

The dialog system uses adaptive properties based on the modal content:

DialogProperties(
    usePlatformDefaultWidth = modal.instance != FastBookingComponent.ModalConfig.LoadingModal
)

This ensures that loading modals use full-screen behavior while other modals use platform-appropriate sizing.

Component Integration Patterns

State Management Integration

UI components integrate with business logic through component state flows and intent handling patterns:

state-management-integration.svg

Component-UI Integration Pattern

Theme and Styling System

Components consistently use the LocalCustomColorsPalette theme system for styling:

Color Property Usage Components
elevationBackground Modal/dialog backgrounds DatePicker, TimePicker, FastBooking
primaryTextAndIcon Text and icon colors All text components
pressedPrimaryButton Button container colors Confirmation buttons

The theme system ensures visual consistency across all UI components while supporting different color schemes.

Localization and String Resources

The UI components use a centralized string resource system for internationalization. Currently supporting Russian language with comprehensive coverage of UI text.

Key String Categories

Category Examples Usage
Time/Date start_date_time, short_minuets, short_hours Date/time formatting
Booking Status booked_until, cancel_book, no_free Room availability
User Actions apply_date_time_for_booking, cancel, on_main Button labels
Error Messages connection_lost, failure_text, error Error handling
Success Messages success_text Confirmation feedback

String Interpolation

The system supports parameterized strings for dynamic content:

<string name="booked_until">Booking for %1$s</string>
<string name="find_quiet_place">%2$s will be free in %1$s minutes. In the meantime, try to find a quiet spot in the office.</string>

Components use these strings through the stringResource() function with parameter substitution.

Clone this wiki locally