@fadyshawky/react-native-magic 2.2.0 → 2.3.0

package/template/src/screens/components/ComponentsScreen.tsx

@@ -0,0 +1,301 @@
+import React, {useState} from 'react';
+import {StyleSheet, TextStyle, View, ViewStyle} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {ButtonType} from '../../../types';
+import {AppBottomSheet} from '../../common/components/AppBottomSheet';
+import {AppSwitch} from '../../common/components/AppSwitch';
+import {AppTextInput} from '../../common/components/AppTextInput';
+import {Avatar} from '../../common/components/Avatar';
+import {Badge} from '../../common/components/Badge';
+import {CardScroller} from '../../common/components/CardScroller';
+import {Carousel} from '../../common/components/Carousel';
+import {Checkbox} from '../../common/components/Checkbox';
+import {Chip} from '../../common/components/Chip';
+import {Container} from '../../common/components/Container';
+import {Dropdown} from '../../common/components/Dropdown';
+import {ListItem} from '../../common/components/ListItem';
+import {ModalDialog} from '../../common/components/ModalDialog';
+import {PrimaryButton} from '../../common/components/PrimaryButton';
+import {RadioGroup} from '../../common/components/RadioGroup';
+import {RTLAwareText} from '../../common/components/RTLAwareText';
+import {RTLAwareView} from '../../common/components/RTLAwareView';
+import {SegmentedControl} from '../../common/components/SegmentedControl';
+import {Skeleton} from '../../common/components/Skeleton';
+import {BrandGradients, GradientDirection} from '../../core/theme/brand';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {useTheme} from '../../core/theme/ThemeProvider';
+
+const SLIDES = [
+  {title: 'Build fast', sub: 'Scaffolded for you'},
+  {title: 'Stay consistent', sub: 'One design system'},
+  {title: 'Ship anywhere', sub: 'iOS · Android'},
+];
+const CARDS = [
+  {title: 'Getting started', sub: 'Set up your env'},
+  {title: 'Theming', sub: 'Tokens & gradients'},
+  {title: 'Navigation', sub: 'Token-gated stacks'},
+];
+
+const Section = ({
+  title,
+  children,
+  cardStyle,
+  titleStyle,
+}: {
+  title: string;
+  children: React.ReactNode;
+  cardStyle: ViewStyle | ViewStyle[];
+  titleStyle: TextStyle | TextStyle[];
+}) => (
+  <View style={styles.section}>
+    <RTLAwareText style={titleStyle}>{title}</RTLAwareText>
+    <RTLAwareView style={cardStyle}>{children}</RTLAwareView>
+  </View>
+);
+
+export function ComponentsScreen(): JSX.Element {
+  const {theme} = useTheme();
+  const [name, setName] = useState('');
+  const [pass, setPass] = useState('');
+  const [notes, setNotes] = useState('');
+  const [country, setCountry] = useState<string | undefined>();
+  const [agree, setAgree] = useState(false);
+  const [notify, setNotify] = useState(true);
+  const [plan, setPlan] = useState('a');
+  const [seg, setSeg] = useState(0);
+  const [chip, setChip] = useState('all');
+  const [sheet, setSheet] = useState(false);
+  const [dialog, setDialog] = useState(false);
+
+  const cardStyle = [
+    styles.card,
+    {
+      backgroundColor: theme.colors.grayScale_0,
+      borderColor: theme.colors.grayScale_50,
+    },
+  ];
+  const titleStyle = [theme.text.bodyXLargeBold, styles.h];
+
+  return (
+    <Container
+      testID={'ComponentsScreenID'}
+      backgroundImage={0}
+      backgroundColor={theme.colors.background_2}
+      contentContainerStyle={styles.content}>
+      <RTLAwareText style={theme.text.header3}>Components</RTLAwareText>
+
+      <Section title="Text inputs" cardStyle={cardStyle} titleStyle={titleStyle}>
+        <AppTextInput label="Name" value={name} onChangeText={setName} placeholder="Your name" />
+        <AppTextInput
+          label="Password"
+          value={pass}
+          onChangeText={setPass}
+          placeholder="••••••••"
+          secureTextEntry
+        />
+        <AppTextInput
+          label="Notes"
+          value={notes}
+          onChangeText={setNotes}
+          placeholder="Write something…"
+          multiline
+        />
+        <Dropdown
+          label="Country"
+          value={country}
+          placeholder="Select a country"
+          options={[
+            {label: 'Egypt', value: 'eg'},
+            {label: 'United Arab Emirates', value: 'ae'},
+            {label: 'Saudi Arabia', value: 'sa'},
+          ]}
+          onSelect={setCountry}
+        />
+      </Section>
+
+      <Section title="Toggles" cardStyle={cardStyle} titleStyle={titleStyle}>
+        <Checkbox checked={agree} onChange={setAgree} label="I agree to the terms" />
+        <RTLAwareView style={styles.row}>
+          <RTLAwareText style={theme.text.bodyLargeRegular}>Notifications</RTLAwareText>
+          <AppSwitch value={notify} onValueChange={setNotify} />
+        </RTLAwareView>
+        <RadioGroup
+          value={plan}
+          options={[
+            {label: 'Starter', value: 'a'},
+            {label: 'Pro', value: 'b'},
+            {label: 'Team', value: 'c'},
+          ]}
+          onChange={setPlan}
+        />
+      </Section>
+
+      <Section
+        title="Selection & display"
+        cardStyle={cardStyle}
+        titleStyle={titleStyle}>
+        <SegmentedControl segments={['All', 'Active', 'Done']} index={seg} onChange={setSeg} />
+        <RTLAwareView style={styles.chips}>
+          {['all', 'design', 'code', 'launch'].map(c => (
+            <Chip key={c} label={c} selected={chip === c} onPress={() => setChip(c)} />
+          ))}
+        </RTLAwareView>
+        <RTLAwareView style={styles.row}>
+          <Badge label="New" variant="primary" />
+          <Badge label="Live" variant="success" />
+          <Badge label="Error" variant="error" />
+          <Badge count={128} variant="neutral" />
+        </RTLAwareView>
+        <RTLAwareView style={styles.row}>
+          <Avatar name="Fady Shawky" />
+          <Avatar name="Alex Doe" size={36} />
+          <Avatar size={36} />
+        </RTLAwareView>
+      </Section>
+
+      <Section title="Carousel" cardStyle={cardStyle} titleStyle={titleStyle}>
+        <Carousel
+          data={SLIDES}
+          height={130}
+          renderItem={({item}) => (
+            <LinearGradient
+              colors={BrandGradients.primary}
+              start={GradientDirection.start}
+              end={GradientDirection.end}
+              style={styles.slide}>
+              <RTLAwareText style={[theme.text.header4, styles.onGradientText]}>
+                {item.title}
+              </RTLAwareText>
+              <RTLAwareText
+                style={[theme.text.bodyMediumRegular, styles.onGradientText]}>
+                {item.sub}
+              </RTLAwareText>
+            </LinearGradient>
+          )}
+        />
+      </Section>
+
+      <Section title="Card scroller" cardStyle={cardStyle} titleStyle={titleStyle}>
+        <CardScroller
+          data={CARDS}
+          cardWidth={220}
+          renderItem={({item}) => (
+            <View
+              style={[
+                styles.scard,
+                {
+                  backgroundColor: theme.colors.background_2,
+                  borderColor: theme.colors.grayScale_50,
+                },
+              ]}>
+              <RTLAwareText style={theme.text.bodyLargeBold}>{item.title}</RTLAwareText>
+              <RTLAwareText
+                style={{...theme.text.bodySmallRegular, color: theme.colors.grayScale_200}}>
+                {item.sub}
+              </RTLAwareText>
+            </View>
+          )}
+        />
+      </Section>
+
+      <Section title="List rows" cardStyle={cardStyle} titleStyle={titleStyle}>
+        <ListItem
+          title="Profile"
+          subtitle="Edit your details"
+          left={<Avatar name="Fady Shawky" size={36} />}
+          showChevron
+          onPress={() => {}}
+        />
+        <ListItem title="Notifications" right={<AppSwitch value={notify} onValueChange={setNotify} />} />
+        <ListItem title="Language" subtitle="English" showChevron onPress={() => {}} />
+      </Section>
+
+      <Section
+        title="Overlays & loading"
+        cardStyle={cardStyle}
+        titleStyle={titleStyle}>
+        <PrimaryButton
+          label="Open bottom sheet"
+          type={ButtonType.solid}
+          onPressIn={() => setSheet(true)}
+        />
+        <PrimaryButton
+          label="Open dialog"
+          type={ButtonType.outline}
+          onPressIn={() => setDialog(true)}
+        />
+        <View style={styles.skeletons}>
+          <Skeleton height={16} />
+          <Skeleton height={16} width="70%" />
+          <Skeleton height={80} radius={CommonSizes.borderRadius.large} />
+        </View>
+      </Section>
+
+      <AppBottomSheet visible={sheet} onClose={() => setSheet(false)} title="Choose a plan">
+        <RadioGroup
+          value={plan}
+          options={[
+            {label: 'Starter', value: 'a'},
+            {label: 'Pro', value: 'b'},
+            {label: 'Team', value: 'c'},
+          ]}
+          onChange={setPlan}
+        />
+        <PrimaryButton label="Done" type={ButtonType.solid} onPressIn={() => setSheet(false)} />
+      </AppBottomSheet>
+
+      <ModalDialog
+        visible={dialog}
+        onClose={() => setDialog(false)}
+        title="Delete item?"
+        message="This action cannot be undone."
+        actions={[
+          {label: 'Cancel', onPress: () => setDialog(false), variant: 'ghost'},
+          {label: 'Delete', onPress: () => setDialog(false), variant: 'destructive'},
+        ]}
+      />
+    </Container>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    paddingHorizontal: CommonSizes.spacing.large,
+    paddingTop: CommonSizes.spacing.large,
+    paddingBottom: CommonSizes.spacing.xxxLarge,
+    gap: CommonSizes.spacing.xLarge,
+  },
+  section: {gap: CommonSizes.spacing.medium},
+  h: {marginBottom: CommonSizes.spacing.small},
+  onGradientText: {color: '#EAF0FF'},
+  card: {
+    borderRadius: CommonSizes.borderRadius.large,
+    borderWidth: CommonSizes.borderWidth.small,
+    padding: CommonSizes.spacing.large,
+    gap: CommonSizes.spacing.large,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: CommonSizes.spacing.medium,
+    flexWrap: 'wrap',
+  },
+  chips: {flexDirection: 'row', flexWrap: 'wrap', gap: CommonSizes.spacing.small},
+  slide: {
+    flex: 1,
+    height: 130,
+    borderRadius: CommonSizes.borderRadius.large,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: CommonSizes.spacing.small,
+  },
+  scard: {
+    width: 220,
+    borderRadius: CommonSizes.borderRadius.large,
+    borderWidth: CommonSizes.borderWidth.small,
+    padding: CommonSizes.spacing.large,
+    gap: CommonSizes.spacing.small,
+  },
+  skeletons: {gap: CommonSizes.spacing.medium},
+});

package/template/src/screens/home/HomeScreen.tsx

@@ -1,5 +1,147 @@
 import React from 'react';
+import {StyleSheet, View} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {Avatar} from '../../common/components/Avatar';
+import {Chip} from '../../common/components/Chip';
+import {FlatListWrapper} from '../../common/components/FlatListWrapper';
+import {ListItem} from '../../common/components/ListItem';
+import {Logo} from '../../common/components/Logo';
+import {RTLAwareText} from '../../common/components/RTLAwareText';
+import {RTLAwareView} from '../../common/components/RTLAwareView';
+import {useTranslation} from '../../common/localization/LocalizationProvider';
+import {Category} from '../../core/store/categories/categoriesState';
+import {BrandGradients, GradientDirection, Glow} from '../../core/theme/brand';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {useHomeData} from './hooks/useHomeData';
 
 export function HomeScreen(): JSX.Element {
-  return <></>;
+  const {theme} = useTheme();
+  const t = useTranslation();
+  const {user, categories, loadState, error, reload} = useHomeData();
+
+  const renderItem = ({item}: {item: Category}) => (
+    <ListItem
+      title={item.name}
+      subtitle={item.icon}
+      showChevron
+      onPress={() => {}}
+      left={
+        <LinearGradient
+          colors={BrandGradients.primary}
+          start={GradientDirection.start}
+          end={GradientDirection.end}
+          style={styles.itemIcon}>
+          <RTLAwareText
+            style={[theme.text.bodyMediumExtraBold, styles.onGradientText]}>
+            {(item.name?.charAt(0) || '•').toUpperCase()}
+          </RTLAwareText>
+        </LinearGradient>
+      }
+    />
+  );
+
+  const header = (
+    <View>
+      <RTLAwareView style={styles.topbar}>
+        <RTLAwareView style={styles.greetWrap}>
+          <Logo size={36} variant="gradient" />
+          <View style={styles.flex}>
+            <RTLAwareText
+              style={{
+                ...theme.text.bodySmallRegular,
+                color: theme.colors.grayScale_200,
+              }}>
+              {t('greeting', 'home')}
+            </RTLAwareText>
+            <RTLAwareText style={theme.text.bodyXLargeBold} numberOfLines={1}>
+              {user?.full_name || t('there', 'home')}
+            </RTLAwareText>
+          </View>
+        </RTLAwareView>
+        <Avatar name={user?.full_name || 'U'} size={40} />
+      </RTLAwareView>
+
+      <LinearGradient
+        colors={BrandGradients.primary}
+        start={GradientDirection.start}
+        end={GradientDirection.end}
+        style={[styles.hero, Glow.primary]}>
+        <RTLAwareText
+          style={[theme.text.bodySmallExtraBold, styles.onGradientText]}>
+          {t('heroEyebrow', 'home')}
+        </RTLAwareText>
+        <RTLAwareText style={[theme.text.header3, styles.onGradientText]}>
+          {t('heroTitle', 'home')}
+        </RTLAwareText>
+        <RTLAwareText
+          style={[theme.text.bodyMediumRegular, styles.onGradientText]}>
+          {t('heroSubtitle', 'home')}
+        </RTLAwareText>
+        <RTLAwareView style={styles.heroCta}>
+          <Chip label={t('explore', 'home')} onPress={() => {}} />
+        </RTLAwareView>
+      </LinearGradient>
+
+      <RTLAwareText style={[theme.text.bodyXLargeBold, styles.sectionTitle]}>
+        {t('items', 'home')}
+      </RTLAwareText>
+    </View>
+  );
+
+  return (
+    <SafeAreaView
+      style={[styles.screen, {backgroundColor: theme.colors.background_2}]}
+      edges={['top']}>
+      <FlatListWrapper
+        data={categories}
+        loadState={loadState}
+        error={error}
+        tryAgain={reload}
+        onRefresh={reload}
+        renderItem={renderItem}
+        ListHeaderComponent={header}
+        contentContainerStyle={styles.listContent}
+      />
+    </SafeAreaView>
+  );
 }
+
+const styles = StyleSheet.create({
+  screen: {flex: 1},
+  flex: {flex: 1},
+  onGradientText: {color: '#EAF0FF'},
+  listContent: {
+    paddingHorizontal: CommonSizes.spacing.large,
+    paddingBottom: CommonSizes.spacing.xxxLarge,
+  },
+  topbar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingTop: CommonSizes.spacing.large,
+    paddingBottom: CommonSizes.spacing.xLarge,
+  },
+  greetWrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: CommonSizes.spacing.medium,
+    flex: 1,
+  },
+  hero: {
+    borderRadius: CommonSizes.borderRadius.xLarge,
+    padding: CommonSizes.spacing.xLarge,
+    gap: CommonSizes.spacing.small,
+    marginBottom: CommonSizes.spacing.xLarge,
+  },
+  heroCta: {alignSelf: 'flex-start', marginTop: CommonSizes.spacing.small},
+  sectionTitle: {marginBottom: CommonSizes.spacing.medium},
+  itemIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: CommonSizes.borderRadius.medium,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/template/src/screens/home/hooks/useHomeData.ts

@@ -1,18 +1,32 @@
-import {useState} from 'react';
+import {useCallback, useEffect} from 'react';
+import {fetchCategories} from '../../../core/store/categories/categoriesActions';
 import {useAppDispatch, useAppSelector} from '../../../core/store/reduxHelpers';
 import {RootState} from '../../../core/store/rootReducer';
+
+/**
+ * Loads the example `categories` feature and exposes the user.
+ * Fetches on mount; `reload` is wired to the list's pull-to-refresh / try-again.
+ */
 export function useHomeData() {
-  const [isLoading, setIsLoading] = useState(false);
   const dispatch = useAppDispatch();
-  const {categories, loadState} = useAppSelector(
+  const {categories, loadState, error} = useAppSelector(
     (state: RootState) => state.categories,
   );
   const {user} = useAppSelector((state: RootState) => state.user);
 
-  
+  const loadCategories = useCallback(() => {
+    dispatch(fetchCategories());
+  }, [dispatch]);
+
+  useEffect(() => {
+    loadCategories();
+  }, [loadCategories]);
 
   return {
-    isLoading,
     user,
+    categories,
+    loadState,
+    error,
+    reload: loadCategories,
   };
 }

package/template/src/screens/index.tsx

@@ -4,6 +4,7 @@ export {OTPScreen as OTP} from './OTP/OTPScreen';
 
 // Main Navigation Screens
 export {HomeScreen as Home} from './home/HomeScreen';
+export {ComponentsScreen as Components} from './components/ComponentsScreen';
 export {Profile} from './profile/Profile';
 export {Splash} from './splash/Splash';
 

package/template/src/screens/profile/Profile.tsx

@@ -1,5 +1,142 @@
-import React from 'react';
+import React, {useState} from 'react';
+import {Alert, StyleSheet, View} from 'react-native';
+import {ButtonType} from '../../../types';
+import {AppSwitch} from '../../common/components/AppSwitch';
+import {Avatar} from '../../common/components/Avatar';
+import {Container} from '../../common/components/Container';
+import {ListItem} from '../../common/components/ListItem';
+import {PrimaryButton} from '../../common/components/PrimaryButton';
+import {RTLAwareText} from '../../common/components/RTLAwareText';
+import {RTLAwareView} from '../../common/components/RTLAwareView';
+import {Languages} from '../../common/localization/localization';
+import {
+  useLocalization,
+  useTranslation,
+} from '../../common/localization/LocalizationProvider';
+import {useAppDispatch, useAppSelector} from '../../core/store/reduxHelpers';
+import {setLogout} from '../../core/store/user/userSlice';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {useTheme} from '../../core/theme/ThemeProvider';
 
 export function Profile(): JSX.Element {
-  return <></>;
+  const dispatch = useAppDispatch();
+  const {user} = useAppSelector(state => state.user);
+  const {theme, toggleTheme} = useTheme();
+  const t = useTranslation();
+  const {currentLanguage, changeLanguage} = useLocalization();
+  const [notify, setNotify] = useState(true);
+
+  const cardStyle = [
+    styles.card,
+    {
+      backgroundColor: theme.colors.grayScale_0,
+      borderColor: theme.colors.grayScale_50,
+    },
+  ];
+  const valueText = {
+    ...theme.text.bodyMediumBold,
+    color: theme.colors.PlatinateBlue_400,
+  };
+  const dividerStyle = [
+    styles.divider,
+    {backgroundColor: theme.colors.grayScale_50},
+  ];
+
+  const onToggleLanguage = () =>
+    changeLanguage(
+      currentLanguage === Languages.ar ? Languages.en : Languages.ar,
+    );
+
+  const onLogout = () =>
+    Alert.alert(t('logout', 'profile'), t('logoutConfirm', 'profile'), [
+      {text: t('cancel', 'common'), style: 'cancel'},
+      {
+        text: t('logout', 'profile'),
+        style: 'destructive',
+        onPress: () => dispatch(setLogout()),
+      },
+    ]);
+
+  return (
+    <Container
+      testID={'ProfileScreenID'}
+      backgroundImage={0}
+      contentContainerStyle={styles.content}
+      backgroundColor={theme.colors.background_2}>
+      <RTLAwareView style={styles.headerRow}>
+        <Avatar name={user?.full_name || 'U'} size={64} />
+        <View style={styles.flex}>
+          <RTLAwareText style={theme.text.header4} numberOfLines={1}>
+            {user?.full_name || t('account', 'profile')}
+          </RTLAwareText>
+          <RTLAwareText
+            style={{
+              ...theme.text.bodyMediumRegular,
+              color: theme.colors.grayScale_200,
+            }}>
+            {user?.mobile_number || '—'}
+          </RTLAwareText>
+        </View>
+      </RTLAwareView>
+
+      <RTLAwareView style={cardStyle}>
+        <ListItem
+          title={t('editProfile', 'profile')}
+          showChevron
+          onPress={() => {}}
+        />
+        <View style={dividerStyle} />
+        <ListItem
+          title={t('language', 'profile')}
+          onPress={onToggleLanguage}
+          right={
+            <RTLAwareText style={valueText}>
+              {currentLanguage === Languages.ar ? 'العربية' : 'English'}
+            </RTLAwareText>
+          }
+        />
+        <View style={dividerStyle} />
+        <ListItem
+          title={t('appearance', 'profile')}
+          onPress={toggleTheme}
+          right={
+            <RTLAwareText style={valueText}>
+              {theme.mode === 'dark' ? t('dark', 'profile') : t('light', 'profile')}
+            </RTLAwareText>
+          }
+        />
+        <View style={dividerStyle} />
+        <ListItem
+          title={t('notifications', 'profile')}
+          right={<AppSwitch value={notify} onValueChange={setNotify} />}
+        />
+      </RTLAwareView>
+
+      <PrimaryButton
+        label={t('logout', 'profile')}
+        onPressIn={onLogout}
+        type={ButtonType.outlineNegative}
+      />
+    </Container>
+  );
 }
+
+const styles = StyleSheet.create({
+  content: {
+    paddingHorizontal: CommonSizes.spacing.large,
+    paddingTop: CommonSizes.spacing.large,
+    gap: CommonSizes.spacing.xLarge,
+  },
+  flex: {flex: 1},
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: CommonSizes.spacing.large,
+  },
+  card: {
+    borderRadius: CommonSizes.borderRadius.large,
+    borderWidth: CommonSizes.borderWidth.small,
+    paddingHorizontal: CommonSizes.spacing.large,
+  },
+  divider: {height: CommonSizes.borderWidth.small, width: '100%'},
+});