create-gufran-expo-app 2.0.0 → 2.0.1

package/template/src/components/common/TeamCard.tsx

@@ -0,0 +1,297 @@
+import React, { useState } from 'react';
+import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
+import { theme } from '../../constants';
+import { moderateScale } from '../../utils/scaling';
+import { Fonts } from '../../constants/Fonts';
+import SVG from '../../assets/icons';
+import Images from '../../assets/images';
+
+interface TeamCardProps {
+  team: {
+    isPrivate?: boolean;
+    id?: string | number;
+    name?: string;
+    teamName?: string;
+    teamImageUrl?: string;
+    profileImage?: string;
+    logo?: string;
+    members?: number;
+    address?: string;
+    location?: string;
+    teamCode?: string;
+    color?: string;
+    description?: string;
+    teamAddress?: string;
+    onJoinPress?: () => void;
+    onChatPress?: () => void;
+    onCancelPress?: () => void;
+    onJoin?: boolean;
+    onChat?: boolean;
+    onCancel?: boolean;
+    teamCodeShow?: boolean;
+    totalMembers?: number;
+    teamProfileImage?: string;
+  };
+  onPress?: () => void;
+  onJoinPress?: () => void;
+  onChatPress?: () => void;
+  onCancelPress?: () => void;
+  onJoin?: boolean;
+  onChat?: boolean;
+  onCancel?: boolean;
+  teamCodeShow?: boolean;
+}
+
+export const TeamCard: React.FC<TeamCardProps> = ({ 
+  team, 
+  onPress, 
+  onJoinPress, 
+  onChatPress,
+  onCancelPress, 
+  onCancel,
+  onJoin, 
+  onChat, 
+  teamCodeShow 
+
+}) => {
+  const [imageError, setImageError] = useState(false);
+    
+  const teamName = team?.teamName || team?.teamName || 'Unnamed Team';
+  const teamImage = team?.teamImageUrl || team?.teamProfileImage || team?.profileImage;
+  const memberCount = team?.members || team?.totalMembers || 0;
+  const address = team?.address || team?.location || '';
+  const teamCode = team?.teamCode || '';
+  const teamAddress = team?.teamAddress || '';
+  const privateTeam = team?.isPrivate || '';
+  
+  return (
+    <TouchableOpacity style={styles.card} onPress={onPress} activeOpacity={0.8}>
+      <View style={styles.logoContainer}>
+        {teamImage && !imageError ? (
+          <Image source={{ uri: teamImage }} style={styles.logo} 
+          onError={() => {
+            setImageError(true);
+          }}
+           />
+        ) : (
+          <View style={[styles.placeholderLogo]}>
+            <Image source={Images.clubDefauldImage} style={styles.logo} />
+          </View>
+        )}
+        {imageError && (
+          <View style={styles.placeholderLogo}>
+            <Image source={Images.clubDefauldImage} style={styles.logo} />
+          </View>
+        )}
+      </View>
+
+      {/* Team Information */}
+      <View style={styles.infoContainer}>
+        {/* Team Name */}
+        <Text style={styles.teamName} numberOfLines={1}>
+          {teamName}
+        </Text>
+
+        {/* Members Count */}
+        <View style={styles.membersRow}>
+          <View style={styles.membersIcon}>
+            <SVG.UsersIcon width={moderateScale(16)} height={moderateScale(16)} />
+          </View>
+          <Text style={styles.membersText}>
+            {memberCount > 0 ? memberCount : 'No'} {memberCount <= 1 ? 'member' : 'members'}
+          </Text>
+        </View>
+
+        {/* Address */}
+        {teamAddress != "" && (
+          <View style={styles.addressRow}>
+            <SVG.locationIcon width={moderateScale(16)} height={moderateScale(16)} />
+            <Text style={styles.addressText} numberOfLines={1}>
+              {teamAddress}
+            </Text>
+          </View>
+        )}
+      </View>
+
+      {/* Action Buttons - Positioned on the right, vertically centered */}
+      {onJoin && (
+        <TouchableOpacity hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          style={styles.actionButtonContainer} 
+          onPress={onJoinPress}
+          activeOpacity={0.8}>
+          <View style={[styles.joinButton, { width: !privateTeam ? moderateScale(50) : moderateScale(60), height: moderateScale(25) }]}>
+            <Text style={styles.joinButtonText}>{!privateTeam ? 'Join' : 'Request'}</Text>
+          </View>
+        </TouchableOpacity>
+      )}
+
+      {onCancel && (
+        <TouchableOpacity hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          style={styles.actionButtonContainer} 
+          onPress={onCancelPress}
+          activeOpacity={0.8}>
+          <View style={[styles.cancelButton, { width: moderateScale(50), height: moderateScale(25) }]}>
+            <Text style={styles.cancelButtonText}>Cancel</Text>
+          </View>
+        </TouchableOpacity>
+      )}
+
+      {teamCodeShow && (
+        <View style={styles.teamCodeContainer}>
+          <Text style={styles.teamCodeText}>{teamCode}</Text>
+        </View>
+      )}
+
+      {/* Chat Icon - Positioned on the right, vertically centered */}
+      {onChat && (
+        <TouchableOpacity hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          style={styles.chatIconContainer} 
+          onPress={onChatPress}
+          activeOpacity={0.8}>
+          <SVG.chatAppleGreenBG style= {{marginRight: moderateScale(8)}} width={moderateScale(35)} height={moderateScale(35)} />
+        </TouchableOpacity>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    flexDirection: 'row',
+    backgroundColor: theme.colors.lightLavenderGray,
+    borderRadius: theme.borderRadius.lg,
+    padding: theme.spacing.sm,
+    marginBottom: theme.spacing.sm,
+    alignItems: 'center',
+  },
+  logoContainer: {
+    width: moderateScale(70),
+    height: moderateScale(70),
+    borderRadius: theme.borderRadius.md,
+    marginRight: theme.spacing.sm,
+    overflow: 'hidden',
+  },
+  logo: {
+    width: '100%',
+    height: '100%',
+    borderRadius: theme.borderRadius.md,
+  },
+  placeholderLogo: {
+    width: '100%',
+    height: '100%',
+    borderWidth: 1,
+    borderColor: theme.colors.imageBorder,
+    backgroundColor: theme.colors.background,
+    borderRadius: theme.borderRadius.md,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  placeholderText: {
+    fontSize: moderateScale(24),
+    fontFamily: Fonts.outfitBold,
+    color: theme.colors.white,
+  },
+  infoContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  teamName: {
+    fontSize: theme.typography.fontSize.md,
+    fontFamily: Fonts.outfitSemiBold,
+    color: theme.colors.text,
+  },
+  membersRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: moderateScale(6),
+  },
+  membersIcon: {
+    marginRight: moderateScale(6),
+  },
+  membersIconText: {
+    fontSize: moderateScale(14),
+  },
+  membersText: {
+    fontSize: theme.typography.fontSize.xs,
+    fontFamily: Fonts.outfitLight,
+    color: theme.colors.primary,
+  },
+  teamCodeText: {
+    fontSize: theme.typography.fontSize.xs,
+    fontFamily: Fonts.outfitLight,
+    color: theme.colors.appleGreen,
+  },
+  teamCodeContainer: {
+    marginLeft: theme.spacing.sm,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  actionButtonContainer: {
+    marginLeft: theme.spacing.sm,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  joinButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: theme.colors.appleGreen,
+    borderRadius: theme.borderRadius.xl,
+    backgroundColor: theme.colors.background,
+  },
+  joinButtonText: {
+    fontFamily: Fonts.outfitSemiBold,
+    fontSize: theme.typography.fontSize.xs,
+    color: theme.colors.appleGreen,
+  },
+  cancelButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: theme.colors.cancelButton,
+    borderRadius: theme.borderRadius.xl,
+    backgroundColor: theme.colors.background,
+  },
+  cancelButtonText: {
+    fontFamily: Fonts.outfitSemiBold,
+    fontSize: theme.typography.fontSize.xs,
+    color: theme.colors.cancelButton,
+  },
+  chatIconContainer: {
+    marginLeft: theme.spacing.sm,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  colorIndicator: {
+    width: moderateScale(12),
+    height: moderateScale(12),
+    borderRadius: moderateScale(6),
+    marginLeft: moderateScale(8),
+  },
+  addressRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  locationIcon: {
+    fontSize: moderateScale(12),
+    marginRight: moderateScale(6),
+  },
+  addressText: {
+    fontSize: theme.typography.fontSize.xs,
+    fontFamily: Fonts.outfitLight,
+    color: theme.colors.text,
+    flex: 1,
+    marginLeft: moderateScale(8),
+  },
+  arrowContainer: {
+    marginLeft: theme.spacing.sm,
+    justifyContent: 'center',
+  },
+  arrowText: {
+    fontSize: moderateScale(20),
+    fontFamily: Fonts.outfitBold,
+    color: theme.colors.textSecondary,
+  },
+});
+
+export default TeamCard;

package/template/src/components/common/TextInput.tsx

@@ -0,0 +1,227 @@
+import React, { useState, forwardRef, useImperativeHandle, useRef } from 'react';
+import {
+  TextInput as RNTextInput,
+  View,
+  Text,
+  StyleSheet,
+  TextInputProps as RNTextInputProps,
+  ViewStyle,
+  TextStyle,
+  TouchableOpacity,
+} from 'react-native';
+import { IconAlt } from './IconAlt';
+import { theme } from '../../constants';
+import { SvgProps } from "react-native-svg";
+import SVG from '../../assets/icons';
+import { moderateScale } from '../../utils/scaling';
+import { Fonts } from '../../constants/Fonts';
+
+interface TextInputProps extends RNTextInputProps {
+  label?: string;
+  error?: string;
+  leftIcon?: React.FC<SvgProps> | string;
+  rightIcon?: string;
+  onRightIconPress?: () => void;
+  style?: ViewStyle;
+  inputStyle?: TextStyle;
+  showPasswordToggle?: boolean;
+  variant?: 'default' | 'filled' | 'outlined';
+  leftIconStyle?: ViewStyle;
+  leftIconSizeWidth?: number;
+  leftIconSizeHeight?: number;
+}
+
+export const TextInput = forwardRef<any, TextInputProps>(({
+  label,
+  error,
+  leftIcon,
+  rightIcon,
+  onRightIconPress,
+  style,
+  inputStyle,
+  showPasswordToggle = false,
+  variant = 'outlined',
+  secureTextEntry,
+  leftIconStyle,
+  leftIconSizeWidth = moderateScale(20),
+  leftIconSizeHeight = moderateScale(20),
+  ...props
+}, ref) => {
+  const [isPasswordVisible, setIsPasswordVisible] = useState(!secureTextEntry);
+  const inputRef = useRef<RNTextInput>(null);
+  // const [isFocused, setIsFocused] = useState(false);
+
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      inputRef.current?.focus();
+    },
+    blur: () => {
+      inputRef.current?.blur();
+    },
+  }));
+
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible(!isPasswordVisible);
+  };
+
+  const containerStyle = [
+    styles.container,
+    styles[variant],
+    // isFocused && styles.focusedContainer,
+    error && styles.errorContainer, 
+    style,
+  ];
+
+  const textInputStyle = [
+    styles.input,
+    leftIcon && styles.inputWithLeftIcon,
+    (rightIcon || showPasswordToggle) && styles.inputWithRightIcon,
+    inputStyle,
+  ];
+
+  return (
+    <View style={styles.wrapper}>
+      {label && <Text style={styles.label}>{label}</Text>}
+      
+      <View style={containerStyle}>
+        {leftIcon && (
+          <View style={[styles.leftIconContainer, leftIconStyle]}>
+            {typeof leftIcon === 'string' ? (
+              <IconAlt
+                name={leftIcon as any}
+                color={theme.colors.textSecondary}
+                size={moderateScale(30)}
+              />
+            ) : (
+              React.createElement(leftIcon, {
+                width: leftIconSizeWidth,
+                height: leftIconSizeHeight,
+                color: theme.colors.textSecondary,
+              })
+            )}
+          </View>
+        )}
+        
+        <RNTextInput
+          ref={inputRef}
+          style={textInputStyle}
+          placeholderTextColor={theme.colors.textSecondary}
+          secureTextEntry={showPasswordToggle ? !isPasswordVisible : secureTextEntry}
+          underlineColorAndroid="transparent"
+          {...props}
+        />
+        
+        {(rightIcon || showPasswordToggle) && (
+          <View style={styles.rightIconContainer}>
+            {showPasswordToggle ? (
+              <TouchableOpacity
+                onPress={togglePasswordVisibility}
+                style={styles.eyeButton}
+                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+              >
+                {React.createElement(isPasswordVisible ? SVG.eye : SVG.eyeOff, {
+                  width: leftIconSizeWidth,
+                  height: leftIconSizeHeight,
+                  color: theme.colors.textSecondary,
+                })}
+              </TouchableOpacity>
+            ) : rightIcon ? (
+              <IconAlt
+                name={rightIcon as any}
+                size={20}
+                color={theme.colors.textSecondary}
+              />
+            ) : null}
+          </View>
+        )}
+      </View>
+      
+      {error && <Text style={styles.errorText}>{error}</Text>}
+    </View>
+  );
+});
+
+TextInput.displayName = 'TextInput';
+
+const styles = StyleSheet.create({
+  wrapper: {
+  },
+  label: {
+    fontFamily: Fonts.outfitRegular,
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.text,
+    marginBottom: theme.spacing.xs,
+  },
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: moderateScale(50),
+    borderRadius: moderateScale(30),
+    paddingHorizontal: moderateScale(10),
+  },
+  default: {
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    backgroundColor: theme.colors.background,
+  },
+  filled: {
+    backgroundColor: '#F8F9FA',
+    borderWidth: 0,
+  },
+  outlined: {
+    borderWidth: 1.5,
+    borderColor: '#E5E7EB',
+    backgroundColor: theme.colors.background,
+  },
+  focusedContainer: {
+    borderColor: '#3B82F6',
+    borderWidth: 2,
+    shadowColor: '#3B82F6',
+    shadowOffset: {
+      width: 0,
+      height: 0,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  errorContainer: {
+    borderColor: theme.colors.error,
+    borderWidth: 2,
+  },
+  input: {
+    flex: 1,
+    fontFamily: Fonts.outfitRegular,
+    marginLeft: theme.spacing.sm,
+    paddingVertical: theme.spacing.xs,
+    fontSize: theme.typography.fontSize.md,
+    color: theme.colors.text,
+
+  },
+  inputWithLeftIcon: {
+    paddingLeft: theme.spacing.xs,
+  },
+  inputWithRightIcon: {
+    paddingRight: theme.spacing.xs,
+  },
+  leftIconContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  rightIconContainer: {
+    paddingRight: theme.spacing.md,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  eyeButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  errorText: {
+    fontFamily: Fonts.outfitRegular,
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.error,
+    marginTop: theme.spacing.xs,
+    marginLeft: theme.spacing.xs,
+  },
+});

package/template/src/components/common/ToastConfig.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { View, Text, StyleSheet, Dimensions, StatusBar, Platform } from 'react-native';
+import { moderateScale } from '../../utils/scaling';
+import { Fonts } from '../../constants/Fonts';
+import { theme } from '../../constants';
+
+const { width } = Dimensions.get('window');
+
+// Custom Toast Configuration
+export const toastConfig = {
+  success: ({ text1, text2, ...rest }) => (
+    <View style={[styles.toastContainer, styles.successToast]}>
+      <View style={styles.toastContent}>
+        <View style={styles.textContainer}>
+          <Text style={styles.toastTitle}>{text1}</Text>
+          {text2 && <Text style={styles.toastMessage}>{text2}</Text>}
+        </View>
+      </View>
+    </View>
+  ),
+  error: ({ text1, text2, ...rest }) => (
+    <View style={[styles.toastContainer, styles.errorToast]}>
+      <View style={styles.toastContent}>
+        <View style={styles.textContainer}>
+          <Text style={styles.toastTitle}>{text1}</Text>
+          {text2 && <Text style={styles.toastMessage}>{text2}</Text>}
+        </View>
+      </View>
+    </View>
+  ),
+  info: ({ text1, text2, ...rest }) => (
+    <View style={[styles.toastContainer, styles.infoToast]}>
+      <View style={styles.toastContent}>
+        <View style={styles.textContainer}>
+          <Text style={styles.toastTitle}>{text1}</Text>
+          {text2 && <Text style={styles.toastMessage}>{text2}</Text>}
+        </View>
+      </View>
+    </View>
+  ),
+  warning: ({ text1, text2, ...rest }) => (
+    <View style={[styles.toastContainer, styles.warningToast]}>
+      <View style={styles.toastContent}>
+        <View style={styles.textContainer}>
+          <Text style={styles.toastTitle}>{text1}</Text>
+          {text2 && <Text style={styles.toastMessage}>{text2}</Text>}
+        </View>
+      </View>
+    </View>
+  ),
+};
+
+const styles = StyleSheet.create({
+  toastContainer: {
+    minHeight: moderateScale(40),
+    width: width * 0.9,
+    marginHorizontal: width * 0.05,
+    borderRadius: moderateScale(16),
+    marginTop: Platform.OS === 'ios' ? StatusBar.currentHeight + moderateScale(15) : moderateScale(20),
+  },
+  toastContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: moderateScale(20),
+    paddingVertical: moderateScale(16),
+    flex: 1,
+  },
+  textContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingRight: moderateScale(12),
+  },
+  successToast: {
+    backgroundColor: theme.colors.success,
+    borderColor: '#45A049',
+  },
+  errorToast: {
+    backgroundColor: '#F44336',
+    borderColor: '#D32F2F',
+  },
+  infoToast: {
+    backgroundColor: '#2196F3',
+    borderColor: '#1976D2',
+  },
+  warningToast: {
+    backgroundColor: '#FF9800',
+    borderColor: '#F57C00',
+  },
+  toastTitle: {
+    fontSize: moderateScale(16),
+    fontFamily: Fonts.outfitSemiBold,
+    color: theme.colors.white,
+    marginBottom: moderateScale(2),
+    letterSpacing: 0.2,
+  },
+  toastMessage: {
+    fontSize: moderateScale(14),
+    color: theme.colors.white,
+    lineHeight: moderateScale(18),
+    flexWrap: 'wrap',
+    fontFamily: Fonts.outfitRegular,
+  },
+});

package/template/src/components/common/ToastManager.ts

@@ -0,0 +1,86 @@
+import Toast from 'react-native-toast-message';
+
+export interface ToastConfig {
+  type: 'success' | 'error' | 'info' | 'warning';
+  title: string;
+  message?: string;
+  duration?: number;
+  position?: 'top' | 'bottom';
+}
+
+class ToastManager {
+  /**
+   * Show a success toast message
+   */
+  static success(title: string, message?: string, duration?: number) {
+    Toast.show({
+      type: 'success',
+      text1: title,
+      text2: message,
+      visibilityTime: duration || 3000,
+      position: 'top',
+            
+    });
+  }
+
+  /**
+   * Show an error toast message
+   */
+  static error(title: string, message?: string, duration?: number) {
+    Toast.show({
+      type: 'error',
+      text1: title,
+      text2: message,
+      visibilityTime: duration || 4000,
+      position: 'top',
+    });
+  }
+
+  /**
+   * Show an info toast message
+   */
+  static info(title: string, message?: string, duration?: number) {
+    Toast.show({
+      type: 'info',
+      text1: title,
+      text2: message,
+      visibilityTime: duration || 3000,
+      position: 'top',
+    });
+  }
+
+  /**
+   * Show a warning toast message
+   */
+  static warning(title: string, message?: string, duration?: number) {
+    Toast.show({
+      type: 'warning',
+      text1: title,
+      text2: message,
+      visibilityTime: duration || 3500,
+      position: 'top',
+    });
+  }
+
+  /**
+   * Show a custom toast message
+   */
+  static show(config: ToastConfig) {
+    Toast.show({
+      type: config.type,
+      text1: config.title,
+      text2: config.message,
+      visibilityTime: config.duration || 3000,
+      position: config.position || 'top',
+    });
+  }
+
+  /**
+   * Hide the current toast
+   */
+  static hide() {
+    Toast.hide();
+  }
+}
+
+export default ToastManager;