related-ui-components 1.1.6

package/lib/module/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/lib/module/components/UnlockRewards/RewardItem.js

@@ -0,0 +1,120 @@
+"use strict";
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import Badge from "../Badges/Badge.js";
+import { useTheme } from "../../theme/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const RewardItem = ({
+  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 /*#__PURE__*/_jsxs(View, {
+    style: [styles.rewardItemContainer, {
+      flexDirection: isRTL ? "row-reverse" : "row"
+    }, containerStyle],
+    children: [/*#__PURE__*/_jsx(Badge, {
+      style: [styles.badgeStyle, {
+        marginRight: isRTL ? 0 : 15,
+        marginLeft: isRTL ? 15 : 0
+      }, badgeStyle],
+      isActive: isActive,
+      icon: icon,
+      activeIcon: activeIcon,
+      inactiveStyle: inactiveIconStyle,
+      activeStyle: activeIconStyle
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [styles.rewardTextContainer, textContainerStyle],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.rewardTitle, titleTextStyle, isRTL && {
+          textAlign: "right"
+        }],
+        children: title
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.rewardDescription, descriptionTextStyle, isRTL && {
+          textAlign: "right"
+        }],
+        children: description
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.statusBadge, {
+        backgroundColor: statusBgColor
+      }, {
+        right: isRTL ? undefined : 10,
+        left: isRTL ? 10 : undefined
+      }, statusBadgeStyle],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.statusText, {
+          color: statusTextColor
+        }, statusTextStyle],
+        children: status
+      })
+    })]
+  });
+};
+const themedStyles = theme => 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;
+//# sourceMappingURL=RewardItem.js.map

package/lib/module/components/UnlockRewards/RewardItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","StyleSheet","Badge","useTheme","jsx","_jsx","jsxs","_jsxs","RewardItem","icon","title","description","status","statusBgColor","statusTextColor","activeIcon","isActive","inactiveIconStyle","activeIconStyle","isRTL","containerStyle","badgeStyle","textContainerStyle","titleTextStyle","descriptionTextStyle","statusBadgeStyle","statusTextStyle","theme","styles","themedStyles","style","rewardItemContainer","flexDirection","children","marginRight","marginLeft","inactiveStyle","activeStyle","rewardTextContainer","rewardTitle","textAlign","rewardDescription","statusBadge","backgroundColor","right","undefined","left","statusText","color","create","alignItems","surface","borderRadius","padding","marginBottom","width","borderWidth","borderColor","border","justifyContent","flex","fontSize","fontWeight","text","helper","lineHeight","paddingVertical","paddingHorizontal","top","position","alignSelf","marginTop"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/UnlockRewards/RewardItem.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/UnlockRewards/UnlockRewards.js

@@ -0,0 +1,200 @@
+"use strict";
+
+import React from "react";
+import { View, Text, StyleSheet, ImageBackground } from "react-native";
+import RewardItem from "../UnlockRewards/RewardItem.js";
+import Badge from "../Badges/Badge.js";
+import { useTheme } from "../../theme/index.js";
+import { LinearGradient } from "expo-linear-gradient";
+import CloseIcon from "../CloseIcon/CloseIcon.js"; // Import the new component
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const UnlockRewards = ({
+  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 /*#__PURE__*/_jsxs(View, {
+    style: [styles.cardContainer, cardContainerStyle],
+    children: [/*#__PURE__*/_jsx(CloseIcon, {
+      show: showCloseIcon,
+      onPress: onClose,
+      customIcon: customCloseIcon,
+      variant: closeIconVariant,
+      containerStyle: closeIconContainerStyle,
+      iconStyle: closeIconStyle,
+      color: closeIconColor // Pass the prop down
+      ,
+      size: closeIconSize,
+      isRTL: isRTL
+    }), topGradientColors && topGradientColors.length >= 2 ? /*#__PURE__*/_jsx(LinearGradient, {
+      colors: topGradientColors,
+      start: topGradientStart,
+      end: topGradientEnd,
+      locations: topGradientLocations,
+      style: topElementBaseStyle
+    }) : topBackgroundImage ? /*#__PURE__*/_jsx(ImageBackground, {
+      source: topBackgroundImage,
+      style: topElementBaseStyle,
+      imageStyle: [styles.topBackgroundImageStyle, topBackgroundBorderRadius, topBackgroundImageStyle],
+      resizeMode: "cover"
+    }) : /*#__PURE__*/_jsx(View, {
+      style: [...topElementBaseStyle, {
+        backgroundColor: topBackgroundColor
+      }]
+    }), title && /*#__PURE__*/_jsx(Text, {
+      style: [styles.mainTitle, mainTitleStyle],
+      children: title
+    }), description && /*#__PURE__*/_jsx(Text, {
+      style: [styles.subtitle, subtitleStyle],
+      children: description
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [styles.rewardsContainer, rewardsContainerStyle],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.smallIconsRow, smallIconsRowStyle, isRTL && {
+          flexDirection: "row-reverse"
+        }],
+        children: rewards.map((reward, index) => /*#__PURE__*/_jsx(Badge, {
+          isActive: reward.isActive,
+          icon: reward.icon,
+          activeIcon: reward.activeIcon,
+          inactiveStyle: inactiveIconStyle,
+          activeStyle: activeIconStyle
+        }, `badge-${index}`))
+      }), rewards.map((reward, index) => /*#__PURE__*/_jsx(RewardItem, {
+        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
+      }, `reward-${index}`))]
+    })]
+  });
+};
+const themedStyles = theme => 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;
+//# sourceMappingURL=UnlockRewards.js.map

package/lib/module/components/UnlockRewards/UnlockRewards.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","StyleSheet","ImageBackground","RewardItem","Badge","useTheme","LinearGradient","CloseIcon","jsx","_jsx","jsxs","_jsxs","UnlockRewards","rewards","title","description","activeIconStyle","inactiveIconStyle","onClose","isRTL","topBackgroundImage","topBackgroundColor","topBackgroundColorProp","topBackgroundHeight","topBackgroundImageStyle","topBackgroundStyle","topGradientColors","topGradientStart","topGradientEnd","topGradientLocations","cardContainerStyle","mainTitleStyle","subtitleStyle","rewardsContainerStyle","smallIconsRowStyle","rewardItemContainerStyle","rewardItemIconWrapperStyle","rewardItemTextContainerStyle","rewardItemTitleTextStyle","rewardItemDescriptionTextStyle","rewardItemStatusBadgeStyle","rewardItemStatusTextStyle","showCloseIcon","customCloseIcon","closeIconVariant","closeIconContainerStyle","closeIconStyle","closeIconColor","closeIconSize","theme","styles","themedStyles","surface","finalCardStyle","flatten","cardContainer","cardBorderRadius","borderRadius","topBackgroundBorderRadius","borderTopLeftRadius","borderTopRightRadius","topElementBaseStyle","topBackgroundBase","height","style","children","show","onPress","customIcon","variant","containerStyle","iconStyle","color","size","length","colors","start","end","locations","source","imageStyle","resizeMode","backgroundColor","mainTitle","subtitle","rewardsContainer","smallIconsRow","flexDirection","map","reward","index","isActive","icon","activeIcon","inactiveStyle","activeStyle","status","statusBgColor","statusBackgroundColor","statusTextColor","badgeStyle","textContainerStyle","titleTextStyle","descriptionTextStyle","statusBadgeStyle","statusTextStyle","create","padding","paddingTop","width","maxWidth","alignItems","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","position","borderWidth","borderColor","border","top","left","right","zIndex","closeIconContainer","fontSize","fontWeight","text","marginBottom","textAlign","helper","paddingHorizontal","background","justifyContent","paddingVertical"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/UnlockRewards/UnlockRewards.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/UnlockRewards/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+export { default as UnlockRewards } from "./UnlockRewards.js";
+export { default as RewardItem } from "./RewardItem.js";
+export * from "./RewardItem.js";
+export * from "./UnlockRewards.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/UnlockRewards/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","UnlockRewards","RewardItem"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/UnlockRewards/index.ts"],"mappings":";;AAAA,SAAQA,OAAO,IAAIC,aAAa,QAAO,oBAAiB;AACxD,SAAQD,OAAO,IAAIE,UAAU,QAAO,iBAAc;AAClD,cAAc,iBAAc;AAC5B,cAAc,oBAAiB","ignoreList":[]}