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

package/src/components/Button/MenuBtn.tsx

@@ -0,0 +1,190 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 02 Jul 2025 at 12:35 PM
+ */
+
+import React, { useState, useMemo, useCallback, useRef } from 'react';
+import {
+  TouchableOpacity,
+  View,
+  StyleSheet,
+  Modal,
+  Pressable,
+  Text,
+  Platform,
+  findNodeHandle,
+  UIManager,
+  StatusBar,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native';
+import { Ellipsis } from 'lucide-react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { BlurView } from '@react-native-community/blur';
+import { useTheme } from '../../theme/hook/useTheme';
+import { scale, verticalScale } from 'react-native-size-matters';
+import type { AppTheme } from '../../theme/themes';
+import type { MenuAction } from '../../types/content/content-view.types';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+type MenuBtnProps = {
+  actions: MenuAction[];
+  theme?: AppTheme;
+  style?: StyleProp<ViewStyle>;
+  enableBlur?: boolean;
+};
+
+const MenuBtn: React.FC<MenuBtnProps> = ({ actions, theme, style, enableBlur = false }) => {
+  const insets = useSafeAreaInsets();
+  const { theme: appliedTheme } = useTheme(theme);
+  const [visible, setVisible] = useState(false);
+  const [menuPosition, setMenuPosition] = useState<{ top: number; right: number }>({ top: 0, right: scale(13) });
+
+  const btnRef = useRef(null);
+
+  const flattenedStyle = useMemo(() => StyleSheet.flatten(style) || {}, [style]);
+  const shouldRenderBlur = useMemo(
+    () => enableBlur && !!flattenedStyle.backgroundColor,
+    [enableBlur, flattenedStyle.backgroundColor]
+  );
+
+  const openMenu = useCallback(() => {
+    const handle = findNodeHandle(btnRef.current);
+    if (handle) {
+      UIManager.measureInWindow(handle, (_x, y, _w, _h) => {
+        const extraOffset = Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) - verticalScale(2) : 0;
+        setMenuPosition({ top: y + verticalScale(32) + extraOffset, right: scale(13) });
+        setVisible(true);
+      });
+    } else {
+      setVisible(true);
+    }
+  }, []);
+
+  const closeMenu = useCallback(() => setVisible(false), []);
+  const memoizedActions = useMemo(() => actions, [actions]);
+
+  return (
+    <>
+      <TouchableOpacity
+        ref={btnRef}
+        activeOpacity={0.7}
+        style={[styles.container, { top: insets.top + verticalScale(5) }, style]}
+        onPress={openMenu}
+      >
+        {shouldRenderBlur && Platform.OS === 'ios' ? (
+          <BlurView
+            style={StyleSheet.absoluteFill}
+            blurType="light"
+            blurAmount={10}
+            reducedTransparencyFallbackColor={String(flattenedStyle.backgroundColor || appliedTheme.colors.backdrop)}
+          />
+        ) : (
+          <View
+            style={[
+              StyleSheet.absoluteFill,
+              { backgroundColor: flattenedStyle.backgroundColor || appliedTheme.colors.backdrop }
+            ]}
+          />
+        )}
+        <Ellipsis size={scale(20)} color={appliedTheme.colors.textPrimary} />
+      </TouchableOpacity>
+
+      <Modal
+        transparent
+        visible={visible}
+        animationType="fade"
+        onRequestClose={closeMenu}
+        hardwareAccelerated
+        presentationStyle="overFullScreen"
+        statusBarTranslucent
+      >
+        <Pressable style={styles.modalRoot} onPress={closeMenu}>
+          <Pressable
+            onPress={() => {}}
+            style={[
+              styles.menuBox,
+              {
+                position: 'absolute',
+                top: menuPosition.top,
+                right: menuPosition.right,
+                backgroundColor: appliedTheme.colors.surface
+              }
+            ]}
+          >
+            {memoizedActions.map((action, index) => (
+              <Pressable
+                key={`${action.label}-${index}`}
+                onPress={() => {
+                  closeMenu();
+                  try {
+                    action.onPress();
+                  } catch (error) {
+                    console.error('Action failed:', error);
+                  }
+                }}
+                disabled={action.isLoading || false}
+                style={({ pressed }) => [
+                  styles.menuItem,
+                  {
+                    backgroundColor: pressed ? appliedTheme.colors.surfaceVariant : 'transparent'
+                  }
+                ]}
+              >
+                {action?.icon && (
+                  <View style={styles.iconBox}>
+                    <action.icon size={scale(18)} color={appliedTheme.colors.textPrimary} />
+                  </View>
+                )}
+                <Text style={[styles.label, { color: appliedTheme.colors.textPrimary }]}>{action.label}</Text>
+              </Pressable>
+            ))}
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </>
+  );
+};
+
+export default React.memo(MenuBtn);
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    right: scale(13),
+    padding: scale(6),
+    borderRadius: scale(100),
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+    zIndex: 4
+  },
+  modalRoot: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.2)'
+  },
+  menuBox: {
+    borderRadius: scale(6),
+    elevation: 5,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+    minWidth: scale(150),
+    paddingVertical: verticalScale(2)
+  },
+  menuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: verticalScale(8),
+    paddingHorizontal: scale(10),
+    borderRadius: scale(5)
+  },
+  iconBox: {
+    marginRight: scale(8)
+  },
+  label: {
+    fontSize: RFValue(12),
+    includeFontPadding: false
+  }
+});

package/src/components/Button/PrimaryBtn.tsx

@@ -0,0 +1,89 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 17 Jun 2025 at 10:45 AM
+ */
+
+import React from 'react';
+import {
+  TouchableOpacity,
+  ActivityIndicator,
+  StyleSheet,
+  View,
+  type GestureResponderEvent,
+  type ViewStyle,
+  type TextStyle
+} from 'react-native';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { useTheme } from '../../theme/hook/useTheme';
+import { Text } from '../Text';
+import type { AppTheme } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+type PrimaryBtnProps = {
+  title: string;
+  onPress?: (event: GestureResponderEvent) => void;
+  loading?: boolean;
+  loadingText?: string;
+  disabled?: boolean;
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  theme?: AppTheme;
+};
+
+export const PrimaryBtn: React.FC<PrimaryBtnProps> = ({
+  title,
+  onPress,
+  loading = false,
+  loadingText = 'Loading...',
+  disabled = false,
+  containerStyle,
+  titleStyle,
+  theme
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const backgroundColor = disabled || loading ? appliedTheme.colors?.buttonDisabled : appliedTheme.colors?.button;
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={disabled || loading}
+      activeOpacity={0.8}
+      style={[styles.button, { backgroundColor }, containerStyle]}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: disabled || loading }}
+    >
+      {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]}>
+            {loadingText}
+          </Text>
+        </View>
+      ) : (
+        <Text style={[styles.text, { color: appliedTheme.colors.buttonText }, titleStyle]}>{title}</Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    width: '100%',
+    alignSelf: 'stretch',
+    paddingVertical: verticalScale(12),
+    paddingHorizontal: scale(16),
+    borderRadius: scale(6),
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  text: {
+    textAlign: 'center',
+    fontSize: RFValue(13),
+    fontWeight: '600'
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});

package/src/components/Button/TextButton.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+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';
+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 } = useTheme();
+
+  const alignSelfMap: Record<'left' | 'center' | 'right', ViewStyle['alignSelf']> = {
+    left: 'flex-start',
+    center: 'center',
+    right: 'flex-end'
+  };
+  const alignSelf = alignSelfMap[align];
+
+  const textStyle: TextStyle = {
+    textAlign: align,
+    textDecorationLine: underline ? 'underline' : 'none',
+    fontWeight: bold ? '700' : '400'
+  };
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+      style={({ pressed }) => [
+        styles.defaultContainer,
+        { alignSelf },
+        containerStyle,
+        pressed && styles.pressed,
+        disabled && styles.disabled
+      ]}
+    >
+      <View
+        style={[
+          styles.row,
+          {
+            justifyContent: align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center'
+          }
+        ]}
+      >
+        {leftIcon && <View style={styles.iconSpacing}>{leftIcon}</View>}
+        <Text
+          color={color || theme.colors.textPrimary}
+          style={[styles.text, textStyle, style]}
+          size={12}
+          numberOfLines={1}
+          allowFontScaling={false}
+        >
+          {title}
+        </Text>
+      </View>
+    </Pressable>
+  );
+};
+
+export default 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

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

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

@@ -0,0 +1,263 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 30 Jun 2025 at 10:46 PM
+ */
+
+import React, { useRef, useLayoutEffect, useCallback, useMemo, useState, useEffect } from 'react';
+import {
+  View,
+  FlatList,
+  TouchableOpacity,
+  StyleSheet,
+  Dimensions,
+  InteractionManager,
+  type LayoutChangeEvent,
+  type ListRenderItemInfo
+} from 'react-native';
+import { Text } from '../../../Text';
+import { useTheme } from '../../../../theme/hook/useTheme';
+import { scale, verticalScale } from 'react-native-size-matters';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import type { AppTheme } 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?: AppTheme;
+  mode?: 'text' | 'filled';
+  isLoading?: boolean;
+};
+
+const ITEM_WIDTH = scale(80);
+const CONTAINER_PADDING = scale(14);
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>(undefined);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+const CategoryCard = React.memo(
+  ({ 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 prevCategoryId = usePrevious(selectedCategory?._id);
+
+    const scrollToCategory = useCallback(
+      (index: number, animated: boolean) => {
+        if (!flatListRef.current || index < 0 || index >= category.length) return;
+
+        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
+          });
+        });
+      },
+      [category, itemWidths]
+    );
+
+    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) scrollToCategory(index, true);
+      }
+    }, [selectedCategory, category, scrollToCategory, prevCategoryId]);
+
+    const handlePress = useCallback(
+      (item: ICategory) => {
+        onPressCategory?.(item);
+        const index = category.findIndex((cat) => cat._id === item._id);
+        if (index >= 0) {
+          setTimeout(() => scrollToCategory(index, true), 10);
+        }
+      },
+      [category, onPressCategory, scrollToCategory]
+    );
+
+    const renderItem = useCallback(
+      ({ item, index }: ListRenderItemInfo<ICategory>) => {
+        const isSelected = item._id === selectedCategory?._id;
+        const isFilledMode = mode === 'filled';
+
+        const containerStyle = [
+          styles.tabContainer,
+          isFilledMode && {
+            borderRadius: scale(8),
+            borderWidth: scale(1),
+            borderColor: isSelected ? appliedTheme.colors.primary : appliedTheme.colors.outline,
+            backgroundColor: isSelected ? appliedTheme.colors.primary : 'transparent'
+          }
+        ];
+
+        const textColor = isFilledMode
+          ? isSelected
+            ? appliedTheme.colors.black
+            : appliedTheme.colors.textPrimary
+          : isSelected
+            ? appliedTheme.colors.primary
+            : appliedTheme.colors.textPrimary;
+
+        return (
+          <TouchableOpacity
+            activeOpacity={0.9}
+            onPress={() => handlePress(item)}
+            style={containerStyle}
+            onLayout={(event) => onItemLayout(event, index)}
+            accessibilityLabel={`Select category ${item.name}`}
+          >
+            <Text
+              style={[
+                styles.tabText,
+                {
+                  color: textColor
+                }
+              ]}
+            >
+              {item.name}
+            </Text>
+            {mode === 'text' && isSelected && (
+              <View style={[styles.underline, { backgroundColor: appliedTheme.colors.primary }]} />
+            )}
+          </TouchableOpacity>
+        );
+      },
+      [selectedCategory, mode, appliedTheme, handlePress, onItemLayout]
+    );
+
+    const renderSkeleton = useCallback(
+      () => (
+        <SkeletonPlaceholder
+          backgroundColor={appliedTheme.colors.skeletonBaseColor}
+          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+        >
+          <View style={[styles.listContainer, { flexDirection: 'row' }]}>
+            {[...Array(5)].map((_, index) => (
+              <View
+                key={index}
+                style={{
+                  width: ITEM_WIDTH - scale(20),
+                  height: verticalScale(26),
+                  borderRadius: scale(8),
+                  marginRight: scale(8)
+                }}
+              />
+            ))}
+          </View>
+        </SkeletonPlaceholder>
+      ),
+      [appliedTheme]
+    );
+
+    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]
+    );
+
+    return (
+      <View style={styles.container}>
+        {isLoading ? (
+          renderSkeleton()
+        ) : (
+          <FlatList
+            ref={flatListRef}
+            data={category}
+            keyExtractor={(item) => item._id}
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.listContainer}
+            extraData={selectedCategory?._id}
+            renderItem={renderItem}
+            getItemLayout={getItemLayout}
+            decelerationRate="fast"
+            scrollEnabled
+            scrollEventThrottle={16}
+            initialNumToRender={10}
+            maxToRenderPerBatch={12}
+            windowSize={5}
+          />
+        )}
+      </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;