@umituz/react-native-design-system 2.6.101 → 2.6.103

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.101",
+  "version": "2.6.103",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/exports/molecules.ts

@@ -172,5 +172,14 @@ export {
   FilterGroup,
   type FilterGroupProps,
   type FilterGroupItem,
+  // Action Footer
+  ActionFooter,
+  type ActionFooterProps,
+  // Info Card
+  InfoCard,
+  type InfoCardProps,
+  // Hero Section
+  HeroSection,
+  type HeroSectionProps,
 } from '../molecules';
 

package/src/molecules/action-footer/ActionFooter.tsx

@@ -0,0 +1,91 @@
+
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { AtomicText } from '../../atoms/AtomicText';
+import { AtomicIcon } from '../../atoms/AtomicIcon';
+import { useAppDesignTokens } from '../../theme';
+import type { ActionFooterProps } from './types';
+
+export const ActionFooter: React.FC<ActionFooterProps> = ({
+  onBack,
+  onAction,
+  actionLabel,
+  actionIcon = 'arrow-forward',
+  backIcon = 'chevron-back',
+  style,
+  loading = false,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: tokens.spacing.md,
+      gap: tokens.spacing.md,
+    },
+    backButton: {
+      width: 56,
+      height: 56,
+      borderRadius: tokens.borders.radius.lg,
+      backgroundColor: tokens.colors.surface,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderWidth: 1,
+      borderColor: tokens.colors.outlineVariant,
+    },
+    actionButton: {
+      flex: 1,
+      height: 56,
+      borderRadius: tokens.borders.radius.lg,
+      overflow: 'hidden',
+    },
+    actionContent: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: tokens.colors.primary,
+      gap: tokens.spacing.sm,
+    },
+    actionText: {
+      color: tokens.colors.onPrimary,
+      fontWeight: '800',
+      fontSize: 18,
+    },
+  });
+
+  return (
+    <View style={[styles.container, style]}>
+      <TouchableOpacity
+        style={styles.backButton}
+        onPress={onBack}
+        activeOpacity={0.7}
+        testID="action-footer-back"
+      >
+        <AtomicIcon
+          name={backIcon}
+          size="md"
+          color="textPrimary"
+        />
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={styles.actionButton}
+        onPress={onAction}
+        activeOpacity={0.9}
+        disabled={loading}
+        testID="action-footer-action"
+      >
+        <View style={styles.actionContent}>
+          <AtomicText style={styles.actionText}>{actionLabel}</AtomicText>
+          <AtomicIcon
+            name={actionIcon}
+            size="sm"
+            color="onPrimary"
+          />
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};

package/src/molecules/action-footer/index.ts

@@ -0,0 +1,3 @@
+
+export * from './ActionFooter';
+export * from './types';

package/src/molecules/action-footer/types.ts

@@ -0,0 +1,13 @@
+
+import React from 'react';
+import { ViewStyle, StyleProp } from 'react-native';
+
+export interface ActionFooterProps {
+  onBack: () => void;
+  onAction: () => void;
+  actionLabel: string;
+  actionIcon?: string;
+  backIcon?: string;
+  style?: StyleProp<ViewStyle>;
+  loading?: boolean;
+}

package/src/molecules/filter-group/FilterGroup.tsx

@@ -9,6 +9,7 @@ export function FilterGroup<T = string>({
   items,
   selectedValue,
   onSelect,
+  multiSelect = false,
   style,
   contentContainerStyle,
   itemStyle,
@@ -37,7 +38,9 @@ export function FilterGroup<T = string>({
       contentContainerStyle={[styles.content, contentContainerStyle]}
     >
       {items.map((item) => {
-        const isSelected = item.value === selectedValue;
+        const isSelected = multiSelect
+          ? Array.isArray(selectedValue) && selectedValue.includes(item.value)
+          : item.value === selectedValue;
         return (
           <AtomicChip
             key={`${item.value}`}

package/src/molecules/filter-group/types.ts

@@ -7,8 +7,9 @@ export interface FilterGroupItem<T = string> {
 
 export interface FilterGroupProps<T = string> {
   items: FilterGroupItem<T>[];
-  selectedValue: T;
+  selectedValue: T | T[];
   onSelect: (value: T) => void;
+  multiSelect?: boolean;
   style?: any;
   contentContainerStyle?: any;
   itemStyle?: any;

package/src/molecules/hero-section/HeroSection.tsx

@@ -0,0 +1,91 @@
+
+import React from 'react';
+import { View, StyleSheet, Text, Image } from 'react-native';
+import { useAppDesignTokens } from '../../theme';
+import type { HeroSectionProps } from './types';
+
+export const HeroSection: React.FC<HeroSectionProps> = ({
+  icon,
+  imageUrl,
+  imageSource,
+  height,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+  // Default height 50% of screen if not provided? No, components shouldn't guess screen height directly if possible, or use prop.
+  // We'll leave height control to the parent or style, but provide a sensible default if passed as prop.
+
+  const styles = StyleSheet.create({
+    container: {
+      width: '100%',
+      height: height || 400,
+      position: 'relative',
+      backgroundColor: tokens.colors.surface,
+      justifyContent: 'center',
+      alignItems: 'center',
+      overflow: 'hidden',
+    },
+    background: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: tokens.colors.surfaceVariant,
+    },
+    image: {
+      ...StyleSheet.absoluteFillObject,
+      width: '100%',
+      height: '100%',
+    },
+    iconWrapper: {
+      width: 120,
+      height: 120,
+      borderRadius: 60,
+      backgroundColor: tokens.colors.surfaceVariant,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderWidth: 2,
+      borderColor: tokens.colors.outlineVariant,
+      zIndex: 10,
+    },
+    emoji: {
+      fontSize: 64,
+      textAlign: 'center',
+      includeFontPadding: false,
+    },
+    fadeOverlay: {
+      position: 'absolute',
+      bottom: -1,
+      left: 0,
+      right: 0,
+      height: 100,
+      // We can't use LinearGradient here per rules.
+      // Use a solid color with opacity or a series of views if really needed, but user said NO GRADIENT.
+      // The original code used backgroundColor: "rgba(15, 5, 10, 0.7)".
+      // We'll use a semi-transparent overlay at the bottom.
+      backgroundColor: 'rgba(0,0,0,0.5)', // Generic dark overlay
+    },
+  });
+
+  const source = imageUrl ? { uri: imageUrl } : imageSource;
+
+  return (
+    <View style={[styles.container, style]}>
+      {source ? (
+        <Image
+          source={source}
+          style={styles.image}
+          resizeMode="cover"
+        />
+      ) : (
+        <View style={styles.background} />
+      )}
+
+      {/* Show icon only if no image */}
+      {!source && icon && (
+        <View style={styles.iconWrapper}>
+          <Text style={styles.emoji}>{icon}</Text>
+        </View>
+      )}
+
+      <View style={styles.fadeOverlay} />
+    </View>
+  );
+};

package/src/molecules/hero-section/index.ts

@@ -0,0 +1,3 @@
+
+export * from './HeroSection';
+export * from './types';

package/src/molecules/hero-section/types.ts

@@ -0,0 +1,11 @@
+
+import React from 'react';
+import { ViewStyle, StyleProp, ImageSourcePropType } from 'react-native';
+
+export interface HeroSectionProps {
+  icon?: string;
+  imageUrl?: string;
+  imageSource?: ImageSourcePropType;
+  height?: number;
+  style?: StyleProp<ViewStyle>;
+}

package/src/molecules/index.ts

@@ -65,4 +65,7 @@ export * from './splash';
 // GlowingCard
 export { GlowingCard, type GlowingCardProps } from './GlowingCard';
 export * from './filter-group';
+export * from './action-footer';
+export * from './info-card';
+export * from './hero-section';
 

package/src/molecules/info-card/InfoCard.tsx

@@ -0,0 +1,44 @@
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { AtomicText } from '../../atoms/AtomicText';
+import { useAppDesignTokens } from '../../theme';
+import type { InfoCardProps } from './types';
+
+export const InfoCard: React.FC<InfoCardProps> = ({
+  title,
+  content,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: tokens.colors.surface,
+      borderRadius: tokens.borders.radius.xl,
+      padding: tokens.spacing.lg,
+      borderWidth: 1,
+      borderColor: tokens.colors.outlineVariant,
+    },
+    title: {
+      ...tokens.typography.labelLarge,
+      color: tokens.colors.primary,
+      fontWeight: '800', // Using string as expected by RN
+      textTransform: 'uppercase',
+      letterSpacing: 1,
+      marginBottom: tokens.spacing.xs,
+    },
+    content: {
+      ...tokens.typography.bodyMedium,
+      color: tokens.colors.textPrimary,
+      lineHeight: 22,
+    },
+  });
+
+  return (
+    <View style={[styles.container, style]}>
+      <AtomicText style={styles.title}>{title}</AtomicText>
+      <AtomicText style={styles.content}>{content}</AtomicText>
+    </View>
+  );
+};

package/src/molecules/info-card/index.ts

@@ -0,0 +1,3 @@
+
+export * from './InfoCard';
+export * from './types';

package/src/molecules/info-card/types.ts

@@ -0,0 +1,9 @@
+
+import React from 'react';
+import { ViewStyle, StyleProp } from 'react-native';
+
+export interface InfoCardProps {
+  title: string;
+  content: string;
+  style?: StyleProp<ViewStyle>;
+}