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

package/src/components/Auth/index.ts

@@ -0,0 +1,20 @@
+/**
+ * @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';
+
+const Auth = {
+  LoginWithEmail,
+  LoginWithPhone,
+  SignUp,
+  OTP,
+  ForgotPassword
+};
+
+export { Auth };

package/src/components/BackgroundLayout/BackgroundLayout.tsx

@@ -0,0 +1,114 @@
+import React, { useMemo, useCallback } from 'react';
+import { View, StyleSheet, ImageBackground, type ViewStyle } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { useInitSplashCacheSync } from '../../hooks/useInitSplashCacheSync';
+import { useTheme } from '../../theme/ThemeProvider';
+
+interface BackgroundLayoutProps {
+  children: React.ReactNode;
+  backgroundImage?: string;
+  backgroundColor?: string;
+  gradientEnabled?: boolean;
+  gradientSplit?: number;
+  resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
+  innerContainerStyle?: ViewStyle;
+  onImageError?: (error: Error) => void;
+}
+
+export const BackgroundLayout: React.FC<BackgroundLayoutProps> = ({
+  children,
+  backgroundImage,
+  backgroundColor,
+  gradientEnabled = false,
+  gradientSplit = 0.3, // default: 30% transparent
+  resizeMode = 'cover',
+  innerContainerStyle,
+  onImageError
+}) => {
+  const { theme } = useTheme();
+  const {
+    data: { localPathBackground }
+  } = useInitSplashCacheSync({
+    backgroundUrl: backgroundImage
+  });
+
+  const bgImageSource = localPathBackground || backgroundImage;
+
+  const containerStyle = useMemo(
+    () => [styles.container, { backgroundColor: backgroundColor ?? theme?.colors?.background }],
+    [backgroundColor, theme]
+  );
+
+  const handleImageError = 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 colors = theme.colors.backgroundLayoutGradient;
+    const colorCount = colors?.length ?? 0;
+    const baseSteps = [0, 0.5, 0.7, 0.9, 1];
+    const locations = [0, ...baseSteps.map((step) => Math.min(1, gradientSplit + step))];
+
+    if (locations.length > colorCount) {
+      return locations.slice(0, colorCount);
+    } else if (locations.length < colorCount) {
+      const last = locations[locations.length - 1] ?? 1;
+      return [...locations, ...Array(colorCount - locations.length).fill(last)];
+    }
+    return locations;
+  }, [theme.colors.backgroundLayoutGradient, gradientSplit]);
+
+  return (
+    <View style={containerStyle}>
+      {backgroundImage && bgImageSource ? (
+        <ImageBackground
+          source={{
+            uri: bgImageSource.startsWith('http') ? bgImageSource : `file://${bgImageSource}`
+          }}
+          resizeMode={resizeMode}
+          style={styles.flex}
+          onError={handleImageError}
+        >
+          {gradientEnabled && (
+            <LinearGradient
+              colors={theme.colors.backgroundLayoutGradient}
+              locations={gradientLocations}
+              start={{ x: 0.5, y: 0 }}
+              end={{ x: 0.5, y: 1 }}
+              style={styles.gradient}
+            />
+          )}
+          <View style={[styles.innerContainer, innerContainerStyle]}>{children}</View>
+        </ImageBackground>
+      ) : (
+        <View style={[styles.innerContainer, innerContainerStyle]}>{children}</View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    height: '100%'
+  },
+  flex: {
+    flex: 1,
+    width: '100%',
+    height: '100%'
+  },
+  gradient: {
+    ...StyleSheet.absoluteFillObject,
+    pointerEvents: 'none'
+  },
+  innerContainer: {
+    flex: 1,
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});

package/src/components/BlogView/BlogView.tsx

@@ -0,0 +1,195 @@
+/**
+ * @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';
+import AppHeader from '../Headers/AppHeader';
+import { scale, moderateScale } from 'react-native-size-matters';
+import type { AppTheme, ITheme } from '../../theme/themes';
+
+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;
+};
+
+export const BlogView: React.FC<BlogViewProps> = ({
+  content,
+  containerStyle,
+  scrollable = true,
+  emptyText = 'No content available.',
+  theme,
+  headerTitle = 'Blog',
+  onBackPress = () => {},
+  onRightPress,
+  headerComponent,
+  renderHeader,
+  renderContent,
+  renderEmpty
+}) => {
+  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 (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) }]}
+          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: scale(22),
+      fontWeight: 'bold',
+      color: baseColor,
+      marginBottom: scale(12)
+    },
+    heading2: {
+      fontSize: scale(20),
+      fontWeight: 'bold',
+      color: baseColor,
+      marginBottom: scale(10)
+    },
+    heading3: {
+      fontSize: scale(18),
+      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: moderateScale(16)
+    },
+    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)
+  },
+  emptyText: {
+    textAlign: 'center',
+    fontSize: moderateScale(14)
+  },
+  headerTitle: {
+    fontSize: moderateScale(16),
+    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';
+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'
+  }
+});

package/src/components/Button/MenuBtn.tsx

@@ -0,0 +1,193 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 02 Jul 2025 at 12:35 PM
+ */
+
+import React, { useState, useMemo, useCallback, useRef } from 'react';
+import {
+  TouchableOpacity,
+  View,
+  StyleSheet,
+  Modal,
+  Pressable,
+  Text,
+  Platform,
+  findNodeHandle,
+  UIManager,
+  StatusBar,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native';
+import { Ellipsis } from 'lucide-react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { BlurView } from '@react-native-community/blur';
+import { useTheme } from '../../theme';
+import { scale, verticalScale } from 'react-native-size-matters';
+import type { AppTheme } from '../../theme/themes';
+
+type MenuAction = {
+  label: string;
+  icon: React.ComponentType<{ size?: number; color?: string }>;
+  onPress: () => void;
+};
+
+type MenuBtnProps = {
+  actions: MenuAction[];
+  theme?: AppTheme;
+  style?: StyleProp<ViewStyle>;
+  enableBlur?: boolean;
+};
+
+const MenuBtn: React.FC<MenuBtnProps> = ({ actions, theme, style, enableBlur = false }) => {
+  const insets = useSafeAreaInsets();
+  const { theme: appliedTheme } = useTheme(theme);
+  const [visible, setVisible] = useState(false);
+  const [menuPosition, setMenuPosition] = useState<{ top: number; right: number }>({ top: 0, right: scale(13) });
+
+  const btnRef = useRef(null);
+
+  const flattenedStyle = useMemo(() => StyleSheet.flatten(style) || {}, [style]);
+  const shouldRenderBlur = useMemo(
+    () => enableBlur && !!flattenedStyle.backgroundColor,
+    [enableBlur, flattenedStyle.backgroundColor]
+  );
+
+  const openMenu = useCallback(() => {
+    const handle = findNodeHandle(btnRef.current);
+    if (handle) {
+      UIManager.measureInWindow(handle, (_x, y, _w, _h) => {
+        const extraOffset = Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) - verticalScale(2) : 0;
+        setMenuPosition({ top: y + verticalScale(32) + extraOffset, right: scale(13) });
+        setVisible(true);
+      });
+    } else {
+      setVisible(true);
+    }
+  }, []);
+
+  const closeMenu = useCallback(() => setVisible(false), []);
+  const memoizedActions = useMemo(() => actions, [actions]);
+
+  return (
+    <>
+      <TouchableOpacity
+        ref={btnRef}
+        activeOpacity={0.7}
+        style={[styles.container, { top: insets.top + verticalScale(5) }, style]}
+        onPress={openMenu}
+      >
+        {shouldRenderBlur && Platform.OS === 'ios' ? (
+          <BlurView
+            style={StyleSheet.absoluteFill}
+            blurType="light"
+            blurAmount={10}
+            reducedTransparencyFallbackColor={String(flattenedStyle.backgroundColor || appliedTheme.colors.backdrop)}
+          />
+        ) : (
+          <View
+            style={[
+              StyleSheet.absoluteFill,
+              { backgroundColor: flattenedStyle.backgroundColor || appliedTheme.colors.backdrop }
+            ]}
+          />
+        )}
+        <Ellipsis size={scale(20)} color={appliedTheme.colors.textPrimary} />
+      </TouchableOpacity>
+
+      <Modal
+        transparent
+        visible={visible}
+        animationType="fade"
+        onRequestClose={closeMenu}
+        hardwareAccelerated
+        presentationStyle="overFullScreen"
+        statusBarTranslucent
+      >
+        <Pressable style={styles.modalRoot} onPress={closeMenu}>
+          <Pressable
+            onPress={() => {}}
+            style={[
+              styles.menuBox,
+              {
+                position: 'absolute',
+                top: menuPosition.top,
+                right: menuPosition.right,
+                backgroundColor: appliedTheme.colors.surface
+              }
+            ]}
+          >
+            {memoizedActions.map((action, index) => (
+              <Pressable
+                key={`${action.label}-${index}`}
+                onPress={() => {
+                  closeMenu();
+                  try {
+                    action.onPress();
+                  } catch (error) {
+                    console.error('Action failed:', error);
+                  }
+                }}
+                style={({ pressed }) => [
+                  styles.menuItem,
+                  {
+                    backgroundColor: pressed ? appliedTheme.colors.surfaceVariant : 'transparent'
+                  }
+                ]}
+              >
+                {action.icon && (
+                  <View style={styles.iconBox}>
+                    <action.icon size={scale(18)} color={appliedTheme.colors.textPrimary} />
+                  </View>
+                )}
+                <Text style={[styles.label, { color: appliedTheme.colors.textPrimary }]}>{action.label}</Text>
+              </Pressable>
+            ))}
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </>
+  );
+};
+
+export default React.memo(MenuBtn);
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    right: scale(13),
+    padding: scale(6),
+    borderRadius: scale(100),
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+    zIndex: 4
+  },
+  modalRoot: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.2)'
+  },
+  menuBox: {
+    borderRadius: scale(6),
+    elevation: 5,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+    minWidth: scale(150),
+    paddingVertical: verticalScale(2)
+  },
+  menuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: verticalScale(8),
+    paddingHorizontal: scale(10),
+    borderRadius: scale(5)
+  },
+  iconBox: {
+    marginRight: scale(8)
+  },
+  label: {
+    fontSize: scale(13),
+    includeFontPadding: false
+  }
+});

package/src/components/Button/PrimaryBtn.tsx

@@ -0,0 +1,88 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 17 Jun 2025 at 10:45 AM
+ */
+
+import React from 'react';
+import {
+  TouchableOpacity,
+  ActivityIndicator,
+  StyleSheet,
+  View,
+  type GestureResponderEvent,
+  type ViewStyle,
+  type TextStyle
+} from 'react-native';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { useTheme } from '../../theme/ThemeProvider';
+import { Text } from '../Text';
+import type { AppTheme } from '../../theme/themes';
+
+type PrimaryBtnProps = {
+  title: string;
+  onPress?: (event: GestureResponderEvent) => void;
+  loading?: boolean;
+  loadingText?: string;
+  disabled?: boolean;
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  theme?: AppTheme;
+};
+
+export const PrimaryBtn: React.FC<PrimaryBtnProps> = ({
+  title,
+  onPress,
+  loading = false,
+  loadingText = 'Loading...',
+  disabled = false,
+  containerStyle,
+  titleStyle,
+  theme
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const backgroundColor = disabled || loading ? appliedTheme.colors?.buttonDisabled : appliedTheme.colors?.button;
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={disabled || loading}
+      activeOpacity={0.8}
+      style={[styles.button, { backgroundColor }, containerStyle]}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: disabled || loading }}
+    >
+      {loading ? (
+        <View style={styles.row}>
+          <ActivityIndicator color={appliedTheme.colors.buttonText} style={{ marginRight: scale(8) }} />
+          <Text style={[styles.text, { color: appliedTheme.colors.buttonText, opacity: 0.75 }, titleStyle]}>
+            {loadingText}
+          </Text>
+        </View>
+      ) : (
+        <Text style={[styles.text, { color: appliedTheme.colors.buttonText }, titleStyle]}>{title}</Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    width: '100%',
+    alignSelf: 'stretch',
+    paddingVertical: verticalScale(12),
+    paddingHorizontal: scale(16),
+    borderRadius: scale(6),
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  text: {
+    textAlign: 'center',
+    fontSize: scale(16),
+    fontWeight: '600'
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});