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

package/src/components/Button/TextButton.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { StyleSheet, Pressable, View, type GestureResponderEvent, type TextStyle, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { Text } from '../Text';
+
+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: scale(12)
+  },
+  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,262 @@
+/**
+ * @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';
+import { scale, verticalScale } from 'react-native-size-matters';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import type { AppTheme } from '../../../../theme/themes';
+
+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: scale(11),
+    textTransform: 'capitalize',
+    fontWeight: '500',
+    lineHeight: scale(13)
+  },
+  underline: {
+    marginTop: verticalScale(2),
+    height: scale(2),
+    width: '60%',
+    borderRadius: scale(2)
+  }
+});
+
+export default CategoryCard;