@umituz/react-native-design-system 1.1.3 → 1.3.0

package/src/presentation/atoms/AtomicButton.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import { Button as PaperButton } from 'react-native-paper';
-import { StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { StyleSheet, StyleProp, ViewStyle, TextStyle, TouchableOpacity, ActivityIndicator, View } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
-import { Pressable } from 'react-native';
+import { AtomicText } from './AtomicText';
+import { Icon } from '../../domains/icons/presentation/components/Icon';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import type { IconName } from '../../domains/icons/domain/interfaces/IIconAdapter';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'text' | 'danger';
 export type ButtonSize = 'sm' | 'md' | 'lg';
@@ -15,14 +17,14 @@ export interface AtomicButtonProps {
   size?: ButtonSize;
   disabled?: boolean;
   loading?: boolean;
-  icon?: string;
+  icon?: IconName;
   fullWidth?: boolean;
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
   testID?: string;
 }
 
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
 
 export const AtomicButton: React.FC<AtomicButtonProps> = ({
   title,
@@ -35,8 +37,11 @@ export const AtomicButton: React.FC<AtomicButtonProps> = ({
   icon,
   fullWidth = false,
   style,
+  textStyle,
   testID,
 }) => {
+  const tokens = useAppDesignTokens();
+
   // Animation
   const scale = useSharedValue(1);
 
@@ -63,62 +68,205 @@ export const AtomicButton: React.FC<AtomicButtonProps> = ({
     }
   };
 
-  // Map variants to Paper modes
-  const getPaperMode = (): 'contained' | 'outlined' | 'text' | 'contained-tonal' | 'elevated' => {
+  // Size configurations
+  const sizeConfig = {
+    sm: {
+      paddingVertical: tokens.spacing.xs,
+      paddingHorizontal: tokens.spacing.sm,
+      fontSize: tokens.typography.bodySmall.fontSize,
+      iconSize: 16,
+      minHeight: 32,
+    },
+    md: {
+      paddingVertical: tokens.spacing.sm,
+      paddingHorizontal: tokens.spacing.md,
+      fontSize: tokens.typography.bodyMedium.fontSize,
+      iconSize: 20,
+      minHeight: 44,
+    },
+    lg: {
+      paddingVertical: tokens.spacing.md,
+      paddingHorizontal: tokens.spacing.lg,
+      fontSize: tokens.typography.bodyLarge.fontSize,
+      iconSize: 24,
+      minHeight: 52,
+    },
+  };
+
+  const config = sizeConfig[size];
+
+  // Variant styles
+  const getVariantStyles = () => {
+    const baseStyle: ViewStyle = {
+      backgroundColor: tokens.colors.primary,
+      borderWidth: 0,
+    };
+
+    const baseTextStyle: TextStyle = {
+      color: tokens.colors.textInverse,
+    };
+
     switch (variant) {
       case 'primary':
-        return 'contained';
+        return {
+          container: {
+            ...baseStyle,
+            backgroundColor: tokens.colors.primary,
+          },
+          text: {
+            ...baseTextStyle,
+            color: tokens.colors.textInverse,
+          },
+        };
+
       case 'secondary':
-        return 'contained-tonal';
+        return {
+          container: {
+            ...baseStyle,
+            backgroundColor: tokens.colors.surfaceSecondary,
+          },
+          text: {
+            ...baseTextStyle,
+            color: tokens.colors.textPrimary,
+          },
+        };
+
       case 'outline':
-        return 'outlined';
+        return {
+          container: {
+            ...baseStyle,
+            backgroundColor: 'transparent',
+            borderWidth: 1,
+            borderColor: tokens.colors.border,
+          },
+          text: {
+            ...baseTextStyle,
+            color: tokens.colors.textPrimary,
+          },
+        };
+
       case 'text':
-        return 'text';
+        return {
+          container: {
+            ...baseStyle,
+            backgroundColor: 'transparent',
+          },
+          text: {
+            ...baseTextStyle,
+            color: tokens.colors.primary,
+          },
+        };
+
       case 'danger':
-        return 'contained';
+        return {
+          container: {
+            ...baseStyle,
+            backgroundColor: tokens.colors.error,
+          },
+          text: {
+            ...baseTextStyle,
+            color: tokens.colors.textInverse,
+          },
+        };
+
       default:
-        return 'contained';
+        return {
+          container: baseStyle,
+          text: baseTextStyle,
+        };
     }
   };
 
-  // Map size to padding
-  const getContentStyle = () => {
-    const paddingMap = {
-      sm: { paddingVertical: 4, paddingHorizontal: 12 },
-      md: { paddingVertical: 8, paddingHorizontal: 16 },
-      lg: { paddingVertical: 12, paddingHorizontal: 20 },
-    };
-    return paddingMap[size];
-  };
+  const variantStyles = getVariantStyles();
 
-  const buttonStyle: StyleProp<ViewStyle> = StyleSheet.flatten([
-    fullWidth ? { width: '100%' } : undefined,
+  const containerStyle: StyleProp<ViewStyle> = [
+    styles.button,
+    {
+      paddingVertical: config.paddingVertical,
+      paddingHorizontal: config.paddingHorizontal,
+      minHeight: config.minHeight,
+      borderRadius: tokens.borders.radius.md,
+    },
+    variantStyles.container,
+    fullWidth ? styles.fullWidth : undefined,
+    disabled ? styles.disabled : undefined,
     style,
-  ]);
+  ];
+
+  const buttonTextStyle: StyleProp<TextStyle> = [
+    {
+      fontSize: config.fontSize,
+      fontWeight: '600',
+    },
+    variantStyles.text,
+    disabled ? styles.disabledText : undefined,
+    textStyle,
+  ];
 
   const buttonText = title || children;
+  const showIcon = icon && !loading;
+  const iconColor = variantStyles.text.color;
 
   return (
-    <AnimatedPressable
-      style={animatedStyle}
+    <AnimatedTouchable
+      style={[animatedStyle, containerStyle]}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
       onPress={handlePress}
+      activeOpacity={0.8}
+      disabled={disabled || loading}
+      testID={testID}
     >
-      <PaperButton
-        mode={getPaperMode()}
-        disabled={disabled}
-        loading={loading}
-        icon={icon}
-        style={buttonStyle}
-        contentStyle={getContentStyle()}
-        testID={testID}
-        buttonColor={variant === 'danger' ? '#DC2626' : undefined}
-      >
-        {buttonText}
-      </PaperButton>
-    </AnimatedPressable>
+      <View style={styles.content}>
+        {loading ? (
+          <ActivityIndicator
+            size="small"
+            color={variantStyles.text.color}
+            style={styles.loader}
+          />
+        ) : showIcon ? (
+          <Icon
+            name={icon}
+            customSize={config.iconSize}
+            customColor={iconColor}
+            style={styles.icon}
+          />
+        ) : null}
+
+        <AtomicText style={buttonTextStyle}>
+          {buttonText}
+        </AtomicText>
+      </View>
+    </AnimatedTouchable>
   );
 };
 
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  fullWidth: {
+    width: '100%',
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  disabledText: {
+    opacity: 0.7,
+  },
+  icon: {
+    marginRight: 8,
+  },
+  loader: {
+    marginRight: 8,
+  },
+});
+
 export type { AtomicButtonProps as ButtonProps };

package/src/presentation/atoms/AtomicCard.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Card as PaperCard } from 'react-native-paper';
-import { StyleProp, ViewStyle } from 'react-native';
+import { View, StyleProp, ViewStyle } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import { Pressable } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
 
 export type AtomicCardVariant = 'flat' | 'elevated' | 'outlined';
 export type AtomicCardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
@@ -28,6 +28,8 @@ export const AtomicCard: React.FC<AtomicCardProps> = ({
   children,
   testID,
 }) => {
+  const tokens = useAppDesignTokens();
+
   // Animation for tap feedback
   const scale = useSharedValue(1);
 
@@ -54,43 +56,64 @@ export const AtomicCard: React.FC<AtomicCardProps> = ({
     }
   };
 
-  // Map variants to Paper modes
-  const getPaperMode = (): 'elevated' | 'outlined' | 'contained' => {
+  // Map padding to token values
+  const getPaddingValue = (): number => {
+    const paddingMap = {
+      none: 0,
+      sm: tokens.spacing.sm,
+      md: tokens.spacing.md,
+      lg: tokens.spacing.lg,
+      xl: tokens.spacing.xl,
+    };
+    return paddingMap[padding];
+  };
+
+  // Get variant styles
+  const getVariantStyle = (): ViewStyle => {
+    const baseStyle: ViewStyle = {
+      backgroundColor: tokens.colors.surface,
+      borderRadius: tokens.borders.radius.md,
+    };
+
     switch (variant) {
       case 'elevated':
-        return 'elevated';
+        return {
+          ...baseStyle,
+          borderWidth: 1,
+          borderColor: tokens.colors.border,
+        };
+
       case 'outlined':
-        return 'outlined';
+        return {
+          ...baseStyle,
+          borderWidth: 1,
+          borderColor: tokens.colors.border,
+        };
+
       case 'flat':
-        return 'contained';
+        return {
+          ...baseStyle,
+          borderWidth: 0,
+        };
+
       default:
-        return 'elevated';
+        return baseStyle;
     }
   };
 
-  // Map padding to actual values
-  const getContentStyle = () => {
-    const paddingMap = {
-      none: 0,
-      sm: 8,
-      md: 16,
-      lg: 24,
-      xl: 32,
-    };
-    const paddingValue = paddingMap[padding];
-    return { padding: paddingValue };
-  };
+  const cardStyle: StyleProp<ViewStyle> = [
+    getVariantStyle(),
+    {
+      padding: getPaddingValue(),
+      opacity: disabled ? 0.5 : 1,
+    },
+    style,
+  ];
 
   const cardContent = (
-    <PaperCard
-      mode={getPaperMode()}
-      style={style}
-      testID={testID}
-    >
-      <PaperCard.Content style={getContentStyle()}>
-        {children}
-      </PaperCard.Content>
-    </PaperCard>
+    <View style={cardStyle} testID={testID}>
+      {children}
+    </View>
   );
 
   // If onPress provided, wrap with animated pressable

package/src/presentation/atoms/AtomicIcon.tsx

@@ -1,132 +1,41 @@
 /**
- * AtomicIcon - Design System Icon Component
+ * AtomicIcon - Atomic Design System Icon Component
  *
- * Universal icon component using Lucide icons.
- * Provides semantic color mappings and size presets.
+ * Wrapper for the universal Icon component from @domains/icons
+ * Provides backward compatibility with AtomicIcon naming convention
+ * while leveraging the full power of the icons domain architecture.
  */
 
 import React from 'react';
-import type { ViewStyle } from 'react-native';
-import * as LucideIcons from 'lucide-react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
-
-/**
- * Icon size presets
- */
-export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-
-/**
- * Semantic color tokens
- */
-export type IconColor =
-  | 'primary'
-  | 'secondary'
-  | 'error'
-  | 'warning'
-  | 'success'
-  | 'info'
-  | 'onPrimary'
-  | 'onSurface'
-  | 'textPrimary'
-  | 'textSecondary'
-  | 'textDisabled';
-
-/**
- * Icon component props
- */
-export interface IconProps {
-  /** Icon name from Lucide icon set (PascalCase) */
-  name: string;
-  /** Semantic color token */
-  color?: IconColor;
-  /** Size preset */
-  size?: IconSize;
-  /** Custom size override (pixels) */
-  customSize?: number;
-  /** Custom color override (hex) */
-  customColor?: string;
-  /** Optional style */
-  style?: ViewStyle;
-  /** Optional test ID */
-  testID?: string;
-  /** Legacy prop support: icon (alias for name) */
-  icon?: string;
-}
-
-/**
- * Icon name type (all Lucide icon names as string)
- */
-export type IconName = string;
-
-/**
- * Size mapping (pixels)
- */
-const sizeMap: Record<IconSize, number> = {
-  xs: 16,
-  sm: 20,
-  md: 24,
-  lg: 28,
-  xl: 32,
-  xxl: 48,
-};
+import { Icon } from '../../domains/icons/presentation/components/Icon';
+import type { IconProps, IconSize, IconColor } from '../../domains/icons/domain/interfaces/IIconAdapter';
+import type { LucideIconName } from '../../domains/icons/infrastructure/adapters/LucideAdapter';
 
 /**
  * AtomicIcon Component
  *
- * Universal icon component with theme integration
+ * @example
+ * ```tsx
+ * import { AtomicIcon } from '@umituz/react-native-design-system';
+ *
+ * // Basic usage
+ * <AtomicIcon name="Settings" size="md" color="primary" />
+ *
+ * // Custom size and color
+ * <AtomicIcon name="Heart" customSize={32} customColor="#FF0000" />
+ *
+ * // With background
+ * <AtomicIcon name="Info" size="lg" withBackground backgroundColor="#667eea" />
+ * ```
  */
-export const AtomicIcon: React.FC<IconProps> = ({
-  name,
-  icon, // Legacy support
-  color = 'textPrimary',
-  size = 'md',
-  customSize,
-  customColor,
-  style,
-  testID,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  // Support legacy 'icon' prop (fallback to 'name')
-  const iconName = name || icon || '';
-
-  // Get icon component from Lucide
-  const IconComponent = (LucideIcons as any)[iconName];
-
-  if (!IconComponent) {
-    console.warn(`Icon "${iconName}" not found in Lucide icon set`);
-    return null;
-  }
-
-  // Resolve color from semantic token
-  const resolveColor = (): string => {
-    if (customColor) return customColor;
-
-    const colorMap: Record<IconColor, string> = {
-      primary: tokens.colors.primary,
-      secondary: tokens.colors.secondary,
-      error: tokens.colors.error,
-      warning: tokens.colors.warning,
-      success: tokens.colors.success,
-      info: tokens.colors.info,
-      onPrimary: tokens.colors.onPrimary,
-      onSurface: tokens.colors.onSurface,
-      textPrimary: tokens.colors.textPrimary,
-      textSecondary: tokens.colors.textSecondary,
-      textDisabled: tokens.colors.textDisabled,
-    };
-
-    return colorMap[color];
-  };
-
-  // Resolve size
-  const iconSize = customSize || sizeMap[size];
-
-  return <IconComponent color={resolveColor()} size={iconSize} style={style} testID={testID} />;
+export const AtomicIcon: React.FC<IconProps> = (props) => {
+  return <Icon {...props} />;
 };
 
-// Re-export types for backward compatibility
+/**
+ * Re-export types with Atomic naming convention
+ */
 export type AtomicIconProps = IconProps;
 export type AtomicIconSize = IconSize;
 export type AtomicIconColor = IconColor;
-export type AtomicIconName = IconName;
+export type AtomicIconName = LucideIconName;