@zezosoft/zezo-ott-react-native-ui-kit 1.1.5 → 1.1.7

package/src/components/Headers/Four.tsx

@@ -1,83 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Fri 13 Jun 2025 at 11:10 AM
- */
-import React, { useMemo } from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { Logo } from '../Logo/Logo';
-import type { ThemeOverride } from '../../theme/themes';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import CategoryCardTwo, {
-  type ICategory,
-} from '../Content/Card/Category/CategroyTwo';
-
-export interface HeaderFourProps {
-  logoUri: string;
-  category?: ICategory[] | null;
-  activeCategory?: ICategory | null;
-  onPressCategory?: (category: ICategory) => void;
-  theme?: ThemeOverride;
-  isLoading?: boolean;
-}
-
-const HeaderFour: React.FC<HeaderFourProps> = ({
-  logoUri,
-  category,
-  activeCategory,
-  onPressCategory,
-  theme,
-  isLoading,
-}) => {
-  const insets = useSafeAreaInsets();
-
-  const headerStyle = useMemo(
-    () => [styles.headerContainer, { paddingTop: insets.top }],
-    [insets.top]
-  );
-
-  return (
-    <View style={headerStyle}>
-      <View style={styles.leftContainer}>
-        <View style={styles.logo}>
-          <Logo
-            width={scale(55)}
-            height={scale(50)}
-            logoUri={logoUri}
-            isLoading={isLoading}
-            theme={theme}
-          />
-        </View>
-        <CategoryCardTwo
-          category={category ?? undefined}
-          activeCategory={activeCategory ?? undefined}
-          onPressCategory={onPressCategory}
-          theme={theme}
-        />
-      </View>
-    </View>
-  );
-};
-
-export default React.memo(HeaderFour);
-
-const styles = StyleSheet.create({
-  headerContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    height: verticalScale(40),
-    paddingHorizontal: scale(8),
-  },
-
-  leftContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: scale(10),
-  },
-  logo: {
-    alignItems: 'center',
-    marginVertical: Platform.OS === 'ios' ? verticalScale(0) : verticalScale(5),
-  },
-});

package/src/components/Headers/One.tsx

@@ -1,115 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 25 Jun 2025 at 01:30 PM
- */
-
-import React, { useMemo } from 'react';
-import { Platform, Pressable, StyleSheet, View } from 'react-native';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { Logo } from '../Logo/Logo';
-import type { ThemeOverride } from '../../theme/themes';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import {
-  Menu as DefaultMenuIcon,
-  Search as DefaultSearchIcon,
-} from 'lucide-react-native';
-
-export interface HeaderOneProps {
-  theme?: ThemeOverride;
-  logoUri: string;
-  MenuIcon?: React.FC<{ width: number; height: number; color?: string }>;
-  SearchIcon?: React.FC<{ width: number; height: number; color?: string }>;
-  onMenuPress?: () => void;
-  onSearchPress?: () => void;
-  isLoading?: boolean;
-}
-
-const HeaderOne: React.FC<HeaderOneProps> = ({
-  theme,
-  logoUri,
-  MenuIcon = DefaultMenuIcon,
-  SearchIcon = DefaultSearchIcon,
-  onMenuPress,
-
-  onSearchPress,
-  isLoading,
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  const iconColor = appliedTheme.colors?.onSurface;
-  const rippleColor = appliedTheme.colors.surfaceVariant + '33';
-  const pressedBackgroundColor = appliedTheme.colors.surfaceVariant;
-
-  const MemoMenuIcon = useMemo(
-    () => <MenuIcon width={scale(28)} height={scale(28)} color={iconColor} />,
-    [MenuIcon, iconColor]
-  );
-
-  const MemoSearchIcon = useMemo(
-    () => <SearchIcon width={scale(28)} height={scale(28)} color={iconColor} />,
-    [SearchIcon, iconColor]
-  );
-
-  return (
-    <View style={styles.headerContainer}>
-      <View style={styles.leftContainer}>
-        <Pressable
-          onPress={onMenuPress}
-          android_ripple={{ color: rippleColor, borderless: true }}
-          style={({ pressed }) => [
-            styles.iconPressable,
-            pressed && { backgroundColor: pressedBackgroundColor },
-          ]}
-        >
-          {MemoMenuIcon}
-        </Pressable>
-
-        <View style={styles.logo}>
-          <Logo
-            width={scale(50)}
-            height={verticalScale(50)}
-            logoUri={logoUri}
-            resizeMode="contain"
-            isLoading={isLoading}
-          />
-        </View>
-      </View>
-
-      <Pressable
-        onPress={onSearchPress}
-        android_ripple={{ color: rippleColor, borderless: true }}
-        style={({ pressed }) => [
-          styles.iconPressable,
-          pressed && { backgroundColor: pressedBackgroundColor },
-        ]}
-      >
-        {MemoSearchIcon}
-      </Pressable>
-    </View>
-  );
-};
-
-export default React.memo(HeaderOne);
-
-const styles = StyleSheet.create({
-  headerContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: scale(8),
-    height: verticalScale(40),
-  },
-  leftContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: scale(10),
-  },
-  logo: {
-    alignItems: 'center',
-    marginVertical: Platform.OS === 'ios' ? verticalScale(0) : verticalScale(5),
-  },
-  iconPressable: {
-    padding: scale(6),
-    borderRadius: scale(20),
-  },
-});

package/src/components/Headers/Three.tsx

@@ -1,135 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Fri 13 Jun 2025 at 11:10 AM
- */
-import React, { useMemo } from 'react';
-import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
-import { scale, verticalScale } from 'react-native-size-matters';
-import LinearGradient from 'react-native-linear-gradient';
-import Animated, {
-  useAnimatedStyle,
-  interpolate,
-  Extrapolation,
-  type SharedValue,
-} from 'react-native-reanimated';
-import { Logo } from '../Logo/Logo';
-import type { ThemeOverride } from '../../theme/themes';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import CategoryCard from '../Content/Card/Category/Category';
-import type { ICategory } from '../Content/Card/Category/CategroyTwo';
-
-const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
-
-export interface HeaderThreeProps {
-  logoUri: string;
-  categories?: ICategory[];
-  activeCategory?: ICategory;
-  onPressCategory?: (category: ICategory) => void;
-  theme?: ThemeOverride;
-  isLoading?: boolean;
-  style?: StyleProp<ViewStyle>;
-  scrollY?: SharedValue<number>;
-  scrollThreshold?: number;
-}
-
-const HeaderThree: React.FC<HeaderThreeProps> = ({
-  logoUri,
-  categories,
-  theme,
-  isLoading,
-  style,
-  scrollY,
-  scrollThreshold = 50,
-  activeCategory,
-  onPressCategory,
-}) => {
-  const { theme: appliedTheme, isDarkMode } = useInternalTheme(theme);
-
-  const headerWrapperStyle = useMemo(
-    () => [styles.wrapper, { backgroundColor: 'transparent' }, style],
-    [style]
-  );
-
-  const gradientColors = useMemo(() => {
-    const bgColor = appliedTheme.colors.background;
-    return [bgColor, isDarkMode ? 'rgba(0,0, 0, 0)' : 'rgba(255,255, 255, 0)'];
-  }, [appliedTheme.colors.background, isDarkMode]);
-
-  const scrollBackgroundStyle = useAnimatedStyle(() => {
-    if (!scrollY) {
-      return { opacity: 0 };
-    }
-
-    const opacity = interpolate(
-      scrollY.value,
-      [0, scrollThreshold],
-      [0, 1],
-      Extrapolation.CLAMP
-    );
-
-    return {
-      opacity,
-    };
-  }, [scrollY, scrollThreshold]);
-
-  return (
-    <View style={headerWrapperStyle}>
-      {scrollY && (
-        <AnimatedLinearGradient
-          colors={gradientColors}
-          start={{ x: 0, y: 0 }}
-          end={{ x: 0, y: 1 }}
-          locations={[0.75, 1]}
-          style={[styles.scrollBackgroundOverlay, scrollBackgroundStyle]}
-        />
-      )}
-      <View style={styles.headerContent}>
-        <View style={styles.logoContainer}>
-          <Logo
-            width={scale(55)}
-            height={scale(50)}
-            logoUri={logoUri}
-            isLoading={isLoading}
-          />
-        </View>
-        {categories && (
-          <View style={styles.categoryWrapper}>
-            <CategoryCard
-              category={categories}
-              theme={theme}
-              activeCategory={activeCategory}
-              onPressCategory={onPressCategory}
-            />
-          </View>
-        )}
-      </View>
-    </View>
-  );
-};
-
-export default React.memo(HeaderThree);
-
-const styles = StyleSheet.create({
-  wrapper: {
-    overflow: 'hidden',
-  },
-  scrollBackgroundOverlay: {
-    ...StyleSheet.absoluteFillObject,
-  },
-  headerContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: scale(10),
-    minHeight: verticalScale(40),
-    zIndex: 9999,
-  },
-  logoContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginVertical: verticalScale(5),
-  },
-  categoryWrapper: {
-    flex: 1,
-    marginLeft: scale(10),
-  },
-});

package/src/components/Headers/Two.tsx

@@ -1,100 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Fri 13 Jun 2025 at 11:10 AM
- */
-import React, { useMemo, useCallback } from 'react';
-import { Platform, Pressable, StyleSheet, View } from 'react-native';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { Logo } from '../Logo/Logo';
-import type { ThemeOverride } from '../../theme/themes';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import { Menu } from 'lucide-react-native';
-export interface HeaderTwoProps {
-  theme?: ThemeOverride;
-  logoUri: string;
-  MenuIcon?: React.FC<{ width: number; height: number; color?: string }>;
-  onMenuPress?: () => void;
-  isLoading?: boolean;
-}
-
-const HeaderTwo: React.FC<HeaderTwoProps> = ({
-  theme,
-  logoUri,
-  MenuIcon = Menu,
-  onMenuPress,
-  isLoading,
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  const rippleColor = useMemo(
-    () => appliedTheme.colors.surfaceVariant + '33',
-    [appliedTheme.colors.surfaceVariant]
-  );
-
-  const pressedBackgroundColor = useMemo(
-    () => appliedTheme.colors.surfaceVariant,
-    [appliedTheme.colors.surfaceVariant]
-  );
-
-  const handleMenuPress = useCallback(() => {
-    onMenuPress?.();
-  }, [onMenuPress]);
-
-  const pressableStyle = useCallback(
-    ({ pressed }: { pressed: boolean }) => [
-      styles.iconPressable,
-      pressed && { backgroundColor: pressedBackgroundColor },
-    ],
-    [pressedBackgroundColor]
-  );
-
-  const MemoMenuIcon = useMemo(
-    () => <MenuIcon width={scale(28)} height={scale(28)} />,
-    [MenuIcon]
-  );
-
-  return (
-    <View style={styles.headerContainer}>
-      <Pressable
-        onPress={handleMenuPress}
-        android_ripple={{ color: rippleColor, borderless: true }}
-        style={pressableStyle}
-      >
-        {MemoMenuIcon}
-      </Pressable>
-      <View style={styles.logo}>
-        <Logo
-          width={scale(100)}
-          height={scale(80)}
-          logoUri={logoUri}
-          isLoading={isLoading}
-        />
-      </View>
-      <View style={styles.placeholder} />
-    </View>
-  );
-};
-
-export default React.memo(HeaderTwo);
-
-const styles = StyleSheet.create({
-  headerContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: scale(8),
-    height: verticalScale(40),
-  },
-  logo: {
-    flex: 1,
-    alignItems: 'center',
-    marginVertical: Platform.OS === 'ios' ? verticalScale(0) : verticalScale(5),
-  },
-  iconPressable: {
-    padding: scale(6),
-    borderRadius: scale(20),
-  },
-  placeholder: {
-    width: scale(28 + 12),
-  },
-});

package/src/components/Headers/index.ts

@@ -1,18 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Fri 13 Jun 2025 at 11:11 AM
- */
-
-import HeaderOne from './One';
-import HeaderThree from './Three';
-import HeaderTwo from './Two';
-import HeaderFour from './Four';
-
-const Header = {
-  One: HeaderOne,
-  Two: HeaderTwo,
-  Three: HeaderThree,
-  Four: HeaderFour,
-};
-
-export { Header };

package/src/components/Input/Input.ts

@@ -1,20 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Fri 13 Jun 2025 at 11:11 AM
- */
-
-import InputOne from './InputOne';
-import InputThree from './InputThree';
-import InputTwo from './InputTwo';
-import PhoneNumberInputOne from './PhoneNumberInput';
-import PhoneNumberInputTwo from './PhoneNumberInputTwo';
-
-const Input = {
-  One: InputOne,
-  Two: InputTwo,
-  Three: InputThree,
-  Phone: PhoneNumberInputOne,
-  phone: PhoneNumberInputTwo,
-};
-
-export { Input };