related-ui-components 1.1.6

package/src/components/Card/CardImage.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Image, View, StyleSheet } from 'react-native';
+import { CardImageProps } from './types';
+
+const CardImage: React.FC<CardImageProps> = ({
+  source,
+  style,
+  height = 200,
+  width = '100%',
+  resizeMode = 'cover',
+  borderRadius,
+  overlay,
+}) => (
+  <View style={styles.container}>
+    <Image
+      source={source}
+      style={[
+        styles.image,
+        // {
+        //   height,
+        //   width,
+        //   resizeMode,
+        //   borderRadius,
+        // },
+        style,
+      ]}
+    />
+    {overlay && (
+      <View style={styles.overlay}>
+        {overlay}
+      </View>
+    )}
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+  },
+  image: {
+    width: '100%',
+    height: 200,
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default CardImage;

package/src/components/Card/index.ts

@@ -0,0 +1,15 @@
+// components/Card/index.ts
+export { default as Card} from './Card';
+export * from './Card';
+export { default as CardContent } from './CardContent';
+export { default as CardFooter } from './CardFooter';
+export { default as CardHeader } from './CardHeader';
+export { default as CardImage } from './CardImage';
+
+// Export templates
+export { default as DealCardWithBackgroundImage } from './templates/DealCardWithBackgroundImage';
+export { default as DealCard } from "./templates/DealCard";
+export { default as SimpleTrendingCard } from './templates/SimpleTrendingCard';
+
+// Export types
+export * from './types';

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

@@ -0,0 +1,255 @@
+import React from "react";
+import {
+  ImageRequireSource,
+  StyleProp,
+  ViewStyle,
+  View,
+  Text,
+  TextStyle,
+  Image,
+  useWindowDimensions,
+} from "react-native";
+import Card from "../Card";
+import { useTheme } from "../../../theme/ThemeContext";
+import ProgressBar, {
+  ProgressBarTextAlign,
+  ProgressBarTextPosition,
+} from "../../ProgressBar/ProgressBar";
+import CardHeader from "../CardHeader";
+import CardFooter from "../CardFooter";
+import LockOverlay from "../../LockOverlay/LockOverlay";
+
+interface HorizontalDealCardProps {
+  imageSource: ImageRequireSource;
+  variant?: "vertical" | "horizontal";
+  label?: string;
+  labelStyle?: StyleProp<TextStyle>;
+  labelContainerStyle?: StyleProp<ViewStyle>;
+  dealDescription?: string;
+  dealDescriptionStyle?: StyleProp<TextStyle>;
+  dealProviderName?: string;
+  dealProviderNameStyle?: StyleProp<TextStyle>;
+  dealPrice?: string;
+  dealPriceStyle?: StyleProp<TextStyle>;
+  progressBar?: boolean;
+  progressBarText?: string;
+  progressBarTextPosition?: ProgressBarTextPosition;
+  progressBarTextAlign?: ProgressBarTextAlign;
+  progressColor?: string;
+  progressWidth?: number;
+  progressHeight?: number;
+  remainingProgressColor?: string;
+  progressValue?: number;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  width?: number | string;
+  isRTL?: boolean;
+  overlayVisible?: boolean;
+}
+
+const DealCard: React.FC<HorizontalDealCardProps> = ({
+  imageSource,
+  onPress,
+  label,
+  labelContainerStyle,
+  labelStyle,
+  dealDescription,
+  dealDescriptionStyle,
+  dealPrice,
+  dealPriceStyle,
+  dealProviderName,
+  dealProviderNameStyle,
+  progressBar,
+  progressBarText,
+  progressBarTextPosition,
+  progressBarTextAlign,
+  progressValue,
+  progressHeight,
+  progressWidth,
+  remainingProgressColor,
+  progressColor,
+  style,
+  width,
+  variant = "horizontal",
+  isRTL = false,
+  overlayVisible = false,
+}) => {
+  const theme = useTheme();
+  const { width: screenWidth } = useWindowDimensions();
+  const isVertical = variant === "vertical";
+
+  const imageSize = Math.min(110, 110);
+  const cardPadding = 12
+  const fontSize = screenWidth < 360 ? 14 : 16;
+
+  const calculatedProgressWidth =
+    progressWidth ||
+    (typeof width === "number" ? width * 0.4 : screenWidth * 0.3);
+
+  const containerFlexDirection = isVertical
+    ? "column"
+    : isRTL
+    ? "row-reverse"
+    : "row";
+
+  const textContainerStyle: ViewStyle = {
+    flex: isVertical ? 0 : 1,
+    ...(isVertical
+      ? { paddingLeft: cardPadding, paddingRight: cardPadding }
+      : isRTL
+      ? { paddingLeft: cardPadding }
+      : { paddingRight: cardPadding }),
+  };
+
+  const renderDealPrice = (): React.ReactNode => {
+    return (
+      <Text
+        style={[
+          {
+            textAlign: "right",
+            fontSize: fontSize,
+            fontWeight: "bold",
+            marginBottom: 3,
+            color: theme.text,
+          },
+          isRTL && { textAlign: "left" },
+          dealPriceStyle,
+        ]}
+      >
+        {dealPrice}
+      </Text>
+    );
+  };
+
+  return (
+    <Card
+      onPress={onPress}
+      variant="filled"
+      backgroundColor={theme.surface}
+      style={[
+        {
+          borderRadius: 16,
+          overflow: "hidden",
+          alignItems: isVertical ? "stretch" : "center",
+          flexDirection: containerFlexDirection,
+        },
+        typeof width === "number" && { width },
+        style,
+      ]}
+    >
+      <View
+        style={
+          isVertical
+            ? {
+                position: "relative",
+                marginHorizontal: cardPadding,
+                marginVertical: cardPadding,
+                borderRadius: 10,
+                overflow: "hidden",
+              }
+            : {
+                position: "relative",
+                marginLeft: cardPadding,
+                marginRight: cardPadding,
+                borderRadius: 10,
+                overflow: "hidden",
+              }
+        }
+      >
+        <Image
+          source={imageSource}
+          style={
+            isVertical
+              ? {
+                  height: 200,
+                  width: "100%",
+                  borderRadius: 10,
+                  alignSelf: "center",
+                  resizeMode: "cover",
+                }
+              : {
+                  width: imageSize,
+                  height: imageSize,
+                  borderRadius: 10,
+                  alignSelf: "center",
+                  resizeMode: "cover",
+                }
+          }
+        />
+        <LockOverlay visible={overlayVisible} />
+      </View>
+
+      <View style={textContainerStyle}>
+        <CardHeader
+          title={dealProviderName}
+          subtitle={dealDescription}
+          subtitleStyle={[
+            isRTL && { textAlign: "right" },
+            dealDescriptionStyle,
+          ]}
+          titleStyle={[isRTL && { textAlign: "right" }, dealProviderNameStyle]}
+          style={{ paddingLeft: 0, paddingRight: 0 }}
+        />
+        <View style={{ marginTop: 10, marginBottom: 15 }}>
+          {renderDealPrice()}
+          <CardFooter
+            justifyContent="space-between"
+            style={[{ padding: 0 }, isRTL && { flexDirection: "row-reverse" }]}
+          >
+            {label && (
+              <View
+                style={[
+                  {
+                    backgroundColor: theme.primary,
+                    paddingVertical: 5,
+                    paddingHorizontal: 8,
+                    borderRadius: 10,
+                  },
+                  labelContainerStyle,
+                ]}
+              >
+                <Text
+                  style={[
+                    {
+                      color: theme.onPrimary,
+                      fontSize: 14,
+                    },
+                    labelStyle,
+                  ]}
+                >
+                  {label}
+                </Text>
+              </View>
+            )}
+            <View>
+              {progressBar && (
+                <ProgressBar
+                  progress={progressValue}
+                  remainingColor={remainingProgressColor}
+                  progressColor={progressColor}
+                  height={progressHeight || (screenWidth < 360 ? 10 : 14)}
+                  width={calculatedProgressWidth}
+                  textPosition={progressBarTextPosition}
+                  text={progressBarText}
+                  showText={progressBarText != null}
+                  textAlign={
+                    isRTL && progressBarTextAlign == null
+                      ? "right"
+                      : progressBarTextAlign
+                  }
+                  isRTL={isRTL}
+                  textStyle={{
+                    fontSize: screenWidth < 360 ? 8 : 10,
+                    color: theme.text,
+                  }}
+                />
+              )}
+            </View>
+          </CardFooter>
+        </View>
+      </View>
+    </Card>
+  );
+};
+
+export default DealCard;

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

@@ -0,0 +1,273 @@
+import React, { useState } from "react";
+import {
+  ImageRequireSource,
+  StyleProp,
+  ViewStyle,
+  View,
+  Text,
+  TextStyle,
+  TouchableOpacity,
+} from "react-native";
+import Card from "../Card";
+import CardHeader from "../CardHeader";
+import CardContent from "../CardContent";
+import { useTheme } from "../../../theme/ThemeContext";
+import CardFooter from "../CardFooter";
+import ProgressBar, {
+  ProgressBarTextAlign,
+  ProgressBarTextPosition,
+} from "../../ProgressBar/ProgressBar";
+import LockOverlay from "../../LockOverlay/LockOverlay";
+
+interface DealCardProps {
+  backgroundImage: ImageRequireSource;
+  label?: string;
+  labelStyle?: StyleProp<TextStyle>;
+  labelContainerStyle?: StyleProp<ViewStyle>;
+  actionIconDefault?: React.ReactNode;
+  actionIconActive?: React.ReactNode;
+  onActionPress?: (active: boolean) => void;
+  innerCardStyle?: ViewStyle;
+  innerCardVariant?: "floating" | "nested";
+  dealDescription?: string;
+  dealDescriptionStyle?: StyleProp<TextStyle>;
+  dealProviderName?: string;
+  dealProviderNameStyle?: StyleProp<TextStyle>;
+  dealPrice?: string;
+  dealPriceStyle?: StyleProp<TextStyle>;
+  progressBar?: boolean;
+  progressBarText?: string;
+  progressBarTextPosition?: ProgressBarTextPosition;
+  progressBarTextAlign?: ProgressBarTextAlign;
+  progressColor?: string;
+  progressWidth?: number;
+  progressHeight?: number;
+  remainingProgressColor?: string;
+  progressValue?: number;
+  onPress?: () => void;
+  style?: ViewStyle;
+  width?: number;
+  isRTL?: boolean;
+  overlayVisible?: boolean;
+  overlayCover?: "all" | "background";
+}
+
+const DealCardWithBackgroundImage: React.FC<DealCardProps> = ({
+  backgroundImage,
+  onPress,
+  label,
+  labelContainerStyle,
+  labelStyle,
+  actionIconDefault,
+  actionIconActive,
+  onActionPress,
+  innerCardStyle,
+  dealDescription,
+  dealDescriptionStyle,
+  dealPrice,
+  dealPriceStyle,
+  dealProviderName,
+  dealProviderNameStyle,
+  progressBar,
+  progressBarText,
+  progressBarTextPosition,
+  progressBarTextAlign,
+  progressValue,
+  progressHeight,
+  progressWidth,
+  remainingProgressColor,
+  progressColor,
+  innerCardVariant = "nested",
+  style,
+  width = 300,
+  isRTL = false,
+  overlayVisible = false,
+  overlayCover = "background",
+}) => {
+  const theme = useTheme();
+
+  const [isActive, setIsActive] = useState(false);
+
+  const handleActionPress = () => {
+    if (!actionIconActive) return;
+    setIsActive(!isActive);
+    if (onActionPress) {
+      onActionPress(!isActive);
+    }
+  };
+
+  const labelContent = label && (
+    <View
+      style={[
+        {
+          backgroundColor: theme.surface,
+          paddingVertical: 5,
+          paddingHorizontal: 8,
+          borderRadius: 10,
+        },
+        labelContainerStyle,
+      ]}
+    >
+      <Text style={[{ color: theme.onSurface }, labelStyle]}>{label}</Text>
+    </View>
+  );
+
+  const actionContent = (
+    <TouchableOpacity onPress={handleActionPress}>
+      {isActive ? actionIconActive : actionIconDefault}
+    </TouchableOpacity>
+  );
+
+  const headerLeft = isRTL ? actionContent : labelContent;
+  const headerRight = isRTL ? labelContent : actionContent;
+
+  const mainCardBorderRadius = style?.borderRadius || 8;
+
+  const innerCardBorderRadius = 30;
+  const getVariantStyle = (): StyleProp<ViewStyle> => {
+    if (innerCardVariant === "floating") {
+      return {
+        position: "absolute",
+        bottom: -30,
+        width: width,
+        marginHorizontal: 0,
+        marginVertical: 0,
+        paddingBottom: progressBar || dealPrice ? 0 : 20,
+        borderRadius: 20,
+      };
+    }
+    return {};
+  };
+
+  const computedInnerCardStyle = [
+    {
+      borderRadius: innerCardBorderRadius,
+    },
+    getVariantStyle(),
+    innerCardStyle,
+  ];
+  const finalInnerBorderRadius =
+    (innerCardStyle?.borderRadius as number) ||
+    (innerCardVariant === "floating" ? 20 : innerCardBorderRadius) ||
+    innerCardBorderRadius;
+
+  const overlayStyle: ViewStyle = {
+    borderRadius: mainCardBorderRadius,
+    borderBottomLeftRadius:
+      innerCardVariant === "floating"
+        ? finalInnerBorderRadius
+        : mainCardBorderRadius,
+    borderBottomRightRadius:
+      innerCardVariant === "floating"
+        ? finalInnerBorderRadius
+        : mainCardBorderRadius,
+    bottom: innerCardVariant === "floating" ? -30 : 0,
+    overflow: "hidden",
+  };
+
+  return (
+    <Card
+      onPress={onPress}
+      style={[
+        {
+          height: 300,
+          position: "relative",
+          borderRadius: mainCardBorderRadius,
+        },
+        style,
+        { width },
+      ]}
+      backgroundImage={{
+        source: backgroundImage,
+        resizeMode: "cover",
+      }}
+    >
+      <LockOverlay
+        visible={overlayVisible}
+        containerStyle={overlayStyle}
+        contentVerticalAlign={overlayCover == "background" ? "top" : "center"}
+      />
+      <CardHeader
+        left={headerLeft}
+        right={headerRight}
+        style={{ alignItems: "center" }}
+      />
+
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "flex-end",
+          zIndex: overlayCover == "background" ? 1000 : 0,
+        }}
+      >
+        <CardContent style={{ padding: 0 }}>
+          <Card
+            backgroundColor={theme.surface}
+            variant="filled"
+            style={computedInnerCardStyle}
+          >
+            <CardHeader
+              title={dealProviderName}
+              titleColor={theme.text}
+              titleStyle={[
+                { fontSize: 18, textAlign: isRTL ? "right" : "left" },
+                dealProviderNameStyle,
+              ]}
+              subtitle={dealDescription}
+              subtitleColor={theme.helper}
+              subtitleStyle={[
+                { textAlign: isRTL ? "right" : "left" },
+                dealDescriptionStyle,
+              ]}
+            />
+            {(progressBar || dealPrice) && (
+              <CardFooter
+                justifyContent="space-between"
+                style={{
+                  flexDirection: isRTL ? "row-reverse" : "row",
+                }}
+              >
+                {progressBar && (
+                  <ProgressBar
+                    progress={progressValue}
+                    remainingColor={remainingProgressColor}
+                    progressColor={progressColor}
+                    height={progressHeight || 14}
+                    width={progressWidth || width * 0.5}
+                    textPosition={progressBarTextPosition}
+                    text={progressBarText}
+                    showText={progressBarText != null}
+                    textAlign={
+                      isRTL && progressBarTextAlign == null
+                        ? "right"
+                        : progressBarTextAlign
+                    }
+                    textStyle={{ fontSize: 10, color: theme.text }}
+                    isRTL={isRTL}
+                  />
+                )}
+                <View>
+                  <Text
+                    style={[
+                      {
+                        fontSize: 16,
+                        color: theme.primary,
+                        fontWeight: "bold",
+                        textAlign: isRTL ? "left" : "right",
+                      },
+                      dealPriceStyle,
+                    ]}
+                  >
+                    {dealPrice}
+                  </Text>
+                </View>
+              </CardFooter>
+            )}
+          </Card>
+        </CardContent>
+      </View>
+    </Card>
+  );
+};
+
+export default DealCardWithBackgroundImage;