related-ui-components 1.3.3 → 1.3.5

package/src/app.tsx

@@ -1,19 +1,43 @@
-import React, { useState } from "react";
-import { View, StyleSheet, Text, TouchableOpacity } from "react-native";
+import React, { useRef, useState } from "react";
+import {
+  View,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  FlatList,
+  Alert,
+} from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { RelatedProvider, useTheme } from "./theme";
 import {
+  Banner,
   Filters,
+  Popup,
   RedemptionOption,
   ScratchCard,
   ScratchCardContent,
 } from "./components";
 import { SafeAreaView } from "react-native-safe-area-context";
+import SelectAmount from "./components/SelectAmount/SelectAmount";
+import Slider from "@react-native-community/slider";
+import SummaryBar from "./components/TravelBooking/SummaryBar";
+import NumericStepper from "./components/NumericStepper/NumericStepper";
+import FlightSummaryBar from "./components/TravelBooking/FlightSummary";
+import HotelSummaryBar from "./components/TravelBooking/HotelSummary";
+import TabSelector from "./components/TravelBooking/TabSelector";
+import FlightForm from "./components/TravelBooking/FlightForm";
+import DateRangePicker from "./components/DateRangePicker/DateRangePicker";
+import HotelForm from "./components/TravelBooking/HotelForm";
+import CarRentalForm from "./components/TravelBooking/CarRentalForm";
+import TravelBooking from "./components/TravelBooking/TravelBooking";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 // import BRANDS from "./constants/BRANDS";
 
 export default function App() {
   const { theme } = useTheme();
   const [filtersVisible, setFiltersVisible] = useState(false);
+  const [mode, setMode] = useState<"flight" | "hotel">("flight");
 
   // Define some sort options for the filter
   const sortOptions = [
@@ -80,19 +104,59 @@ export default function App() {
     ...item,
     text: "Online shopping",
   }));
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
 
   return (
-    <RelatedProvider>
-      <Filters
-        sortOptions={[
-          { id: 1, name: "Newest First", value: "newest", checked: true},
-          { id: 2, name: "Oldest First", value: "oldest" },
-          { id: 3, name: "Highest Rated", value: "rated_desc" },
-        ]}
-        // brands={BRANDS}
-        onActionButtonPress={console.log}
-      />
-    </RelatedProvider>
+    <GestureHandlerRootView>
+      <RelatedProvider>
+        {/* <View> */}
+        <SafeAreaView
+          style={{ padding: 10, flex: 1, backgroundColor: theme.background }}
+        >
+          {/* <TravelBooking
+            onInputFocus={console.log}
+            onTextChange={(text)=> {
+              if(debounceTimerRef.current){
+                clearTimeout(debounceTimerRef.current)
+              }
+              debounceTimerRef.current = setTimeout(()=>{console.log(text)}, 300)
+            }}
+            // labelStyle={{color: "red"}}
+            // // searchButtonStyle={{backgroundColor: "blue"}}
+            // flightFormProps={{
+            //   // returnLabel: "Test",
+            //   labelStyle: {color:"blue"},
+            //   // inputGroupStyle: {height}
+            // }}
+          ></TravelBooking> */}
+          {/* </ScrollView> */}
+          <Banner
+      backgroundImage={require("@/assets/images/namshi-banner.png")}
+      buttonText="Redeem Now"
+      onButtonPress={() => Alert.alert("Button pressed")}
+      onBannerPress={() => Alert.alert("Banner pressed")}
+      height={200}
+      contentAlignment="bottom"
+      icon={<Ionicons name="gift-outline" size={20} color="#FFFFFF" />}
+      iconPosition="left"
+    />
+    <Popup
+  visible={true}
+  onClose={()=>{} }
+  showCloseIcon={true}
+  title="ترقية إلى النسخة المميزة"
+  subtitle="استمتع بمزايا حصرية"
+  content="احصل على جميع الميزات المتقدمة والمحتوى الحصري بدون إعلانات. اشترك الآن واستمتع بتجربة كاملة مع تحديثات مجانية لمدة عام كامل."
+  primaryButtonText="ترقية الآن"
+  secondaryButtonText="ليس الآن"
+  onPrimaryButtonPress={()=>{}}
+  onSecondaryButtonPress={()=>{}}
+  isRTL={true}
+/>
+        </SafeAreaView>
+        {/* </View> */}
+      </RelatedProvider>
+    </GestureHandlerRootView>
   );
 }
 

package/src/components/DateRangePicker/DateRangePicker.tsx

@@ -0,0 +1,410 @@
+import { ThemeType, useTheme } from "@/theme"; // Adjust path if needed
+import React, { useCallback, useMemo, useState, useEffect } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  Modal,
+} from "react-native";
+import { Calendar, DateData } from "react-native-calendars";
+import { format, parseISO, addDays, eachDayOfInterval, isValid } from "date-fns";
+import { MarkedDates } from "react-native-calendars/src/types";
+
+// --- Helper Function ---
+const formatDateDisplay = (date: Date | string | undefined): string => {
+  if (!date) return "";
+  try {
+    const dateObj = typeof date === "string" ? parseISO(date) : date;
+    if (!isValid(dateObj)) return "";
+    return format(dateObj, "MMM d, yyyy").toUpperCase();
+  } catch (e) {
+    console.error("Error formatting date:", e);
+    return "";
+  }
+};
+
+// --- Component Props ---
+interface DateRangePickerProps {
+  initialDepartureDate?: string;
+  initialReturnDate?: string;
+  isOneWay?: boolean;
+  onDatesChange: (dates: {
+    departure: string | undefined;
+    return: string | undefined;
+  }) => void;
+
+  departureLabel?: string;
+  returnLabel?: string;
+  placeholder?: string;
+  calendarThemeOverrides?: object;
+
+  // Style Props
+  outerContainerStyle?: StyleProp<ViewStyle>;
+  inputContainerStyle?: StyleProp<ViewStyle>;
+  inputGroupStyle?: StyleProp<ViewStyle>; // Applied to both label group and input group
+  labelStyle?: StyleProp<TextStyle>;
+  inputTextStyle?: StyleProp<TextStyle>;
+  separatorStyle?: StyleProp<ViewStyle>;
+  calendarContainerStyle?: StyleProp<ViewStyle>;
+}
+
+// --- Component ---
+const DateRangePicker: React.FC<DateRangePickerProps> = ({
+  initialDepartureDate,
+  initialReturnDate,
+  isOneWay = false,
+  onDatesChange,
+  departureLabel = "DEPARTURE",
+  returnLabel = "RETURN",
+  placeholder = "Select Date",
+  calendarThemeOverrides = {},
+  outerContainerStyle,
+  inputContainerStyle,
+  inputGroupStyle, // Will be used for label groups too
+  labelStyle,
+  inputTextStyle,
+  separatorStyle,
+  calendarContainerStyle,
+}) => {
+  const { theme, isRTL } = useTheme();
+  const styles = useMemo(() => themedStyles(theme, isRTL), [theme, isRTL]);
+
+  // --- State ---
+  const [departureDate, setDepartureDate] = useState<string | undefined>(
+    initialDepartureDate
+  );
+  const [returnDate, setReturnDate] = useState<string | undefined>(
+    isOneWay ? undefined : initialReturnDate
+  );
+  const [isCalendarVisible, setIsCalendarVisible] = useState(false);
+
+  useEffect(() => {
+    setDepartureDate(initialDepartureDate);
+  }, [initialDepartureDate]);
+
+  useEffect(() => {
+    setReturnDate(isOneWay ? undefined : initialReturnDate);
+  }, [initialReturnDate, isOneWay]);
+
+  useEffect(() => {
+    if (isOneWay && returnDate) {
+      setReturnDate(undefined);
+      onDatesChange({ departure: departureDate, return: undefined });
+    }
+  }, [isOneWay, returnDate, departureDate, onDatesChange]);
+
+  // --- Handlers ---
+  const handleDayPress = useCallback(
+    (day: DateData) => {
+      let newDeparture = departureDate;
+      let newReturn = returnDate;
+      let shouldCloseCalendar = false;
+
+      if (isOneWay) {
+        newDeparture = day.dateString;
+        newReturn = undefined;
+        shouldCloseCalendar = true;
+      } else {
+        if (!newDeparture || (newDeparture && newReturn)) {
+          newDeparture = day.dateString;
+          newReturn = undefined;
+        } else if (newDeparture && !newReturn) {
+          try {
+            const depDate = parseISO(newDeparture);
+            const selectedDate = parseISO(day.dateString);
+            if (isValid(depDate) && isValid(selectedDate)) {
+              if (selectedDate >= depDate) {
+                newReturn = day.dateString;
+                shouldCloseCalendar = true;
+              } else {
+                newDeparture = day.dateString;
+                newReturn = undefined;
+              }
+            } else {
+              console.error("Invalid date encountered during selection");
+              newDeparture = day.dateString;
+              newReturn = undefined;
+            }
+          } catch (e) {
+            console.error("Error parsing dates during selection:", e);
+            newDeparture = day.dateString;
+            newReturn = undefined;
+          }
+        }
+      }
+
+      setDepartureDate(newDeparture);
+      setReturnDate(newReturn);
+      onDatesChange({ departure: newDeparture, return: newReturn });
+
+      if (shouldCloseCalendar) {
+        setIsCalendarVisible(false);
+      }
+    },
+    [departureDate, returnDate, isOneWay, onDatesChange]
+  );
+
+  const markedDates = useMemo((): MarkedDates => {
+    const marked: MarkedDates = {};
+    const primaryColor = theme.primary;
+    const onPrimaryColor = theme.onPrimary;
+    const rangeColor = theme.secondary;
+    const onRangeColor = theme.onSecondary;
+
+    if (departureDate) {
+      marked[departureDate] = {
+        startingDay: !returnDate || departureDate === returnDate,
+        color: primaryColor,
+        textColor: onPrimaryColor,
+        selected: true,
+      };
+    }
+    if (returnDate) {
+      marked[returnDate] = {
+        ...marked[returnDate],
+        endingDay: true,
+        color: primaryColor,
+        textColor: onPrimaryColor,
+        selected: true,
+      };
+    }
+
+    if (departureDate && returnDate && departureDate !== returnDate) {
+      try {
+        const start = addDays(parseISO(departureDate), 1);
+        const end = parseISO(returnDate);
+
+        if (isValid(start) && isValid(end) && end > start) {
+          const interval = eachDayOfInterval({ start, end });
+          interval.forEach((date) => {
+            const dateString = format(date, "yyyy-MM-dd");
+            if (dateString !== returnDate) {
+              marked[dateString] = {
+                color: rangeColor,
+                textColor: onRangeColor,
+                selected: true,
+              };
+            }
+          });
+        }
+      } catch (e) {
+        console.error("Error creating date interval:", e);
+      }
+    }
+
+    return marked;
+  }, [departureDate, returnDate, theme]);
+
+  // --- Calendar Theme ---
+  const calendarTheme = useMemo(() => {
+    return {
+      backgroundColor: theme.surface,
+      calendarBackground: theme.surface,
+      textSectionTitleColor: theme.onSurface,
+      selectedDayBackgroundColor: theme.primary,
+      selectedDayTextColor: theme.onPrimary,
+      todayTextColor: theme.primary,
+      dayTextColor: theme.onSurface,
+      textDisabledColor: theme.disabled,
+      dotColor: theme.primary,
+      selectedDotColor: theme.onPrimary,
+      arrowColor: theme.primary,
+      disabledArrowColor: theme.disabled,
+      monthTextColor: theme.onSurface,
+      indicatorColor: theme.primary,
+      textDayFontWeight: "500",
+      textMonthFontWeight: "bold",
+      textDayHeaderFontWeight: "bold",
+      textDayFontSize: 14,
+      textMonthFontSize: 16,
+      textDayHeaderFontSize: 12,
+      ...calendarThemeOverrides,
+    };
+  }, [theme, calendarThemeOverrides]);
+
+  const displayDeparture = formatDateDisplay(departureDate) || placeholder;
+  const displayReturn = formatDateDisplay(returnDate) || placeholder;
+
+  return (
+    <>
+      <View style={[styles.outerContainer, outerContainerStyle]}>
+        {/* Labels Container */}
+        <View style={styles.labelsContainer}>
+          {/* Departure Label Group */}
+          <View style={[styles.labelGroup, inputGroupStyle]}>
+            <Text style={[styles.label, labelStyle]}>{departureLabel}</Text>
+          </View>
+
+          {!isOneWay && (
+            <>
+              {/* Return Label Group */}
+              <View style={[styles.labelGroup, inputGroupStyle]}>
+                <Text style={[styles.label, labelStyle]}>{returnLabel}</Text>
+              </View>
+            </>
+          )}
+        </View>
+
+        {/* Input Box */}
+        <TouchableOpacity
+          style={[styles.inputContainer, inputContainerStyle]}
+          onPress={() => setIsCalendarVisible(true)}
+          activeOpacity={0.7}
+        >
+          {/* Departure Date Input Area */}
+          <View style={[styles.dateInputGroup, inputGroupStyle]}>
+            <Text
+              style={[
+                styles.inputText,
+                !departureDate && styles.placeholderText,
+                inputTextStyle,
+              ]}
+              numberOfLines={1}
+              ellipsizeMode="tail"
+            >
+              {displayDeparture}
+            </Text>
+          </View>
+
+          {!isOneWay && (
+            <>
+              {/* Actual Separator */}
+              <View style={[styles.dateSeparator, separatorStyle]} />
+
+              {/* Return Date Input Area */}
+              <View style={[styles.dateInputGroup, inputGroupStyle]}>
+                <Text
+                  style={[
+                    styles.inputText,
+                    !returnDate && styles.placeholderText,
+                    inputTextStyle,
+                  ]}
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                >
+                  {displayReturn}
+                </Text>
+              </View>
+            </>
+          )}
+        </TouchableOpacity>
+      </View>
+
+      {/* Calendar Modal */}
+      <Modal
+        transparent={true}
+        visible={isCalendarVisible}
+        onRequestClose={() => setIsCalendarVisible(false)}
+        animationType="fade"
+      >
+        <TouchableOpacity
+          style={styles.modalOverlay}
+          activeOpacity={1}
+          onPressOut={() => setIsCalendarVisible(false)}
+        >
+          <View onStartShouldSetResponder={() => true}>
+            <View style={[styles.calendarContainer, calendarContainerStyle]}>
+              <Calendar
+                current={departureDate || format(new Date(), "yyyy-MM-dd")}
+                onDayPress={handleDayPress}
+                markedDates={markedDates}
+                markingType={"period"}
+                theme={calendarTheme}
+                firstDay={1}
+                monthFormat={"MMM yyyy"}
+              />
+            </View>
+          </View>
+        </TouchableOpacity>
+      </Modal>
+    </>
+  );
+};
+
+// --- Styles ---
+const themedStyles = (theme: ThemeType, isRTL: boolean) =>
+  StyleSheet.create({
+    outerContainer: {
+      // flex: 1,
+    },
+    labelsContainer: {
+      flexDirection: isRTL ? "row-reverse" : "row",
+      marginBottom: 4, 
+      alignItems: "center", 
+    },
+    labelGroup: {
+      flex: 1, 
+      justifyContent: "center", 
+    },
+    label: {
+      color: theme.labelText,
+      fontSize: 12,
+      fontWeight: "600",
+      textTransform: "uppercase",
+      textAlign: isRTL ? "right" : "left", 
+    },
+    labelSeparatorPlaceholder: {
+      width: 1, 
+      backgroundColor: "transparent",
+      marginHorizontal: 8, 
+    },
+    inputContainer: {
+      flexDirection: isRTL ? "row-reverse" : "row",
+      borderColor: theme.border,
+      borderWidth: 1,
+      borderRadius: 8,
+      minHeight: 50,
+      backgroundColor: theme.surface,
+      alignItems: "center",
+      paddingHorizontal: 12,
+      overflow: "hidden",
+    },
+    dateInputGroup: {
+      flex: 1,
+      paddingVertical: 8,
+      justifyContent: "center",
+    },
+    inputText: {
+      color: theme.onSurface,
+      fontSize: 15,
+      fontWeight: "500",
+      textAlign: isRTL ? "right" : "left",
+    },
+    placeholderText: {
+      color: theme.helper,
+      fontWeight: "400",
+    },
+    dateSeparator: {
+      width: 1,
+      height: "60%",
+      backgroundColor: theme.border,
+      marginHorizontal: 8,
+    },
+    modalOverlay: {
+      flex: 1,
+      backgroundColor: "rgba(0, 0, 0, 0.6)",
+      justifyContent: "center",
+      padding: 20,
+    },
+    calendarContainer: {
+      backgroundColor: theme.surface,
+      borderRadius: 12,
+      paddingVertical: 5,
+      paddingHorizontal: 5,
+      width: "100%",
+      shadowColor: "#000",
+      shadowOffset: {
+        width: 0,
+        height: 4,
+      },
+      shadowOpacity: 0.15,
+      shadowRadius: 10,
+      elevation: 8,
+    },
+  });
+
+export default DateRangePicker;

package/src/components/DateRangePicker/index.ts

@@ -0,0 +1,2 @@
+// export { default as DateRangePicker} from "./DateRangePicker";
+// export * from "./DateRangePicker";

package/src/components/Filters/Filters.tsx

@@ -223,7 +223,7 @@
 
       setCheckedItem(null);
       setSelectedBrands(resetBrands);
-      setPointsRange({ min: rangeInitialMin, max: rangeInitialMax });
+      setPointsRange({ min: rangeMinLimit, max: rangeInitialMax });
       setResetCounter((prev) => prev + 1);
     };
 

package/src/components/Input/Input.tsx

@@ -177,7 +177,7 @@ const createStyles = (theme: ThemeType) =>
       borderRadius: 8,
       backgroundColor: theme.inputBackground, // Use inputBackground
       alignItems: 'center',
-      minHeight: 48,
+      // minHeight: 48,
     },
     focusedInput: {
       borderColor: theme.primary, // Use primary for focus indication

package/src/components/NumericStepper/NumericStepper.tsx

@@ -0,0 +1,117 @@
+// NumericStepper.tsx
+import React, { useMemo } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from "react-native";
+import { ThemeType, useTheme } from "../../theme";
+
+export interface NumericStepperProps {
+  value: number;
+  minValue?: number;
+  maxValue?: number;
+  step?: number;
+  onIncrement: () => void;
+  onDecrement: () => void;
+  isRTL?: boolean;
+  style?: StyleProp<ViewStyle>;
+  buttonStyle?: StyleProp<ViewStyle>;
+  buttonTextStyle?: StyleProp<TextStyle>;
+  valueTextStyle?: StyleProp<TextStyle>; 
+  disabledOpacity?: number;
+}
+
+const NumericStepper: React.FC<NumericStepperProps> = ({
+  value,
+  minValue = 0,
+  maxValue = Number.MAX_SAFE_INTEGER,
+  onIncrement,
+  onDecrement,
+  isRTL: isRTLProp,
+  style,
+  buttonStyle,
+  buttonTextStyle,
+  valueTextStyle,
+  disabledOpacity = 0.5,
+}) => {
+  const { theme, isRTL: themeRTL } = useTheme();
+  const isRTL = isRTLProp ?? themeRTL;
+
+  const styles = useMemo(() => themedStyles(theme, isRTL), [theme, isRTL]);
+
+  const isDecrementDisabled = value <= minValue;
+  const isIncrementDisabled = value >= maxValue;
+
+  return (
+    <View style={[styles.container, style]}>
+      <TouchableOpacity
+        style={[
+          styles.button,
+          buttonStyle,
+          isDecrementDisabled && { opacity: disabledOpacity },
+        ]}
+        onPress={onDecrement}
+        disabled={isDecrementDisabled}
+        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+      >
+        <Text style={[styles.buttonText, buttonTextStyle]}>
+          -
+        </Text>
+      </TouchableOpacity>
+
+      <Text style={[styles.valueText, valueTextStyle]}>
+        {value}
+      </Text>
+
+      <TouchableOpacity
+        style={[
+          styles.button,
+          buttonStyle,
+          isIncrementDisabled && { opacity: disabledOpacity },
+        ]}
+        onPress={onIncrement}
+        disabled={isIncrementDisabled}
+        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+      >
+        <Text style={[styles.buttonText, buttonTextStyle]}>
+          +
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const themedStyles = (theme: ThemeType, isRTL: boolean) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: isRTL ? "row-reverse" : "row",
+      alignItems: "center",
+    },
+    button: {
+      backgroundColor: theme.secondary,
+      width: 36,
+      height: 36,
+      borderRadius: 18,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    buttonText: {
+    //   fontSize: 20,
+      fontWeight: "bold",
+      color: theme.onSecondary
+    },
+    valueText: {
+      fontSize: 16,
+      minWidth: 50,
+      textAlign: "center",
+      marginHorizontal: 8,
+      color: theme.onSurface
+    },
+  });
+
+export default NumericStepper;

package/src/components/NumericStepper/index.ts

@@ -0,0 +1,2 @@
+export {default as NumericStepper} from "./NumericStepper";
+export * from "./NumericStepper";