@zezosoft/zezo-ott-react-native-ui-kit 1.1.3 → 1.1.6

package/src/components/Account/Account.tsx

@@ -1,367 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Mon 21 Jul 2025 at 12:35 PM
- */
-
-import {
-  View,
-  StyleSheet,
-  ScrollView,
-  TouchableOpacity,
-  type TextStyle,
-} from 'react-native';
-import { ChevronRight, Trash2 } from 'lucide-react-native';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-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 { ThemeOverride, ITheme } from '../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { cloneElement, isValidElement, memo, type ReactElement } from 'react';
-
-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?: ThemeOverride;
-  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 } = useInternalTheme(theme);
-  const insets = useSafeAreaInsets();
-
-  return (
-    <View
-      style={[
-        styles.container,
-        { backgroundColor: appliedTheme.colors.background },
-      ]}
-    >
-      <AppHeader onBackPress={onBackPress} title={title} theme={theme} />
-
-      <ScrollView
-        contentContainerStyle={[
-          styles.content,
-          { paddingBottom: verticalScale(100) + insets.bottom },
-        ]}
-        showsVerticalScrollIndicator={false}
-        keyboardShouldPersistTaps="handled"
-      >
-        <UserSection
-          theme={theme}
-          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: RFValue(11),
-    fontWeight: '500',
-    marginBottom: verticalScale(8),
-    textTransform: 'uppercase',
-  },
-
-  card: {
-    borderRadius: scale(8),
-    padding: moderateScale(16),
-    marginBottom: verticalScale(12),
-  },
-  cardTitle: {
-    fontSize: RFValue(12),
-    fontWeight: '600',
-    marginBottom: verticalScale(4),
-  },
-  cardSub: {
-    fontSize: RFValue(10),
-  },
-
-  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: RFValue(12),
-    fontWeight: '500',
-  },
-
-  bottomBlock: {
-    marginTop: verticalScale(32),
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: verticalScale(8),
-  },
-  helpSubContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: scale(1),
-  },
-  helpText: {
-    fontSize: RFValue(10),
-  },
-});

package/src/components/Account/index.ts

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

package/src/components/Alert/AlertDialog.tsx

@@ -1,247 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Sat 18 Oct 2025 at 06:45 PM
- */
-import React, { useEffect, useRef } from 'react';
-import {
-  View,
-  TouchableOpacity,
-  StyleSheet,
-  Dimensions,
-  Modal,
-  Animated,
-  TouchableWithoutFeedback,
-} from 'react-native';
-import { Text } from '../Text';
-import { X } from 'lucide-react-native';
-import LottieView from 'lottie-react-native';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import type { ThemeOverride } from '../../theme/themes';
-import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { Button } from '../Button';
-
-const { width } = Dimensions.get('window');
-
-export interface AlertDialogProps {
-  visible: boolean;
-  type: 'success' | 'pending' | 'failed';
-  title: string;
-  buttonText?: string;
-  onPressButton?: () => void;
-  onClose?: () => void;
-  theme?: ThemeOverride;
-}
-
-export const AlertDialog: React.FC<AlertDialogProps> = ({
-  visible,
-  type = 'success',
-  title,
-  buttonText,
-  onPressButton,
-  onClose,
-  theme,
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  const fadeAnim = useRef(new Animated.Value(0)).current;
-  const scaleAnim = useRef(new Animated.Value(0.85)).current;
-
-  useEffect(() => {
-    if (visible) {
-      Animated.parallel([
-        Animated.timing(fadeAnim, {
-          toValue: 1,
-          duration: 220,
-          useNativeDriver: true,
-        }),
-        Animated.spring(scaleAnim, {
-          toValue: 1,
-          friction: 7,
-          tension: 90,
-          useNativeDriver: true,
-        }),
-      ]).start();
-    } else {
-      Animated.parallel([
-        Animated.timing(fadeAnim, {
-          toValue: 0,
-          duration: 180,
-          useNativeDriver: true,
-        }),
-        Animated.timing(scaleAnim, {
-          toValue: 0.85,
-          duration: 180,
-          useNativeDriver: true,
-        }),
-      ]).start();
-    }
-  }, [fadeAnim, scaleAnim, visible]);
-
-  const animationMap = {
-    success: require('../../assets/animations/Successful.json'),
-    pending: require('../../assets/animations/Pending.json'),
-    failed: require('../../assets/animations/Failed.json'),
-  };
-
-  const defaultTitles = {
-    success: 'Account successfully created!',
-    pending: 'Please wait... Processing',
-    failed: 'Something went wrong!',
-  };
-
-  const defaultButtonText = {
-    success: 'Go to Home',
-    pending: 'Please Wait...',
-    failed: 'Try Again',
-  };
-
-  return (
-    <Modal
-      transparent
-      visible={visible}
-      animationType="none"
-      onRequestClose={onClose}
-    >
-      <Animated.View
-        style={[
-          styles.backdrop,
-          { backgroundColor: appliedTheme.colors.shadow },
-        ]}
-      >
-        <TouchableWithoutFeedback onPress={onClose}>
-          <View style={StyleSheet.absoluteFillObject} />
-        </TouchableWithoutFeedback>
-
-        <Animated.View
-          style={[
-            styles.centerContainer,
-            { opacity: fadeAnim, transform: [{ scale: scaleAnim }] },
-          ]}
-        >
-          <View
-            style={[
-              styles.dialogBox,
-              {
-                backgroundColor: appliedTheme.colors.surface,
-                shadowColor: appliedTheme.colors.shadow,
-              },
-            ]}
-          >
-            {/* Close Button */}
-            <TouchableOpacity
-              style={[
-                styles.closeButton,
-                { backgroundColor: appliedTheme.colors.background },
-              ]}
-              onPress={onClose}
-              activeOpacity={0.7}
-            >
-              <X
-                color={appliedTheme.colors.textPrimary}
-                size={scale(18)}
-                strokeWidth={2}
-              />
-            </TouchableOpacity>
-
-            {/* Content Wrapper */}
-            <View style={styles.contentWrapper}>
-              {/* Animation */}
-              <View style={styles.lottieStyle}>
-                <LottieView
-                  source={animationMap[type]}
-                  autoPlay
-                  loop={type === 'pending'}
-                  style={{ width: 500, height: 500, padding: 0 }}
-                />
-              </View>
-
-              {/* Title */}
-              <Text
-                style={[
-                  styles.titleText,
-                  { color: appliedTheme.colors.textPrimary },
-                ]}
-              >
-                {title || defaultTitles[type]}
-              </Text>
-            </View>
-
-            {/* Button fixed at bottom */}
-            <Button.Primary
-              title={buttonText || defaultButtonText[type]}
-              onPress={onPressButton}
-              disabled={type === 'pending'}
-              containerStyle={styles.bottomButton}
-            />
-          </View>
-        </Animated.View>
-      </Animated.View>
-    </Modal>
-  );
-};
-
-export default AlertDialog;
-const styles = StyleSheet.create({
-  backdrop: {
-    flex: 1,
-    zIndex: 10,
-    backgroundColor: 'rgba(0,0,0,0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    overflow: 'hidden',
-    paddingHorizontal: scale(15),
-  },
-  centerContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  dialogBox: {
-    width: width * 0.85,
-    borderRadius: moderateScale(16),
-    paddingTop: verticalScale(20),
-    paddingBottom: verticalScale(15),
-    paddingHorizontal: scale(20),
-    shadowOpacity: 0.25,
-    shadowRadius: moderateScale(8),
-    shadowOffset: { width: 0, height: 3 },
-    elevation: 8,
-    minHeight: verticalScale(250),
-    justifyContent: 'flex-start',
-  },
-  closeButton: {
-    position: 'absolute',
-    top: verticalScale(8),
-    right: scale(8),
-    width: scale(28),
-    height: scale(28),
-    borderRadius: scale(14),
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 10,
-    elevation: 6,
-  },
-  contentWrapper: {
-    alignItems: 'center',
-    marginBottom: verticalScale(50),
-  },
-  lottieStyle: {
-    width: scale(150),
-    height: scale(150),
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginBottom: verticalScale(10),
-  },
-  titleText: {
-    fontSize: RFValue(15),
-    fontWeight: '600',
-    textAlign: 'center',
-    lineHeight: RFValue(20),
-  },
-  bottomButton: {
-    position: 'absolute',
-    bottom: verticalScale(15),
-    left: scale(15),
-    right: scale(15),
-  },
-});