@zezosoft/zezo-ott-react-native-ui-kit 1.1.3 → 1.1.6

package/src/components/Button/TextButton.tsx

@@ -1,145 +0,0 @@
-import React, { useMemo } from 'react';
-import { useSafePressHandler } from '../../hooks/useSafeCallback';
-import {
-  StyleSheet,
-  Pressable,
-  View,
-  type GestureResponderEvent,
-  type TextStyle,
-  type ViewStyle,
-} from 'react-native';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { Text } from '../Text';
-import { RFValue } from 'react-native-responsive-fontsize';
-
-type TextButtonProps = {
-  title: string;
-  onPress: (event: GestureResponderEvent) => void;
-  color?: string;
-  style?: TextStyle;
-  containerStyle?: ViewStyle;
-  disabled?: boolean;
-  underline?: boolean;
-  bold?: boolean;
-  align?: 'left' | 'center' | 'right';
-  leftIcon?: React.ReactNode;
-};
-
-const TextButton: React.FC<TextButtonProps> = ({
-  title,
-  onPress,
-  color,
-  style,
-  containerStyle,
-  disabled = false,
-  underline = false,
-  bold = false,
-  align = 'center',
-  leftIcon,
-}) => {
-  const { theme } = useInternalTheme();
-
-  const alignSelfMap = useMemo<
-    Record<'left' | 'center' | 'right', ViewStyle['alignSelf']>
-  >(
-    () => ({
-      left: 'flex-start',
-      center: 'center',
-      right: 'flex-end',
-    }),
-    []
-  );
-
-  const alignSelf = useMemo(() => alignSelfMap[align], [alignSelfMap, align]);
-
-  const textStyle = useMemo<TextStyle>(
-    () => ({
-      textAlign: align,
-      textDecorationLine: underline ? 'underline' : 'none',
-      fontWeight: bold ? '700' : '400',
-    }),
-    [align, underline, bold]
-  );
-
-  const textColor = useMemo(
-    () => color || theme.colors.textPrimary,
-    [color, theme.colors.textPrimary]
-  );
-
-  const justifyContent = useMemo<ViewStyle['justifyContent']>(
-    () =>
-      align === 'left'
-        ? 'flex-start'
-        : align === 'right'
-          ? 'flex-end'
-          : 'center',
-    [align]
-  );
-
-  const rowStyle = useMemo<ViewStyle[]>(
-    () => [styles.row, { justifyContent }],
-    [justifyContent]
-  );
-
-  const finalTextStyle = useMemo(
-    () => [styles.text, textStyle, style],
-    [textStyle, style]
-  );
-
-  const handlePress = useSafePressHandler(onPress, disabled);
-
-  return (
-    <Pressable
-      onPress={handlePress}
-      disabled={disabled}
-      accessibilityRole="button"
-      accessibilityState={{ disabled }}
-      style={({ pressed }) => [
-        styles.defaultContainer,
-        { alignSelf },
-        containerStyle,
-        pressed && styles.pressed,
-        disabled && styles.disabled,
-      ]}
-    >
-      <View style={rowStyle}>
-        {leftIcon && <View style={styles.iconSpacing}>{leftIcon}</View>}
-        <Text
-          color={textColor}
-          style={finalTextStyle}
-          size={12}
-          numberOfLines={1}
-          allowFontScaling={false}
-        >
-          {title}
-        </Text>
-      </View>
-    </Pressable>
-  );
-};
-
-export default React.memo(TextButton);
-
-const styles = StyleSheet.create({
-  defaultContainer: {
-    paddingVertical: verticalScale(4),
-    paddingHorizontal: scale(6),
-  },
-  text: {
-    fontSize: RFValue(10),
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  iconSpacing: {
-    marginRight: scale(1),
-  },
-  pressed: {
-    opacity: 0.6,
-  },
-  disabled: {
-    opacity: 0.4,
-  },
-});

package/src/components/Button/index.ts

@@ -1,18 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Fri 13 Jun 2025 at 12:26 PM
- */
-
-import BackBtn from './BackBtn';
-import { PrimaryBtn } from './PrimaryBtn';
-import { SecondaryBtn } from './SecondaryBtn';
-import TextButton from './TextButton';
-
-const Button = {
-  Primary: PrimaryBtn,
-  Secondary: SecondaryBtn,
-  BackBtn,
-  TextButton,
-};
-
-export { Button };

package/src/components/Content/Card/Category/Category.tsx

@@ -1,429 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Mon 30 Jun 2025 at 10:46 PM
- */
-
-import React, {
-  useRef,
-  useLayoutEffect,
-  useEffect,
-  useCallback,
-  useMemo,
-  useState,
-} from 'react';
-import {
-  View,
-  FlatList,
-  TouchableOpacity,
-  StyleSheet,
-  Dimensions,
-  InteractionManager,
-  Platform,
-  Vibration,
-  type LayoutChangeEvent,
-  type ListRenderItemInfo,
-} from 'react-native';
-import { Text } from '../../../Text';
-import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
-import { scale, verticalScale } from 'react-native-size-matters';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import type { ThemeOverride } from '../../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-
-export type ICategory = {
-  _id: string;
-  name: string;
-  slug: string;
-  description: string;
-  order: number;
-  icon: string | null;
-  show_in_menu: boolean;
-};
-
-type CategoryCardProps = {
-  category?: ICategory[];
-  activeCategory?: ICategory;
-  onPressCategory?: (category: ICategory) => void;
-  theme?: ThemeOverride;
-  mode?: 'text' | 'filled';
-  isLoading?: boolean;
-};
-
-const ITEM_WIDTH = scale(80);
-const CONTAINER_PADDING = scale(14);
-const { width: SCREEN_WIDTH } = Dimensions.get('window');
-
-import { usePrevious } from '../../../../hooks/usePrevious';
-import { useSkeletonItems } from '../../../../hooks/useSkeletonItems';
-import { debounce } from 'lodash';
-
-const CategoryCard = React.memo(
-  ({
-    category = [],
-    activeCategory,
-    onPressCategory,
-    theme,
-    mode = 'text',
-    isLoading = false,
-  }: CategoryCardProps) => {
-    const { theme: appliedTheme } = useInternalTheme(theme);
-    const flatListRef = useRef<FlatList<ICategory>>(null);
-    const [itemWidths, setItemWidths] = useState<number[]>([]);
-    const isScrollingRef = useRef(false);
-    const lastPressedIndexRef = useRef<number | null>(null);
-
-    // Memoize theme colors
-    const themeColors = useMemo(
-      () => ({
-        primary: appliedTheme.colors.primary,
-        outline: appliedTheme.colors.outline,
-        buttonText: appliedTheme.colors.buttonText,
-        textPrimary: appliedTheme.colors.textPrimary,
-        skeletonBaseColor: appliedTheme.colors.skeletonBaseColor,
-        skeletonHighlightColor: appliedTheme.colors.skeletonHighlightColor,
-      }),
-      [appliedTheme.colors]
-    );
-
-    const selectedCategory = useMemo(
-      () => activeCategory || category?.[0] || null,
-      [activeCategory, category]
-    );
-
-    const prevCategoryId = usePrevious(selectedCategory?._id);
-
-    // Memoize skeleton items
-    const skeletonItems = useSkeletonItems(5);
-
-    // Memoize skeleton item style
-    const skeletonItemStyle = useMemo(
-      () => ({
-        width: ITEM_WIDTH - scale(20),
-        height: verticalScale(26),
-        borderRadius: scale(8),
-        marginRight: scale(8),
-      }),
-      []
-    );
-
-    // Memoize list container style with flexDirection
-    const listContainerStyle = useMemo(
-      () => [styles.listContainer, { flexDirection: 'row' as const }],
-      []
-    );
-
-    // Haptic feedback utility
-    const triggerHapticFeedback = useCallback(() => {
-      if (Platform.OS === 'ios') {
-        // iOS haptic feedback (light impact)
-        Vibration.vibrate(1);
-      } else if (Platform.OS === 'android') {
-        // Android haptic feedback (short vibration)
-        Vibration.vibrate(10);
-      }
-    }, []);
-
-    const scrollToCategory = useCallback(
-      (index: number, animated: boolean) => {
-        if (
-          !flatListRef.current ||
-          index < 0 ||
-          index >= category.length ||
-          isScrollingRef.current
-        )
-          return;
-
-        isScrollingRef.current = true;
-        const RIGHT_SCROLL_BIAS = scale(40);
-        const offset = itemWidths.length
-          ? itemWidths.slice(0, index).reduce((sum, w) => sum + w, 0) +
-            (itemWidths[index] ?? ITEM_WIDTH) / 2 -
-            SCREEN_WIDTH / 2 +
-            RIGHT_SCROLL_BIAS
-          : index * ITEM_WIDTH +
-            ITEM_WIDTH / 2 -
-            SCREEN_WIDTH / 2 +
-            RIGHT_SCROLL_BIAS;
-
-        InteractionManager.runAfterInteractions(() => {
-          flatListRef.current?.scrollToOffset({
-            offset: Math.max(0, offset),
-            animated,
-          });
-          // Reset scrolling flag after animation completes
-          if (animated) {
-            setTimeout(() => {
-              isScrollingRef.current = false;
-            }, 300);
-          } else {
-            isScrollingRef.current = false;
-          }
-        });
-      },
-      [category, itemWidths]
-    );
-
-    // Debounced scroll function to prevent rapid scrolling
-    const debouncedScrollToCategory = useMemo(
-      () =>
-        debounce((index: number, animated: boolean) => {
-          scrollToCategory(index, animated);
-        }, 100),
-      [scrollToCategory]
-    );
-
-    // Cleanup debounced function on unmount
-    useEffect(() => {
-      return () => {
-        debouncedScrollToCategory.cancel();
-      };
-    }, [debouncedScrollToCategory]);
-
-    const onItemLayout = useCallback(
-      (event: LayoutChangeEvent, index: number) => {
-        const { width } = event.nativeEvent.layout;
-        setItemWidths((prev) => {
-          const newWidths = [...prev];
-          newWidths[index] = width;
-          return newWidths;
-        });
-      },
-      []
-    );
-
-    useLayoutEffect(() => {
-      if (
-        selectedCategory &&
-        category.length > 0 &&
-        selectedCategory._id !== prevCategoryId
-      ) {
-        const index = category.findIndex(
-          (cat) => cat._id === selectedCategory._id
-        );
-        if (index >= 0 && index !== lastPressedIndexRef.current) {
-          // Use debounced scroll for external category changes
-          debouncedScrollToCategory(index, true);
-        }
-      }
-    }, [selectedCategory, category, debouncedScrollToCategory, prevCategoryId]);
-
-    const handlePress = useCallback(
-      (item: ICategory) => {
-        // Prevent rapid successive taps on the same item
-        const index = category.findIndex((cat) => cat._id === item._id);
-        if (index < 0) return;
-
-        // Check if same item is being pressed rapidly
-        if (lastPressedIndexRef.current === index && isScrollingRef.current) {
-          return;
-        }
-
-        lastPressedIndexRef.current = index;
-
-        // Trigger haptic feedback for better UX
-        triggerHapticFeedback();
-
-        // Call the callback
-        onPressCategory?.(item);
-
-        // Scroll to category with slight delay for smoother UX
-        requestAnimationFrame(() => {
-          scrollToCategory(index, true);
-        });
-      },
-      [category, onPressCategory, scrollToCategory, triggerHapticFeedback]
-    );
-
-    // Memoize filled mode selected style
-    const filledSelectedStyle = useMemo(
-      () => ({
-        borderRadius: scale(8),
-        borderWidth: scale(1),
-        borderColor: themeColors.primary,
-        backgroundColor: themeColors.primary,
-      }),
-      [themeColors.primary]
-    );
-
-    // Memoize filled mode unselected style
-    const filledUnselectedStyle = useMemo(
-      () => ({
-        borderRadius: scale(8),
-        borderWidth: scale(1),
-        borderColor: themeColors.outline,
-        backgroundColor: 'transparent',
-      }),
-      [themeColors.outline]
-    );
-
-    // Memoize underline style
-    const underlineStyle = useMemo(
-      () => [styles.underline, { backgroundColor: themeColors.primary }],
-      [themeColors.primary]
-    );
-
-    const renderItem = useCallback(
-      ({ item, index }: ListRenderItemInfo<ICategory>) => {
-        const isSelected = item._id === selectedCategory?._id;
-        const isFilledMode = mode === 'filled';
-
-        const containerStyle = [
-          styles.tabContainer,
-          isFilledMode &&
-            (isSelected ? filledSelectedStyle : filledUnselectedStyle),
-        ];
-
-        const textColor = isFilledMode
-          ? isSelected
-            ? themeColors.buttonText
-            : themeColors.textPrimary
-          : isSelected
-            ? themeColors.primary
-            : themeColors.textPrimary;
-
-        const textStyle = [styles.tabText, { color: textColor }];
-
-        return (
-          <TouchableOpacity
-            activeOpacity={0.7}
-            onPress={() => handlePress(item)}
-            style={containerStyle}
-            onLayout={(event) => onItemLayout(event, index)}
-            accessibilityLabel={`Select category ${item.name}`}
-            accessibilityRole="button"
-            accessibilityState={{ selected: isSelected }}
-            accessibilityHint={
-              isSelected
-                ? `${item.name} is currently selected`
-                : `Double tap to select ${item.name} category`
-            }
-          >
-            <Text style={textStyle}>{item.name}</Text>
-            {mode === 'text' && isSelected && <View style={underlineStyle} />}
-          </TouchableOpacity>
-        );
-      },
-      [
-        selectedCategory,
-        mode,
-        themeColors,
-        handlePress,
-        onItemLayout,
-        filledSelectedStyle,
-        filledUnselectedStyle,
-        underlineStyle,
-      ]
-    );
-
-    const renderSkeleton = useCallback(
-      () => (
-        <SkeletonPlaceholder
-          backgroundColor={themeColors.skeletonBaseColor}
-          highlightColor={themeColors.skeletonHighlightColor}
-        >
-          <View style={listContainerStyle}>
-            {skeletonItems.map((_, index) => (
-              <View key={index} style={skeletonItemStyle} />
-            ))}
-          </View>
-        </SkeletonPlaceholder>
-      ),
-      [themeColors, listContainerStyle, skeletonItems, skeletonItemStyle]
-    );
-
-    const getItemLayout = useCallback(
-      (_: unknown, index: number) => ({
-        length: itemWidths[index] || ITEM_WIDTH,
-        offset: itemWidths
-          .slice(0, index)
-          .reduce((sum, width) => sum + (width || ITEM_WIDTH), 0),
-        index,
-      }),
-      [itemWidths]
-    );
-
-    // Memoize keyExtractor
-    const keyExtractor = useCallback((item: ICategory) => item._id, []);
-
-    return (
-      <View style={styles.container}>
-        {isLoading ? (
-          renderSkeleton()
-        ) : (
-          <FlatList
-            ref={flatListRef}
-            data={category}
-            keyExtractor={keyExtractor}
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={styles.listContainer}
-            extraData={selectedCategory?._id}
-            renderItem={renderItem}
-            getItemLayout={getItemLayout}
-            decelerationRate="fast"
-            scrollEnabled
-            scrollEventThrottle={16}
-            initialNumToRender={10}
-            maxToRenderPerBatch={12}
-            windowSize={5}
-            removeClippedSubviews
-            onScrollBeginDrag={() => {
-              isScrollingRef.current = true;
-            }}
-            onScrollEndDrag={() => {
-              // Reset after a short delay to allow momentum scrolling
-              setTimeout(() => {
-                isScrollingRef.current = false;
-              }, 200);
-            }}
-            onMomentumScrollEnd={() => {
-              isScrollingRef.current = false;
-            }}
-            accessibilityLabel="Category selection list"
-            accessibilityRole="list"
-          />
-        )}
-      </View>
-    );
-  },
-  (prev, next) =>
-    prev.category === next.category &&
-    prev.activeCategory?._id === next.activeCategory?._id &&
-    prev.isLoading === next.isLoading &&
-    prev.mode === next.mode &&
-    prev.theme === next.theme &&
-    prev.onPressCategory === next.onPressCategory
-);
-
-const styles = StyleSheet.create({
-  container: {
-    marginVertical: verticalScale(2),
-    paddingVertical: verticalScale(10),
-  },
-  listContainer: {
-    paddingLeft: CONTAINER_PADDING,
-    flexDirection: 'row',
-    paddingRight: CONTAINER_PADDING + scale(2),
-  },
-  tabContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: scale(8),
-    paddingHorizontal: scale(12),
-    paddingVertical: verticalScale(6),
-  },
-  tabText: {
-    fontSize: RFValue(10),
-    textTransform: 'capitalize',
-    fontWeight: '500',
-    lineHeight: scale(13),
-  },
-  underline: {
-    marginTop: verticalScale(2),
-    height: scale(2),
-    width: '60%',
-    borderRadius: scale(2),
-  },
-});
-
-export default CategoryCard;