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

package/src/components/Auth/SplashScreen/components/SplashVideo/SplashVideo.tsx

@@ -0,0 +1,103 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 09 Jun 2025 at 04:29 PM
+ */
+import React, { useRef, useMemo, useCallback } from 'react';
+import Video, { type VideoRef } from 'react-native-video';
+import Display from '../../../../../utils/Display';
+
+interface IProps {
+  width: number;
+  height: number;
+  source: string;
+  fullscreen: boolean;
+  resizeMode?: 'cover' | 'contain' | 'stretch' | 'none';
+  onEnd?: () => void;
+  onLoadStart?: () => void;
+  onLoaded?: (data: any) => void;
+  onError?: (error: any) => void;
+}
+
+const SplashVideo: React.FC<IProps> = ({
+  fullscreen,
+  height,
+  source,
+  resizeMode = 'cover',
+  width,
+  onEnd,
+  onLoadStart,
+  onLoaded,
+  onError
+}) => {
+  const videoRef = useRef<VideoRef>(null);
+
+  // Memoize video style to prevent unnecessary recalculations
+  const videoStyle = useMemo(
+    () => ({
+      width: fullscreen ? Display.fullWidth : width,
+      height: fullscreen ? Display.fullHeight : height
+    }),
+    [fullscreen, width, height]
+  );
+
+  // Optimize event handlers with useCallback
+  const handleLoadStart = useCallback(() => {
+    onLoadStart?.();
+  }, [onLoadStart]);
+
+  const handleLoad = useCallback(
+    (data: any) => {
+      onLoaded?.(data);
+    },
+    [onLoaded]
+  );
+
+  const handleError = useCallback(
+    (e: any) => {
+      // More robust error handling
+      const error = e?.error?.message || e?.message || e?.error || e || 'Unknown video error';
+      console.error('Video playback error:', error);
+      onError?.(error);
+    },
+    [onError]
+  );
+  const resolveUri = (src?: string): string => {
+    if (!src) return '';
+    if (src.startsWith('http') || src.startsWith('https') || src.startsWith('file://')) return src;
+    return `file://${src}`;
+  };
+  return (
+    <Video
+      ref={videoRef}
+      source={{ uri: resolveUri(source) }}
+      style={videoStyle}
+      resizeMode={resizeMode}
+      paused={false}
+      onLoadStart={handleLoadStart}
+      onLoad={handleLoad}
+      onError={handleError}
+      onEnd={onEnd}
+      controlsStyles={{
+        hideForward: true,
+        hideDuration: true,
+        hideFullscreen: true,
+        hidePlayPause: true,
+        hideNavigationBarOnFullScreenMode: true,
+        hideNotificationBarOnFullScreenMode: true,
+        hideNext: true,
+        hidePosition: true,
+        hidePrevious: true,
+        hideRewind: true,
+        hideSeekBar: true,
+        hideSettingButton: true
+      }}
+      ignoreSilentSwitch="obey"
+      playInBackground={false}
+      playWhenInactive={false}
+      allowsExternalPlayback={false}
+      automaticallyWaitsToMinimizeStalling={true}
+    />
+  );
+};
+
+export default React.memo(SplashVideo);

package/src/components/Auth/index.ts

@@ -0,0 +1,22 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Fri 13 Jun 2025 at 11:11 AM
+ */
+
+import ForgotPassword from './ForgotPassword/ForgotPassword';
+import LoginWithEmail from './Login/LoginWithEmail';
+import LoginWithPhone from './Login/LoginWithPhone';
+import OTP from './OTP/OTP';
+import SignUp from './SignUp/SignUp';
+import { SplashScreen } from './SplashScreen/SplashScreen';
+
+const Auth = {
+  LoginWithEmail,
+  LoginWithPhone,
+  SignUp,
+  OTP,
+  ForgotPassword,
+  SplashScreen
+};
+
+export { Auth };

package/src/components/BackgroundLayout/BackgroundLayout.tsx

@@ -0,0 +1,136 @@
+import React, { useMemo, useCallback } from 'react';
+import { View, StyleSheet, ImageBackground, type ViewStyle, type ImageStyle } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { useInitSplashCacheSync } from '../../hooks/useInitSplashCacheSync';
+import type { ITheme } from '../../theme/themes';
+
+interface BackgroundLayoutProps {
+  children: React.ReactNode;
+  backgroundImage?: string | null;
+  backgroundColor?: string | null;
+  gradientSplitBackground?: number;
+  resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
+  innerContainerStyle?: ViewStyle;
+  theme: ITheme;
+  onImageError?: (error: Error) => void;
+}
+
+export const BackgroundLayout: React.FC<BackgroundLayoutProps> = (props) => {
+  const {
+    children,
+    backgroundImage: backgroundImageUri,
+    backgroundColor: bgColor,
+    gradientSplitBackground = 0.4,
+    resizeMode = 'cover',
+    innerContainerStyle,
+    onImageError,
+    theme
+  } = props;
+
+  const {
+    data: { localPathBackground }
+  } = useInitSplashCacheSync({
+    backgroundUrl: backgroundImageUri || undefined
+  });
+
+  const resolvedImageUri = useMemo(() => {
+    if (!backgroundImageUri) return undefined;
+    const rawPath = localPathBackground || backgroundImageUri;
+    const isRemoteUrl = rawPath.startsWith('http://') || rawPath.startsWith('https://');
+    return isRemoteUrl ? rawPath : `file://${rawPath}`;
+  }, [backgroundImageUri, localPathBackground]);
+
+  const containerStyle = useMemo(
+    () => [styles.container, { backgroundColor: bgColor ?? theme.colors.background }],
+    [bgColor, theme.colors.background]
+  );
+
+  const handleImageLoadError = useCallback(
+    (e: any) => {
+      console.warn('[BackgroundLayout] Image load failed:', e?.nativeEvent?.error);
+      onImageError?.(new Error('Background image failed to load'));
+    },
+    [onImageError]
+  );
+
+  const gradientLocations = useMemo(() => {
+    const gradientColors = theme.colors.backgroundLayoutGradient;
+    const count = gradientColors?.length ?? 0;
+    const baseSteps = [0, 0.3, 0.4, 1, 1];
+    const locations = [0, ...baseSteps.map((step) => Math.min(1, gradientSplitBackground + step))];
+
+    if (locations.length > count) {
+      return locations.slice(0, count);
+    }
+    if (locations.length < count) {
+      const last = locations[locations.length - 1] ?? 1;
+      return [...locations, ...Array(count - locations.length).fill(last)];
+    }
+
+    return locations;
+  }, [theme.colors.backgroundLayoutGradient, gradientSplitBackground]);
+
+  const renderChildren = (
+    <View style={[styles.innerContainer, innerContainerStyle, bgColor ? { backgroundColor: bgColor } : null]}>
+      {children}
+    </View>
+  );
+
+  const showBackground = Boolean(backgroundImageUri && resolvedImageUri);
+  const showGradient = showBackground;
+
+  if (showBackground) {
+    return (
+      <View style={containerStyle}>
+        <ImageBackground
+          source={{ uri: resolvedImageUri }}
+          resizeMode={resizeMode}
+          style={[styles.imageContainer, { backgroundColor: theme.colors.background }]}
+          imageStyle={[styles.imageStyle, { backgroundColor: theme.colors.background }]}
+          onError={handleImageLoadError}
+        >
+          {showGradient && (
+            <LinearGradient
+              colors={theme.colors.backgroundLayoutGradient}
+              locations={gradientLocations}
+              start={{ x: 0.5, y: 0 }}
+              end={{ x: 0.5, y: 1 }}
+              style={styles.gradientOverlay}
+            />
+          )}
+          {renderChildren}
+        </ImageBackground>
+      </View>
+    );
+  }
+
+  return <View style={containerStyle}>{renderChildren}</View>;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    height: '100%'
+  },
+  imageContainer: {
+    flex: 1,
+    width: '100%',
+    height: '100%'
+  },
+  imageStyle: {
+    height: '60%',
+    width: '100%',
+    alignSelf: 'flex-start'
+  } as ImageStyle,
+  gradientOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    pointerEvents: 'none'
+  },
+  innerContainer: {
+    flex: 1,
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});

package/src/components/BlogView/BlogView.tsx

@@ -0,0 +1,215 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 25 Jun 2025 at 11:30 AM
+ */
+
+import React from 'react';
+import { ScrollView, StyleSheet, View, type TextStyle, type ViewStyle } from 'react-native';
+import Markdown from 'react-native-markdown-display';
+import { Text } from '../Text';
+import { useTheme } from '../../theme/hook/useTheme';
+import AppHeader from '../Headers/AppHeader';
+import { scale, moderateScale } from 'react-native-size-matters';
+import type { AppTheme, ITheme } from '../../theme/themes';
+import { ActivityIndicator } from 'react-native-paper';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+type BlogViewProps = {
+  content: string;
+  containerStyle?: ViewStyle;
+  scrollable?: boolean;
+  emptyText?: string;
+  theme?: AppTheme;
+
+  // Header customization
+  headerTitle?: string;
+  onBackPress?: () => void;
+  onRightPress?: () => void;
+  headerComponent?: React.ReactNode;
+  renderHeader?: () => React.ReactNode;
+
+  // Custom content
+  renderContent?: () => React.ReactNode;
+  renderEmpty?: () => React.ReactNode;
+
+  isLoading?: boolean;
+};
+
+export const BlogView: React.FC<BlogViewProps> = ({
+  content,
+  containerStyle,
+  scrollable = true,
+  emptyText = 'No content available.',
+  theme,
+  headerTitle = 'Blog',
+  onBackPress = () => {},
+  onRightPress,
+  headerComponent,
+  renderHeader,
+  renderContent,
+  renderEmpty,
+  isLoading = false
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+
+  const renderFinalHeader = () => {
+    if (renderHeader) return renderHeader();
+    if (headerComponent) return headerComponent;
+    return (
+      <AppHeader
+        onBackPress={onBackPress}
+        onRightPress={onRightPress}
+        title={headerTitle}
+        titleAlign="left"
+        theme={appliedTheme}
+        titleStyle={{
+          ...styles.headerTitle,
+          color: appliedTheme.colors.onBackground
+        }}
+      />
+    );
+  };
+
+  const renderFinalContent = () => {
+    if (isLoading) {
+      return (
+        <View style={styles.fullCenter}>
+          <ActivityIndicator size="large" color={appliedTheme.colors.primary} />
+        </View>
+      );
+    }
+
+    if (renderContent) return renderContent();
+    if (content) {
+      return <Markdown style={getMarkdownStyles(appliedTheme)}>{content}</Markdown>;
+    }
+
+    if (renderEmpty) return renderEmpty();
+
+    return (
+      <View style={styles.center}>
+        <Text style={[styles.emptyText, { color: appliedTheme.colors.onSurfaceVariant }]}>{emptyText}</Text>
+      </View>
+    );
+  };
+
+  return (
+    <View style={[styles.flex, { backgroundColor: appliedTheme.colors.background }]}>
+      {renderFinalHeader()}
+      {scrollable ? (
+        <ScrollView
+          style={styles.flex}
+          contentContainerStyle={[styles.container, containerStyle, { paddingBottom: scale(40), flexGrow: 1 }]}
+          showsVerticalScrollIndicator={false}
+          keyboardShouldPersistTaps="handled"
+        >
+          {renderFinalContent()}
+        </ScrollView>
+      ) : (
+        <View style={[styles.container, containerStyle]}>{renderFinalContent()}</View>
+      )}
+    </View>
+  );
+};
+
+const getMarkdownStyles = (theme: ITheme): { [key: string]: TextStyle } => {
+  const baseColor = theme.colors.textPrimary;
+
+  return {
+    body: { color: baseColor, fontSize: moderateScale(14) },
+    text: { color: baseColor },
+    paragraph: { color: baseColor, marginBottom: scale(8) },
+    heading1: {
+      fontSize: RFValue(21),
+      fontWeight: 'bold',
+      color: baseColor,
+      marginBottom: scale(12)
+    },
+    heading2: {
+      fontSize: RFValue(19),
+      fontWeight: 'bold',
+      color: baseColor,
+      marginBottom: scale(10)
+    },
+    heading3: {
+      fontSize: RFValue(17),
+      fontWeight: 'bold',
+      color: baseColor,
+      marginBottom: scale(8)
+    },
+    strong: { fontWeight: 'bold', color: baseColor },
+    listItem: { color: baseColor, marginBottom: scale(6) },
+    bullet_list: { color: baseColor },
+    ordered_list: { color: baseColor },
+    link: { color: theme.colors.primary },
+    blockquote: {
+      backgroundColor: theme.dark ? theme.colors.surfaceVariant : theme.colors.surface,
+      color: theme.colors.onSurface,
+      borderLeftWidth: scale(1.5),
+      borderLeftColor: theme.colors.primary,
+      paddingHorizontal: scale(12),
+      borderRadius: scale(4),
+      marginVertical: scale(10),
+      fontStyle: 'italic',
+      fontSize: RFValue(15)
+    },
+    code_inline: {
+      backgroundColor: theme.colors.surfaceVariant,
+      color: baseColor,
+      fontFamily: 'monospace',
+      paddingHorizontal: scale(4),
+      borderRadius: scale(4)
+    },
+
+    code_block: {
+      backgroundColor: theme.colors.surfaceVariant,
+      color: baseColor,
+      fontFamily: 'monospace',
+      padding: scale(8),
+      borderRadius: scale(6)
+    },
+    fence: {
+      backgroundColor: theme.colors.surfaceVariant,
+      color: baseColor
+    },
+    hr: {
+      borderBottomColor: theme.colors.outline,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      marginVertical: scale(16)
+    }
+  };
+};
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1
+  },
+  container: {
+    padding: scale(16)
+  },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: scale(16)
+  },
+  fullCenter: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: scale(16)
+  },
+  emptyText: {
+    textAlign: 'center',
+    fontSize: RFValue(13)
+  },
+  headerTitle: {
+    fontSize: RFValue(15),
+    fontWeight: '600'
+  }
+});
+
+export namespace BlogView {
+  export type Props = BlogViewProps;
+  export type Content = Props['content'];
+}

package/src/components/BlogView/index.ts

@@ -0,0 +1,8 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 24 Jun 2025 at 11:11 PM
+ */
+
+import { BlogView } from './BlogView';
+
+export { BlogView };

package/src/components/Button/BackBtn.tsx

@@ -0,0 +1,83 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 02 Jul 2025 at 09:30 AM
+ */
+import React from 'react';
+import { TouchableOpacity, StyleSheet, Alert, Platform, type ViewStyle, type StyleProp } from 'react-native';
+import { ArrowLeft } from 'lucide-react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from '../../theme/hook/useTheme';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { BlurView } from '@react-native-community/blur';
+import type { AppTheme } from '../../theme/themes';
+
+type BackBtnProps = {
+  size?: number;
+  color?: string;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  theme?: AppTheme;
+  enableBlur?: boolean;
+};
+
+const BackBtn: React.FC<BackBtnProps> = ({ size = scale(24), color, onPress, style, theme, enableBlur = false }) => {
+  const insets = useSafeAreaInsets();
+  const { theme: appliedTheme } = useTheme(theme);
+
+  const handlePress = () => {
+    if (onPress) {
+      onPress();
+    } else {
+      Alert.alert('Back Action Not Provided', 'Please define the back action using onPress prop.');
+    }
+  };
+
+  const hasTopInStyle = style && StyleSheet.flatten(style).top !== undefined;
+
+  const calculatedTop = Platform.select({
+    ios: insets.top > 20 ? insets.top - verticalScale(5) : insets.top,
+    android: insets.top + verticalScale(5),
+    default: insets.top
+  });
+
+  const flattenedStyle = StyleSheet.flatten(style) || {};
+  const hasBackground = !!flattenedStyle.backgroundColor;
+
+  const shouldRenderBlur = enableBlur && hasBackground;
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      style={[styles.container, !hasTopInStyle && { top: calculatedTop }, style]}
+      onPress={handlePress}
+    >
+      {shouldRenderBlur && (
+        <BlurView
+          style={StyleSheet.absoluteFill}
+          blurType="light"
+          blurAmount={10}
+          reducedTransparencyFallbackColor={
+            (typeof flattenedStyle.backgroundColor === 'string' ? flattenedStyle.backgroundColor : undefined) ||
+            String(appliedTheme.colors.backdrop)
+          }
+        />
+      )}
+
+      <ArrowLeft size={size} color={color || appliedTheme.colors.textPrimary} />
+    </TouchableOpacity>
+  );
+};
+
+export default BackBtn;
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: scale(13),
+    padding: scale(6),
+    borderRadius: scale(100),
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden'
+  }
+});