related-ui-components 1.1.6

package/src/components/UnlockRewards/README.md

@@ -0,0 +1,187 @@
+# UnlockRewards
+
+![UnlockRewards Example](../../assets/components/UnlockRewards-1.png)
+![UnlockRewards with RTL](../../assets/components/UnlockRewards-2.png)
+
+## UnlockRewards Documentation
+
+The `UnlockRewards` is a comprehensive component designed for displaying user rewards, achievements, or unlockable features. It provides a customizable interface with support for background images, icons, titles, descriptions, and status indicators for each reward. The component is fully RTL-compatible and offers different variants for close button positioning.
+
+### Usage
+
+```tsx
+import UnlockRewards from "@/components/UnlockRewards/UnlockRewards";
+import { useTheme } from "@/theme";
+import { Ionicons } from "@expo/vector-icons";
+
+const MyComponent = () => {
+  const theme = useTheme();
+  
+  const handleClose = () => {
+    // Handle close action
+  };
+
+  const rewardsData = [
+    {
+      icon: <Ionicons name="water-outline" size={24} color={theme.helper} />,
+      activeIcon: <Ionicons name="water" size={24} color={theme.primary} />,
+      title: "Aqua Guardian",
+      description:
+        "Maintain water usage below the community average for a month.",
+      isActive: false,
+      status: "0/1",
+      statusBackgroundColor: theme.disabled,
+      statusTextColor: theme.text,
+    },
+    {
+      icon: <Ionicons name="build-outline" size={24} color={theme.helper} />,
+      activeIcon: <Ionicons name="build" size={24} color={theme.secondary} />,
+      title: "Leak Detective",
+      description: "Successfully report and fix a water leak on your property.",
+      isActive: true,
+      status: "1/1",
+      statusBackgroundColor: theme.primary,
+      statusTextColor: theme.secondary,
+    },
+    {
+      icon: <Ionicons name="leaf-outline" size={24} color={theme.helper} />,
+      activeIcon: <Ionicons name="leaf" size={24} color={theme.primary} />,
+      title: "Eco-Warrior",
+      description:
+        "Implement a rainwater harvesting system or greywater recycling.",
+      isActive: false,
+      status: "0/1",
+      statusBackgroundColor: theme.disabled,
+      statusTextColor: theme.text,
+    },
+  ];
+
+  return (
+    <UnlockRewards
+      title="Your Rewards"
+      description="Complete tasks to unlock special benefits"
+      rewards={rewardsData}
+      onClose={handleClose}
+      showCloseIcon={true}
+      closeIconVariant="nested"
+      topBackgroundHeight={200}
+      customCloseIcon={<Ionicons name="close-circle" size={28} color={theme.primary} />}
+    />
+  );
+};
+
+export default MyComponent
+```
+
+### RTL Example
+
+```tsx
+<UnlockRewards
+  title="المكافآت الخاصة بك"
+  description="أكمل المهام لفتح المزايا الخاصة"
+  rewards={rewardsDataArabic}
+  onClose={handleClose}
+  showCloseIcon={true}
+  isRTL={true}
+  topBackgroundColor="#f5f5f5"
+/>
+```
+
+### Props
+
+#### Core Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `rewards` | `Reward[]` | Required | Array of reward objects to display |
+| `title` | `string` | `undefined` | Main title text |
+| `description` | `string` | `undefined` | Description text displayed below title |
+| `onClose` | `() => void` | `undefined` | Function to call when close icon is pressed |
+| `isRTL` | `boolean` | `false` | Whether to render in right-to-left mode |
+
+#### Top Background Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `topBackgroundImage` | `ImageSourcePropType` | `undefined` | Background image for the top section |
+| `topBackgroundColor` | `string` | `theme.background` | Background color for the top section |
+| `topBackgroundHeight` | `number` | `250` | Height of the top background section |
+| `topBackgroundImageStyle` | `StyleProp<ImageStyle>` | `undefined` | Additional styles for the background image |
+| `topBackgroundStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the background container |
+
+#### Gradient Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `topGradientColors` | `string[]` | `undefined` | Array of colors for creating a gradient background in the top section |
+| `topGradientStart` | `{ x: number; y: number }` | `{ x: 0.5, y: 0 }` | Starting point for the gradient |
+| `topGradientEnd` | `{ x: number; y: number }` | `{ x: 0.5, y: 1 }` | Ending point for the gradient |
+| `topGradientLocations` | `number[]` | `undefined` | Locations for the gradient color stops |
+
+#### Style Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `cardContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the main container |
+| `mainTitleStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the title text |
+| `subtitleStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the subtitle/description text |
+| `rewardsContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the rewards container |
+| `smallIconsRowStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the icons row at the top |
+| `activeIconStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for active reward icons |
+| `inactiveIconStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for inactive reward icons |
+| `modalOverlayStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the modal overlay (if component is used in a modal) |
+
+#### Reward Item Style Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `rewardItemContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for each reward item container |
+| `rewardItemIconWrapperStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the reward icon wrapper |
+| `rewardItemTextContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the reward text container |
+| `rewardItemTitleTextStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the reward title text |
+| `rewardItemDescriptionTextStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the reward description text |
+| `rewardItemStatusBadgeStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the status badge |
+| `rewardItemStatusTextStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the status text |
+
+#### Close Button Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `showCloseIcon` | `boolean` | `true` | Whether to show the close icon button |
+| `customCloseIcon` | `ReactNode` | `undefined` | Custom component to use as close icon |
+| `closeIconVariant` | `"floating" \| "nested"` | `"nested"` | Style variant for the close icon position |
+| `closeIconContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the close icon container |
+| `closeIconStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the close icon |
+| `closeIconColor` | `string` | `theme.helper` | Color for the default close icon |
+| `closeIconSize` | `number` | `28` | Size for the default close icon |
+
+### Reward Object Structure
+
+Each reward in the `rewards` array should conform to this structure:
+
+```typescript
+type Reward = {
+  icon?: React.ReactNode;         // Icon for inactive state
+  activeIcon?: React.ReactNode;   // Icon for active state
+  title: string;                  // Reward title
+  description: string;            // Reward description
+  isActive: boolean;              // Whether the reward is active/unlocked
+  status: string;                 // Status text (e.g., "UNLOCKED", "LOCKED")
+  statusBackgroundColor: string;  // Background color for status badge
+  statusTextColor: string;        // Text color for status badge
+};
+```
+
+### Close Icon Variants
+
+- **Floating**: The close icon appears outside the card's main border, creating a floating effect
+- **Nested**: The close icon appears inside the card's border in the top-right (or top-left in RTL mode)
+
+### Related Components
+
+- `Badge`: Used for displaying reward icons in active/inactive states
+- `RewardItem`: Used for rendering individual reward entries
+- `ImageBackground`: Used when a top background image is provided
+- `TouchableOpacity`: Used for the close icon
+- `Text`: Used for rendering text content
+- `LinearGradient`: Used for creating gradient backgrounds

package/src/components/UnlockRewards/RewardItem.tsx

@@ -0,0 +1,172 @@
+import React from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ViewStyle,
+  TextStyle,
+  I18nManager,
+} from "react-native";
+import Badge from "../Badges/Badge";
+import { useTheme, ThemeType } from "../../theme";
+
+interface RewardItemProps {
+  icon: React.ReactNode;
+  activeIcon: React.ReactNode;
+  isActive?: boolean;
+
+  inactiveIconStyle?: ViewStyle;
+  activeIconStyle?: ViewStyle;
+
+  title: string;
+  description: string;
+  status: string;
+  statusBgColor: string;
+  statusTextColor: string;
+
+  isRTL?: boolean;
+
+  containerStyle?: ViewStyle;
+  badgeStyle?: ViewStyle;
+  textContainerStyle?: ViewStyle;
+  titleTextStyle?: TextStyle;
+  descriptionTextStyle?: TextStyle;
+  statusBadgeStyle?: ViewStyle;
+  statusTextStyle?: TextStyle;
+}
+
+const RewardItem: React.FC<RewardItemProps> = ({
+  icon,
+  title,
+  description,
+  status,
+  statusBgColor,
+  statusTextColor,
+  activeIcon,
+  isActive,
+  inactiveIconStyle,
+  activeIconStyle,
+  isRTL = false,
+  containerStyle,
+  badgeStyle,
+  textContainerStyle,
+  titleTextStyle,
+  descriptionTextStyle,
+  statusBadgeStyle,
+  statusTextStyle,
+}) => {
+  const theme = useTheme();
+  const styles = themedStyles(theme);
+
+  return (
+    <View
+      style={[
+        styles.rewardItemContainer,
+        { flexDirection: isRTL ? "row-reverse" : "row" },
+        containerStyle,
+      ]}
+    >
+      <Badge
+        style={[
+          styles.badgeStyle,
+          { marginRight: isRTL ? 0 : 15, marginLeft: isRTL ? 15 : 0 },
+          badgeStyle,
+        ]}
+        isActive={isActive}
+        icon={icon}
+        activeIcon={activeIcon}
+        inactiveStyle={inactiveIconStyle}
+        activeStyle={activeIconStyle}
+      />
+      <View style={[styles.rewardTextContainer, textContainerStyle]}>
+        <Text
+          style={[
+            styles.rewardTitle,
+            titleTextStyle,
+            isRTL && { textAlign: "right" },
+          ]}
+        >
+          {title}
+        </Text>
+        <Text
+          style={[
+            styles.rewardDescription,
+            descriptionTextStyle,
+            isRTL && { textAlign: "right" },
+          ]}
+        >
+          {description}
+        </Text>
+      </View>
+      <View
+        style={[
+          styles.statusBadge,
+          { backgroundColor: statusBgColor },
+          { right: isRTL ? undefined : 10, left: isRTL ? 10 : undefined },
+          statusBadgeStyle,
+        ]}
+      >
+        <Text
+          style={[
+            styles.statusText,
+            { color: statusTextColor },
+            statusTextStyle,
+          ]}
+        >
+          {status}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const themedStyles = (theme: ThemeType) =>
+  StyleSheet.create({
+    rewardItemContainer: {
+      alignItems: "center",
+      backgroundColor: theme.surface,
+      borderRadius: 15,
+      padding: 15,
+      marginBottom: 15,
+      width: "100%",
+      borderWidth: 1,
+      borderColor: theme.border,
+    },
+    badgeStyle: {
+      borderRadius: 10,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    rewardTextContainer: {
+      flex: 1,
+    },
+    rewardTitle: {
+      fontSize: 16,
+      fontWeight: "bold",
+      color: theme.text,
+      marginBottom: 4,
+      textAlign: "left",
+    },
+    rewardDescription: {
+      fontSize: 13,
+      color: theme.helper,
+      lineHeight: 18,
+      textAlign: "left",
+    },
+    statusBadge: {
+      paddingVertical: 4,
+      paddingHorizontal: 8,
+      borderRadius: 8,
+      top: 10,
+      position: "absolute",
+      alignSelf: "flex-start",
+      marginTop: 4,
+    },
+    statusText: {
+      fontSize: 12,
+      fontWeight: "bold",
+    },
+  });
+
+export default RewardItem;

package/src/components/UnlockRewards/UnlockRewards.tsx

@@ -0,0 +1,293 @@
+import React from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  ImageBackground,
+  ImageSourcePropType,
+  ImageStyle,
+} from "react-native";
+import RewardItem from "../UnlockRewards/RewardItem";
+import Badge from "../Badges/Badge";
+import { useTheme, ThemeType } from "../../theme";
+import { LinearGradient } from "expo-linear-gradient";
+import CloseIcon from "../CloseIcon/CloseIcon"; // Import the new component
+
+type Reward = {
+  icon?: React.ReactNode;
+  activeIcon?: React.ReactNode;
+  title: string;
+  description: string;
+  isActive: boolean;
+  status: string;
+  statusBackgroundColor: string;
+  statusTextColor: string;
+};
+
+interface UnlockRewardsProps {
+  title?: string;
+  description?: string;
+  rewards: Reward[];
+  activeIconStyle?: ViewStyle;
+  inactiveIconStyle?: ViewStyle;
+  onClose?: () => void; // Kept for passing to CloseIcon
+  isRTL?: boolean;
+  topBackgroundImage?: ImageSourcePropType;
+  topBackgroundColor?: string;
+  topBackgroundHeight?: number;
+  topBackgroundImageStyle?: ImageStyle;
+  topBackgroundStyle?: ViewStyle;
+  topGradientColors?: string[];
+  topGradientStart?: { x: number; y: number };
+  topGradientEnd?: { x: number; y: number };
+  topGradientLocations?: number[];
+  modalOverlayStyle?: ViewStyle;
+  cardContainerStyle?: ViewStyle;
+  mainTitleStyle?: TextStyle;
+  subtitleStyle?: TextStyle;
+  rewardsContainerStyle?: ViewStyle;
+  smallIconsRowStyle?: ViewStyle;
+  rewardItemContainerStyle?: ViewStyle;
+  rewardItemIconWrapperStyle?: ViewStyle;
+  rewardItemTextContainerStyle?: ViewStyle;
+  rewardItemTitleTextStyle?: TextStyle;
+  rewardItemDescriptionTextStyle?: TextStyle;
+  rewardItemStatusBadgeStyle?: ViewStyle;
+  rewardItemStatusTextStyle?: TextStyle;
+  showCloseIcon?: boolean;
+  customCloseIcon?: React.ReactNode;
+  closeIconVariant?: "floating" | "nested";
+  closeIconContainerStyle?: ViewStyle;
+  closeIconStyle?: TextStyle;
+  closeIconColor?: string;
+  closeIconSize?: number;
+}
+
+const UnlockRewards: React.FC<UnlockRewardsProps> = ({
+  rewards,
+  title,
+  description,
+  activeIconStyle,
+  inactiveIconStyle,
+  onClose, // Keep onClose
+  isRTL = false,
+  topBackgroundImage,
+  topBackgroundColor: topBackgroundColorProp,
+  topBackgroundHeight = 250,
+  topBackgroundImageStyle,
+  topBackgroundStyle,
+  topGradientColors,
+  topGradientStart,
+  topGradientEnd,
+  topGradientLocations,
+  cardContainerStyle,
+  mainTitleStyle,
+  subtitleStyle,
+  rewardsContainerStyle,
+  smallIconsRowStyle,
+  rewardItemContainerStyle,
+  rewardItemIconWrapperStyle,
+  rewardItemTextContainerStyle,
+  rewardItemTitleTextStyle,
+  rewardItemDescriptionTextStyle,
+  rewardItemStatusBadgeStyle,
+  rewardItemStatusTextStyle,
+  showCloseIcon = true,
+  customCloseIcon,
+  closeIconVariant = "nested",
+  closeIconContainerStyle,
+  closeIconStyle,
+  closeIconColor,
+  closeIconSize = 28,
+}) => {
+  const theme = useTheme();
+  const styles = themedStyles(theme);
+
+  const topBackgroundColor = topBackgroundColorProp ?? theme.surface;
+
+  const finalCardStyle = StyleSheet.flatten([
+    styles.cardContainer,
+    cardContainerStyle,
+  ]);
+  const cardBorderRadius = finalCardStyle.borderRadius ?? 20;
+
+  const topBackgroundBorderRadius = {
+    borderTopLeftRadius: cardBorderRadius,
+    borderTopRightRadius: cardBorderRadius,
+  };
+
+  const topElementBaseStyle = [
+    styles.topBackgroundBase,
+    topBackgroundBorderRadius,
+    topBackgroundStyle,
+    { height: topBackgroundHeight },
+  ];
+
+  return (
+    <View style={[styles.cardContainer, cardContainerStyle]}>
+      {/* --- CloseIcon component --- */}
+      <CloseIcon
+        show={showCloseIcon}
+        onPress={onClose}
+        customIcon={customCloseIcon}
+        variant={closeIconVariant}
+        containerStyle={closeIconContainerStyle}
+        iconStyle={closeIconStyle}
+        color={closeIconColor} // Pass the prop down
+        size={closeIconSize}
+        isRTL={isRTL}
+      />
+      {/* --- End CloseIcon usage --- */}
+
+      {/* --- Top Background Rendering --- */}
+      {topGradientColors && topGradientColors.length >= 2 ? (
+        <LinearGradient
+          colors={topGradientColors as any}
+          start={topGradientStart}
+          end={topGradientEnd}
+          locations={topGradientLocations as any}
+          style={topElementBaseStyle}
+        />
+      ) : topBackgroundImage ? (
+        <ImageBackground
+          source={topBackgroundImage}
+          style={topElementBaseStyle}
+          imageStyle={[
+            styles.topBackgroundImageStyle,
+            topBackgroundBorderRadius,
+            topBackgroundImageStyle,
+          ]}
+          resizeMode="cover"
+        />
+      ) : (
+        <View
+          style={[
+            ...topElementBaseStyle,
+            { backgroundColor: topBackgroundColor },
+          ]}
+        />
+      )}
+      {/* --- End Top Background Rendering --- */}
+
+      {title && <Text style={[styles.mainTitle, mainTitleStyle]}>{title}</Text>}
+      {description && (
+        <Text style={[styles.subtitle, subtitleStyle]}>{description}</Text>
+      )}
+
+      <View style={[styles.rewardsContainer, rewardsContainerStyle]}>
+        <View
+          style={[
+            styles.smallIconsRow,
+            smallIconsRowStyle,
+            isRTL && { flexDirection: "row-reverse" },
+          ]}
+        >
+          {rewards.map((reward, index) => (
+            <Badge
+              key={`badge-${index}`}
+              isActive={reward.isActive}
+              icon={reward.icon}
+              activeIcon={reward.activeIcon}
+              inactiveStyle={inactiveIconStyle}
+              activeStyle={activeIconStyle}
+            />
+          ))}
+        </View>
+        {rewards.map((reward, index) => (
+          <RewardItem
+            key={`reward-${index}`}
+            icon={reward.icon}
+            activeIcon={reward.activeIcon}
+            isActive={reward.isActive}
+            title={reward.title}
+            description={reward.description}
+            status={reward.status}
+            statusBgColor={reward.statusBackgroundColor}
+            statusTextColor={reward.statusTextColor}
+            activeIconStyle={activeIconStyle}
+            inactiveIconStyle={inactiveIconStyle}
+            containerStyle={rewardItemContainerStyle}
+            badgeStyle={rewardItemIconWrapperStyle}
+            textContainerStyle={rewardItemTextContainerStyle}
+            titleTextStyle={rewardItemTitleTextStyle}
+            descriptionTextStyle={rewardItemDescriptionTextStyle}
+            statusBadgeStyle={rewardItemStatusBadgeStyle}
+            statusTextStyle={rewardItemStatusTextStyle}
+            isRTL={isRTL}
+          />
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const themedStyles = (theme: ThemeType) =>
+  StyleSheet.create({
+    cardContainer: {
+      backgroundColor: theme.surface,
+      borderRadius: 20,
+      padding: 20,
+      paddingTop: 40,
+      width: "100%",
+      maxWidth: 400,
+      alignItems: "center",
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.15,
+      shadowRadius: 5,
+      elevation: 5,
+      position: "relative",
+      borderWidth: 1,
+      borderColor: theme.border,
+    },
+    topBackgroundBase: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      zIndex: 0,
+    },
+    topBackgroundImageStyle: {},
+    closeIconContainer: {
+      position: "absolute",
+      zIndex: 10,
+    },
+    mainTitle: {
+      fontSize: 26,
+      fontWeight: "bold",
+      color: theme.text,
+      marginBottom: 8,
+      textAlign: "center",
+      zIndex: 1,
+    },
+    subtitle: {
+      fontSize: 14,
+      color: theme.helper,
+      textAlign: "center",
+      marginBottom: 25,
+      paddingHorizontal: 10,
+      zIndex: 1,
+    },
+    rewardsContainer: {
+      backgroundColor: theme.background,
+      padding: 20,
+      borderRadius: 20,
+      width: "100%",
+      zIndex: 1,
+      borderWidth: 1,
+      borderColor: theme.border,
+    },
+    smallIconsRow: {
+      flexDirection: "row",
+      justifyContent: "space-around",
+      alignItems: "center",
+      marginBottom: 30,
+      paddingVertical: 15,
+      backgroundColor: theme.surface,
+      borderRadius: 15,
+    },
+  });
+
+export default UnlockRewards;

package/src/components/UnlockRewards/index.ts

@@ -0,0 +1,4 @@
+export {default as UnlockRewards} from "./UnlockRewards";
+export {default as RewardItem} from "./RewardItem";
+export * from "./RewardItem"
+export * from "./UnlockRewards";