@finspringinnovations/fdsdk 0.0.1

package/src/components/ActiveFDCard.tsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import {
+    View,
+    Text,
+    StyleSheet,
+    Platform,
+} from 'react-native';
+import { useColors, useTypography, useSpacing, useShadows, useTheme } from '../theme/ThemeContext';
+import { getBorderColor } from '../theme';
+import type { ColorScheme, ThemeName } from '../theme';
+
+// Enable Fast Refresh for this module
+if (__DEV__) {
+    // @ts-ignore
+    module.hot?.accept();
+}
+
+interface ActiveFDCardProps {
+    name: string;
+    invested: number;
+    value: number;
+    returns: number;
+    maturityDate: string;
+    customStyles?: {
+        container?: object;
+        name?: object;
+        amount?: object;
+        returns?: object;
+    };
+}
+
+const ActiveFDCard: React.FC<ActiveFDCardProps> = ({
+    name,
+    invested,
+    value,
+    returns,
+    maturityDate,
+    customStyles = {},
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const spacing = useSpacing();
+    const shadows = useShadows();
+    const { themeName } = useTheme();
+
+    const styles = createStyles(colors, typography, spacing, shadows, themeName);
+
+    const formatCurrency = (amount: number) => {
+        return amount.toLocaleString('en-IN');
+    };
+
+    return (
+        <View style={[styles.activeFDCard, customStyles.container]}>
+            <View style={styles.activeFDHeader}>
+                <Text style={[styles.activeFDName, customStyles.name]}>{name}</Text>
+                <View style={styles.maturityContainer}>
+                    <Text style={styles.maturityLabel}>Maturity Date</Text>
+                    <Text style={styles.maturityDate}>{maturityDate}</Text>
+                </View>
+            </View>
+
+            <View style={styles.activeFDDetails}>
+                <View style={styles.activeFDLeft}>
+                    <Text style={styles.activeFDLabel}>Invested</Text>
+                    <Text style={[styles.activeFDAmount, customStyles.amount]}>
+                        ₹ {formatCurrency(invested)}
+                    </Text>
+                </View>
+                <View style={styles.activeFDRight}>
+                    <Text style={styles.activeFDLabel}>Value</Text>
+                    <Text style={[styles.activeFDAmount, customStyles.amount]}>
+                        ₹ {formatCurrency(value)}
+                    </Text>
+                    <Text style={[styles.activeFDReturns, customStyles.returns]}>
+                        {returns}%
+                    </Text>
+                </View>
+            </View>
+        </View>
+    );
+};
+
+const createStyles = (colors: ColorScheme, typography: any, spacing: any, shadows: any, themeName: ThemeName) => StyleSheet.create({
+    activeFDCard: {
+        backgroundColor: colors.surface,
+        borderRadius: 4, // Reduced corner radius
+        padding: spacing.md,
+        borderWidth: themeName === 'dark' ? 1 : 0.5, // Same as FDCard
+        borderColor: themeName === 'dark' ? colors.border : getBorderColor({ colors } as any, 0.36), // Same as FDCard
+        shadowColor: '#000000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.1, // 10% shadow spread
+        shadowRadius: 4,
+        elevation: 3,
+    },
+    activeFDHeader: {
+        marginTop: -8,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center', // Changed to center for vertical alignment
+        marginBottom: spacing.sm, // Reduced from lg to sm to decrease card height
+    },
+    activeFDName: {
+        ...typography.styles.text14Medium, // 14px font size
+        fontWeight: '600',
+        color: colors.text,
+        flex: 1,
+        lineHeight: Platform.OS === 'ios' ? (typography.styles.text14Medium?.lineHeight ?? 14) + 3 : typography.styles.text14Medium?.lineHeight,
+    },
+    maturityContainer: {
+        alignItems: 'flex-end',
+    },
+    maturityLabel: {
+        ...typography.styles.text10Regular, // 10px for label
+        color: colors.textSecondary,
+        marginBottom: 3,
+        marginTop: 2,
+    },
+    maturityDate: {
+        ...typography.styles.text10Regular, // 10px for value
+        color: colors.tabSelected,
+    },
+    activeFDDetails: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    activeFDLeft: {
+        flex: 1,
+        marginRight: 10, // Increased right spacing by 10px
+    },
+    activeFDRight: {
+        alignItems: 'flex-end',
+        marginLeft: 10, // Increased left spacing by 10px
+    },
+    activeFDLabel: {
+        ...typography.styles.text12Regular, // 12px for label
+        color: colors.textSecondary,
+        marginBottom: spacing.xs + 3,
+        lineHeight: Platform.OS === 'ios' ? (typography.styles.text12Regular?.lineHeight ?? 12) + 3 : typography.styles.text12Regular?.lineHeight,
+    },
+    activeFDAmount: {
+        ...typography.styles.text14Medium, // 14px for value
+        fontWeight: '600',
+        color: colors.text,
+        marginBottom: spacing.xs + 2,
+        lineHeight: Platform.OS === 'ios' ? (typography.styles.text14Medium?.lineHeight ?? 14) + 3 : typography.styles.text14Medium?.lineHeight,
+    },
+    activeFDReturns: {
+        ...typography.styles.text14Medium, // 14px for value
+        color: colors.success,
+        marginTop: 2,
+    },
+});
+
+export default ActiveFDCard;

package/src/components/AmountInput.tsx

@@ -0,0 +1,217 @@
+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Image, Platform } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { base64Images } from '../constants/strings/base64Images';
+import { useColors, useTypography, useTheme } from '../theme/ThemeContext';
+import { getBorderColor } from '../theme';
+
+interface AmountInputProps {
+    label: string;
+    value: string;
+    onChangeText: (text: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    placeholder?: string;
+    noteText?: string;
+    minMaxText?: string;
+    errorMessage?: string;
+    inputRef?: React.RefObject<TextInput>;
+    selection?: { start: number; end: number };
+
+}
+
+const AmountInput: React.FC<AmountInputProps> = ({
+    label,
+    value,
+    onChangeText,
+    onBlur,
+    onFocus,
+    placeholder = '25,000',
+    noteText,
+    minMaxText,
+    errorMessage,
+    selection,
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const { themeName } = useTheme();
+    const styles = createStyles(colors, typography, themeName);
+
+    // Handle text changes to filter invalid data (including pasted content)
+    const handleTextChange = (text: string) => {
+        // Remove all non-numeric characters
+        let cleanedText = text.replace(/[^0-9]/g, '');
+
+        // Remove leading zeros (but keep single zero if that's all there is)
+        if (cleanedText.length > 1) {
+            cleanedText = cleanedText.replace(/^0+/, '');
+        }
+
+        // If all zeros were removed, set to empty string
+        if (cleanedText === '') {
+            cleanedText = '';
+        }
+
+        // Only call onChangeText if the text has changed (to avoid infinite loops)
+        if (cleanedText !== value) {
+            onChangeText(cleanedText);
+        }
+    };
+
+    return (
+        <View>
+            <Text style={styles.label}>{label}</Text>
+            <View style={styles.inputContainer}>
+                <TextInput
+                    style={styles.currencyInput}
+                    value="₹"
+                    editable={false}
+                />
+                <TextInput
+                    style={styles.amountInput}
+                    keyboardType="number-pad"
+                    value={value}
+                    onChangeText={handleTextChange}
+                    onFocus={onFocus}
+                    onBlur={onBlur}
+                    placeholder={placeholder}
+                    placeholderTextColor='#9ca9b0'
+                    returnKeyType={Platform.OS === 'ios' ? 'done' : 'default'}
+                    blurOnSubmit={Platform.OS === 'ios'}
+                    selection={selection}
+                />
+            </View>
+            {errorMessage && (
+                <View style={styles.errorContainer}>
+                    <Image
+                        source={{ uri: base64Images.error }}
+                        style={{ width: 16, height: 16, marginRight: 6 }}
+                        resizeMode="contain"
+                    />
+                    <Text style={styles.errorText}>{errorMessage}</Text>
+                </View>
+            )}
+            {noteText && (
+                <View style={styles.noteRow}>
+                    <Icon name="information-circle-outline" size={14} color={themeName === 'dark' ? colors.labelColor : colors.textLight} style={styles.noteIcon} />
+                    <Text style={styles.noteText}>{noteText}</Text>
+                </View>
+            )}
+            {minMaxText && (
+                <View style={styles.limitContainer}>
+                    <Text style={styles.limitLabel}>Min: </Text>
+                    <Text style={styles.limitValue}>₹5 K</Text>
+                    <Text style={styles.limitSeparator}> | </Text>
+                    <Text style={styles.limitLabel}>Max: </Text>
+                    <Text style={styles.limitValue}>₹5 Cr</Text>
+                </View>
+            )}
+        </View>
+    );
+};
+
+const createStyles = (colors: any, typography: any, themeName: string) => StyleSheet.create({
+    textviewspace: {
+        marginLeft: 10,
+    },
+
+
+    label: {
+        ...typography.styles.bodyMedium,
+        fontWeight: '600',
+        marginTop: 25,
+        marginBottom: 8,
+        color: themeName === 'dark' ? colors.labelColor : colors.text,
+    },
+    inputContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: themeName === 'dark' ? colors.background : "white",
+        height: 48,
+        paddingHorizontal: 0,
+        gap: 12,
+
+    },
+    currencyInput: {
+        width: 50,
+        textAlign: 'center',
+        fontSize: 14,
+        color: colors.text,
+        borderWidth: themeName === 'dark' ? 1 : 0.5,
+        borderRadius: 4,
+        borderColor: themeName === 'dark' ? colors.inputBorder : getBorderColor({ colors } as any, 0.36),
+        height: '100%',
+        paddingVertical: 0,
+        backgroundColor: themeName === 'dark' ? colors.inputBackground : colors.surface
+
+    },
+    amountInput: {
+        flex: 1,
+        fontSize: 14,
+        color: colors.text,
+        paddingHorizontal: 16,
+        height: '100%',
+        marginLeft: 0,
+        borderColor: themeName === 'dark' ? colors.inputBorder : getBorderColor({ colors } as any, 0.36),
+        borderWidth: themeName === 'dark' ? 1 : 0.5,
+        borderRadius: 4,
+        backgroundColor: themeName === 'dark' ? colors.inputBackground : colors.surface
+
+    },
+    noteRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        marginTop: 8,
+    },
+    noteIcon: {
+        marginRight: 6,
+        marginTop: 1,
+    },
+    noteText: {
+        fontSize: 11,
+        color: themeName === 'dark' ? colors.labelColor : colors.textLight,
+        flex: 1,
+    },
+    limitText: {
+        fontSize: 14,
+        color: themeName === 'dark' ? colors.labelColor : colors.textLight,
+        marginTop: 10,
+        marginBottom: 1,
+    },
+    limitContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 10,
+        marginBottom: 1,
+    },
+    limitLabel: {
+        fontSize: 12,
+        color: themeName === 'dark' ? colors.labelColor : '#000000', // White for dark theme, black for others
+        fontWeight: '400',
+    },
+    limitValue: {
+        fontSize: 14,
+        color: themeName === 'dark' ? colors.labelColor : colors.textLight, // White for dark theme
+    },
+    limitSeparator: {
+        fontSize: 14,
+        color: themeName === 'dark' ? colors.labelColor : colors.textLight, // White for dark theme
+    },
+    errorContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 8,
+    },
+    errorIcon: {
+        marginRight: 6,
+    },
+    errorText: {
+        fontSize: 12,
+        color: colors.error || '#FF0000',
+        fontWeight: '500',
+        flex: 1,
+    },
+});
+
+export default AmountInput;

package/src/components/CheckboxOption.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { TouchableOpacity, View, Text, StyleSheet, Image } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { useColors, useTypography, useTheme } from '../theme/ThemeContext';
+import { base64Images } from '../constants/strings/base64Images';
+
+interface CheckboxOptionProps {
+    label: string;
+    checked: boolean;
+    onPress: () => void;
+    numberOfLines?: number;
+    containerStyle?: object;
+    disabled?: boolean;
+}
+
+const CheckboxOption: React.FC<CheckboxOptionProps> = ({
+    label,
+    checked,
+    onPress,
+    numberOfLines,
+    containerStyle,
+    disabled = false,
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const { themeName } = useTheme();
+    const styles = createStyles(colors, typography, themeName);
+
+    return (
+        <TouchableOpacity
+            style={[styles.container, containerStyle]}
+            onPress={onPress}
+            disabled={disabled}
+            activeOpacity={disabled ? 1 : 0.7}
+        >
+            <View style={[styles.checkbox, checked && styles.checkboxChecked]}>
+                {themeName === 'dark' ? (
+                    <Image
+                        source={{ uri: checked ? base64Images.checkBoxDark : base64Images.unCheckBoxDark }}
+                        resizeMode="cover"
+                        width={20}
+                        height={20}
+                    />
+                ) : (
+                    checked ? (
+                        <Image
+                            source={{ uri: base64Images.filledCheckBox }}
+                            resizeMode="cover"
+                            width={20}
+                            height={20}
+                        />
+                    ) : null
+                )}
+            </View>
+            <Text
+                style={styles.label}
+                numberOfLines={numberOfLines}
+                ellipsizeMode="tail"
+            >
+                {label}
+            </Text>
+        </TouchableOpacity>
+    );
+};
+
+const createStyles = (colors: any, typography: any, themeName: string) => StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 0,
+    },
+    checkbox: {
+        width: 18,
+        height: 18,
+        borderRadius: 3,
+        borderWidth: 1.5,
+        borderColor: themeName === 'dark' ? colors.tabSelected : colors.primary,
+        marginRight: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    checkboxChecked: {
+        // backgroundColor: colors.tabSelected,
+        borderColor: colors.tabSelected,
+    },
+    label: {
+        ...typography.styles.bodyMedium,
+        color: colors.text,
+        flex: 1,
+    },
+});
+
+export default CheckboxOption;

package/src/components/CompanyHeader.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { View, Text, StyleSheet, Image } from 'react-native';
+import { useColors, useTypography } from '../theme/ThemeContext';
+import { base64Images } from '../constants/strings/base64Images';
+
+interface CompanyHeaderProps {
+    companyName: string;
+    rating: string;
+}
+
+const CompanyHeader: React.FC<CompanyHeaderProps> = ({ companyName, rating }) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const styles = createStyles(colors, typography);
+
+    return (
+        <View style={styles.wrapper}>
+            <View style={styles.card}>
+                <View style={styles.innerBorder}>
+                    <Image
+                        source={{ uri: base64Images.shriramLogo }}
+                        style={styles.logo}
+                        resizeMode="contain"
+                    />
+                    <View style={styles.info}>
+                        <Text style={styles.name}>{companyName}</Text>
+                        <Text style={styles.rating}>{rating}</Text>
+                    </View>
+                </View>
+            </View>
+        </View>
+    );
+};
+
+const createStyles = (colors: any, typography: any) => StyleSheet.create({
+    wrapper: {
+        paddingHorizontal: 2,
+        paddingTop: 12,
+        paddingBottom: 8,
+    },
+    card: {
+        backgroundColor: '#0B2940',
+        borderRadius: 24,
+        padding: 4,
+        borderWidth: 1,
+        borderColor: '#124061',
+        shadowColor: '#000',
+        shadowOpacity: 0.2,
+        shadowOffset: { width: 0, height: 4 },
+        shadowRadius: 12,
+        elevation: 4,
+    },
+    innerBorder: {
+        borderRadius: 20,
+        padding: 16,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    logo: {
+        width: 45,
+        height: 45,
+        marginRight: 12,
+    },
+    info: {
+        flex: 1,
+    },
+    name: {
+        ...typography.styles.h2,
+        color: '#FFFFFF',
+        marginBottom: 6,
+    },
+    rating: {
+        ...typography.styles.text14Medium,
+        color: '#BFD5F6',
+    },
+});
+
+export default CompanyHeader;

package/src/components/DropdownSelector.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet, Image, View } from 'react-native';
+import { base64Images } from '../constants/strings/base64Images';
+import { useColors, useTypography, useTheme } from '../theme/ThemeContext';
+import { getBorderColor } from '../theme';
+
+interface DropdownSelectorProps {
+    label: string;
+    value: string;
+    onPress?: () => void;
+    placeholder?: string;
+}
+
+const DropdownSelector: React.FC<DropdownSelectorProps> = ({
+    label,
+    value,
+    onPress,
+    placeholder,
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const { themeName } = useTheme();
+    const styles = createStyles(colors, typography, themeName);
+
+    return (
+        <>
+            <Text style={styles.label}>{label}</Text>
+            <TouchableOpacity style={styles.dropdown} onPress={onPress}>
+                <Text style={[styles.dropdownText, !value && styles.placeholderText]}>
+                    {value || placeholder || 'Select'}
+                </Text>
+                <Image
+                    source={{ uri: base64Images.dropdown }}
+                    style={styles.icon}
+                    resizeMode="contain"
+                />
+            </TouchableOpacity>
+        </>
+    );
+};
+
+const createStyles = (colors: any, typography: any, themeName: string) => StyleSheet.create({
+    label: {
+        ...typography.styles.bodyMedium,
+        fontWeight: '600',
+        marginTop: 25,
+        marginBottom: 8,
+        fontSize: 16,
+        color: themeName === 'dark' ? colors.labelColor : colors.text,
+    },
+    dropdown: {
+        borderWidth: 0.5,
+        borderColor: themeName === 'dark' ? colors.inputBorder : getBorderColor({ colors } as any, 0.36),
+        borderRadius: 4,
+        paddingHorizontal: 16,
+        height: 48,
+        marginTop: 8,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        backgroundColor: themeName === 'dark' ? colors.inputBackground : colors.surface,
+    },
+    dropdownText: {
+        fontSize: 14,
+        color: colors.text,
+    },
+    placeholderText: {
+        color: colors.placeholderColor,
+    },
+    icon: {
+        width: 20,
+        height: 20,
+        tintColor: colors.textLight,
+    },
+});
+
+export default DropdownSelector;