@umituz/react-native-design-system 1.8.0 → 1.8.2

package/src/presentation/atoms/AtomicAvatar.tsx

@@ -1,157 +0,0 @@
-/**
- * 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 '@umituz/react-native-theme';
-
-// =============================================================================
-// 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

@@ -1,169 +0,0 @@
-/**
- * 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 '@umituz/react-native-theme';
-
-// =============================================================================
-// 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

@@ -1,232 +0,0 @@
-/**
- * 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 '@umituz/react-native-theme';
-import type { DesignTokens } from '@umituz/react-native-theme';
-
-// =============================================================================
-// 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 as 'xs' | 'sm' | 'md' | 'lg'];
-  const colors = getVariantColors(tokens, variant as 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info');
-  const borderRadius = getBorderRadius(shape as 'circle' | 'rounded' | 'square', 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;