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

package/src/components/Search/index.ts

@@ -0,0 +1,16 @@
+/**
+ * @author Ashok Desai
+ * @lastModified jun 23 Jun 2025 at 11:40 AM
+ */
+
+import SearchOne from './One';
+
+import SearchCard from './components/SearchCard';
+
+export const Search = {
+  One: SearchOne,
+  Two: SearchCard
+};
+
+export type { SearchOneProps } from './One';
+export type { SearchCardProps } from './components/SearchCard';

package/src/components/Settings/AppSettings.tsx

@@ -0,0 +1,288 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 23 Jun 2025 at 11:22 AM
+ */
+
+import React, { useState, isValidElement, cloneElement, type FC, type ReactElement } from 'react';
+import { View, ScrollView, StyleSheet, Switch, TouchableOpacity, type ViewStyle, type TextStyle } from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { useTheme } from '../../theme/hook/useTheme';
+import DeviceInfo from 'react-native-device-info';
+import AppHeader from '../Headers/AppHeader';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import UserSection, { type UserInfo, type UserInfoTextStyle } from '../User/components/UserSection';
+import { Text } from '../Text';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import type { AppTheme } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+// ✅ Types
+interface ToggleMenuItem {
+  key: string;
+  icon?: React.ReactNode;
+  label: string;
+  isToggle: true;
+  toggleValue?: boolean;
+  onToggleChange?: (value: boolean) => void;
+}
+
+interface PressableMenuItem {
+  key: string;
+  icon?: React.ReactNode;
+  label: string;
+  isToggle?: false;
+  onPress: () => void;
+}
+
+type MenuItem = ToggleMenuItem | PressableMenuItem;
+
+interface MenuItemStyle {
+  container?: ViewStyle;
+  icon?: ViewStyle;
+  label?: TextStyle;
+}
+
+export type AppSettingsProps = {
+  title?: string;
+  titleAlign?: 'left' | 'center';
+  userInfo?: UserInfo;
+  menuItems: MenuItem[];
+  theme?: AppTheme;
+  isLoading?: boolean;
+  versionText?: string;
+  onBackPress?: () => void;
+  renderHeader?: () => React.ReactNode;
+  renderMenuItem?: (item: MenuItem) => React.ReactNode;
+  renderFooter?: () => React.ReactNode;
+  renderUserInfo?: (userInfo: UserInfo) => React.ReactNode;
+  avatarComponent?: React.ReactNode;
+  onMenuItemPress?: (item: MenuItem) => void;
+  skeletonProps?: Partial<React.ComponentProps<typeof SkeletonPlaceholder>>;
+  headerStyle?: ViewStyle;
+  userInfoTextStyle?: UserInfoTextStyle;
+  menuItemStyle?: MenuItemStyle;
+};
+
+// ✅ Type Guard
+const isToggleMenuItem = (item: MenuItem): item is ToggleMenuItem => {
+  return item.isToggle === true;
+};
+
+// ✅ Main Component
+export const AppSettings: FC<AppSettingsProps> = ({
+  title,
+  titleAlign = 'center',
+  userInfo,
+  menuItems,
+  theme,
+  isLoading = false,
+  versionText = `Version ${DeviceInfo.getVersion()}`,
+  onBackPress,
+  renderHeader,
+  renderMenuItem,
+  renderFooter,
+  renderUserInfo,
+  avatarComponent,
+  onMenuItemPress,
+  skeletonProps = {},
+  headerStyle,
+  userInfoTextStyle = {},
+  menuItemStyle = {}
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const insets = useSafeAreaInsets();
+  // ✅ State for toggle values
+  const [toggleStates, setToggleStates] = useState<Record<string, boolean>>(
+    menuItems.reduce<Record<string, boolean>>((acc, item) => {
+      if (isToggleMenuItem(item)) {
+        acc[item.key] = item.toggleValue ?? false;
+      }
+      return acc;
+    }, {})
+  );
+
+  // ✅ Handle toggle change
+  const handleToggleChange = (key: string, value: boolean) => {
+    setToggleStates((prev) => ({ ...prev, [key]: value }));
+    const item = menuItems.find((i) => i.key === key) as ToggleMenuItem | undefined;
+    item?.onToggleChange?.(value);
+  };
+  const renderIconWithColor = (icon: React.ReactNode, color: string): React.ReactNode => {
+    if (isValidElement(icon)) {
+      return cloneElement(icon as ReactElement<any>, { color });
+    }
+    return icon;
+  };
+  const renderToggleMenuItem = (item: ToggleMenuItem) => {
+    return (
+      <View
+        key={item.key}
+        style={[
+          styles.menuItem,
+          {
+            backgroundColor: appliedTheme.colors.surfaceDisabled,
+            borderColor: appliedTheme.colors.border
+          },
+          menuItemStyle.container
+        ]}
+      >
+        <View style={styles.menuItemContent}>
+          {item.icon && (
+            <View style={[styles.menuIcon, menuItemStyle.icon]}>
+              {renderIconWithColor(item.icon, appliedTheme.colors.textPrimary)}
+            </View>
+          )}
+          <Text
+            numberOfLines={1}
+            style={[styles.menuLabel, { color: appliedTheme.colors.onBackground }, menuItemStyle.label]}
+          >
+            {item.label}
+          </Text>
+        </View>
+        <Switch
+          trackColor={{
+            false: appliedTheme.colors.switchTrackColorDisabled,
+            true: appliedTheme.colors.switchTrackColor
+          }}
+          thumbColor={
+            toggleStates[item.key] ? appliedTheme.colors.switchThumbColor : appliedTheme.colors.switchThumbColorDisabled
+          }
+          value={toggleStates[item.key]}
+          onValueChange={(value) => handleToggleChange(item.key, value)}
+          style={styles.switchStyle}
+        />
+      </View>
+    );
+  };
+
+  const renderPressableMenuItem = (item: PressableMenuItem) => {
+    return (
+      <TouchableOpacity
+        key={item.key}
+        activeOpacity={0.6}
+        onPress={() => {
+          item.onPress?.();
+          onMenuItemPress?.(item);
+        }}
+        style={[
+          styles.menuItem,
+          {
+            backgroundColor: appliedTheme.colors.surfaceDisabled,
+            borderColor: appliedTheme.colors.border
+          },
+          menuItemStyle.container
+        ]}
+      >
+        {item.icon && (
+          <View style={[styles.menuIcon, menuItemStyle.icon]}>
+            {renderIconWithColor(item.icon, appliedTheme.colors.textPrimary)}
+          </View>
+        )}
+        <Text
+          numberOfLines={1}
+          style={[styles.menuLabel, { color: appliedTheme.colors.onBackground }, menuItemStyle.label]}
+        >
+          {item.label}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+
+  const renderMenuItemDefault = (item: MenuItem) => {
+    return isToggleMenuItem(item) ? renderToggleMenuItem(item) : renderPressableMenuItem(item);
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: appliedTheme.colors.background }]}>
+      {(renderHeader || title || onBackPress) &&
+        (renderHeader ? (
+          renderHeader()
+        ) : (
+          <AppHeader
+            style={headerStyle}
+            title={title || 'Settings'}
+            titleAlign={titleAlign}
+            onBackPress={onBackPress}
+            theme={appliedTheme}
+          />
+        ))}
+      <ScrollView
+        contentContainerStyle={[styles.scrollContent, { paddingBottom: verticalScale(60) + insets.bottom }]}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+      >
+        {userInfo && (
+          <UserSection
+            theme={appliedTheme}
+            userInfo={userInfo}
+            avatarComponent={avatarComponent}
+            isLoading={isLoading}
+            renderUserInfo={renderUserInfo}
+            skeletonProps={skeletonProps}
+            userInfoTextStyle={userInfoTextStyle}
+          />
+        )}
+        <View style={styles.menuList}>
+          {menuItems.map((item) =>
+            renderMenuItem ? (
+              <React.Fragment key={item.key}>{renderMenuItem(item)}</React.Fragment>
+            ) : (
+              renderMenuItemDefault(item)
+            )
+          )}
+        </View>
+        {renderFooter?.()}
+        <View style={styles.versionContainer}>
+          <Text style={[styles.versionText, { color: appliedTheme.colors.onSurface }]}>{versionText}</Text>
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+// ✅ Styles
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  scrollContent: {
+    paddingHorizontal: scale(12)
+  },
+  menuList: {
+    marginBottom: verticalScale(16)
+  },
+  menuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: scale(1),
+    paddingVertical: verticalScale(10),
+    paddingHorizontal: scale(12),
+    borderRadius: moderateScale(8),
+    marginBottom: verticalScale(10),
+    position: 'relative'
+  },
+  menuIcon: {
+    marginRight: scale(10),
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  menuLabel: {
+    flex: 1,
+    fontSize: RFValue(12),
+    fontWeight: '500'
+  },
+  menuItemContent: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  switchStyle: {
+    transform: [{ scaleX: 1 }, { scaleY: 1 }]
+  },
+  versionContainer: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  versionText: {
+    fontSize: RFValue(10),
+    opacity: 0.6
+  }
+});

package/src/components/Settings/index.ts

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

package/src/components/Subscription/SubOne.tsx

@@ -0,0 +1,337 @@
+/**
+ * @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 { 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/hook/useTheme';
+import Display from '../../utils/Display';
+import type { AppTheme } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+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: RFValue(21),
+    fontWeight: '700',
+    textAlign: 'center',
+    marginBottom: verticalScale(12),
+    marginHorizontal: scale(16)
+  },
+  subText: {
+    textAlign: 'center',
+    fontSize: RFValue(12),
+    fontWeight: '400',
+    marginBottom: verticalScale(12),
+    marginHorizontal: scale(16)
+  },
+  errorMessage: {
+    fontSize: RFValue(13),
+    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: RFValue(17),
+    fontWeight: '700',
+    marginBottom: verticalScale(8)
+  },
+  price: {
+    fontSize: RFValue(43),
+    fontWeight: 'bold',
+    marginBottom: verticalScale(4)
+  },
+  per: {
+    fontSize: RFValue(13),
+    textTransform: 'capitalize',
+    marginBottom: verticalScale(6)
+  },
+  platforms: {
+    fontSize: RFValue(13),
+    textTransform: 'capitalize',
+    textAlign: 'center',
+    marginBottom: verticalScale(8)
+  },
+  benefitsContainer: {
+    marginTop: verticalScale(8),
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    paddingHorizontal: scale(16)
+  },
+  benefit: {
+    fontSize: RFValue(12)
+  },
+  subscribeButton: {
+    paddingVertical: verticalScale(10),
+    paddingHorizontal: scale(60),
+    borderRadius: scale(30),
+    alignItems: 'center',
+    marginTop: verticalScale(15)
+  },
+  subscribeText: {
+    fontSize: RFValue(14),
+    fontWeight: '700'
+  },
+  info: {
+    fontSize: RFValue(11),
+    textAlign: 'center',
+    fontWeight: '400',
+    marginVertical: verticalScale(8),
+    marginHorizontal: scale(16)
+  },
+  cancelText: {
+    fontSize: RFValue(11),
+    textAlign: 'center',
+    fontWeight: '400',
+    marginBottom: verticalScale(16),
+    marginHorizontal: scale(16)
+  },
+  extraContentTextWrapper: {
+    marginTop: verticalScale(18),
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: scale(16)
+  },
+  extraContentTextText: {
+    fontSize: RFValue(10),
+    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: RFValue(12),
+    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 };