create-gufran-expo-app 2.0.0 → 2.0.1

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

@@ -0,0 +1,173 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+  ViewStyle,
+  TextStyle,
+  View,
+} from 'react-native';
+import { theme } from '../../constants';
+import { moderateScale } from '../../utils/scaling';
+
+interface ButtonProps {
+  title: string;
+  onPress: () => void;
+  variant?: 'primary' | 'secondary' | 'outline';
+  size?: 'small' | 'medium' | 'large';
+  disabled?: boolean;
+  loading?: boolean;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+  testID?: string;
+  leftIcon?: React.ReactNode;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  title,
+  onPress,
+  variant = 'primary',
+  size = 'medium',
+  disabled = false,
+  loading = false,
+  style,
+  textStyle,
+  testID,
+  leftIcon,
+}) => {
+  const buttonStyle = [
+    styles.base,
+    styles[variant],
+    styles[size],
+    disabled && styles.disabled,
+    style,
+  ];
+
+  const buttonTextStyle = [
+    styles.text,
+    styles[`${variant}Text`],
+    styles[`${size}Text`],
+    disabled && styles.disabledText,
+    textStyle,
+  ];
+
+  return (
+    <TouchableOpacity
+      style={buttonStyle}
+      onPress={onPress}
+      disabled={disabled || loading}
+      testID={testID}
+      activeOpacity={0.8}
+    >
+      {loading ? (
+        <ActivityIndicator
+          color={variant === 'outline' ? theme.colors.primary : theme.colors.background}
+          size="small"
+        />
+      ) : (
+        <View style={styles.contentContainer}>
+          {leftIcon && <View style={styles.leftIconContainer}>{leftIcon}</View>}
+          <Text style={buttonTextStyle}>{title}</Text>
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  base: {
+    borderRadius: theme.borderRadius.xxl,
+    alignItems: 'center',
+    borderWidth: 1.5,
+    justifyContent: 'center',
+    flexDirection: 'row',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 3,
+  },
+  // Variants
+  primary: {
+    backgroundColor: theme.colors.blue, // Blue-800
+    shadowColor: theme.colors.blue,
+    shadowOpacity: 0.3,
+    borderColor: theme.colors.blue,
+  },
+  secondary: {
+    backgroundColor: '#F9FAFB',
+    borderColor: '#E5E7EB',
+    shadowOpacity: 0.05,
+  },
+  outline: {
+    backgroundColor: 'transparent',
+    borderColor: theme.colors.appleGreen,
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  // Sizes
+  small: {
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: theme.spacing.xs,
+    minHeight: moderateScale(40),
+  },
+  medium: {
+    paddingHorizontal: theme.spacing.lg,
+    paddingVertical: theme.spacing.sm,
+    minHeight: moderateScale(50),
+  },
+  large: {
+    paddingHorizontal: theme.spacing.xl,
+    paddingVertical: theme.spacing.lg,
+    minHeight: moderateScale(60),
+  },
+  // Text styles
+  text: {
+    fontWeight: theme.typography.fontWeight.semibold,
+    textAlign: 'center',
+  },
+  primaryText: {
+    color: theme.colors.white,
+    fontSize: theme.typography.fontSize.md,
+  },
+  secondaryText: {
+    color: theme.colors.text,
+    fontSize: theme.typography.fontSize.md,
+  },
+  outlineText: {
+    color: "red",
+    fontSize: theme.typography.fontSize.md,
+  },
+  smallText: {
+    fontSize: theme.typography.fontSize.sm,
+  },
+  mediumText: {
+    fontSize: theme.typography.fontSize.md,
+  },
+  largeText: {
+    fontSize: theme.typography.fontSize.lg,
+  },
+  // Disabled states
+  disabled: {
+    opacity: 0.5,
+    shadowOpacity: 0,
+    elevation: 0,
+    borderColor: theme.colors.border,
+  },
+  disabledText: {
+    opacity: 0.7,
+  },
+  // Icon container styles
+  contentContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  leftIconContainer: {
+    marginRight: theme.spacing.xs,
+  },
+});

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

@@ -0,0 +1,248 @@
+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 ClubCardProps {
+  club: {
+    id?: string | number;
+    name?: string;
+    clubName?: string;
+    clubImageUrl?: string;
+    profileImage?: string;
+    logo?: string;
+    members?: number;
+    address?: string;
+    location?: string;
+    clubCode?: string;
+    color?: string;
+    description?: string;
+    clubAddress?: string;
+    onJoinPress?: () => void;
+    onChatPress?: () => void;
+    onJoin?: boolean;
+    onChat?: boolean;
+    totalMembers?: number;
+    clubImage?: string;
+  };
+  onPress?: () => void;
+  onJoinPress?: () => void;
+  onChatPress?: () => void;
+  onJoin?: boolean;
+  onChat?: boolean;
+  clubCodeShow?: boolean;
+}
+
+export const ClubCard: React.FC<ClubCardProps> = ({
+  club,
+  onPress,
+  onJoinPress,
+  onChatPress,
+  onJoin,
+  onChat,
+  clubCodeShow
+}) => {
+  const [imageError, setImageError] = useState(false);
+  const clubName = club?.name || club?.clubName || 'Unnamed Club';
+  const clubImage = club?.clubImage || club?.profileImage || club?.logo;
+  const memberCount = club?.members || club?.totalMembers || 0;
+  const address = club?.address || club?.location || '';
+  const clubCode = club?.clubCode || '';
+  const clubAddress = club?.clubAddress || '';
+
+  return (
+    <TouchableOpacity style={styles.card} onPress={onPress} activeOpacity={0.8}>
+      <View style={styles.logoContainer}>
+        {clubImage && !imageError ? (
+          <Image source={{ uri: clubImage }} 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>
+
+      {/* Club Information */}
+      <View style={styles.infoContainer}>
+        {/* Club Name */}
+        <Text style={styles.clubName} numberOfLines={1}>
+          {clubName}
+        </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 style={styles.clubCodeContainer}>
+            {onChat ? (
+              <TouchableOpacity hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                style={[styles.clubCodeText, { width: moderateScale(50), height: moderateScale(25), alignItems: 'center', justifyContent: 'center', borderWidth: 1, borderColor: theme.colors.appleGreen, borderRadius: theme.borderRadius.xl, backgroundColor: theme.colors.background }]}
+                onPress={onChatPress}>
+                <Text style={{ fontFamily: Fonts.outfitSemiBold, fontSize: theme.typography.fontSize.xs, color: theme.colors.appleGreen }}>Chat</Text>
+              </TouchableOpacity>
+            ) : clubCodeShow ? (
+              <Text style={styles.clubCodeText}>
+                {clubCode}
+              </Text>
+            ) : null}
+          </View>
+        </View>
+
+        {/* Address */}
+        {clubAddress != "" && (
+          <View style={styles.addressRow}>
+            <SVG.locationIcon width={moderateScale(16)} height={moderateScale(16)} />
+            <Text style={styles.addressText} numberOfLines={1}>
+              {clubAddress}
+            </Text>
+          </View>
+        )}
+
+        {onJoin && (
+          <TouchableOpacity hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+            style={[styles.clubCodeText, { marginTop: theme.spacing.sm, alignSelf: 'flex-start', width: moderateScale(50), height: moderateScale(25), alignItems: 'center', justifyContent: 'center', borderWidth: 1, borderColor: theme.colors.appleGreen, borderRadius: theme.borderRadius.xl, backgroundColor: theme.colors.background }]}
+            onPress={onJoinPress}>
+            <Text style={{ fontFamily: Fonts.outfitSemiBold, fontSize: theme.typography.fontSize.xs, color: theme.colors.appleGreen }}>Join</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    </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',
+  },
+  clubName: {
+    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,
+  },
+  clubCodeText: {
+    fontSize: theme.typography.fontSize.xs,
+    fontFamily: Fonts.outfitLight,
+    color: theme.colors.appleGreen,
+    alignSelf: 'flex-end',
+    marginRight: moderateScale(8),
+  },
+  clubCodeContainer: {
+    // width: moderateScale(150),
+    flex: 1,
+    alignSelf: 'flex-end',
+  },
+  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,
+  },
+  cancelButton: {
+    fontSize: theme.typography.fontSize.xs,
+    fontFamily: Fonts.outfitLight,
+    color: theme.colors.appleGreen,
+    alignSelf: 'flex-end',
+    marginRight: moderateScale(8),
+  },
+  cancelButtonText: {
+    fontFamily: Fonts.outfitSemiBold,
+    fontSize: theme.typography.fontSize.xs,
+    color: theme.colors.cancelButton,
+  },
+});
+
+export default ClubCard;

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { SvgProps } from 'react-native-svg';
+import { theme } from '../../constants';
+
+// Try to import SVG icons with fallback
+let HomeIcon: any, UserIcon: any, SettingsIcon: any, EyeIcon: any, EyeOffIcon: any;
+let MailIcon: any, LockIcon: any, ChevronRightIcon: any, LogOutIcon: any, BellIcon: any;
+
+try {
+  HomeIcon = require('../../assets/icons/home.svg').default;
+  UserIcon = require('../../assets/icons/user.svg').default;
+  SettingsIcon = require('../../assets/icons/settings.svg').default;
+  EyeIcon = require('../../assets/icons/eye.svg').default;
+  EyeOffIcon = require('../../assets/icons/eye-off.svg').default;
+  MailIcon = require('../../assets/icons/mail.svg').default;
+  LockIcon = require('../../assets/icons/lock.svg').default;
+  ChevronRightIcon = require('../../assets/icons/chevron-right.svg').default;
+  LogOutIcon = require('../../assets/icons/log-out.svg').default;
+  BellIcon = require('../../assets/icons/bell.svg').default;
+} catch (error) {
+  console.warn('SVG icons could not be loaded, using fallback');
+}
+
+// Icon mapping
+const iconMap = {
+  home: HomeIcon,
+  user: UserIcon,
+  settings: SettingsIcon,
+  eye: EyeIcon,
+  'eye-off': EyeOffIcon,
+  mail: MailIcon,
+  lock: LockIcon,
+  'chevron-right': ChevronRightIcon,
+  'log-out': LogOutIcon,
+  bell: BellIcon,
+} as const;
+
+export type IconName = keyof typeof iconMap;
+
+export interface IconProps extends SvgProps {
+  name: IconName;
+  size?: number;
+  color?: string;
+}
+
+// Fallback icon component
+const FallbackIcon: React.FC<{ name: string; size: number; color: string }> = ({ name, size, color }) => (
+  <View
+    style={{
+      width: size,
+      height: size,
+      backgroundColor: color,
+      borderRadius: size / 4,
+      alignItems: 'center',
+      justifyContent: 'center',
+    }}
+  >
+    <Text style={{ color: 'white', fontSize: size * 0.4, fontWeight: 'bold' }}>
+      {name.charAt(0).toUpperCase()}
+    </Text>
+  </View>
+);
+
+export const Icon: React.FC<IconProps> = ({
+  name,
+  size = 24,
+  color = theme.colors.text,
+  ...props
+}) => {
+  const IconComponent = iconMap[name];
+
+  // Debug log to see what we're getting
+  if (__DEV__) {
+    console.log('Icon name:', name);
+    console.log('IconComponent:', IconComponent);
+    console.log('typeof IconComponent:', typeof IconComponent);
+  }
+
+  if (!IconComponent || typeof IconComponent !== 'function') {
+    console.warn(`Icon "${name}" not found or invalid, using fallback`);
+    return <FallbackIcon name={name} size={size} color={color} />;
+  }
+
+  return (
+    <IconComponent
+      width={size}
+      height={size}
+      color={color}
+      {...props}
+    />
+  );
+};

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { theme } from '../../constants';
+
+// Icon mapping using Unicode characters/emojis as fallback
+const iconMap = {
+  home: '🏠',
+  user: '👤',
+  settings: '⚙️',
+  eye: '👁️',
+  'eye-off': '🙈',
+  mail: '📧',
+  lock: '🔒',
+  'chevron-right': '▶️',
+  'log-out': '🚪',
+  bell: '🔔',
+} as const;
+
+export type IconName = keyof typeof iconMap;
+
+export interface IconProps {
+  name: IconName;
+  size?: number;
+  color?: string;
+}
+
+export const IconAlt: React.FC<IconProps> = ({
+  name,
+  size = 24,
+  color = theme.colors.text,
+}) => {
+  const iconCharacter = iconMap[name];
+
+  if (!iconCharacter) {
+    console.warn(`Icon "${name}" not found`);
+    return (
+      <View style={[styles.fallback, { width: size, height: size }]}>
+        <Text style={[styles.fallbackText, { fontSize: size * 0.6, color }]}>
+          ?
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <Text style={[styles.icon, { fontSize: size, color }]}>
+      {iconCharacter}
+    </Text>
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    textAlign: 'center',
+  },
+  fallback: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.colors.surface,
+    borderRadius: 4,
+  },
+  fallbackText: {
+    fontWeight: 'bold',
+  },
+});

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
+import { Icon, IconName, IconProps } from './Icon';
+import { theme } from '../../constants';
+
+interface IconButtonProps extends Omit<IconProps, 'name'> {
+  name: IconName;
+  onPress: () => void;
+  style?: ViewStyle;
+  disabled?: boolean;
+  hitSlop?: number;
+  variant?: 'default' | 'filled' | 'outline';
+  size?: number;
+}
+
+export const IconButton: React.FC<IconButtonProps> = ({
+  name,
+  onPress,
+  style,
+  disabled = false,
+  hitSlop = 8,
+  variant = 'default',
+  size = 24,
+  color,
+  ...iconProps
+}) => {
+  const buttonStyle = [
+    styles.base,
+    styles[variant],
+    disabled && styles.disabled,
+    { width: size + 16, height: size + 16 },
+    style,
+  ];
+
+  const iconColor = color || getIconColor(variant, disabled);
+
+  return (
+    <TouchableOpacity
+      style={buttonStyle}
+      onPress={onPress}
+      disabled={disabled}
+      hitSlop={{ top: hitSlop, bottom: hitSlop, left: hitSlop, right: hitSlop }}
+      activeOpacity={0.7}
+    >
+      <Icon
+        name={name}
+        size={size}
+        color={iconColor}
+        {...iconProps}
+      />
+    </TouchableOpacity>
+  );
+};
+
+const getIconColor = (variant: string, disabled: boolean): string => {
+  if (disabled) return theme.colors.textSecondary;
+  
+  switch (variant) {
+    case 'filled':
+      return theme.colors.background;
+    case 'outline':
+      return theme.colors.primary;
+    default:
+      return theme.colors.text;
+  }
+};
+
+const styles = StyleSheet.create({
+  base: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: theme.borderRadius.md,
+  },
+  default: {
+    backgroundColor: 'transparent',
+  },
+  filled: {
+    backgroundColor: theme.colors.primary,
+  },
+  outline: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: theme.colors.primary,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});