@umituz/react-native-design-system 1.0.0

package/src/presentation/atoms/AtomicAvatar.tsx

@@ -0,0 +1,157 @@
+/**
+ * AtomicAvatar - Universal Avatar Component
+ *
+ * Displays user profile images with fallback to initials
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: User profile image display
+ *
+ * Usage:
+ * - User profile pictures
+ * - Contact avatars
+ * - Group member avatars
+ * - Default user placeholders
+ */
+
+import React from 'react';
+import { View, StyleSheet, ViewStyle, ImageStyle } from 'react-native';
+import { AtomicImage } from './AtomicImage';
+import { AtomicText } from './AtomicText';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+export interface AtomicAvatarProps {
+  /** Image source (URI or require) */
+  source?: { uri: string } | number;
+  /** User's name for fallback initials */
+  name?: string;
+  /** Size of the avatar */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  /** Custom size in pixels */
+  customSize?: number;
+  /** Background color for fallback */
+  backgroundColor?: string;
+  /** Text color for initials */
+  textColor?: string;
+  /** Border radius (default: circular) */
+  borderRadius?: number;
+  /** Border width */
+  borderWidth?: number;
+  /** Border color */
+  borderColor?: string;
+  /** Style overrides */
+  style?: ViewStyle | ViewStyle[];
+  /** Image style overrides */
+  imageStyle?: ImageStyle | ImageStyle[];
+  /** Test ID for testing */
+  testID?: string;
+}
+
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+
+export const AtomicAvatar: React.FC<AtomicAvatarProps> = ({
+  source,
+  name,
+  size = 'md',
+  customSize,
+  backgroundColor,
+  textColor,
+  borderRadius,
+  borderWidth = 0,
+  borderColor,
+  style,
+  imageStyle,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const avatarSize = customSize || tokens.avatarSizes[size];
+  const avatarRadius = borderRadius ?? avatarSize / 2;
+
+  // Generate initials from name
+  const getInitials = (name: string): string => {
+    return name
+      .split(' ')
+      .map(word => word.charAt(0))
+      .join('')
+      .toUpperCase()
+      .slice(0, 2);
+  };
+
+  // Default colors
+  const defaultBackgroundColor = backgroundColor || tokens.colors.primary;
+  const defaultTextColor = textColor || tokens.colors.onPrimary;
+  const defaultBorderColor = borderColor || tokens.colors.border;
+
+  const avatarStyle: ViewStyle = {
+    width: avatarSize,
+    height: avatarSize,
+    borderRadius: avatarRadius,
+    backgroundColor: defaultBackgroundColor,
+    borderWidth,
+    borderColor: defaultBorderColor,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  };
+
+  const imageStyleFinal: ImageStyle = {
+    width: avatarSize,
+    height: avatarSize,
+    borderRadius: avatarRadius,
+  };
+
+  // Font size based on avatar size
+  const getFontSize = (size: number): number => {
+    if (size <= 32) return 12;
+    if (size <= 48) return 16;
+    if (size <= 64) return 20;
+    return 24;
+  };
+
+  return (
+    <View style={[avatarStyle, style]} testID={testID}>
+      {source ? (
+        <AtomicImage
+          source={source}
+          style={StyleSheet.flatten([imageStyleFinal, imageStyle])}
+          resizeMode="cover"
+        />
+      ) : name ? (
+        <AtomicText
+          type="labelLarge"
+          color={defaultTextColor}
+          style={{
+            fontSize: getFontSize(avatarSize),
+            fontWeight: tokens.typography.semibold,
+          }}
+        >
+          {getInitials(name)}
+        </AtomicText>
+      ) : (
+        <AtomicText
+          type="labelLarge"
+          color={defaultTextColor}
+          style={{
+            fontSize: getFontSize(avatarSize),
+            fontWeight: tokens.typography.semibold,
+          }}
+        >
+          ?
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+
+export default AtomicAvatar;

package/src/presentation/atoms/AtomicAvatarGroup.tsx

@@ -0,0 +1,169 @@
+/**
+ * AtomicAvatarGroup - Universal Avatar Group Component
+ *
+ * Displays multiple avatars in a group with overlap and overflow handling
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Multiple avatar display with group behavior
+ *
+ * Usage:
+ * - Team member avatars
+ * - Group chat participants
+ * - Project collaborators
+ * - Event attendees
+ * - Social connections
+ */
+
+import React from 'react';
+import { View, StyleSheet, ViewStyle } from 'react-native';
+import { AtomicAvatar, AtomicAvatarProps } from './AtomicAvatar';
+import { AtomicText } from './AtomicText';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+export interface AvatarData {
+  id: string;
+  source?: { uri: string } | number;
+  name?: string;
+  backgroundColor?: string;
+  textColor?: string;
+}
+
+export interface AtomicAvatarGroupProps {
+  /** Array of avatar data */
+  avatars: AvatarData[];
+  /** Maximum number of avatars to show */
+  maxVisible?: number;
+  /** Avatar size */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  /** Custom avatar size */
+  customSize?: number;
+  /** Spacing between avatars */
+  spacing?: number;
+  /** Whether to show overflow count */
+  showOverflow?: boolean;
+  /** Overflow count background color */
+  overflowBackgroundColor?: string;
+  /** Overflow count text color */
+  overflowTextColor?: string;
+  /** Avatar border width */
+  borderWidth?: number;
+  /** Avatar border color */
+  borderColor?: string;
+  /** Style overrides */
+  style?: ViewStyle;
+  /** Test ID for testing */
+  testID?: string;
+}
+
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+
+export const AtomicAvatarGroup: React.FC<AtomicAvatarGroupProps> = ({
+  avatars,
+  maxVisible = 3,
+  size = 'md',
+  customSize,
+  spacing = -8,
+  showOverflow = true,
+  overflowBackgroundColor,
+  overflowTextColor,
+  borderWidth = 2,
+  borderColor,
+  style,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  // Calculate visible avatars and overflow count
+  const visibleAvatars = avatars.slice(0, maxVisible);
+  const overflowCount = avatars.length - maxVisible;
+
+  // Size mapping for overflow text
+  const sizeMap = {
+    xs: 10,
+    sm: 12,
+    md: 14,
+    lg: 16,
+    xl: 18,
+    xxl: 20,
+  };
+
+  const textSize = sizeMap[size];
+
+  // Default colors for overflow
+  const defaultOverflowBackground = overflowBackgroundColor || tokens.colors.surfaceVariant;
+  const defaultOverflowText = overflowTextColor || tokens.colors.textPrimary;
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+  };
+
+  const avatarStyle: ViewStyle = {
+    marginLeft: spacing,
+    borderWidth,
+    borderColor: borderColor || tokens.colors.surface,
+  };
+
+  return (
+    <View style={[containerStyle, style]} testID={testID}>
+      {visibleAvatars.map((avatar, index) => (
+        <AtomicAvatar
+          key={avatar.id}
+          source={avatar.source}
+          name={avatar.name}
+          size={size}
+          customSize={customSize}
+          backgroundColor={avatar.backgroundColor}
+          textColor={avatar.textColor}
+          borderWidth={borderWidth}
+          borderColor={borderColor}
+          style={[
+            avatarStyle,
+            ...(index === 0 ? [{ marginLeft: 0 }] : []), // First avatar has no left margin
+          ]}
+        />
+      ))}
+      {showOverflow && overflowCount > 0 && (
+        <View
+          style={[
+            {
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: customSize || 40,
+              height: customSize || 40,
+              borderRadius: (customSize || 40) / 2,
+              backgroundColor: defaultOverflowBackground,
+              borderWidth,
+              borderColor: borderColor || tokens.colors.surface,
+              marginLeft: spacing,
+            },
+          ]}
+        >
+          <AtomicText
+            type="labelMedium"
+            color={defaultOverflowText}
+            style={{
+              fontWeight: tokens.typography.semibold,
+              fontSize: textSize,
+            }}
+          >
+            +{overflowCount}
+          </AtomicText>
+        </View>
+      )}
+    </View>
+  );
+};
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+
+export default AtomicAvatarGroup;

package/src/presentation/atoms/AtomicBadge.tsx

@@ -0,0 +1,232 @@
+/**
+ * AtomicBadge - Universal Badge Component
+ *
+ * Provides consistent badge/notification count display
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Display counts, notifications, status indicators
+ *
+ * Usage:
+ * - Notification counts
+ * - Cart item counts
+ * - Status indicators
+ * - Achievement badges
+ */
+
+import React from 'react';
+import { View, StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { AtomicText } from './AtomicText';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import type { DesignTokens } from '../tokens/AppDesignTokens';
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+export interface AtomicBadgeProps {
+  /** Badge content (number, text, or custom element) */
+  children: React.ReactNode;
+  /** Size variant */
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  /** Color variant */
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+  /** Shape variant */
+  shape?: 'circle' | 'rounded' | 'square';
+  /** Maximum value to display (e.g., 99+) */
+  max?: number;
+  /** Show badge even when count is 0 */
+  showZero?: boolean;
+  /** Container style override */
+  style?: StyleProp<ViewStyle>;
+  /** Text style override */
+  textStyle?: StyleProp<TextStyle>;
+  /** Minimum width */
+  minWidth?: number;
+  /** Maximum width */
+  maxWidth?: number;
+}
+
+// =============================================================================
+// SIZE CONFIGURATION
+// =============================================================================
+
+const getSizeConfig = (tokens: DesignTokens) => ({
+  xs: {
+    minHeight: tokens.spacing.sm,
+    paddingHorizontal: tokens.spacing.xs,
+    fontSize: tokens.typography.labelSmall.fontSize,
+    borderRadius: tokens.borders.radius.sm,
+  },
+  sm: {
+    minHeight: tokens.spacing.md,
+    paddingHorizontal: tokens.spacing.sm,
+    fontSize: tokens.typography.bodySmall.fontSize,
+    borderRadius: tokens.borders.radius.md,
+  },
+  md: {
+    minHeight: tokens.spacing.lg,
+    paddingHorizontal: tokens.spacing.sm,
+    fontSize: tokens.typography.bodyMedium.fontSize,
+    borderRadius: tokens.borders.radius.md,
+  },
+  lg: {
+    minHeight: tokens.spacing.xl,
+    paddingHorizontal: tokens.spacing.md,
+    fontSize: tokens.typography.bodyLarge.fontSize,
+    borderRadius: tokens.borders.radius.lg,
+  },
+});
+
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+
+export const AtomicBadge: React.FC<AtomicBadgeProps> = ({
+  children,
+  size = 'md',
+  variant = 'primary',
+  shape = 'circle',
+  max,
+  showZero = false,
+  style,
+  textStyle,
+  minWidth,
+  maxWidth,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
+
+  const sizeConfig = getSizeConfig(tokens)[size];
+  const colors = getVariantColors(tokens, variant);
+  const borderRadius = getBorderRadius(shape, sizeConfig.borderRadius, tokens);
+
+  // Handle max value display
+  const displayValue = React.useMemo(() => {
+    if (typeof children === 'number') {
+      if (max && children > max) {
+        return `${max}+`;
+      }
+      return children.toString();
+    }
+    return children;
+  }, [children, max]);
+
+  // Don't render if count is 0 and showZero is false
+  if (typeof children === 'number' && children === 0 && !showZero) {
+    return null;
+  }
+
+  const containerStyle = [
+    styles.container,
+    {
+      minHeight: sizeConfig.minHeight,
+      paddingHorizontal: sizeConfig.paddingHorizontal,
+      borderRadius,
+      backgroundColor: colors.background,
+      minWidth: minWidth || sizeConfig.minHeight,
+      maxWidth,
+    },
+    style,
+  ];
+
+  const textStyleFinal = StyleSheet.flatten([
+    styles.text,
+    {
+      fontSize: sizeConfig.fontSize,
+    },
+    textStyle,
+  ]);
+
+  return (
+    <View style={containerStyle}>
+      <AtomicText
+        type="bodySmall"
+        color={colors.text}
+        style={textStyleFinal}
+        numberOfLines={1}
+      >
+        {displayValue}
+      </AtomicText>
+    </View>
+  );
+};
+
+// =============================================================================
+// HELPER FUNCTIONS
+// =============================================================================
+
+const getVariantColors = (tokens: ReturnType<typeof useAppDesignTokens>, variant: AtomicBadgeProps['variant']) => {
+  switch (variant) {
+    case 'primary':
+      return {
+        background: tokens.colors.primary,
+        text: tokens.colors.textInverse,
+      };
+    case 'secondary':
+      return {
+        background: tokens.colors.secondary,
+        text: tokens.colors.textInverse,
+      };
+    case 'success':
+      return {
+        background: tokens.colors.success,
+        text: tokens.colors.textInverse,
+      };
+    case 'warning':
+      return {
+        background: tokens.colors.warning,
+        text: tokens.colors.textInverse,
+      };
+    case 'error':
+      return {
+        background: tokens.colors.error,
+        text: tokens.colors.textInverse,
+      };
+    case 'info':
+      return {
+        background: tokens.colors.info,
+        text: tokens.colors.textInverse,
+      };
+    default:
+      return {
+        background: tokens.colors.primary,
+        text: tokens.colors.textInverse,
+      };
+  }
+};
+
+const getBorderRadius = (shape: AtomicBadgeProps['shape'], defaultRadius: number, tokens: ReturnType<typeof useAppDesignTokens>): number => {
+  switch (shape) {
+    case 'circle':
+      return tokens.borders.radius.full; // Very large radius for circle
+    case 'square':
+      return tokens.borders.radius.sm;
+    case 'rounded':
+    default:
+      return defaultRadius;
+  }
+};
+
+// =============================================================================
+// STYLES
+// =============================================================================
+
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      alignSelf: 'flex-start',
+    },
+    text: {
+      fontWeight: tokens.typography.semibold,
+      textAlign: 'center',
+    },
+  });
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+
+export default AtomicBadge;

package/src/presentation/atoms/AtomicButton.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { Button as PaperButton } from 'react-native-paper';
+import { StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
+import { Pressable } from 'react-native';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'text' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface AtomicButtonProps {
+  title?: string;
+  children?: React.ReactNode;
+  onPress: () => void;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  disabled?: boolean;
+  loading?: boolean;
+  icon?: string;
+  fullWidth?: boolean;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  testID?: string;
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export const AtomicButton: React.FC<AtomicButtonProps> = ({
+  title,
+  children,
+  onPress,
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  loading = false,
+  icon,
+  fullWidth = false,
+  style,
+  testID,
+}) => {
+  // Animation
+  const scale = useSharedValue(1);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  const handlePressIn = () => {
+    if (!disabled && !loading) {
+      scale.value = withSpring(0.95, {
+        damping: 15,
+        stiffness: 150,
+      });
+    }
+  };
+
+  const handlePressOut = () => {
+    scale.value = withSpring(1);
+  };
+
+  const handlePress = () => {
+    if (!disabled && !loading) {
+      onPress();
+    }
+  };
+
+  // Map variants to Paper modes
+  const getPaperMode = (): 'contained' | 'outlined' | 'text' | 'contained-tonal' | 'elevated' => {
+    switch (variant) {
+      case 'primary':
+        return 'contained';
+      case 'secondary':
+        return 'contained-tonal';
+      case 'outline':
+        return 'outlined';
+      case 'text':
+        return 'text';
+      case 'danger':
+        return 'contained';
+      default:
+        return 'contained';
+    }
+  };
+
+  // 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 buttonStyle: StyleProp<ViewStyle> = StyleSheet.flatten([
+    fullWidth ? { width: '100%' } : undefined,
+    style,
+  ]);
+
+  const buttonText = title || children;
+
+  return (
+    <AnimatedPressable
+      style={animatedStyle}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onPress={handlePress}
+    >
+      <PaperButton
+        mode={getPaperMode()}
+        disabled={disabled}
+        loading={loading}
+        icon={icon}
+        style={buttonStyle}
+        contentStyle={getContentStyle()}
+        testID={testID}
+        buttonColor={variant === 'danger' ? '#DC2626' : undefined}
+      >
+        {buttonText}
+      </PaperButton>
+    </AnimatedPressable>
+  );
+};
+
+export type { AtomicButtonProps as ButtonProps };