related-ui-components 2.1.9 → 2.2.1

package/src/components/TravelBooking/FlightForm.tsx

@@ -1,5 +1,11 @@
 import { ThemeType, useTheme } from "../../theme";
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   View,
   Text,
@@ -11,9 +17,9 @@ import {
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import CustomInput from "../Input/Input";
-import DateRangePicker from "../DateRangePicker/DateRangePicker"; 
-import SuggestionList from "../Suggestions/SuggestionList"; 
-import { FlightSuggestions, FormInputType } from "./types"; 
+import DateRangePicker from "../DateRangePicker/DateRangePicker";
+import SuggestionList from "../Suggestions/SuggestionList";
+import { FlightSuggestions, FormInputType } from "./types";
 import { TextInput } from "react-native-gesture-handler";
 
 // --- Helper Types ---
@@ -39,6 +45,13 @@ export interface FlightFormProps {
   }) => void;
   onTextChange?: (text: string) => void;
 
+  onSelectionChange?: (details: {
+    from: LocationData | undefined;
+    to: LocationData | undefined;
+    departure: string | undefined; // Send YYYY-MM-DD
+    return?: string | undefined; // Send YYYY-MM-DD
+  }) => void;
+
   fromLabel?: string;
   fromPlaceholder?: string;
 
@@ -56,34 +69,36 @@ export interface FlightFormProps {
   suggestionData?: FlightSuggestions[];
 
   // --- Style Props ---
-  containerStyle?: StyleProp<ViewStyle>; 
-  inputGroupContainerStyle?: StyleProp<ViewStyle>; 
-  inputWrapperStyle?: StyleProp<ViewStyle>; 
-  customInputContainerStyle?: StyleProp<ViewStyle>; 
-  labelStyle?: StyleProp<TextStyle>; 
+  containerStyle?: StyleProp<ViewStyle>;
+  inputGroupContainerStyle?: StyleProp<ViewStyle>;
+  inputWrapperStyle?: StyleProp<ViewStyle>;
+  customInputContainerStyle?: StyleProp<ViewStyle>;
+  inputStyle?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
   swapButtonContainerStyle?: StyleProp<ViewStyle>;
   swapButtonStyle?: StyleProp<ViewStyle>;
   swapIconStyle?: StyleProp<TextStyle>;
-  departureRowStyle?: StyleProp<ViewStyle>; 
+  departureRowStyle?: StyleProp<ViewStyle>;
   searchButtonStyle?: StyleProp<ViewStyle>;
-  searchIconStyle?: StyleProp<TextStyle>; 
+  searchIconStyle?: StyleProp<TextStyle>;
 
   // DateRangePicker specific styles (passed down)
   dateRangePickerOuterContainerStyle?: StyleProp<ViewStyle>;
   dateRangePickerLabelStyle?: StyleProp<TextStyle>;
   dateRangePickerInputGroupStyle?: StyleProp<ViewStyle>;
-  dateRangePickerCalendarContainerStyle?: StyleProp<ViewStyle>; 
+  dateRangePickerCalendarContainerStyle?: StyleProp<ViewStyle>;
+  dateRangePickerInputContainerStyle?: StyleProp<ViewStyle>;
 
   // SuggestionList specific styles
   suggestionListContainerStyle?: StyleProp<ViewStyle>;
   // Styles for the default suggestion item rendering
-  suggestionItemGroupStyle?: StyleProp<ViewStyle>; 
-  suggestionCityRowStyle?: StyleProp<ViewStyle>; 
-  suggestionCityIconStyle?: StyleProp<TextStyle>; 
-  suggestionCityTextStyle?: StyleProp<TextStyle>; 
+  suggestionItemGroupStyle?: StyleProp<ViewStyle>;
+  suggestionCityRowStyle?: StyleProp<ViewStyle>;
+  suggestionCityIconStyle?: StyleProp<TextStyle>;
+  suggestionCityTextStyle?: StyleProp<TextStyle>;
   suggestionAirportTouchableStyle?: StyleProp<ViewStyle>;
   suggestionAirportIconStyle?: StyleProp<TextStyle>;
-  suggestionAirportTextStyle?: StyleProp<TextStyle>; 
+  suggestionAirportTextStyle?: StyleProp<TextStyle>;
 }
 // --- Component ---
 const FlightForm: React.FC<FlightFormProps> = ({
@@ -130,6 +145,9 @@ const FlightForm: React.FC<FlightFormProps> = ({
   suggestionAirportTouchableStyle,
   suggestionAirportIconStyle,
   suggestionAirportTextStyle,
+  inputStyle,
+  onSelectionChange,
+  dateRangePickerInputContainerStyle,
 }) => {
   const { theme, isRTL } = useTheme();
   const styles = useMemo(() => themedStyles(theme, isRTL), [theme, isRTL]);
@@ -160,6 +178,22 @@ const FlightForm: React.FC<FlightFormProps> = ({
     onSwapPress?.(currentFrom, currentTo);
   }, [fromLocation, toLocation, onSwapPress]);
 
+  useEffect(() => {
+    onSelectionChange?.({
+      from: fromLocation,
+      to: toLocation,
+      departure: departureDate,
+      return: isOneWay ? undefined : returnDate,
+    });
+  }, [
+    fromLocation,
+    toLocation,
+    departureDate,
+    returnDate,
+    isOneWay,
+    onSelectionChange,
+  ]);
+
   const handleSearch = useCallback(() => {
     onSearchPress?.({
       from: fromLocation,
@@ -178,7 +212,10 @@ const FlightForm: React.FC<FlightFormProps> = ({
 
   // --- Default Suggestion Renderer (Now Stylable) ---
   const suggestionRenderItem = (item: FlightSuggestions) => (
-    <View key={item.id} style={[styles.suggestionItemGroup, suggestionItemGroupStyle]}>
+    <View
+      key={item.id}
+      style={[styles.suggestionItemGroup, suggestionItemGroupStyle]}
+    >
       <View style={[styles.suggestionCityRow, suggestionCityRowStyle]}>
         <Ionicons
           name="airplane" // Consider making icon name a prop too if needed
@@ -192,7 +229,7 @@ const FlightForm: React.FC<FlightFormProps> = ({
       </View>
       {item.airports.map((airport, index) => (
         <TouchableOpacity
-          key={`${item.id}-${index}`} 
+          key={`${item.id}-${index}`}
           style={[
             styles.suggestionAirportTouchable,
             suggestionAirportTouchableStyle,
@@ -233,6 +270,7 @@ const FlightForm: React.FC<FlightFormProps> = ({
               setFromLocation(text);
               onTextChange?.(text);
             }}
+            inputStyle={inputStyle}
             label={fromLabel}
             value={fromLocation}
             labelStyle={[styles.label, labelStyle]}
@@ -248,7 +286,7 @@ const FlightForm: React.FC<FlightFormProps> = ({
                 }
               }, 150);
             }}
-            containerStyle={customInputContainerStyle}
+            inputContainerStyle={customInputContainerStyle}
           />
           {suggestionData && (
             <SuggestionList
@@ -260,20 +298,22 @@ const FlightForm: React.FC<FlightFormProps> = ({
           )}
         </View>
 
-        <View style={[styles.swapButtonContainer, swapButtonContainerStyle]}>
-          <TouchableOpacity
-            style={[styles.swapButton, swapButtonStyle]}
-            onPress={handleSwap}
-            activeOpacity={0.7}
-          >
-            <Ionicons
-              name={swapIconName}
-              size={20}
-              color={theme.onSurface}
-              style={swapIconStyle}
-            />
-          </TouchableOpacity>
-        </View>
+        {onSwapPress && (
+          <View style={[styles.swapButtonContainer, swapButtonContainerStyle]}>
+            <TouchableOpacity
+              style={[styles.swapButton, swapButtonStyle]}
+              onPress={handleSwap}
+              activeOpacity={0.7}
+            >
+              <Ionicons
+                name={swapIconName}
+                size={20}
+                color={theme.onSurface}
+                style={swapIconStyle}
+              />
+            </TouchableOpacity>
+          </View>
+        )}
 
         {/* Apply inputWrapperStyle */}
         <View style={[styles.inputWrapper, inputWrapperStyle]}>
@@ -285,6 +325,7 @@ const FlightForm: React.FC<FlightFormProps> = ({
             }}
             label={toLabel}
             value={toLocation}
+            inputStyle={inputStyle}
             labelStyle={[styles.label, labelStyle]}
             placeholder={toPlaceholder}
             onFocus={() => {
@@ -292,15 +333,13 @@ const FlightForm: React.FC<FlightFormProps> = ({
               onInputFocus?.(FormInputType.FLIGHT_TO);
             }}
             onBlur={() => {
-              // Delay blur slightly to allow suggestion press
               setTimeout(() => {
                 if (focusedInput === FormInputType.FLIGHT_TO) {
                   setFocusedInput(undefined);
                 }
               }, 150);
             }}
-            // Apply customInputContainerStyle (passed to CustomInput)
-            containerStyle={customInputContainerStyle}
+            inputContainerStyle={customInputContainerStyle}
           />
           {suggestionData && (
             <SuggestionList
@@ -320,13 +359,14 @@ const FlightForm: React.FC<FlightFormProps> = ({
           returnLabel={returnLabel}
           departureLabel={departureLabel}
           outerContainerStyle={[
-            styles.dateRangePickerOuterContainer, 
+            styles.dateRangePickerOuterContainer,
             dateRangePickerOuterContainerStyle,
           ]}
+          inputContainerStyle={dateRangePickerInputContainerStyle}
           labelStyle={[labelStyle, dateRangePickerLabelStyle]}
           inputGroupStyle={dateRangePickerInputGroupStyle}
-          calendarContainerStyle={dateRangePickerCalendarContainerStyle} 
-          calendarThemeOverrides={calendarThemeOverrides} 
+          calendarContainerStyle={dateRangePickerCalendarContainerStyle}
+          calendarThemeOverrides={calendarThemeOverrides}
           onDatesChange={(d) => {
             setDepartureDate(d.departure);
             setReturnDate(d.return);
@@ -336,18 +376,20 @@ const FlightForm: React.FC<FlightFormProps> = ({
           initialReturnDate={initialReturnDate}
         />
         {/* Search Button */}
-        <TouchableOpacity
-          style={[styles.searchButton, searchButtonStyle]}
-          onPress={handleSearch}
-          activeOpacity={0.8}
-        >
-          <Ionicons
-            name={searchIconName}
-            size={24}
-            color={theme.onPrimary}
-            style={searchIconStyle}
-          />
-        </TouchableOpacity>
+        {onSearchPress && (
+          <TouchableOpacity
+            style={[styles.searchButton, searchButtonStyle]}
+            onPress={handleSearch}
+            activeOpacity={0.8}
+          >
+            <Ionicons
+              name={searchIconName}
+              size={24}
+              color={theme.onPrimary}
+              style={searchIconStyle}
+            />
+          </TouchableOpacity>
+        )}
       </View>
     </View>
   );
@@ -363,11 +405,11 @@ const themedStyles = (theme: ThemeType, isRTL: boolean) =>
       borderBottomLeftRadius: 8,
     },
     inputGroupContainer: {
-      position: "relative", 
+      position: "relative",
     },
     inputWrapper: {
-      marginBottom: 15, 
-      position: "relative", 
+      marginBottom: 15,
+      position: "relative",
     },
     label: {
       color: theme.labelText,
@@ -399,12 +441,12 @@ const themedStyles = (theme: ThemeType, isRTL: boolean) =>
     },
     departureRow: {
       flexDirection: isRTL ? "row-reverse" : "row",
-      alignItems: "flex-end", 
+      alignItems: "flex-end",
       marginTop: 10,
-      gap: 10, 
+      gap: 10,
     },
     dateRangePickerOuterContainer: {
-      flex: 1, 
+      flex: 1,
     },
     searchButton: {
       backgroundColor: theme.primary,
@@ -419,16 +461,15 @@ const themedStyles = (theme: ThemeType, isRTL: boolean) =>
       paddingHorizontal: 12,
       borderBottomWidth: StyleSheet.hairlineWidth,
       borderBottomColor: theme.border,
-      backgroundColor: theme.surface, 
+      backgroundColor: theme.surface,
     },
     suggestionCityRow: {
       flexDirection: "row",
       alignItems: "center",
-      gap: 10, 
-      marginBottom: 5, 
-    },
-    suggestionCityIcon: {
+      gap: 10,
+      marginBottom: 5,
     },
+    suggestionCityIcon: {},
     suggestionCityText: {
       fontSize: 15,
       fontWeight: "600",
@@ -437,15 +478,14 @@ const themedStyles = (theme: ThemeType, isRTL: boolean) =>
     suggestionAirportTouchable: {
       flexDirection: "row",
       alignItems: "center",
-      gap: 10, 
+      gap: 10,
       paddingVertical: 4,
-      marginLeft: 25, 
-    },
-    suggestionAirportIcon: {
+      marginLeft: 25,
     },
+    suggestionAirportIcon: {},
     suggestionAirportText: {
       fontSize: 14,
-      color: theme.onSurface, 
+      color: theme.onSurface,
     },
   });
 

package/src/components/TravelBooking/FlightSummary.tsx

@@ -221,7 +221,9 @@ const FlightSummary: React.FC<FlightSummaryProps> = ({
     label?: string
   ) => (
     <View>
-      <Text>{label}</Text>
+      <Text style={{ color: theme.labelText, fontSize: 12, marginBottom: 6 }}>
+        {label}
+      </Text>
       <View style={[styles.buttonGroupContainer, buttonGroupContainerStyle]}>
         {items.map((item) => {
           const isSelected = item === selectedValue;

package/src/components/TravelBooking/HotelForm.tsx

@@ -1,5 +1,11 @@
 import { ThemeType, useTheme } from "../../theme";
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   View,
   Text,
@@ -15,9 +21,10 @@ import { Ionicons } from "@expo/vector-icons";
 import CustomInput from "../Input/Input";
 import DateRangePicker from "../DateRangePicker/DateRangePicker";
 import { Picker } from "@react-native-picker/picker";
-import SuggestionList from "../Suggestions/SuggestionList"; 
-import { FormInputType, HotelSuggestions } from "./types"; 
+import SuggestionList from "../Suggestions/SuggestionList";
+import { FormInputType, HotelSuggestions } from "./types";
 import { TextInput } from "react-native-gesture-handler";
+import RNPickerSelect from "react-native-picker-select";
 
 // --- Helper Types ---
 type LocationData = string;
@@ -40,6 +47,13 @@ export interface HotelFormProps {
     nationality: string | undefined;
   }) => void;
 
+  onSelectionChange?: (details: {
+    destination: LocationData | undefined; // Renamed from destintation
+    checkin: string | undefined; // Send YYYY-MM-DD
+    checkout: string | undefined; // Send YYYY-MM-DD
+    nationality: string | undefined;
+  }) => void;
+
   // Labels & Placeholders
   destinationLabel?: string;
   destinationPlaceholder?: string;
@@ -52,23 +66,24 @@ export interface HotelFormProps {
 
   // Data & Config
   suggestionData?: HotelSuggestions[];
-  nationalityData?: { label: string; value: string }[]; 
+  nationalityData?: { label: string; value: string }[];
   calendarThemeOverrides?: object;
 
   // --- Style Props ---
   containerStyle?: StyleProp<ViewStyle>;
-  inputWrapperStyle?: StyleProp<ViewStyle>; 
+  inputWrapperStyle?: StyleProp<ViewStyle>;
   customInputContainerStyle?: StyleProp<ViewStyle>;
-  labelStyle?: StyleProp<TextStyle>; 
-  checkoutRowStyle?: StyleProp<ViewStyle>; 
+  labelStyle?: StyleProp<TextStyle>;
+  checkoutRowStyle?: StyleProp<ViewStyle>;
   searchButtonStyle?: StyleProp<ViewStyle>;
-  searchIconStyle?: StyleProp<TextStyle>; 
+  searchIconStyle?: StyleProp<TextStyle>;
 
   // DateRangePicker specific styles (passed down)
   dateRangePickerOuterContainerStyle?: StyleProp<ViewStyle>;
-  dateRangePickerLabelStyle?: StyleProp<TextStyle>; 
-  dateRangePickerInputGroupStyle?: StyleProp<ViewStyle>; 
+  dateRangePickerLabelStyle?: StyleProp<TextStyle>;
+  dateRangePickerInputGroupStyle?: StyleProp<ViewStyle>;
   dateRangePickerCalendarContainerStyle?: StyleProp<ViewStyle>;
+  dateRangePickerInputContainerStyle?: StyleProp<ViewStyle>;
 
   // SuggestionList specific styles
   suggestionListContainerStyle?: StyleProp<ViewStyle>;
@@ -76,23 +91,22 @@ export interface HotelFormProps {
   suggestionItemTextStyle?: StyleProp<TextStyle>;
 
   // Nationality Picker specific styles
-  nationalityPickerWrapperStyle?: StyleProp<ViewStyle>; 
-  nationalityPickerLabelStyle?: StyleProp<TextStyle>; 
+  nationalityPickerWrapperStyle?: StyleProp<ViewStyle>;
+  nationalityPickerLabelStyle?: StyleProp<TextStyle>;
+  nationalityPickerPlaceholderColor?: string;
+  nationalityPickerPlaceholder?: string;
   pickerContainerStyle?: StyleProp<ViewStyle>;
-  pickerStyle?: StyleProp<TextStyle>; 
+  pickerStyle?: StyleProp<TextStyle>;
 }
 
-// Default Nationality Data (can be overridden by prop)
 const defaultNationalities = [
-  { label: "Select Nationality", value: undefined }, // Placeholder
   { label: "United States", value: "US" },
   { label: "Canada", value: "CA" },
-  { label: "United Kingdom", value: "GB" }, // Corrected UK code
+  { label: "United Kingdom", value: "GB" },
   { label: "India", value: "IN" },
   { label: "Australia", value: "AU" },
   { label: "Germany", value: "DE" },
   { label: "France", value: "FR" },
-  // Add more common nationalities or let user provide full list via props
 ];
 
 // --- Component ---
@@ -137,6 +151,10 @@ const HotelForm: React.FC<HotelFormProps> = ({
   nationalityPickerLabelStyle,
   pickerContainerStyle,
   pickerStyle,
+  onSelectionChange,
+  dateRangePickerInputContainerStyle,
+  nationalityPickerPlaceholderColor,
+  nationalityPickerPlaceholder = "Select Nationality...",
 }) => {
   const { theme, isRTL } = useTheme();
   const styles = useMemo(() => themedStyles(theme, isRTL), [theme, isRTL]);
@@ -158,6 +176,21 @@ const HotelForm: React.FC<HotelFormProps> = ({
   >(initialNationality);
   const [focusedInput, setFocusedInput] = useState<FormInputType>();
 
+  useEffect(() => {
+    onSelectionChange?.({
+      destination: destination,
+      checkin: checkinDate,
+      checkout: checkoutDate,
+      nationality: selectedNationality,
+    });
+  }, [
+    destination,
+    checkinDate,
+    checkoutDate,
+    selectedNationality,
+    onSelectionChange,
+  ]);
+
   // --- Handlers ---
   const handleSearch = useCallback(() => {
     onSearchPress?.({
@@ -215,7 +248,7 @@ const HotelForm: React.FC<HotelFormProps> = ({
               }
             }, 150);
           }}
-          containerStyle={customInputContainerStyle}
+          inputContainerStyle={customInputContainerStyle}
         />
         {suggestionData && (
           <SuggestionList
@@ -235,9 +268,10 @@ const HotelForm: React.FC<HotelFormProps> = ({
           dateRangePickerOuterContainerStyle,
         ]}
         labelStyle={[labelStyle, dateRangePickerLabelStyle]}
+        inputContainerStyle={dateRangePickerInputContainerStyle}
         inputGroupStyle={dateRangePickerInputGroupStyle}
-        calendarContainerStyle={dateRangePickerCalendarContainerStyle} 
-        calendarThemeOverrides={calendarThemeOverrides} 
+        calendarContainerStyle={dateRangePickerCalendarContainerStyle}
+        calendarThemeOverrides={calendarThemeOverrides}
         onDatesChange={(d) => {
           setCheckinDate(d.departure);
           setCheckoutDate(d.return);
@@ -249,48 +283,40 @@ const HotelForm: React.FC<HotelFormProps> = ({
 
       <View style={[styles.checkoutRow, checkoutRowStyle]}>
         <View
-          style={[styles.nationalityPickerWrapper, nationalityPickerWrapperStyle]}
+          style={[
+            styles.nationalityPickerWrapper,
+            nationalityPickerWrapperStyle,
+          ]}
         >
-          <Text
-            style={[
-              styles.label,
-              labelStyle, 
-              nationalityPickerLabelStyle, 
-            ]}
-          >
+          <Text style={[styles.label, labelStyle, nationalityPickerLabelStyle]}>
             {nationalityLabel}
           </Text>
           <View style={[styles.pickerContainer, pickerContainerStyle]}>
-            <Picker
-              selectedValue={selectedNationality}
+            <RNPickerSelect
+              items={nationalityData}
               onValueChange={setSelectedNationality}
-              style={[styles.picker, pickerStyle]}
-              dropdownIconColor={theme.onSurface}
-            >
-              {nationalityData.map((nat) => (
-                <Picker.Item
-                  key={nat.value || "placeholder"} 
-                  label={nat.label}
-                  value={nat.value}
-                  enabled={nat.value !== undefined}
-                />
-              ))}
-            </Picker>
+              placeholder={{
+                label: nationalityPickerPlaceholder,
+                color: nationalityPickerPlaceholderColor,
+              }}
+            />
           </View>
         </View>
 
-        <TouchableOpacity
-          style={[styles.searchButton, searchButtonStyle]}
-          onPress={handleSearch}
-          activeOpacity={0.8}
-        >
-          <Ionicons
-            name={searchIconName}
-            size={24}
-            color={theme.onPrimary}
-            style={searchIconStyle}
-          />
-        </TouchableOpacity>
+        {onSearchPress && (
+          <TouchableOpacity
+            style={[styles.searchButton, searchButtonStyle]}
+            onPress={handleSearch}
+            activeOpacity={0.8}
+          >
+            <Ionicons
+              name={searchIconName}
+              size={24}
+              color={theme.onPrimary}
+              style={searchIconStyle}
+            />
+          </TouchableOpacity>
+        )}
       </View>
     </View>
   );
@@ -306,8 +332,8 @@ const themedStyles = (theme: ThemeType, isRTL: boolean) =>
       borderBottomLeftRadius: 8,
     },
     inputWrapper: {
-      marginBottom: 15, 
-      position: "relative", 
+      marginBottom: 15,
+      position: "relative",
     },
     label: {
       color: theme.labelText,
@@ -318,12 +344,12 @@ const themedStyles = (theme: ThemeType, isRTL: boolean) =>
       marginBottom: 6,
     },
     dateRangePickerOuterContainer: {
-      marginTop: 10, 
+      marginTop: 10,
     },
     checkoutRow: {
       flexDirection: isRTL ? "row-reverse" : "row",
-      alignItems: "flex-end", 
-      marginTop: 20, 
+      alignItems: "flex-end",
+      marginTop: 20,
       gap: 10,
     },
     nationalityPickerWrapper: {
@@ -334,8 +360,8 @@ const themedStyles = (theme: ThemeType, isRTL: boolean) =>
       borderColor: theme.border,
       borderRadius: 8,
       backgroundColor: theme.surface,
-      justifyContent: "center", 
-      height: 50, 
+      justifyContent: "center",
+      height: 50,
     },
     picker: {
       width: "100%",

package/src/index.ts

@@ -1,11 +1,11 @@
-import { registerRootComponent } from 'expo';
-import "react-native-reanimated";
+// import { registerRootComponent } from 'expo';
+// import "react-native-reanimated";
 
 
-import App from "./app";
+// import App from "./app";
 
-registerRootComponent(App);
+// registerRootComponent(App);
 
 export * from "./theme"
 export * from "./components";
-export * from "./contexts";
+export * from "./contexts";