@umituz/react-native-design-system 2.3.7 → 2.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.3.7",
+  "version": "2.3.9",
   "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/molecules/avatar/Avatar.tsx

@@ -0,0 +1,206 @@
+/**
+ * Avatar Domain - Avatar Component
+ *
+ * Universal avatar component with image, initials, and icon support.
+ * Handles loading states, fallbacks, and status indicators.
+ */
+
+import React from 'react';
+import { View, Image, StyleSheet, type StyleProp, type ViewStyle, type ImageStyle } from 'react-native';
+import { useAppDesignTokens } from '../../theme';
+import { AtomicText, AtomicIcon } from '../../atoms';
+import type { AvatarSize, AvatarShape } from './Avatar.utils';
+import {
+  SIZE_CONFIGS,
+  AvatarUtils,
+  AVATAR_CONSTANTS,
+} from './Avatar.utils';
+
+/**
+ * Avatar component props
+ */
+export interface AvatarProps {
+  /** Image URI */
+  uri?: string;
+  /** User name for initials */
+  name?: string;
+  /** Icon name (fallback when no image/name) */
+  icon?: string;
+  /** Size preset */
+  size?: AvatarSize;
+  /** Shape */
+  shape?: AvatarShape;
+  /** Custom background color */
+  backgroundColor?: string;
+  /** Show status indicator */
+  showStatus?: boolean;
+  /** Status (online/offline/away/busy) */
+  status?: 'online' | 'offline' | 'away' | 'busy';
+  /** Custom container style */
+  style?: StyleProp<ViewStyle>;
+  /** Custom image style */
+  imageStyle?: StyleProp<ImageStyle>;
+  /** OnPress handler */
+  onPress?: () => void;
+}
+
+/**
+ * Avatar Component
+ *
+ * Displays user avatars with automatic fallback hierarchy:
+ * 1. Image (if uri provided)
+ * 2. Initials (if name provided)
+ * 3. Icon (fallback)
+ *
+ * USAGE:
+ * ```typescript
+ * // Image avatar
+ * <Avatar uri="https://..." name="Ümit Uz" size="lg" />
+ *
+ * // Initials avatar (no image)
+ * <Avatar name="Ümit Uz" size="md" />
+ *
+ * // Icon avatar (fallback)
+ * <Avatar size="sm" />
+ *
+ * // With status indicator
+ * <Avatar
+ *   name="Ümit Uz"
+ *   showStatus
+ *   status="online"
+ * />
+ *
+ * // Custom shape
+ * <Avatar name="John Doe" shape="rounded" />
+ * ```
+ */
+export const Avatar: React.FC<AvatarProps> = ({
+  uri,
+  name,
+  icon = AVATAR_CONSTANTS.DEFAULT_ICON,
+  size = AVATAR_CONSTANTS.DEFAULT_SIZE,
+  shape = AVATAR_CONSTANTS.DEFAULT_SHAPE,
+  backgroundColor,
+  showStatus = false,
+  status = 'offline',
+  style,
+  imageStyle,
+  onPress,
+}) => {
+  const tokens = useAppDesignTokens();
+  const config = SIZE_CONFIGS[size];
+
+  // Determine avatar type and content
+  const hasImage = !!uri;
+  const hasName = !!name;
+  const initials = hasName ? AvatarUtils.generateInitials(name) : AVATAR_CONSTANTS.FALLBACK_INITIALS;
+  const bgColor = backgroundColor || (hasName ? AvatarUtils.getColorForName(name) : tokens.colors.surfaceSecondary);
+  const borderRadius = AvatarUtils.getBorderRadius(shape, config.size);
+
+  // Status indicator position
+  const statusPosition = {
+    bottom: 0,
+    right: 0,
+  };
+
+  const renderContent = () => {
+    if (hasImage) {
+      return (
+        <Image
+          source={{ uri }}
+          style={[
+            styles.image,
+            {
+              width: config.size,
+              height: config.size,
+              borderRadius,
+            },
+            imageStyle,
+          ]}
+        />
+      );
+    }
+
+    if (hasName) {
+      return (
+        <AtomicText
+          type="bodyMedium"
+          style={[
+            styles.initials,
+            {
+              fontSize: config.fontSize,
+              color: '#FFFFFF',
+            },
+          ]}
+        >
+          {initials}
+        </AtomicText>
+      );
+    }
+
+    // Fallback to icon
+    return (
+      <AtomicIcon
+        name={icon}
+        customSize={config.iconSize}
+        customColor="#FFFFFF"
+      />
+    );
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          width: config.size,
+          height: config.size,
+          borderRadius,
+          backgroundColor: bgColor,
+        },
+        style,
+      ]}
+      onTouchEnd={onPress}
+    >
+      {renderContent()}
+
+      {/* Status Indicator */}
+      {showStatus && (
+        <View
+          style={[
+            styles.statusIndicator,
+            {
+              width: config.statusSize,
+              height: config.statusSize,
+              borderRadius: config.statusSize / 2,
+              backgroundColor: AvatarUtils.getStatusColor(status),
+              borderWidth: config.borderWidth,
+              borderColor: tokens.colors.onBackground,
+              ...statusPosition,
+            },
+          ]}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  image: {
+    resizeMode: 'cover',
+  },
+  initials: {
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  statusIndicator: {
+    position: 'absolute',
+  },
+});
+

package/src/molecules/avatar/Avatar.utils.ts

@@ -0,0 +1,288 @@
+/**
+ * Avatar Domain - Entity Definitions
+ *
+ * Core types and interfaces for user avatars.
+ * Supports images, initials, icons with Turkish character support.
+ */
+
+/**
+ * Avatar size preset
+ */
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+
+/**
+ * Avatar shape
+ */
+export type AvatarShape = 'circle' | 'square' | 'rounded';
+
+/**
+ * Avatar type
+ */
+export type AvatarType = 'image' | 'initials' | 'icon';
+
+/**
+ * Avatar configuration
+ */
+export interface AvatarConfig {
+  /** Avatar type */
+  type: AvatarType;
+  /** Size preset */
+  size: AvatarSize;
+  /** Shape */
+  shape: AvatarShape;
+  /** Image URI */
+  uri?: string;
+  /** User name for initials */
+  name?: string;
+  /** Icon name (if type is icon) */
+  icon?: string;
+  /** Custom background color */
+  backgroundColor?: string;
+  /** Show status indicator */
+  showStatus?: boolean;
+  /** Status (online/offline) */
+  status?: 'online' | 'offline' | 'away' | 'busy';
+}
+
+/**
+ * Size configuration
+ */
+export interface SizeConfig {
+  size: number;
+  fontSize: number;
+  iconSize: number;
+  statusSize: number;
+  borderWidth: number;
+}
+
+/**
+ * Avatar group configuration
+ */
+export interface AvatarGroupConfig {
+  maxVisible: number;
+  spacing: number;
+  size: AvatarSize;
+  shape: AvatarShape;
+}
+
+/**
+ * Size configurations (px)
+ */
+export const SIZE_CONFIGS: Record<AvatarSize, SizeConfig> = {
+  xs: {
+    size: 24,
+    fontSize: 10,
+    iconSize: 12,
+    statusSize: 6,
+    borderWidth: 1,
+  },
+  sm: {
+    size: 32,
+    fontSize: 12,
+    iconSize: 16,
+    statusSize: 8,
+    borderWidth: 1.5,
+  },
+  md: {
+    size: 40,
+    fontSize: 14,
+    iconSize: 20,
+    statusSize: 10,
+    borderWidth: 2,
+  },
+  lg: {
+    size: 56,
+    fontSize: 18,
+    iconSize: 28,
+    statusSize: 12,
+    borderWidth: 2,
+  },
+  xl: {
+    size: 80,
+    fontSize: 24,
+    iconSize: 40,
+    statusSize: 16,
+    borderWidth: 2.5,
+  },
+  xxl: {
+    size: 120,
+    fontSize: 36,
+    iconSize: 60,
+    statusSize: 20,
+    borderWidth: 3,
+  },
+};
+
+/**
+ * Avatar background colors
+ * Vibrant, accessible colors with good contrast
+ */
+export const AVATAR_COLORS = [
+  '#EF4444', // Red
+  '#F59E0B', // Orange
+  '#10B981', // Green
+  '#3B82F6', // Blue
+  '#8B5CF6', // Purple
+  '#EC4899', // Pink
+  '#14B8A6', // Teal
+  '#F97316', // Orange-Red
+  '#06B6D4', // Cyan
+  '#84CC16', // Lime
+] as const;
+
+/**
+ * Status indicator colors
+ */
+export const STATUS_COLORS = {
+  online: '#10B981', // Green
+  offline: '#9CA3AF', // Gray
+  away: '#F59E0B', // Orange
+  busy: '#EF4444', // Red
+} as const;
+
+/**
+ * Border radius configurations
+ */
+export const SHAPE_CONFIGS = {
+  circle: 9999, // Full circle
+  square: 0, // No radius
+  rounded: 8, // Rounded corners
+} as const;
+
+/**
+ * Avatar utility class
+ */
+export class AvatarUtils {
+  /**
+   * Generate initials from name
+   * Supports Turkish characters (Ümit Uz → ÜU)
+   */
+  static generateInitials(name: string): string {
+    const trimmed = name.trim();
+    if (!trimmed) return '?';
+
+    const words = trimmed.split(/\s+/);
+
+    if (words.length >= 2) {
+      // Full name: First letter of first + first letter of last
+      const first = words[0][0];
+      const last = words[words.length - 1][0];
+      return (first + last).toLocaleUpperCase('tr-TR');
+    } else {
+      // Single word: First 2 letters
+      return trimmed.slice(0, 2).toLocaleUpperCase('tr-TR');
+    }
+  }
+
+  /**
+   * Generate initials from email
+   * umit@example.com → UE
+   */
+  static generateInitialsFromEmail(email: string): string {
+    const trimmed = email.trim();
+    if (!trimmed) return '?';
+
+    const [username] = trimmed.split('@');
+    if (!username) return '?';
+
+    return username.slice(0, 2).toLocaleUpperCase('tr-TR');
+  }
+
+  /**
+   * Hash string to number (for consistent color assignment)
+   */
+  static hashString(str: string): number {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return Math.abs(hash);
+  }
+
+  /**
+   * Get consistent color for name
+   * Same name always returns same color
+   */
+  static getColorForName(name: string): string {
+    if (!name) return AVATAR_COLORS[0];
+
+    const hash = this.hashString(name);
+    return AVATAR_COLORS[hash % AVATAR_COLORS.length];
+  }
+
+  /**
+   * Get size config
+   */
+  static getSizeConfig(size: AvatarSize): SizeConfig {
+    return SIZE_CONFIGS[size];
+  }
+
+  /**
+   * Get border radius for shape
+   */
+  static getBorderRadius(shape: AvatarShape, size: number): number {
+    if (shape === 'circle') {
+      return size / 2;
+    }
+    return SHAPE_CONFIGS[shape];
+  }
+
+  /**
+   * Get status color
+   */
+  static getStatusColor(status: 'online' | 'offline' | 'away' | 'busy'): string {
+    return STATUS_COLORS[status];
+  }
+
+  /**
+   * Validate avatar config
+   */
+  static validateConfig(config: Partial<AvatarConfig>): AvatarConfig {
+    return {
+      type: config.type || 'initials',
+      size: config.size || 'md',
+      shape: config.shape || 'circle',
+      uri: config.uri,
+      name: config.name,
+      icon: config.icon,
+      backgroundColor: config.backgroundColor,
+      showStatus: config.showStatus ?? false,
+      status: config.status,
+    };
+  }
+
+  /**
+   * Check if avatar has image
+   */
+  static hasImage(config: AvatarConfig): boolean {
+    return config.type === 'image' && !!config.uri;
+  }
+
+  /**
+   * Check if avatar has initials
+   */
+  static hasInitials(config: AvatarConfig): boolean {
+    return config.type === 'initials' && !!config.name;
+  }
+
+  /**
+   * Check if avatar has icon
+   */
+  static hasIcon(config: AvatarConfig): boolean {
+    return config.type === 'icon' && !!config.icon;
+  }
+}
+
+/**
+ * Avatar constants
+ */
+export const AVATAR_CONSTANTS = {
+  DEFAULT_SIZE: 'md' as AvatarSize,
+  DEFAULT_SHAPE: 'circle' as AvatarShape,
+  DEFAULT_TYPE: 'initials' as AvatarType,
+  DEFAULT_ICON: 'user',
+  MAX_GROUP_VISIBLE: 3,
+  GROUP_SPACING: -8, // Negative for overlap
+  FALLBACK_INITIALS: '?',
+} as const;
+

package/src/molecules/avatar/AvatarGroup.tsx

@@ -0,0 +1,175 @@
+/**
+ * Avatar Domain - AvatarGroup Component
+ *
+ * Displays multiple avatars in a stacked layout.
+ * Shows overflow count when exceeding max visible avatars.
+ */
+
+import React from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../../theme';
+import { AtomicText } from '../../atoms';
+import { Avatar } from './Avatar';
+import type { AvatarSize, AvatarShape } from './Avatar.utils';
+import {
+  SIZE_CONFIGS,
+  AVATAR_CONSTANTS,
+} from './Avatar.utils';
+
+/**
+ * Avatar item for group
+ */
+export interface AvatarGroupItem {
+  uri?: string;
+  name?: string;
+  icon?: string;
+}
+
+/**
+ * AvatarGroup component props
+ */
+export interface AvatarGroupProps {
+  /** Array of avatar items */
+  items: AvatarGroupItem[];
+  /** Maximum visible avatars */
+  maxVisible?: number;
+  /** Avatar size */
+  size?: AvatarSize;
+  /** Avatar shape */
+  shape?: AvatarShape;
+  /** Spacing between avatars (negative for overlap) */
+  spacing?: number;
+  /** Custom container style */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * AvatarGroup Component
+ *
+ * Displays multiple avatars in a horizontal stack.
+ * Shows "+N" indicator when exceeding max visible count.
+ *
+ * USAGE:
+ * ```typescript
+ * const users = [
+ *   { name: 'Ümit Uz', uri: 'https://...' },
+ *   { name: 'John Doe', uri: 'https://...' },
+ *   { name: 'Jane Smith' },
+ *   { name: 'Bob Johnson' },
+ *   { name: 'Alice Brown' },
+ * ];
+ *
+ * // Show 3 avatars + overflow
+ * <AvatarGroup items={users} maxVisible={3} />
+ *
+ * // Custom spacing
+ * <AvatarGroup items={users} spacing={-12} />
+ *
+ * // Different size
+ * <AvatarGroup items={users} size="lg" />
+ * ```
+ */
+export const AvatarGroup: React.FC<AvatarGroupProps> = ({
+  items,
+  maxVisible = AVATAR_CONSTANTS.MAX_GROUP_VISIBLE,
+  size = AVATAR_CONSTANTS.DEFAULT_SIZE,
+  shape = AVATAR_CONSTANTS.DEFAULT_SHAPE,
+  spacing = AVATAR_CONSTANTS.GROUP_SPACING,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+  const config = SIZE_CONFIGS[size];
+
+  // Calculate visible avatars and overflow count
+  const visibleItems = items.slice(0, maxVisible);
+  const overflowCount = items.length - maxVisible;
+  const hasOverflow = overflowCount > 0;
+
+  return (
+    <View style={[styles.container, style]}>
+      {/* Render visible avatars */}
+      {visibleItems.map((item, index) => (
+        <View
+          key={index}
+          style={[
+            styles.avatarWrapper,
+            index > 0 && { marginLeft: spacing },
+          ]}
+        >
+          <Avatar
+            uri={item.uri}
+            name={item.name}
+            icon={item.icon}
+            size={size}
+            shape={shape}
+            style={[
+              styles.avatar,
+              {
+                borderWidth: 2,
+                borderColor: tokens.colors.onBackground,
+              },
+            ]}
+          />
+        </View>
+      ))}
+
+      {/* Overflow indicator */}
+      {hasOverflow && (
+        <View
+          style={[
+            styles.avatarWrapper,
+            { marginLeft: spacing },
+          ]}
+        >
+          <View
+            style={[
+              styles.overflow,
+              {
+                width: config.size,
+                height: config.size,
+                borderRadius: shape === 'circle' ? config.size / 2 : shape === 'rounded' ? 8 : 0,
+                backgroundColor: tokens.colors.surfaceSecondary,
+                borderWidth: 2,
+                borderColor: tokens.colors.onBackground,
+              },
+            ]}
+          >
+            <AtomicText
+              type="bodySmall"
+              style={[
+                styles.overflowText,
+                {
+                  fontSize: config.fontSize,
+                  color: tokens.colors.textSecondary,
+                },
+              ]}
+            >
+              +{overflowCount}
+            </AtomicText>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  avatarWrapper: {
+    // Wrapper for easier spacing control
+  },
+  avatar: {
+    // Avatar styles
+  },
+  overflow: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  overflowText: {
+    fontWeight: '600',
+  },
+});
+

package/src/molecules/avatar/index.ts

@@ -0,0 +1,10 @@
+export { Avatar, type AvatarProps } from './Avatar';
+export { AvatarGroup, type AvatarGroupProps, type AvatarGroupItem } from './AvatarGroup';
+export {
+    AvatarUtils,
+    AVATAR_CONSTANTS,
+    type AvatarSize,
+    type AvatarShape,
+    type AvatarConfig,
+    type AvatarType
+} from './Avatar.utils';

package/src/molecules/index.ts

@@ -4,6 +4,7 @@
  */
 
 // Component exports
+export * from './avatar';
 export { FormField, type FormFieldProps } from './FormField';
 export { ListItem, type ListItemProps } from './ListItem';
 export { SearchBar, type SearchBarProps } from './SearchBar';