@finspringinnovations/fdsdk 0.0.1

package/src/components/README.md

@@ -0,0 +1,210 @@
+# Reusable Components Library
+
+This document provides an overview of the reusable components available in the Shriram SDK, following coding standards and best practices.
+
+## Form Components
+
+### FormDropdown
+A reusable dropdown component for form inputs with consistent styling and behavior.
+
+**Features:**
+- Consistent styling with theme integration
+- Support for required fields and validation
+- Disabled state support
+- Customizable styling options
+- Accessibility support with testID
+
+**Usage:**
+```tsx
+<FormDropdown
+    label="Account Type"
+    value={selectedValue}
+    options={['Saving', 'Current', 'Fixed Deposit']}
+    onSelect={handleSelect}
+    placeholder="Select account type"
+    required={true}
+    error={validationError}
+/>
+```
+
+### FormSection
+A container component for organizing form fields into logical sections.
+
+**Features:**
+- Optional title and subtitle
+- Consistent spacing and layout
+- Optional divider support
+- Customizable styling
+
+**Usage:**
+```tsx
+<FormSection
+    title="Personal Information"
+    subtitle="Please provide your personal details"
+    showDivider={true}
+>
+    <TextFieldWithLabel label="Name" value={name} onChangeText={setName} />
+    <TextFieldWithLabel label="Email" value={email} onChangeText={setEmail} />
+</FormSection>
+```
+
+## Status and Display Components
+
+### StatusDisplay
+A reusable component for displaying status information with icons and messages.
+
+**Features:**
+- Support for success, error, warning, and info states
+- Customizable icons and colors
+- Consistent styling across the app
+- Optional subtitle support
+
+**Usage:**
+```tsx
+<StatusDisplay
+    status="success"
+    title="Payment Successful"
+    subtitle="Your transaction has been completed"
+    showIcon={true}
+/>
+```
+
+### LoadingIndicator
+A reusable loading indicator with optional message and overlay support.
+
+**Features:**
+- Small and large size options
+- Customizable colors
+- Optional overlay mode
+- Customizable messages
+
+**Usage:**
+```tsx
+<LoadingIndicator
+    message="Loading your data..."
+    size="large"
+    overlay={true}
+/>
+```
+
+### ErrorDisplay
+A reusable error display component with retry functionality.
+
+**Features:**
+- Support for error, warning, and info variants
+- Optional retry button
+- Customizable icons and messages
+- Consistent error styling
+
+**Usage:**
+```tsx
+<ErrorDisplay
+    title="Connection Error"
+    message="Unable to connect to the server"
+    onRetry={handleRetry}
+    retryText="Try Again"
+    variant="error"
+/>
+```
+
+### EmptyState
+A reusable component for displaying empty states with optional actions.
+
+**Features:**
+- Customizable icons and messages
+- Optional action button
+- Consistent empty state styling
+- Flexible content layout
+
+**Usage:**
+```tsx
+<EmptyState
+    iconName="document-outline"
+    title="No Data Available"
+    subtitle="There are no items to display at the moment"
+    actionText="Add New Item"
+    onAction={handleAddNew}
+/>
+```
+
+## Payment Components
+
+### PaymentDetailsCard
+A reusable card component for displaying payment and FD details.
+
+**Features:**
+- Consistent payment information layout
+- Optional company line separator
+- Customizable styling
+- Theme integration
+
+**Usage:**
+```tsx
+<PaymentDetailsCard
+    companyName="Shriram Finance Ltd"
+    amount={25000}
+    fdRate="8.35% p.a."
+    tenure="3 Y 9 M"
+    interestPayout="Yearly"
+    showCompanyLine={true}
+/>
+```
+
+## Design Principles
+
+### 1. Consistency
+All components follow the same design patterns and use the theme system for consistent styling.
+
+### 2. Accessibility
+Components include proper accessibility support with testID props and semantic markup.
+
+### 3. Flexibility
+Components are designed to be flexible with extensive customization options through props.
+
+### 4. Type Safety
+All components are fully typed with TypeScript interfaces for better development experience.
+
+### 5. Theme Integration
+Components automatically use the current theme colors, typography, and spacing.
+
+## Best Practices
+
+### 1. Component Composition
+Use smaller, focused components to build larger, more complex UIs.
+
+### 2. Props Design
+- Use clear, descriptive prop names
+- Provide sensible defaults
+- Use TypeScript interfaces for type safety
+- Group related props logically
+
+### 3. Styling
+- Use the theme system for all styling
+- Provide customization options through style props
+- Maintain consistent spacing and typography
+
+### 4. State Management
+- Keep components stateless when possible
+- Use controlled components for form inputs
+- Handle loading and error states appropriately
+
+### 5. Performance
+- Use React.memo for expensive components
+- Implement proper key props for lists
+- Avoid unnecessary re-renders
+
+## Usage Guidelines
+
+1. **Import from index**: Always import components from the main index file
+2. **Use theme hooks**: Use `useColors()` and `useTypography()` for consistent styling
+3. **Handle errors**: Always provide error handling and loading states
+4. **Test thoroughly**: Write tests for component behavior and edge cases
+5. **Document props**: Keep component documentation up to date
+
+## Future Enhancements
+
+- Animation support for status transitions
+- More form input components (date picker, file upload, etc.)
+- Advanced layout components (grid, masonry, etc.)
+- Enhanced accessibility features
+- Storybook integration for component documentation

package/src/components/SafeAreaWrapper.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { View, StyleSheet, ViewStyle, StatusBar } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useColors, useTheme } from '../theme/ThemeContext';
+
+interface SafeAreaWrapperProps {
+    children: React.ReactNode;
+    style?: ViewStyle;
+    includeTop?: boolean;
+    includeBottom?: boolean;
+    bottomPadding?: number;
+    statusBarColor?: string;
+    statusBarStyle?: 'default' | 'light-content' | 'dark-content';
+}
+
+const SafeAreaWrapper: React.FC<SafeAreaWrapperProps> = ({
+    children,
+    style,
+    includeTop = true,
+    includeBottom = true,
+    bottomPadding = 20,
+    statusBarColor,
+    statusBarStyle,
+}) => {
+    const insets = useSafeAreaInsets();
+    const colors = useColors();
+    const { themeName } = useTheme();
+
+    // Determine status bar style based on theme if not explicitly provided
+    // Use light-content for dark backgrounds (black or very dark colors)
+    const defaultStatusBarStyle = colors.background === '#000000'
+        ? 'light-content'
+        : 'dark-content';
+
+    const finalStatusBarStyle = statusBarStyle || defaultStatusBarStyle;
+    const finalStatusBarColor = statusBarColor || colors.background;
+
+    const containerStyle = [
+        styles.container,
+        {
+            backgroundColor: colors.background,
+            paddingTop: includeTop ? insets.top : 0,
+            paddingBottom: includeBottom ? insets.bottom + bottomPadding : 0,
+            borderBottomWidth: StyleSheet.hairlineWidth,
+            borderBottomColor: themeName === 'dark' ? '#000000' : '#ffffff',
+        },
+        style,
+    ];
+
+    return (
+        <>
+            <StatusBar
+                backgroundColor={finalStatusBarColor}
+                barStyle={finalStatusBarStyle}
+                translucent={false}
+            />
+            <View style={containerStyle}>{children}</View>
+        </>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});
+
+export default SafeAreaWrapper;

package/src/components/ScreenHeader.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
+import { base64Images } from '../constants/strings/base64Images';
+import { useColors, useTypography } from '../theme/ThemeContext';
+
+export interface ScreenHeaderProps {
+    title: string;
+    onGoBack?: () => void;
+    showBackButton?: boolean;
+    rightComponent?: React.ReactNode;
+    backgroundColor?: string;
+    textColor?: string;
+}
+
+const ScreenHeader: React.FC<ScreenHeaderProps> = ({
+    title,
+    onGoBack,
+    showBackButton = true,
+    rightComponent,
+    backgroundColor,
+    textColor = 'white',
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const styles = createStyles(colors, typography, backgroundColor, textColor);
+
+    return (
+        <View style={styles.header}>
+            {showBackButton ? (
+                <TouchableOpacity onPress={onGoBack} style={styles.backButton}>
+                    <Image
+                        source={{ uri: base64Images.backArrow }}
+                        style={[styles.backIcon, { tintColor: textColor }]}
+                        resizeMode="contain"
+                    />
+                </TouchableOpacity>
+            ) : (
+                <View style={styles.backButton} />
+            )}
+
+            <Text style={styles.headerTitle}>{title}</Text>
+
+            <View style={styles.rightContainer}>
+                {rightComponent || <View style={styles.placeholder} />}
+            </View>
+        </View>
+    );
+};
+
+const createStyles = (colors: any, typography: any, backgroundColor?: string, textColor?: string) => StyleSheet.create({
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingVertical: 16,
+        backgroundColor: backgroundColor || colors.primary,
+    },
+    backButton: {
+        padding: 8,
+        minWidth: 40,
+    },
+    backIcon: {
+        width: 24,
+        height: 24,
+    },
+    headerTitle: {
+        ...typography.styles.h3,
+        color: textColor || 'white',
+        fontWeight: '600',
+        flex: 1,
+        textAlign: 'center',
+    },
+    rightContainer: {
+        minWidth: 40,
+        alignItems: 'flex-end',
+    },
+    placeholder: {
+        width: 40,
+    },
+});
+
+export default ScreenHeader;

package/src/components/StatusDisplay.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { useColors, useTypography } from '../theme/ThemeContext';
+
+export interface StatusDisplayProps {
+    status: 'success' | 'error' | 'warning' | 'info';
+    title: string;
+    subtitle?: string;
+    iconName?: string;
+    iconSize?: number;
+    showIcon?: boolean;
+    containerStyle?: object;
+    titleStyle?: object;
+    subtitleStyle?: object;
+    iconContainerStyle?: object;
+}
+
+const StatusDisplay: React.FC<StatusDisplayProps> = ({
+    status,
+    title,
+    subtitle,
+    iconName,
+    iconSize = 48,
+    showIcon = true,
+    containerStyle,
+    titleStyle,
+    subtitleStyle,
+    iconContainerStyle,
+}) => {
+    const colors = useColors();
+    const typography = useTypography();
+    const styles = createStyles(colors, typography, status);
+
+    const getStatusConfig = () => {
+        switch (status) {
+            case 'success':
+                return {
+                    icon: iconName || 'checkmark',
+                    color: '#4CAF50',
+                    bgColor: 'rgba(76, 175, 80, 0.1)',
+                    innerBgColor: 'rgba(76, 175, 80, 0.2)',
+                };
+            case 'error':
+                return {
+                    icon: iconName || 'alert',
+                    color: '#F44336',
+                    bgColor: 'rgba(244, 67, 54, 0.1)',
+                    innerBgColor: 'rgba(244, 67, 54, 0.2)',
+                };
+            case 'warning':
+                return {
+                    icon: iconName || 'warning',
+                    color: '#FF9800',
+                    bgColor: 'rgba(255, 152, 0, 0.1)',
+                    innerBgColor: 'rgba(255, 152, 0, 0.2)',
+                };
+            case 'info':
+                return {
+                    icon: iconName || 'information',
+                    color: '#2196F3',
+                    bgColor: 'rgba(33, 150, 243, 0.1)',
+                    innerBgColor: 'rgba(33, 150, 243, 0.2)',
+                };
+            default:
+                return {
+                    icon: iconName || 'information',
+                    color: '#2196F3',
+                    bgColor: 'rgba(33, 150, 243, 0.1)',
+                    innerBgColor: 'rgba(33, 150, 243, 0.2)',
+                };
+        }
+    };
+
+    const statusConfig = getStatusConfig();
+
+    return (
+        <View style={[styles.container, containerStyle]}>
+            {/* Icon */}
+            {showIcon && (
+                <View style={[styles.iconContainer, iconContainerStyle]}>
+                    <View style={[styles.iconCircleOuter, { backgroundColor: statusConfig.bgColor }]}>
+                        <View style={[styles.iconCircleInner, { backgroundColor: statusConfig.innerBgColor }]}>
+                            <Icon name={statusConfig.icon} size={iconSize} color={statusConfig.color} />
+                        </View>
+                    </View>
+                </View>
+            )}
+
+            {/* Title */}
+            <Text style={[styles.title, titleStyle]}>{title}</Text>
+
+            {/* Subtitle */}
+            {subtitle && (
+                <Text style={[styles.subtitle, subtitleStyle]}>{subtitle}</Text>
+            )}
+        </View>
+    );
+};
+
+const createStyles = (colors: any, typography: any, status: string) => StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        paddingVertical: 20,
+    },
+    iconContainer: {
+        alignItems: 'center',
+        marginBottom: 24,
+    },
+    iconCircleOuter: {
+        width: 120,
+        height: 120,
+        borderRadius: 60,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    iconCircleInner: {
+        width: 60,
+        height: 60,
+        borderRadius: 30,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    title: {
+        ...typography.styles.h1,
+        color: colors.text,
+        textAlign: 'center',
+        marginBottom: 8,
+        letterSpacing: 0.5,
+    },
+    subtitle: {
+        ...typography.styles.bodyMedium,
+        color: colors.textLight,
+        textAlign: 'center',
+        lineHeight: 20,
+    },
+});
+
+export default StatusDisplay;