@modhamanish/rn-mm-template 1.0.1 → 1.0.3

package/MMTemplate/src/screens/LoginScreen.tsx

@@ -1,11 +1,6 @@
 import React, { FC } from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  ScrollView,
-} from 'react-native';
+import { View, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
+import AppText from '../components/AppText';
 import { useFormik } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '../context/ThemeContext';
@@ -65,13 +60,40 @@ const LoginScreen: FC = () => {
       >
         <AnimationView animType="FadeIn" duration={800}>
           <View style={styles.header}>
-            <Text style={styles.title}>{t('auth.welcomeBack')}</Text>
-            <Text style={styles.subtitle}>{t('auth.signInToContinue')}</Text>
+            <AppText variant="h1" style={styles.title}>
+              {t('auth.welcomeBack')}
+            </AppText>
+            <AppText size="body" style={styles.subtitle}>
+              {t('auth.signInToContinue')}
+            </AppText>
           </View>
         </AnimationView>
 
         <AnimationView delay={200} animType="FadeIn" duration={800}>
           <View style={styles.formContainer}>
+            {/* Hint Banner */}
+            <View style={styles.hintBanner}>
+              <AppText variant="bold" style={styles.hintTitle}>
+                {t('auth.mockCredentialsHint')}
+              </AppText>
+              <View style={styles.hintContent}>
+                <AppText variant="semiBold" size={13} style={styles.hintLabel}>
+                  {t('auth.email')}:{' '}
+                </AppText>
+                <AppText size={13} style={styles.hintValue}>
+                  {userMockData.email}
+                </AppText>
+              </View>
+              <View style={styles.hintContent}>
+                <AppText variant="semiBold" size={13} style={styles.hintLabel}>
+                  {t('auth.password')}:{' '}
+                </AppText>
+                <AppText size={13} style={styles.hintValue}>
+                  {userMockData.password}
+                </AppText>
+              </View>
+            </View>
+
             {/* Email Input */}
             <TextInput
               label={t('auth.email')}
@@ -102,9 +124,9 @@ const LoginScreen: FC = () => {
 
             {/* Forgot Password */}
             <TouchableOpacity style={styles.forgotPassword}>
-              <Text style={styles.forgotPasswordText}>
+              <AppText variant="semiBold" style={styles.forgotPasswordText}>
                 {t('auth.forgotPassword')}
-              </Text>
+              </AppText>
             </TouchableOpacity>
 
             {/* Login Button */}
@@ -112,16 +134,24 @@ const LoginScreen: FC = () => {
               style={styles.loginButton}
               onPress={() => formik.handleSubmit()}
             >
-              <Text style={styles.loginButtonText}>{t('auth.login')}</Text>
+              <AppText
+                variant="bold"
+                size="body"
+                style={styles.loginButtonText}
+              >
+                {t('auth.login')}
+              </AppText>
             </TouchableOpacity>
 
             {/* Sign Up Link */}
             <View style={styles.signupContainer}>
-              <Text style={styles.signupText}>
+              <AppText style={styles.signupText}>
                 {t('auth.dontHaveAccount')}{' '}
-              </Text>
+              </AppText>
               <TouchableOpacity>
-                <Text style={styles.signupLink}>{t('auth.signUp')}</Text>
+                <AppText variant="semiBold" style={styles.signupLink}>
+                  {t('auth.signUp')}
+                </AppText>
               </TouchableOpacity>
             </View>
           </View>
@@ -149,26 +179,43 @@ const getStyles = ({ colors }: ThemeType) =>
       alignItems: 'center',
     },
     title: {
-      fontSize: 32,
-      fontWeight: '700',
       color: colors.textColor,
       marginBottom: 8,
     },
     subtitle: {
-      fontSize: 16,
       color: colors.textColor + 'CC',
     },
     formContainer: {
       width: '100%',
     },
+    hintBanner: {
+      backgroundColor: colors.primary + '10',
+      padding: 16,
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: colors.primary + '30',
+      marginBottom: 24,
+    },
+    hintTitle: {
+      color: colors.primary,
+      marginBottom: 8,
+    },
+    hintContent: {
+      flexDirection: 'row',
+      marginBottom: 4,
+    },
+    hintLabel: {
+      color: colors.textColor,
+    },
+    hintValue: {
+      color: colors.textColor + 'CC',
+    },
     forgotPassword: {
       alignSelf: 'flex-end',
       marginBottom: 24,
     },
     forgotPasswordText: {
       color: colors.primary,
-      fontSize: 14,
-      fontWeight: '600',
     },
     loginButton: {
       backgroundColor: colors.primary,
@@ -179,8 +226,6 @@ const getStyles = ({ colors }: ThemeType) =>
     },
     loginButtonText: {
       color: colors.white,
-      fontSize: 16,
-      fontWeight: '700',
     },
     signupContainer: {
       flexDirection: 'row',
@@ -189,11 +234,8 @@ const getStyles = ({ colors }: ThemeType) =>
     },
     signupText: {
       color: colors.textColor + 'CC',
-      fontSize: 14,
     },
     signupLink: {
       color: colors.primary,
-      fontSize: 14,
-      fontWeight: '600',
     },
   });

package/MMTemplate/src/screens/NoteScreen.tsx

@@ -0,0 +1,241 @@
+import {
+  StyleSheet,
+  FlatList,
+  View,
+  TouchableOpacity,
+  ActivityIndicator,
+  RefreshControl,
+} from 'react-native';
+import AppText from '../components/AppText';
+import React, { FC, useMemo } from 'react';
+import FullScreenContainer from '../components/FullScreenContainer';
+import { useTheme } from '../context/ThemeContext';
+import { useTranslation } from 'react-i18next';
+import { ThemeType } from '../theme/Colors';
+import { useGetNotesQuery } from '../services/note.query';
+import { Note } from '../types/services.types';
+import AnimationView from '../components/AnimationView';
+
+import { navigate } from '../utils/navigationUtils';
+import Routes from '../navigation/routes';
+
+const NoteScreen: FC = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  const { data: notes, isLoading, refetch, isRefetching } = useGetNotesQuery();
+
+  const renderNoteItem = ({ item, index }: { item: Note; index: number }) => (
+    <AnimationView delay={index * 100} animType="FadeIn" duration={500}>
+      <TouchableOpacity style={styles.noteCard} activeOpacity={0.7}>
+        <View style={styles.noteHeader}>
+          <AppText
+            variant="bold"
+            size={18}
+            style={styles.noteTitle}
+            numberOfLines={1}
+          >
+            {item.title}
+          </AppText>
+          <View style={styles.noteTag}>
+            <AppText
+              variant="semiBold"
+              size="xsmall"
+              style={styles.noteTagText}
+            >
+              #{index + 1}
+            </AppText>
+          </View>
+        </View>
+        <AppText style={styles.noteContent} numberOfLines={3}>
+          {item.description}
+        </AppText>
+      </TouchableOpacity>
+    </AnimationView>
+  );
+
+  const listHeader = useMemo(
+    () => (
+      <View style={styles.headerContainer}>
+        <AppText variant="h1" style={styles.headerTitle}>
+          {t('common.notes')}
+        </AppText>
+        <AppText style={styles.headerSubtitle}>
+          {notes?.length || 0} {t('common.notes').toLowerCase()}
+        </AppText>
+      </View>
+    ),
+    [notes?.length, styles, t],
+  );
+
+  const emptyComponent = () => (
+    <View style={styles.emptyContainer}>
+      <AppText size={60} style={styles.emptyIcon}>
+        📝
+      </AppText>
+      <AppText size={18} style={styles.emptyText}>
+        {t('common.noNotesFound')}
+      </AppText>
+      <TouchableOpacity
+        style={styles.addNoteButtonSmall}
+        activeOpacity={0.8}
+        onPress={() => navigate(Routes.AddNoteScreen)}
+      >
+        <AppText
+          variant="bold"
+          size="body"
+          style={styles.addNoteButtonTextSmall}
+        >
+          {t('common.addNote')}
+        </AppText>
+      </TouchableOpacity>
+    </View>
+  );
+
+  return (
+    <FullScreenContainer style={styles.container}>
+      {isLoading && !isRefetching ? (
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator size="large" color={theme.colors.primary} />
+        </View>
+      ) : (
+        <FlatList
+          data={notes}
+          keyExtractor={(_, index) => index.toString()}
+          renderItem={renderNoteItem}
+          ListHeaderComponent={listHeader}
+          ListEmptyComponent={emptyComponent}
+          contentContainerStyle={styles.listContent}
+          refreshControl={
+            <RefreshControl
+              refreshing={isRefetching}
+              onRefresh={refetch}
+              tintColor={theme.colors.primary}
+              colors={[theme.colors.primary]}
+            />
+          }
+        />
+      )}
+      <TouchableOpacity
+        style={styles.fab}
+        activeOpacity={0.8}
+        onPress={() => navigate(Routes.AddNoteScreen)}
+      >
+        <AppText size="xxlarge" style={styles.fabIcon}>
+          +
+        </AppText>
+      </TouchableOpacity>
+    </FullScreenContainer>
+  );
+};
+
+export default NoteScreen;
+
+const getStyles = ({ colors }: ThemeType) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.backgroundColor,
+    },
+    loadingContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    listContent: {
+      padding: 20,
+      paddingBottom: 100,
+    },
+    headerContainer: {
+      marginBottom: 24,
+      marginTop: 20,
+    },
+    headerTitle: {
+      color: colors.textColor,
+      letterSpacing: -0.5,
+    },
+    headerSubtitle: {
+      color: colors.textColor + '80',
+      marginTop: 4,
+    },
+    noteCard: {
+      backgroundColor: colors.backgroundColor,
+      borderRadius: 16,
+      padding: 16,
+      marginBottom: 16,
+      borderWidth: 1,
+      borderColor: colors.textColor + '15',
+      shadowColor: colors.black,
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.05,
+      shadowRadius: 10,
+      elevation: 2,
+    },
+    noteHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: 8,
+    },
+    noteTitle: {
+      color: colors.textColor,
+      flex: 1,
+      marginRight: 8,
+    },
+    noteTag: {
+      backgroundColor: colors.primary + '15',
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      borderRadius: 8,
+    },
+    noteTagText: {
+      color: colors.primary,
+      textTransform: 'uppercase',
+    },
+    noteContent: {
+      color: colors.textColor + 'B3',
+      lineHeight: 20,
+    },
+    emptyContainer: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: 100,
+    },
+    emptyIcon: {
+      marginBottom: 16,
+    },
+    emptyText: {
+      color: colors.textColor + '80',
+      marginBottom: 24,
+    },
+    addNoteButtonSmall: {
+      backgroundColor: colors.primary,
+      paddingHorizontal: 24,
+      paddingVertical: 12,
+      borderRadius: 12,
+    },
+    addNoteButtonTextSmall: {
+      color: colors.white,
+    },
+    fab: {
+      position: 'absolute',
+      right: 20,
+      bottom: 20,
+      width: 60,
+      height: 60,
+      borderRadius: 30,
+      backgroundColor: colors.primary,
+      justifyContent: 'center',
+      alignItems: 'center',
+      elevation: 5,
+      shadowColor: colors.black,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.3,
+      shadowRadius: 6,
+    },
+    fabIcon: {
+      color: colors.white,
+    },
+  });

package/MMTemplate/src/screens/ProfileScreen.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';
+import { View, TouchableOpacity, StyleSheet, Alert } from 'react-native';
+import AppText from '../components/AppText';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '../context/ThemeContext';
 import { ThemeType } from '../theme/Colors';
@@ -41,26 +42,32 @@ const ProfileScreen: FC = () => {
         <AnimationView animType="FadeIn" duration={800}>
           <View style={styles.header}>
             <View style={styles.avatarContainer}>
-              <Text style={styles.avatarText}>
+              <AppText variant="bold" size={40} style={styles.avatarText}>
                 {user?.name?.charAt(0).toUpperCase() || 'U'}
-              </Text>
+              </AppText>
             </View>
-            <Text style={styles.name}>{user?.name || 'User'}</Text>
-            <Text style={styles.email}>
+            <AppText variant="bold" style={styles.name}>
+              {user?.name || 'User'}
+            </AppText>
+            <AppText style={styles.email}>
               {user?.email || 'user@example.com'}
-            </Text>
+            </AppText>
           </View>
         </AnimationView>
 
         <AnimationView delay={300} animType="FadeIn" duration={800}>
           <InfoCard title={t('profile.accountInformation')} icon="👤">
             <View style={styles.infoRow}>
-              <Text style={styles.infoLabel}>{t('profile.name')}:</Text>
-              <Text style={styles.infoValue}>{user?.name || 'N/A'}</Text>
+              <AppText variant="semiBold" style={styles.infoLabel}>
+                {t('profile.name')}:
+              </AppText>
+              <AppText style={styles.infoValue}>{user?.name || 'N/A'}</AppText>
             </View>
             <View style={styles.infoRow}>
-              <Text style={styles.infoLabel}>{t('profile.email')}:</Text>
-              <Text style={styles.infoValue}>{user?.email || 'N/A'}</Text>
+              <AppText variant="semiBold" style={styles.infoLabel}>
+                {t('profile.email')}:
+              </AppText>
+              <AppText style={styles.infoValue}>{user?.email || 'N/A'}</AppText>
             </View>
           </InfoCard>
         </AnimationView>
@@ -70,15 +77,21 @@ const ProfileScreen: FC = () => {
             style={styles.settingsButton}
             onPress={() => navigate(Routes.SettingsScreen)}
           >
-            <Text style={styles.settingsButtonText}>
+            <AppText
+              variant="bold"
+              size="body"
+              style={styles.settingsButtonText}
+            >
               ⚙️ {t('settings.settings')}
-            </Text>
+            </AppText>
           </TouchableOpacity>
         </AnimationView>
 
         <AnimationView delay={600} animType="FadeIn" duration={800}>
           <TouchableOpacity style={styles.logoutButton} onPress={confirmLogout}>
-            <Text style={styles.logoutButtonText}>{t('common.logout')}</Text>
+            <AppText variant="bold" size="body" style={styles.logoutButtonText}>
+              {t('common.logout')}
+            </AppText>
           </TouchableOpacity>
         </AnimationView>
       </View>
@@ -113,18 +126,13 @@ const getStyles = ({ colors }: ThemeType) =>
       marginBottom: 16,
     },
     avatarText: {
-      fontSize: 40,
-      fontWeight: '700',
       color: colors.white,
     },
     name: {
-      fontSize: 24,
-      fontWeight: '700',
       color: colors.textColor,
       marginBottom: 4,
     },
     email: {
-      fontSize: 14,
       color: colors.textColor + 'CC',
     },
     infoRow: {
@@ -134,12 +142,9 @@ const getStyles = ({ colors }: ThemeType) =>
       paddingVertical: 8,
     },
     infoLabel: {
-      fontSize: 14,
-      fontWeight: '600',
       color: colors.textColor,
     },
     infoValue: {
-      fontSize: 14,
       color: colors.textColor + 'CC',
     },
     logoutButton: {
@@ -151,8 +156,6 @@ const getStyles = ({ colors }: ThemeType) =>
     },
     logoutButtonText: {
       color: colors.white,
-      fontSize: 16,
-      fontWeight: '700',
     },
     settingsButton: {
       backgroundColor: colors.backgroundColor,
@@ -165,7 +168,5 @@ const getStyles = ({ colors }: ThemeType) =>
     },
     settingsButtonText: {
       color: colors.primary,
-      fontSize: 16,
-      fontWeight: '700',
     },
   });

package/MMTemplate/src/screens/SettingsScreen.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
-import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import { View, StyleSheet, ScrollView } from 'react-native';
+import AppText from '../components/AppText';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '../context/ThemeContext';
 import { ThemeType } from '../theme/Colors';
@@ -21,20 +22,24 @@ const SettingsScreen: FC = () => {
       >
         <AnimationView animType="FadeIn" duration={800}>
           <View style={styles.header}>
-            <Text style={styles.title}>{t('settings.settings')}</Text>
-            <Text style={styles.subtitle}>
+            <AppText variant="h1" style={styles.title}>
+              {t('settings.settings')}
+            </AppText>
+            <AppText size="body" style={styles.subtitle}>
               {t('settings.customizeYourExperience')}
-            </Text>
+            </AppText>
           </View>
         </AnimationView>
 
         {/* Language Section */}
         <AnimationView delay={200} animType="FadeIn" duration={800}>
           <View style={styles.section}>
-            <Text style={styles.sectionTitle}>{t('settings.language')}</Text>
-            <Text style={styles.sectionDescription}>
+            <AppText variant="semiBold" size={18} style={styles.sectionTitle}>
+              {t('settings.language')}
+            </AppText>
+            <AppText style={styles.sectionDescription}>
               {t('settings.chooseYourPreferredLanguage')}
-            </Text>
+            </AppText>
             <LanguageSwitcher />
           </View>
         </AnimationView>
@@ -42,10 +47,12 @@ const SettingsScreen: FC = () => {
         {/* Theme Section */}
         <AnimationView delay={400} animType="FadeIn" duration={800}>
           <View style={styles.section}>
-            <Text style={styles.sectionTitle}>{t('settings.theme')}</Text>
-            <Text style={styles.sectionDescription}>
+            <AppText variant="semiBold" size={18} style={styles.sectionTitle}>
+              {t('settings.theme')}
+            </AppText>
+            <AppText style={styles.sectionDescription}>
               {t('settings.switchBetweenLightAndDark')}
-            </Text>
+            </AppText>
             <ThemeSwitcher />
           </View>
         </AnimationView>
@@ -70,26 +77,20 @@ const getStyles = ({ colors }: ThemeType) =>
       marginBottom: 32,
     },
     title: {
-      fontSize: 32,
-      fontWeight: '700',
       color: colors.textColor,
       marginBottom: 8,
     },
     subtitle: {
-      fontSize: 16,
       color: colors.textColor + 'CC',
     },
     section: {
       marginBottom: 32,
     },
     sectionTitle: {
-      fontSize: 18,
-      fontWeight: '600',
       color: colors.textColor,
       marginBottom: 8,
     },
     sectionDescription: {
-      fontSize: 14,
       color: colors.textColor + 'CC',
       marginBottom: 16,
     },