@finspringinnovations/fdsdk 0.0.1

package/src/components/EmptyState.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { useColors, useTypography } from '../theme/ThemeContext';
+
+export interface EmptyStateProps {
+    iconName?: string;
+    title: string;
+    subtitle?: string;
+    actionText?: string;
+    onAction?: () => void;
+    containerStyle?: object;
+    iconStyle?: object;
+    titleStyle?: object;
+    subtitleStyle?: object;
+    actionButtonStyle?: object;
+    actionTextStyle?: object;
+    showAction?: boolean;
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({
+    iconName = 'document-outline',
+    title,
+    subtitle,
+    actionText = 'Get Started',
+    onAction,
+    containerStyle,
+    iconStyle,
+    titleStyle,
+    subtitleStyle,
+    actionButtonStyle,
+    actionTextStyle,
+    showAction = true,
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const styles = createStyles(colors, typography);
+
+    return (
+        <View style={[styles.container, containerStyle]}>
+            {/* Icon */}
+            <Icon
+                name={iconName}
+                size={64}
+                color={colors.textLight}
+                style={[styles.icon, iconStyle]}
+            />
+
+            {/* Title */}
+            <Text style={[styles.title, titleStyle]}>{title}</Text>
+
+            {/* Subtitle */}
+            {subtitle && (
+                <Text style={[styles.subtitle, subtitleStyle]}>{subtitle}</Text>
+            )}
+
+            {/* Action Button */}
+            {showAction && onAction && (
+                <TouchableOpacity
+                    style={[styles.actionButton, actionButtonStyle]}
+                    onPress={onAction}
+                >
+                    <Text style={[styles.actionText, actionTextStyle]}>{actionText}</Text>
+                </TouchableOpacity>
+            )}
+        </View>
+    );
+};
+
+const createStyles = (colors: any, typography: any) => StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 32,
+        minHeight: 200,
+    },
+    icon: {
+        marginBottom: 16,
+        opacity: 0.6,
+    },
+    title: {
+        ...typography.styles.h3,
+        color: colors.text,
+        textAlign: 'center',
+        marginBottom: 8,
+    },
+    subtitle: {
+        ...typography.styles.bodyMedium,
+        color: colors.textLight,
+        textAlign: 'center',
+        lineHeight: 20,
+        marginBottom: 24,
+    },
+    actionButton: {
+        backgroundColor: colors.primary,
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        borderRadius: 25,
+        minWidth: 120,
+        alignItems: 'center',
+    },
+    actionText: {
+        ...typography.styles.bodyMedium,
+        color: colors.background,
+        fontWeight: typography.fontWeight.semiBold,
+    },
+});
+
+export default EmptyState;

package/src/components/ErrorDisplay.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { useColors, useTypography } from '../theme/ThemeContext';
+
+export interface ErrorDisplayProps {
+    title?: string;
+    message: string;
+    onRetry?: () => void;
+    retryText?: string;
+    showIcon?: boolean;
+    iconName?: string;
+    containerStyle?: object;
+    titleStyle?: object;
+    messageStyle?: object;
+    retryButtonStyle?: object;
+    retryTextStyle?: object;
+    variant?: 'error' | 'warning' | 'info';
+}
+
+const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
+    title = 'Something went wrong',
+    message,
+    onRetry,
+    retryText = 'Try Again',
+    showIcon = true,
+    iconName,
+    containerStyle,
+    titleStyle,
+    messageStyle,
+    retryButtonStyle,
+    retryTextStyle,
+    variant = 'error',
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const styles = createStyles(colors, typography, variant);
+
+    const getIconName = () => {
+        if (iconName) return iconName;
+        switch (variant) {
+            case 'error':
+                return 'alert-circle';
+            case 'warning':
+                return 'warning';
+            case 'info':
+                return 'information-circle';
+            default:
+                return 'alert-circle';
+        }
+    };
+
+    const getIconColor = () => {
+        switch (variant) {
+            case 'error':
+                return colors.error;
+            case 'warning':
+                return colors.warning;
+            case 'info':
+                return colors.info;
+            default:
+                return colors.error;
+        }
+    };
+
+    return (
+        <View style={[styles.container, containerStyle]}>
+            {/* Icon */}
+            {showIcon && (
+                <Icon
+                    name={getIconName()}
+                    size={48}
+                    color={getIconColor()}
+                    style={styles.icon}
+                />
+            )}
+
+            {/* Title */}
+            <Text style={[styles.title, titleStyle]}>{title}</Text>
+
+            {/* Message */}
+            <Text style={[styles.message, messageStyle]}>{message}</Text>
+
+            {/* Retry Button */}
+            {onRetry && (
+                <TouchableOpacity
+                    style={[styles.retryButton, retryButtonStyle]}
+                    onPress={onRetry}
+                >
+                    <Text style={[styles.retryText, retryTextStyle]}>{retryText}</Text>
+                </TouchableOpacity>
+            )}
+        </View>
+    );
+};
+
+const createStyles = (colors: any, typography: any, variant: string) => StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+        minHeight: 200,
+    },
+    icon: {
+        marginBottom: 16,
+    },
+    title: {
+        ...typography.styles.h3,
+        color: colors.text,
+        textAlign: 'center',
+        marginBottom: 8,
+    },
+    message: {
+        ...typography.styles.bodyMedium,
+        color: colors.textLight,
+        textAlign: 'center',
+        lineHeight: 20,
+        marginBottom: 24,
+    },
+    retryButton: {
+        backgroundColor: colors.primary,
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        borderRadius: 25,
+        minWidth: 120,
+        alignItems: 'center',
+    },
+    retryText: {
+        ...typography.styles.bodyMedium,
+        color: colors.background,
+        fontWeight: typography.fontWeight.semiBold,
+    },
+});
+
+export default ErrorDisplay;

package/src/components/FAQItem.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { base64Images } from '../constants/strings/base64Images';
+import { useColors, useTypography } from '../theme/ThemeContext';
+import { getBorderColor } from '../theme';
+
+interface FAQItemProps {
+    question: string;
+    answer: string;
+    isExpanded: boolean;
+    onToggle: () => void;
+}
+
+const FAQItem: React.FC<FAQItemProps> = ({
+    question,
+    answer,
+    isExpanded,
+    onToggle,
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const styles = createStyles(colors, typography);
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.headerRow}>
+                <View style={{ flex: 1 }}>
+                    <Text style={styles.question}>{question}</Text>
+                </View>
+                <TouchableOpacity
+                    style={styles.toggleButton}
+                    onPress={onToggle}
+                    hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+                >
+                    <View style={styles.toggleCircle}>
+                        <Image
+                            source={{ uri: isExpanded ? base64Images.minus : base64Images.plus }}
+                            style={{ width: 16, height: 16, tintColor: colors.success }}
+                            resizeMode="contain"
+                        />
+                    </View>
+                </TouchableOpacity>
+            </View>
+            {isExpanded && <Text style={styles.answer}>{answer}</Text>}
+        </View>
+    );
+};
+
+const createStyles = (colors: any, typography: any) => StyleSheet.create({
+    container: {
+        borderBottomWidth: 1,
+        borderBottomColor: getBorderColor({ colors } as any, 0.2),
+        paddingVertical: 16,
+    },
+    headerRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    question: {
+        ...typography.styles.bodyMedium,
+        flex: 1,
+        marginRight: 8,
+        color: colors.text,
+        lineHeight: 20,
+    },
+    answer: {
+        ...typography.styles.bodySmall,
+        color: colors.textLight,
+        marginTop: 8,
+        lineHeight: 20,
+    },
+    toggleButton: {
+        marginLeft: 12,
+        alignSelf: 'center',
+    },
+    toggleCircle: {
+        width: 20,
+        height: 20,
+        //   borderRadius: 14,
+        //   backgroundColor: colors.background,
+        // borderWidth: 1.5,
+        borderColor: colors.success,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+
+export default FAQItem;

package/src/components/FDCard.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import {
+    View,
+    Text,
+    StyleSheet,
+    TouchableOpacity,
+    Platform,
+} from 'react-native';
+import { useColors, useTypography, useSpacing, useShadows, useTheme } from '../theme/ThemeContext';
+import { getBorderColor } from '../theme';
+import type { ColorScheme, ThemeName } from '../theme';
+
+interface FDCardProps {
+    id: string;
+    name: string;
+    accountNumber: string;
+    roi: string;
+    tenure: string;
+    amount: number;
+    maturityDate: string;
+    status: 'active' | 'matured' | 'pending';
+    creditRating: string;
+    onPress?: (id: string) => void;
+    customStyles?: {
+        container?: object;
+        name?: object;
+        amount?: object;
+        statusBadge?: object;
+    };
+}
+
+const FDCard: React.FC<FDCardProps> = ({
+    id,
+    name,
+    accountNumber,
+    roi,
+    tenure,
+    amount,
+    maturityDate,
+    status,
+    creditRating,
+    onPress,
+    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 getStatusColor = (status: string) => {
+        switch (status) {
+            case 'active':
+                return colors.success;
+            case 'matured':
+                return colors.tabSelected;
+            case 'pending':
+                return colors.warning;
+            default:
+                return colors.textSecondary;
+        }
+    };
+
+    const formatCurrency = (amount: number) => {
+        return amount.toLocaleString('en-IN');
+    };
+
+    return (
+        <TouchableOpacity
+            style={[styles.fdCard, customStyles.container]}
+            onPress={() => onPress?.(id)}
+            activeOpacity={0.8}
+        >
+            <View style={styles.fdCardHeader}>
+                <Text style={[styles.fdName, customStyles.name]}>{name}</Text>
+            </View>
+
+            <View style={styles.fdDetailsRow}>
+                <View style={styles.fdDetailItem}>
+                    <Text style={styles.fdDetailLabel}>ROI</Text>
+                    <Text style={[styles.fdDetailValue, styles.roiText]}>{roi}</Text>
+                </View>
+                <View style={styles.fdDetailItem}>
+                    <Text style={[styles.fdDetailLabel, { textAlign: 'right' }]}>Tenure</Text>
+                    <Text style={[styles.fdDetailValue, { textAlign: 'right' }]}>{tenure}</Text>
+                </View>
+            </View>
+
+            <View style={styles.fdDetailsRowLast}>
+                <View style={styles.fdDetailItem}>
+                    <Text style={styles.fdDetailLabel}>Credit Rating</Text>
+                    <Text style={styles.fdDetailValue}>{creditRating}</Text>
+                </View>
+                <View style={[styles.fdDetailItem]}>
+                    <Text style={[styles.fdDetailLabel, { textAlign: 'right' }]}>Min. Deposit</Text>
+                    <Text style={[styles.fdDetailValue, { textAlign: 'right' }]}>₹ 5000</Text>
+                </View>
+            </View>
+        </TouchableOpacity>
+    );
+};
+
+const createStyles = (colors: ColorScheme, typography: any, spacing: any, shadows: any, themeName: ThemeName) => StyleSheet.create({
+    fdCard: {
+        backgroundColor: colors.surface,
+        borderRadius: 4,
+        paddingVertical: Platform.OS === 'ios' ? spacing.md + 2 : spacing.md,
+        paddingHorizontal: spacing.md,
+        marginBottom: spacing.lg,
+        borderWidth: themeName === 'dark' ? 1 : 0.5,
+        borderColor: themeName === 'dark' ? colors.border : getBorderColor({ colors } as any, 0.36),
+        shadowColor: '#000000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 3,
+    },
+    fdCardHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: spacing.sm,
+    },
+    fdName: {
+        ...typography.styles.text14Medium,
+        color: colors.text,
+        flex: 1,
+        lineHeight: (typography.styles.text14Medium.lineHeight ?? typography.styles.text14Medium.fontSize ?? 14) + 2,
+    },
+    fdDetailsRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginBottom: spacing.sm,
+    },
+    fdDetailsRowLast: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    fdDetailItem: {
+        flex: 1,
+    },
+    fdDetailLabel: {
+        ...typography.styles.text11Regular,
+        color: colors.textSecondary,
+        marginBottom: spacing.xs,
+        lineHeight: (typography.styles.text12Medium.lineHeight ?? typography.styles.text12Medium.fontSize ?? 12) + 3,
+
+    },
+    fdDetailValue: {
+        ...typography.styles.text14Medium,
+        color: colors.text,
+        lineHeight: (typography.styles.text12Medium.lineHeight ?? typography.styles.text12Medium.fontSize ?? 12) + 3,
+
+    },
+    roiText: {
+        color: colors.success,
+    },
+});
+
+export default FDCard;

package/src/components/FormDropdown.tsx

@@ -0,0 +1,214 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { useColors, useTypography, useTheme } from '../theme/ThemeContext';
+
+export interface FormDropdownProps {
+    label: string;
+    value: string;
+    options: string[];
+    onSelect: (value: string) => void;
+    placeholder?: string;
+    editable?: boolean;
+    required?: boolean;
+    error?: string;
+    containerStyle?: object;
+    dropdownStyle?: object;
+    labelStyle?: object;
+    optionStyle?: object;
+    testID?: string;
+}
+
+const FormDropdown: React.FC<FormDropdownProps> = ({
+    label,
+    value,
+    options,
+    onSelect,
+    placeholder,
+    editable = true,
+    required = false,
+    error,
+    containerStyle,
+    dropdownStyle,
+    labelStyle,
+    optionStyle,
+    testID,
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const { themeName } = useTheme();
+    const styles = createStyles(colors, typography, themeName);
+
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleToggle = () => {
+        if (editable) {
+            setIsOpen(prev => !prev);
+        }
+    };
+
+    const handleSelect = (option: string) => {
+        onSelect(option);
+        setIsOpen(false);
+    };
+
+    const getDisplayValue = () => {
+        if (value) return value;
+        return placeholder || `Select ${label}`;
+    };
+
+    return (
+        <View style={[styles.container, containerStyle]}>
+            {/* Label */}
+            <Text style={[styles.label, labelStyle]}>
+                {label}
+                {required && <Text style={styles.requiredIndicator}> *</Text>}
+            </Text>
+
+            {/* Dropdown */}
+            <TouchableOpacity
+                style={[
+                    styles.dropdown,
+                    !editable && styles.disabledDropdown,
+                    error ? styles.errorDropdown : null, // fix
+                    dropdownStyle,
+                ]}
+                onPress={handleToggle}
+                disabled={!editable}
+                testID={testID}
+            >
+                <Text
+                    style={[
+                        styles.dropdownText,
+                        !value && styles.placeholderText,
+                        !editable && styles.disabledText,
+                    ]}
+                >
+                    {getDisplayValue()}
+                </Text>
+                <Text style={[styles.arrow, !editable && styles.disabledText]}>
+                    {isOpen ? '▲' : '▼'}
+                </Text>
+            </TouchableOpacity>
+
+            {/* Error Message */}
+            {error && <Text style={styles.errorText}>{error}</Text>}
+
+            {/* Options List */}
+            {isOpen && editable && (
+                <View style={styles.optionsContainer}>
+                    {options.map((option, index) => (
+                        <TouchableOpacity
+                            key={index}
+                            style={[
+                                styles.option,
+                                option === value && styles.selectedOption,
+                                optionStyle,
+                            ]}
+                            onPress={() => handleSelect(option)}
+                        >
+                            <Text
+                                style={[
+                                    styles.optionText,
+                                    option === value && styles.selectedOptionText,
+                                ]}
+                            >
+                                {option}
+                            </Text>
+                        </TouchableOpacity>
+                    ))}
+                </View>
+            )}
+        </View>
+    );
+};
+
+const createStyles = (colors: any, typography: any, themeName: string) => StyleSheet.create({
+    container: {
+        marginBottom: 20,
+    },
+    label: {
+        ...typography.styles.bodySmall,
+        color: colors.textLight,
+        marginBottom: 8,
+    },
+    requiredIndicator: {
+        color: colors.error,
+    },
+    dropdown: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: colors.surface,
+        borderRadius: 25,
+        paddingHorizontal: 16,
+        paddingVertical: 15,
+        borderWidth: 1,
+        borderColor: colors.border,
+        minHeight: 50,
+    },
+    disabledDropdown: {
+        backgroundColor: '#f5f5f5',
+        borderColor: colors.border,
+    },
+    errorDropdown: {
+        borderColor: colors.error,
+    },
+    dropdownText: {
+        ...typography.styles.bodyMedium,
+        color: colors.text,
+        flex: 1,
+    },
+    placeholderText: {
+        color: themeName === 'dark' ? colors.placeholderColor : colors.textLight,
+    },
+    disabledText: {
+        color: colors.textLight,
+    },
+    arrow: {
+        ...typography.styles.bodySmall,
+        color: colors.textLight,
+        marginLeft: 8,
+    },
+    errorText: {
+        ...typography.styles.bodySmall,
+        color: colors.error,
+        marginTop: 4,
+    },
+    optionsContainer: {
+        position: 'absolute',
+        top: '100%',
+        left: 0,
+        right: 0,
+        backgroundColor: colors.surface,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: colors.border,
+        marginTop: 4,
+        maxHeight: 200,
+        zIndex: 1000,
+        elevation: 5,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+    },
+    option: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderBottomWidth: 1,
+        borderBottomColor: colors.border + '20',
+    },
+    selectedOption: {
+        backgroundColor: colors.primary + '10',
+    },
+    optionText: {
+        ...typography.styles.bodyMedium,
+        color: colors.text,
+    },
+    selectedOptionText: {
+        color: colors.primary,
+        fontWeight: typography.fontWeight.semiBold,
+    },
+});
+
+export default FormDropdown;