@umituz/react-native-design-system 2.6.61 → 2.6.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.61",
+  "version": "2.6.62",
   "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/atoms/AtomicButton.tsx

@@ -1,258 +1,7 @@
-import React from 'react';
-import { StyleSheet, StyleProp, ViewStyle, TextStyle, TouchableOpacity, View } from 'react-native';
-import { AtomicText } from './AtomicText';
-import { AtomicIcon } from './AtomicIcon';
-import { AtomicSpinner } from './AtomicSpinner';
-import { useAppDesignTokens } from '../theme';
-import type { IconName } from './AtomicIcon';
+/**
+ * AtomicButton - Re-export from button module
+ * Maintains backward compatibility
+ */
 
-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?: IconName;
-  iconPosition?: 'left' | 'right';
-  fullWidth?: boolean;
-  style?: StyleProp<ViewStyle>;
-  textStyle?: StyleProp<TextStyle>;
-  activeOpacity?: number;
-  testID?: string;
-}
-
-export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
-  title,
-  children,
-  onPress,
-  variant = 'primary',
-  size = 'md',
-  disabled = false,
-  loading = false,
-  icon,
-  iconPosition = 'left',
-  fullWidth = false,
-  style,
-  textStyle,
-  activeOpacity = 0.8,
-  testID,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  const handlePress = () => {
-    if (!disabled && !loading) {
-      onPress();
-    }
-  };
-
-  const isDisabled = disabled || loading;
-
-  // Size configurations
-  const sizeConfig = {
-    sm: {
-      paddingVertical: tokens.spacing.xs,
-      paddingHorizontal: tokens.spacing.sm,
-      fontSize: tokens.typography.bodySmall.responsiveFontSize,
-      iconSize: 16 * tokens.spacingMultiplier,
-      minHeight: 32 * tokens.spacingMultiplier,
-    },
-    md: {
-      paddingVertical: tokens.spacing.sm,
-      paddingHorizontal: tokens.spacing.md,
-      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
-      iconSize: 20 * tokens.spacingMultiplier,
-      minHeight: 44 * tokens.spacingMultiplier,
-    },
-    lg: {
-      paddingVertical: tokens.spacing.md,
-      paddingHorizontal: tokens.spacing.lg,
-      fontSize: tokens.typography.bodyLarge.responsiveFontSize,
-      iconSize: 24 * tokens.spacingMultiplier,
-      minHeight: 52 * tokens.spacingMultiplier,
-    },
-  };
-
-  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: undefined,
-            borderWidth: 1,
-            borderColor: tokens.colors.border,
-          },
-          text: {
-            ...baseTextStyle,
-            color: tokens.colors.textPrimary,
-          },
-        };
-
-      case 'text':
-        return {
-          container: {
-            ...baseStyle,
-            backgroundColor: undefined,
-          },
-          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,
-    isDisabled ? styles.disabled : undefined,
-    style,
-  ];
-
-  const buttonTextStyle: StyleProp<TextStyle> = [
-    {
-      fontSize: config.fontSize,
-      fontWeight: '600',
-    },
-    variantStyles.text,
-    isDisabled ? styles.disabledText : undefined,
-    textStyle,
-  ];
-
-  const buttonText = title || children;
-  const showIcon = icon;
-  const iconColor = variantStyles.text.color;
-
-  return (
-    <TouchableOpacity
-      style={containerStyle}
-      onPress={handlePress}
-      activeOpacity={activeOpacity}
-      disabled={isDisabled}
-      testID={testID}
-    >
-      <View style={[styles.content, iconPosition === 'right' && styles.rowReverse]}>
-        {loading ? (
-          <AtomicSpinner
-            size="sm"
-            color={iconColor as string}
-            style={iconPosition === 'right' ? styles.iconRight : styles.iconLeft}
-          />
-        ) : showIcon ? (
-          <AtomicIcon
-            name={icon}
-            customSize={config.iconSize}
-            customColor={iconColor as string | undefined}
-            style={iconPosition === 'right' ? styles.iconRight : styles.iconLeft}
-          />
-        ) : null}
-
-        <AtomicText style={buttonTextStyle}>
-          {buttonText}
-        </AtomicText>
-      </View>
-    </TouchableOpacity>
-  );
-});
-AtomicButton.displayName = 'AtomicButton';
-
-const styles = StyleSheet.create({
-  button: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'row',
-  },
-  content: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  rowReverse: {
-    flexDirection: 'row-reverse',
-  },
-  fullWidth: {
-    width: '100%',
-  },
-  disabled: {
-    opacity: 0.5,
-  },
-  disabledText: {
-    opacity: 0.7,
-  },
-  iconLeft: {
-    marginRight: 8,
-  },
-  iconRight: {
-    marginLeft: 8,
-  },
-});
-
-export type { AtomicButtonProps as ButtonProps };
+export { AtomicButton } from './button';
+export type { AtomicButtonProps, ButtonVariant, ButtonSize } from './button';

package/src/atoms/AtomicChip.tsx

@@ -1,227 +1,7 @@
 /**
- * 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
+ * AtomicChip - Re-export from chip module
+ * Maintains backward compatibility
  */
 
-import React from 'react';
-import { View, ViewStyle, TouchableOpacity } from 'react-native';
-import { AtomicText } from './AtomicText';
-import { AtomicIcon } from './AtomicIcon';
-import { useAppDesignTokens } from '../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;
-  /** Active opacity for touch feedback */
-  activeOpacity?: number;
-}
-
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-
-export const AtomicChip: React.FC<AtomicChipProps> = React.memo(({
-  children,
-  variant = 'filled',
-  size = 'md',
-  color = 'primary',
-  backgroundColor,
-  textColor,
-  borderColor,
-  leadingIcon,
-  trailingIcon,
-  clickable = false,
-  onPress,
-  selected = false,
-  disabled = false,
-  style,
-  testID,
-  activeOpacity = 0.7,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  // Size mapping
-  const sizeMap = {
-    sm: {
-      paddingHorizontal: tokens.spacing.sm,
-      paddingVertical: tokens.spacing.xs,
-      fontSize: tokens.typography.bodySmall.responsiveFontSize,
-      iconSize: 'xs' as const
-    },
-    md: {
-      paddingHorizontal: tokens.spacing.md,
-      paddingVertical: tokens.spacing.sm,
-      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
-      iconSize: 'sm' as const
-    },
-    lg: {
-      paddingHorizontal: tokens.spacing.md,
-      paddingVertical: tokens.spacing.sm,
-      fontSize: tokens.typography.bodyLarge.responsiveFontSize,
-      iconSize: 'sm' as const
-    },
-  };
-
-  const sizeConfig = sizeMap[size];
-
-  // Color mapping - using undefined for transparent backgrounds
-  const colorMap = {
-    primary: {
-      filled: { bg: tokens.colors.primary, text: tokens.colors.onPrimary, border: tokens.colors.primary },
-      outlined: { bg: undefined, text: tokens.colors.primary, border: tokens.colors.primary },
-      soft: { bg: tokens.colors.primaryContainer, text: tokens.colors.onPrimaryContainer, border: undefined },
-    },
-    secondary: {
-      filled: { bg: tokens.colors.secondary, text: tokens.colors.onSecondary, border: tokens.colors.secondary },
-      outlined: { bg: undefined, text: tokens.colors.secondary, border: tokens.colors.secondary },
-      soft: { bg: tokens.colors.secondaryContainer, text: tokens.colors.onSecondaryContainer, border: undefined },
-    },
-    success: {
-      filled: { bg: tokens.colors.success, text: tokens.colors.onSuccess, border: tokens.colors.success },
-      outlined: { bg: undefined, text: tokens.colors.success, border: tokens.colors.success },
-      soft: { bg: tokens.colors.successContainer, text: tokens.colors.onSuccessContainer, border: undefined },
-    },
-    warning: {
-      filled: { bg: tokens.colors.warning, text: tokens.colors.onWarning, border: tokens.colors.warning },
-      outlined: { bg: undefined, text: tokens.colors.warning, border: tokens.colors.warning },
-      soft: { bg: tokens.colors.warningContainer, text: tokens.colors.onWarningContainer, border: undefined },
-    },
-    error: {
-      filled: { bg: tokens.colors.error, text: tokens.colors.onError, border: tokens.colors.error },
-      outlined: { bg: undefined, text: tokens.colors.error, border: tokens.colors.error },
-      soft: { bg: tokens.colors.errorContainer, text: tokens.colors.onErrorContainer, border: undefined },
-    },
-    info: {
-      filled: { bg: tokens.colors.info, text: tokens.colors.onInfo, border: tokens.colors.info },
-      outlined: { bg: undefined, text: tokens.colors.info, border: tokens.colors.info },
-      soft: { bg: tokens.colors.infoContainer, text: tokens.colors.onInfoContainer, border: undefined },
-    },
-  };
-
-  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={activeOpacity}>
-        {content}
-      </TouchableOpacity>
-    );
-  }
-
-  return content;
-});
-AtomicChip.displayName = 'AtomicChip';
-
-// =============================================================================
-// EXPORTS
-// =============================================================================
-
-export default AtomicChip;
+export { AtomicChip } from './chip';
+export type { AtomicChipProps } from './chip';

package/src/atoms/button/AtomicButton.tsx

@@ -0,0 +1,108 @@
+/**
+ * AtomicButton Component
+ * Refactored: Extracted configs, styles, and types
+ */
+
+import React from 'react';
+import { StyleProp, ViewStyle, TextStyle, TouchableOpacity, View } from 'react-native';
+import { AtomicText } from '../AtomicText';
+import { AtomicIcon } from '../AtomicIcon';
+import { AtomicSpinner } from '../AtomicSpinner';
+import { useAppDesignTokens } from '../../theme';
+import { getButtonSizeConfig } from './configs/buttonSizeConfig';
+import { getVariantStyles } from './styles/buttonVariantStyles';
+import { buttonStyles } from './styles/buttonStyles';
+import type { AtomicButtonProps } from './types';
+
+export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
+  title,
+  children,
+  onPress,
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  loading = false,
+  icon,
+  iconPosition = 'left',
+  fullWidth = false,
+  style,
+  textStyle,
+  activeOpacity = 0.8,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const handlePress = () => {
+    if (!disabled && !loading) {
+      onPress();
+    }
+  };
+
+  const isDisabled = disabled || loading;
+  const config = getButtonSizeConfig(size, tokens);
+  const variantStyles = getVariantStyles(variant, tokens);
+  const iconColor = variantStyles.text.color;
+
+  const containerStyle: StyleProp<ViewStyle> = [
+    buttonStyles.button,
+    {
+      paddingVertical: config.paddingVertical,
+      paddingHorizontal: config.paddingHorizontal,
+      minHeight: config.minHeight,
+      borderRadius: tokens.borders.radius.md,
+    },
+    variantStyles.container,
+    fullWidth ? buttonStyles.fullWidth : undefined,
+    isDisabled ? buttonStyles.disabled : undefined,
+    style,
+  ];
+
+  const buttonTextStyle: StyleProp<TextStyle> = [
+    {
+      fontSize: config.fontSize,
+      fontWeight: '600',
+    },
+    variantStyles.text,
+    isDisabled ? buttonStyles.disabledText : undefined,
+    textStyle,
+  ];
+
+  const buttonText = title || children;
+  const showIcon = icon;
+
+  return (
+    <TouchableOpacity
+      style={containerStyle}
+      onPress={handlePress}
+      activeOpacity={activeOpacity}
+      disabled={isDisabled}
+      testID={testID}
+    >
+      <View style={[buttonStyles.content, iconPosition === 'right' && buttonStyles.rowReverse]}>
+        {loading ? (
+          <AtomicSpinner
+            size="sm"
+            color={iconColor as string}
+            style={iconPosition === 'right' ? buttonStyles.iconRight : buttonStyles.iconLeft}
+          />
+        ) : showIcon ? (
+          <AtomicIcon
+            name={icon}
+            customSize={config.iconSize}
+            customColor={iconColor as string | undefined}
+            style={iconPosition === 'right' ? buttonStyles.iconRight : buttonStyles.iconLeft}
+          />
+        ) : null}
+
+        <AtomicText style={buttonTextStyle}>
+          {buttonText}
+        </AtomicText>
+      </View>
+    </TouchableOpacity>
+  );
+});
+
+AtomicButton.displayName = 'AtomicButton';
+
+// Re-export types for convenience
+export type { AtomicButtonProps, ButtonVariant, ButtonSize } from './types';

package/src/atoms/button/configs/buttonSizeConfig.ts

@@ -0,0 +1,37 @@
+/**
+ * Button Size Configuration
+ */
+
+import type { DesignTokens } from '../../../theme';
+import type { ButtonSize, ButtonSizeConfig } from '../types';
+
+export const getButtonSizeConfig = (
+  size: ButtonSize,
+  tokens: DesignTokens,
+): ButtonSizeConfig => {
+  const sizeConfigs: Record<ButtonSize, ButtonSizeConfig> = {
+    sm: {
+      paddingVertical: tokens.spacing.xs,
+      paddingHorizontal: tokens.spacing.sm,
+      fontSize: tokens.typography.bodySmall.responsiveFontSize,
+      iconSize: 16 * tokens.spacingMultiplier,
+      minHeight: 32 * tokens.spacingMultiplier,
+    },
+    md: {
+      paddingVertical: tokens.spacing.sm,
+      paddingHorizontal: tokens.spacing.md,
+      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
+      iconSize: 20 * tokens.spacingMultiplier,
+      minHeight: 44 * tokens.spacingMultiplier,
+    },
+    lg: {
+      paddingVertical: tokens.spacing.md,
+      paddingHorizontal: tokens.spacing.lg,
+      fontSize: tokens.typography.bodyLarge.responsiveFontSize,
+      iconSize: 24 * tokens.spacingMultiplier,
+      minHeight: 52 * tokens.spacingMultiplier,
+    },
+  };
+
+  return sizeConfigs[size];
+};

package/src/atoms/button/index.ts

@@ -0,0 +1,6 @@
+/**
+ * AtomicButton Barrel Export
+ */
+
+export { AtomicButton } from './AtomicButton';
+export type { AtomicButtonProps, ButtonVariant, ButtonSize } from './types';

package/src/atoms/button/styles/buttonStyles.ts

@@ -0,0 +1,36 @@
+/**
+ * Button Base Styles
+ */
+
+import { StyleSheet } from 'react-native';
+
+export const buttonStyles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rowReverse: {
+    flexDirection: 'row-reverse',
+  },
+  fullWidth: {
+    width: '100%',
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  disabledText: {
+    opacity: 0.7,
+  },
+  iconLeft: {
+    marginRight: 8,
+  },
+  iconRight: {
+    marginLeft: 8,
+  },
+});