related-ui-components 1.8.0 → 1.8.2

package/src/components/Button/Button.tsx

@@ -0,0 +1,157 @@
+import React from "react";
+import {
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  ActivityIndicator,
+  StyleProp,
+  Platform,
+} from "react-native";
+import { LinearGradient, LinearGradientProps } from "expo-linear-gradient";
+
+type GradientProps = Omit<LinearGradientProps, "style" | "children">;
+
+export interface AppButtonProps {
+  title: string;
+  onPress: () => void;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  disabled?: boolean;
+  loading?: boolean;
+  activeOpacity?: number;
+  backgroundColor?: string;
+  gradientProps?: GradientProps;
+  loadingIndicatorColor?: string;
+  accessibilityLabel?: string;
+  testID?: string;
+}
+
+const DEFAULT_ACTIVE_OPACITY = 0.7;
+const DEFAULT_BACKGROUND_COLOR = Platform.OS === "ios" ? "#007AFF" : "#2196F3"; // iOS blue / Android blue
+
+const AppButton: React.FC<AppButtonProps> = ({
+  title,
+  onPress,
+  style,
+  textStyle,
+  disabled = false,
+  loading = false,
+  activeOpacity = DEFAULT_ACTIVE_OPACITY,
+  backgroundColor,
+  gradientProps,
+  loadingIndicatorColor,
+  accessibilityLabel,
+  testID,
+}) => {
+  const isActuallyDisabled = disabled || loading;
+
+  const getLoadingIndicatorColor = () => {
+    if (loadingIndicatorColor) return loadingIndicatorColor;
+    if (gradientProps) {
+      return "#FFFFFF";
+    }
+  };
+
+  const buttonContent = loading ? (
+    <ActivityIndicator
+      size="small"
+      color={getLoadingIndicatorColor()}
+      testID={testID ? `${testID}-loading-indicator` : undefined}
+    />
+  ) : (
+    <Text
+      style={[styles.text, textStyle]}
+      testID={testID ? `${testID}-text` : undefined}
+    >
+      {title}
+    </Text>
+  );
+
+  const baseButtonStyles: ViewStyle[] = [
+    styles.button,
+    isActuallyDisabled ? styles.disabled : {},
+  ];
+
+  if (gradientProps && gradientProps.colors && gradientProps.colors.length > 0) {
+    return (
+      <TouchableOpacity
+        onPress={onPress}
+        disabled={isActuallyDisabled}
+        activeOpacity={activeOpacity}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: isActuallyDisabled }}
+        accessibilityLabel={accessibilityLabel || title}
+        testID={testID}
+      >
+        <LinearGradient
+          {...gradientProps}
+          style={[...baseButtonStyles, styles.gradientContainer, style]}
+        >
+          {buttonContent}
+        </LinearGradient>
+      </TouchableOpacity>
+    );
+  } else {
+    const solidBgColor = backgroundColor || DEFAULT_BACKGROUND_COLOR;
+    return (
+      <TouchableOpacity
+        onPress={onPress}
+        disabled={isActuallyDisabled}
+        activeOpacity={activeOpacity}
+        style={[
+          ...baseButtonStyles,
+          { backgroundColor: solidBgColor },
+          style,
+        ]}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: isActuallyDisabled }}
+        accessibilityLabel={accessibilityLabel || title}
+        testID={testID}
+      >
+        {buttonContent}
+      </TouchableOpacity>
+    );
+  }
+};
+
+const styles = StyleSheet.create({
+  button: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: 48,
+    flexDirection: "row",
+    ...Platform.select({
+      ios: {
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.2,
+        shadowRadius: 1.41,
+      },
+      android: {
+        elevation: 2,
+      },
+    }),
+  },
+  gradientContainer: {
+  },
+  text: {
+    color: "#FFFFFF", 
+    fontSize: 16,
+    fontWeight: "600",
+    textAlign: "center",
+  },
+  disabled: {
+    opacity: 0.6,
+    ...(Platform.OS === "android" && { elevation: 0 }),
+    ...(Platform.OS === "ios" && {
+      shadowOpacity: 0,
+    }),
+  },
+});
+
+export default AppButton;

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { default as Button } from "./Button";
+export * from "./Button";

package/src/components/Card/Card.tsx

@@ -8,6 +8,7 @@ import {
 } from "react-native";
 import { CardProps } from "./types";
 import { useTheme } from "../../theme/ThemeContext";
+import { LinearGradient } from "expo-linear-gradient";
 
 const Card: React.FC<CardProps> = ({
   children,
@@ -21,6 +22,7 @@ const Card: React.FC<CardProps> = ({
   borderColor,
   borderRadius = 8,
   backgroundImage,
+  gradient
   // margin,
   // padding,
 }) => {
@@ -32,35 +34,7 @@ const Card: React.FC<CardProps> = ({
       borderRadius,
     };
 
-    switch (variant) {
-      case "outlined":
-        return {
-          ...baseStyle,
-          borderWidth: 1,
-          borderColor: borderColor || theme.border,
-        };
-      case "filled":
-        return {
-          ...baseStyle,
-          backgroundColor: backgroundColor || theme.primary,
-        };
-      case "elevated":
-        return {
-          ...baseStyle,
-          borderColor: borderColor || "transparent",
-          ...Platform.select({
-            ios: {
-              shadowColor: "#000",
-              shadowOffset: { width: 0, height: elevation },
-              shadowOpacity: 0.1,
-              shadowRadius: elevation,
-            },
-            android: {
-              elevation,
-            },
-          }),
-        };
-    }
+    return baseStyle;
   };
 
   const cardStyle = [
@@ -71,32 +45,50 @@ const Card: React.FC<CardProps> = ({
     backgroundImage && { backgroundColor: "transparent" },
   ];
 
-  const renderCardContent = () =>
-    backgroundImage ? (
-      <ImageBackground
-        source={backgroundImage.source}
-        style={[styles.backgroundImage, backgroundImage.style]}
-        imageStyle={[{ borderRadius }, backgroundImage.imageStyle]}
-        resizeMode={backgroundImage.resizeMode || "cover"}
-        blurRadius={backgroundImage.blurRadius}
-      >
-        <View
+  const renderCardContent = () => {
+    if (backgroundImage) {
+      return (
+        <ImageBackground
+          source={backgroundImage.source}
+          style={[styles.backgroundImage, backgroundImage.style]}
+          imageStyle={[{ borderRadius }, backgroundImage.imageStyle]}
+          resizeMode={backgroundImage.resizeMode || "cover"}
+          blurRadius={backgroundImage.blurRadius}
+        >
+          <View
+            style={[
+              styles.imageContentContainer,
+              {
+                opacity:
+                  backgroundImage.opacity !== undefined
+                    ? backgroundImage.opacity
+                    : 1,
+              },
+            ]}
+          >
+            {children}
+          </View>
+        </ImageBackground>
+      );
+    } else if (gradient) {
+      return (
+        <LinearGradient
+          colors={gradient.colors as any}
+          start={gradient.start}
+          end={gradient.end}
           style={[
-            styles.imageContentContainer,
-            {
-              opacity:
-                backgroundImage.opacity !== undefined
-                  ? backgroundImage.opacity
-                  : 1,
-            },
+            styles.gradient,
+            { borderRadius },
+            gradient.style,
           ]}
         >
           {children}
-        </View>
-      </ImageBackground>
-    ) : (
-      children
-    );
+        </LinearGradient>
+      );
+    } else {
+      return children;
+    }
+  };
 
   if (onPress) {
     return (
@@ -135,6 +127,13 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: "transparent",
   },
+  gradient: {
+    flex: 1,
+    width: "100%",
+    height: "100%",
+    justifyContent: "flex-start",
+    alignItems: "flex-start",
+  },
 });
 
 export default Card;

package/src/components/Card/types.ts

@@ -30,6 +30,12 @@ export interface CardProps {
     borderWidth?: number;
     borderColor?: string;
   };
+  gradient? :{
+    colors: string[];
+    start?: { x: number; y: number };
+    end?: { x: number; y: number };
+    style?: object;
+  }
 }
 
 export interface CardHeaderProps {

package/src/components/Filters/Filters.tsx

@@ -8,6 +8,7 @@ import {
   ViewStyle,
   ImageSourcePropType,
   I18nManager,
+  ButtonProps,
   // Remove TouchableWithoutFeedback as it's no longer needed for the overlay
 } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
@@ -21,6 +22,7 @@ import { BrandIcon } from "../BrandIcon";
 import { Ionicons } from "@expo/vector-icons";
 import Checkbox from "expo-checkbox";
 import { useTheme, ThemeType } from "../../theme"; // Import ThemeType
+import { Button } from "../Button";
 
 // ... (Keep existing type definitions: SortOption, Brand, FilterResult) ...
 type SortOption = {
@@ -93,6 +95,9 @@ interface FiltersProps {
   overlayColor?: string;
   onClose?: () => void;
   visible?: boolean;
+  applyButtonComponentProps?: Partial<
+    Omit<ButtonProps, "title" | "onPress">
+  >;
 }
 
 const Filters: React.FC<FiltersProps> = ({
@@ -146,6 +151,7 @@ const Filters: React.FC<FiltersProps> = ({
   headerTitleText = "Filter",
   onClose,
   visible = true,
+  applyButtonComponentProps
 }) => {
   const { theme, isRTL: themeIsRTL } = useTheme();
   const isRTL = isRTLProp ?? themeIsRTL ?? I18nManager.isRTL;
@@ -356,14 +362,21 @@ const Filters: React.FC<FiltersProps> = ({
             </View>
           )}
 
-          <TouchableOpacity
+          <Button
+            style={[styles.applyButton, applyButtonStyle]}
+            onPress={handleApplyFilter}
+            title={applyButtonText}
+            textStyle={[styles.applyButtonText, applyButtonTextStyle]}
+            {...applyButtonComponentProps}
+          />
+          {/* <TouchableOpacity
             style={[styles.applyButton, applyButtonStyle]}
             onPress={handleApplyFilter}
           >
             <Text style={[styles.applyButtonText, applyButtonTextStyle]}>
               {applyButtonText}
             </Text>
-          </TouchableOpacity>
+          </TouchableOpacity> */}
         </BottomSheetView>
       </View>
     </BottomSheet>

package/src/components/index.ts

@@ -13,4 +13,5 @@ export * from "./UnlockRewards";
 export * from "./Wheel";
 export * from "./CloseIcon";
 export * from "./Marquee";
-export * from "./RedeemedVoucher";
+export * from "./RedeemedVoucher";
+export * from "./Button";

package/src/theme/Colors.ts

@@ -43,6 +43,12 @@ export interface ThemeType {
     xl: number;
     xxl: number; 
   }
+
+  gradients?: {
+    primary?: string[];
+    secondary?: string[];
+    [key: string]: string[] | undefined;
+  };
 }
 
 // Updated Light Theme - True black and white oriented, less muted