related-ui-components 1.1.6

package/src/components/Banner/BannerWithDetails.tsx

@@ -0,0 +1,133 @@
+import React from "react";
+import {
+  View,
+  Image,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  ImageStyle,
+  TouchableOpacity,
+  ImageRequireSource,
+} from "react-native";
+import { Card, CardContent } from "../Card";
+import { useTheme, ThemeType } from "../../theme"; // Import ThemeType
+
+interface BannerWithDetailsProps {
+  backgroundImage: ImageRequireSource;
+  logoImage: ImageRequireSource;
+  detailText: string;
+  onPress?: () => void;
+  containerStyle?: ViewStyle;
+  imageStyle?: ViewStyle; // Note: This seems to be applied to backgroundImage style
+  logoContainerStyle?: ViewStyle;
+  logoStyle?: ImageStyle; // Note: This seems to be applied to logo backgroundImage imageStyle
+  textContainerStyle?: ViewStyle;
+  textStyle?: TextStyle;
+  customLogo?: React.ReactNode; // Note: customLogo prop is declared but not used
+  customDetailContent?: React.ReactNode;
+}
+
+const BannerWithDetails: React.FC<BannerWithDetailsProps> = ({
+  backgroundImage,
+  logoImage,
+  detailText,
+  onPress,
+  containerStyle,
+  imageStyle,
+  logoContainerStyle,
+  logoStyle,
+  textContainerStyle,
+  textStyle,
+  customDetailContent,
+}) => {
+  const theme = useTheme();
+  const styles = createStyles(theme); // Create styles using theme
+
+  const content = (
+    <View style={{ width: "100%", paddingBottom: 50 }}>
+      <Card
+        style={[styles.container, containerStyle]}
+        backgroundImage={{
+          source: backgroundImage,
+          style: [styles.backgroundImage, imageStyle],
+        }}
+        borderRadius={15}
+      >
+        <CardContent style={styles.cardContent}>
+          <Card
+            style={[styles.logoContainer, logoContainerStyle]}
+            backgroundImage={{
+              source: logoImage,
+              style: [styles.backgroundImage],
+              imageStyle: logoStyle,
+            }}
+          />
+          <Card
+            variant="elevated" 
+            style={[styles.textContainer, textContainerStyle]}
+          >
+            {customDetailContent || (
+              <Text style={[styles.detailText, textStyle]}>
+                {detailText}
+              </Text>
+            )}
+          </Card>
+        </CardContent>
+      </Card>
+    </View>
+  );
+
+  if (onPress) {
+    return <TouchableOpacity onPress={onPress}>{content}</TouchableOpacity>;
+  }
+
+  return content;
+};
+
+// Function to create themed styles
+const createStyles = (theme: ThemeType) =>
+  StyleSheet.create({
+    container: {
+      position: "relative",
+      borderRadius: 12,
+      padding: 0,
+      height: 300,
+    },
+    backgroundImage: {
+      width: "100%",
+      height: "100%",
+      resizeMode: "cover",
+    },
+    cardContent: {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      padding: 0,
+      alignItems: "center",
+      transform: [{ translateY: "30%" }],
+    },
+    logoContainer: {
+      marginVertical: 0,
+      bottom: -15,
+      width: 90,
+      height: 80,
+      zIndex: 50,
+      // Background is image
+    },
+    textContainer: {
+      marginVertical: 0,
+      padding: 20,
+      height: 80,
+      width: "90%",
+      justifyContent: "center",
+    },
+    detailText: {
+      textAlign: "center",
+      fontSize: 14,
+      color: theme.onSurface, // Use standard text color
+    },
+  });
+
+export default BannerWithDetails;

package/src/components/Banner/README.md

@@ -0,0 +1,101 @@
+# Banner
+
+![Banner Component](../../assets/components/SimpleBanner.png)
+
+## Banner Documentation
+
+The `Banner` is a customizable banner component with a background image and an optional action button. It supports different vertical alignments, custom styling, and an optional icon that can be positioned on either side of the button text.
+
+### Usage
+
+```tsx
+import Banner from "@/components/Card/templates/Banner";
+import { Ionicons } from "@expo/vector-icons";
+
+const MyComponent = () => {
+  return (
+    <Banner
+      backgroundImage={require("@/assets/images/banner-bg.jpg")}
+      buttonText="Redeem Now"
+      onButtonPress={() => Alert.alert("Button pressed")}
+      onBannerPress={() => Alert.alert("Banner pressed")}
+      height={200}
+      contentAlignment="bottom"
+      icon={<Ionicons name="gift-outline" size={20} color="#FFFFFF" />}
+      iconPosition="left"
+    />
+  );
+};
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `backgroundImage` | `ImageRequireSource` | Required | The background image to display in the banner |
+| `buttonText` | `string` | `"Redeem"` | Text to display on the action button |
+| `onButtonPress` | `() => void` | `undefined` | Function to execute when the button is pressed |
+| `onBannerPress` | `() => void` | `undefined` | Function to execute when the banner (outside the button) is pressed |
+| `containerStyle` | `ViewStyle` | `undefined` | Additional styles to apply to the banner container |
+| `backgroundImageStyle` | `ViewStyle` | `undefined` | Additional styles to apply to the background image |
+| `contentContainerStyle` | `ViewStyle` | `undefined` | Additional styles to apply to the content container |
+| `buttonStyle` | `ViewStyle` | `undefined` | Additional styles to apply to the button |
+| `buttonTextStyle` | `TextStyle` | `undefined` | Additional styles to apply to the button text |
+| `height` | `DimensionValue` | `300` | Height of the banner |
+| `customButton` | `React.ReactNode` | `undefined` | Custom button component to replace the default button |
+| `contentAlignment` | `"top" \| "center" \| "bottom"` | `"center"` | Vertical alignment of the content within the banner |
+| `icon` | `React.ReactNode` | `undefined` | Optional icon to display alongside the button text |
+| `iconPosition` | `"left" \| "right"` | `"left"` | Position of the icon relative to the button text |
+| `iconStyle` | `ViewStyle` | `undefined` | Additional styles to apply to the icon container |
+| `iconSpacing` | `number` | `8` | Spacing between the icon and button text |
+
+### Related Components
+
+- `Card`: The base component used for the overall container
+- `CardFooter`: Contains the button and manages content positioning
+
+# BannerWithDetails
+
+![BannerWithDetails Component](../../assets/components/BannerWithDetails.png)
+
+## BannerWithDetails Documentation
+
+The `BannerWithDetails` is a visually appealing banner component that combines a background image with a prominently featured logo and a card containing detail text. It's designed for showcasing brand information or promotional content with a clean, elevated appearance.
+
+### Usage
+
+```tsx
+import BannerWithDetails from "@/components/Card/templates/BannerWithDetails";
+
+const MyComponent = () => {
+  return (
+    <BannerWithDetails
+      backgroundImage={require("@/assets/images/banner-bg.jpg")}
+      logoImage={require("@/assets/images/company-logo.png")}
+      detailText="Limited time offer: 25% off on all premium items!"
+      onPress={() => Alert.alert("Banner pressed")}
+    />
+  );
+};
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `backgroundImage` | `ImageRequireSource` | Required | The background image for the banner |
+| `logoImage` | `ImageRequireSource` | Required | The logo image to display in the centered card |
+| `detailText` | `string` | Required | Text description to display in the details card |
+| `onPress` | `() => void` | `undefined` | Function to execute when the banner is pressed |
+| `containerStyle` | `ViewStyle` | `undefined` | Additional styles for the main container |
+| `imageStyle` | `ViewStyle` | `undefined` | Additional styles for the background image |
+| `logoContainerStyle` | `ViewStyle` | `undefined` | Additional styles for the logo container |
+| `logoStyle` | `ImageStyle` | `undefined` | Additional styles for the logo image |
+| `textContainerStyle` | `ViewStyle` | `undefined` | Additional styles for the text container |
+| `textStyle` | `TextStyle` | `undefined` | Additional styles for the detail text |
+| `customDetailContent` | `React.ReactNode` | `undefined` | Custom content to replace the default detail text |
+
+### Related Components
+
+- `Card`: Used for the main container, logo container, and text container
+- `CardContent`: Manages the positioning of the logo and text containers

package/src/components/Banner/index.ts

@@ -0,0 +1,5 @@
+export {default as Banner} from "./Banner";
+export {default as BannerWithDetails} from "./BannerWithDetails";
+
+export * from "./Banner"
+export * from "./BannerWithDetails"

package/src/components/BrandIcon/BrandIcon.tsx

@@ -0,0 +1,134 @@
+import { useTheme, ThemeType } from "../../theme";
+import React from 'react';
+import {
+  View,
+  Image,
+  TouchableOpacity,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  ImageSourcePropType,
+  ImageStyle,
+} from 'react-native';
+
+interface BrandIconProps {
+  brand: {
+    id: string;
+    logo: ImageSourcePropType;
+    name: string;
+  };
+  size?: number;
+  selected?: boolean;
+  onPress?: () => void;
+  disabled?: boolean;
+  containerStyle?: StyleProp<ViewStyle>;
+  imageStyle?: StyleProp<ImageStyle>;
+  selectionIndicatorStyle?: StyleProp<ViewStyle>;
+  selectionIndicatorIcon?: React.ReactNode
+}
+
+const BrandIcon: React.FC<BrandIconProps> = ({
+  brand,
+  size = 66,
+  selected = false,
+  onPress,
+  disabled = false,
+  containerStyle,
+  imageStyle,
+  selectionIndicatorStyle,
+  selectionIndicatorIcon
+}) => {
+  const theme = useTheme();
+  const styles = createStyles(theme); // Create styles using theme
+
+  const iconSize = {
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+  };
+
+  const imageSize = {
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+  };
+
+  const indicatorSize = {
+    width: size * 0.3,
+    height: size * 0.3,
+    borderRadius: (size * 0.3) / 2,
+  };
+
+  const indicatorPosition = {
+    top: -5,
+    right: 0,
+  };
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.container,
+        iconSize,
+        selected && styles.selectedContainer,
+        containerStyle,
+      ]}
+      onPress={onPress}
+      disabled={disabled || !onPress}
+      activeOpacity={0.8}
+    >
+      <Image
+        source={brand.logo}
+        style={[styles.logo, imageSize, imageStyle]}
+        resizeMode="contain"
+      />
+
+      {selected && (
+        <View
+          style={[
+            styles.selectionIndicator,
+            indicatorSize,
+            indicatorPosition,
+            selectionIndicatorStyle,
+          ]}
+        >
+            {selectionIndicatorIcon}
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+// Function to create themed styles
+const createStyles = (theme: ThemeType) => StyleSheet.create({
+  container: {
+    backgroundColor: theme.surface, // Use surface for background
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: theme.border, // Use border color
+    shadowColor: '#000000', // Keep shadow black for now
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  selectedContainer: {
+    borderColor: theme.primary, // Use primary for selected border
+    borderWidth: 2, // Keep border width for selected state
+  },
+  logo: {},
+  selectionIndicator: {
+    position: 'absolute',
+    backgroundColor: theme.primary, // Use primary for indicator background
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 2,
+  },
+  checkmark: { // Style is unused in current code, but if used:
+    width: '60%',
+    height: '60%',
+    // tintColor: theme.onPrimary, // Use onPrimary if checkmark is an icon/image
+  },
+});
+
+export default BrandIcon;

package/src/components/BrandIcon/index.ts

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

package/src/components/Card/Card.tsx

@@ -0,0 +1,144 @@
+import React from "react";
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  Platform,
+  ImageBackground,
+} from "react-native";
+import { CardProps } from "./types";
+import { useTheme } from "../../theme/ThemeContext";
+
+const Card: React.FC<CardProps> = ({
+  children,
+  style,
+  onPress,
+  disabled = false,
+  elevation = 1,
+  testID,
+  variant,
+  backgroundColor,
+  borderColor,
+  borderRadius = 8,
+  backgroundImage,
+  // margin,
+  // padding,
+}) => {
+  const theme = useTheme();
+
+  const getCardStyle = () => {
+    const baseStyle: any = {
+      backgroundColor: backgroundColor || theme.background,
+      borderRadius,
+    };
+
+    switch (variant) {
+      case "outlined":
+        return {
+          ...baseStyle,
+          borderWidth: 1,
+          borderColor: borderColor || theme.border,
+        };
+      case "filled":
+        return {
+          ...baseStyle,
+          backgroundColor: backgroundColor || theme.primary,
+        };
+      case "elevated":
+        return {
+          ...baseStyle,
+          borderColor: borderColor || "transparent",
+          ...Platform.select({
+            ios: {
+              shadowColor: "#000",
+              shadowOffset: { width: 0, height: elevation },
+              shadowOpacity: 0.1,
+              shadowRadius: elevation,
+            },
+            android: {
+              elevation,
+            },
+          }),
+        };
+    }
+  };
+
+  const cardStyle = [
+    styles.card,
+    getCardStyle(),
+    disabled && { opacity: 0.6 },
+    style,
+    backgroundImage && { backgroundColor: "transparent" },
+  ];
+
+  const renderCardContent = () =>
+    backgroundImage ? (
+      <ImageBackground
+        source={backgroundImage.source}
+        style={[styles.backgroundImage, backgroundImage.style]}
+        imageStyle={[{ borderRadius }, backgroundImage.imageStyle]}
+        resizeMode={backgroundImage.resizeMode || "cover"}
+        blurRadius={backgroundImage.blurRadius}
+      >
+        <View
+          style={[
+            styles.imageContentContainer,
+            {
+              opacity:
+                backgroundImage.opacity !== undefined
+                  ? backgroundImage.opacity
+                  : 1,
+            },
+          ]}
+        >
+          {children}
+        </View>
+      </ImageBackground>
+    ) : (
+      children
+    );
+
+  if (onPress) {
+    return (
+      <TouchableOpacity
+        style={cardStyle}
+        onPress={onPress}
+        disabled={disabled}
+        testID={testID}
+        activeOpacity={0.7}
+        accessibilityRole="button"
+        accessibilityLabel={"Card"}
+      >
+        {renderCardContent()}
+      </TouchableOpacity>
+    );
+  }
+
+  return (
+    <View style={cardStyle} testID={testID}>
+      {renderCardContent()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: 8,
+    // overflow: "hidden",
+    marginVertical: 8,
+    marginHorizontal: 16,
+    flexDirection: "column",
+    display: "flex",
+  },
+  backgroundImage: {
+    width: "100%",
+    height: "100%",
+    // overflow: "hidden",
+  },
+  imageContentContainer: {
+    flex: 1,
+    backgroundColor: "transparent",
+  },
+});
+
+export default Card;

package/src/components/Card/CardContent.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { CardContentProps } from "./types";
+
+const CardContent: React.FC<CardContentProps> = ({
+  children,
+  style,
+  padding = 16,
+}) => {
+  const getContentStyle = () => {
+    if (typeof padding === "number") {
+      return { padding };
+    } else if (padding) {
+      return {
+        paddingHorizontal: padding.horizontal,
+        paddingVertical: padding.vertical,
+      };
+    }
+    return { padding: 16 };
+  };
+
+  return (
+    <View style={[styles.content, getContentStyle(), style]}>{children}</View>
+  );
+};
+
+const styles = StyleSheet.create({
+  content: {
+    padding: 16,
+  },
+});
+
+export default CardContent;

package/src/components/Card/CardFooter.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { CardFooterProps } from "./types";
+
+const CardFooter: React.FC<CardFooterProps> = ({
+  children,
+  style,
+  inset = false,
+  justifyContent = "flex-end",
+}) => (
+  <View
+    style={[
+      styles.footer,
+      { justifyContent },
+      inset && { marginHorizontal: 16 },
+      style,
+    ]}
+  >
+    {children}
+  </View>
+);
+
+const styles = StyleSheet.create({
+  footer: {
+    padding: 16,
+    // paddingBottom: 0,
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    // alignItems: "center",
+  },
+});
+
+export default CardFooter;

package/src/components/Card/CardHeader.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { CardHeaderProps } from './types';
+import { useTheme } from '../../theme/ThemeContext';
+
+const CardHeader: React.FC<CardHeaderProps> = ({
+  title,
+  subtitle,
+  left,
+  right,
+  style,
+  titleStyle,
+  subtitleStyle,
+  titleColor,
+  subtitleColor,
+}) => {
+  const theme = useTheme();
+
+  return (
+    <View style={[styles.header, style]}>
+      {left && <View style={styles.left}>{left}</View>}
+      
+      <View style={[styles.headerTextContainer, !left ? { paddingLeft: 0 } : {}]}>
+        {title && typeof title === 'string' ? (
+          <Text style={[
+            styles.title, 
+            { color: titleColor || theme.text }, 
+            titleStyle
+          ]}>
+            {title}
+          </Text>
+        ) : (
+          title
+        )}
+        {subtitle && typeof subtitle === 'string' ? (
+          <Text style={[
+            styles.subtitle, 
+            { color: subtitleColor || theme.helper }, 
+            subtitleStyle
+          ]}>
+            {subtitle}
+          </Text>
+        ) : (
+          subtitle
+        )}
+      </View>
+      
+      {right && <View style={styles.right}>{right}</View>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    padding: 16,
+    paddingBottom: 0,
+    // backgroundColor:"red",
+    // alignItems: 'center'
+  },
+  left: {
+    marginRight: 16,
+  },
+  headerTextContainer: {
+    flex: 1,
+  },
+  right: {
+    marginLeft: 16,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  subtitle: {
+    fontSize: 14,
+    marginTop: 4,
+  },
+});
+
+export default CardHeader;