@umituz/react-native-design-system 2.6.104 → 2.6.105

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.104",
+  "version": "2.6.105",
   "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/atoms/card/AtomicCard.tsx

@@ -0,0 +1,183 @@
+/**
+ * AtomicCard
+ * 
+ * Unified card component that handles base card states, media, info, and glowing effects.
+ * Replaces InfoCard, MediaCard, and GlowingCard molecules.
+ */
+
+import React, { useMemo } from 'react';
+import {
+  View,
+  Image,
+  Pressable,
+  type GestureResponderEvent,
+} from 'react-native';
+import { AtomicText } from '../AtomicText';
+import { AtomicIcon } from '../AtomicIcon';
+import { useAppDesignTokens } from '../../theme';
+import { getCardVariantStyles, cardStyles } from './styles/cardStyles';
+import { getCardPadding } from './configs/cardPaddingConfig';
+import type { AtomicCardProps } from './types';
+
+export const AtomicCard: React.FC<AtomicCardProps> = ({
+  children,
+  variant = 'elevated',
+  padding = 'md',
+  title,
+  subtitle,
+  description,
+  image,
+  imageAspectRatio = 1.6,
+  badge,
+  leftIcon,
+  rightIcon,
+  selected = false,
+  glowColor,
+  glowIntensity = 1,
+  onPress,
+  disabled = false,
+  style,
+  titleStyle,
+  subtitleStyle,
+  descriptionStyle,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+  
+  const variantStyles = useMemo(() => {
+    const base = getCardVariantStyles(variant, tokens);
+    if (variant === 'glowing' && glowColor) {
+      return {
+        ...base,
+        container: {
+          ...base.container,
+          borderColor: glowColor,
+          borderWidth: 2 * glowIntensity,
+        }
+      };
+    }
+    return base;
+  }, [variant, tokens, glowColor, glowIntensity]);
+
+  const paddingValue = getCardPadding(padding, tokens);
+
+  const containerStyle = [
+    cardStyles.container,
+    { borderRadius: tokens.borders.radius.lg },
+    variantStyles.container,
+    selected && { borderColor: tokens.colors.primary, borderWidth: 2 },
+    style,
+  ];
+
+  const handlePress = (event: GestureResponderEvent) => {
+    if (!disabled && onPress) {
+      onPress(event);
+    }
+  };
+
+  const renderContent = () => (
+    <>
+      {/* Badge */}
+      {badge && (
+        <View style={[cardStyles.badge, { backgroundColor: tokens.colors.primary }]}>
+          <AtomicText type="labelSmall" color="onPrimary">
+            {badge}
+          </AtomicText>
+        </View>
+      )}
+
+      {/* Media */}
+      {image && (
+        <Image
+          source={typeof image === 'string' ? { uri: image } : image}
+          style={[cardStyles.image, { aspectRatio: imageAspectRatio }]}
+          resizeMode="cover"
+        />
+      )}
+
+      {/* Selected Indicator */}
+      {selected && (
+        <View style={cardStyles.selectedOverlay}>
+          <AtomicIcon name="checkmark-circle" color="primary" size="md" />
+        </View>
+      )}
+
+      {/* Text Content */}
+      <View style={{ padding: paddingValue }}>
+        {(title || leftIcon || rightIcon) && (
+          <View style={cardStyles.header}>
+            {leftIcon && (
+              <AtomicIcon
+                name={leftIcon}
+                size="sm"
+                color="primary"
+                style={{ marginRight: 8 }}
+              />
+            )}
+            <View style={cardStyles.titleContainer}>
+              {title && (
+                <AtomicText
+                  type="titleMedium"
+                  style={[cardStyles.title, titleStyle]}
+                >
+                  {title}
+                </AtomicText>
+              )}
+              {subtitle && (
+                <AtomicText
+                  type="bodySmall"
+                  color="textSecondary"
+                  style={[cardStyles.subtitle, subtitleStyle]}
+                >
+                  {subtitle}
+                </AtomicText>
+              )}
+            </View>
+            {rightIcon && (
+              <AtomicIcon
+                name={rightIcon}
+                size="sm"
+                color="textSecondary"
+                style={{ marginLeft: 8 }}
+              />
+            )}
+          </View>
+        )}
+
+        {description && (
+          <AtomicText
+            type="bodyMedium"
+            color="textSecondary"
+            style={[cardStyles.description, descriptionStyle]}
+          >
+            {description}
+          </AtomicText>
+        )}
+
+        {children}
+      </View>
+    </>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={handlePress}
+        disabled={disabled}
+        style={({ pressed }) => [
+          containerStyle,
+          pressed && !disabled && { opacity: 0.9, transform: [{ scale: 0.98 }] },
+        ]}
+        testID={testID}
+      >
+        {renderContent()}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View style={containerStyle} testID={testID}>
+      {renderContent()}
+    </View>
+  );
+};

package/src/atoms/card/configs/cardPaddingConfig.ts

@@ -0,0 +1,19 @@
+/**
+ * Card Padding Configurations
+ */
+
+import type { DesignTokens } from '../../../theme';
+import type { CardPadding } from '../types';
+
+export const getCardPadding = (padding: CardPadding, tokens: DesignTokens): number => {
+  const paddingValues: Record<CardPadding, number> = {
+    none: 0,
+    xs: tokens.spacing.xs,
+    sm: tokens.spacing.sm,
+    md: tokens.spacing.md,
+    lg: tokens.spacing.lg,
+    xl: tokens.spacing.xl,
+  };
+
+  return paddingValues[padding] ?? tokens.spacing.md;
+};

package/src/atoms/card/index.ts

@@ -0,0 +1,2 @@
+export * from './AtomicCard';
+export * from './types';

package/src/atoms/card/styles/cardStyles.ts

@@ -0,0 +1,98 @@
+/**
+ * Card Component Styles
+ */
+
+import { StyleSheet, ViewStyle } from 'react-native';
+import type { DesignTokens } from '../../../theme';
+import type { CardVariant } from '../types';
+
+export const getCardVariantStyles = (variant: CardVariant, tokens: DesignTokens) => {
+  const styles: Record<CardVariant, { container: ViewStyle }> = {
+    elevated: {
+      container: {
+        backgroundColor: tokens.colors.surface,
+        borderWidth: 1,
+        borderColor: tokens.colors.outlineVariant || '#E0E0E0',
+      },
+    },
+    outlined: {
+      container: {
+        backgroundColor: 'transparent',
+        borderWidth: 1,
+        borderColor: tokens.colors.outline,
+      },
+    },
+    filled: {
+      container: {
+        backgroundColor: tokens.colors.surfaceVariant,
+        borderWidth: 0,
+      },
+    },
+    glass: {
+      container: {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+        borderWidth: 1,
+        borderColor: 'rgba(255, 255, 255, 0.2)',
+      },
+    },
+    glowing: {
+      container: {
+        backgroundColor: tokens.colors.surface,
+        borderWidth: 2,
+        borderColor: tokens.colors.primary,
+      },
+    },
+  };
+
+  return styles[variant] || styles.elevated;
+};
+
+export const cardStyles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    width: '100%',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  titleContainer: {
+    flex: 1,
+  },
+  title: {
+    fontWeight: '700',
+  },
+  subtitle: {
+    marginTop: 2,
+  },
+  description: {
+    marginTop: 8,
+  },
+  image: {
+    width: '100%',
+  },
+  overlay: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    padding: 12,
+  },
+  badge: {
+    position: 'absolute',
+    top: 12,
+    right: 12,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 12,
+    zIndex: 10,
+  },
+  selectedOverlay: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    zIndex: 11,
+  },
+});

package/src/atoms/card/types.ts

@@ -0,0 +1,77 @@
+/**
+ * AtomicCard Type Definitions
+ */
+
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, TextStyle, GestureResponderEvent, ImageSourcePropType } from 'react-native';
+
+export type CardVariant = 'elevated' | 'outlined' | 'filled' | 'glass' | 'glowing';
+export type CardPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface AtomicCardProps {
+  /** Main content of the card */
+  readonly children?: ReactNode;
+  
+  /** Visual variant of the card */
+  readonly variant?: CardVariant;
+  
+  /** Padding inside the card */
+  readonly padding?: CardPadding;
+  
+  /** Optional title text */
+  readonly title?: string;
+  
+  /** Optional subtitle text */
+  readonly subtitle?: string;
+  
+  /** Optional description/content text */
+  readonly description?: string;
+  
+  /** Image source to display */
+  readonly image?: string | ImageSourcePropType;
+  
+  /** Whether the text should overlay the image */
+  readonly imageOverlay?: boolean;
+  
+  /** Aspect ratio for the image */
+  readonly imageAspectRatio?: number;
+  
+  /** Optional badge text displayed on corner */
+  readonly badge?: string;
+  
+  /** Icon name to display on the left of title */
+  readonly leftIcon?: string;
+  
+  /** Icon name to display on the right of title */
+  readonly rightIcon?: string;
+  
+  /** Whether the card is in a selected state */
+  readonly selected?: boolean;
+  
+  /** Color for the glow effect if variant is 'glowing' */
+  readonly glowColor?: string;
+  
+  /** Intensity of the glow effect (0 to 1) */
+  readonly glowIntensity?: number;
+  
+  /** Press handler */
+  readonly onPress?: (event: GestureResponderEvent) => void;
+  
+  /** Whether the card is disabled */
+  readonly disabled?: boolean;
+  
+  /** Custom container style */
+  readonly style?: StyleProp<ViewStyle>;
+  
+  /** Custom title style */
+  readonly titleStyle?: StyleProp<TextStyle>;
+  
+  /** Custom subtitle style */
+  readonly subtitleStyle?: StyleProp<TextStyle>;
+  
+  /** Custom description style */
+  readonly descriptionStyle?: StyleProp<TextStyle>;
+  
+  /** Test ID */
+  readonly testID?: string;
+}

package/src/atoms/index.ts

@@ -18,9 +18,9 @@ export { AtomicText, type AtomicTextProps } from './AtomicText';
 export {
     AtomicCard,
     type AtomicCardProps,
-    type AtomicCardVariant,
-    type AtomicCardPadding,
-} from './AtomicCard';
+    type CardVariant as AtomicCardVariant,
+    type CardPadding as AtomicCardPadding,
+} from './card';
 
 // Input
 export {
@@ -42,7 +42,6 @@ export {
     type IconName,
 } from './AtomicIcon';
 
-export * from './AtomicIcon.types';
 
 // Avatar
 export { AtomicAvatar, type AtomicAvatarProps } from './AtomicAvatar';

package/src/exports/molecules.ts

@@ -23,11 +23,7 @@ export {
   type AvatarShape,
   type AvatarConfig,
   type AvatarType,
-  // Media Card
-  MediaCard,
-  type MediaCardProps,
-  type MediaCardSize,
-  type MediaCardOverlayPosition,
+
   // Bottom Sheet
   BottomSheet,
   BottomSheetModal,
@@ -165,9 +161,7 @@ export {
   type SplashColors,
   type UseSplashFlowOptions,
   type UseSplashFlowResult,
-  // GlowingCard
-  GlowingCard,
-  type GlowingCardProps,
+
   // Filter Group
   FilterGroup,
   type FilterGroupProps,
@@ -175,9 +169,7 @@ export {
   // Action Footer
   ActionFooter,
   type ActionFooterProps,
-  // Info Card
-  InfoCard,
-  type InfoCardProps,
+
   // Hero Section
   HeroSection,
   type HeroSectionProps,

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

@@ -1,5 +1,5 @@
 
-import React from 'react';
+
 import { ViewStyle, StyleProp } from 'react-native';
 
 export interface ActionFooterProps {

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

@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { ScrollView, StyleSheet, ViewStyle } from 'react-native';
+import { ScrollView, StyleSheet } from 'react-native';
 import { AtomicChip } from '../../atoms/chip';
 import { useAppDesignTokens } from '../../theme';
 import type { FilterGroupProps } from './types';

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

@@ -1,5 +1,5 @@
 
-import React from 'react';
+
 import { ViewStyle, StyleProp, ImageSourcePropType } from 'react-native';
 
 export interface HeroSectionProps {

package/src/molecules/index.ts

@@ -9,13 +9,7 @@ export * from './bottom-sheet';
 export { FormField, type FormFieldProps } from './FormField';
 export { ListItem, type ListItemProps } from './ListItem';
 
-// Media Card
-export { MediaCard } from './media-card';
-export type {
-  MediaCardProps,
-  MediaCardSize,
-  MediaCardOverlayPosition,
-} from './media-card';
+
 export { SearchBar, type SearchBarProps } from './SearchBar';
 export { IconContainer } from './IconContainer';
 export { BaseModal, type BaseModalProps } from './BaseModal';
@@ -62,11 +56,10 @@ export * from './countdown';
 // Splash
 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';
 export * from './info-grid';
 

package/src/molecules/info-grid/InfoGrid.tsx

@@ -1,10 +1,10 @@
 
 import React from 'react';
-import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { AtomicText } from '../../atoms/AtomicText';
 import { AtomicIcon } from '../../atoms/AtomicIcon';
 import { useAppDesignTokens } from '../../theme';
-import type { InfoGridProps, InfoGridItem } from './types';
+import type { InfoGridProps } from './types';
 
 export const InfoGrid: React.FC<InfoGridProps> = ({
   title,

package/src/theme/infrastructure/providers/DesignSystemProvider.tsx

@@ -9,7 +9,6 @@ import type { CustomThemeColors } from '../../core/CustomColors';
 import { SplashScreen } from '../../../molecules/splash';
 import type { SplashScreenProps } from '../../../molecules/splash/types';
 
-declare const __DEV__: boolean;
 
 interface DesignSystemProviderProps {
   /** App content */

package/src/atoms/AtomicCard.tsx

@@ -1,104 +0,0 @@
-/**
- * AtomicCard Component
- *
- * A simple, styled card container component
- */
-
-import React from 'react';
-import {
-  View,
-  Pressable,
-  StyleSheet,
-  type ViewStyle,
-  type StyleProp,
-  type GestureResponderEvent,
-} from 'react-native';
-import { useAppDesignTokens } from '../theme';
-
-export type AtomicCardVariant = 'elevated' | 'outlined' | 'filled';
-export type AtomicCardPadding = 'none' | 'sm' | 'md' | 'lg';
-
-export interface AtomicCardProps {
-  children: React.ReactNode;
-  variant?: AtomicCardVariant;
-  padding?: AtomicCardPadding;
-  style?: StyleProp<ViewStyle>;
-  testID?: string;
-  onPress?: (event: GestureResponderEvent) => void;
-  disabled?: boolean;
-}
-
-export const AtomicCard: React.FC<AtomicCardProps> = ({
-  children,
-  variant = 'elevated',
-  padding = 'md',
-  style,
-  testID,
-  onPress,
-  disabled,
-}) => {
-    const tokens = useAppDesignTokens();
-
-    const paddingValues: Record<AtomicCardPadding, number> = {
-        none: 0,
-        sm: tokens.spacing.sm,
-        md: tokens.spacing.md,
-        lg: tokens.spacing.lg,
-    };
-
-    const getVariantStyle = (): ViewStyle => {
-        switch (variant) {
-            case 'elevated':
-                return {
-                    backgroundColor: tokens.colors.surface,
-                    borderWidth: 1,
-                    borderColor: tokens.colors.outlineVariant || tokens.colors.outline,
-                };
-            case 'outlined':
-                return {
-                    backgroundColor: tokens.colors.surface,
-                    borderWidth: 1,
-                    borderColor: tokens.colors.outline,
-                };
-            case 'filled':
-                return {
-                    backgroundColor: tokens.colors.surfaceVariant,
-                };
-            default:
-                return {};
-        }
-    };
-
-  const cardStyle = [
-    styles.card,
-    { borderRadius: tokens.borders.radius.md },
-    { padding: paddingValues[padding] },
-    getVariantStyle(),
-    style,
-  ];
-
-  if (onPress) {
-    return (
-      <Pressable
-        style={cardStyle}
-        testID={testID}
-        onPress={onPress}
-        disabled={disabled}
-      >
-        {children}
-      </Pressable>
-    );
-  }
-
-  return (
-    <View style={cardStyle} testID={testID}>
-      {children}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  card: {
-    overflow: 'hidden',
-  },
-});