oneticket-sdk-vi 1.0.0

package/src/components/common/Badge/Badge.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+
+type BadgeVariant = 'primary' | 'success' | 'warning' | 'error' | 'info';
+
+interface BadgeProps {
+    text: string;
+    variant?: BadgeVariant;
+    size?: 'sm' | 'md' | 'lg';
+    outline?: boolean;
+}
+
+const Badge: React.FC<BadgeProps> = ({
+    text,
+    variant = 'primary',
+    size = 'md',
+    outline = false,
+}) => {
+    const { theme } = useTheme();
+
+    const variantColors = {
+        primary: theme.colors.primary,
+        success: theme.colors.success,
+        warning: theme.colors.warning,
+        error: theme.colors.error,
+        info: theme.colors.info,
+    };
+
+    const sizeStyles = {
+        sm: {
+            fontSize: ms(10),
+        },
+        md: {
+            fontSize: ms(12),
+        },
+        lg: {
+            fontSize: ms(14),
+        },
+    };
+
+    const styles = StyleSheet.create({
+        container: {
+            borderRadius: ms(4),
+            backgroundColor: outline ? 'transparent' : variantColors[variant][100],
+            borderWidth: outline ? 1 : 0,
+            borderColor: variantColors[variant][500],
+            alignSelf: 'flex-start',
+            paddingHorizontal: ms(theme.spacing.s),
+            paddingVertical: mvs(theme.spacing.xs),
+        },
+        text: {
+            color: variantColors[variant][700],
+            fontWeight: '700',
+        },
+    });
+
+    return (
+        <View style={[styles.container]}>
+            <Text style={[styles.text, { fontSize: sizeStyles[size].fontSize }]}>
+                {text}
+            </Text>
+        </View>
+    );
+};
+
+export default React.memo(Badge);

package/src/components/common/Button/Button.tsx

@@ -0,0 +1,149 @@
+// components/Button.tsx
+import React from 'react';
+import { Pressable, Text, ActivityIndicator, View, ViewStyle, TextStyle } from 'react-native';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { resolveThemeColor } from '../../../theme/utils';
+import { ms, mvs } from 'react-native-size-matters';
+
+type ButtonVariant = 'primary' | 'secondary' | 'text' | 'outlined' | 'link';
+type ButtonSize = 'sm' | 'md' | 'lg';
+
+interface ButtonProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    children: React.ReactNode;
+    onPress?: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    loadingText?: string;
+    icon?: React.ReactNode;
+    iconPosition?: 'left' | 'right';
+    style?: ViewStyle;
+    textStyle?: TextStyle;
+    pressedStyle?: ViewStyle;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+    variant = 'primary',
+    size = 'md',
+    children,
+    onPress,
+    disabled = false,
+    loading = false,
+    loadingText,
+    icon,
+    iconPosition = 'left',
+    style,
+    textStyle,
+    pressedStyle
+}) => {
+    const { theme } = useTheme();
+    const buttonConfig = theme.components.button;
+
+    const variantConfig = buttonConfig.variants[variant];
+
+    // Resolve all color values
+    const resolvedViewStyle = {
+        ...variantConfig.viewStyle,
+        backgroundColor: resolveThemeColor(theme, variantConfig.viewStyle.backgroundColor),
+        borderColor: resolveThemeColor(theme, variantConfig.viewStyle.borderColor),
+    } as ViewStyle;
+
+    const resolvedTextStyle = {
+        ...variantConfig.textStyle,
+        color: resolveThemeColor(theme, variantConfig.textStyle.color),
+    } as TextStyle;
+
+    // Base button styles
+    const baseStyles: ViewStyle = {
+        borderRadius: ms(theme.roundness),
+        minHeight: mvs(buttonConfig.minHeight),
+        paddingHorizontal: ms(buttonConfig.paddingHorizontal),
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'row',
+        opacity: disabled ? buttonConfig.disabled.opacity : 1,
+        ...variantConfig.viewStyle,
+    };
+
+    // Size variations
+    const sizeStyles: ViewStyle = {};
+    if (size === 'sm') {
+        sizeStyles.minHeight = mvs(40);
+        sizeStyles.paddingHorizontal = ms(theme.spacing.s);
+    } else if (size === 'lg') {
+        sizeStyles.minHeight = mvs(50);
+        sizeStyles.paddingHorizontal = ms(theme.spacing.xl);
+    }
+
+    // Combined styles
+    const buttonStyles: ViewStyle = {
+        ...baseStyles,
+        ...resolvedViewStyle,
+        ...sizeStyles,
+        ...style,
+    };
+
+    // Text styles
+    const combinedTextStyles: TextStyle = {
+        ...resolvedTextStyle,
+        ...textStyle,
+    };
+
+    // Icon color
+    const iconColor = resolvedTextStyle.color;
+
+    // Determine what to render based on loading state
+    const renderContent = () => {
+        if (loading) {
+            return (
+                <>
+                    <ActivityIndicator
+                        size="small"
+                        color={iconColor}
+                        style={{ marginRight: loadingText ? ms(buttonConfig.loading.marginRight) : 0 }}
+                    />
+                    {loadingText && <Text style={combinedTextStyles}>{loadingText}</Text>}
+                </>
+            );
+        }
+
+        return (
+            <>
+                {iconPosition === 'left' && icon && (
+                    <View style={{ marginRight: ms(buttonConfig.icon.marginRight) }}>
+                        {React.cloneElement(icon as React.ReactElement, {
+                            color: iconColor,
+                            size: theme.icons[buttonConfig.icon.size],
+                        })}
+                    </View>
+                )}
+
+                <Text style={combinedTextStyles}>{children}</Text>
+
+                {iconPosition === 'right' && icon && (
+                    <View style={{ marginLeft: ms(buttonConfig.icon.marginRight) }}>
+                        {React.cloneElement(icon as React.ReactElement, {
+                            color: iconColor,
+                            size: theme.icons[buttonConfig.icon.size],
+                        })}
+                    </View>
+                )}
+            </>
+        );
+    };
+
+    return (
+        <Pressable
+            onPress={onPress}
+            disabled={disabled || loading}
+            style={({ pressed }) => [
+                buttonStyles,
+                pressed && { opacity: 0.8, backgroundColor: theme.colors.primary[100] },  // your default pressed style
+                pressed && pressedStyle,
+            ]}
+        >
+            {renderContent()}
+        </Pressable>
+    );
+};

package/src/components/common/Cards/IssueCard.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+import Badge from '../Badge/Badge';
+import { CustomText } from '../Text/CustomText';
+
+interface IssueCardProps {
+    startStation: string;
+    destinationStation: string;
+    date?: string;
+    status: string;
+    issueCount: number;
+    onPress: () => void;
+}
+
+const IssueCard = React.memo(({
+    startStation,
+    destinationStation,
+    date,
+    status,
+    issueCount,
+    onPress
+}: IssueCardProps) => {
+    const { theme } = useTheme();
+
+    const getStatusVariant = () => {
+        switch (status) {
+            case 'CLOSED': return 'success';
+            case 'OPEN': return 'warning';
+            default: return 'primary';
+        }
+    };
+
+    const styles = StyleSheet.create({
+        cardContainer: {
+            borderWidth: 1,
+            backgroundColor: theme.colors.background,
+            borderColor: theme.colors.borderLight,
+            borderRadius: ms(8),
+            padding: ms(12),
+            marginBottom: mvs(theme.spacing.s),
+        },
+        pressedCard: {
+            borderColor: theme.colors.primary[400],
+        },
+        row: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+        },
+        stationText: {
+            fontWeight: 'bold',
+            color: theme.colors.text,
+            marginBottom: mvs(theme.spacing.xs),
+        },
+        issueText: {
+            color: theme.colors.text,
+            marginBottom: mvs(theme.spacing.xs),
+        },
+        dateText: {
+            color: theme.colors.textTertiary,
+        },
+        statusBadge: {
+            paddingHorizontal: ms(theme.spacing.s),
+            paddingVertical: mvs(theme.spacing.xs),
+            borderRadius: ms(12),
+            backgroundColor: getStatusVariant(),
+        },
+        statusText: {
+            fontSize: ms(12),
+            color: theme.colors.white,
+            fontWeight: '500',
+        },
+    });
+
+    return (
+        <Pressable onPress={onPress}>
+            {({ pressed }) => (
+                <View style={[
+                    styles.cardContainer,
+                    pressed && styles.pressedCard
+                ]}>
+                    <View style={styles.row}>
+                        <View >
+                            {startStation && (
+                                <CustomText variant='labelLarge' style={styles.stationText}>
+                                    {startStation} → {destinationStation}
+                                </CustomText>
+                            )}
+                            <CustomText variant='body1' style={styles.issueText}>Issues: {issueCount}</CustomText>
+                            {date && <CustomText variant='body2' style={styles.dateText}>{date}</CustomText>}
+                        </View>
+                        <View >
+                            <Badge
+                                text={status}
+                                variant={getStatusVariant()}
+                                size="sm"
+                            />
+                        </View>
+                    </View>
+                </View>
+            )}
+        </Pressable>
+    );
+});
+
+export default IssueCard;

package/src/components/common/Cards/RecentCard.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { View, StyleSheet, Pressable, Text } from 'react-native';
+import RightArrowIcon from '../../../assets/icons/RightArrowIcon';
+import { formatDateWithTime } from '../../../utils/formatDate';
+import { CustomText } from '../../../components/common/Text/CustomText';
+import { Button } from '../../../components/common/Button/Button';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+
+interface RecentCardProps {
+    item: {
+        startStation: string;
+        destinationStation: string;
+        createdAt: string;
+    };
+    onPress: (item: any) => void;
+}
+
+const RecentCard = React.memo(({ item, onPress }: RecentCardProps) => {
+    const { theme } = useTheme();
+
+    return (
+        <Pressable onPress={() => onPress(item)}>
+            {({ pressed }) => (
+                <View style={[
+                    styles.card,
+                    {
+                        backgroundColor: theme.colors.background,
+                        borderColor: theme.colors.border,
+                        transform: [{ scale: pressed ? 0.98 : 1 }],
+                        elevation: 2
+                    }
+                ]}>
+                    <View style={styles.cardContent}>
+                        <View style={styles.stationInfo}>
+                            <View style={styles.stationRow}>
+                                <CustomText variant="body1" style={styles.stationText}>
+                                    {item.startStation}
+                                </CustomText>
+                                <RightArrowIcon size={ms(18)} color={theme.colors.primary[500]} />
+                                <CustomText variant="body1" style={styles.stationText}>
+                                    {item.destinationStation}
+                                </CustomText>
+                            </View>
+                            <CustomText variant="caption" style={{ color: theme.colors.textTertiary }}>
+                                {formatDateWithTime(item.createdAt)}
+                            </CustomText>
+                        </View>
+                        <Pressable
+                            style={({ pressed }) => [
+                                styles.buyButton,
+                                { borderColor: theme.colors.primary[500] },
+                                pressed && { backgroundColor: theme.colors.primary[50], borderColor: theme.colors.primary[300], }
+                            ]}
+                            onPress={() => onPress(item)}
+                        >
+                            <Text style={{ fontSize: ms(12), color: theme.colors.primary[500] }}>
+                                {'Buy Again'}
+                            </Text>
+                        </Pressable>
+                    </View>
+                </View>
+            )}
+        </Pressable>
+    );
+});
+
+const styles = StyleSheet.create({
+    card: {
+        padding: ms(12),
+        marginHorizontal: ms(4),
+        marginBottom: mvs(12),
+        borderRadius: ms(8),
+        borderWidth: 1,
+    },
+    cardContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    stationInfo: {
+        flex: 1,
+        gap: mvs(8),
+    },
+    stationRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        gap: ms(4),
+    },
+    stationText: {
+        fontWeight: '600'
+    },
+    buyButton: {
+        borderWidth: 1,
+        borderRadius: ms(20),
+        paddingHorizontal: ms(12),
+        paddingVertical: mvs(6),
+    },
+});
+
+export default RecentCard;

package/src/components/common/Cards/TransactionCard.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Pressable } from 'react-native';
+import { CustomText } from '../Text/CustomText';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+
+interface TransactionCardProps {
+    title: string;
+    startStation: string;
+    destinationStation: string;
+    amount: number;
+    date: string;
+    status: string;
+    onPress: () => void;
+}
+
+const TransactionCard = React.memo(({
+    title,
+    startStation,
+    destinationStation,
+    amount,
+    date,
+    status,
+    onPress
+}: TransactionCardProps) => {
+    const { theme } = useTheme();
+
+    const getStatusColor = () => {
+        switch (status) {
+            case 'Successful': return theme.colors.success[500];
+            case 'Cancelled': return theme.colors.error[500];
+            default: return theme.colors.warning[500];
+        }
+    };
+
+    const styles = StyleSheet.create({
+        cardContainer: {
+            borderWidth: 1,
+            backgroundColor: theme.colors.background,
+            borderColor: theme.colors.gray[300],
+            borderRadius: ms(8),
+            padding: ms(12),
+            marginBottom: mvs(8),
+        },
+        pressedCard: {
+            borderColor: theme.colors.primary[400],
+        },
+        contentRow: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+        },
+        leftColumn: {
+            flex: 3.5,
+        },
+        rightColumn: {
+            flex: 1,
+            alignItems: 'flex-end',
+            paddingRight: ms(8),
+        },
+        titleText: {
+            fontSize: ms(14),
+            fontWeight: 'bold',
+            marginBottom: mvs(4),
+        },
+        stationText: {
+            fontSize: ms(14),
+            marginBottom: mvs(4),
+        },
+        statusText: {
+            fontSize: ms(12),
+            fontWeight: 600,
+            color: getStatusColor(),
+            marginBottom: mvs(4),
+        },
+        dateText: {
+            fontSize: ms(12),
+            color: theme.colors.textTertiary,
+        },
+        amountText: {
+            fontSize: ms(16),
+            fontWeight: '800',
+            color: theme.colors.primary[500],
+        },
+    });
+
+    return (
+        <Pressable onPress={onPress}>
+            {({ pressed }) => (
+                <View style={[
+                    styles.cardContainer,
+                    pressed && styles.pressedCard
+                ]}>
+                    <View style={styles.contentRow}>
+                        <View style={styles.leftColumn}>
+                            <CustomText variant="body1" style={styles.titleText}>
+                                {title}
+                            </CustomText>
+                            <CustomText variant="body1" style={styles.stationText}>
+                                {startStation} → {destinationStation}
+                            </CustomText>
+                            <CustomText variant="body2" style={styles.statusText}>
+                                {status}
+                            </CustomText>
+                            <CustomText variant="body2" style={styles.dateText}>
+                                {date}
+                            </CustomText>
+                        </View>
+                        <View style={styles.rightColumn}>
+                            <CustomText variant="body1" style={styles.amountText}>
+                                ₹{amount}
+                            </CustomText>
+                        </View>
+                    </View>
+                </View>
+            )}
+        </Pressable>
+    );
+});
+
+export default TransactionCard;

package/src/components/common/Cards/TransportationCard.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { View, Image, StyleSheet, Pressable } from 'react-native';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+import { CustomText } from '../Text/CustomText';
+import { SvgUri } from 'react-native-svg';
+
+interface TransportationCardProps {
+    style?: any;
+    label: string;
+    desc?: string;
+    image: string | React.ReactNode;
+    price?: string;
+    onPress: () => void;
+    imageSize?: number;
+    disabled?: boolean;
+}
+
+const TransportationCard: React.FC<TransportationCardProps> = ({
+    style,
+    label,
+    desc,
+    price,
+    image,
+    onPress,
+    disabled,
+    imageSize = 100
+}) => {
+    const { theme } = useTheme();
+    const isURL = typeof image === 'string';
+
+    return (
+        <Pressable
+            onPress={onPress}
+            disabled={disabled}
+            style={({ pressed }) => [
+                styles.container,
+                {
+                    backgroundColor: theme.colors.primaryBackdrop,
+                    shadowColor: theme.colors.shadow,
+                    borderColor: pressed ? theme.colors.primary[500] : theme.colors.borderLight,
+                },
+                style
+            ]}
+        >
+            <View style={styles.content}>
+                {isURL ? (
+                    image.endsWith('.svg') ? (
+                        <View style={[styles.imageContainer, { width: ms(imageSize), height: ms(imageSize) }]}>
+                            <SvgUri
+                                width="100%"
+                                height="100%"
+                                uri={image}
+                            />
+                        </View>
+                    ) : (
+                        <Image
+                            source={{ uri: image }}
+                            style={[styles.image, { width: ms(imageSize), height: ms(imageSize) }]}
+                            resizeMode="contain"
+                        />
+                    )
+                ) : (
+                    <View style={[styles.imageContainer, { width: ms(imageSize), height: ms(imageSize) }]}>
+                        {image}
+                    </View>
+                )}
+
+                <View style={styles.textContainer}>
+                    <CustomText variant="labelLarge" style={[styles.label, { color: theme.colors.text }]}>
+                        {label}
+                    </CustomText>
+                    {desc && (
+                        <CustomText variant="body2" style={[styles.desc, { color: theme.colors.textSecondary }]}>
+                            {desc}
+                        </CustomText>
+                    )}
+                </View>
+            </View>
+        </Pressable>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: ms(8),
+        borderWidth: 1,
+        paddingHorizontal: ms(20),
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 2,
+    },
+    content: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    imageContainer: {
+        marginVertical: mvs(8),
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    image: {
+        marginVertical: mvs(8),
+    },
+    textContainer: {
+        flex: 1,
+        marginLeft: ms(16),
+    },
+    label: {
+        textAlign: 'left',
+    },
+    desc: {
+        textAlign: 'left',
+        marginTop: mvs(4),
+    },
+});
+
+export default TransportationCard;