Custom Form Inputs
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The "Custom Form Inputs" system in the Wasalny landing page project provides a tailored user interface for selecting travel routes, vehicle categories, and passenger details. These components are designed to handle complex selection logic, such as filtering locations based on route types (travel vs. internal) and managing state for a pricing calculator.
This system integrates specialized UI components with custom React hooks to ensure a seamless data flow between user selections and the final price calculation. It utilizes modern web standards including React 19, TypeScript for type safety, and Tailwind CSS for RTL-compatible styling.
Sources: src/hooks/usePricingCalculator.ts:1-15, src/components/ui/CustomSelect.tsx:1-12, AGENTS.md
Component Architecture
CustomSelect Component
The CustomSelect component is a reusable, searchable dropdown interface. It replaces standard HTML select elements to provide a consistent look and feel with support for search filtering, icons, and RTL (Right-to-Left) text alignment.
- State Management: It uses local state to manage the open/closed status of the dropdown (
isOpen) and the current search string (searchQuery). - Search Logic: It performs case-insensitive filtering of options based on the user's input.
- UX Features: It includes an effect to automatically focus the search input when the dropdown opens and a listener to close the menu when clicking outside the component.
Sources: src/components/ui/CustomSelect.tsx:29-80
Button Component
The Button component provides standardized interaction points within forms. It supports various variants (primary, secondary, accent) and sizes, often incorporating icons from the lucide-react library to enhance visual context.
Sources: src/components/sections/HeroSection.tsx:115-131, src/index.css:168-185
Data Flow and Logic
The inputs are orchestrated primarily by the usePricingCalculator hook, which manages the relationship between different form fields.
Selection Flow
When a user interacts with the form inputs, the following logic is triggered:
- Route Type Selection: Changing the route type (e.g., from "travel" to "internal") resets the
fromLocationandtoLocationselections. - Dependent Filtering: The "To" location dropdown is filtered dynamically based on the selected "From" location.
- Automatic Detection: The hook includes logic to detect the route type automatically once both locations are chosen.
- Validation: The system validates passenger counts against vehicle capacities (e.g., ensuring a Sedan is not selected for more than its max passenger limit).
The following diagram illustrates the interaction between the UI components and the logic hook:
Implementation Details
Component Properties (Props)
The CustomSelect component uses a structured interface for configuration:
| Prop | Type | Description |
|---|---|---|
options | Option[] | Array of objects containing id and name. |
searchable | boolean | Enables/disables the internal search input. |
icon | ReactNode | Optional icon displayed on the left of the selector. |
onChange | (value: string) => void | Callback triggered when an option is selected. |
Sources: src/components/ui/CustomSelect.tsx:8-27
State Persistence
The form state managed by the inputs is persisted to localStorage under the key wasalny_pricing_v2. This ensures that user selections for route types and vehicle categories are maintained across page refreshes.
Sources: src/hooks/usePricingCalculator.ts:124-143
Styling and RTL Support
Form inputs are styled using Tailwind CSS layers. The index.css file defines specific component classes like .btn-primary and .card. For the Arabic interface, the project uses flip-rtl utilities and right-aligned text within the CustomSelect component to ensure proper layout.
Sources: src/index.css:168-175, src/components/ui/CustomSelect.tsx:109-120
Conclusion
The Custom Form Inputs serve as the primary bridge between the user and the Wasalny pricing engine. By combining a flexible CustomSelect UI component with the robust logic of the usePricingCalculator hook, the system provides a responsive and validated experience for trip booking and price estimation.
Sources: src/App.tsx:30-45, src/hooks/usePricingCalculator.ts:178-200