@zezosoft/zezo-ott-react-native-ui-kit 1.1.5 → 1.1.7

package/src/components/BackgroundLayout/BackgroundLayout.tsx

@@ -1,174 +0,0 @@
-import React, { useMemo, useCallback, memo } from 'react';
-import {
-  View,
-  StyleSheet,
-  ImageBackground,
-  type ViewStyle,
-  type ImageStyle,
-} from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import type { ThemeOverride } from '../../theme/themes';
-import { useSplashCache } from '../../hooks/useSplashCache';
-import { useInternalTheme } from '../../theme/hook';
-import { AppStatusBar } from '../common/AppStatusBar';
-
-interface BackgroundLayoutProps {
-  children: React.ReactNode;
-  backgroundImage?: string | null;
-  backgroundColor?: string | null;
-  gradientSplitBackground?: number;
-  resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
-  innerContainerStyle?: ViewStyle;
-  theme?: ThemeOverride;
-  onImageError?: (error: Error) => void;
-}
-
-const BackgroundLayoutComponent: React.FC<BackgroundLayoutProps> = (props) => {
-  const {
-    children,
-    backgroundImage: backgroundImageUri,
-    backgroundColor: bgColor,
-    gradientSplitBackground = 0.4,
-    resizeMode = 'cover',
-    innerContainerStyle,
-    onImageError,
-    theme: themeOverride,
-  } = props;
-
-  const { theme } = useInternalTheme(themeOverride);
-  const {
-    data: { backgroundPath: localPathBackground },
-  } = useSplashCache({
-    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 backgroundColor = useMemo(
-    () => bgColor ?? theme.colors.background,
-    [bgColor, theme.colors.background]
-  );
-
-  const containerStyle = useMemo(
-    () => [styles.container, { backgroundColor }],
-    [backgroundColor]
-  );
-
-  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 imageContainerStyle = useMemo(
-    () => [styles.imageContainer, { backgroundColor: theme.colors.background }],
-    [theme.colors.background]
-  );
-
-  const imageStyle = useMemo(
-    () => [styles.imageStyle, { backgroundColor: theme.colors.background }],
-    [theme.colors.background]
-  );
-
-  const innerContainerStyleMemo = useMemo(
-    () => [
-      styles.innerContainer,
-      innerContainerStyle,
-      bgColor ? { backgroundColor: bgColor } : null,
-    ],
-    [innerContainerStyle, bgColor]
-  );
-
-  const showBackground = Boolean(backgroundImageUri && resolvedImageUri);
-
-  if (showBackground) {
-    return (
-      <View style={containerStyle}>
-        <AppStatusBar theme={themeOverride} transparent />
-        <ImageBackground
-          source={{ uri: resolvedImageUri }}
-          resizeMode={resizeMode}
-          style={imageContainerStyle}
-          imageStyle={imageStyle}
-          onError={handleImageLoadError}
-        >
-          <LinearGradient
-            colors={theme.colors.backgroundLayoutGradient}
-            locations={gradientLocations}
-            start={{ x: 0.5, y: 0 }}
-            end={{ x: 0.5, y: 1 }}
-            style={styles.gradientOverlay}
-          />
-          <View style={innerContainerStyleMemo}>{children}</View>
-        </ImageBackground>
-      </View>
-    );
-  }
-
-  return (
-    <View style={containerStyle}>
-      <View style={innerContainerStyleMemo}>{children}</View>
-    </View>
-  );
-};
-
-export const BackgroundLayout = memo(BackgroundLayoutComponent);
-
-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/BackgroundLayout/BackgroundLayoutOne.tsx

@@ -1,56 +0,0 @@
-import React, { memo, useRef, useEffect } from 'react';
-import { View, StyleSheet, Animated, ImageBackground } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-
-const IMAGE_URL =
-  'https://res.cloudinary.com/dm4uaqlio/image/upload/v1704380994/869671_zohjp9.png';
-
-interface IProps {
-  children: React.ReactNode;
-}
-
-const BackgroundLayoutOne: React.FC<IProps> = ({ children }) => {
-  const fadeAnim = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 400,
-      useNativeDriver: true,
-    }).start();
-  }, [fadeAnim]);
-
-  return (
-    <View style={styles.root}>
-      <ImageBackground
-        source={{ uri: IMAGE_URL }}
-        resizeMode="cover"
-        style={StyleSheet.absoluteFillObject}
-      />
-
-      <Animated.View
-        style={[StyleSheet.absoluteFillObject, { opacity: fadeAnim }]}
-      >
-        <LinearGradient
-          colors={['rgba(0,0,0,0.85)', 'rgba(0,0,0,0.6)', 'rgba(0,0,0,0.85)']}
-          style={StyleSheet.absoluteFillObject}
-        />
-
-        <View style={styles.content}>{children}</View>
-      </Animated.View>
-    </View>
-  );
-};
-
-export default memo(BackgroundLayoutOne);
-
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    backgroundColor: '#000',
-  },
-  content: {
-    flex: 1,
-    width: '100%',
-  },
-});

package/src/components/BlogView/BlogView.tsx

@@ -1,276 +0,0 @@
-import React, { useMemo, useCallback } from 'react';
-import {
-  ScrollView,
-  StyleSheet,
-  View,
-  type TextStyle,
-  type ViewStyle,
-  ActivityIndicator,
-} from 'react-native';
-import Markdown from 'react-native-markdown-display';
-import { Text } from '../Text';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import AppHeader from '../Headers/AppHeader';
-import { scale, moderateScale } from 'react-native-size-matters';
-import type { ITheme, ThemeOverride } from '../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-
-type BlogViewProps = {
-  content: string;
-  containerStyle?: ViewStyle;
-  scrollable?: boolean;
-  emptyText?: string;
-  theme?: ThemeOverride;
-
-  // 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, isDarkMode } = useInternalTheme(theme);
-
-  // Memoize markdown styles
-  const markdownStyles = useMemo(
-    () => getMarkdownStyles(appliedTheme, isDarkMode),
-    [appliedTheme, isDarkMode]
-  );
-
-  // Memoize header title style
-  const headerTitleStyle = useMemo(
-    () => ({
-      ...styles.headerTitle,
-      color: appliedTheme.colors.onBackground,
-    }),
-    [appliedTheme.colors.onBackground]
-  );
-
-  // Memoize empty text style
-  const emptyTextStyle = useMemo(
-    () => [styles.emptyText, { color: appliedTheme.colors.onSurfaceVariant }],
-    [appliedTheme.colors.onSurfaceVariant]
-  );
-
-  // Memoize container style
-  const containerStyleMemo = useMemo(
-    () => [styles.flex, { backgroundColor: appliedTheme.colors.background }],
-    [appliedTheme.colors.background]
-  );
-
-  // Memoize scroll content style
-  const scrollContentStyle = useMemo(
-    () => [
-      styles.container,
-      containerStyle,
-      { paddingBottom: scale(40), flexGrow: 1 },
-    ],
-    [containerStyle]
-  );
-
-  const renderFinalHeader = useCallback(() => {
-    if (renderHeader) return renderHeader();
-    if (headerComponent) return headerComponent;
-    return (
-      <AppHeader
-        onBackPress={onBackPress}
-        onRightPress={onRightPress}
-        title={headerTitle}
-        titleAlign="left"
-        theme={theme}
-        titleStyle={headerTitleStyle}
-      />
-    );
-  }, [
-    renderHeader,
-    headerComponent,
-    onBackPress,
-    onRightPress,
-    headerTitle,
-    theme,
-    headerTitleStyle,
-  ]);
-
-  const renderFinalContent = useCallback(() => {
-    if (isLoading) {
-      return (
-        <View style={styles.fullCenter}>
-          <ActivityIndicator size="large" color={appliedTheme.colors.primary} />
-        </View>
-      );
-    }
-
-    if (renderContent) return renderContent();
-    if (content) {
-      return <Markdown style={markdownStyles}>{content}</Markdown>;
-    }
-
-    if (renderEmpty) return renderEmpty();
-
-    return (
-      <View style={styles.center}>
-        <Text style={emptyTextStyle}>{emptyText}</Text>
-      </View>
-    );
-  }, [
-    isLoading,
-    renderContent,
-    content,
-    markdownStyles,
-    renderEmpty,
-    emptyText,
-    emptyTextStyle,
-    appliedTheme.colors.primary,
-  ]);
-
-  return (
-    <View style={containerStyleMemo}>
-      {renderFinalHeader()}
-      {scrollable ? (
-        <ScrollView
-          style={styles.flex}
-          contentContainerStyle={scrollContentStyle}
-          showsVerticalScrollIndicator={false}
-          keyboardShouldPersistTaps="handled"
-        >
-          {renderFinalContent()}
-        </ScrollView>
-      ) : (
-        <View style={[styles.container, containerStyle]}>
-          {renderFinalContent()}
-        </View>
-      )}
-    </View>
-  );
-};
-
-export default React.memo(BlogView);
-
-const getMarkdownStyles = (
-  theme: ITheme,
-  isDarkMode: boolean
-): { [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: isDarkMode
-        ? 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

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

package/src/components/BlurView/BlurView.tsx

@@ -1,199 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Thu 06 Nov 2025 at 05:00 PM
- */
-
-import React from 'react';
-import { View, StyleSheet, type ViewStyle, type StyleProp } from 'react-native';
-
-/**
- * BlurView Props - Same as @react-native-community/blur
- */
-export interface BlurViewProps {
-  /** Style of the BlurView container */
-  style?: StyleProp<ViewStyle>;
-
-  /** The blur type (tint) - exactly matches community lib */
-  blurType?:
-    | 'dark'
-    | 'light'
-    | 'xlight'
-    | 'extraDark'
-    | 'regular'
-    | 'prominent'
-    | 'chromeMaterial'
-    | 'material'
-    | 'thickMaterial'
-    | 'thinMaterial'
-    | 'ultraThinMaterial'
-    | 'chromeMaterialDark'
-    | 'materialDark'
-    | 'thickMaterialDark'
-    | 'thinMaterialDark'
-    | 'ultraThinMaterialDark'
-    | 'chromeMaterialLight'
-    | 'materialLight'
-    | 'thickMaterialLight'
-    | 'thinMaterialLight'
-    | 'ultraThinMaterialLight';
-
-  /** The blur intensity amount (0-100) - exactly matches community lib */
-  blurAmount?: number;
-
-  /** Fallback color for reduced transparency - exactly matches community lib */
-  reducedTransparencyFallbackColor?: string;
-
-  /** iOS only: Overlay color - exactly matches community lib */
-  overlayColor?: string;
-
-  /** Android only: Downsample factor (higher = more blur but lower quality) */
-  downsampleFactor?: number;
-
-  /** Android only: Blur radius */
-  blurRadius?: number;
-
-  /** Child components */
-  children?: React.ReactNode;
-}
-
-/**
- * Custom BlurView - 100% Compatible with @react-native-community/blur
- *
- * ✅ Same API as @react-native-community/blur
- * ✅ Works on iOS, Android, and Web
- * ✅ Drop-in replacement - just change the import
- * 🚫 Simulates blur (no live backdrop) using semi-transparent layers
- *
- * @example
- * ```tsx
- * <BlurView
- *   style={styles.blur}
- *   blurType="light"
- *   blurAmount={10}
- *   reducedTransparencyFallbackColor="white"
- * />
- * ```
- */
-const BlurView: React.FC<BlurViewProps> = ({
-  style,
-  blurType = 'light',
-  blurAmount = 100,
-  reducedTransparencyFallbackColor,
-  overlayColor,
-  children,
-}) => {
-  // Clamp blur amount to 0-100 range (same as community lib)
-  const intensity = Math.max(0, Math.min(100, blurAmount));
-
-  // Get tint style based on blur type
-  const tintStyle = getBlurTintStyle(
-    blurType,
-    intensity,
-    reducedTransparencyFallbackColor,
-    overlayColor
-  );
-
-  // Platform-specific rendering
-  return (
-    <View style={[styles.container, style]}>
-      {/* Background blur layer */}
-      <View style={[StyleSheet.absoluteFillObject, tintStyle]} />
-
-      {/* Content layer */}
-      <View pointerEvents="box-none" style={styles.content}>
-        {children}
-      </View>
-    </View>
-  );
-};
-
-/**
- * Get blur tint style based on blurType
- * Matches the exact behavior of @react-native-community/blur
- */
-function getBlurTintStyle(
-  blurType: string,
-  intensity: number,
-  fallbackColor?: string,
-  overlayColor?: string
-): ViewStyle {
-  // If overlayColor is provided, use it (iOS behavior)
-  if (overlayColor) {
-    return { backgroundColor: overlayColor };
-  }
-
-  // Calculate opacity based on intensity (0-100)
-  // Higher intensity = more opaque = stronger blur effect
-  const opacity = Math.min(0.95, intensity / 100);
-  const lightOpacity = opacity * 0.7;
-  const darkOpacity = opacity * 0.8;
-
-  // Match exact blur types from @react-native-community/blur
-  switch (blurType) {
-    // Dark blur types
-    case 'dark':
-      return { backgroundColor: `rgba(0, 0, 0, ${darkOpacity})` };
-    case 'extraDark':
-      return {
-        backgroundColor: `rgba(0, 0, 0, ${Math.min(0.98, darkOpacity * 1.2)})`,
-      };
-    case 'materialDark':
-    case 'thickMaterialDark':
-    case 'chromeMaterialDark':
-      return { backgroundColor: `rgba(28, 28, 30, ${darkOpacity})` };
-    case 'thinMaterialDark':
-      return { backgroundColor: `rgba(28, 28, 30, ${darkOpacity * 0.7})` };
-    case 'ultraThinMaterialDark':
-      return { backgroundColor: `rgba(28, 28, 30, ${darkOpacity * 0.5})` };
-
-    // Light blur types
-    case 'light':
-      return {
-        backgroundColor:
-          fallbackColor || `rgba(255, 255, 255, ${lightOpacity})`,
-      };
-    case 'xlight':
-      return { backgroundColor: `rgba(255, 255, 255, ${lightOpacity * 0.6})` };
-    case 'materialLight':
-    case 'chromeMaterialLight':
-      return { backgroundColor: `rgba(255, 255, 255, ${lightOpacity})` };
-    case 'thickMaterialLight':
-      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity})` };
-    case 'thinMaterialLight':
-      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity * 0.7})` };
-    case 'ultraThinMaterialLight':
-      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity * 0.5})` };
-
-    // Regular/prominent types
-    case 'regular':
-    case 'prominent':
-      return { backgroundColor: `rgba(255, 255, 255, ${lightOpacity * 0.8})` };
-    case 'material':
-    case 'chromeMaterial':
-      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity})` };
-    case 'thickMaterial':
-      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity * 1.1})` };
-    case 'thinMaterial':
-      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity * 0.7})` };
-    case 'ultraThinMaterial':
-      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity * 0.5})` };
-
-    // Default
-    default:
-      return {
-        backgroundColor:
-          fallbackColor || `rgba(255, 255, 255, ${lightOpacity})`,
-      };
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    overflow: 'hidden',
-  },
-  content: {
-    flex: 1,
-  },
-});
-
-export default BlurView;