ota-components-module 1.3.0

package/README.md

@@ -0,0 +1,179 @@
+# OTA Components Module
+
+A reusable UI components library for React Native applications.
+
+## Features
+
+- TypeScript support
+- React Native components
+- Cross-platform compatibility (iOS, Android, Web)
+- Easy to integrate
+- Consistent styling
+
+## Installation
+
+```bash
+# Using npm
+npm install ota-components-module
+
+# Using yarn
+yarn add ota-components-module
+```
+
+## Local Development
+
+You can use this module locally by adding it to your package.json:
+
+```json
+"dependencies": {
+  "ota-components-module": "file:app-modules/ota-components-module"
+}
+```
+
+Then run:
+
+```bash
+npm install
+```
+
+## Available Components
+
+### Button Components
+- `ThemedButton`: A customizable button with primary and secondary styles
+
+### Image Components
+- `MultipleImagePreview`: A gallery component for viewing multiple images with pagination
+- `ImagePickerView`: A component for selecting images from camera or gallery
+- `ImagePickerBottomSheet`: A bottom sheet implementation of the image picker
+- `StackedImage`: A component for displaying stacked images
+
+### Input Components
+- `CustomInput`: A basic text input component
+- `FormField`: A form field component with label and validation
+- `CustomDropdown`: A dropdown selection component
+- `SearchViewInput`: A search input with clear functionality
+- `KeyboardScrollView`: A scrollview that adjusts for keyboard
+
+### Layout Components
+- `BottomTwoButtonLayoutComponent`: A layout with two buttons at the bottom
+- `PropertyHeaderComponent`: A header component for property screens
+- `BottomSheetDialog`: A customizable bottom sheet dialog
+
+### Feedback Components
+- `ActivityLoader`: A loading indicator
+- `ProgressBar`: A progress bar component
+- `CustomAlert`: A custom alert dialog
+- `Dialog`: A general purpose dialog component
+- `DeleteImageConfirmationDialog`: A confirmation dialog for deleting images
+
+### Typography Components
+- `Label`: A text component with various styles and variants
+
+### List Components
+- `SearchableList`: A searchable list component
+
+## Component Structure
+
+```
+app-modules/ota-components-module/
+├── src/
+│   ├── button/
+│   │   └── ThemedButton.tsx
+│   ├── feedback/
+│   │   ├── ActivityLoader.tsx
+│   │   ├── CustomAlert.tsx
+│   │   ├── DeleteImageConfirmationDialog.tsx
+│   │   ├── Dialog.tsx
+│   │   └── ProgressBar.tsx
+│   ├── image/
+│   │   ├── ImagePickerBottomSheet.tsx
+│   │   ├── ImagePickerView.tsx
+│   │   ├── MultipleImagePreview.tsx
+│   │   └── StackedImage.tsx
+│   ├── input/
+│   │   ├── CustomDropdown.tsx
+│   │   ├── CustomInput.tsx
+│   │   ├── FormField.tsx
+│   │   ├── KeyboardScrollView.tsx
+│   │   └── SearchViewInput.tsx
+│   ├── layout/
+│   │   ├── BottomSheetDialog.tsx
+│   │   ├── BottomTwoButtonLayoutComponent.tsx
+│   │   └── PropertyHeaderComponent.tsx
+│   ├── list/
+│   │   └── SearchableList.tsx
+│   ├── models/
+│   │   └── PropertyImage.ts
+│   ├── typography/
+│   │   └── Label.tsx
+│   ├── utils/
+│   │   ├── BaseStyle.ts
+│   │   └── TextConstants.ts
+│   └── index.ts
+```
+
+## Usage Examples
+
+### ThemedButton
+
+```jsx
+import { ThemedButton } from 'ota-components-module';
+
+const MyComponent = () => {
+  return (
+    <ThemedButton
+      title="Press Me"
+      onPress={() => console.log('Button pressed')}
+      type="primary" // or "secondary"
+      size="regular" // or "small"
+    />
+  );
+};
+```
+
+### MultipleImagePreview
+
+```jsx
+import { MultipleImagePreview } from 'ota-components-module';
+
+const MyComponent = () => {
+  const images = [
+    { id: '1', imageBlobUrl: 'https://example.com/image1.jpg' },
+    { id: '2', imageBlobUrl: 'https://example.com/image2.jpg' },
+  ];
+
+  return (
+    <MultipleImagePreview
+      images={images}
+      initialIndex={0}
+      onClose={() => console.log('Closed')}
+      onDelete={(index) => console.log(`Delete image at index ${index}`)}
+    />
+  );
+};
+```
+
+### Label
+
+```jsx
+import { Label, TextSize, TextWeight } from 'ota-components-module';
+
+const MyComponent = () => {
+  return (
+    <Label
+      text="Hello World"
+      size={TextSize.LARGE}
+      weight={TextWeight.BOLD}
+      textColorType="primary"
+    />
+  );
+};
+```
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request

package/assets/images/ic_camera.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0001 8.16667C11.4751 8.16667 12.6667 9.35833 12.6667 10.8333C12.6667 12.3083 11.4751 13.5 10.0001 13.5C8.52508 13.5 7.33342 12.3083 7.33342 10.8333C7.33342 9.35833 8.52508 8.16667 10.0001 8.16667ZM16.6667 4.16667H8.33342V3.33333C8.33342 2.875 7.95842 2.5 7.50008 2.5H5.00008C4.54175 2.5 4.16675 2.875 4.16675 3.33333V4.16667H3.33341C2.41675 4.16667 1.66675 4.91667 1.66675 5.83333V15.8333C1.66675 16.75 2.41675 17.5 3.33341 17.5H16.6667C17.5834 17.5 18.3334 16.75 18.3334 15.8333V5.83333C18.3334 4.91667 17.5834 4.16667 16.6667 4.16667ZM10.0001 15C7.70008 15 5.83342 13.1333 5.83342 10.8333C5.83342 8.53333 7.70008 6.66667 10.0001 6.66667C12.3001 6.66667 14.1667 8.53333 14.1667 10.8333C14.1667 13.1333 12.3001 15 10.0001 15ZM15.8334 7.5C15.3751 7.5 15.0001 7.125 15.0001 6.66667C15.0001 6.20833 15.3751 5.83333 15.8334 5.83333C16.2917 5.83333 16.6667 6.20833 16.6667 6.66667C16.6667 7.125 16.2917 7.5 15.8334 7.5Z" fill="#607184"/>
+</svg>

package/assets/images/ic_close.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_2777_19678" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_2777_19678)">
+<path d="M11.9969 13.4008L7.09688 18.3008C6.91354 18.4841 6.68021 18.5758 6.39688 18.5758C6.11354 18.5758 5.88021 18.4841 5.69688 18.3008C5.51354 18.1174 5.42188 17.8841 5.42188 17.6008C5.42188 17.3174 5.51354 17.0841 5.69688 16.9008L10.5969 12.0008L5.69688 7.10078C5.51354 6.91745 5.42188 6.68411 5.42188 6.40078C5.42188 6.11745 5.51354 5.88411 5.69688 5.70078C5.88021 5.51745 6.11354 5.42578 6.39688 5.42578C6.68021 5.42578 6.91354 5.51745 7.09688 5.70078L11.9969 10.6008L16.8969 5.70078C17.0802 5.51745 17.3135 5.42578 17.5969 5.42578C17.8802 5.42578 18.1135 5.51745 18.2969 5.70078C18.4802 5.88411 18.5719 6.11745 18.5719 6.40078C18.5719 6.68411 18.4802 6.91745 18.2969 7.10078L13.3969 12.0008L18.2969 16.9008C18.4802 17.0841 18.5719 17.3174 18.5719 17.6008C18.5719 17.8841 18.4802 18.1174 18.2969 18.3008C18.1135 18.4841 17.8802 18.5758 17.5969 18.5758C17.3135 18.5758 17.0802 18.4841 16.8969 18.3008L11.9969 13.4008Z" fill="#6C7278"/>
+</g>
+</svg>

package/assets/images/ic_folder.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.33341 16.6668C2.89939 16.6668 2.47976 16.5684 2.12248 16.2111C1.76519 15.8538 1.66675 15.4342 1.66675 15.0002V5.00016C1.66675 4.56613 1.76519 4.14651 2.12248 3.78923C2.47976 3.43194 2.89939 3.3335 3.33341 3.3335H7.56597C7.79304 3.3335 8.01335 3.41078 8.19066 3.55263L9.72617 4.78103C9.90348 4.92288 10.1238 5.00016 10.3509 5.00016H16.6667C17.1008 5.00016 17.5204 5.0986 17.8777 5.45589C18.235 5.81318 18.3334 6.2328 18.3334 6.66683V15.0002C18.3334 15.4342 18.235 15.8538 17.8777 16.2111C17.5204 16.5684 17.1008 16.6668 16.6667 16.6668H3.33341ZM3.33341 14.5002C3.33341 14.7763 3.55727 15.0002 3.83341 15.0002H16.1667C16.4429 15.0002 16.6667 14.7763 16.6667 14.5002V7.16683C16.6667 6.89069 16.4429 6.66683 16.1667 6.66683H3.33341V14.5002Z" fill="#607184"/>
+</svg>

package/expo-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="expo/types" />
+
+declare module '*.svg' {
+    import * as React from 'react';
+    const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+    export default ReactComponent;
+  }

package/mri-manifest.json

@@ -0,0 +1,10 @@
+{
+    "version": 1,
+    "swaggerVersion": 1,
+    "baseUrl": "http://example.com/api/v1.0",
+    "apiKey": "x-api-key",
+    "property:details": {
+        "mobileComponent": "",
+        "webComponent": ""
+    }
+}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "ota-components-module",
+  "version": "1.3.0",
+  "description": "Reusable UI components for OTA applications",
+  "main": "src/index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "@expo/vector-icons": "*",
+    "@types/react": "*",
+    "expo-checkbox": "*",
+    "expo-image": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-safe-area-context": "*"
+  },
+  "dependencies": {
+    "react-native-element-dropdown": "^2.12.4"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.8",
+    "mri-cli-app-dev": "^1.0.5",
+    "typescript": "^5.9.2"
+  }
+}

package/src/button/ThemedButton.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { TouchableOpacity, ViewStyle, TextStyle } from 'react-native';
+import { Colors } from '../utils/BaseStyle';
+import Label from '../typography/Label';
+import { TextSize, TextWeight } from '../utils/TextConstants';
+
+
+export type ButtonType = 'primary' | 'secondary';
+export type ButtonSize = 'small' | 'regular';
+
+export type ButtonProps = {
+  testID?: string;
+  title: string;
+  onPress: () => void;
+  type?: ButtonType;
+  size?: ButtonSize;
+  disabled?: boolean;
+  style?: ViewStyle;
+  textstyle?: TextStyle;
+  primaryColor?: string;
+  backgroundColor?: string;
+  disabledColor?: string;
+};
+
+const ThemedButton: React.FC<ButtonProps> = ({
+  testID,
+  title,
+  onPress,
+  type = 'primary',
+  size = 'regular',
+  disabled = false,
+  style,
+  textstyle,
+  primaryColor = Colors.lightThemePrimaryColor,
+  backgroundColor = '#FFFFFF',
+  disabledColor = '#B8D8E8'
+}) => {
+
+  const getButtonStyle = (): ViewStyle => {
+    const baseStyle: ViewStyle = {
+      borderRadius: 30, // Rounded corners as shown in the image
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderWidth: type === 'secondary' ? 2 : 0,
+      borderColor: primaryColor,
+      height: 50
+    };
+
+    // Size variations
+    const sizeStyles: Record<ButtonSize, ViewStyle> = {
+      small: {
+        paddingVertical: 6,
+        paddingHorizontal: 16,
+        minWidth: 80,
+      },
+      regular: {
+        paddingVertical: 12,
+        paddingHorizontal: 24,
+        minWidth: 120,
+      },
+    };
+    // Type variations
+    const typeStyles: Record<ButtonType, ViewStyle> = {
+      primary: {
+        backgroundColor: disabled ? disabledColor : primaryColor, // Lighter blue when disabled
+      },
+      secondary: {
+        backgroundColor: 'transparent',
+      },
+    };
+
+    return {
+      ...baseStyle,
+      ...sizeStyles[size],
+      ...typeStyles[type],
+      ...style,
+    };
+  };
+
+  const getTextStyle = (): TextStyle => {
+    const baseStyle: TextStyle = {
+      textAlign: 'center',
+    };
+
+    // Type variations
+    const typeStyles: Record<ButtonType, TextStyle> = {
+      primary: {
+        color: backgroundColor,
+      },
+      secondary: {
+        color: primaryColor,
+      },
+    };
+
+    return {
+      ...baseStyle,
+      ...typeStyles[type],
+      ...textstyle
+    };
+  };
+
+  return (
+    <TouchableOpacity
+      testID={testID}
+      style={getButtonStyle()}
+      onPress={onPress}
+      disabled={disabled}
+      activeOpacity={0.7}
+    >
+      <Label
+        text={title}
+        size={size === 'small' ? TextSize.SMALL : TextSize.NORMAL}
+        weight={TextWeight.SEMI_BOLD}
+        customStyle={getTextStyle()}
+      />
+    </TouchableOpacity>
+  );
+};
+
+export default ThemedButton;

package/src/feedback/ActivityLoader.tsx

@@ -0,0 +1,84 @@
+import {ActivityIndicator, Platform, StyleSheet, Text, View} from 'react-native';
+import { Colors } from '../utils/BaseStyle';
+import Label from "../typography/Label";
+import { TextSize, TextWeight } from "../utils/TextConstants";
+
+interface ActivityLoaderProps {
+  loading?: boolean;
+  message?: string;
+  backgroundColor?: string; 
+  textColor?: string;
+  shadowColor?: string;
+}
+
+/**
+ * A loading indicator component that displays a spinner and optional message
+ */
+const ActivityLoader: React.FC<ActivityLoaderProps> = ({ 
+  loading = true,
+  message = "Loading...",
+  backgroundColor = Colors.whiteColor,
+  textColor = Colors.textBlack,
+  shadowColor = Colors.shadowColor,
+}) => {
+  if (!loading) {
+    return null;
+  }
+
+  const styles = getStyles(backgroundColor, textColor, shadowColor);
+
+  return (
+    <View style={[styles.parent]}>
+      <View style={[styles.activityContainer, styles.shadowProp]}>
+        <ActivityIndicator
+          size="large"
+          color={textColor}
+          style={{marginTop: 20}}
+        />
+        <Label text={message} size={TextSize.NORMAL} weight={TextWeight.NORMAL} color={textColor} customStyle={styles.text} />
+      </View>
+    </View>
+  );
+};
+
+const getStyles = (backgroundColor: string, textColor: string, shadowColor: string) => StyleSheet.create({
+  shadowProp: {
+    shadowColor: shadowColor,
+    shadowOffset: {width: -2, height: 2},
+    shadowOpacity: 0.2,
+    shadowRadius: 5,
+    elevation: Platform.OS === 'android' ? 5 : 0,
+    // On Android, add a subtle border to enhance the shadow appearance
+    ...(Platform.OS === 'android'
+      ? {
+          borderWidth: 0.5,
+          borderColor: 'rgba(0,0,0,0.05)',
+        }
+      : {}),
+  },
+  parent: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  activityContainer: {
+    width: 230,
+    height: 100,
+    borderRadius: 10,
+    backgroundColor: backgroundColor,
+  },
+  text: {
+    alignSelf: 'center',
+    marginTop: 4,
+    fontSize: 16,
+    color: textColor,
+  },
+});
+
+export default ActivityLoader;

package/src/feedback/CustomAlert.tsx

@@ -0,0 +1,143 @@
+import React from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Modal,
+  GestureResponderEvent,
+  TouchableOpacity,
+  Platform,
+  ViewStyle,
+} from "react-native";
+import { Colors } from "../utils/BaseStyle";
+import Label from "../typography/Label";
+import { TextSize, TextWeight } from "../utils/TextConstants";
+
+interface CustomAlertProps {
+  visible: boolean;
+  title: string;
+  message: string | null;
+  positiveButtonText?: string;
+  negativeButtonText?: string;
+  backgroundColor?: string;
+  textColor?: string; 
+  shadowColor?: string;
+  onPositivePress: (event: GestureResponderEvent) => void;
+  onNegativePress?: (event: GestureResponderEvent) => void;
+  viewStyle?: ViewStyle | ViewStyle[];
+}
+
+/**
+ * A custom alert dialog component with configurable buttons
+ */
+const CustomAlert: React.FC<CustomAlertProps> = ({
+  visible,
+  title,
+  message,
+  positiveButtonText = "OK",
+  negativeButtonText = "Cancel",
+  onPositivePress,
+  onNegativePress,
+  backgroundColor = Colors.whiteColor,
+  textColor = Colors.textBlack,
+  shadowColor = Colors.shadowColor,
+  viewStyle
+}) => {
+  const styles = getStyles(backgroundColor, textColor, shadowColor);
+  return (
+    <Modal
+      animationType="fade"
+      transparent={true}
+      visible={visible}
+      statusBarTranslucent={true}
+      onRequestClose={onNegativePress || onPositivePress}
+    >
+      <View style={styles.centeredView}>
+        <View style={[styles.modalView, viewStyle]}>
+          {title && <Label text={title} size={TextSize.LARGE} weight={TextWeight.BOLD} color={textColor} customStyle={styles.title} />}
+          
+          <Label text={message} size={TextSize.NORMAL} weight={TextWeight.NORMAL} color={textColor} customStyle={styles.message} />
+          
+          <View style={styles.buttonContainer}>
+            <TouchableOpacity style={styles.textButton} testID="btnPositiveAction" onPress={onPositivePress}>
+              <Label text={positiveButtonText} size={TextSize.NORMAL} weight={TextWeight.BOLD} color={textColor} customStyle={styles.text} />
+            </TouchableOpacity>
+
+            {onNegativePress && (
+              <View style={styles.buttonWrapper}>
+                <TouchableOpacity style={styles.textButton} testID="btnNegativeAction" onPress={onNegativePress}>
+                  <Label text={negativeButtonText} size={TextSize.NORMAL} weight={TextWeight.BOLD} color={textColor} customStyle={styles.text} />
+                </TouchableOpacity>
+              </View>
+            )}
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const getStyles = (backgroundColor: string, textColor: string, shadowColor: string) => StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 20,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+  },
+  modalView: {
+    width: "100%",
+    backgroundColor: backgroundColor,
+    borderRadius: 20,
+    padding: 20,
+    alignItems: "center",
+    shadowColor: shadowColor,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: Platform.OS === 'android' ? 5 : 0,
+    // On Android, add a subtle border to enhance the shadow appearance
+    ...(Platform.OS === 'android'
+      ? {
+          borderWidth: 0.5,
+          borderColor: 'rgba(0,0,0,0.05)',
+        }
+      : {}),
+  },
+  title: {
+    width: "100%",
+    textAlign: "left",
+    marginBottom: 10,
+  },
+  message: {
+    width: "100%",
+    textAlign: "left",
+    marginBottom: 20,
+    lineHeight: 26
+  },
+  buttonContainer: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    width: "100%",
+    marginTop: 20,
+    paddingHorizontal: 10,
+  },
+  singleButtonContainer: {
+    justifyContent: "center",
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: "bold",
+    color: textColor,
+  },
+  buttonWrapper: {
+    // Ensures both buttons take equal width
+    marginStart: 35, // Adds spacing between buttons
+  },
+  textButton: {
+    paddingHorizontal: 10,
+    paddingVertical: 5
+  }
+});
+
+export default CustomAlert;

package/src/feedback/DeleteImageConfirmationDialog.tsx

@@ -0,0 +1,58 @@
+import { View } from 'react-native'
+import React from 'react'
+import Label from '../typography/Label'
+import { TextSize, TextWeight } from '../utils/TextConstants'
+import BottomTwoButtonLayoutComponent from '../layout/BottomTwoButtonLayoutComponent'
+
+interface DeleteImageConfirmationDialogProps {
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  primaryButtonText?: string;
+  secondaryButtonText?: string;
+  primaryColor?: string;
+  backgroundColor?: string;
+  textColor?: string;
+}
+
+/**
+ * A confirmation dialog for deleting images
+ */
+const DeleteImageConfirmationDialog: React.FC<DeleteImageConfirmationDialogProps> = ({
+  message,
+  primaryButtonText = "Delete",
+  secondaryButtonText = "Cancel",
+  onConfirm, 
+  onCancel,
+  primaryColor,
+  backgroundColor,
+  textColor
+}) => {
+  return (
+    <View style={{flex: 1}}>
+      <Label 
+        text={message} 
+        size={TextSize.NORMAL} 
+        weight={TextWeight.NORMAL} 
+        textColorType="primary"
+        customStyle={{alignSelf: 'center', textAlign: 'center', paddingHorizontal: 15, color: textColor}}
+      />
+    
+      <BottomTwoButtonLayoutComponent 
+        primaryButtonTestID="btnDelete"
+        secondaryButtonTestID="btnCancel"
+        primaryButtonText={primaryButtonText}
+        secondaryButtonText={secondaryButtonText}
+        onPrimaryButtonPress={onConfirm}
+        onSecondaryButtonPress={onCancel}
+        isPrimaryButtonDisabled={false}
+        isSecondaryButtonDisabled={false}
+        containerStyle={{elevation: 0, shadowOpacity: 0, borderTopWidth: 0}}
+        primaryColor={primaryColor}
+        backgroundColor={backgroundColor}
+      />
+    </View>
+  )
+}
+
+export default DeleteImageConfirmationDialog