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

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={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 };

package/src/presentation/atoms/AtomicCard.tsx

@@ -1,107 +0,0 @@
-import React from 'react';
-import { View, StyleProp, ViewStyle, Pressable } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-
-export type AtomicCardVariant = 'flat' | 'elevated' | 'outlined';
-export type AtomicCardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
-
-export interface AtomicCardProps {
-  variant?: AtomicCardVariant;
-  padding?: AtomicCardPadding;
-  onPress?: () => void;
-  disabled?: boolean;
-  style?: StyleProp<ViewStyle>;
-  children?: React.ReactNode;
-  testID?: string;
-}
-
-
-export const AtomicCard: React.FC<AtomicCardProps> = ({
-  variant = 'elevated',
-  padding = 'md',
-  onPress,
-  disabled = false,
-  style,
-  children,
-  testID,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  const handlePress = () => {
-    if (onPress && !disabled) {
-      onPress();
-    }
-  };
-
-  // 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 {
-          ...baseStyle,
-          borderWidth: 1,
-          borderColor: tokens.colors.border,
-        };
-
-      case 'outlined':
-        return {
-          ...baseStyle,
-          borderWidth: 1,
-          borderColor: tokens.colors.border,
-        };
-
-      case 'flat':
-        return {
-          ...baseStyle,
-          borderWidth: 0,
-        };
-
-      default:
-        return baseStyle;
-    }
-  };
-
-  const cardStyle: StyleProp<ViewStyle> = [
-    getVariantStyle(),
-    {
-      padding: getPaddingValue(),
-      opacity: disabled ? 0.5 : 1,
-    },
-    style,
-  ];
-
-  const cardContent = (
-    <View style={cardStyle} testID={testID}>
-      {children}
-    </View>
-  );
-
-  // If onPress provided, wrap with pressable
-  if (onPress && !disabled) {
-    return (
-      <Pressable onPress={handlePress}>
-        {cardContent}
-      </Pressable>
-    );
-  }
-
-  // Otherwise just return static card
-  return cardContent;
-};

package/src/presentation/atoms/AtomicChip.tsx

@@ -1,223 +0,0 @@
-/**
- * AtomicChip - Universal Chip/Tag Component
- *
- * Displays small tags, labels, or status indicators
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: ATOM
- * Purpose: Tag and label display
- *
- * Usage:
- * - Category tags
- * - Status indicators
- * - Filter chips
- * - Skill labels
- * - Badge displays
- */
-
-import React from 'react';
-import { View, StyleSheet, ViewStyle, TouchableOpacity } from 'react-native';
-import { AtomicText } from './AtomicText';
-import { AtomicIcon } from './AtomicIcon';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-
-// =============================================================================
-// TYPE DEFINITIONS
-// =============================================================================
-
-export interface AtomicChipProps {
-  /** Text content of the chip */
-  children: React.ReactNode;
-  /** Chip variant */
-  variant?: 'filled' | 'outlined' | 'soft';
-  /** Chip size */
-  size?: 'sm' | 'md' | 'lg';
-  /** Chip color theme */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
-  /** Custom background color */
-  backgroundColor?: string;
-  /** Custom text color */
-  textColor?: string;
-  /** Custom border color */
-  borderColor?: string;
-  /** Leading icon */
-  leadingIcon?: string;
-  /** Trailing icon */
-  trailingIcon?: string;
-  /** Whether the chip is clickable */
-  clickable?: boolean;
-  /** Click handler */
-  onPress?: () => void;
-  /** Whether the chip is selected */
-  selected?: boolean;
-  /** Whether the chip is disabled */
-  disabled?: boolean;
-  /** Style overrides */
-  style?: ViewStyle;
-  /** Test ID for testing */
-  testID?: string;
-}
-
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-
-export const AtomicChip: React.FC<AtomicChipProps> = ({
-  children,
-  variant = 'filled',
-  size = 'md',
-  color = 'primary',
-  backgroundColor,
-  textColor,
-  borderColor,
-  leadingIcon,
-  trailingIcon,
-  clickable = false,
-  onPress,
-  selected = false,
-  disabled = false,
-  style,
-  testID,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  // Size mapping
-  const sizeMap = {
-    sm: { 
-      paddingHorizontal: tokens.spacing.sm, 
-      paddingVertical: tokens.spacing.xs, 
-      fontSize: tokens.typography.bodySmall.fontSize, 
-      iconSize: 'xs' as const 
-    },
-    md: { 
-      paddingHorizontal: tokens.spacing.md, 
-      paddingVertical: tokens.spacing.sm, 
-      fontSize: tokens.typography.bodyMedium.fontSize, 
-      iconSize: 'sm' as const 
-    },
-    lg: { 
-      paddingHorizontal: tokens.spacing.md, 
-      paddingVertical: tokens.spacing.sm, 
-      fontSize: tokens.typography.bodyLarge.fontSize, 
-      iconSize: 'sm' as const 
-    },
-  };
-
-  const sizeConfig = sizeMap[size];
-
-  // Color mapping
-  const colorMap = {
-    primary: {
-      filled: { bg: tokens.colors.primary, text: tokens.colors.onPrimary, border: tokens.colors.primary },
-      outlined: { bg: 'transparent', text: tokens.colors.primary, border: tokens.colors.primary },
-      soft: { bg: tokens.colors.primaryContainer, text: tokens.colors.onPrimaryContainer, border: 'transparent' },
-    },
-    secondary: {
-      filled: { bg: tokens.colors.secondary, text: tokens.colors.onSecondary, border: tokens.colors.secondary },
-      outlined: { bg: 'transparent', text: tokens.colors.secondary, border: tokens.colors.secondary },
-      soft: { bg: tokens.colors.secondaryContainer, text: tokens.colors.onSecondaryContainer, border: 'transparent' },
-    },
-    success: {
-      filled: { bg: tokens.colors.success, text: tokens.colors.onSuccess, border: tokens.colors.success },
-      outlined: { bg: 'transparent', text: tokens.colors.success, border: tokens.colors.success },
-      soft: { bg: tokens.colors.successContainer, text: tokens.colors.onSuccessContainer, border: 'transparent' },
-    },
-    warning: {
-      filled: { bg: tokens.colors.warning, text: tokens.colors.onWarning, border: tokens.colors.warning },
-      outlined: { bg: 'transparent', text: tokens.colors.warning, border: tokens.colors.warning },
-      soft: { bg: tokens.colors.warningContainer, text: tokens.colors.onWarningContainer, border: 'transparent' },
-    },
-    error: {
-      filled: { bg: tokens.colors.error, text: tokens.colors.onError, border: tokens.colors.error },
-      outlined: { bg: 'transparent', text: tokens.colors.error, border: tokens.colors.error },
-      soft: { bg: tokens.colors.errorContainer, text: tokens.colors.onErrorContainer, border: 'transparent' },
-    },
-    info: {
-      filled: { bg: tokens.colors.info, text: tokens.colors.onInfo, border: tokens.colors.info },
-      outlined: { bg: 'transparent', text: tokens.colors.info, border: tokens.colors.info },
-      soft: { bg: tokens.colors.infoContainer, text: tokens.colors.onInfoContainer, border: 'transparent' },
-    },
-  };
-
-  const colorConfig = colorMap[color][variant];
-
-  // Apply custom colors if provided
-  const finalBackgroundColor = backgroundColor || colorConfig.bg;
-  const finalTextColor = textColor || colorConfig.text;
-  const finalBorderColor = borderColor || colorConfig.border;
-
-  // Handle disabled state
-  const isDisabled = disabled || (!clickable && !onPress);
-  const opacity = isDisabled ? 0.5 : 1;
-
-  // Handle selected state
-  const selectedStyle = selected ? {
-    borderWidth: tokens.borders.width.medium,
-    borderColor: tokens.colors.primary,
-  } : {};
-
-  const chipStyle: ViewStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: sizeConfig.paddingHorizontal,
-    paddingVertical: sizeConfig.paddingVertical,
-    backgroundColor: finalBackgroundColor,
-    borderRadius: tokens.borders.radius.xl,
-    borderWidth: variant === 'outlined' ? 1 : 0,
-    borderColor: finalBorderColor,
-    opacity,
-    ...selectedStyle,
-  };
-
-  const textStyle = {
-    fontSize: sizeConfig.fontSize,
-    fontWeight: tokens.typography.medium,
-  };
-
-  const iconColor = finalTextColor;
-
-  const content = (
-    <View style={[chipStyle, style]} testID={testID}>
-      {leadingIcon && (
-        <AtomicIcon
-          name={leadingIcon}
-          size={sizeConfig.iconSize}
-          customColor={iconColor}
-          style={{ marginRight: tokens.spacing.xs }}
-        />
-      )}
-      <AtomicText
-        type="labelMedium"
-        color={finalTextColor}
-        style={textStyle}
-      >
-        {children}
-      </AtomicText>
-      {trailingIcon && (
-        <AtomicIcon
-          name={trailingIcon}
-          size={sizeConfig.iconSize}
-          customColor={iconColor}
-          style={{ marginLeft: tokens.spacing.xs }}
-        />
-      )}
-    </View>
-  );
-
-  if (clickable && onPress && !disabled) {
-    return (
-      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
-        {content}
-      </TouchableOpacity>
-    );
-  }
-
-  return content;
-};
-
-// =============================================================================
-// EXPORTS
-// =============================================================================
-
-export default AtomicChip;