@zezosoft/zezo-ott-react-native-ui-kit 1.0.3 → 1.0.4

package/src/components/User/ProfileUpdate/ProfileUpdate.tsx

@@ -0,0 +1,265 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Fri 03 Oct 2025 at 01:09 PM
+ */
+import { useCallback } from 'react';
+import {
+  View,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+  TouchableWithoutFeedback,
+  Keyboard,
+  TouchableOpacity,
+} from 'react-native';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { Camera } from 'lucide-react-native';
+import { useForm, Controller } from 'react-hook-form';
+import { Text } from '../../Text';
+import AppHeader from '../../Headers/AppHeader';
+import { useTheme } from '../../../theme/hook/useTheme';
+import type { AppTheme } from '../../../theme/themes';
+import UserAvatar from '../components/UserAvatar';
+import { Input } from '../../Input/Input';
+import { Button } from '../../Button';
+import ImageCropPicker, { type Image } from 'react-native-image-crop-picker';
+
+export type ProfileUpdateFormValues = {
+  fullName: string;
+  avatarFile: Image; // new field to store actual file
+};
+
+export type ProfileUpdateProps = {
+  title?: string;
+  name?: string;
+  avatarUri?: string;
+  onBackPress?: () => void;
+  onSubmit?: (val: { fullName: string; avatarFile: Image }) => void;
+  theme?: AppTheme;
+  loading?: boolean;
+  onError?: (error: { message: string }) => void;
+};
+
+export const ProfileUpdate = ({
+  title = 'My Profile',
+  name = '',
+  avatarUri = '',
+  onBackPress,
+  onSubmit,
+  theme,
+  loading = false,
+  onError,
+}: ProfileUpdateProps) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const { colors } = appliedTheme;
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+    trigger,
+    setValue,
+    watch,
+  } = useForm<ProfileUpdateFormValues>({
+    defaultValues: {
+      fullName: name,
+      avatarFile: {
+        path: avatarUri,
+      },
+    },
+    mode: 'onChange',
+    reValidateMode: 'onBlur',
+  });
+
+  const avatar = watch('avatarFile');
+
+  const handlePickImage = async () => {
+    try {
+      const image = await ImageCropPicker.openPicker({
+        width: 400,
+        height: 400,
+        cropping: true,
+        showCropGuidelines: false,
+        cropperCircleOverlay: true,
+        showCropFrame: false,
+        compressImageQuality: 0.7,
+        mediaType: 'photo',
+      });
+
+      if (image?.path && image?.path !== '' && image.path !== avatarUri) {
+        setValue('avatarFile', image, {
+          shouldValidate: true,
+          shouldDirty: true,
+        });
+      } else {
+        onError?.({ message: 'No image selected' });
+      }
+    } catch (error) {
+      const message = (error as Error).message;
+      onError?.({ message });
+    }
+  };
+
+  const handleFormSubmit = useCallback(
+    (data: ProfileUpdateFormValues) => {
+      Keyboard.dismiss();
+      if (data.avatarFile.path !== avatarUri) {
+        onSubmit?.({
+          avatarFile: data.avatarFile,
+          fullName: data.fullName,
+        });
+      } else {
+        onError?.({ message: 'No image selected' });
+      }
+    },
+    [avatarUri, onError, onSubmit]
+  );
+
+  return (
+    <KeyboardAvoidingView
+      style={[styles.container, { backgroundColor: colors.background }]}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+    >
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+        <View style={{ flex: 1 }}>
+          <AppHeader
+            title={title}
+            onBackPress={onBackPress}
+            theme={appliedTheme}
+            titleAlign="left"
+          />
+
+          <View style={styles.content}>
+            <View style={styles.avatarBox}>
+              <UserAvatar
+                avatarUri={avatar.path}
+                theme={appliedTheme}
+                size={100}
+              />
+              <TouchableOpacity
+                style={[
+                  styles.cameraBtn,
+                  {
+                    borderColor: colors.button,
+                    backgroundColor: colors.surfaceVariant,
+                    shadowColor: colors.shadow || colors.surface,
+                  },
+                ]}
+                activeOpacity={0.8}
+                onPress={handlePickImage}
+              >
+                <Camera
+                  size={moderateScale(13)}
+                  color={colors.button}
+                  strokeWidth={2}
+                />
+              </TouchableOpacity>
+            </View>
+
+            <Text style={[styles.label, { color: colors.textPrimary }]}>
+              Basic Detail
+            </Text>
+
+            <View style={styles.formContainer}>
+              <Controller
+                control={control}
+                name="fullName"
+                rules={{
+                  required: 'Name is required',
+                  minLength: { value: 3, message: 'At least 3 characters' },
+                }}
+                render={({ field: { onChange, value, onBlur } }) => (
+                  <View style={{ width: '100%' }}>
+                    <Input.One
+                      label="Full Name"
+                      value={value}
+                      onChangeText={(text) => {
+                        onChange(text);
+                        trigger('fullName');
+                      }}
+                      onBlur={onBlur}
+                      placeholder={'Enter your full name'}
+                      placeholderTextColor={colors.textDisabled}
+                      containerStyle={{ marginTop: verticalScale(20) }}
+                      theme={appliedTheme}
+                      returnKeyType="done"
+                      onSubmitEditing={handleSubmit(handleFormSubmit)}
+                    />
+                    {errors.fullName && (
+                      <Text style={[styles.errorText, { color: colors.error }]}>
+                        {errors.fullName.message}
+                      </Text>
+                    )}
+                  </View>
+                )}
+              />
+
+              <Button.Primary
+                title={'Update Profile'}
+                onPress={handleSubmit(handleFormSubmit)}
+                theme={appliedTheme}
+                titleStyle={{ fontSize: RFValue(14) }}
+                loading={loading}
+                containerStyle={{ marginTop: verticalScale(5) }}
+              />
+            </View>
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+    </KeyboardAvoidingView>
+  );
+};
+
+export default ProfileUpdate;
+
+namespace ProfileUpdate {
+  export type Props = ProfileUpdateProps;
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    padding: moderateScale(16),
+  },
+  avatarBox: {
+    marginVertical: verticalScale(20),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cameraBtn: {
+    position: 'absolute',
+    bottom: scale(3),
+    right: scale(3),
+    padding: scale(2),
+    width: scale(23),
+    height: scale(23),
+    borderRadius: scale(13.5),
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    elevation: 3,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 1.5,
+  },
+  label: {
+    fontSize: RFValue(12),
+    fontWeight: '500',
+    alignSelf: 'flex-start',
+    margin: scale(5),
+    marginTop: verticalScale(10),
+  },
+  formContainer: {
+    width: '100%',
+    alignItems: 'center',
+  },
+  errorText: {
+    fontSize: RFValue(11),
+    marginTop: verticalScale(5),
+    marginLeft: scale(5),
+    alignSelf: 'flex-start',
+  },
+});

package/src/components/User/components/UserSection.tsx

@@ -80,7 +80,7 @@ const UserSection: React.FC<UserSectionProps> = ({
                   styles.editButton,
                   {
                     borderColor: appliedTheme.colors.primary,
-                    backgroundColor: appliedTheme.colors.white,
+                    backgroundColor: appliedTheme.colors.surfaceVariant,
                     shadowColor: appliedTheme.colors.surface,
                   },
                 ]}
@@ -88,12 +88,10 @@ const UserSection: React.FC<UserSectionProps> = ({
                   color: appliedTheme.colors.surfaceDisabled,
                 }}
               >
-                <View style={styles.editContent}>
-                  <Edit3
-                    size={moderateScale(14)}
-                    color={appliedTheme.colors.primary}
-                  />
-                </View>
+                <Edit3
+                  size={moderateScale(13)}
+                  color={appliedTheme.colors.primary}
+                />
               </Pressable>
             )}
           </>
@@ -143,8 +141,10 @@ const styles = {
     position: 'absolute',
     bottom: scale(2),
     right: scale(2),
-    width: scale(22),
-    height: scale(22),
+    padding: scale(2),
+    width: scale(23),
+    height: scale(23),
+    overflow: 'hidden',
     borderRadius: scale(11),
     alignItems: 'center',
     justifyContent: 'center',
@@ -154,10 +154,7 @@ const styles = {
     shadowOpacity: 0.1,
     shadowRadius: 0.5,
   } as ViewStyle,
-  editContent: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  } as ViewStyle,
+
   editLabel: {
     fontSize: RFValue(8),
     marginTop: verticalScale(1),

package/src/components/User/index.ts

@@ -6,4 +6,6 @@
 import { WatchHistory } from './WatchHistory/WatchHistory';
 import { WatchLater } from './WatchLater/WatchLater';
 import { DeviceSessions } from './DeviceSessions/DeviceSessions';
-export { WatchHistory, WatchLater, DeviceSessions };
+import { ProfileUpdate } from './ProfileUpdate/ProfileUpdate';
+
+export { WatchHistory, WatchLater, DeviceSessions, ProfileUpdate };

package/src/components/index.ts

@@ -22,3 +22,4 @@ export * from './ContentView';
 export * from './Search';
 export * from './Subscription';
 export * from './Alert';
+export * from './Reels';

package/src/theme/ThemeProvider.tsx

@@ -17,6 +17,7 @@ import {
   initialWindowMetrics,
 } from 'react-native-safe-area-context';
 import { LightTheme, DarkTheme, type ITheme, type AppTheme } from './themes';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 type ThemeContextType = {
   theme: ITheme;
@@ -124,14 +125,16 @@ export const ZezoUIProvider: React.FC<ZezoUIProviderProps> = ({
   );
 
   return (
-    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-      <ThemeContext.Provider value={contextValue}>
-        <View
-          style={{ flex: 1, backgroundColor: mergedTheme.colors.background }}
-        >
-          {children}
-        </View>
-      </ThemeContext.Provider>
-    </SafeAreaProvider>
+    <GestureHandlerRootView>
+      <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+        <ThemeContext.Provider value={contextValue}>
+          <View
+            style={{ flex: 1, backgroundColor: mergedTheme.colors.background }}
+          >
+            {children}
+          </View>
+        </ThemeContext.Provider>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
   );
 };

package/src/theme/themes.ts

@@ -51,6 +51,7 @@ export type BaseColors = {
   shadow: string;
   scrim: string;
   backdrop: string;
+  overlay: string;
 
   inverseSurface: string;
   inverseOnSurface: string;
@@ -140,6 +141,7 @@ export const LightTheme: ITheme = {
     shadow: 'rgba(0, 0, 0, 0.1)',
     scrim: 'rgba(0, 0, 0, 0.2)',
     backdrop: 'rgba(243, 244, 246, 0.7)',
+    overlay: 'rgba(0,0,0,0.55)',
 
     inverseSurface: 'rgba(31, 41, 55, 1)',
     inverseOnSurface: 'rgba(249, 250, 251, 1)',
@@ -241,6 +243,7 @@ export const DarkTheme: ITheme = {
     shadow: 'rgba(0, 0, 0, 0.5)',
     scrim: 'rgba(0, 0, 0, 0.4)',
     backdrop: 'rgba(30, 41, 59, 0.7)',
+    overlay: 'rgba(0,0,0,0.55)',
 
     inverseSurface: 'rgba(229, 231, 235, 1)',
     inverseOnSurface: 'rgba(31, 41, 55, 1)',

package/src/utils/Formater.ts

@@ -0,0 +1,14 @@
+export function formatCount(count: number): string {
+  if (count < 1000) {
+    return count.toString();
+  } else if (count < 1000000) {
+    const thousands = count / 1000;
+    return thousands % 1 === 0 ? `${thousands}K` : `${thousands.toFixed(1)}K`;
+  } else if (count < 1000000000) {
+    const millions = count / 1000000;
+    return millions % 1 === 0 ? `${millions}M` : `${millions.toFixed(1)}M`;
+  } else {
+    const billions = count / 1000000000;
+    return billions % 1 === 0 ? `${billions}B` : `${billions.toFixed(1)}B`;
+  }
+}