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

package/src/theme/themes.ts

@@ -1,67 +1,91 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Mon 09 Jun 2025 at 04:45 PM
+ * @lastModified Tue 17 Jun 2025 at 04:07 PM
  */
-
 import { MD3DarkTheme, DefaultTheme } from 'react-native-paper';
-import type {
-  MD3ElevationColors,
-  ThemeProp,
-} from 'react-native-paper/lib/typescript/types';
+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;
+  primaryContainer: string;
   onPrimaryContainer: string;
+
+  secondary: string;
   onSecondary: string;
+  secondaryContainer: string;
   onSecondaryContainer: string;
+
+  tertiary: string;
   onTertiary: string;
+  tertiaryContainer: string;
   onTertiaryContainer: string;
+
+  background: string;
+  backgroundDisabled: string;
+  onBackground: string;
+  blueBackground: string;
+
+  surface: string;
   onSurface: string;
+  surfaceVariant: string;
   onSurfaceVariant: string;
+
+  surfaceDisabled: string;
   onSurfaceDisabled: string;
+
+  error: string;
   onError: string;
+  errorContainer: string;
   onErrorContainer: string;
-  onBackground: string;
+
   outline: string;
+  outlineDisabled: string;
   outlineVariant: string;
-  inverseSurface: string;
-  inverseOnSurface: string;
-  inversePrimary: string;
+
+  border: string;
+  borderDisabled: string;
+
   shadow: string;
   scrim: string;
   backdrop: string;
+
+  inverseSurface: string;
+  inverseOnSurface: string;
+  inversePrimary: string;
+
   elevation: MD3ElevationColors;
 
-  // custom colors
-  CustomPrimary: string;
-  CustomSecondary: string;
-  CustomText: string;
-  CustomWhiteColor: string;
-  CustomBlackColor: string;
-  CustomTransparentColor: string;
+  textPrimary: string;
+  textSecondary: string;
+  textDisabled: string;
+
+  button: string;
+  buttonDisabled: string;
+  buttonText: string;
+
+  white: string;
+  black: string;
+  transparent: string;
+  backgroundLayoutGradient: string[];
+
+  heroBannerGradient: string[];
+  cardGradient: string[];
+
+  skeletonHighlightColor: string;
+  skeletonBaseColor: string;
+
+  switchTrackColor: string;
+  switchThumbColor: string;
+  switchTrackColorDisabled: string;
+  switchThumbColorDisabled: string;
 };
 
 export interface ITheme
-  extends Pick<
-    ThemeProp,
-    'version' | 'dark' | 'mode' | 'animation' | 'fonts' | 'isV3' | 'roundness'
-  > {
-  colors: BaseColors; // ✅ required
+  extends Pick<ThemeProp, 'version' | 'dark' | 'mode' | 'animation' | 'fonts' | 'isV3' | 'roundness'> {
+  colors: BaseColors;
 }
 
-// ✅ AppTheme allows partial override
 export type AppTheme = Omit<ITheme, 'colors'> & {
   dark?: boolean;
   colors?: Partial<BaseColors>;
@@ -70,129 +94,192 @@ export type AppTheme = Omit<ITheme, 'colors'> & {
 export const LightTheme: ITheme = {
   ...DefaultTheme,
   dark: false,
+  isV3: true,
+  version: 3,
+  roundness: 4,
   colors: {
-    primary: '#3B82F6',
-    onPrimary: '#FFFFFF',
-    primaryContainer: '#DBEAFE',
-    onPrimaryContainer: '#1E40AF',
+    primary: 'rgba(244, 197, 66, 1)',
+    onPrimary: 'rgba(255, 255, 255, 1)',
+    primaryContainer: 'rgba(254, 243, 199, 1)',
+    onPrimaryContainer: 'rgba(146, 64, 14, 1)',
+
+    secondary: 'rgba(37, 99, 235, 1)',
+    onSecondary: 'rgba(255, 255, 255, 1)',
+    secondaryContainer: 'rgba(219, 234, 254, 1)',
+    onSecondaryContainer: 'rgba(30, 64, 175, 1)',
 
-    secondary: '#2563EB',
-    onSecondary: '#FFFFFF',
-    secondaryContainer: '#E0E7FF',
-    onSecondaryContainer: '#1E40AF',
+    tertiary: 'rgba(253, 224, 71, 1)',
+    onTertiary: 'rgba(38, 38, 38, 1)',
+    tertiaryContainer: 'rgba(255, 251, 235, 1)',
+    onTertiaryContainer: 'rgba(120, 53, 15, 1)',
 
-    tertiary: '#FBBF24',
-    onTertiary: '#92400E',
-    tertiaryContainer: '#FEF3C7',
-    onTertiaryContainer: '#92400E',
+    background: 'rgba(249, 250, 251, 1)',
+    onBackground: 'rgba(17, 24, 39, 1)',
+    backgroundDisabled: 'rgba(242, 242, 242, 0.78)',
+    blueBackground: 'rgba(255, 255, 255, 0.25)',
 
-    surface: '#FFFFFF',
-    onSurface: '#1F2937',
-    surfaceVariant: '#F3F4F6',
-    onSurfaceVariant: '#6B7280',
+    surface: 'rgba(255, 255, 255, 1)',
+    onSurface: 'rgba(31, 41, 55, 1)',
+    surfaceVariant: 'rgba(243, 244, 246, 1)',
+    onSurfaceVariant: 'rgba(107, 114, 128, 1)',
 
-    background: '#F9FAFB',
-    onBackground: '#111827',
+    surfaceDisabled: 'rgba(0, 0, 0, 0.08)',
+    onSurfaceDisabled: 'rgba(0, 0, 0, 0.3)',
 
-    error: '#DC2626',
-    onError: '#FFFFFF',
-    errorContainer: '#FEE2E2',
-    onErrorContainer: '#DC2626',
+    error: 'rgba(239, 68, 68, 1)',
+    onError: 'rgba(255, 255, 255, 1)',
+    errorContainer: 'rgba(254, 202, 202, 0.5)',
+    onErrorContainer: 'rgba(127, 29, 29, 1)',
 
-    outline: '#D1D5DB',
-    outlineVariant: '#E5E7EB',
+    outline: 'rgba(52, 53, 58, 1)',
+    outlineDisabled: 'rgba(208, 208, 208, 1)',
+    outlineVariant: 'rgba(229, 231, 235, 1)',
+
+    border: 'rgba(0, 0, 0, 0.1)',
+    borderDisabled: 'rgba(0, 0, 0, 0.04)',
 
     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',
+    inverseSurface: 'rgba(31, 41, 55, 1)',
+    inverseOnSurface: 'rgba(249, 250, 251, 1)',
+    inversePrimary: 'rgba(37, 99, 235, 1)',
 
     elevation: {
       level0: 'transparent',
-      level1: '#F3F4F6',
-      level2: '#E5E7EB',
-      level3: '#D1D5DB',
-      level4: '#9CA3AF',
-      level5: '#6B7280',
+      level1: 'rgba(243, 244, 246, 1)',
+      level2: 'rgba(229, 231, 235, 1)',
+      level3: 'rgba(209, 213, 219, 1)',
+      level4: 'rgba(156, 163, 175, 1)',
+      level5: 'rgba(107, 114, 128, 1)'
     },
 
-    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)',
-  },
+    textPrimary: 'rgba(0, 0, 0, 1)',
+    textSecondary: 'rgba(107, 114, 128, 0.89)',
+    textDisabled: 'rgba(160, 160, 160, 0.7)',
+
+    button: 'rgba(244, 197, 66, 1)',
+    buttonDisabled: 'rgba(244, 197, 66, 0.59)',
+    buttonText: 'rgba(0, 0, 0, 1)',
+
+    white: 'rgba(255, 255, 255, 1)',
+    black: 'rgba(0, 0, 0, 1)',
+    transparent: 'rgba(0, 0, 0, 0)',
+
+    backgroundLayoutGradient: [
+      'rgba(255, 255, 255, 0.3)',
+      'rgba(255, 255, 255, 0.98)',
+      'rgb(255, 255, 255)',
+      'rgb(249, 250, 251)'
+    ],
+
+    heroBannerGradient: ['rgba(249,250,251,0)', 'rgba(249,250,251,0.4)', 'rgba(249,250,251,1)'],
+
+    cardGradient: ['rgba(223, 178, 50, 1)', 'rgba(243, 146, 35, 1)', 'rgba(248, 159, 16, 1)'],
+
+    skeletonHighlightColor: '#D6D6D6',
+    skeletonBaseColor: '#EDEDED',
+
+    switchTrackColor: '#3CD141',
+    switchThumbColor: 'white',
+    switchTrackColorDisabled: '#D5D5D5',
+    switchThumbColorDisabled: 'white'
+  }
 };
 
 export const DarkTheme: ITheme = {
   ...MD3DarkTheme,
   dark: true,
+  isV3: true,
+  version: 3,
+  roundness: 4,
   colors: {
-    primary: '#60A5FA',
-    onPrimary: '#1E40AF',
-    primaryContainer: '#1E40AF',
-    onPrimaryContainer: '#DBEAFE',
+    primary: 'rgba(244, 197, 66, 1)',
+    onPrimary: 'rgba(15, 23, 42, 1)',
+    primaryContainer: 'rgba(250, 204, 21, 0.12)',
+    onPrimaryContainer: 'rgba(250, 204, 21, 1)',
 
-    secondary: '#3B82F6',
-    onSecondary: '#DBEAFE',
-    secondaryContainer: '#2563EB',
-    onSecondaryContainer: '#DBEAFE',
+    secondary: 'rgba(147, 197, 253, 1)',
+    onSecondary: 'rgba(15, 23, 42, 1)',
+    secondaryContainer: 'rgba(30, 58, 138, 0.2)',
+    onSecondaryContainer: 'rgba(147, 197, 253, 1)',
 
-    tertiary: '#FBBF24',
-    onTertiary: '#78350F',
-    tertiaryContainer: '#92400E',
-    onTertiaryContainer: '#78350F',
+    tertiary: 'rgba(253, 224, 71, 1)',
+    onTertiary: 'rgba(38, 38, 38, 1)',
+    tertiaryContainer: 'rgba(146, 64, 14, 1)',
+    onTertiaryContainer: 'rgba(120, 53, 15, 1)',
 
-    surface: '#111827',
-    onSurface: '#F9FAFB',
-    surfaceVariant: '#374151',
-    onSurfaceVariant: '#D1D5DB',
+    background: 'rgb(22, 21, 21)',
+    onBackground: 'rgba(229, 231, 235, 1)',
+    backgroundDisabled: 'rgba(10, 10, 10, 0.5)',
+    blueBackground: 'rgba(255, 255, 255, 0.25)',
 
-    background: '#0F172A',
-    onBackground: '#F9FAFB',
+    surface: 'rgba(24, 33, 51, 1)',
+    onSurface: 'rgba(229, 231, 235, 1)',
+    surfaceVariant: '#2e2e2e',
+    onSurfaceVariant: 'rgba(203, 213, 225, 1)',
 
-    error: '#EF4444',
-    onError: '#FFFFFF',
-    errorContainer: '#B91C1C',
-    onErrorContainer: '#EF4444',
+    surfaceDisabled: 'rgba(255, 255, 255, 0.05)',
+    onSurfaceDisabled: 'rgba(255, 255, 255, 0.26)',
 
-    outline: '#4B5563',
-    outlineVariant: '#374151',
+    error: 'rgba(239, 68, 68, 1)',
+    onError: 'rgba(255, 255, 255, 1)',
+    errorContainer: 'rgba(239, 68, 68, 0.05)',
+    onErrorContainer: 'rgba(255, 255, 255, 0.92)',
 
-    shadow: 'rgba(0, 0, 0, 0.7)',
-    scrim: 'rgba(0, 0, 0, 0.7)',
-    backdrop: 'rgba(15, 23, 42, 0.7)',
+    outline: 'rgba(148, 163, 184, 0.35)',
+    outlineDisabled: 'rgba(58, 58, 58, 1)',
+    outlineVariant: 'rgba(71, 85, 105, 1)',
 
-    inverseSurface: '#F9FAFB',
-    inverseOnSurface: '#1F2937',
-    inversePrimary: '#2563EB',
+    border: 'rgba(223, 223, 223, 0.12)',
+    borderDisabled: 'rgba(223, 223, 223, 0.05)',
+
+    shadow: 'rgba(0, 0, 0, 0.5)',
+    scrim: 'rgba(0, 0, 0, 0.4)',
+    backdrop: 'rgba(30, 41, 59, 0.7)',
+
+    inverseSurface: 'rgba(229, 231, 235, 1)',
+    inverseOnSurface: 'rgba(31, 41, 55, 1)',
+    inversePrimary: 'rgba(37, 99, 235, 1)',
 
     elevation: {
       level0: 'transparent',
-      level1: '#1F2937',
-      level2: '#111827',
-      level3: '#0F172A',
-      level4: '#0B1120',
-      level5: '#090E1A',
+      level1: 'rgba(30, 41, 59, 1)',
+      level2: 'rgba(37, 44, 60, 1)',
+      level3: 'rgba(51, 65, 85, 1)',
+      level4: 'rgba(71, 85, 105, 1)',
+      level5: 'rgba(100, 116, 139, 1)'
     },
 
-    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)',
-  },
+    textPrimary: 'rgba(243, 244, 246, 1)',
+    textSecondary: 'rgba(203, 213, 225, 0.85)',
+    textDisabled: 'rgba(148, 163, 184, 0.6)',
+
+    button: 'rgba(250, 204, 21, 1)',
+    buttonDisabled: 'rgba(250, 204, 21, 0.5)',
+    buttonText: 'rgba(15, 23, 42, 1)',
+
+    white: 'rgba(255, 255, 255, 1)',
+    black: 'rgba(0, 0, 0, 1)',
+    transparent: 'rgba(255, 255, 255, 0.04)',
+
+    backgroundLayoutGradient: [
+      'rgba(22, 21, 21, 0.65)',
+      'rgba(22, 21, 21, 0.98)',
+      'rgb(22, 21, 21)',
+      'rgb(22, 21, 21)'
+    ],
+    heroBannerGradient: ['rgba(22,21,21,0)', 'rgba(22,21,21,0.4)', 'rgb(22,21,21)'],
+
+    cardGradient: ['rgba(223, 178, 50, 1)', 'rgba(243, 146, 35, 1)', 'rgba(248, 159, 16, 1)'],
+
+    skeletonHighlightColor: '#C2C2C2',
+    skeletonBaseColor: '#2A2A2A',
+
+    switchTrackColor: '#3CD141',
+    switchThumbColor: 'white',
+    switchTrackColorDisabled: '#D5D5D5',
+    switchThumbColorDisabled: 'white'
+  }
 };

package/src/types/content/content-view.types.ts

@@ -0,0 +1,148 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Fri 04 Jul 2025 at 10:58 AM
+ */
+
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { ImageStyle as FastImageStyle } from 'react-native-fast-image';
+import type { AppTheme, ITheme } from '../../theme/themes';
+import type { IContentData } from '../../types';
+import type { IGetSectionData, ISectionItem } from '../../types/sections';
+import type { MoreFetchData } from '../../types/hook/usePaginatedSetion';
+import type { IHistoryItem } from '../../components/User/WatchHistory/WatchHistory';
+import type React from 'react';
+
+// 🔷 Common Style Aliases
+export type ViewStyleProp = StyleProp<ViewStyle>;
+export type TextStyleProp = StyleProp<TextStyle>;
+export type FastImageStyleProp = StyleProp<FastImageStyle>;
+
+// 🔹 UI Style Overrides
+export type TitleStyles = {
+  container?: ViewStyleProp;
+  title?: TextStyleProp;
+  subTitle?: TextStyleProp;
+  rating?: TextStyleProp;
+};
+
+export type GenreTagStyles = {
+  container?: ViewStyleProp;
+  tagContainer?: ViewStyleProp;
+  tagText?: TextStyleProp;
+  skeletonTag?: ViewStyleProp;
+};
+
+export type AboutSectionStyles = {
+  container?: ViewStyleProp;
+  title?: TextStyleProp;
+  body?: TextStyleProp;
+  scrollExpanded?: ViewStyleProp;
+  toggleText?: TextStyleProp;
+  skeletonLine?: ViewStyleProp;
+};
+
+export type CastCardStyles = {
+  container?: ViewStyleProp;
+  heading?: TextStyleProp;
+  listContent?: ViewStyleProp;
+  card?: ViewStyleProp;
+  image?: FastImageStyleProp;
+  name?: TextStyleProp;
+  role?: TextStyleProp;
+  imageSkeleton?: ViewStyleProp;
+  nameSkeleton?: ViewStyleProp;
+  roleSkeleton?: ViewStyleProp;
+};
+
+export type RecommendedCardStyles = {
+  renderItemImage?: (params: { item: IContentData; index: number }) => React.ReactNode;
+  itemWidth?: number;
+  itemHeight?: number;
+  borderRadius?: number;
+  skeletonCount?: number;
+  containerStyle?: ViewStyleProp;
+  titleStyle?: TextStyleProp;
+  itemStyle?: ViewStyleProp;
+};
+
+// 🟩 Events
+export type PlayEventArgs = {
+  id: string;
+  slug: string;
+  type: IContentData['type'];
+  episodeId?: string;
+  current_season?: string;
+  current_episode?: string;
+  episode_number?: number;
+  is_trailer?: boolean;
+  seekTime?: number;
+  mode?: 'fullscreen' | 'normal';
+};
+
+export type ContentViewEvents = {
+  onPlay?: (args: PlayEventArgs) => void;
+  onPressRecommendedItem?: (args: { item: IContentData }) => void;
+  onPressRecommendedMore?: (args: {
+    section_id: IGetSectionData['_id'];
+    name: IGetSectionData['name'];
+    type: IGetSectionData['type'];
+  }) => void;
+  onBackPress?: () => void;
+  onPressCast?: (args: { cast: IContentData }) => void;
+  moreFetchDataRecommended?: MoreFetchData<IContentData>;
+};
+
+// 🟦 Menu
+export type MenuAction = {
+  label: string;
+  icon?: (props: { size?: number; color?: string }) => React.ReactNode;
+  onPress: () => void;
+  isLoading?: boolean;
+};
+
+// 🟨 HeroBanner
+export type RenderButtons = Partial<{
+  back: () => React.ReactNode;
+  menu: () => React.ReactNode;
+  play: () => React.ReactNode;
+  trailer: () => React.ReactNode;
+}>;
+
+export type SkeletonOverrides = Partial<{
+  play: () => React.ReactNode;
+  trailer: () => React.ReactNode;
+  back: () => React.ReactNode;
+  menu: () => React.ReactNode;
+}>;
+
+export type HeroBannerProps = {
+  backgroundImage: IContentData['thumbnail'];
+  title: IContentData['name'];
+  theme: ITheme;
+  isLoading?: boolean;
+  onPressPlay?: () => void;
+  onBackPress?: () => void;
+  style?: ViewStyleProp;
+  renderButtons?: RenderButtons;
+  renderSkeletons?: SkeletonOverrides;
+  menuActions?: MenuAction[];
+};
+
+// 🟧 Final Component Props
+export type ComponentProps = {
+  content: IContentData;
+  seasons?: IContentData['seasons'];
+  theme?: AppTheme;
+  isLoading?: boolean;
+  seasonsIsLoading?: boolean;
+  recommendedContent?: ISectionItem | null;
+  events?: ContentViewEvents;
+  heroBannerProps?: Partial<HeroBannerProps>;
+  titleStyles?: TitleStyles;
+  genreTagsStyles?: GenreTagStyles;
+  aboutSectionStyles?: AboutSectionStyles;
+  castStyles?: CastCardStyles;
+  recommendedContentCardStyles?: RecommendedCardStyles;
+  history?: IHistoryItem;
+  episodeCardMode?: 'horizontal' | 'vertical';
+};