@umituz/react-native-design-system 1.14.0 → 2.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "1.14.0",
-  "description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
+  "version": "2.0.0",
+  "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography and responsive utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "exports": {
@@ -11,7 +11,12 @@
       "require": "./src/index.ts",
       "default": "./src/index.ts"
     },
-    "./src/index.ts": "./src/index.ts",
+    "./atoms": "./src/atoms/index.ts",
+    "./molecules": "./src/molecules/index.ts",
+    "./organisms": "./src/organisms/index.ts",
+    "./theme": "./src/theme/index.ts",
+    "./typography": "./src/typography/index.ts",
+    "./responsive": "./src/responsive/index.ts",
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -27,8 +32,12 @@
     "material-design-3",
     "ui-components",
     "atomic-design",
-    "ddd",
-    "domain-driven-design"
+    "atoms",
+    "molecules",
+    "organisms",
+    "theme",
+    "typography",
+    "responsive"
   ],
   "author": "Ümit UZ <umit@umituz.com>",
   "license": "MIT",
@@ -39,15 +48,10 @@
   "peerDependencies": {
     "@expo/vector-icons": ">=15.0.0",
     "@gorhom/bottom-sheet": ">=5.0.0",
+    "@react-native-async-storage/async-storage": ">=2.0.0",
     "@react-native-community/datetimepicker": ">=8.0.0",
     "@react-navigation/native": ">=6.0.0",
-    "@umituz/react-native-bottom-sheet": "latest",
-    "@umituz/react-native-design-system-atoms": "latest",
-    "@umituz/react-native-design-system-molecules": "latest",
-    "@umituz/react-native-design-system-organisms": "latest",
-    "@umituz/react-native-design-system-responsive": "latest",
-    "@umituz/react-native-design-system-theme": "latest",
-    "@umituz/react-native-design-system-typography": "latest",
+    "@umituz/react-native-icons": "latest",
     "expo-linear-gradient": ">=15.0.0",
     "react": ">=19.0.0",
     "react-native": ">=0.81.0",
@@ -63,22 +67,25 @@
     },
     "@react-navigation/native": {
       "optional": true
+    },
+    "@gorhom/bottom-sheet": {
+      "optional": true
     }
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.2",
     "@expo/vector-icons": "^15.0.0",
     "@gorhom/bottom-sheet": "^5.0.0",
     "@react-native-async-storage/async-storage": "2.2.0",
     "@react-native-community/datetimepicker": "^8.4.4",
     "@react-navigation/native": "^6.0.0",
     "@types/react": "~19.1.0",
-    "@umituz/react-native-bottom-sheet": "latest",
-    "@umituz/react-native-design-system-atoms": "latest",
-    "@umituz/react-native-design-system-molecules": "latest",
-    "@umituz/react-native-design-system-organisms": "latest",
-    "@umituz/react-native-design-system-responsive": "latest",
-    "@umituz/react-native-design-system-theme": "latest",
-    "@umituz/react-native-design-system-typography": "latest",
+    "@typescript-eslint/eslint-plugin": "^8.50.0",
+    "@typescript-eslint/parser": "^8.50.0",
+    "@umituz/react-native-icons": "latest",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "^2.20.0",

package/src/atoms/AtomicAvatar.tsx

@@ -0,0 +1,161 @@
+/**
+ * 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, Image, StyleSheet, ViewStyle, ImageStyle, ImageSourcePropType } from 'react-native';
+import { AtomicText } from './AtomicText';
+import { useAppDesignTokens } from '../theme';
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+export interface AtomicAvatarProps {
+  /** Image source (URI or require) */
+  source?: ImageSourcePropType;
+  /** 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}
+      accessibilityLabel={name ? `Avatar for ${name}` : 'Default avatar'}
+      accessibilityRole="image"
+    >
+      {source ? (
+        <Image
+          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/atoms/AtomicButton.tsx

@@ -0,0 +1,241 @@
+import React from 'react';
+import { StyleSheet, StyleProp, ViewStyle, TextStyle, TouchableOpacity, View } from 'react-native';
+import { AtomicText } from './AtomicText';
+import { AtomicIcon } from './AtomicIcon';
+import { useAppDesignTokens } from '../theme';
+import type { IconName } from './AtomicIcon';
+
+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>;
+  activeOpacity?: number;
+  testID?: string;
+}
+
+export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
+  title,
+  children,
+  onPress,
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  icon,
+  fullWidth = false,
+  style,
+  textStyle,
+  activeOpacity = 0.8,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const handlePress = () => {
+    if (!disabled) {
+      if (__DEV__) {
+        console.log('[AtomicButton] Button pressed:', { title, variant, 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={activeOpacity}
+      disabled={disabled}
+      testID={testID}
+    >
+      <View style={styles.content}>
+        {showIcon ? (
+          <AtomicIcon
+            name={icon}
+            customSize={config.iconSize}
+            customColor={iconColor as string | 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 };