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

package/lib/typescript/src/types/sections.types.d.ts

@@ -1,41 +0,0 @@
-import { IContentData } from './content.types';
-export type ISectionType = 'normal' | 'card_style_2' | 'card_style_3' | 'card_style_4' | 'card_style_5' | 'card_style_6' | 'card_rotate_in_out' | 'slider' | 'slider_style_2' | 'card_series_featured_style_1' | 'continue_watching' | 'new_releases';
-export interface IGetSectionMeta {
-    pagination: {
-        page: number;
-        limit: number;
-        length: number;
-        total: number;
-        hasNextPage: boolean;
-        nextPage: number | null;
-    };
-}
-export interface IGetSectionData {
-    _id: string;
-    name: string;
-    label: string;
-    order: number;
-    type: ISectionType;
-    content_ids: string[];
-    category: {
-        _id: string;
-        name: string;
-        slug: string;
-    };
-    genre?: string;
-    content: {
-        data: IContentData[];
-        meta: IGetSectionMeta;
-    };
-    status: boolean;
-    createdAt: Date;
-    updatedAt: Date;
-}
-export interface IGetSectionResponse {
-    success: boolean;
-    message: string;
-    data: IGetSectionData[];
-    meta: IGetSectionMeta;
-    cache: boolean;
-}
-//# sourceMappingURL=sections.types.d.ts.map

package/lib/typescript/src/types/sections.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"sections.types.d.ts","sourceRoot":"","sources":["../../../../src/types/sections.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,MAAM,YAAY,GACpB,QAAQ,GACR,cAAc,GACd,cAAc,GACd,cAAc,GACd,cAAc,GACd,cAAc,GACd,oBAAoB,GACpB,QAAQ,GACR,gBAAgB,GAChB,8BAA8B,GAC9B,mBAAmB,GACnB,cAAc,CAAC;AAEnB,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,OAAO,CAAC;QACrB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;KACzB,CAAC;CACH;AAED,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,YAAY,CAAC;IACnB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,EAAE;QACR,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE;QACP,IAAI,EAAE,YAAY,EAAE,CAAC;QACrB,IAAI,EAAE,eAAe,CAAC;KACvB,CAAC;IACF,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,EAAE,OAAO,CAAC;CAChB"}

package/src/components/Button/Button.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import {
-  TouchableOpacity,
-  Text,
-  type TouchableOpacityProps,
-} from 'react-native';
-import { styles } from './styles';
-
-interface ButtonProps extends TouchableOpacityProps {
-  title: string;
-  variant?: 'primary' | 'secondary';
-}
-
-export const Button: React.FC<ButtonProps> = ({
-  title,
-  variant = 'primary',
-  style,
-  ...props
-}) => {
-  return (
-    <TouchableOpacity
-      style={[
-        styles.button,
-        variant === 'primary' ? styles.primary : styles.secondary,
-        style,
-      ]}
-      {...props}
-    >
-      <Text style={styles.text}>{title}</Text>
-    </TouchableOpacity>
-  );
-};

package/src/components/Button/styles.ts

@@ -1,21 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export const styles = StyleSheet.create({
-  button: {
-    padding: 12,
-    borderRadius: 8,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  primary: {
-    backgroundColor: '#007AFF',
-  },
-  secondary: {
-    backgroundColor: '#34C759',
-  },
-  text: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-});

package/src/components/Section/Card/Sliders/Styles/One.tsx

@@ -1,147 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Mon 09 Jun 2025 at 03:12 PM
- */
-import React, { FunctionComponent, memo } from 'react';
-import {
-  Platform,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  Dimensions,
-} from 'react-native';
-import Carousel from 'react-native-reanimated-carousel';
-import { scale, verticalScale } from 'react-native-size-matters';
-import FastImage from 'react-native-fast-image';
-import LinearGradient from 'react-native-linear-gradient';
-import { IContentData, IGetSectionMeta } from '../../../../../types';
-import { useAppTheme } from '../../../../../theme/useAppTheme';
-import { AppTheme } from '../../../../../theme/themes';
-
-export interface IProps {
-  theme?: AppTheme; // theme optional now, hook use करेंगे
-  data: {
-    data: IContentData[];
-    meta: IGetSectionMeta;
-  };
-  index: number;
-}
-
-const Display = {
-  fullWidth: Dimensions.get('window').width,
-  fullHeight: Dimensions.get('window').height,
-};
-
-const SliderOne: FunctionComponent<IProps> = ({
-  index,
-  data,
-  theme,
-}): React.ReactElement => {
-  const ContentData = data?.data;
-  const [activeIndex, setActiveIndex] = React.useState<number>(0);
-
-  const { colors, isDarkMode } = useAppTheme(theme);
-
-  const LENGTH = ContentData.length || 0;
-
-  const gradientColors = isDarkMode
-    ? [colors.primaryContainer, colors.primary]
-    : [colors.primary, colors.secondary];
-
-  return (
-    <>
-      {ContentData && ContentData.length > 0 && (
-        <Carousel
-          width={Display.fullWidth}
-          height={verticalScale(180)}
-          autoPlay
-          data={ContentData}
-          scrollAnimationDuration={1000}
-          autoPlayInterval={1000}
-          mode="parallax"
-          modeConfig={{
-            parallaxScrollingOffset: 48,
-            parallaxScrollingScale: 0.9,
-          }}
-          onSnapToItem={(i) => setActiveIndex(i)}
-          renderItem={({ item }) => (
-            <View style={[styles.sliderContainer]}>
-              <TouchableOpacity activeOpacity={0.8}>
-                <FastImage
-                  source={{
-                    uri: item.thumbnail,
-                    priority: FastImage.priority.normal,
-                  }}
-                  style={styles.sliderImage}
-                />
-              </TouchableOpacity>
-            </View>
-          )}
-        />
-      )}
-
-      {index === 0 && (
-        <View style={styles.indicatorContainer}>
-          <View style={styles.indicator}>
-            {new Array(LENGTH).fill(0).map((_, i) => {
-              return i === activeIndex ? (
-                <LinearGradient
-                  start={{ x: 0, y: 0 }}
-                  end={{ x: 1, y: 0 }}
-                  colors={gradientColors}
-                  key={i}
-                  style={{
-                    width: scale(18),
-                    height: scale(8),
-                    borderRadius: scale(50),
-                  }}
-                />
-              ) : (
-                <View
-                  key={i}
-                  style={{
-                    width: scale(8),
-                    height: scale(8),
-                    backgroundColor: colors.onSurface,
-                    borderRadius: scale(50),
-                  }}
-                />
-              );
-            })}
-          </View>
-        </View>
-      )}
-    </>
-  );
-};
-
-export default memo(SliderOne);
-
-const styles = StyleSheet.create({
-  sliderContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    borderRadius: scale(10),
-    overflow: 'hidden',
-    marginTop: Platform.OS === 'ios' ? verticalScale(-30) : verticalScale(-15),
-  },
-  sliderImage: {
-    width: '100%',
-    height: undefined,
-    borderRadius: scale(10),
-    aspectRatio: 16 / 9,
-  },
-  indicatorContainer: {
-    bottom: 0,
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-  },
-  indicator: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: Platform.OS === 'ios' ? verticalScale(-25) : verticalScale(-7),
-    gap: scale(5),
-  },
-});

package/src/components/Section/Card/Styles/One.tsx

@@ -1,112 +0,0 @@
-/**
- * @author Pukhraj Dhamu
- * @LastModified Sat 21 Sep 2024 at 03:26 PM
- */
-
-import { StyleSheet, View, TouchableOpacity, FlatList } from 'react-native';
-import React, { memo } from 'react';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import {
-  moderateScale,
-  moderateVerticalScale,
-  verticalScale,
-} from 'react-native-size-matters';
-import FastImage from 'react-native-fast-image';
-import { IContentData } from '../../../../types';
-import { AppTheme } from '../../../../theme/themes';
-
-export interface IProps {
-  theme: AppTheme;
-  data?: IContentData[];
-  isLoading?: boolean;
-  title: string;
-  onEndReached?: () => void;
-  section_id: string;
-  showNavigateToMore?: boolean;
-}
-
-const MovieCard: React.FC<IProps> = ({
-  data = [],
-  onEndReached,
-  isLoading = false,
-}) => {
-  const renderItem = ({
-    item,
-    index,
-  }: {
-    item: IContentData;
-    index: number;
-  }) => (
-    <TouchableOpacity key={index} style={styles.item}>
-      <FastImage
-        source={{ uri: item.poster, priority: FastImage.priority.normal }}
-        style={styles.image}
-      />
-    </TouchableOpacity>
-  );
-
-  return (
-    <View style={styles.root}>
-      {isLoading ? (
-        <SkeletonPlaceholder>
-          <>
-            <View style={styles.title} />
-            <View style={styles.SkeletonPlaceholder}>
-              {[1, 2, 3].map((_, index) => (
-                <View key={index} style={styles.item}>
-                  <View style={styles.image} />
-                </View>
-              ))}
-            </View>
-          </>
-        </SkeletonPlaceholder>
-      ) : (
-        <>
-          {/* {showNavigateToMore && data.length > 0 && (
-            <NavigateToMore title={title} onPress={navigateToMore} />
-          )} */}
-          <FlatList
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            data={data}
-            onEndReached={onEndReached}
-            onEndReachedThreshold={0.5}
-            keyExtractor={(item, index) => item._id || index.toString()}
-            contentContainerStyle={{ paddingRight: moderateScale(15) }}
-            renderItem={renderItem}
-          />
-        </>
-      )}
-    </View>
-  );
-};
-
-export default memo(MovieCard);
-
-const styles = StyleSheet.create({
-  root: {
-    marginTop: verticalScale(10),
-  },
-  item: {
-    marginLeft: moderateScale(12),
-  },
-  image: {
-    width: moderateScale(105),
-    height: moderateScale(150),
-    borderRadius: moderateScale(5),
-    backgroundColor: '#D9D9D9',
-  },
-  title: {
-    marginHorizontal: moderateScale(15),
-    marginVertical: moderateScale(5),
-    width: moderateScale(100),
-    height: moderateScale(20),
-    borderRadius: moderateScale(4),
-    backgroundColor: '#D9D9D9',
-  },
-  SkeletonPlaceholder: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginVertical: moderateVerticalScale(5),
-  },
-});

package/src/components/Section/Card/index.ts

@@ -1,13 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Sun 08 Jun 2025 at 03:49 PM
- */
-import StyleOne from './Styles/One';
-
-const Cards = {
-  Styles: {
-    One: StyleOne,
-  },
-};
-
-export default Cards;

package/src/components/Section/SectionType.tsx

@@ -1,127 +0,0 @@
-/**
- * @author Pukhraj Dhamu
- * @lastModified Sat 21 Sep 2024 at 07:51 PM
- */
-import React from 'react';
-// import Sliders from './Card/Sliders';
-
-import { IContentData, IGetSectionData, IGetSectionMeta } from '../../types';
-import { AppTheme } from '../../theme/themes';
-import Sliders from './Card/Sliders';
-export interface ICustomComponentsForSections {
-  type: string;
-  component: React.ReactElement;
-}
-export interface IProps {
-  type: IGetSectionData['type'];
-  data: {
-    data: IContentData[];
-    meta: IGetSectionMeta;
-  };
-  name: string;
-  customComponents?: ICustomComponentsForSections[];
-  theme?: AppTheme;
-  index: number;
-  section_id: string;
-}
-
-const defaultComponentMap = (
-  type: string,
-  props: Omit<IProps, 'customComponents' | 'type' | 'theme'> & {
-    theme?: AppTheme;
-  }
-): React.ReactNode => {
-  const commonProps = {
-    theme: props.theme,
-    title: props.name,
-    section_id: props.section_id,
-    data: props.data,
-    index: props.index,
-  };
-
-  switch (type) {
-    case 'slider':
-      return <Sliders.Styles.One {...commonProps} />;
-    // case 'slider_style_2':
-    //   return <Sliders.Styles.Two {...commonProps} />;
-    // case 'continue_watching':
-    //   return <NowWatching {...commonProps} />;
-    // case 'new_releases':
-    // case 'normal':
-    //   return <Cards.Styles.One {...commonProps} />;
-    // case 'card_style_2':
-    //   return <Cards.Styles.Two {...commonProps} />;
-    // case 'card_style_3':
-    //   return <Cards.Styles.Three {...commonProps} />;
-    // case 'card_style_4':
-    //   return <Cards.Styles.Four {...commonProps} />;
-    // case 'card_style_5':
-    //   return <Cards.Styles.Five {...commonProps} />;
-    // case 'card_style_6':
-    //   return <Cards.Styles.Six {...commonProps} />;
-    // case 'card_rotate_in_out':
-    //   return <Cards.Styles.RotateInOut {...commonProps} />;
-    // case 'top_10':
-    //   return <Cards.Styles.TopTen {...commonProps} />;
-    default:
-      return null;
-  }
-};
-
-const SectionType: React.FC<IProps> = ({
-  type: sectionType,
-  data,
-  name,
-  customComponents = [],
-  theme,
-  index,
-  section_id,
-}) => {
-  const commonProps = { data, title: name };
-
-  const customComponent = customComponents.find(
-    (component) => component.type === sectionType
-  );
-
-  if (customComponent) {
-    return React.cloneElement(customComponent.component, {
-      ...(customComponent?.component?.props || {}),
-      ...commonProps,
-    });
-  }
-
-  const defaultComponent = defaultComponentMap(sectionType, {
-    data,
-    name,
-    section_id,
-    index,
-    theme,
-  });
-
-  if (defaultComponent) return defaultComponent;
-
-  return (
-    <>
-      {customComponents
-        .filter(
-          ({ type: customType }) =>
-            defaultComponentMap(customType, {
-              data,
-              name,
-              section_id,
-              index,
-              theme,
-            }) === null
-        )
-        .map(({ component, type }) =>
-          React.cloneElement(component, {
-            ...(component?.props || {}),
-            key: type,
-            ...commonProps,
-          })
-        )}
-    </>
-  );
-};
-
-export default SectionType;

package/src/components/Section/Sections.tsx

@@ -1,120 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Sun 08 Jun 2025 at 03:50 PM
- */
-
-import React, { useMemo } from 'react';
-import {
-  type FlatListProps,
-  FlatList,
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native';
-import { scale } from 'react-native-size-matters';
-import Animated, {
-  type AnimatedStyle,
-  type SharedValue,
-} from 'react-native-reanimated';
-
-import SectionType from './SectionType';
-import { Loader } from '../Loader/Loader';
-import type { IGetSectionData } from '../../types';
-import { AppTheme } from '../../theme/themes';
-
-export interface ICustomComponentsForSections {
-  type: string;
-  component: React.ReactElement;
-}
-
-export interface ISectionsProps {
-  category?: string;
-  customComponents?: ICustomComponentsForSections[];
-  LoaderComponent?: React.ReactNode;
-  ErrorComponent?: React.ReactNode;
-  InfiniteScrollLoaderComponent?: React.ReactNode;
-  onScroll?:
-    | ((event: NativeSyntheticEvent<NativeScrollEvent>) => void)
-    | SharedValue<
-        ((event: NativeSyntheticEvent<NativeScrollEvent>) => void) | undefined
-      >;
-  contentContainerStyle?:
-    | StyleProp<ViewStyle>
-    | AnimatedStyle<StyleProp<ViewStyle>>;
-  data?: IGetSectionData[];
-  onEndReached?: () => void;
-  theme?: AppTheme;
-}
-
-// 👇 Type-safe animated FlatList
-const AnimatedFlatList = Animated.createAnimatedComponent(
-  FlatList as React.ComponentType<FlatListProps<IGetSectionData>>
-);
-
-export const Sections: React.FC<ISectionsProps> = ({
-  customComponents,
-  LoaderComponent = <Loader />,
-  ErrorComponent,
-  onScroll,
-  contentContainerStyle,
-  data,
-  onEndReached,
-  theme,
-}) => {
-  const sectionData = useMemo(() => data, [data]);
-
-  const onEndReachedHandler = () => {
-    if (onEndReached) onEndReached();
-  };
-
-  const renderItem = ({
-    item,
-    index,
-  }: {
-    item: IGetSectionData;
-    index: number;
-  }) => {
-    if (!item) return null;
-
-    return (
-      <SectionType
-        key={index}
-        index={index}
-        type={item.type || 'normal'}
-        data={item.content}
-        name={item.name}
-        theme={theme}
-        customComponents={customComponents}
-        section_id={item._id}
-      />
-    );
-  };
-
-  if (!data) {
-    if (LoaderComponent) return <>{LoaderComponent}</>;
-    if (ErrorComponent) return <>{ErrorComponent}</>;
-    return null;
-  }
-
-  return (
-    <AnimatedFlatList
-      initialNumToRender={5}
-      showsVerticalScrollIndicator={false}
-      removeClippedSubviews
-      onScroll={onScroll as any} // casting to avoid SharedValue type issues
-      scrollEventThrottle={16}
-      data={sectionData}
-      renderItem={renderItem}
-      keyExtractor={(_item, index) => index.toString()}
-      onEndReached={onEndReachedHandler}
-      onEndReachedThreshold={0.7}
-      contentContainerStyle={[
-        {
-          paddingBottom: scale(100),
-        },
-        contentContainerStyle,
-      ]}
-    />
-  );
-};

package/src/sample.test.ts

@@ -1,5 +0,0 @@
-describe('Sample Test', () => {
-  it('should pass', () => {
-    expect(1 + 1).toBe(2);
-  });
-});

package/src/theme/useAppTheme.ts

@@ -1,13 +0,0 @@
-import { useColorScheme } from 'react-native';
-import type { AppTheme } from './themes';
-import { LightTheme, DarkTheme } from './themes';
-
-export function useAppTheme(externalTheme?: AppTheme) {
-  const colorScheme = useColorScheme();
-  const isDarkAllowed = externalTheme?.dark === true && colorScheme === 'dark';
-  const appliedTheme = isDarkAllowed ? DarkTheme : LightTheme;
-  return {
-    colors: appliedTheme.colors,
-    isDarkMode: appliedTheme.dark ?? false,
-  };
-}

package/src/types/sections.types.ts

@@ -1,56 +0,0 @@
-import { IContentData } from './content.types';
-
-export type ISectionType =
-  | 'normal' // Card 1
-  | 'card_style_2' // Card 2
-  | 'card_style_3' // Card 3
-  | 'card_style_4' // Card 4
-  | 'card_style_5' // Card 5
-  | 'card_style_6' // Card 6
-  | 'card_rotate_in_out' // Card 7
-  | 'slider' // Slider 1
-  | 'slider_style_2' // Slider 2
-  | 'card_series_featured_style_1' // Card Series Featured 1
-  | 'continue_watching' // continue_watching
-  | 'new_releases'; // new_releases
-
-export interface IGetSectionMeta {
-  pagination: {
-    page: number;
-    limit: number;
-    length: number;
-    total: number;
-    hasNextPage: boolean;
-    nextPage: number | null;
-  };
-}
-
-export interface IGetSectionData {
-  _id: string;
-  name: string;
-  label: string;
-  order: number;
-  type: ISectionType;
-  content_ids: string[];
-  category: {
-    _id: string;
-    name: string;
-    slug: string;
-  };
-  genre?: string;
-  content: {
-    data: IContentData[];
-    meta: IGetSectionMeta;
-  };
-  status: boolean;
-  createdAt: Date;
-  updatedAt: Date;
-}
-
-export interface IGetSectionResponse {
-  success: boolean;
-  message: string;
-  data: IGetSectionData[];
-  meta: IGetSectionMeta;
-  cache: boolean;
-}