@zezosoft/zezo-ott-react-native-ui-kit 0.1.0 → 1.0.0

package/src/components/Account/Account.tsx

@@ -0,0 +1,288 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 21 Jul 2025 at 12:35 PM
+ */
+
+import React, { cloneElement, isValidElement, memo, type ReactElement } from 'react';
+import { View, StyleSheet, ScrollView, TouchableOpacity, type TextStyle } from 'react-native';
+import { ChevronRight, Trash2 } from 'lucide-react-native';
+import { useTheme } from '../../theme';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import AppHeader from '../Headers/AppHeader';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import UserSection from '../User/components/UserSection';
+import TextButton from '../Button/TextButton';
+import { Text } from '../Text';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import type { AppTheme, ITheme } from '../../theme/themes';
+
+type CardItem = {
+  type: 'card';
+  title: string;
+  subtitle: string;
+};
+
+type RowItem = {
+  type?: 'row';
+  label: string;
+  leftIcon?: React.ReactNode;
+  showRightIcon?: boolean;
+  onPress?: () => void;
+};
+
+type AccountSectionItem = CardItem | RowItem;
+
+type AccountSection = {
+  title: string;
+  items: AccountSectionItem[];
+};
+
+type UserInfo = {
+  name: string;
+  avatarUri: string;
+  emailOrPhone: string;
+  onEditPress?: () => void;
+};
+
+interface UserInfoTextStyle {
+  nameStyle?: TextStyle;
+  emailStyle?: TextStyle;
+}
+
+export type AccountProps = {
+  title?: string;
+  userInfo: UserInfo;
+  renderUserInfo?: (userInfo: UserInfo) => React.ReactNode;
+  sections: AccountSection[];
+  onBackPress?: () => void;
+  theme?: AppTheme;
+  isLoading?: boolean;
+  avatarComponent?: React.ReactNode;
+  skeletonProps?: Partial<React.ComponentProps<typeof SkeletonPlaceholder>>;
+  userInfoTextStyle?: UserInfoTextStyle;
+  helpText?: string;
+  clickableText?: string;
+  deleteAccountText?: string;
+  deleteAccountIcon?: React.ReactNode;
+  onHelpPress?: () => void;
+  onDeleteAccountPress?: () => void;
+};
+
+const isInvalidText = (val?: string | null): boolean =>
+  !val || val.trim() === '' || val.includes('undefined') || val.includes('Invalid');
+
+const renderIconWithColor = (icon: React.ReactNode, color: string): React.ReactNode => {
+  if (isValidElement(icon)) {
+    return cloneElement(icon as ReactElement<any>, { color });
+  }
+  return icon;
+};
+
+const getValidSectionItems = (items: AccountSectionItem[]): AccountSectionItem[] =>
+  items.filter((item) => (item.type === 'card' ? !isInvalidText(item.title) || !isInvalidText(item.subtitle) : true));
+
+export const Account: React.FC<AccountProps> = ({
+  title = 'Account',
+  userInfo,
+  renderUserInfo,
+  sections,
+  onBackPress,
+  theme,
+  isLoading,
+  avatarComponent,
+  userInfoTextStyle = {},
+  skeletonProps = {},
+  helpText = 'Need Help?',
+  clickableText = 'Click Here',
+  deleteAccountText = 'Delete Account',
+  deleteAccountIcon,
+  onHelpPress,
+  onDeleteAccountPress
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View style={[styles.container, { backgroundColor: appliedTheme.colors.background }]}>
+      <AppHeader onBackPress={onBackPress} title={title} theme={appliedTheme} />
+
+      <ScrollView
+        contentContainerStyle={[styles.content, { paddingBottom: insets.bottom + verticalScale(40) }]}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+      >
+        <UserSection
+          theme={appliedTheme}
+          userInfo={userInfo}
+          avatarComponent={avatarComponent}
+          isLoading={isLoading}
+          renderUserInfo={renderUserInfo}
+          skeletonProps={skeletonProps}
+          userInfoTextStyle={userInfoTextStyle}
+        />
+
+        {sections?.map(({ title: sectionTitle, items }) => {
+          const validItems = getValidSectionItems(items);
+          if (validItems.length === 0) return null;
+
+          return (
+            <View key={sectionTitle} style={styles.sectionBlock}>
+              <Text style={[styles.sectionTitle, { color: appliedTheme.colors.textSecondary }]}>{sectionTitle}</Text>
+
+              {validItems.map((item, index) =>
+                item.type === 'card' ? (
+                  <CardItemView key={`card-${index}`} {...item} theme={appliedTheme} />
+                ) : (
+                  <MenuItemView key={`row-${index}`} {...item} theme={appliedTheme} />
+                )
+              )}
+            </View>
+          );
+        })}
+
+        {(onDeleteAccountPress || helpText || clickableText) && (
+          <View style={styles.bottomBlock}>
+            {onDeleteAccountPress && (
+              <TextButton
+                onPress={onDeleteAccountPress}
+                style={{
+                  fontWeight: '500',
+                  color: appliedTheme.colors.error
+                }}
+                title={deleteAccountText}
+                underline
+                leftIcon={
+                  deleteAccountIcon ?? (
+                    <Trash2 size={18} color={appliedTheme.colors.error} style={{ marginRight: scale(4) }} />
+                  )
+                }
+              />
+            )}
+
+            {(helpText || clickableText) && (
+              <View style={styles.helpSubContainer}>
+                <Text style={[styles.helpText, { color: appliedTheme.colors.textSecondary }]}>{helpText}</Text>
+                {clickableText && (
+                  <TextButton
+                    onPress={() => onHelpPress?.()}
+                    style={{
+                      fontWeight: '500',
+                      color: appliedTheme.colors.primary
+                    }}
+                    title={clickableText}
+                    underline
+                  />
+                )}
+              </View>
+            )}
+          </View>
+        )}
+      </ScrollView>
+    </View>
+  );
+};
+
+const CardItemView = memo(({ title, subtitle, theme }: CardItem & { theme: ITheme }) => {
+  if (isInvalidText(title) && isInvalidText(subtitle)) return null;
+
+  return (
+    <View style={[styles.card, { backgroundColor: theme.colors.surfaceDisabled }]}>
+      {!isInvalidText(title) && <Text style={[styles.cardTitle, { color: theme.colors.textPrimary }]}>{title}</Text>}
+      {!isInvalidText(subtitle) && (
+        <Text style={[styles.cardSub, { color: theme.colors.textSecondary }]}>{subtitle}</Text>
+      )}
+    </View>
+  );
+});
+
+const MenuItemView = memo(({ label, leftIcon, showRightIcon, onPress, theme }: RowItem & { theme: ITheme }) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      activeOpacity={0.6}
+      style={[
+        styles.row,
+        {
+          backgroundColor: theme.colors.surfaceDisabled,
+          borderColor: theme.colors.border
+        }
+      ]}
+    >
+      <View style={styles.leftRow}>
+        {leftIcon && <View style={styles.menuIcon}>{renderIconWithColor(leftIcon, theme.colors.textPrimary)}</View>}
+        <Text style={[styles.rowText, { color: theme.colors.textPrimary }]}>{label}</Text>
+      </View>
+
+      {showRightIcon && <ChevronRight color={theme.colors.textSecondary} size={20} />}
+    </TouchableOpacity>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  content: { paddingHorizontal: moderateScale(16) },
+
+  sectionBlock: {
+    marginBottom: verticalScale(16)
+  },
+  sectionTitle: {
+    fontSize: moderateScale(12),
+    fontWeight: '500',
+    marginBottom: verticalScale(8),
+    textTransform: 'uppercase'
+  },
+
+  card: {
+    borderRadius: scale(8),
+    padding: moderateScale(16),
+    marginBottom: verticalScale(12)
+  },
+  cardTitle: {
+    fontSize: moderateScale(14),
+    fontWeight: '600',
+    marginBottom: verticalScale(4)
+  },
+  cardSub: {
+    fontSize: moderateScale(12)
+  },
+
+  row: {
+    paddingVertical: verticalScale(14),
+    paddingHorizontal: scale(16),
+    borderRadius: scale(8),
+    borderWidth: 1,
+    marginBottom: verticalScale(12),
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  leftRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexShrink: 1
+  },
+  menuIcon: {
+    marginRight: scale(8),
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  rowText: {
+    fontSize: moderateScale(14),
+    fontWeight: '500'
+  },
+
+  bottomBlock: {
+    marginTop: verticalScale(32),
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: verticalScale(8)
+  },
+  helpSubContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: scale(1)
+  },
+  helpText: {
+    fontSize: moderateScale(12)
+  }
+});

package/src/components/Account/index.ts

@@ -0,0 +1 @@
+export * from './Account';

package/src/components/Auth/ForgotPassword/ForgotPassword.tsx

@@ -0,0 +1,254 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 18 Jun 2025 at 10:45 AM
+ **/
+import React, { useCallback, useMemo, useState } from 'react';
+import { StyleSheet, View, Platform, Alert, type ViewStyle, type TextStyle } from 'react-native';
+import { useForm, Controller } from 'react-hook-form';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { Input } from '../../Input/Input';
+import { Button } from '../../Button';
+import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
+import { Logo } from '../../Logo/Logo';
+import { useTheme } from '../../../theme';
+import { useKeyboard } from '../../../hooks/useKeyboard';
+import HideKeyboard from '../../Keyboard/HideKeyboard';
+import BackBtn from '../../Button/BackBtn';
+import { Text } from '../../Text';
+import type { AppTheme } from '../../../theme/themes';
+
+type FormValues = {
+  email: string;
+};
+
+type TextConfig = {
+  emailLabel?: string;
+  emailPlaceholder?: string;
+  loadingSubmitBtnText?: string;
+  forgetPasswordButton?: string;
+  bottomInfoText?: string;
+};
+
+type ForgetPasswordProps = {
+  title?: string;
+  onSubmit?: (values: FormValues) => Promise<void>;
+  onTopBackBtnPress?: () => void;
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  formStyle?: ViewStyle;
+  inputStyle?: TextStyle;
+  inputContainerStyle?: ViewStyle;
+  topBackBtnStyle?: ViewStyle;
+  backgroundImage?: string;
+  logoUri?: string;
+  theme?: AppTheme;
+  loadingSubmitBtn?: boolean;
+  gradientEnabled?: boolean;
+  text?: TextConfig;
+  renderLogo?: () => React.ReactNode;
+  renderForgetPasswordHeader?: () => React.ReactNode;
+  renderSubmitButton?: (props: { onPress: () => void; disabled: boolean; loading: boolean }) => React.ReactNode;
+  renderTopBackBtn?: (props: { onPress: () => void }) => React.ReactNode;
+  renderBottomInfoText?: () => React.ReactNode;
+};
+
+const ForgetPassword: React.FC<ForgetPasswordProps> = ({
+  title = 'Forgot Password',
+  onSubmit,
+  onTopBackBtnPress,
+  containerStyle,
+  titleStyle,
+  formStyle,
+  inputStyle,
+  inputContainerStyle,
+  topBackBtnStyle,
+  loadingSubmitBtn = false,
+  backgroundImage,
+  logoUri,
+  theme,
+  gradientEnabled = true,
+  text = {
+    emailLabel: 'Email',
+    emailPlaceholder: 'Enter your email',
+    loadingSubmitBtnText: 'Processing...',
+    forgetPasswordButton: 'Send Reset Link'
+  },
+  renderLogo,
+  renderForgetPasswordHeader,
+  renderSubmitButton,
+  renderTopBackBtn,
+  renderBottomInfoText
+}) => {
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isValid, touchedFields }
+  } = useForm<FormValues>({
+    defaultValues: { email: '' },
+    mode: 'onChange'
+  });
+
+  const { theme: appliedTheme } = useTheme(theme);
+  const { isKeyboardOpen } = useKeyboard();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleFormSubmit = useCallback(
+    async (data: FormValues) => {
+      if (!onSubmit) return;
+      setIsLoading(true);
+      try {
+        await onSubmit(data);
+      } catch (error) {
+        console.error('Form submission error:', error);
+        Alert.alert('Error', 'Failed to process request. Please try again.');
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [onSubmit]
+  );
+
+  const shouldRender = useMemo(
+    () => (condition?: boolean | unknown) => typeof condition === 'function' || !!condition,
+    []
+  );
+
+  const isSubmitDisabled = loadingSubmitBtn || isLoading;
+
+  return (
+    <BackgroundLayout
+      gradientEnabled={gradientEnabled}
+      backgroundImage={backgroundImage}
+      gradientSplit={isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3}
+    >
+      <HideKeyboard>
+        <View style={[styles.container, containerStyle]}>
+          {/* Top Back Button */}
+          {shouldRender(renderTopBackBtn || onTopBackBtnPress) &&
+            (renderTopBackBtn ? (
+              renderTopBackBtn({ onPress: onTopBackBtnPress ?? (() => {}) })
+            ) : (
+              <BackBtn theme={appliedTheme} style={topBackBtnStyle} onPress={onTopBackBtnPress} />
+            ))}
+
+          <View style={styles.centerContent}>
+            {/* Logo */}
+            {renderLogo ? renderLogo() : logoUri ? <Logo logoUri={logoUri} /> : null}
+
+            {/* Title */}
+            {renderForgetPasswordHeader ? (
+              renderForgetPasswordHeader()
+            ) : (
+              <Text style={[styles.title, titleStyle]} accessibilityRole="header" testID="title">
+                {title}
+              </Text>
+            )}
+
+            {/* Form */}
+            <View style={[styles.form, formStyle]} testID="form">
+              <Controller
+                control={control}
+                name="email"
+                rules={{
+                  required: 'Email is required',
+                  pattern: {
+                    value: /^\S+@\S+\.\S+$/,
+                    message: 'Enter a valid email address'
+                  }
+                }}
+                render={({ field: { onChange, onBlur, value } }) => (
+                  <Input.One
+                    placeholder={text.emailPlaceholder || 'Enter your email'}
+                    label={text.emailLabel || 'Email'}
+                    value={value}
+                    onChangeText={(inputText) => {
+                      const sanitized = inputText.replace(/[^\w@.\-+]/g, '');
+                      onChange(sanitized);
+                    }}
+                    onBlur={onBlur}
+                    disabled={isSubmitDisabled}
+                    error={!!touchedFields.email && !!errors.email}
+                    errorMessage={errors.email?.message}
+                    inputStyle={inputStyle}
+                    containerStyle={inputContainerStyle}
+                    theme={appliedTheme}
+                    textContentType="emailAddress"
+                    autoCapitalize="none"
+                    keyboardType="email-address"
+                    autoCorrect={false}
+                    testID="email-input"
+                  />
+                )}
+              />
+
+              {renderSubmitButton ? (
+                renderSubmitButton({
+                  onPress: handleSubmit(handleFormSubmit),
+                  disabled: isSubmitDisabled || !isValid,
+                  loading: loadingSubmitBtn || isLoading
+                })
+              ) : (
+                <Button.Primary
+                  title={text.forgetPasswordButton || 'Continue'}
+                  disabled={isSubmitDisabled || !isValid}
+                  theme={appliedTheme}
+                  loading={loadingSubmitBtn || isLoading}
+                  loadingText={text.loadingSubmitBtnText || 'Please wait...'}
+                  onPress={handleSubmit(handleFormSubmit)}
+                />
+              )}
+            </View>
+
+            {/* Bottom Info Text */}
+            {!isKeyboardOpen && renderBottomInfoText ? (
+              renderBottomInfoText()
+            ) : text.bottomInfoText ? (
+              <Text style={styles.bottomInfo} accessibilityRole="text" testID="bottom-info-text">
+                {text.bottomInfoText}
+              </Text>
+            ) : null}
+          </View>
+        </View>
+      </HideKeyboard>
+    </BackgroundLayout>
+  );
+};
+
+export default React.memo(ForgetPassword);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    paddingHorizontal: scale(20),
+    paddingTop: verticalScale(24),
+    paddingBottom: verticalScale(32),
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  centerContent: {
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: verticalScale(16)
+  },
+  title: {
+    fontSize: scale(24),
+    fontWeight: '700',
+    marginTop: verticalScale(12),
+    marginBottom: verticalScale(20),
+    textAlign: 'center'
+  },
+  form: {
+    width: '100%',
+    gap: verticalScale(14),
+    marginTop: verticalScale(8)
+  },
+  bottomInfo: {
+    marginTop: verticalScale(15),
+    fontSize: scale(12),
+    fontWeight: '500',
+    textAlign: 'center',
+    opacity: 0.7
+  }
+});