related-ui-components 1.1.6

package/src/components/Card/templates/README.md

@@ -0,0 +1,233 @@
+# Card Template Components
+
+List of pre-defined template common based on app designs, the templates use the internal Card related components
+
+## 1. Simple Trending Card
+
+![With icon](../../../assets/components/SimpleTrendingCard.png)
+![Without icon](../../../assets/components/SimpleTrendingCardV2.png)
+
+## SimpleTrendingCard Documentation
+
+The `SimpleTrendingCard` is a customizable card component designed for displaying trending content with an optional icon. It leverages the base `Card` component and provides a sleek interface with background image support.
+
+### Usage
+
+```tsx
+import SimpleTrendingCard from "@/components/Card/templates/SimpleTrendingCard";
+import { Image } from "react-native";
+
+const MyComponent = () => {
+  return (
+      <SimpleTrendingCard
+        backgroundImage={require("@/assets/images/pb.jpg")}
+        style={{ borderRadius: 50 }}
+        icon={
+          <Image
+            source={require("@/assets/images/insta.webp")}
+            style={{ width: 36, height: 36 }} // Adjust size as needed
+            resizeMode="contain"
+          />
+        }
+        onPress={()=>Alert.alert("Pressed")}
+        iconPosition="left"
+      />
+  );
+};
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `backgroundImage` | `ImageRequireSource` | Required | The background image to display in the card |
+| `icon` | `React.ReactNode` | `undefined` | Optional icon to display in the card header |
+| `iconPosition` | `"left" \| "right"` | `"left"` | Position of the icon in the header |
+| `shadowEffect` | `true \| false` | `true` | Shadow Effect displayed or not |
+| `shadowOpacity` | `number` | `0.5` | Shadow Effect Opacity |
+| `onPress` | `() => void` | `undefined` | Function to execute when the card is pressed |
+| `style` | `StyleProp<ViewStyle>` | `undefined` | Additional styles to apply to the card |
+
+### Features
+
+- **Background Image**: The card displays a full-size background image with "cover" resize mode
+- **Customizable Icon**: Optional icon that can be positioned on either the left or right side of the card header
+- **Responsive Sizing**: Default dimensions of 250×300, which can be overridden with custom styles
+- **Interactive**: Built-in touch handling through the `onPress` prop
+
+### Related Components
+
+- `Card`: The base component for all card layouts
+- `CardHeader`: Handles the positioning of elements in the card header
+
+# DealCardWithBackgroundImage
+
+![DealCardWithBackgroundImage Example](../../../assets/components/DealCard-floating.png)
+![DealCardWithBackgroundImage Example](../../../assets/components/DealCard-nested.png)
+
+
+# DealCardWithBackgroundImage Documentation
+
+The `DealCardWithBackgroundImage` is a versatile card component designed for displaying deals, offers, or promotions with rich customization options. It features a background image, customizable labels, action icons, inner card content, and optional progress bar. As well as choosing between a floating or nested inner card.
+
+## Usage
+
+```tsx
+import DealCardWithBackgroundImage from "@/components/Card/templates/DealCardWithBackgroundImage";
+import { Image } from "react-native";
+import { HeartIcon, HeartFilledIcon } from "@/components/Icons";
+
+const MyComponent = () => {
+  return (
+    <DealCardWithBackgroundImage
+    width={300}
+    backgroundImage={require("@/assets/images/pb.jpg")}
+    label="Discount"
+    actionIconDefault={
+      <Ionicons name="heart-outline" size={20} color={theme.primary} />
+    }
+    actionIconActive={
+      <Ionicons name="heart" size={20} color={theme.secondary} />
+    }
+    innerCardVariant="floating"
+    onActionPress={(active) => console.log(active)}
+    dealProviderName="Pull&Bear"
+    dealDescription="25% discount on all items"
+    progressBar={true}
+    progressBarText="500 points to Redeem!"
+    progressBarTextPosition="below"
+    remainingProgressColor="rgba(0, 0, 0, 0.4)"
+    dealPrice="1,000 KP"
+  />
+  );
+};
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `backgroundImage` | `ImageRequireSource` | Required | The background image to display in the card |
+| `label` | `string` | `undefined` | Optional label text to display in the upper left corner |
+| `labelStyle` | `StyleProp<TextStyle>` | `undefined` | Custom styles for the label text |
+| `labelContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Custom styles for the label container |
+| `actionIconDefault` | `React.ReactNode` | `undefined` | Icon to display when action is inactive (e.g., unfavorited) |
+| `actionIconActive` | `React.ReactNode` | `undefined` | Icon to display when action is active (e.g., favorited) |
+| `onActionPress` | `(active: boolean) => void` | `undefined` | Function to execute when the action icon is pressed |
+| `innerCardStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the inner card |
+| `innerCardVariant` | `"floating" \| "nested"` | `"nested"` | The style variant for the inner card |
+| `dealDescription` | `string` | `undefined` | Description text for the deal |
+| `dealDescriptionStyle` | `StyleProp<TextStyle>` | `undefined` | Custom styles for the deal description |
+| `dealProviderName` | `string` | `undefined` | Name of the deal provider |
+| `dealProviderNameStyle` | `StyleProp<TextStyle>` | `undefined` | Custom styles for the provider name |
+| `dealPrice` | `string` | `undefined` | Price text for the deal |
+| `dealPriceStyle` | `StyleProp<TextStyle>` | `undefined` | Custom styles for the price text |
+| `progressBar` | `boolean` | `undefined` | Whether to show a progress bar |
+| `progressBarText` | `string` | `undefined` | Text to display with the progress bar |
+| `progressBarTextPosition` | `ProgressBarTextPosition` | `undefined` | Position of the progress bar text |
+| `progressBarTextAlign` | `ProgressBarTextAlign` | `undefined` | Alignment of the progress bar text |
+| `progressColor` | `string` | `undefined` | Color of the progress indicator |
+| `progressWidth` | `number` | `undefined` | Width of the progress bar |
+| `progressHeight` | `number` | `undefined` | Height of the progress bar |
+| `remainingProgressColor` | `string` | `undefined` | Color of the unfilled portion of the progress bar |
+| `progressValue` | `number` | `undefined` | Value between 0 and 1 representing progress |
+| `onPress` | `() => void` | `undefined` | Function to execute when the card is pressed |
+| `style` | `StyleProp<ViewStyle>` | `undefined` | Additional styles to apply to the card |
+| `width` | `number` | `300` | Width of the card in pixels |
+| `isRTL` | `boolean` | `false` | Whether to render the component in right-to-left mode for RTL languages |
+| `overlayVisible` | `boolean` | `false` | Whether to show a lock overlay on the card |
+| `overlayCover` | `"all" \| "background"` | `"background"` | Controls which part of the card the overlay covers |
+
+## Inner Card Variants
+
+- **Nested**: The inner card sits within the main card's boundaries
+- **Floating**: The inner card extends beyond the bottom edge of the main card, creating a floating effect
+
+## Related Components
+
+- `Card`: The base component for all card layouts
+- `CardHeader`: Handles the positioning of elements in the card header
+- `CardContent`: Contains the main content of the card
+- `CardFooter`: Displays the progress bar and price at the bottom of the inner card
+- `ProgressBar`: Shows completion or availability status visually
+- `LockOverlay`: Displays a lock overlay when the `overlayVisible` prop is true
+
+# DealCard
+
+![Horizontal variant](../../../assets/components/DealCard-Horizontal.png)
+![Vertical variant](../../../assets/components/DealCard-Vertical.png)
+
+# DealCard Documentation
+
+The `DealCard` is a versatile card component designed for displaying deals or offers in either horizontal or vertical orientation. It features an image, customizable labels, descriptive text, pricing information, and an optional progress bar.
+
+## Usage
+
+```tsx
+import DealCard from "@/components/Card/templates/DealCard";
+import { Alert } from "react-native";
+
+const MyComponent = () => {
+  return (
+      <DealCard
+        imageSource={require("@/assets/images/pb.jpg")}
+        // width={275}
+        variant="horizontal"
+        label="Discount"
+        // labelStyle={{ color: "#000" }}
+        dealProviderName="Pull&Bear"
+        dealDescription="25% discount on all items"
+        // dealDescriptionStyle={{ color: "black" }}
+        progressBar={true}
+        progressBarText="500 points to Redeem!"
+        progressBarTextPosition="below"
+        // progressColor="black"
+        remainingProgressColor="rgba(255, 255, 255, 0.4)"
+        dealPrice="1,000 KP"
+      />
+  );
+};
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `imageSource` | `ImageRequireSource` | Required | The image to display in the card |
+| `variant` | `"vertical" \| "horizontal"` | `"horizontal"` | Layout orientation of the card |
+| `label` | `string` | `undefined` | Optional label text to display |
+| `labelStyle` | `StyleProp<TextStyle>` | `undefined` | Custom styles for the label text |
+| `labelContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Custom styles for the label container |
+| `dealDescription` | `string` | `undefined` | Description text for the deal |
+| `dealDescriptionStyle` | `StyleProp<TextStyle>` | `undefined` | Custom styles for the deal description |
+| `dealProviderName` | `string` | `undefined` | Name of the deal provider |
+| `dealProviderNameStyle` | `StyleProp<TextStyle>` | `undefined` | Custom styles for the provider name |
+| `dealPrice` | `string` | `undefined` | Price text for the deal |
+| `dealPriceStyle` | `StyleProp<TextStyle>` | `undefined` | Custom styles for the price text |
+| `progressBar` | `boolean` | `undefined` | Whether to show a progress bar |
+| `progressBarText` | `string` | `undefined` | Text to display with the progress bar |
+| `progressBarTextPosition` | `ProgressBarTextPosition` | `undefined` | Position of the progress bar text |
+| `progressBarTextAlign` | `ProgressBarTextAlign` | `undefined` | Alignment of the progress bar text |
+| `progressColor` | `string` | `undefined` | Color of the progress indicator |
+| `progressWidth` | `number` | `undefined` | Width of the progress bar |
+| `progressHeight` | `number` | `undefined` | Height of the progress bar |
+| `remainingProgressColor` | `string` | `undefined` | Color of the unfilled portion of the progress bar |
+| `progressValue` | `number` | `undefined` | Value between 0 and 1 representing progress |
+| `onPress` | `() => void` | `undefined` | Function to execute when the card is pressed |
+| `style` | `StyleProp<ViewStyle>` | `undefined` | Additional styles to apply to the card |
+| `width` | `number \| string` | `undefined` | Width of the card in pixels or as a percentage |
+| `isRTL` | `boolean` | `false` | Whether to render the component in right-to-left mode for RTL languages |
+| `overlayVisible` | `boolean` | `false` | Whether to show a lock overlay on top of the image |
+
+## Layout Variants
+
+- **Horizontal**: Image appears on the left side with content to the right
+- **Vertical**: Image appears on top with content below
+
+## Related Components
+
+- `Card`: The base component used for the overall container
+- `CardHeader`: Displays the provider name and deal description
+- `CardFooter`: Contains the label and progress bar
+- `ProgressBar`: Shows completion or availability status visually
+- `LockOverlay`: Displays a lock overlay when the `overlayVisible` prop is true

package/src/components/Card/templates/SimpleTrendingCard.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { ImageRequireSource, StyleProp, ViewStyle } from "react-native";
+import Card from "../Card";
+import CardHeader from "../CardHeader";
+import { LinearGradient } from "expo-linear-gradient";
+
+interface SimpleTrendingCardProps {
+  backgroundImage: ImageRequireSource;
+  icon?: React.ReactNode;
+  iconPosition?: "left" | "right";
+  onPress?: () => void;
+  shadowEffect?: boolean;
+  shadowOpacity? : number;
+  style?: StyleProp<ViewStyle>;
+}
+const SimpleTrendingCard: React.FC<SimpleTrendingCardProps> = ({
+  backgroundImage,
+  onPress,
+  icon,
+  iconPosition = "left",
+  shadowEffect = true,
+  shadowOpacity = 0.5,
+  style,
+}) => {
+  return (
+    <Card
+      onPress={onPress}
+      style={[{ width: 250, height: 300 }, style]}
+      backgroundImage={{
+        source: backgroundImage,
+        resizeMode: "cover",
+      }}
+    >
+      {shadowEffect && (
+        <LinearGradient
+          colors={[`rgba(0, 0, 0, ${shadowOpacity})`, "transparent"]}
+          start={{ x: 0.5, y: 1 }}
+          end={{ x: 0.5, y: 0 }}
+          style={{ position: "absolute", left: 0, right: 0, top: 0, bottom: 0 }}
+        />
+      )}
+
+      {icon && (
+        <CardHeader
+          left={iconPosition === "left" ? icon : null}
+          right={iconPosition === "right" ? icon : null}
+          style={{ alignItems: "center" }}
+        />
+      )}
+    </Card>
+  );
+};
+
+export default SimpleTrendingCard;

package/src/components/Card/types.ts

@@ -0,0 +1,75 @@
+// Card/types.ts
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle, TextStyle, ImageStyle, ImageRequireSource } from 'react-native';
+
+export interface CardProps {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+  disabled?: boolean;
+  elevation?: number;
+  testID?: string;
+  variant?: 'outlined' | 'elevated' | 'filled' | 'glass';
+  backgroundColor?: string;
+  borderColor?: string;
+  borderRadius?: number;
+  margin?: number | { horizontal?: number; vertical?: number };
+  padding?: number | { horizontal?: number; vertical?: number };
+  backgroundImage?: {
+    source: ImageRequireSource;
+    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
+    blurRadius?: number;
+    opacity?: number;
+    style?: StyleProp<ViewStyle>;
+    imageStyle?: ImageStyle;
+  },
+  glassEffect?: {
+    opacity?: number;
+    blur?: number;
+    tint?: string;
+    borderWidth?: number;
+    borderColor?: string;
+  };
+}
+
+export interface CardHeaderProps {
+  title?: string | ReactNode;
+  subtitle?: string | ReactNode;
+  left?: ReactNode;
+  right?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  subtitleStyle?: StyleProp<TextStyle>;
+  titleColor?: string;
+  subtitleColor?: string;
+}
+
+export interface CardContentProps {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  padding?: number | { horizontal?: number; vertical?: number };
+}
+
+export interface CardFooterProps {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  inset?: boolean;
+  justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+}
+
+export interface CardImageProps {
+  source: any;
+  style?: StyleProp<ImageStyle>;
+  height?: number | string;
+  width?: number | string;
+  resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
+  borderRadius?: number;
+  overlay?: ReactNode;
+}
+
+export interface CardDividerProps {
+  style?: StyleProp<ViewStyle>;
+  inset?: boolean;
+  color?: string;
+  thickness?: number;
+}

package/src/components/CloseIcon/CloseIcon.tsx

@@ -0,0 +1,77 @@
+// components/CloseIcon.tsx
+import React from "react";
+import {
+  TouchableOpacity,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useTheme, ThemeType } from "../../theme"; // Assuming your theme setup is here
+
+interface CloseIconProps {
+  onPress?: () => void;
+  show?: boolean;
+  customIcon?: React.ReactNode;
+  variant?: "floating" | "nested";
+  containerStyle?: ViewStyle;
+  iconStyle?: TextStyle;
+  color?: string; // Prop for specific color override
+  size?: number;
+  isRTL?: boolean;
+}
+
+const CloseIcon: React.FC<CloseIconProps> = ({
+  onPress,
+  show = true,
+  customIcon,
+  variant = "nested",
+  containerStyle,
+  iconStyle,
+  color: colorProp, // Renamed to avoid conflict with theme color
+  size = 28,
+  isRTL = false,
+}) => {
+  const theme = useTheme();
+  const styles = themedStyles(theme);
+
+  // Use prop color if provided, otherwise use theme text color
+  const iconColor = colorProp ?? theme.text;
+
+  // Calculate default position based on variant and RTL
+  const defaultPosition =
+    variant === "nested"
+      ? { top: 10, [isRTL ? "left" : "right"]: 10 }
+      : { top: -12, [isRTL ? "left" : "right"]: -12 };
+
+  if (!show || !onPress) {
+    return null; // Don't render if not shown or no onPress handler
+  }
+
+  return (
+    <TouchableOpacity
+      style={[styles.container, defaultPosition, containerStyle]}
+      onPress={onPress}
+      hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }} // Improve touch area
+    >
+      {customIcon || (
+        <Ionicons
+          name="close"
+          size={size}
+          color={iconColor}
+          style={iconStyle}
+        />
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const themedStyles = (theme: ThemeType) =>
+  StyleSheet.create({
+    container: {
+      position: "absolute",
+      zIndex: 10, // Ensure it's above other elements
+    },
+  });
+
+export default CloseIcon;

package/src/components/CloseIcon/index.ts

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