@finspringinnovations/fdsdk 0.0.1

package/lib/components/PendingFDBottomSheet.js

@@ -0,0 +1,122 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const ActiveFDCard_1 = __importDefault(require("./ActiveFDCard"));
+const ActionButton_1 = __importDefault(require("./ActionButton"));
+const ThemeContext_1 = require("../theme/ThemeContext");
+const base64Images_1 = require("../constants/strings/base64Images");
+const PendingFDBottomSheet = ({ visible, onClose, onContinue, onBookNew, pendingFDData = {
+    name: 'Shriram Finance Ltd',
+    invested: 5000,
+    value: 5038,
+    returns: 7.53,
+    maturityDate: 'Nov 2024',
+}, isBookingNewLoading = false, }) => {
+    const colors = (0, ThemeContext_1.useColors)();
+    const typography = (0, ThemeContext_1.useTypography)();
+    const spacing = (0, ThemeContext_1.useSpacing)();
+    const { themeName } = (0, ThemeContext_1.useTheme)();
+    const styles = createStyles(colors, typography, spacing, themeName);
+    return (react_1.default.createElement(react_native_1.Modal, { visible: visible, transparent: true, animationType: "slide", onRequestClose: onClose },
+        react_1.default.createElement(react_native_1.View, { style: styles.overlay },
+            react_1.default.createElement(react_native_1.View, { style: styles.bottomSheet },
+                react_1.default.createElement(react_native_1.SafeAreaView, { style: styles.safeArea },
+                    react_1.default.createElement(react_native_1.View, { style: styles.header },
+                        react_1.default.createElement(react_native_1.View, { style: styles.headerContent },
+                            react_1.default.createElement(react_native_1.Text, { style: styles.title }, "Please Wait! You also have a pending journey with progress saved:"),
+                            react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.closeButton, onPress: onClose },
+                                react_1.default.createElement(react_native_1.Image, { source: { uri: base64Images_1.base64Images.cross }, style: { width: 14, height: 14 }, resizeMode: "contain" })))),
+                    react_1.default.createElement(react_native_1.View, { style: styles.content },
+                        react_1.default.createElement(react_native_1.Text, { style: styles.sectionTitle }, "Pending FDs"),
+                        react_1.default.createElement(ActiveFDCard_1.default, { name: pendingFDData.name, invested: pendingFDData.invested, value: pendingFDData.value, returns: pendingFDData.returns, maturityDate: pendingFDData.maturityDate }),
+                        react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.bookNewButton, isBookingNewLoading && styles.disabledButton], onPress: onBookNew, disabled: isBookingNewLoading }, isBookingNewLoading ? (react_1.default.createElement(react_native_1.View, { style: styles.loadingContainer },
+                            react_1.default.createElement(react_native_1.ActivityIndicator, { size: "small", color: colors.primary }),
+                            react_1.default.createElement(react_native_1.Text, { style: [styles.bookNewText, { marginLeft: spacing.sm }] }, "Terminating workflow..."))) : (react_1.default.createElement(react_native_1.Text, { style: styles.bookNewText }, "No, I want to book a new FD"))),
+                        themeName === 'dark' ? (react_1.default.createElement(ActionButton_1.default, { title: "Continue", onPress: onContinue, variant: "primary", style: styles.continueButtonWrapper })) : (react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.continueButton, onPress: onContinue },
+                            react_1.default.createElement(react_native_1.Text, { style: styles.continueButtonText }, "Continue")))))))));
+};
+const createStyles = (colors, typography, spacing, themeName) => react_native_1.StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        justifyContent: 'flex-end',
+    },
+    bottomSheet: {
+        padding: spacing.sm,
+        backgroundColor: themeName === 'dark' ? colors.background : 'white',
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        borderWidth: themeName === 'dark' ? 1 : 0,
+        borderColor: themeName === 'dark' ? '#ffffff' : 'transparent',
+        maxHeight: react_native_1.Dimensions.get('window').height * 0.8,
+        minHeight: react_native_1.Platform.OS === 'ios' ? 430 : 400,
+    },
+    safeArea: {
+        flex: 1,
+    },
+    header: {
+        paddingHorizontal: spacing.lg,
+        paddingTop: spacing.md,
+        paddingBottom: spacing.sm,
+    },
+    headerContent: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+    },
+    title: {
+        fontSize: 17,
+        fontWeight: '500',
+        color: themeName === 'dark' ? colors.labelColor : '#333',
+        flex: 1,
+        marginRight: spacing.md,
+        lineHeight: 24,
+    },
+    closeButton: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        backgroundColor: '#f5f5f5',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    content: {
+        flex: 1,
+        paddingHorizontal: spacing.lg,
+        paddingTop: spacing.lg,
+        paddingBottom: react_native_1.Platform.OS === 'ios' ? 20 : 0,
+    },
+    sectionTitle: Object.assign(Object.assign({}, typography.styles.h3), { color: themeName === 'dark' ? colors.labelColor : '#333', marginBottom: spacing.md }),
+    bookNewButton: {
+        marginTop: spacing.xxxl,
+        marginBottom: spacing.xxxl,
+        alignItems: 'center',
+    },
+    bookNewText: Object.assign(Object.assign({}, typography.styles.body2), { color: themeName === 'dark' ? colors.labelColor : '#000000' }),
+    disabledButton: {
+        opacity: 0.6,
+    },
+    loadingContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    continueButtonWrapper: {
+        marginBottom: react_native_1.Platform.OS === 'ios' ? spacing.lg + 20 : spacing.lg,
+    },
+    continueButton: {
+        height: 50,
+        backgroundColor: '#007AFF',
+        borderRadius: 25,
+        paddingHorizontal: spacing.lg,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: react_native_1.Platform.OS === 'ios' ? spacing.lg + 20 : spacing.lg,
+    },
+    continueButtonText: Object.assign(Object.assign({}, typography.styles.button), { color: 'white', fontWeight: '600' }),
+});
+exports.default = PendingFDBottomSheet;

package/lib/components/SafeAreaWrapper.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+interface SafeAreaWrapperProps {
+    children: React.ReactNode;
+    style?: ViewStyle;
+    includeTop?: boolean;
+    includeBottom?: boolean;
+    bottomPadding?: number;
+    statusBarColor?: string;
+    statusBarStyle?: 'default' | 'light-content' | 'dark-content';
+}
+declare const SafeAreaWrapper: React.FC<SafeAreaWrapperProps>;
+export default SafeAreaWrapper;

package/lib/components/SafeAreaWrapper.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const ThemeContext_1 = require("../theme/ThemeContext");
+const SafeAreaWrapper = ({ children, style, includeTop = true, includeBottom = true, bottomPadding = 20, statusBarColor, statusBarStyle, }) => {
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const colors = (0, ThemeContext_1.useColors)();
+    const { themeName } = (0, ThemeContext_1.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: react_native_1.StyleSheet.hairlineWidth,
+            borderBottomColor: themeName === 'dark' ? '#000000' : '#ffffff',
+        },
+        style,
+    ];
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_native_1.StatusBar, { backgroundColor: finalStatusBarColor, barStyle: finalStatusBarStyle, translucent: false }),
+        react_1.default.createElement(react_native_1.View, { style: containerStyle }, children)));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});
+exports.default = SafeAreaWrapper;

package/lib/components/ScreenHeader.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface ScreenHeaderProps {
+    title: string;
+    onGoBack?: () => void;
+    showBackButton?: boolean;
+    rightComponent?: React.ReactNode;
+    backgroundColor?: string;
+    textColor?: string;
+}
+declare const ScreenHeader: React.FC<ScreenHeaderProps>;
+export default ScreenHeader;

package/lib/components/ScreenHeader.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const base64Images_1 = require("../constants/strings/base64Images");
+const ThemeContext_1 = require("../theme/ThemeContext");
+const ScreenHeader = ({ title, onGoBack, showBackButton = true, rightComponent, backgroundColor, textColor = 'white', }) => {
+    const colors = (0, ThemeContext_1.useColors)();
+    const typography = (0, ThemeContext_1.useTypography)();
+    const styles = createStyles(colors, typography, backgroundColor, textColor);
+    return (react_1.default.createElement(react_native_1.View, { style: styles.header },
+        showBackButton ? (react_1.default.createElement(react_native_1.TouchableOpacity, { onPress: onGoBack, style: styles.backButton },
+            react_1.default.createElement(react_native_1.Image, { source: { uri: base64Images_1.base64Images.backArrow }, style: [styles.backIcon, { tintColor: textColor }], resizeMode: "contain" }))) : (react_1.default.createElement(react_native_1.View, { style: styles.backButton })),
+        react_1.default.createElement(react_native_1.Text, { style: styles.headerTitle }, title),
+        react_1.default.createElement(react_native_1.View, { style: styles.rightContainer }, rightComponent || react_1.default.createElement(react_native_1.View, { style: styles.placeholder }))));
+};
+const createStyles = (colors, typography, backgroundColor, textColor) => react_native_1.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: Object.assign(Object.assign({}, typography.styles.h3), { color: textColor || 'white', fontWeight: '600', flex: 1, textAlign: 'center' }),
+    rightContainer: {
+        minWidth: 40,
+        alignItems: 'flex-end',
+    },
+    placeholder: {
+        width: 40,
+    },
+});
+exports.default = ScreenHeader;

package/lib/components/StatusDisplay.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+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;
+}
+declare const StatusDisplay: React.FC<StatusDisplayProps>;
+export default StatusDisplay;

package/lib/components/StatusDisplay.js

@@ -0,0 +1,88 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const Ionicons_1 = __importDefault(require("react-native-vector-icons/Ionicons"));
+const ThemeContext_1 = require("../theme/ThemeContext");
+const StatusDisplay = ({ status, title, subtitle, iconName, iconSize = 48, showIcon = true, containerStyle, titleStyle, subtitleStyle, iconContainerStyle, }) => {
+    const colors = (0, ThemeContext_1.useColors)();
+    const typography = (0, ThemeContext_1.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 (react_1.default.createElement(react_native_1.View, { style: [styles.container, containerStyle] },
+        showIcon && (react_1.default.createElement(react_native_1.View, { style: [styles.iconContainer, iconContainerStyle] },
+            react_1.default.createElement(react_native_1.View, { style: [styles.iconCircleOuter, { backgroundColor: statusConfig.bgColor }] },
+                react_1.default.createElement(react_native_1.View, { style: [styles.iconCircleInner, { backgroundColor: statusConfig.innerBgColor }] },
+                    react_1.default.createElement(Ionicons_1.default, { name: statusConfig.icon, size: iconSize, color: statusConfig.color }))))),
+        react_1.default.createElement(react_native_1.Text, { style: [styles.title, titleStyle] }, title),
+        subtitle && (react_1.default.createElement(react_native_1.Text, { style: [styles.subtitle, subtitleStyle] }, subtitle))));
+};
+const createStyles = (colors, typography, status) => react_native_1.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: Object.assign(Object.assign({}, typography.styles.h1), { color: colors.text, textAlign: 'center', marginBottom: 8, letterSpacing: 0.5 }),
+    subtitle: Object.assign(Object.assign({}, typography.styles.bodyMedium), { color: colors.textLight, textAlign: 'center', lineHeight: 20 }),
+});
+exports.default = StatusDisplay;

package/lib/components/TextFieldWithLabel.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { TextInput } from 'react-native';
+export interface BaseTextFieldProps {
+    label: string;
+    value: string;
+    onChangeText: (text: string) => void;
+    placeholder?: string;
+    placeholderColor?: string;
+    editable?: boolean;
+    error?: string;
+    success?: string;
+    required?: boolean;
+    testID?: string;
+    keepWhiteBackground?: boolean;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    textInputRef?: React.RefObject<TextInput>;
+}
+export interface TextFieldWithLabelProps extends BaseTextFieldProps {
+    variant?: 'text' | 'dropdown' | 'date' | 'numeric' | 'email' | 'phone';
+    maxLength?: number;
+    multiline?: boolean;
+    numberOfLines?: number;
+    secureTextEntry?: boolean;
+    keyboardType?: 'default' | 'numeric' | 'email-address' | 'phone-pad';
+    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+    options?: string[];
+    onDropdownSelect?: (option: string) => void;
+    isDropdownOpen?: boolean;
+    onDropdownToggle?: () => void;
+    onDatePress?: () => void;
+    dateFormat?: string;
+    leftIcon?: string;
+    rightIcon?: string;
+    onRightIconPress?: () => void;
+    containerStyle?: object;
+    inputStyle?: object;
+    labelStyle?: object;
+    validator?: (value: string) => string | null;
+    validateOnBlur?: boolean;
+    validateOnChange?: boolean;
+    returnKeyType?: 'done' | 'go' | 'next' | 'search' | 'send' | 'default';
+    onSubmitEditing?: () => void;
+}
+declare const TextFieldWithLabel: React.FC<TextFieldWithLabelProps>;
+export default TextFieldWithLabel;