@umituz/react-native-design-system 1.5.36 → 1.5.38

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;

package/src/presentation/atoms/AtomicButton.tsx

@@ -1,236 +0,0 @@
-import React from 'react';
-import { StyleSheet, StyleProp, ViewStyle, TextStyle, TouchableOpacity, View } from 'react-native';
-import { AtomicText } from './AtomicText';
-import { Icon } from '@umituz/react-native-icon';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import type { IconName } from '@umituz/react-native-icon';
-
-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;
-  icon?: IconName;
-  fullWidth?: boolean;
-  style?: StyleProp<ViewStyle>;
-  textStyle?: StyleProp<TextStyle>;
-  testID?: string;
-}
-
-export const AtomicButton: React.FC<AtomicButtonProps> = ({
-  title,
-  children,
-  onPress,
-  variant = 'primary',
-  size = 'md',
-  disabled = false,
-  icon,
-  fullWidth = false,
-  style,
-  textStyle,
-  testID,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  const handlePress = () => {
-    if (!disabled) {
-      onPress();
-    }
-  };
-
-  // 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 {
-          container: {
-            ...baseStyle,
-            backgroundColor: tokens.colors.primary,
-          },
-          text: {
-            ...baseTextStyle,
-            color: tokens.colors.textInverse,
-          },
-        };
-
-      case 'secondary':
-        return {
-          container: {
-            ...baseStyle,
-            backgroundColor: tokens.colors.surfaceSecondary,
-          },
-          text: {
-            ...baseTextStyle,
-            color: tokens.colors.textPrimary,
-          },
-        };
-
-      case 'outline':
-        return {
-          container: {
-            ...baseStyle,
-            backgroundColor: 'transparent',
-            borderWidth: 1,
-            borderColor: tokens.colors.border,
-          },
-          text: {
-            ...baseTextStyle,
-            color: tokens.colors.textPrimary,
-          },
-        };
-
-      case 'text':
-        return {
-          container: {
-            ...baseStyle,
-            backgroundColor: 'transparent',
-          },
-          text: {
-            ...baseTextStyle,
-            color: tokens.colors.primary,
-          },
-        };
-
-      case 'danger':
-        return {
-          container: {
-            ...baseStyle,
-            backgroundColor: tokens.colors.error,
-          },
-          text: {
-            ...baseTextStyle,
-            color: tokens.colors.textInverse,
-          },
-        };
-
-      default:
-        return {
-          container: baseStyle,
-          text: baseTextStyle,
-        };
-    }
-  };
-
-  const variantStyles = getVariantStyles();
-
-  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;
-  const iconColor = variantStyles.text.color;
-
-  return (
-    <TouchableOpacity
-      style={containerStyle}
-      onPress={handlePress}
-      activeOpacity={0.8}
-      disabled={disabled}
-      testID={testID}
-    >
-      <View style={styles.content}>
-        {showIcon ? (
-          <Icon
-            name={typeof icon === 'string' ? icon : String(icon)}
-            customSize={config.iconSize}
-            customColor={typeof iconColor === 'string' ? iconColor : undefined}
-            style={styles.icon}
-          />
-        ) : null}
-
-        <AtomicText style={buttonTextStyle}>
-          {buttonText}
-        </AtomicText>
-      </View>
-    </TouchableOpacity>
-  );
-};
-
-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,
-  },
-});
-
-export type { AtomicButtonProps as ButtonProps };