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

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

@@ -0,0 +1,112 @@
+/**
+ * @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

@@ -0,0 +1,13 @@
+/**
+ * @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

@@ -0,0 +1,127 @@
+/**
+ * @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

@@ -0,0 +1,120 @@
+/**
+ * @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/components/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sun 08 Jun 2025 at 03:23 PM
+ */
+
+export * from './Button/Button';
+export * from './Loader/Loader';
+export * from './Headers';
+export * from './Section/Sections';
+export * from './Logo/Logo';

package/src/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sun 08 Jun 2025 at 03:23 PM
+ */
+export * from './components';
+export * from './types';

package/src/sample.test.ts

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

package/src/theme/themes.ts

@@ -0,0 +1,198 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 09 Jun 2025 at 04:45 PM
+ */
+
+import { MD3DarkTheme, DefaultTheme } from 'react-native-paper';
+import type {
+  MD3ElevationColors,
+  ThemeProp,
+} from 'react-native-paper/lib/typescript/types';
+
+type BaseColors = {
+  primary: string;
+  primaryContainer: string;
+  secondary: string;
+  secondaryContainer: string;
+  tertiary: string;
+  tertiaryContainer: string;
+  surface: string;
+  surfaceVariant: string;
+  surfaceDisabled: string;
+  background: string;
+  error: string;
+  errorContainer: string;
+  onPrimary: string;
+  onPrimaryContainer: string;
+  onSecondary: string;
+  onSecondaryContainer: string;
+  onTertiary: string;
+  onTertiaryContainer: string;
+  onSurface: string;
+  onSurfaceVariant: string;
+  onSurfaceDisabled: string;
+  onError: string;
+  onErrorContainer: string;
+  onBackground: string;
+  outline: string;
+  outlineVariant: string;
+  inverseSurface: string;
+  inverseOnSurface: string;
+  inversePrimary: string;
+  shadow: string;
+  scrim: string;
+  backdrop: string;
+  elevation: MD3ElevationColors;
+
+  // custom colors
+  CustomPrimary: string;
+  CustomSecondary: string;
+  CustomText: string;
+  CustomWhiteColor: string;
+  CustomBlackColor: string;
+  CustomTransparentColor: string;
+};
+
+export interface ITheme
+  extends Pick<
+    ThemeProp,
+    'version' | 'dark' | 'mode' | 'animation' | 'fonts' | 'isV3' | 'roundness'
+  > {
+  colors: BaseColors; // ✅ required
+}
+
+// ✅ AppTheme allows partial override
+export type AppTheme = Omit<ITheme, 'colors'> & {
+  dark?: boolean;
+  colors?: Partial<BaseColors>;
+};
+
+export const LightTheme: ITheme = {
+  ...DefaultTheme,
+  dark: false,
+  colors: {
+    primary: '#3B82F6',
+    onPrimary: '#FFFFFF',
+    primaryContainer: '#DBEAFE',
+    onPrimaryContainer: '#1E40AF',
+
+    secondary: '#2563EB',
+    onSecondary: '#FFFFFF',
+    secondaryContainer: '#E0E7FF',
+    onSecondaryContainer: '#1E40AF',
+
+    tertiary: '#FBBF24',
+    onTertiary: '#92400E',
+    tertiaryContainer: '#FEF3C7',
+    onTertiaryContainer: '#92400E',
+
+    surface: '#FFFFFF',
+    onSurface: '#1F2937',
+    surfaceVariant: '#F3F4F6',
+    onSurfaceVariant: '#6B7280',
+
+    background: '#F9FAFB',
+    onBackground: '#111827',
+
+    error: '#DC2626',
+    onError: '#FFFFFF',
+    errorContainer: '#FEE2E2',
+    onErrorContainer: '#DC2626',
+
+    outline: '#D1D5DB',
+    outlineVariant: '#E5E7EB',
+
+    shadow: 'rgba(0, 0, 0, 0.1)',
+    scrim: 'rgba(0, 0, 0, 0.2)',
+    backdrop: 'rgba(243, 244, 246, 0.7)',
+
+    inverseSurface: '#1F2937',
+    inverseOnSurface: '#F9FAFB',
+    inversePrimary: '#2563EB',
+
+    elevation: {
+      level0: 'transparent',
+      level1: '#F3F4F6',
+      level2: '#E5E7EB',
+      level3: '#D1D5DB',
+      level4: '#9CA3AF',
+      level5: '#6B7280',
+    },
+
+    surfaceDisabled: 'rgba(31, 41, 55, 0.12)',
+    onSurfaceDisabled: 'rgba(31, 41, 55, 0.38)',
+
+    // custom
+    CustomPrimary: '#3B82F6',
+    CustomSecondary: '#2563EB',
+    CustomText: '#111827',
+    CustomWhiteColor: '#FFFFFF',
+    CustomBlackColor: '#000000',
+    CustomTransparentColor: 'rgba(0,0,0,0)',
+  },
+};
+
+export const DarkTheme: ITheme = {
+  ...MD3DarkTheme,
+  dark: true,
+  colors: {
+    primary: '#60A5FA',
+    onPrimary: '#1E40AF',
+    primaryContainer: '#1E40AF',
+    onPrimaryContainer: '#DBEAFE',
+
+    secondary: '#3B82F6',
+    onSecondary: '#DBEAFE',
+    secondaryContainer: '#2563EB',
+    onSecondaryContainer: '#DBEAFE',
+
+    tertiary: '#FBBF24',
+    onTertiary: '#78350F',
+    tertiaryContainer: '#92400E',
+    onTertiaryContainer: '#78350F',
+
+    surface: '#111827',
+    onSurface: '#F9FAFB',
+    surfaceVariant: '#374151',
+    onSurfaceVariant: '#D1D5DB',
+
+    background: '#0F172A',
+    onBackground: '#F9FAFB',
+
+    error: '#EF4444',
+    onError: '#FFFFFF',
+    errorContainer: '#B91C1C',
+    onErrorContainer: '#EF4444',
+
+    outline: '#4B5563',
+    outlineVariant: '#374151',
+
+    shadow: 'rgba(0, 0, 0, 0.7)',
+    scrim: 'rgba(0, 0, 0, 0.7)',
+    backdrop: 'rgba(15, 23, 42, 0.7)',
+
+    inverseSurface: '#F9FAFB',
+    inverseOnSurface: '#1F2937',
+    inversePrimary: '#2563EB',
+
+    elevation: {
+      level0: 'transparent',
+      level1: '#1F2937',
+      level2: '#111827',
+      level3: '#0F172A',
+      level4: '#0B1120',
+      level5: '#090E1A',
+    },
+
+    surfaceDisabled: 'rgba(249, 250, 251, 0.12)',
+    onSurfaceDisabled: 'rgba(249, 250, 251, 0.38)',
+
+    // custom
+    CustomPrimary: '#3B82F6',
+    CustomSecondary: '#2563EB',
+    CustomText: '#F9FAFB',
+    CustomWhiteColor: '#F9FAFB',
+    CustomBlackColor: '#000000',
+    CustomTransparentColor: 'rgba(0,0,0,0)',
+  },
+};

package/src/theme/useAppTheme.ts

@@ -0,0 +1,13 @@
+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,
+  };
+}