@zezosoft/zezo-ott-react-native-ui-kit 1.0.2 → 1.0.4

package/src/components/Button/PrimaryBtn.tsx

@@ -11,7 +11,7 @@ import {
   View,
   type GestureResponderEvent,
   type ViewStyle,
-  type TextStyle
+  type TextStyle,
 } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { useTheme } from '../../theme/hook/useTheme';
@@ -38,10 +38,13 @@ export const PrimaryBtn: React.FC<PrimaryBtnProps> = ({
   disabled = false,
   containerStyle,
   titleStyle,
-  theme
+  theme,
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
-  const backgroundColor = disabled || loading ? appliedTheme.colors?.buttonDisabled : appliedTheme.colors?.button;
+  const backgroundColor =
+    disabled || loading
+      ? appliedTheme.colors?.buttonDisabled
+      : appliedTheme.colors?.button;
 
   return (
     <TouchableOpacity
@@ -54,13 +57,30 @@ export const PrimaryBtn: React.FC<PrimaryBtnProps> = ({
     >
       {loading ? (
         <View style={styles.row}>
-          <ActivityIndicator color={appliedTheme.colors.buttonText} style={{ marginRight: scale(8) }} />
-          <Text style={[styles.text, { color: appliedTheme.colors.buttonText, opacity: 0.75 }, titleStyle]}>
+          <ActivityIndicator
+            color={appliedTheme.colors.buttonText}
+            style={{ marginRight: scale(8) }}
+          />
+          <Text
+            style={[
+              styles.text,
+              { color: appliedTheme.colors.buttonText, opacity: 0.75 },
+              titleStyle,
+            ]}
+          >
             {loadingText}
           </Text>
         </View>
       ) : (
-        <Text style={[styles.text, { color: appliedTheme.colors.buttonText }, titleStyle]}>{title}</Text>
+        <Text
+          style={[
+            styles.text,
+            { color: appliedTheme.colors.buttonText },
+            titleStyle,
+          ]}
+        >
+          {title}
+        </Text>
       )}
     </TouchableOpacity>
   );
@@ -74,16 +94,16 @@ const styles = StyleSheet.create({
     paddingHorizontal: scale(16),
     borderRadius: scale(6),
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   text: {
     textAlign: 'center',
     fontSize: RFValue(13),
-    fontWeight: '600'
+    fontWeight: '600',
   },
   row: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center'
-  }
+    justifyContent: 'center',
+  },
 });

package/src/components/Button/TextButton.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { StyleSheet, Pressable, View, type GestureResponderEvent, type TextStyle, type ViewStyle } from 'react-native';
+import {
+  StyleSheet,
+  Pressable,
+  View,
+  type GestureResponderEvent,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
 import { useTheme } from '../../theme/hook/useTheme';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Text } from '../Text';
@@ -28,21 +35,24 @@ const TextButton: React.FC<TextButtonProps> = ({
   underline = false,
   bold = false,
   align = 'center',
-  leftIcon
+  leftIcon,
 }) => {
   const { theme } = useTheme();
 
-  const alignSelfMap: Record<'left' | 'center' | 'right', ViewStyle['alignSelf']> = {
+  const alignSelfMap: Record<
+    'left' | 'center' | 'right',
+    ViewStyle['alignSelf']
+  > = {
     left: 'flex-start',
     center: 'center',
-    right: 'flex-end'
+    right: 'flex-end',
   };
   const alignSelf = alignSelfMap[align];
 
   const textStyle: TextStyle = {
     textAlign: align,
     textDecorationLine: underline ? 'underline' : 'none',
-    fontWeight: bold ? '700' : '400'
+    fontWeight: bold ? '700' : '400',
   };
 
   return (
@@ -56,15 +66,20 @@ const TextButton: React.FC<TextButtonProps> = ({
         { alignSelf },
         containerStyle,
         pressed && styles.pressed,
-        disabled && styles.disabled
+        disabled && styles.disabled,
       ]}
     >
       <View
         style={[
           styles.row,
           {
-            justifyContent: align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center'
-          }
+            justifyContent:
+              align === 'left'
+                ? 'flex-start'
+                : align === 'right'
+                  ? 'flex-end'
+                  : 'center',
+          },
         ]}
       >
         {leftIcon && <View style={styles.iconSpacing}>{leftIcon}</View>}
@@ -87,22 +102,22 @@ export default TextButton;
 const styles = StyleSheet.create({
   defaultContainer: {
     paddingVertical: verticalScale(4),
-    paddingHorizontal: scale(6)
+    paddingHorizontal: scale(6),
   },
   text: {
-    fontSize: RFValue(10)
+    fontSize: RFValue(10),
   },
   row: {
     flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   iconSpacing: {
-    marginRight: scale(1)
+    marginRight: scale(1),
   },
   pressed: {
-    opacity: 0.6
+    opacity: 0.6,
   },
   disabled: {
-    opacity: 0.4
-  }
+    opacity: 0.4,
+  },
 });

package/src/components/Button/index.ts

@@ -10,7 +10,7 @@ import TextButton from './TextButton';
 const Button = {
   Primary: PrimaryBtn,
   BackBtn,
-  TextButton
+  TextButton,
 };
 
 export { Button };

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

@@ -3,7 +3,14 @@
  * @lastModified Mon 30 Jun 2025 at 10:46 PM
  */
 
-import React, { useRef, useLayoutEffect, useCallback, useMemo, useState, useEffect } from 'react';
+import React, {
+  useRef,
+  useLayoutEffect,
+  useCallback,
+  useMemo,
+  useState,
+  useEffect,
+} from 'react';
 import {
   View,
   FlatList,
@@ -12,7 +19,7 @@ import {
   Dimensions,
   InteractionManager,
   type LayoutChangeEvent,
-  type ListRenderItemInfo
+  type ListRenderItemInfo,
 } from 'react-native';
 import { Text } from '../../../Text';
 import { useTheme } from '../../../../theme/hook/useTheme';
@@ -53,18 +60,29 @@ function usePrevious<T>(value: T): T | undefined {
 }
 
 const CategoryCard = React.memo(
-  ({ category = [], activeCategory, onPressCategory, theme, mode = 'text', isLoading = false }: CategoryCardProps) => {
+  ({
+    category = [],
+    activeCategory,
+    onPressCategory,
+    theme,
+    mode = 'text',
+    isLoading = false,
+  }: CategoryCardProps) => {
     const { theme: appliedTheme } = useTheme(theme);
     const flatListRef = useRef<FlatList<ICategory>>(null);
     const [itemWidths, setItemWidths] = useState<number[]>([]);
 
-    const selectedCategory = useMemo(() => activeCategory || category?.[0] || null, [activeCategory, category]);
+    const selectedCategory = useMemo(
+      () => activeCategory || category?.[0] || null,
+      [activeCategory, category]
+    );
 
     const prevCategoryId = usePrevious(selectedCategory?._id);
 
     const scrollToCategory = useCallback(
       (index: number, animated: boolean) => {
-        if (!flatListRef.current || index < 0 || index >= category.length) return;
+        if (!flatListRef.current || index < 0 || index >= category.length)
+          return;
 
         const RIGHT_SCROLL_BIAS = scale(40);
         const offset = itemWidths.length
@@ -72,30 +90,42 @@ const CategoryCard = React.memo(
             (itemWidths[index] ?? ITEM_WIDTH) / 2 -
             SCREEN_WIDTH / 2 +
             RIGHT_SCROLL_BIAS
-          : index * ITEM_WIDTH + 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
+            animated,
           });
         });
       },
       [category, itemWidths]
     );
 
-    const onItemLayout = useCallback((event: LayoutChangeEvent, index: number) => {
-      const { width } = event.nativeEvent.layout;
-      setItemWidths((prev) => {
-        const newWidths = [...prev];
-        newWidths[index] = width;
-        return newWidths;
-      });
-    }, []);
+    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 (
+        selectedCategory &&
+        category.length > 0 &&
+        selectedCategory._id !== prevCategoryId
+      ) {
+        const index = category.findIndex(
+          (cat) => cat._id === selectedCategory._id
+        );
         if (index >= 0) scrollToCategory(index, true);
       }
     }, [selectedCategory, category, scrollToCategory, prevCategoryId]);
@@ -121,9 +151,13 @@ const CategoryCard = React.memo(
           isFilledMode && {
             borderRadius: scale(8),
             borderWidth: scale(1),
-            borderColor: isSelected ? appliedTheme.colors.primary : appliedTheme.colors.outline,
-            backgroundColor: isSelected ? appliedTheme.colors.primary : 'transparent'
-          }
+            borderColor: isSelected
+              ? appliedTheme.colors.primary
+              : appliedTheme.colors.outline,
+            backgroundColor: isSelected
+              ? appliedTheme.colors.primary
+              : 'transparent',
+          },
         ];
 
         const textColor = isFilledMode
@@ -146,14 +180,19 @@ const CategoryCard = React.memo(
               style={[
                 styles.tabText,
                 {
-                  color: textColor
-                }
+                  color: textColor,
+                },
               ]}
             >
               {item.name}
             </Text>
             {mode === 'text' && isSelected && (
-              <View style={[styles.underline, { backgroundColor: appliedTheme.colors.primary }]} />
+              <View
+                style={[
+                  styles.underline,
+                  { backgroundColor: appliedTheme.colors.primary },
+                ]}
+              />
             )}
           </TouchableOpacity>
         );
@@ -175,7 +214,7 @@ const CategoryCard = React.memo(
                   width: ITEM_WIDTH - scale(20),
                   height: verticalScale(26),
                   borderRadius: scale(8),
-                  marginRight: scale(8)
+                  marginRight: scale(8),
                 }}
               />
             ))}
@@ -188,8 +227,10 @@ const CategoryCard = React.memo(
     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
+        offset: itemWidths
+          .slice(0, index)
+          .reduce((sum, width) => sum + (width || ITEM_WIDTH), 0),
+        index,
       }),
       [itemWidths]
     );
@@ -232,32 +273,32 @@ const CategoryCard = React.memo(
 const styles = StyleSheet.create({
   container: {
     marginVertical: verticalScale(2),
-    paddingVertical: verticalScale(10)
+    paddingVertical: verticalScale(10),
   },
   listContainer: {
     paddingLeft: CONTAINER_PADDING,
     flexDirection: 'row',
-    paddingRight: CONTAINER_PADDING + scale(2)
+    paddingRight: CONTAINER_PADDING + scale(2),
   },
   tabContainer: {
     alignItems: 'center',
     justifyContent: 'center',
     marginRight: scale(8),
     paddingHorizontal: scale(12),
-    paddingVertical: verticalScale(6)
+    paddingVertical: verticalScale(6),
   },
   tabText: {
     fontSize: RFValue(10),
     textTransform: 'capitalize',
     fontWeight: '500',
-    lineHeight: scale(13)
+    lineHeight: scale(13),
   },
   underline: {
     marginTop: verticalScale(2),
     height: scale(2),
     width: '60%',
-    borderRadius: scale(2)
-  }
+    borderRadius: scale(2),
+  },
 });
 
 export default CategoryCard;