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

package/src/components/Subscription/SubOne.tsx

@@ -0,0 +1,336 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 21 Jul 2025 at 04:55 PM
+ */
+
+import React, { memo, useCallback, useMemo } from 'react';
+import { View, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
+import Carousel from 'react-native-reanimated-carousel';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import LinearGradient from 'react-native-linear-gradient';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import { Text } from '../Text';
+import AppHeader from '../Headers/AppHeader';
+import { useTheme } from '../../theme';
+import Display from '../../utils/Display';
+import type { AppTheme } from '../../theme/themes';
+
+export type Plan = {
+  id: string;
+  title: string;
+  price: string;
+  duration: string;
+  platforms: string;
+  benefits?: string[];
+  isPopular?: boolean;
+};
+
+type SubscriptionSliderOneProps = {
+  theme?: AppTheme;
+  headerTitleAlign?: 'center' | 'left';
+  subscribeButtonText?: string;
+  onSubscribe?: (plan: Plan) => void;
+  subscribeLoadingId?: string | null;
+  plans: Plan[];
+  errorMessage?: string;
+  isLoading?: boolean;
+  onBackPress?: () => void;
+  header: {
+    topTitle: string;
+    topTitleAlign?: 'center' | 'left';
+    title: string;
+    subTitle: string;
+  };
+  footer: {
+    title: string;
+    subTitle: string;
+  };
+  extraContentText?: React.ReactNode;
+};
+const CAROUSEL_WIDTH = Display.fullWidth;
+const CAROUSEL_HEIGHT = verticalScale(CAROUSEL_WIDTH / 1.4);
+const SubscriptionSliderOne = ({
+  theme,
+  onSubscribe,
+  subscribeButtonText = 'Subscribe',
+  subscribeLoadingId,
+  plans,
+  errorMessage,
+  isLoading = false,
+  onBackPress = () => {},
+  header,
+  footer,
+  extraContentText
+}: SubscriptionSliderOneProps) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const colors = appliedTheme.colors;
+  const parsePrice = (price: string) => parseFloat(price.replace(/[^\d.]/g, '')) || 0;
+  const sortedPlans = useMemo(() => {
+    return [...plans].sort((a, b) => {
+      const aPopular = a?.isPopular ? 1 : 0;
+      const bPopular = b?.isPopular ? 1 : 0;
+
+      if (aPopular !== bPopular) {
+        return bPopular - aPopular;
+      }
+
+      if (aPopular === 1 && bPopular === 1) {
+        return parsePrice(b.price) - parsePrice(a.price);
+      }
+
+      return 0;
+    });
+  }, [plans]);
+  const placeholderData = useMemo(() => new Array(plans.length || 1).fill({}), [plans]);
+
+  const renderSkeleton = useCallback(
+    () => (
+      <Animated.View entering={FadeIn} exiting={FadeOut} style={styles.cardContainer}>
+        <SkeletonPlaceholder
+          borderRadius={20}
+          backgroundColor={colors.skeletonBaseColor}
+          highlightColor={colors.skeletonHighlightColor}
+        >
+          <View style={styles.card} />
+        </SkeletonPlaceholder>
+      </Animated.View>
+    ),
+    [colors.skeletonBaseColor, colors.skeletonHighlightColor]
+  );
+
+  const renderPlan = useCallback(
+    ({ item }: { item: Plan }) => (
+      <View style={styles.cardContainer}>
+        <LinearGradient
+          colors={colors.cardGradient}
+          start={{ x: 1, y: 0 }}
+          end={{ x: 0, y: 1.2 }}
+          locations={[0, 0.7, 1]}
+          style={[styles.card, { shadowColor: colors.primary }]}
+        >
+          {item?.isPopular && (
+            <View style={[styles.popularBadge, { backgroundColor: colors.onBackground }]}>
+              <Text style={[styles.popularText, { color: colors.onSecondary }]}>POPULAR</Text>
+            </View>
+          )}
+
+          <Text style={[styles.cardTitle, { color: colors.white }]}>{item.title}</Text>
+          <Text style={[styles.price, { color: colors.white }]}>{item.price}</Text>
+          <Text style={[styles.per, { color: colors.white }]}>{item.duration}</Text>
+          <Text style={[styles.platforms, { color: colors.white }]}>{item.platforms}</Text>
+          {!!item.benefits?.length && (
+            <View style={styles.benefitsContainer}>
+              {item.benefits.map((benefit, i) => (
+                <Text key={i} style={[styles.benefit, { color: colors.white }]}>
+                  • {benefit}
+                </Text>
+              ))}
+            </View>
+          )}
+          <TouchableOpacity
+            style={[styles.subscribeButton, { backgroundColor: colors.button }]}
+            onPress={() => onSubscribe?.(item)}
+            activeOpacity={0.8}
+            disabled={subscribeLoadingId === item.id}
+          >
+            {subscribeLoadingId === item.id ? (
+              <ActivityIndicator size="small" color={colors.black} />
+            ) : (
+              <Text style={[styles.subscribeText, { color: colors.black }]}>{subscribeButtonText}</Text>
+            )}
+          </TouchableOpacity>
+        </LinearGradient>
+      </View>
+    ),
+    [
+      colors.black,
+      colors.button,
+      colors.cardGradient,
+      colors.onBackground,
+      colors.onSecondary,
+      colors.primary,
+      colors.white,
+      onSubscribe,
+      subscribeButtonText,
+      subscribeLoadingId
+    ]
+  );
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <AppHeader
+        title={header.topTitle}
+        onBackPress={onBackPress}
+        titleAlign={header.topTitleAlign}
+        theme={appliedTheme}
+      />
+      <View style={styles.content}>
+        <Text style={[styles.heading]}>{header.title}</Text>
+        <Text style={[styles.subText, { color: colors.onSurfaceVariant }]}>{header.subTitle}</Text>
+
+        {errorMessage ? (
+          <Text style={[styles.errorMessage, { color: colors.error }]}>{errorMessage}</Text>
+        ) : (
+          <Carousel
+            width={CAROUSEL_WIDTH}
+            height={CAROUSEL_HEIGHT}
+            data={isLoading ? placeholderData : sortedPlans}
+            renderItem={isLoading ? renderSkeleton : renderPlan}
+            loop
+            autoPlay={false}
+            scrollAnimationDuration={500}
+            mode="parallax"
+            modeConfig={{
+              parallaxScrollingOffset: Display.fullWidth * 0.21,
+              parallaxAdjacentItemScale: 0.8
+            }}
+          />
+        )}
+
+        <Text style={[styles.info, { color: colors.onSurfaceVariant }]}>{footer.title}</Text>
+        <Text style={[styles.cancelText, { color: colors.onSurfaceVariant }]}>{footer.subTitle}</Text>
+
+        {extraContentText && (
+          <View style={styles.extraContentTextWrapper}>
+            {React.isValidElement(extraContentText) ? (
+              extraContentText
+            ) : (
+              <Text style={[styles.extraContentTextText, { color: colors.onSurfaceVariant }]}>{extraContentText}</Text>
+            )}
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default memo(SubscriptionSliderOne);
+
+namespace SubscriptionSliderOne {
+  export type Props = SubscriptionSliderOneProps;
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  content: { flex: 1, paddingTop: verticalScale(16) },
+  heading: {
+    fontSize: moderateScale(22),
+    fontWeight: '700',
+    textAlign: 'center',
+    marginBottom: verticalScale(12),
+    marginHorizontal: scale(16)
+  },
+  subText: {
+    textAlign: 'center',
+    fontSize: moderateScale(13),
+    fontWeight: '400',
+    marginBottom: verticalScale(12),
+    marginHorizontal: scale(16)
+  },
+  errorMessage: {
+    fontSize: moderateScale(14),
+    fontWeight: '600',
+    textAlign: 'center',
+    marginVertical: verticalScale(12)
+  },
+
+  cardContainer: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  card: {
+    position: 'relative',
+    width: Display.fullWidth * 0.95,
+    aspectRatio: 1,
+    borderRadius: scale(20),
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'center',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    elevation: 5
+  },
+  cardTitle: {
+    fontSize: moderateScale(18),
+    fontWeight: '700',
+    marginBottom: verticalScale(8)
+  },
+  price: {
+    fontSize: moderateScale(44),
+    fontWeight: 'bold',
+    marginBottom: verticalScale(4)
+  },
+  per: {
+    fontSize: moderateScale(14),
+    textTransform: 'capitalize',
+    marginBottom: verticalScale(6)
+  },
+  platforms: {
+    fontSize: moderateScale(14),
+    textTransform: 'capitalize',
+    textAlign: 'center',
+    marginBottom: verticalScale(8)
+  },
+  benefitsContainer: {
+    marginTop: verticalScale(8),
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    paddingHorizontal: scale(16)
+  },
+  benefit: {
+    fontSize: moderateScale(13)
+  },
+  subscribeButton: {
+    paddingVertical: verticalScale(10),
+    paddingHorizontal: scale(60),
+    borderRadius: scale(30),
+    alignItems: 'center',
+    marginTop: verticalScale(15)
+  },
+  subscribeText: {
+    fontSize: moderateScale(15),
+    fontWeight: '700'
+  },
+  info: {
+    fontSize: moderateScale(12),
+    textAlign: 'center',
+    fontWeight: '400',
+    marginVertical: verticalScale(8),
+    marginHorizontal: scale(16)
+  },
+  cancelText: {
+    fontSize: moderateScale(12),
+    textAlign: 'center',
+    fontWeight: '400',
+    marginBottom: verticalScale(16),
+    marginHorizontal: scale(16)
+  },
+  extraContentTextWrapper: {
+    marginTop: verticalScale(18),
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: scale(16)
+  },
+  extraContentTextText: {
+    fontSize: moderateScale(11),
+    marginHorizontal: scale(16),
+    fontWeight: '400',
+    textAlign: 'center'
+  },
+  popularBadge: {
+    position: 'absolute',
+    top: verticalScale(12),
+    right: scale(12),
+    paddingHorizontal: scale(10),
+    paddingVertical: verticalScale(4),
+    borderRadius: scale(12),
+    zIndex: 10
+  },
+  popularText: {
+    fontSize: moderateScale(13),
+    textTransform: 'uppercase',
+    fontWeight: '700'
+  }
+});

package/src/components/Subscription/index.ts

@@ -0,0 +1,12 @@
+/**
+ * @author Ashok Desai
+ * @lastModified jul 10 Jul 2025 at 6:40 PM
+ */
+
+import SubscriptionOne from './SubOne';
+
+const Subscription = {
+  One: SubscriptionOne
+};
+
+export { Subscription };

package/src/components/TabBar/One.tsx

@@ -0,0 +1,199 @@
+/**
+ * @author Ashok Desai
+ * @lastModified jun 23 Jun 2025 at 11:40 AM
+ */
+
+import React, { useState } from 'react';
+import { View, Pressable, Platform, StyleSheet } from 'react-native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { scale } from 'react-native-size-matters';
+import { useTheme } from '../../theme/';
+import { Text } from '../Text';
+import type { AppTheme, ITheme } from '../../theme/themes';
+
+type ITab = {
+  key: string;
+  name: string;
+  screenComponent: React.ComponentType<any>;
+  icon: React.ComponentType<{
+    width: number;
+    height: number;
+    color: string;
+  }>;
+};
+
+export type TabBarOneProps = {
+  tabs: ITab[];
+  onTabPress?: (key: string) => void;
+  theme?: AppTheme;
+  renderIcon?: ({
+    icon,
+    color,
+    size
+  }: {
+    icon: React.ComponentType<{ width: number; height: number; color: string }>;
+    color: string;
+    size: number;
+  }) => React.ReactNode;
+};
+
+const Tab = createBottomTabNavigator();
+type TabBarButtonProps = {
+  onPress?: (e: any) => void;
+  tab: ITab;
+  isActive: boolean;
+  appliedTheme: ITheme;
+  setActiveTab: (key: string) => void;
+  onTabPress?: (key: string) => void;
+  renderIcon?: ({
+    icon,
+    color,
+    size
+  }: {
+    icon: React.ComponentType<{ width: number; height: number; color: string }>;
+    color: string;
+    size: number;
+  }) => React.ReactNode;
+};
+
+const TabBarButton: React.FC<TabBarButtonProps> = ({
+  onPress,
+  tab,
+  isActive,
+  appliedTheme,
+  setActiveTab,
+  onTabPress,
+  renderIcon
+}) => {
+  const color = isActive ? appliedTheme.colors.primary : appliedTheme.colors.textPrimary;
+
+  const iconSize = scale(24);
+
+  const icon = renderIcon ? (
+    renderIcon({ icon: tab.icon, color, size: iconSize })
+  ) : (
+    <tab.icon width={iconSize} height={iconSize} color={color} />
+  );
+
+  return (
+    <View style={styles.buttonWrapper}>
+      <Pressable
+        onPress={(e) => {
+          onPress?.(e);
+          setActiveTab(tab.key);
+          onTabPress?.(tab.key);
+        }}
+        android_ripple={{
+          color: appliedTheme.dark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.08)',
+          borderless: true,
+          radius: scale(35)
+        }}
+        style={styles.iconWithLabel}
+        accessibilityRole="button"
+        accessibilityLabel={`Tab: ${tab.name}`}
+      >
+        <View style={{ marginBottom: scale(3) }}>{icon}</View>
+        <Text style={[styles.label]} color={color} numberOfLines={1}>
+          {tab.name}
+        </Text>
+      </Pressable>
+    </View>
+  );
+};
+
+const TabBarOne = ({ tabs, theme, onTabPress, renderIcon }: TabBarOneProps) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const [activeTab, setActiveTab] = useState(tabs[0]?.key);
+
+  return (
+    <Tab.Navigator
+      screenListeners={{
+        state: (e) => {
+          const index = e.data.state.index;
+          const currentKey = tabs[index]?.key;
+          if (currentKey) setActiveTab(currentKey);
+        }
+      }}
+      screenOptions={{
+        headerShown: false,
+        tabBarShowLabel: false,
+        tabBarStyle: {
+          position: 'absolute',
+          bottom: 0,
+          height: Platform.OS === 'ios' ? scale(95) : scale(80),
+          backgroundColor: appliedTheme.colors.background + '80',
+          borderTopColor: appliedTheme.colors.border,
+          borderTopWidth: 0.5,
+          paddingBottom: Platform.OS === 'ios' ? scale(28) : scale(18),
+          paddingTop: scale(15),
+          zIndex: 100
+        }
+      }}
+    >
+      {tabs.map((tab) => (
+        <Tab.Screen
+          key={tab.key}
+          name={tab.key}
+          component={tab.screenComponent}
+          options={{
+            tabBarButton: (props) =>
+              TabBarButtonWrapperWithProps({
+                ...props,
+                tab,
+                isActive: tab.key === activeTab,
+                appliedTheme: appliedTheme,
+                setActiveTab: setActiveTab,
+                onTabPress: onTabPress,
+                renderIcon: renderIcon
+              })
+          }}
+        />
+      ))}
+    </Tab.Navigator>
+  );
+};
+
+type TabBarButtonWrapperProps = {
+  onPress?: (e: any) => void;
+  tab: ITab;
+  isActive: boolean;
+  appliedTheme: ITheme;
+  setActiveTab: (key: string) => void;
+  onTabPress?: (key: string) => void;
+  renderIcon?: ({
+    icon,
+    color,
+    size
+  }: {
+    icon: React.ComponentType<{ width: number; height: number; color: string }>;
+    color: string;
+    size: number;
+  }) => React.ReactNode;
+};
+
+const TabBarButtonWrapper: React.FC<TabBarButtonWrapperProps> = (props) => {
+  return <TabBarButton {...props} />;
+};
+
+function TabBarButtonWrapperWithProps(props: TabBarButtonWrapperProps) {
+  return <TabBarButtonWrapper {...props} />;
+}
+export default TabBarOne;
+
+const styles = StyleSheet.create({
+  buttonWrapper: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  iconWithLabel: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: scale(8)
+  },
+  label: {
+    marginTop: scale(4),
+    fontSize: scale(11),
+    textAlign: 'center'
+  }
+});

package/src/components/TabBar/Three.tsx

@@ -0,0 +1,134 @@
+/**
+ * @author Ashok Desai
+ * @lastModified Jun 24, 2025 at 2:30 PM
+ */
+import React from 'react';
+import { View, Pressable, StyleSheet, Platform } from 'react-native';
+import { BlurView } from '@react-native-community/blur';
+import { createBottomTabNavigator, type BottomTabBarProps } from '@react-navigation/bottom-tabs';
+import { scale } from 'react-native-size-matters';
+import { useTheme } from '@zezosoft/zezo-ott-react-native-ui-kit';
+import type { AppTheme, ITheme } from '../../theme/themes';
+
+export interface ITab {
+  key: string;
+  name: string;
+  screenComponent: React.ComponentType<any>;
+  icon: React.ComponentType<{
+    width: number;
+    height: number;
+    color: string;
+  }>;
+}
+
+export interface TabBarThreeProps {
+  tabs: ITab[];
+  theme?: AppTheme;
+  onTabPress?: (key: string) => void;
+}
+
+const Tab = createBottomTabNavigator();
+const ICON_BOX_SIZE = scale(52);
+const BOTTOM_BAR_HEIGHT = scale(70);
+
+const CustomTabBar: React.FC<
+  BottomTabBarProps & {
+    tabs: ITab[];
+    onTabPress?: (key: string) => void;
+    theme: ITheme;
+  }
+> = ({ state, navigation, tabs, onTabPress, theme }) => (
+  <View style={styles.bottomWrapper}>
+    <View style={[styles.bottomBox, { borderColor: theme.colors.border }]}>
+      {Platform.OS !== 'web' && (
+        <BlurView
+          style={StyleSheet.absoluteFill}
+          blurAmount={25}
+          reducedTransparencyFallbackColor={theme.colors.backdrop}
+          blurType="light"
+        />
+      )}
+      <View style={styles.row}>
+        {tabs.map((tab, index) => {
+          const isFocused = state.index === index;
+          const iconColor = isFocused ? theme.colors.buttonText : theme.colors.textPrimary;
+          const bgColor = isFocused ? theme.colors.button : theme.colors.blueBackground;
+          const isBorderCode = isFocused ? theme.colors.button : theme.colors.border;
+          return (
+            <Pressable
+              key={tab.key}
+              onPress={() => {
+                onTabPress?.(tab.key);
+                navigation.navigate(tab.key);
+              }}
+              style={[
+                styles.icon,
+                {
+                  backgroundColor: bgColor,
+                  borderColor: isBorderCode
+                }
+              ]}
+            >
+              <tab.icon width={scale(24)} height={scale(24)} color={iconColor} />
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  </View>
+);
+
+const renderTabBar =
+  (tabs: ITab[], onTabPress: ((key: string) => void) | undefined, theme: ITheme) => (props: BottomTabBarProps) => (
+    <CustomTabBar {...props} tabs={tabs} onTabPress={onTabPress} theme={theme} />
+  );
+
+const TabBarThree: React.FC<TabBarThreeProps> = ({ tabs, theme, onTabPress }) => {
+  const { theme: appliedTheme } = useTheme(theme);
+
+  return (
+    <Tab.Navigator screenOptions={{ headerShown: false }} tabBar={renderTabBar(tabs, onTabPress, appliedTheme)}>
+      {tabs.map((tab) => (
+        <Tab.Screen key={tab.key} name={tab.key} component={tab.screenComponent} />
+      ))}
+    </Tab.Navigator>
+  );
+};
+
+const styles = StyleSheet.create({
+  bottomWrapper: {
+    width: '100%',
+    paddingHorizontal: scale(16),
+    position: 'absolute',
+    bottom: scale(20)
+  },
+  bottomBox: {
+    width: '100%',
+    height: BOTTOM_BAR_HEIGHT,
+    borderRadius: scale(40),
+    overflow: 'hidden',
+    borderWidth: Platform.select({ ios: scale(1), android: scale(1.5) }),
+    backgroundColor: 'transparent',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    paddingHorizontal: scale(10)
+  },
+  icon: {
+    width: ICON_BOX_SIZE,
+    height: ICON_BOX_SIZE,
+    borderRadius: ICON_BOX_SIZE / 2,
+    borderWidth: Platform.select({ ios: scale(1), android: scale(1.5) }),
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderStyle: 'solid',
+    zIndex: 1
+  }
+});
+
+export default TabBarThree;