@umituz/react-native-design-system 1.1.3 → 1.3.0

package/src/presentation/atoms/AtomicTextArea.tsx

@@ -1,12 +1,12 @@
 /**
  * AtomicTextArea Component
  *
- * A multiline text input component with Material Design 3 integration
+ * A multiline text input component with pure React Native implementation
  * for longer text entry with consistent styling.
  *
  * Features:
- * - React Native Paper TextInput with multiline
- * - Material Design 3 outlined/filled/flat variants
+ * - Pure React Native TextInput with multiline
+ * - Outlined/filled/flat variants
  * - Error, success, disabled states
  * - Character counter with max length
  * - Helper text for guidance or errors
@@ -31,10 +31,10 @@
  * ```
  */
 
-import React from 'react';
-import { View, StyleProp, ViewStyle, TextStyle } from 'react-native';
-import { TextInput, HelperText } from 'react-native-paper';
+import React, { useState } from 'react';
+import { View, TextInput, StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { AtomicText } from './AtomicText';
 
 export type AtomicTextAreaVariant = 'outlined' | 'filled' | 'flat';
 export type AtomicTextAreaState = 'default' | 'error' | 'success' | 'disabled';
@@ -84,7 +84,7 @@ export interface AtomicTextAreaProps {
 }
 
 /**
- * AtomicTextArea - Material Design 3 Multiline Text Input
+ * AtomicTextArea - Pure React Native Multiline Text Input
  */
 export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
   variant = 'outlined',
@@ -109,85 +109,177 @@ export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
   onFocus,
 }) => {
   const tokens = useAppDesignTokens();
+  const [isFocused, setIsFocused] = useState(false);
   const isDisabled = state === 'disabled' || disabled;
   const characterCount = value?.toString().length || 0;
+  const hasError = state === 'error';
+  const hasSuccess = state === 'success';
 
-  // Map variant to Paper mode
-  const getPaperMode = (): 'outlined' | 'flat' => {
-    if (variant === 'outlined') return 'outlined';
-    return 'flat'; // filled and flat both use 'flat' mode
+  // Size configuration
+  const sizeConfig = {
+    sm: {
+      paddingVertical: tokens.spacing.xs,
+      paddingHorizontal: tokens.spacing.sm,
+      fontSize: tokens.typography.bodySmall.fontSize,
+      lineHeight: 20,
+    },
+    md: {
+      paddingVertical: tokens.spacing.sm,
+      paddingHorizontal: tokens.spacing.md,
+      fontSize: tokens.typography.bodyMedium.fontSize,
+      lineHeight: 24,
+    },
+    lg: {
+      paddingVertical: tokens.spacing.md,
+      paddingHorizontal: tokens.spacing.lg,
+      fontSize: tokens.typography.bodyLarge.fontSize,
+      lineHeight: 28,
+    },
   };
 
-  // Map state to Paper error prop
-  const hasError = state === 'error';
+  const config = sizeConfig[size];
 
   // Calculate height based on rows
   const getTextAreaHeight = () => {
     if (minHeight) return minHeight;
+    const paddingVertical = config.paddingVertical * 2;
+    return (rows * config.lineHeight) + paddingVertical;
+  };
+
+  // Get variant styles
+  const getVariantStyle = (): ViewStyle => {
+    const baseStyle: ViewStyle = {
+      backgroundColor: tokens.colors.surface,
+      borderRadius: tokens.borders.radius.md,
+    };
+
+    let borderColor = tokens.colors.border;
+    if (isFocused) borderColor = tokens.colors.primary;
+    if (hasError) borderColor = tokens.colors.error;
+    if (hasSuccess) borderColor = tokens.colors.success;
+    if (isDisabled) borderColor = tokens.colors.borderDisabled;
+
+    switch (variant) {
+      case 'outlined':
+        return {
+          ...baseStyle,
+          borderWidth: isFocused ? 2 : 1,
+          borderColor,
+        };
+
+      case 'filled':
+        return {
+          ...baseStyle,
+          backgroundColor: tokens.colors.surfaceSecondary,
+          borderWidth: 0,
+          borderBottomWidth: isFocused ? 2 : 1,
+          borderBottomColor: borderColor,
+        };
 
-    // Base line height: 24px per row (approximate)
-    const lineHeight = 24;
-    const padding = 32; // Top and bottom padding
-    return (rows * lineHeight) + padding;
+      case 'flat':
+        return {
+          ...baseStyle,
+          backgroundColor: 'transparent',
+          borderWidth: 0,
+          borderBottomWidth: 1,
+          borderBottomColor: borderColor,
+          borderRadius: 0,
+        };
+
+      default:
+        return baseStyle;
+    }
   };
 
   // Get text color based on state
   const getTextColor = () => {
-    if (state === 'error') return tokens.colors.error;
-    if (state === 'success') return tokens.colors.success;
-    return tokens.colors.onSurface;
+    if (isDisabled) return tokens.colors.textDisabled;
+    if (hasError) return tokens.colors.error;
+    if (hasSuccess) return tokens.colors.success;
+    return tokens.colors.textPrimary;
   };
 
+  const containerStyle: StyleProp<ViewStyle> = [
+    styles.container,
+    getVariantStyle(),
+    {
+      paddingVertical: config.paddingVertical,
+      paddingHorizontal: config.paddingHorizontal,
+      height: getTextAreaHeight(),
+      opacity: isDisabled ? 0.5 : 1,
+    },
+    style,
+  ];
+
+  const textInputStyle: StyleProp<TextStyle> = [
+    styles.input,
+    {
+      fontSize: config.fontSize,
+      lineHeight: config.lineHeight,
+      color: getTextColor(),
+    },
+    inputStyle,
+  ];
+
   return (
-    <View style={style} testID={testID}>
-      <TextInput
-        mode={getPaperMode()}
-        label={label}
-        value={value}
-        onChangeText={onChangeText}
-        placeholder={placeholder}
-        error={hasError}
-        disabled={isDisabled}
-        maxLength={maxLength}
-        autoCapitalize={autoCapitalize}
-        autoCorrect={autoCorrect}
-        multiline={true}
-        numberOfLines={rows}
-        style={[
-          { height: getTextAreaHeight(), textAlignVertical: 'top' },
-          inputStyle,
-        ]}
-        textColor={getTextColor()}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        testID={testID ? `${testID}-input` : undefined}
-      />
+    <View testID={testID}>
+      {label && (
+        <AtomicText
+          type="labelMedium"
+          color={hasError ? 'error' : hasSuccess ? 'success' : 'secondary'}
+          style={styles.label}
+        >
+          {label}
+        </AtomicText>
+      )}
+
+      <View style={containerStyle}>
+        <TextInput
+          value={value}
+          onChangeText={onChangeText}
+          placeholder={placeholder}
+          placeholderTextColor={tokens.colors.textSecondary}
+          maxLength={maxLength}
+          autoCapitalize={autoCapitalize}
+          autoCorrect={autoCorrect}
+          editable={!isDisabled}
+          multiline={true}
+          numberOfLines={rows}
+          textAlignVertical="top"
+          style={textInputStyle}
+          onBlur={() => {
+            setIsFocused(false);
+            onBlur?.();
+          }}
+          onFocus={() => {
+            setIsFocused(true);
+            onFocus?.();
+          }}
+          testID={testID ? `${testID}-input` : undefined}
+        />
+      </View>
 
       {(helperText || showCharacterCount) && (
-        <View style={{
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          marginTop: tokens.spacing.xs,
-        }}>
+        <View style={styles.helperRow}>
           {helperText && (
-            <HelperText
-              type={hasError ? 'error' : 'info'}
-              visible={Boolean(helperText)}
-              style={{ flex: 1 }}
+            <AtomicText
+              type="bodySmall"
+              color={hasError ? 'error' : 'secondary'}
+              style={styles.helperText}
               testID={testID ? `${testID}-helper` : undefined}
             >
               {helperText}
-            </HelperText>
+            </AtomicText>
           )}
           {showCharacterCount && maxLength && (
-            <HelperText
-              type="info"
-              visible={true}
-              style={{ marginLeft: tokens.spacing.xs }}
+            <AtomicText
+              type="bodySmall"
+              color="secondary"
+              style={styles.characterCount}
               testID={testID ? `${testID}-count` : undefined}
             >
               {characterCount}/{maxLength}
-            </HelperText>
+            </AtomicText>
           )}
         </View>
       )}
@@ -195,4 +287,27 @@ export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'flex-start',
+  },
+  input: {
+    flex: 1,
+  },
+  label: {
+    marginBottom: 4,
+  },
+  helperRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 4,
+  },
+  helperText: {
+    flex: 1,
+  },
+  characterCount: {
+    marginLeft: 8,
+  },
+});
+
 export type { AtomicTextAreaProps as TextAreaProps };

package/src/presentation/organisms/FormContainer.tsx

@@ -1,17 +1,16 @@
 /**
  * FormContainer Component
  *
- * A reusable container for forms with Material Design 3 integration,
- * proper keyboard handling, and responsive layout.
+ * A reusable container for forms with proper keyboard handling and responsive layout.
  *
  * Features:
- * - Material Design 3 Surface component for elevation and theme integration
+ * - Pure React Native implementation (no Paper dependency)
  * - Universal keyboard handling (no platform-specific code)
  * - ScrollView with automatic content padding
  * - Safe area insets for bottom tab navigation overlap
  * - Responsive max width for large screens (tablets)
  * - Consistent vertical spacing between form elements
- * - Theme-aware surface colors and elevation
+ * - Theme-aware surface colors
  * - Optimized performance with memoized styles
  *
  * Usage:
@@ -31,13 +30,12 @@
  * - Consistent form layout across all 100+ generated apps
  * - Responsive design for tablets (max 700px) and phones (full width)
  * - Automatic vertical spacing between form elements (no manual marginBottom)
- * - Material Design 3 surface with proper elevation
  * - Reduces boilerplate in form screens
  * - Universal code - no platform checks, works on iOS, Android, Web
  *
  * Technical Details:
  * - Uses ScrollView with contentContainerStyle for keyboard handling
- * - React Native Paper Surface for Material Design 3 integration
+ * - Pure React Native View for surface (lightweight)
  * - Vertical spacing via Children.map() wrapping (universal compatibility)
  * - Safe area insets from react-native-safe-area-context
  * - Responsive values from useResponsive hook
@@ -53,7 +51,6 @@ import {
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import { Surface } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
 import { useResponsive } from '../hooks/useResponsive';
@@ -72,15 +69,15 @@ export interface FormContainerProps {
   showsVerticalScrollIndicator?: boolean;
   /** Optional test ID for E2E testing */
   testID?: string;
-  /** Disable Material Design elevation (default: false) */
-  disableElevation?: boolean;
+  /** Show surface border (default: true) */
+  showBorder?: boolean;
 }
 
 /**
  * FormContainer - Universal form wrapper component
  *
  * Wraps forms with:
- * - Material Design 3 Surface component
+ * - Pure React Native surface
  * - Universal keyboard handling (no platform checks)
  * - ScrollView for content overflow
  * - Safe area insets (bottom tabs, notch)
@@ -93,7 +90,7 @@ export const FormContainer: React.FC<FormContainerProps> = ({
   contentContainerStyle,
   showsVerticalScrollIndicator = false,
   testID,
-  disableElevation = false,
+  showBorder = true,
 }) => {
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
@@ -111,6 +108,9 @@ export const FormContainer: React.FC<FormContainerProps> = ({
         surface: {
           flex: 1,
           backgroundColor: tokens.colors.surface,
+          borderWidth: showBorder ? 1 : 0,
+          borderColor: tokens.colors.border,
+          borderRadius: tokens.borders.radius.md,
         },
         scrollView: {
           flex: 1,
@@ -135,12 +135,15 @@ export const FormContainer: React.FC<FormContainerProps> = ({
     [
       tokens.colors.backgroundPrimary,
       tokens.colors.surface,
+      tokens.colors.border,
+      tokens.borders.radius.md,
       tokens.spacing.lg,
       tokens.spacing.xl,
       formBottomPadding,
       formContentWidth,
       formElementSpacing,
       insets.bottom,
+      showBorder,
     ]
   );
 
@@ -160,10 +163,7 @@ export const FormContainer: React.FC<FormContainerProps> = ({
 
   return (
     <View style={[styles.container, containerStyle]} testID={testID}>
-      <Surface
-        style={styles.surface}
-        elevation={disableElevation ? 0 : 1}
-      >
+      <View style={styles.surface}>
         <ScrollView
           style={styles.scrollView}
           contentContainerStyle={[styles.contentContainer, contentContainerStyle]}
@@ -174,7 +174,7 @@ export const FormContainer: React.FC<FormContainerProps> = ({
         >
           {childrenWithSpacing}
         </ScrollView>
-      </Surface>
+      </View>
     </View>
   );
 };