related-ui-components 1.1.6

package/src/components/Popup/Popup.tsx

@@ -0,0 +1,374 @@
+import { useTheme, ThemeType } from "../../theme";
+import React, { FC, ReactNode } from "react";
+import {
+  Modal,
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ImageBackground,
+  ImageSourcePropType,
+  Dimensions,
+  TouchableWithoutFeedback,
+  Platform,
+  StatusBar,
+  Image,
+  TextStyle,
+  ViewStyle,
+  ImageStyle,
+} from "react-native";
+import CloseIcon from "../CloseIcon/CloseIcon";
+
+interface PopupProps {
+  visible: boolean;
+  onClose: () => void;
+  backgroundImage?: ImageSourcePropType;
+  title?: string;
+  content?: string;
+  subtitle?: string;
+  children?: ReactNode;
+  primaryButtonText?: string;
+  onPrimaryButtonPress?: () => void;
+  secondaryButtonText?: string;
+  onSecondaryButtonPress?: () => void;
+  closeOnBackdropPress?: boolean;
+  showCloseIcon?: boolean;
+  closeIconVariant?: "floating" | "nested";
+  customCloseIcon?: ReactNode;
+  closeIconContainerStyle?: ViewStyle;
+  closeIconStyle?: TextStyle;
+  closeIconColor?: string;
+  illustrationImage?: ImageSourcePropType;
+  illustrationStyle?: ImageStyle;
+  containerStyle?: ViewStyle;
+  contentContainerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  subtitleStyle?: TextStyle;
+  contentStyle?: TextStyle;
+  primaryButtonStyle?: ViewStyle;
+  primaryButtonTextStyle?: TextStyle;
+  secondaryButtonStyle?: ViewStyle;
+  secondaryButtonTextStyle?: TextStyle;
+  isRTL?: boolean;
+  closeIconSize?: number;
+}
+
+const Popup: FC<PopupProps> = ({
+  visible,
+  onClose,
+  backgroundImage,
+  title,
+  content,
+  subtitle,
+  primaryButtonText,
+  onPrimaryButtonPress,
+  secondaryButtonText,
+  onSecondaryButtonPress,
+  closeOnBackdropPress = true,
+  showCloseIcon = false,
+  customCloseIcon,
+  illustrationImage,
+  illustrationStyle,
+  containerStyle,
+  titleStyle,
+  contentStyle,
+  primaryButtonStyle,
+  primaryButtonTextStyle,
+  secondaryButtonStyle,
+  secondaryButtonTextStyle,
+  contentContainerStyle,
+  closeIconContainerStyle,
+  closeIconStyle,
+  closeIconVariant = "floating",
+  subtitleStyle,
+  isRTL = false,
+  closeIconColor,
+  closeIconSize = 28
+}) => {
+  const theme = useTheme();
+  const styles = createStyles(theme); // Create styles using theme
+
+  const PopupContent = () => (
+    <View
+      style={[
+        styles.popupContainer,
+        { backgroundColor: theme.surface }, // Use surface for popup background
+        containerStyle,
+      ]}
+    >
+      <CloseIcon
+        show={showCloseIcon}
+        onPress={onClose}
+        customIcon={customCloseIcon}
+        variant={closeIconVariant}
+        containerStyle={closeIconContainerStyle}
+        iconStyle={closeIconStyle}
+        color={closeIconColor}
+        size={closeIconSize}
+        isRTL={isRTL}
+      />
+      {backgroundImage ? (
+        <ImageBackground
+          source={backgroundImage}
+          style={styles.backgroundImage}
+          imageStyle={styles.backgroundImageStyle}
+        >
+          <PopupInnerContent />
+        </ImageBackground>
+      ) : (
+        <PopupInnerContent />
+      )}
+    </View>
+  );
+
+  const PopupInnerContent = () => (
+    <View style={[styles.contentContainer, contentContainerStyle]}>
+      {illustrationImage && (
+        <View style={styles.illustrationContainer}>
+          <Image
+            source={illustrationImage}
+            style={[styles.illustrationImage, illustrationStyle]}
+            resizeMode="contain"
+          />
+        </View>
+      )}
+
+      {title && (
+        <Text
+          style={[
+            styles.title,
+            { color: theme.text, textAlign: "center" }, // Keep text color
+            titleStyle,
+          ]}
+        >
+          {title}
+        </Text>
+      )}
+
+      {subtitle && (
+        <Text
+          style={[
+            styles.subtitle,
+            { color: theme.text, textAlign: "center" }, // Use helper for subtitle
+            subtitleStyle,
+          ]}
+        >
+          {subtitle}
+        </Text>
+      )}
+
+      {content && (
+        <Text
+          style={[
+            styles.content,
+            { color: theme.text, textAlign: "center" }, // Keep text color
+            contentStyle,
+          ]}
+        >
+          {content}
+        </Text>
+      )}
+
+      {(secondaryButtonText || primaryButtonText) && (
+        <View
+          style={[
+            styles.buttonContainer,
+            { flexDirection: isRTL ? "row-reverse" : "row" },
+          ]}
+        >
+          {secondaryButtonText && (
+            <TouchableOpacity
+              style={[
+                styles.secondaryButton,
+                { borderColor: theme.primary }, // Keep primary border
+                secondaryButtonStyle,
+                isRTL
+                  ? { marginLeft: 12, marginRight: 0 }
+                  : { marginRight: 12, marginLeft: 0 },
+              ]}
+              onPress={onSecondaryButtonPress}
+            >
+              <Text
+                style={[
+                  styles.secondaryButtonText,
+                  { color: theme.primary }, // Keep primary text color
+                  secondaryButtonTextStyle,
+                ]}
+              >
+                {secondaryButtonText}
+              </Text>
+            </TouchableOpacity>
+          )}
+
+          {primaryButtonText && (
+            <TouchableOpacity
+              style={[
+                styles.primaryButton,
+                { backgroundColor: theme.primary }, // Keep primary background
+                primaryButtonStyle,
+              ]}
+              onPress={onPrimaryButtonPress}
+            >
+              <Text
+                style={[
+                  styles.primaryButtonText,
+                  { color: theme.onPrimary }, // Use onPrimary for text
+                  primaryButtonTextStyle,
+                ]}
+              >
+                {primaryButtonText}
+              </Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      )}
+    </View>
+  );
+
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      animationType="fade"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <View style={styles.modalOverlay}>
+        {closeOnBackdropPress && (
+          <TouchableWithoutFeedback onPress={onClose}>
+            <View style={StyleSheet.absoluteFill} />
+          </TouchableWithoutFeedback>
+        )}
+
+        <TouchableWithoutFeedback>
+          <PopupContent />
+        </TouchableWithoutFeedback>
+      </View>
+    </Modal>
+  );
+};
+
+const { width } = Dimensions.get("window");
+const popupWidth = width * 0.85;
+
+// Function to create themed styles
+const createStyles = (theme: ThemeType) =>
+  StyleSheet.create({
+    modalOverlay: {
+      flex: 1,
+      backgroundColor: "rgba(0, 0, 0, 0.5)", // Keep overlay color
+      justifyContent: "center",
+      alignItems: "center",
+      paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
+    },
+    popupContainer: {
+      width: popupWidth,
+      maxHeight: "80%",
+      borderRadius: 16,
+      elevation: 5,
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.25,
+      shadowRadius: 3.84,
+      position: "relative",
+      // backgroundColor is set inline using theme.surface
+    },
+    closeIconContainer: {
+      position: "absolute",
+      zIndex: 10,
+      width: 32,
+      height: 32,
+      justifyContent: "center",
+      alignItems: "center",
+      borderWidth: 1,
+      borderRadius: 16,
+      padding: 0,
+      // backgroundColor and borderColor set inline
+    },
+    closeIcon: {
+      width: 24,
+      height: 24,
+      resizeMode: "contain",
+      textAlign: "center",
+      textAlignVertical: "center",
+      lineHeight: 24,
+      // color is set inline
+    },
+    backgroundImage: {
+      width: "100%",
+      height: "100%",
+    },
+    backgroundImageStyle: {
+      borderRadius: 16,
+    },
+    contentContainer: {
+      padding: 24,
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: 16,
+    },
+    illustrationContainer: {
+      marginBottom: 16,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    illustrationImage: {
+      width: 150,
+      height: 150,
+      marginBottom: 8,
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: "bold",
+      marginBottom: 12,
+      width: "100%",
+      // color is set inline
+    },
+    subtitle: {
+      fontSize: 20, // Adjusted size for subtitle
+      fontWeight: "bold", // Adjusted weight for subtitle
+      marginBottom: 12,
+      width: "100%",
+    },
+    content: {
+      fontSize: 16,
+      marginBottom: 24,
+      lineHeight: 22,
+      width: "100%",
+      // color is set inline
+    },
+    buttonContainer: {
+      justifyContent: "center",
+      marginTop: 16,
+      width: "100%",
+    },
+    primaryButton: {
+      paddingVertical: 12,
+      paddingHorizontal: 32,
+      borderRadius: 50,
+      minWidth: 120,
+      alignItems: "center",
+      // backgroundColor is set inline
+    },
+    primaryButtonText: {
+      fontWeight: "600",
+      fontSize: 16,
+      // color is set inline using theme.onPrimary
+    },
+    secondaryButton: {
+      paddingVertical: 12,
+      paddingHorizontal: 24,
+      borderRadius: 50,
+      borderWidth: 1,
+      minWidth: 120,
+      alignItems: "center",
+      // borderColor is set inline
+    },
+    secondaryButtonText: {
+      fontWeight: "600",
+      fontSize: 16,
+      // color is set inline
+    },
+  });
+
+export default Popup;

package/src/components/Popup/README.md

@@ -0,0 +1,133 @@
+# Popup
+
+![Standard Popup Example](../../assets/components/Popup-1.png)
+![Popup with RTL](../../assets/components/Popup-3.png)
+![Popup with background image](../../assets/components/Popup-2.png)
+
+
+## Popup Documentation
+
+The `Popup` is a versatile modal component designed for displaying important information, confirmations, or actions to users. It provides a customizable interface with support for background images, illustrations, titles, content text, and action buttons. The component is fully RTL-compatible and offers different variants for close button positioning.
+
+### Usage
+
+```tsx
+import Popup from "@/components/Popup";
+import { useTheme } from "@/theme";
+
+const MyComponent = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  const theme = useTheme();
+  
+  const handleClose = () => setIsVisible(false);
+  const handlePrimaryAction = () => {
+    // Do something
+    handleClose();
+  };
+
+  return (
+      <Popup
+        visible={isVisible}
+        onClose={handleClose}
+        showCloseIcon={true}
+        containerStyle={{ borderColor: "white", borderWidth: 1, height: 300, width:400 }}
+        title="UNLOCK"
+        closeIconVariant="nested"
+        content="Upgrade to Visa signature to get your Card Now!"
+        primaryButtonText="Upgrade"
+        subtitle={`60%\nDiscount`}
+        backgroundImage={require("@/assets/images/face.jpg")}
+        onPrimaryButtonPress={handleUpgrade}
+        contentContainerStyle={{backgroundColor:"rgba(0,0,0,0.5)", flex: 1}}
+        closeIconContainerStyle={{backgroundColor:"white"}}
+        customCloseIcon={<Ionicons name="close" size={20} color={"black"} />}
+      />
+  );
+};
+```
+
+### Illustration Example
+
+```tsx
+      <Popup
+        visible={isVisible}
+        onClose={handleClose}
+        showCloseIcon={true}
+        containerStyle={{ borderColor: "white", borderWidth: 1 }}
+        illustrationImage={require('@/assets/images/upgrade.png')} // Path to your illustration
+        title="UNLOCK"
+        closeIconVariant="nested"
+        content="Upgrade to Visa signature to get your Card Now!"
+        primaryButtonText="Upgrade"
+        primaryButtonStyle={{width: 300, backgroundColor:"#E94DAA"}}
+        onPrimaryButtonPress={handleUpgrade}
+        customCloseIcon={<Ionicons
+                      name="close"
+                      size={20}
+                      color={"#E94DAA"}/>}
+      />
+```
+
+### RTL
+
+```tsx
+<Popup
+  visible={isVisible}
+  onClose={handleClose}
+  showCloseIcon={true}
+  title="ترقية إلى النسخة المميزة"
+  subtitle="استمتع بمزايا حصرية"
+  content="احصل على جميع الميزات المتقدمة والمحتوى الحصري بدون إعلانات. اشترك الآن واستمتع بتجربة كاملة مع تحديثات مجانية لمدة عام كامل."
+  primaryButtonText="ترقية الآن"
+  secondaryButtonText="ليس الآن"
+  onPrimaryButtonPress={handleUpgrade}
+  onSecondaryButtonPress={handleDismiss}
+  isRTL={true}
+/>
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `visible` | `boolean` | Required | Controls the visibility of the popup |
+| `onClose` | `() => void` | Required | Function to call when popup should be closed |
+| `backgroundImage` | `ImageSourcePropType` | `undefined` | Optional background image for the popup |
+| `title` | `string` | `undefined` | Main title text |
+| `subtitle` | `string` | `undefined` | Subtitle text displayed below title |
+| `content` | `string` | `undefined` | Main content text |
+| `children` | `ReactNode` | `undefined` | Custom content to render inside the popup |
+| `primaryButtonText` | `string` | `undefined` | Text for the primary action button |
+| `onPrimaryButtonPress` | `() => void` | `undefined` | Function to execute when primary button is pressed |
+| `secondaryButtonText` | `string` | `undefined` | Text for the secondary action button |
+| `onSecondaryButtonPress` | `() => void` | `undefined` | Function to execute when secondary button is pressed |
+| `closeOnBackdropPress` | `boolean` | `true` | Whether tapping outside the popup should close it |
+| `showCloseIcon` | `boolean` | `false` | Whether to show the close icon button |
+| `closeIconVariant` | `"floating" \| "nested"` | `"floating"` | Style variant for the close icon position |
+| `customCloseIcon` | `ReactNode` | `undefined` | Custom component to use as close icon |
+| `illustrationImage` | `ImageSourcePropType` | `undefined` | Image to display at the top of the content area |
+| `isRTL` | `boolean` | `false` | Whether to render in right-to-left mode |
+| `containerStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the container |
+| `contentContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the content container |
+| `titleStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the title text |
+| `subtitleStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the subtitle text |
+| `contentStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the content text |
+| `primaryButtonStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the primary button |
+| `primaryButtonTextStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the primary button text |
+| `secondaryButtonStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the secondary button |
+| `secondaryButtonTextStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the secondary button text |
+| `closeIconContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the close icon container |
+| `closeIconStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the close icon |
+| `illustrationStyle` | `StyleProp<ImageStyle>` | `undefined` | Additional styles for the illustration image |
+
+### Close Icon Variants
+
+- **Floating**: The close icon appears outside the popup's main border, creating a floating effect
+- **Nested**: The close icon appears inside the popup's border in the top-right (or top-left in RTL mode)
+
+### Related Components
+
+- `Modal`: The native React Native component used as the foundation
+- `ImageBackground`: Used when a background image is provided
+- `TouchableOpacity`: Used for the buttons and close icon
+- `Text`: Used for rendering text content

package/src/components/Popup/index.ts

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

package/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,157 @@
+import { useTheme } from "../../theme/ThemeContext";
+import React from "react";
+import { View, Text, StyleSheet, ViewStyle, TextStyle } from "react-native";
+
+export type ProgressBarTextPosition = "inside" | "above" | "below";
+export type ProgressBarTextAlign = "center" | "left" | "right";
+
+interface ProgressBarProps {
+  progress?: number;
+  text?: string;
+  containerStyle?: ViewStyle;
+  barContainerStyle?: ViewStyle;
+  progressStyle?: ViewStyle;
+  remainingStyle?: ViewStyle;
+  textStyle?: TextStyle;
+  progressColor?: string;
+  remainingColor?: string;
+  textColor?: string;
+  height?: number;
+  width?: number;
+  borderRadius?: number;
+  textPosition?: ProgressBarTextPosition;
+  textAlign?: "center" | "left" | "right";
+  showText?: boolean;
+  isRTL?: boolean;
+}
+
+const ProgressBar: React.FC<ProgressBarProps> = ({
+  progress = 0.5,
+  text = "",
+  containerStyle = {},
+  barContainerStyle = {},
+  progressStyle = {},
+  remainingStyle = {},
+  textStyle = {},
+  progressColor: progressColorProp,
+  remainingColor: remainingColorProp,
+  textColor: textColorProp,
+  height = 40,
+  width,
+  borderRadius = 5,
+  textPosition = "inside",
+  textAlign = "left",
+  showText = true,
+  isRTL = false,
+}) => {
+  const theme = useTheme();
+  const progressColor = progressColorProp ?? theme.primary;
+  const remainingColor = remainingColorProp ?? theme.border;
+  const textColor = textColorProp ?? theme.onPrimary;
+
+  const clampedProgress: number = Math.min(Math.max(progress, 0), 1);
+
+  return (
+    <View style={[styles.container, containerStyle, { width }]}>
+      {textPosition === "above" && showText && (
+        <Text
+          style={[
+            styles.textAbove,
+            { color: theme.text, textAlign }, // Use theme.text for outside text
+            textStyle,
+          ]}
+        >
+          {text}
+        </Text>
+      )}
+
+      <View
+        style={[
+          styles.barContainer,
+          {
+            height,
+            borderRadius,
+            backgroundColor: remainingColor,
+          },
+          barContainerStyle,
+        ]}
+      >
+        <View
+          style={[
+            styles.progressBar,
+            isRTL ? { right: 0 } : { left: 0 },
+            {
+              width: `${clampedProgress * 100}%`,
+              height: "100%",
+              borderRadius,
+              backgroundColor: progressColor,
+            },
+            progressStyle,
+          ]}
+        />
+
+        {textPosition === "inside" && showText && (
+          <Text
+            style={[
+              styles.textInside,
+              { color: textColor, textAlign }, // Use determined textColor for inside
+              textStyle,
+            ]}
+          >
+            {text}
+          </Text>
+        )}
+      </View>
+
+      {textPosition === "below" && showText && (
+        <Text
+          numberOfLines={1}
+          style={[
+            styles.textBelow,
+            { color: theme.text, textAlign }, // Use theme.text for outside text
+            textStyle,
+          ]}
+        >
+          {text}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    justifyContent: "center",
+  },
+  barContainer: {
+    width: "100%",
+    overflow: "hidden",
+    position: "relative",
+  },
+  progressBar: {
+    position: "absolute",
+    top: 0,
+  },
+  textInside: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    textAlign: "center",
+    textAlignVertical: "center",
+    paddingHorizontal: 10,
+    fontWeight: "bold",
+  },
+  textAbove: {
+    marginBottom: 5,
+    fontWeight: "bold",
+  },
+  textBelow: {
+    marginTop: 5,
+    fontWeight: "bold",
+  },
+});
+
+export default ProgressBar;

package/src/components/ProgressBar/index.ts

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