rn-inputforge 0.1.0

package/src/components/ChatInput/ChatInput.tsx

@@ -0,0 +1,178 @@
+import React, { useMemo, useRef, useState } from 'react';
+import {
+  KeyboardAvoidingView,
+  NativeSyntheticEvent,
+  Platform,
+  Pressable,
+  StyleSheet,
+  TextInput,
+  TextInputContentSizeChangeEventData,
+  View,
+} from 'react-native';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import { FieldFlowIcon } from '../../icons/Icon';
+import type { ChatAttachmentAction, ChatInputProps } from './types';
+
+const ACTION_ICON: Record<ChatAttachmentAction, Parameters<typeof FieldFlowIcon>[0]['name']> = {
+  camera: 'camera',
+  gallery: 'image',
+  document: 'paperclip',
+  location: 'mapPin',
+  voice: 'mic',
+};
+
+/**
+ * A ready-to-drop-in chat composer for messaging screens: expandable input,
+ * a configurable row of attachment buttons (camera / gallery / document /
+ * location / voice, plus your own custom actions), and a send button that
+ * only lights up once there's something to send.
+ */
+export function ChatInput({
+  value,
+  defaultValue,
+  onChangeText,
+  onSend,
+  placeholder = 'Message',
+  attachmentActions = [],
+  onAttachmentPress,
+  customActions = [],
+  disabled,
+  loading,
+  maxLength,
+  minHeight = 40,
+  maxHeight = 140,
+  theme: themeOverride,
+  testID,
+}: ChatInputProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? '');
+  const currentValue = isControlled ? value ?? '' : internalValue;
+  const [height, setHeight] = useState(minHeight);
+  const inputRef = useRef<TextInput>(null);
+
+  const handleChangeText = (next: string) => {
+    if (!isControlled) setInternalValue(next);
+    onChangeText?.(next);
+  };
+
+  const handleContentSizeChange = (e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+    setHeight(Math.min(maxHeight, Math.max(minHeight, e.nativeEvent.contentSize.height)));
+  };
+
+  const handleSend = () => {
+    const trimmed = currentValue.trim();
+    if (!trimmed || disabled || loading) return;
+    onSend(trimmed);
+    if (!isControlled) setInternalValue('');
+    inputRef.current?.clear();
+  };
+
+  const canSend = currentValue.trim().length > 0 && !disabled && !loading;
+
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  return (
+    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} testID={testID}>
+      <View style={styles.container}>
+        {attachmentActions.length > 0 || customActions.length > 0 ? (
+          <View style={styles.toolbar}>
+            {attachmentActions.map(action => (
+              <Pressable
+                key={action}
+                onPress={() => onAttachmentPress?.(action)}
+                style={styles.toolbarButton}
+                hitSlop={8}
+                disabled={disabled}
+              >
+                <FieldFlowIcon name={ACTION_ICON[action]} color={theme.colors.icon} size={20} />
+              </Pressable>
+            ))}
+            {customActions.map(action => (
+              <Pressable key={action.id} onPress={action.onPress} style={styles.toolbarButton} hitSlop={8}>
+                {typeof action.icon === 'string' ? (
+                  <FieldFlowIcon name={action.icon as any} color={theme.colors.icon} size={20} />
+                ) : (
+                  action.icon
+                )}
+              </Pressable>
+            ))}
+          </View>
+        ) : null}
+
+        <View style={styles.inputRow}>
+          <TextInput
+            ref={inputRef}
+            value={currentValue}
+            onChangeText={handleChangeText}
+            onContentSizeChange={handleContentSizeChange}
+            placeholder={placeholder}
+            placeholderTextColor={theme.colors.placeholder}
+            multiline
+            maxLength={maxLength}
+            editable={!disabled && !loading}
+            style={[styles.input, { height }]}
+          />
+          <Pressable
+            onPress={handleSend}
+            disabled={!canSend}
+            style={[styles.sendButton, { opacity: canSend ? 1 : 0.4 }]}
+            hitSlop={8}
+          >
+            <FieldFlowIcon name={loading ? 'spinner' : 'send'} color="#FFFFFF" size={16} />
+          </Pressable>
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
+
+function createStyles(theme: ReturnType<typeof useFieldFlowTheme>) {
+  return StyleSheet.create({
+    container: {
+      backgroundColor: theme.colors.background,
+      borderTopWidth: theme.spacing.borderWidth,
+      borderTopColor: theme.colors.border,
+      paddingHorizontal: theme.spacing.paddingHorizontal,
+      paddingVertical: theme.spacing.gap,
+    },
+    toolbar: {
+      flexDirection: 'row',
+      marginBottom: theme.spacing.gap,
+    },
+    toolbarButton: {
+      marginRight: theme.spacing.gap * 2,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    inputRow: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+    },
+    input: {
+      flex: 1,
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.text,
+      backgroundColor: theme.colors.backgroundDisabled,
+      borderRadius: theme.spacing.borderRadius * 1.6,
+      paddingHorizontal: theme.spacing.paddingHorizontal,
+      paddingVertical: theme.spacing.paddingVertical * 0.7,
+      textAlignVertical: 'top',
+    },
+    sendButton: {
+      width: 34,
+      height: 34,
+      borderRadius: 17,
+      backgroundColor: theme.colors.borderFocused,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginLeft: theme.spacing.gap,
+    },
+  });
+}

package/src/components/ChatInput/index.ts

@@ -0,0 +1,2 @@
+export { ChatInput } from './ChatInput';
+export type { ChatInputProps, ChatAttachmentAction, CustomChatAction } from './types';

package/src/components/ChatInput/types.ts

@@ -0,0 +1,35 @@
+import type React from 'react';
+import type { DeepPartial, FieldFlowTheme } from '../../types';
+import type { FieldFlowIconName } from '../../icons';
+
+export type ChatAttachmentAction = 'camera' | 'gallery' | 'document' | 'location' | 'voice';
+
+export interface CustomChatAction {
+  id: string;
+  icon: FieldFlowIconName | React.ReactNode;
+  label?: string;
+  onPress: () => void;
+}
+
+export interface ChatInputProps {
+  value?: string;
+  defaultValue?: string;
+  onChangeText?: (value: string) => void;
+  onSend: (message: string) => void;
+  placeholder?: string;
+
+  /** Which built-in attachment buttons to show in the toolbar, in order. */
+  attachmentActions?: ChatAttachmentAction[];
+  onAttachmentPress?: (action: ChatAttachmentAction) => void;
+  /** Extra app-specific buttons appended after the built-in ones. */
+  customActions?: CustomChatAction[];
+
+  disabled?: boolean;
+  loading?: boolean;
+  maxLength?: number;
+  minHeight?: number;
+  maxHeight?: number;
+
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}

package/src/components/DescriptionField/DescriptionField.tsx

@@ -0,0 +1,39 @@
+import React, { forwardRef, useState } from 'react';
+import type { NativeSyntheticEvent, TextInput, TextInputContentSizeChangeEventData } from 'react-native';
+import { FieldFlowInput } from '../FieldFlowInput/FieldFlowInput';
+import type { FieldFlowInputProps } from '../FieldFlowInput/types';
+
+export interface DescriptionFieldProps extends Omit<FieldFlowInputProps, 'type'> {
+  /** Minimum height in px before the field starts growing. Default 80. */
+  minHeight?: number;
+  /** Maximum height in px the field will grow to before scrolling internally. Default 200. */
+  maxHeight?: number;
+}
+
+/**
+ * A dedicated multi-line field for comments, notes, descriptions, and feedback.
+ * Grows automatically as the user types, up to `maxHeight`, and supports the
+ * same character-limit / validation / theming props as FieldFlowInput.
+ */
+export const DescriptionField = forwardRef<TextInput, DescriptionFieldProps>(function DescriptionField(
+  { minHeight = 80, maxHeight = 200, inputStyle, showCharacterCount = true, ...rest },
+  ref,
+) {
+  const [height, setHeight] = useState(minHeight);
+
+  const handleContentSizeChange = (e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+    const next = Math.min(maxHeight, Math.max(minHeight, e.nativeEvent.contentSize.height));
+    setHeight(next);
+  };
+
+  return (
+    <FieldFlowInput
+      ref={ref}
+      type="description"
+      showCharacterCount={showCharacterCount}
+      inputStyle={{ height, ...inputStyle }}
+      onContentSizeChange={handleContentSizeChange}
+      {...rest}
+    />
+  );
+});

package/src/components/DescriptionField/index.ts

@@ -0,0 +1,2 @@
+export { DescriptionField } from './DescriptionField';
+export type { DescriptionFieldProps } from './DescriptionField';

package/src/components/FieldFlowInput/FieldFlowInput.tsx

@@ -0,0 +1,240 @@
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Pressable, Text, TextInput, View } from 'react-native';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import { useFieldState } from '../../hooks/useFieldState';
+import { resolveFieldConfig, implicitRulesForType } from '../../utils/keyboardTypes';
+import { sanitizeNumeric, sanitizePhone, truncate } from '../../utils/formatters';
+import { runRules } from '../../validation/validators';
+import { FieldFlowIcon } from '../../icons/Icon';
+import { createStyles, iconColorFor } from './styles';
+import type { FieldFlowInputProps } from './types';
+
+function renderIconNode(
+  icon: FieldFlowInputProps['leftIcon'],
+  color: string,
+): React.ReactNode {
+  if (!icon) return null;
+  if (typeof icon === 'string') {
+    return <FieldFlowIcon name={icon as any} color={color} size={18} />;
+  }
+  return icon;
+}
+
+export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(function FieldFlowInput(
+  {
+    type = 'text',
+    label,
+    helperText,
+    errorText,
+    hasError,
+    successText,
+    isSuccess,
+    loading,
+    disabled,
+    readOnly,
+    required,
+    value,
+    defaultValue,
+    onChangeText,
+    onFocus,
+    onBlur,
+    rules,
+    validateOnChange,
+    onValidate,
+    leftIcon,
+    rightIcon,
+    onLeftIconPress,
+    onRightIconPress,
+    clearable,
+    maxLength,
+    showCharacterCount,
+    onSubmitEditing,
+    containerStyle,
+    inputStyle,
+    labelStyle,
+    helperStyle,
+    theme: themeOverride,
+    testID,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+
+  const innerRef = useRef<TextInput>(null);
+  useImperativeHandle(forwardedRef, () => innerRef.current as TextInput);
+
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? '');
+  const currentValue = isControlled ? value ?? '' : internalValue;
+
+  const [isFocused, setIsFocused] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [localError, setLocalError] = useState<string | undefined>(undefined);
+
+  const fieldConfig = useMemo(() => resolveFieldConfig(type), [type]);
+  const effectiveRules = useMemo(
+    () => ({ ...implicitRulesForType(type), ...(required ? { required: true } : {}), ...rules }),
+    [type, required, rules],
+  );
+
+  const resolvedError = errorText ?? localError;
+  const state = useFieldState({
+    isFocused,
+    hasError: Boolean(hasError || resolvedError),
+    isSuccess,
+    disabled,
+    readOnly,
+    loading,
+  });
+
+  const styles = useMemo(
+    () => createStyles(theme, state, fieldConfig.multiline && type !== 'chat'),
+    [theme, state, fieldConfig.multiline, type],
+  );
+  const iconColor = iconColorFor(theme, state);
+
+  const runValidation = useCallback(
+    (nextValue: string) => {
+      const result = runRules(nextValue, effectiveRules);
+      setLocalError(result.valid ? undefined : result.message);
+      onValidate?.(result);
+      return result.valid;
+    },
+    [effectiveRules, onValidate],
+  );
+
+  const handleChangeText = useCallback(
+    (raw: string) => {
+      let next = raw;
+      if (type === 'number') next = sanitizeNumeric(next, false);
+      if (type === 'decimal') next = sanitizeNumeric(next, true);
+      if (type === 'phone') next = sanitizePhone(next);
+      next = truncate(next, maxLength);
+
+      if (!isControlled) setInternalValue(next);
+      onChangeText?.(next);
+      if (validateOnChange) runValidation(next);
+    },
+    [type, maxLength, isControlled, onChangeText, validateOnChange, runValidation],
+  );
+
+  const handleFocus = useCallback(() => {
+    setIsFocused(true);
+    onFocus?.();
+  }, [onFocus]);
+
+  const handleBlur = useCallback(() => {
+    setIsFocused(false);
+    runValidation(currentValue);
+    onBlur?.();
+  }, [runValidation, currentValue, onBlur]);
+
+  const handleClear = useCallback(() => {
+    if (!isControlled) setInternalValue('');
+    onChangeText?.('');
+    innerRef.current?.focus();
+  }, [isControlled, onChangeText]);
+
+  const isClearable = clearable ?? type === 'search';
+  const showClearButton = isClearable && currentValue.length > 0 && !disabled && !readOnly && !loading;
+
+  const resolvedLeftIcon = leftIcon ?? (type === 'search' ? 'search' : undefined);
+  let resolvedRightIcon = rightIcon;
+  let rightIconPress = onRightIconPress;
+
+  if (!resolvedRightIcon) {
+    if (loading) {
+      resolvedRightIcon = 'spinner';
+    } else if (type === 'password') {
+      resolvedRightIcon = showPassword ? 'eyeOff' : 'eye';
+      rightIconPress = () => setShowPassword(v => !v);
+    } else if (showClearButton) {
+      resolvedRightIcon = 'clear';
+      rightIconPress = handleClear;
+    } else if (state === 'error') {
+      resolvedRightIcon = 'alert';
+    } else if (state === 'success') {
+      resolvedRightIcon = 'check';
+    }
+  }
+
+  return (
+    <View style={[styles.wrapper, containerStyle]} testID={testID}>
+      {label ? (
+        <Text style={[styles.label, labelStyle]}>
+          {label}
+          {required ? ' *' : ''}
+        </Text>
+      ) : null}
+
+      <View style={styles.inputContainer}>
+        {resolvedLeftIcon ? (
+          <Pressable
+            onPress={onLeftIconPress}
+            disabled={!onLeftIconPress}
+            style={[styles.iconSlot, styles.iconSlotLeft]}
+            hitSlop={8}
+          >
+            {renderIconNode(resolvedLeftIcon, iconColor)}
+          </Pressable>
+        ) : null}
+
+        <TextInput
+          ref={innerRef}
+          value={currentValue}
+          onChangeText={handleChangeText}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onSubmitEditing={onSubmitEditing}
+          editable={!disabled && !readOnly && !loading}
+          placeholderTextColor={theme.colors.placeholder}
+          keyboardType={fieldConfig.keyboardType}
+          secureTextEntry={fieldConfig.secureTextEntry && !showPassword}
+          autoCapitalize={fieldConfig.autoCapitalize}
+          autoCorrect={fieldConfig.autoCorrect}
+          multiline={fieldConfig.multiline && type !== 'chat'}
+          maxLength={maxLength}
+          returnKeyType={fieldConfig.multiline ? 'default' : 'done'}
+          style={[styles.input, inputStyle]}
+          {...rest}
+        />
+
+        {resolvedRightIcon ? (
+          <Pressable
+            onPress={rightIconPress}
+            disabled={!rightIconPress}
+            style={[styles.iconSlot, styles.iconSlotRight]}
+            hitSlop={8}
+          >
+            {renderIconNode(resolvedRightIcon, iconColor)}
+          </Pressable>
+        ) : null}
+      </View>
+
+      {(helperText || resolvedError || successText || (showCharacterCount && maxLength)) && (
+        <View style={styles.footerRow}>
+          <View style={{ flex: 1 }}>
+            {resolvedError ? (
+              <Text style={styles.errorText}>{resolvedError}</Text>
+            ) : successText ? (
+              <Text style={styles.successText}>{successText}</Text>
+            ) : helperText ? (
+              <Text style={styles.helperText}>{helperText}</Text>
+            ) : null}
+          </View>
+          {showCharacterCount && maxLength ? (
+            <Text style={styles.charCount}>
+              {currentValue.length}/{maxLength}
+            </Text>
+          ) : null}
+        </View>
+      )}
+    </View>
+  );
+});

package/src/components/FieldFlowInput/index.ts

@@ -0,0 +1,2 @@
+export { FieldFlowInput } from './FieldFlowInput';
+export type { FieldFlowInputProps } from './types';

package/src/components/FieldFlowInput/styles.ts

@@ -0,0 +1,94 @@
+import { StyleSheet } from 'react-native';
+import type { FieldFlowState, FieldFlowTheme } from '../../types';
+
+export function borderColorFor(theme: FieldFlowTheme, state: FieldFlowState): string {
+  switch (state) {
+    case 'focused':
+      return theme.colors.borderFocused;
+    case 'error':
+      return theme.colors.borderError;
+    case 'success':
+      return theme.colors.borderSuccess;
+    default:
+      return theme.colors.border;
+  }
+}
+
+export function labelColorFor(theme: FieldFlowTheme, state: FieldFlowState): string {
+  if (state === 'error') return theme.colors.error;
+  if (state === 'focused') return theme.colors.labelFocused;
+  return theme.colors.label;
+}
+
+export function iconColorFor(theme: FieldFlowTheme, state: FieldFlowState): string {
+  return state === 'focused' ? theme.colors.iconFocused : theme.colors.icon;
+}
+
+export function createStyles(theme: FieldFlowTheme, state: FieldFlowState, multiline: boolean) {
+  return StyleSheet.create({
+    wrapper: {
+      marginBottom: theme.spacing.gap * 2,
+    },
+    label: {
+      fontSize: theme.typography.labelFontSize,
+      marginBottom: theme.spacing.gap / 1.5,
+      color: labelColorFor(theme, state),
+      fontWeight: '500',
+    },
+    inputContainer: {
+      flexDirection: 'row',
+      alignItems: multiline ? 'flex-start' : 'center',
+      backgroundColor: state === 'disabled' ? theme.colors.backgroundDisabled : theme.colors.background,
+      borderRadius: theme.spacing.borderRadius,
+      borderWidth: state === 'focused' ? theme.spacing.borderWidthFocused : theme.spacing.borderWidth,
+      borderColor: borderColorFor(theme, state),
+      paddingHorizontal: theme.spacing.paddingHorizontal,
+      paddingVertical: multiline ? theme.spacing.paddingVertical : 0,
+      minHeight: multiline ? undefined : theme.spacing.paddingVertical * 2 + theme.typography.fontSize + 6,
+    },
+    input: {
+      flex: 1,
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.text,
+      paddingVertical: multiline ? 0 : theme.spacing.paddingVertical,
+      textAlignVertical: multiline ? 'top' : 'center',
+      minHeight: multiline ? 80 : undefined,
+    },
+    iconSlot: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: multiline ? theme.spacing.paddingVertical : 0,
+    },
+    iconSlotLeft: {
+      marginRight: theme.spacing.gap,
+    },
+    iconSlotRight: {
+      marginLeft: theme.spacing.gap,
+    },
+    footerRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginTop: theme.spacing.gap / 1.5,
+    },
+    helperText: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.label,
+      flexShrink: 1,
+    },
+    errorText: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.error,
+      flexShrink: 1,
+    },
+    successText: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.success,
+      flexShrink: 1,
+    },
+    charCount: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.placeholder,
+      marginLeft: theme.spacing.gap,
+    },
+  });
+}

package/src/components/FieldFlowInput/types.ts

@@ -0,0 +1,55 @@
+import type React from 'react';
+import type { TextInputProps, ViewStyle, TextStyle } from 'react-native';
+import type { FieldFlowFieldType, FieldFlowRules, DeepPartial, FieldFlowTheme } from '../../types';
+import type { FieldFlowIconName } from '../../icons';
+
+export interface FieldFlowInputProps
+  extends Omit<TextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'onSubmitEditing'> {
+  /** Determines keyboard, secure entry, validation defaults, and default icon behavior. */
+  type?: FieldFlowFieldType;
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  /** Set true to force the error visual state even without `errorText` (e.g. from a form hook). */
+  hasError?: boolean;
+  successText?: string;
+  isSuccess?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+
+  value?: string;
+  defaultValue?: string;
+  onChangeText?: (value: string) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+
+  /** Validation rules; if omitted, sensible defaults are inferred from `type` (e.g. email format). */
+  rules?: FieldFlowRules;
+  /** Runs validation on every keystroke instead of just on blur. */
+  validateOnChange?: boolean;
+  /** Called with the validation result whenever a validation pass runs. */
+  onValidate?: (result: { valid: boolean; message?: string }) => void;
+
+  leftIcon?: FieldFlowIconName | React.ReactNode;
+  rightIcon?: FieldFlowIconName | React.ReactNode;
+  onLeftIconPress?: () => void;
+  onRightIconPress?: () => void;
+  /** Shows an "x" clear button when there's text (defaults to true for `search`, false otherwise). */
+  clearable?: boolean;
+
+  maxLength?: number;
+  showCharacterCount?: boolean;
+
+  /** Return-key handling used by useKeyboardManager; if provided, overrides default onSubmitEditing wiring. */
+  onSubmitEditing?: () => void;
+
+  containerStyle?: ViewStyle;
+  inputStyle?: TextStyle;
+  labelStyle?: TextStyle;
+  helperStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+
+  testID?: string;
+}