ota-components-module 1.3.0

package/src/list/SearchableList.tsx

@@ -0,0 +1,273 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  FlatList,
+  TouchableOpacity,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
+import { Image } from 'expo-image';
+import { Colors } from '../utils/BaseStyle';
+import Label from '../typography/Label';
+import ThemedButton from '../button/ThemedButton';
+import { TextSize, TextWeight } from '../utils/TextConstants';
+import { Ionicons } from '@expo/vector-icons';
+import SearchViewInput from '../input/SearchViewInput';
+
+// Define the item structure
+export interface ListItem {
+  id: string;
+  title: string;
+  imageUri?: string;
+}
+
+interface SearchableListProps {
+  /**
+   * Test ID for the component
+   */
+  testID: string;
+
+  /**
+   * Array of items to display in the list
+   */
+  items: ListItem[];
+
+  /**
+   * Callback when an item is selected
+   */
+  onItemSelect: (item: ListItem) => void;
+
+  /**
+   * Callback when the confirm button is pressed
+   */
+  onConfirm: (selectedItem: ListItem | null) => void;
+
+  /**
+   * Title to display at the top of the list
+   */
+  title?: string;
+
+  /**
+   * Custom style for the container
+   */
+  containerStyle?: ViewStyle;
+
+  /**
+   * Placeholder text for the search input
+   */
+  searchPlaceholder?: string;
+
+  /**
+   * Text for the confirm button
+   */
+  confirmButtonText?: string;
+
+  /**
+   * Callback when the close button is pressed
+   */
+  onClose?: () => void;
+}
+
+/**
+ * A searchable list component with selection and confirmation
+ */
+const SearchableList: React.FC<SearchableListProps> = ({
+  testID,
+  items,
+  onItemSelect,
+  onConfirm,
+  title = 'Select item',
+  containerStyle,
+  searchPlaceholder = 'Search',
+  confirmButtonText = 'Confirm',
+  onClose
+}) => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filteredItems, setFilteredItems] = useState<ListItem[]>(items);
+  const [selectedItem, setSelectedItem] = useState<ListItem | null>(null);
+
+  // Filter items based on search query
+  useEffect(() => {
+    if (searchQuery.trim() === '') {
+      setFilteredItems(items);
+    } else {
+      const filtered = items.filter(item =>
+        item.title.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+      setFilteredItems(filtered);
+    }
+  }, [searchQuery, items]);
+
+  // Handle item selection
+  const handleItemPress = (item: ListItem) => {
+    setSelectedItem(item);
+    onItemSelect(item);
+  };
+
+  // Handle confirm button press
+  const handleConfirm = () => {
+    onConfirm(selectedItem);
+  };
+
+  // Render each list item
+  const renderItem = ({ item }: { item: ListItem }) => {
+    const isSelected = selectedItem?.id === item.id;
+
+    return (
+      <TouchableOpacity
+        testID={`propertyListItem${item.id}`}
+        style={[
+          styles.itemContainer,
+          isSelected && styles.selectedItemContainer,
+        ]}
+        onPress={() => handleItemPress(item)}
+        activeOpacity={0.7}
+      >
+        {item.imageUri && (<Image
+          key={item.id}
+          source={item.imageUri}
+          contentFit="cover"
+          placeholderContentFit='cover'
+          transition={500}
+          cachePolicy="disk"
+          placeholder={require("../../assets/images/placeholder.png")}
+          style={styles.itemImage}
+        />)}
+        <Label
+          text={item.title}
+          size={TextSize.NORMAL}
+          weight={TextWeight.NORMAL}
+          textColorType={isSelected ? "primary" : "primary"}
+          customStyle={isSelected ? styles.selectedItemText : styles.itemText}
+        />
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {/* Title and Close Button */}
+      {title && (
+        <View style={styles.header}>
+          <Label
+            text={title}
+            size={TextSize.LARGE}
+            weight={TextWeight.BOLD}
+            textColorType="primary"
+            customStyle={styles.title}
+          />
+
+          {onClose && (
+            <TouchableOpacity testID='btnCloseSearchableList' onPress={onClose}>
+              <Ionicons name="close" size={24} color={Colors.primaryTextColor} />
+            </TouchableOpacity>
+          )}
+        </View>
+      )}
+
+      {/* Search Input */}
+      <SearchViewInput
+        testID="txtSearchProperty"
+        value={searchQuery}
+        onChangeText={setSearchQuery}
+        placeholder={searchPlaceholder}
+        containerStyle={styles.searchContainer}
+        onClear={() => setSearchQuery('')}
+      />
+
+      {/* List of Items */}
+      <FlatList
+        testID={testID}
+        data={filteredItems}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.id}
+        style={styles.list}
+        showsVerticalScrollIndicator={false}
+      />
+
+      {/* Confirm Button */}
+      <View style={[styles.buttonContainer, !selectedItem && styles.confirmButtonDisabled]}>
+        <ThemedButton
+          testID='btnConfirmSearchableList'
+          title={confirmButtonText}
+          onPress={handleConfirm}
+          disabled={!selectedItem}
+          type="secondary"
+          size="regular"
+          style={styles.confirmButton}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 30,
+    paddingHorizontal: 8,
+  },
+  title: {
+    marginBottom: 0,
+  },
+  searchContainer: {
+    marginBottom: 16,
+    marginHorizontal: 4
+  },
+  list: {
+    flex: 1,
+    marginBottom: 16
+  },
+  itemContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 16,
+    paddingHorizontal: 6,
+    borderRadius: 4,
+    marginBottom: 4,
+  },
+  selectedItemContainer: {
+    backgroundColor: Colors.lightThemePrimaryColor,
+  },
+  itemImage: {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
+    marginRight: 12,
+  },
+  imagePlaceholder: {
+    width: 40,
+    height: 40,
+    borderRadius: 4,
+    backgroundColor: Colors.darkGrayColor,
+    marginRight: 12,
+  },
+  itemText: {
+    color: Colors.primaryTextColor,
+  },
+  selectedItemText: {
+    color: Colors.whiteColor,
+  },
+  buttonContainer: {
+    width: '100%',
+    paddingVertical: 16,
+    marginBottom: 16,
+    paddingHorizontal: 8
+  },
+  confirmButton: {
+    width: '100%',
+    height: 56,
+  },
+  confirmButtonDisabled: {
+    width: '100%',
+    opacity: 0.5,
+  }
+});
+
+export default SearchableList;

package/src/models/PropertyImage.ts

@@ -0,0 +1,20 @@
+export class PropertyImage {
+  propertyId: number | undefined = 0;
+  propertyImagesId: number | null = null;
+  imageBlobUrl = "";
+  imageType: string | undefined = "";
+  imageName: string | undefined = "";
+  isDefault = false;
+  id?: string;
+  isLocal?: boolean;
+
+  constructor(data: any) {
+    this.propertyId = data?.propertyId || 0;
+    this.propertyImagesId = data?.propertyImagesId || null;
+    this.imageBlobUrl = data?.imageBlobUrl || "";
+    this.imageType = data?.imageType || "";
+    this.imageName = data?.imageName || "";
+    this.isDefault = data?.isDefault || false;
+    this.id = data?.id || "";
+  }
+}

package/src/typography/Label.tsx

@@ -0,0 +1,225 @@
+import React from 'react';
+import { Text, StyleSheet, TextStyle, StyleProp, useWindowDimensions } from 'react-native';
+import { Colors } from '../utils/BaseStyle';
+import { isWebDevice, MAX_RESOLUTION_MOBILE } from '../utils/Utils';
+
+export type FontWeight = 'thin' | 'light' | 'normal' | 'bold' | 'extra-bold' | 'semi-light' | 'semi-regular' | 'semi-bold';
+export type FontStyle = 'normal' | 'italic';
+export type TextAlign = 'auto' | 'left' | 'right' | 'center' | 'justify';
+type TextColorType = 'primary' | 'secondary';
+export type LabelType = 'link' | 'label';
+
+export type FontSize =
+  | 'tiny'   // 12
+  | 'small'  // 14
+  | 'normal' // 16
+  | 'large'  // 18
+  | 'xlarge' //20
+  | 'xxlarge' //22
+  | 'xxxlarge' //24
+  | 'xxxxlarge' //26
+  | 'xxxxxlarge' //28
+  | 'xxxxxxlarge' //30
+  | 'header'; // 32
+
+export type LabelVariant =
+  | 'heading1'
+  | 'heading2'
+  | 'heading3'
+  | 'title'
+  | 'subtitle'
+  | 'body'
+  | 'bodyBold'
+  | 'caption'
+  | 'captionBold'
+  | 'label'
+  | 'value'
+  | 'email'
+  | 'address';
+
+interface LabelProps {
+  testID?: string;
+  labelType?: LabelType
+  text: string;
+  variant?: LabelVariant;
+  size?: FontSize;
+  weight?: FontWeight;
+  style?: FontStyle;
+  color?: string;
+  align?: TextAlign;
+  numberOfLines?: number;
+  customStyle?: StyleProp<TextStyle>;
+  onPress?: () => void;
+  textColorType?: TextColorType;
+}
+
+const Label: React.FC<LabelProps> = ({
+  testID,
+  labelType = 'label',
+  text,
+  variant = 'body',
+  size,
+  weight,
+  style: fontStyle,
+  color,
+  align,
+  numberOfLines,
+  customStyle,
+  onPress,
+  textColorType = 'primary',
+}) => {
+
+  // Get base style from variant
+  const variantStyle = styles[variant] || styles.body;
+  const {width} = useWindowDimensions()
+  const isBigScreen = width >=  MAX_RESOLUTION_MOBILE;
+
+  // Override with specific props if provided
+  const textStyle: TextStyle = {
+    ...variantStyle,
+    ...(size && { fontSize: getFontSize(size, isBigScreen) }),
+    ...(weight && { fontFamily: getFontFamily(weight) }),
+    ...(weight && { fontWeight: getFontWeight(weight) }),
+    ...(fontStyle && { fontStyle }),
+    ...(textColorType === 'primary' ? { color: Colors.primaryTextColor } : { color: Colors.secondaryTextColor }),
+    ...(color && { color }),
+    ...(align && { textAlign: align }),
+  };
+
+  return (
+    <Text
+      testID={testID}
+      style={[textStyle, customStyle, labelType === 'link' && styles.link]}
+      numberOfLines={numberOfLines}
+      onPress={onPress}
+    >
+      {text}
+    </Text>
+  );
+};
+
+// Helper function to get font size from size prop
+const getFontSize = (size: FontSize, isBigScreen: boolean): number => {
+  const fontSizes = {
+    tiny: isBigScreen ? 14 : 12,
+    small: isBigScreen ? 16 : 14,
+    normal: isBigScreen ? 18 : 16,
+    large: isBigScreen ? 20 : 18,
+    xlarge: isBigScreen ? 22 : 20,
+    xxlarge: isBigScreen ? 24 : 22,
+    xxxlarge: isBigScreen ? 26 : 24,
+    xxxxlarge: isBigScreen ? 28 : 26,
+    xxxxxlarge: isBigScreen ? 30 : 28,
+    xxxxxxlarge: isBigScreen ? 32 : 30,
+    header: isBigScreen ? 34 : 32
+  };
+
+  return fontSizes[size];
+};
+
+// Helper function to map weight to fontWeight value
+const getFontWeight = (weight: FontWeight): TextStyle['fontWeight'] => {
+  const weightMap = {
+    'thin': '200',
+    'light': '300',
+    'semi-light': '400',
+    'semi-regular': '500',
+    'normal': 'normal',
+    'semi-bold': '600',
+    'bold': 'bold',
+    'extra-bold': '800',
+  };
+
+  return weightMap[weight] as TextStyle['fontWeight'];
+};
+
+// Helper function to map weight to fontWeight value
+const getFontFamily = (weight: FontWeight): TextStyle['fontFamily'] => {
+  const weightMap = {
+    'thin': 'OpenSans-Light',
+    'light': 'OpenSans-Light',
+    'semi-light': 'OpenSans-Light',
+    'semi-regular': 'OpenSans-Regular',
+    'normal': 'OpenSans-Regular',
+    'semi-bold': 'OpenSans-SemiBold',
+    'bold': 'OpenSans-Bold',
+    'extra-bold': 'OpenSans-Bold',
+  };
+
+  return weightMap[weight] as TextStyle['fontFamily'];
+};
+
+// Define styles for each variant
+const styles = StyleSheet.create({
+  heading1: {
+    fontSize: 20, // xlarge
+    fontWeight: getFontWeight('extra-bold'),
+    color: '#1A1A1A',
+  },
+  heading2: {
+    fontSize: 18, // large
+    fontWeight: getFontWeight('bold'),
+    color: '#1A1A1A',
+  },
+  heading3: {
+    fontSize: 16, // normal
+    fontWeight: getFontWeight('bold'),
+    color: '#1A1A1A',
+  },
+  title: {
+    fontSize: 18, // large
+    fontWeight: getFontWeight('bold'),
+    color: '#1A1A1A',
+  },
+  subtitle: {
+    fontSize: 16, // normal
+    fontWeight: getFontWeight('bold'),
+    color: '#1A1A1A',
+  },
+  body: {
+    fontSize: 16, // normal
+    fontWeight: getFontWeight('normal'),
+    color: '#333333',
+  },
+  bodyBold: {
+    fontSize: 16, // normal
+    fontWeight: getFontWeight('bold'),
+    color: '#333333',
+  },
+  caption: {
+    fontSize: 14, // small
+    fontWeight: getFontWeight('normal'),
+    color: '#666666',
+  },
+  captionBold: {
+    fontSize: 14, // small
+    fontWeight: getFontWeight('bold'),
+    color: '#666666',
+  },
+  label: {
+    fontSize: 16, // normal
+    fontWeight: getFontWeight('light'),
+    color: '#666666',
+  },
+  value: {
+    fontSize: 18, // large
+    fontWeight: getFontWeight('bold'),
+    color: '#1A1A1A',
+  },
+  email: {
+    fontSize: 14, // small
+    fontWeight: getFontWeight('normal'),
+    color: '#666666',
+  },
+  address: {
+    fontSize: 14, // small
+    fontWeight: getFontWeight('normal'),
+    color: '#666666',
+  },
+  link: {
+    color: '#1e90ff',
+    textDecorationLine: 'underline',
+  },
+});
+
+export default Label;

package/src/utils/BaseStyle.ts

@@ -0,0 +1,46 @@
+export const Colors = {
+  // Primary colors
+  primaryColor: '#007AC6',
+  lightThemePrimaryColor: '#007AC6',
+  darkThemePrimaryColor: '#007AC6',
+  
+  // Text colors
+  primaryTextColor: '#162029',
+  secondaryTextColor: '#607184',
+  textBlack: '#000000',
+  textWhite: '#FFFFFF',
+  
+  // Background colors
+  backgroundColor: '#FFFFFF',
+  lightGrayColor: '#F5F5F5',
+  mediumGrayColor: '#E0E0E0',
+  darkGrayColor: '#9E9E9E',
+  
+  // Status colors
+  successColor: '#4CAF50',
+  warningColor: '#FFC107',
+  errorColor: '#F44336',
+  infoColor: '#2196F3',
+  
+  // Other UI colors
+  borderColor: '#E0E0E0',
+  shadowColor: '#000000',
+  disabledColor: '#BDBDBD',
+  bottomDeviderColor:'#ddd',
+  
+  // Specific UI elements
+  buttonPrimaryColor: '#007AC6',
+  buttonSecondaryColor: '#FFFFFF',
+  inputBorderColor: '#E0E0E0',
+  inputFocusBorderColor: '#007AC6',
+  
+  // Transparency colors
+  transparentBlack: 'rgba(0, 0, 0, 0.5)',
+  transparentWhite: 'rgba(255, 255, 255, 0.5)',
+  
+  // Standard colors
+  whiteColor: '#FFFFFF',
+  blackColor: '#000000',
+  placeholderColor: '#607184',
+  textMidnightColor: '#162029',
+};

package/src/utils/Strings.ts

@@ -0,0 +1 @@
+export const delete_image_confirmation_msg = "Are you sure you wish to delete this image?";

package/src/utils/TextConstants.ts

@@ -0,0 +1,24 @@
+export enum TextSize {
+  TINY = 'tiny',       // 12
+  SMALL = 'small',     // 14
+  NORMAL = 'normal',   // 16
+  LARGE = 'large',     // 18
+  XLARGE = 'xlarge',   // 20
+  XXLARGE = 'xxlarge', // 22
+  XXXLARGE = 'xxxlarge', // 24
+  XXXXLARGE = 'xxxxlarge', // 26
+  XXXXXLARGE = 'xxxxxlarge', // 28
+  XXXXXXLARGE = 'xxxxxxlarge', // 30
+  HEADER = 'header',   // 32
+}
+
+export enum TextWeight {
+  THIN = 'thin',
+  LIGHT = 'light',
+  NORMAL = 'normal',
+  SEMI_LIGHT = 'semi-light',
+  SEMI_REGULAR = 'semi-regular',
+  SEMI_BOLD = 'semi-bold',
+  BOLD = 'bold',
+  EXTRA_BOLD = 'extra-bold',
+}

package/src/utils/Utils.ts

@@ -0,0 +1,11 @@
+import { Platform } from "react-native";
+
+export const isIOS = Platform.OS === 'ios';
+export const isAndroid15AndAbove = Platform.OS === 'android' && parseInt(Platform.Version.toString(), 10) >= 35;
+
+export const MAX_RESOLUTION_WEB = 1100;
+export const MAX_RESOLUTION_MOBILE = 768;
+
+export const isWebDevice = (width: number) => {
+   return width >= MAX_RESOLUTION_WEB ? true : false;
+}

package/src/webbaseview/WebBaseView.tsx

@@ -0,0 +1,26 @@
+import { View, Text, StyleSheet, useWindowDimensions, ViewStyle } from 'react-native'
+import React from 'react'
+import { isWebDevice } from '../utils/Utils';
+
+interface WebBaseViewProps { 
+    children?: React.ReactNode;
+    viewStyle?: ViewStyle
+}
+
+const WebBaseView = ({ children, viewStyle }: WebBaseViewProps) => {
+    const { width } = useWindowDimensions();
+    const style = styles(width);
+  return (
+    <View style={[style.container, viewStyle]}>
+      {children}
+    </View>
+  )
+}
+
+const styles = (width: number) => StyleSheet.create({
+    container: {
+        ...(isWebDevice(width) ? {width: width * 0.8, marginHorizontal: 'auto'} : {width : width})
+    }
+})
+
+export default WebBaseView

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./lib",
+    "declaration": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "**/__tests__/*"]
+}