@finspringinnovations/fdsdk 0.0.1

package/src/components/FormSection.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useColors, useTypography } from '../theme/ThemeContext';
+
+export interface FormSectionProps {
+    title?: string;
+    subtitle?: string;
+    children: React.ReactNode;
+    containerStyle?: object;
+    titleStyle?: object;
+    subtitleStyle?: object;
+    contentStyle?: object;
+    showDivider?: boolean;
+    dividerStyle?: object;
+}
+
+const FormSection: React.FC<FormSectionProps> = ({
+    title,
+    subtitle,
+    children,
+    containerStyle,
+    titleStyle,
+    subtitleStyle,
+    contentStyle,
+    showDivider = false,
+    dividerStyle,
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const styles = createStyles(colors, typography);
+
+    return (
+        <View style={[styles.container, containerStyle]}>
+            {/* Section Header */}
+            {(title || subtitle) && (
+                <View style={styles.header}>
+                    {title && (
+                        <Text style={[styles.title, titleStyle]}>{title}</Text>
+                    )}
+                    {subtitle && (
+                        <Text style={[styles.subtitle, subtitleStyle]}>{subtitle}</Text>
+                    )}
+                </View>
+            )}
+
+            {/* Divider */}
+            {showDivider && (
+                <View style={[styles.divider, dividerStyle]} />
+            )}
+
+            {/* Content */}
+            <View style={[styles.content, contentStyle]}>
+                {children}
+            </View>
+        </View>
+    );
+};
+
+const createStyles = (colors: any, typography: any) => StyleSheet.create({
+    container: {
+        marginBottom: 24,
+    },
+    header: {
+        marginBottom: 16,
+    },
+    title: {
+        ...typography.styles.h3,
+        color: colors.text,
+        marginBottom: 4,
+    },
+    subtitle: {
+        ...typography.styles.bodyMedium,
+        color: colors.textLight,
+        lineHeight: 20,
+    },
+    divider: {
+        height: 1,
+        backgroundColor: colors.border + '20',
+        marginBottom: 16,
+    },
+    content: {
+        // Content styling can be customized via contentStyle prop
+    },
+});
+
+export default FormSection;

package/src/components/Header.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import {
+    View,
+    Text,
+    StyleSheet,
+    TouchableOpacity,
+    StatusBar,
+    Image,
+    Platform,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { useColors, useTypography, useSpacing, useTheme } from '../theme/ThemeContext';
+import type { ColorScheme } from '../theme';
+import { images } from '../assets/images/images';
+import { base64Images } from '../constants/strings/base64Images';
+import { platform } from 'os';
+
+
+interface HeaderProps {
+    title: string;
+    onBackPress?: () => void;
+    backgroundColor?: string;
+    titleColor?: string;
+    customStyles?: {
+        container?: object;
+        title?: object;
+        backButton?: object;
+    };
+}
+
+const Header: React.FC<HeaderProps> = ({
+    title,
+    onBackPress,
+    backgroundColor,
+    titleColor,
+    customStyles = {},
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const spacing = useSpacing();
+    const { themeName } = useTheme();
+
+    const styles = createStyles(colors, typography, spacing, themeName);
+    const headerBg = colors.headerBg;
+    const textColor = titleColor || (colors as any).headerText || colors.background;
+
+    const BackIcon = () => (
+        <Icon
+            name="arrow-back"
+            size={24}
+            color={textColor}
+            style={styles.backIcon}
+        />
+    );
+
+    return (
+        <>
+            <View style={[styles.header, { backgroundColor: headerBg }, customStyles.container]}>
+                <TouchableOpacity
+                    style={[styles.backButton, customStyles.backButton]}
+                    onPress={onBackPress}
+                >
+                    {/* <BackIcon /> */}
+                    <Image
+                        source={{ uri: base64Images.backArrow }}
+                        style={[styles.backIcon, { tintColor: textColor }]}
+                        resizeMode="contain"
+                        width={24}
+                        height={24}
+                    />
+                </TouchableOpacity>
+                <Text style={[styles.headerTitle, { color: textColor }, customStyles.title]}>
+                    {title}
+                </Text>
+            </View>
+        </>
+    );
+};
+
+const isAndroid15OrHigher = Platform.OS === "android" && Platform.Version >= 15;
+const createStyles = (colors: ColorScheme, typography: any, spacing: any, themeName: string) => StyleSheet.create({
+    header: {
+        height: Platform.OS === 'ios' ? 100 : isAndroid15OrHigher ? 80 : 70, // Set fixed height to 200px
+        paddingHorizontal: spacing.lg,
+        flexDirection: 'row',
+        alignItems: 'center', // Vertically center the content
+        justifyContent: 'flex-start', // Align content to the left
+        borderBottomWidth: themeName === 'dark' ? 1 : 0,
+        borderBottomColor: themeName === 'dark' ? colors.border : 'transparent',
+    },
+    backButton: {
+        marginTop: Platform.OS === 'ios' ? 30 : isAndroid15OrHigher ? 15 : 0,
+        marginRight: spacing.lg,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    backIcon: {
+        // Icon styling handled by Ionicons component
+        width: 24,
+        height: 24,
+        resizeMode: 'contain',
+        // backgroundColor: "red",
+    },
+    headerTitle: {
+        marginTop: Platform.OS === 'ios' ? 30 : isAndroid15OrHigher ? 15 : 0,
+        ...typography.styles.h3,
+    },
+});
+
+export default Header;

package/src/components/IFSCSearchResultCard.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { useColors, useTypography, useTheme } from '../theme/ThemeContext';
+
+export interface IFSCSearchResultCardProps {
+    bankName: string;
+    branchName: string;
+    ifscCode: string;
+    bankShortDesc?: string;
+    bankCode?: string;
+    onSelect: () => void;
+    disabled?: boolean;
+    buttonTitle?: string;
+}
+
+const IFSCSearchResultCard: React.FC<IFSCSearchResultCardProps> = ({
+    bankName,
+    branchName,
+    ifscCode,
+    bankShortDesc,
+    bankCode,
+    onSelect,
+    disabled = false,
+    buttonTitle = 'Select',
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const { themeName } = useTheme();
+    const styles = createStyles(colors, typography, themeName);
+
+    return (
+        <View style={styles.resultCard}>
+            <View style={styles.resultInfo}>
+                <View style={styles.bankHeader}>
+                    <Text style={styles.bankName}>{bankName}</Text>
+                </View>
+                <Text style={styles.branchName}>{branchName}</Text>
+                <View style={styles.ifscContainer}>
+                    <Text style={styles.ifscCode}>IFSC:</Text>
+                    <Text style={styles.ifscValue}>{ifscCode}</Text>
+                </View>
+                {/* {bankCode && (
+                    <View style={styles.bankCodeContainer}>
+                        <Text style={styles.bankCodeLabel}>Bank Code:</Text>
+                        <Text style={styles.bankCodeValue}>{bankCode}</Text>
+                    </View>
+                )} */}
+            </View>
+            <TouchableOpacity
+                style={styles.selectButton}
+                onPress={onSelect}
+                activeOpacity={0.7}
+                disabled={disabled}
+            >
+                <Text style={styles.selectButtonText}>{buttonTitle}</Text>
+            </TouchableOpacity>
+        </View>
+    );
+};
+
+const createStyles = (colors: any, typography: any, themeName: string) => StyleSheet.create({
+    resultCard: {
+        borderRadius: 12,
+        padding: 1,
+        marginBottom: 16,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    resultInfo: {
+        flex: 1,
+        marginRight: 12,
+    },
+    bankHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 4,
+    },
+    bankName: {
+        ...typography.styles.h3,
+        color: colors.text,
+        flex: 1,
+    },
+    bankShortDesc: {
+        ...typography.styles.bodySmall,
+        color: colors.textLight,
+        marginLeft: 8,
+    },
+    branchName: {
+        ...typography.styles.h3,
+        color: colors.text,
+        marginBottom: 4,
+    },
+    ifscContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 4,
+    },
+    ifscCode: {
+        ...typography.styles.h3,
+        color: colors.text,
+        marginRight: 8,
+    },
+    ifscValue: {
+        ...typography.styles.h3,
+        fontWeight: typography.fontWeight.semiBold,
+        color: colors.text,
+    },
+    bankCodeContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 4,
+    },
+    bankCodeLabel: {
+        ...typography.styles.bodySmall,
+        color: colors.textLight,
+        marginRight: 8,
+    },
+    bankCodeValue: {
+        ...typography.styles.bodySmall,
+        fontWeight: typography.fontWeight.medium,
+        color: colors.text,
+    },
+    selectButton: {
+        backgroundColor: themeName === 'dark' ? colors.buttonBackground : colors.headerBg,
+        paddingHorizontal: 24,
+        paddingVertical: 10,
+        borderRadius: themeName === 'dark' ? 5 : 25,
+        minWidth: 80,
+        alignItems: 'center',
+    },
+    selectButtonText: {
+        color: themeName === 'dark' ? colors.buttonTextColor : 'white',
+        ...typography.styles.bodyMedium,
+        fontWeight: typography.fontWeight.semiBold,
+    },
+});
+
+export default IFSCSearchResultCard;

package/src/components/InfoBox.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { View, Text, StyleSheet, Image } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { base64Images } from '../constants/strings/base64Images';
+import { useColors, useTypography, useTheme } from '../theme/ThemeContext';
+
+interface InfoBoxProps {
+    message: string;
+    containerStyle?: any;
+    showNonStockIcon?: boolean;
+}
+
+const InfoBox: React.FC<InfoBoxProps> = ({ message, containerStyle, showNonStockIcon = false }) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const { themeName } = useTheme();
+    const styles = createStyles(colors, typography);
+
+    return (
+        <View style={[styles.container, containerStyle]}>
+            {showNonStockIcon ? (
+                <Image source={{ uri: themeName === 'dark' ? base64Images.stockDark : base64Images.nonStock }} style={styles.imageIcon} resizeMode="contain" />
+            ) : (
+                <Icon name="information-circle" size={16} color={colors.success} style={styles.icon} />
+            )}
+            <Text style={styles.text}>{message}</Text>
+        </View>
+    );
+};
+
+const createStyles = (colors: any, typography: any) => StyleSheet.create({
+    container: {
+        backgroundColor: 'rgba(0,235,180,0.1)',
+        padding: 12,
+        borderRadius: 8,
+        marginTop: 16,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    icon: {
+        marginRight: 8,
+    },
+    imageIcon: {
+        width: 16,
+        height: 16,
+        marginRight: 8,
+    },
+    text: {
+        ...typography.styles.bodyMedium,
+        color: colors.textLight,
+        flex: 1,
+    },
+});
+
+export default InfoBox;

package/src/components/InterestRateCard.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useColors, useTypography, useTheme } from '../theme/ThemeContext';
+
+interface InterestRateCardProps {
+    interestRate: string;
+    maturityAmount: string;
+    children?: React.ReactNode;
+}
+
+const InterestRateCard: React.FC<InterestRateCardProps> = ({
+    interestRate,
+    maturityAmount,
+    children,
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const { themeName } = useTheme();
+    const styles = createStyles(colors, typography, themeName);
+
+    return (
+        <View style={styles.card}>
+            <View style={styles.row}>
+                <View style={styles.left}>
+                    <Text style={styles.label}>Interest Rate</Text>
+                    <Text style={styles.value}>{interestRate}</Text>
+                </View>
+                <View style={styles.right}>
+
+                    <Text style={styles.label}>On Maturity</Text>
+                    <Text style={styles.valueRight}>{maturityAmount}</Text>
+
+                </View>
+
+            </View>
+            {children}
+
+        </View>
+    );
+};
+
+const createStyles = (colors: any, typography: any, themeName: string) => StyleSheet.create({
+    card: {
+        backgroundColor: themeName === 'dark' ? colors.inputBackground : 'rgba(0,235,180,0.1)',
+        padding: 16,
+        borderRadius: 4,
+        marginTop: 25,
+    },
+    row: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    left: {
+        flex: 1,
+    },
+    right: {
+        flex: 1,
+        alignItems: 'flex-end',
+    },
+    label: {
+        ...typography.styles.bodySmall,
+        color: themeName === 'dark' ? colors.labelColor : colors.textLight,
+        marginBottom: 4,
+    },
+    value: {
+        ...typography.styles.bodyLarge,
+        fontWeight: '600',
+        color: colors.text,
+    },
+    valueRight: {
+        ...typography.styles.bodyLarge,
+        fontWeight: '700',
+        color: colors.text,
+    },
+});
+
+export default InterestRateCard;

package/src/components/LoadingIndicator.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
+import { useColors, useTypography } from '../theme/ThemeContext';
+
+export interface LoadingIndicatorProps {
+    message?: string;
+    size?: 'small' | 'large';
+    color?: string;
+    containerStyle?: object;
+    messageStyle?: object;
+    showMessage?: boolean;
+    overlay?: boolean;
+}
+
+const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
+    message = 'Loading...',
+    size = 'large',
+    color,
+    containerStyle,
+    messageStyle,
+    showMessage = true,
+    overlay = false,
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const styles = createStyles(colors, typography, overlay);
+
+    const indicatorColor = color || colors.primary;
+
+    return (
+        <View style={[styles.container, containerStyle]}>
+            <ActivityIndicator size={size} color={indicatorColor} />
+            {showMessage && message && (
+                <Text style={[styles.message, messageStyle]}>{message}</Text>
+            )}
+        </View>
+    );
+};
+
+const createStyles = (colors: any, typography: any, overlay: boolean) => StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 20,
+        ...(overlay && {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(255, 255, 255, 0.9)',
+            zIndex: 1000,
+        }),
+    },
+    message: {
+        ...typography.styles.bodyMedium,
+        color: colors.textLight,
+        marginTop: 12,
+        textAlign: 'center',
+    },
+});
+
+export default LoadingIndicator;