rn-inputforge 0.1.0

package/src/components/KeyboardAwareFormWrapper/KeyboardAwareFormWrapper.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, ViewStyle } from 'react-native';
+import type { UseKeyboardManagerResult } from '../../hooks/useKeyboardManager';
+
+export interface KeyboardAwareFormWrapperProps {
+  keyboardManager: Pick<UseKeyboardManagerResult, 'scrollViewRef'>;
+  children: React.ReactNode;
+  contentContainerStyle?: ViewStyle;
+  style?: ViewStyle;
+}
+
+/**
+ * Wrap your form fields in this instead of a plain ScrollView. It automatically
+ * keeps the focused field visible above the keyboard and animates smoothly on
+ * both iOS and Android; pass it the same `keyboardManager` you got from
+ * `useKeyboardManager()`.
+ */
+export function KeyboardAwareFormWrapper({
+  keyboardManager,
+  children,
+  contentContainerStyle,
+  style,
+}: KeyboardAwareFormWrapperProps) {
+  return (
+    <KeyboardAvoidingView
+      style={[styles.flex, style]}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 0}
+    >
+      <ScrollView
+        ref={keyboardManager.scrollViewRef}
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={[styles.content, contentContainerStyle]}
+        showsVerticalScrollIndicator={false}
+      >
+        {children}
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  content: { flexGrow: 1 },
+});

package/src/components/KeyboardAwareFormWrapper/index.ts

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

package/src/hooks/index.ts

@@ -0,0 +1,12 @@
+export { useKeyboardManager } from './useKeyboardManager';
+export type { UseKeyboardManagerOptions, UseKeyboardManagerResult, KeyboardManagerField } from './useKeyboardManager';
+
+export { useFieldFlowForm } from './useFieldFlowForm';
+export type {
+  UseFieldFlowFormOptions,
+  UseFieldFlowFormResult,
+  FieldFlowFormRules,
+} from './useFieldFlowForm';
+
+export { useFieldState } from './useFieldState';
+export type { UseFieldStateOptions } from './useFieldState';

package/src/hooks/useFieldFlowForm.ts

@@ -0,0 +1,133 @@
+import { useCallback, useMemo, useState } from 'react';
+import type { FieldFlowRules } from '../types';
+import { runRules } from '../validation/validators';
+
+export type FieldFlowFormRules<T extends Record<string, string>> = {
+  [K in keyof T]?: FieldFlowRules;
+};
+
+export interface UseFieldFlowFormOptions<T extends Record<string, string>> {
+  initialValues: T;
+  rules?: FieldFlowFormRules<T>;
+  /** Called only when every field passes validation. */
+  onSubmit?: (values: T) => void | Promise<void>;
+}
+
+export interface UseFieldFlowFormResult<T extends Record<string, string>> {
+  values: T;
+  errors: Partial<Record<keyof T, string>>;
+  touched: Partial<Record<keyof T, boolean>>;
+  isSubmitting: boolean;
+  isValid: boolean;
+  setValue: (field: keyof T, value: string) => void;
+  handleChange: (field: keyof T) => (value: string) => void;
+  handleBlur: (field: keyof T) => () => void;
+  validateField: (field: keyof T) => boolean;
+  validateAll: () => boolean;
+  submit: () => Promise<void>;
+  reset: () => void;
+}
+
+/**
+ * Drop-in form state manager for a set of FieldFlow inputs. Handles values,
+ * per-field + whole-form validation (via the same `FieldFlowRules` used by
+ * the input components), touched-state, and submission.
+ */
+export function useFieldFlowForm<T extends Record<string, string>>({
+  initialValues,
+  rules,
+  onSubmit,
+}: UseFieldFlowFormOptions<T>): UseFieldFlowFormResult<T> {
+  const [values, setValues] = useState<T>(initialValues);
+  const [errors, setErrors] = useState<Partial<Record<keyof T, string>>>({});
+  const [touched, setTouched] = useState<Partial<Record<keyof T, boolean>>>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const validateField = useCallback(
+    (field: keyof T): boolean => {
+      const fieldRules = rules?.[field];
+      const result = runRules(values[field] ?? '', fieldRules);
+      setErrors(prev => ({ ...prev, [field]: result.valid ? undefined : result.message }));
+      return result.valid;
+    },
+    [rules, values],
+  );
+
+  const validateAll = useCallback((): boolean => {
+    if (!rules) return true;
+    let allValid = true;
+    const nextErrors: Partial<Record<keyof T, string>> = {};
+    for (const key of Object.keys(rules) as (keyof T)[]) {
+      const result = runRules(values[key] ?? '', rules[key]);
+      if (!result.valid) {
+        allValid = false;
+        nextErrors[key] = result.message;
+      }
+    }
+    setErrors(nextErrors);
+    setTouched(prev => {
+      const next = { ...prev };
+      for (const key of Object.keys(rules)) next[key as keyof T] = true;
+      return next;
+    });
+    return allValid;
+  }, [rules, values]);
+
+  const setValue = useCallback((field: keyof T, value: string) => {
+    setValues(prev => ({ ...prev, [field]: value }));
+  }, []);
+
+  const handleChange = useCallback(
+    (field: keyof T) => (value: string) => {
+      setValue(field, value);
+      if (touched[field]) {
+        // live-validate once the user has already blurred this field once
+        const result = runRules(value, rules?.[field]);
+        setErrors(prev => ({ ...prev, [field]: result.valid ? undefined : result.message }));
+      }
+    },
+    [rules, setValue, touched],
+  );
+
+  const handleBlur = useCallback(
+    (field: keyof T) => () => {
+      setTouched(prev => ({ ...prev, [field]: true }));
+      validateField(field);
+    },
+    [validateField],
+  );
+
+  const submit = useCallback(async () => {
+    const valid = validateAll();
+    if (!valid) return;
+    setIsSubmitting(true);
+    try {
+      await onSubmit?.(values);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [onSubmit, validateAll, values]);
+
+  const reset = useCallback(() => {
+    setValues(initialValues);
+    setErrors({});
+    setTouched({});
+  }, [initialValues]);
+
+  const isValid = useMemo(() => Object.values(errors).every(e => !e), [errors]);
+
+  return {
+    values,
+    errors,
+    touched,
+    isSubmitting,
+    isValid,
+    setValue,
+    handleChange,
+    handleBlur,
+    validateField,
+    validateAll,
+    submit,
+    reset,
+  };
+}

package/src/hooks/useFieldState.ts

@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+import type { FieldFlowState } from '../types';
+
+export interface UseFieldStateOptions {
+  isFocused: boolean;
+  hasError: boolean;
+  isSuccess?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  loading?: boolean;
+}
+
+/** Resolves the many boolean flags a field can have into one canonical visual state. */
+export function useFieldState({
+  isFocused,
+  hasError,
+  isSuccess,
+  disabled,
+  readOnly,
+  loading,
+}: UseFieldStateOptions): FieldFlowState {
+  return useMemo<FieldFlowState>(() => {
+    if (disabled) return 'disabled';
+    if (readOnly) return 'readonly';
+    if (loading) return 'loading';
+    if (hasError) return 'error';
+    if (isSuccess) return 'success';
+    if (isFocused) return 'focused';
+    return 'idle';
+  }, [disabled, readOnly, loading, hasError, isSuccess, isFocused]);
+}

package/src/hooks/useKeyboardManager.ts

@@ -0,0 +1,105 @@
+import { useCallback, useRef } from 'react';
+import type { ScrollView, TextInput } from 'react-native';
+
+export interface KeyboardManagerField {
+  ref: React.RefObject<TextInput | null>;
+  /** y-position of this field within the ScrollView, used for auto-scroll. Optional. */
+  offsetY?: number;
+}
+
+export interface UseKeyboardManagerResult {
+  /** Attach to a field's `ref` and pass the returned `onSubmitEditing`/`returnKeyType` down. */
+  registerField: (id: string, ref: React.RefObject<TextInput | null>, offsetY?: number) => void;
+  unregisterField: (id: string) => void;
+  /** Call from a field's onSubmitEditing to move focus to the next registered field, or submit if it's last. */
+  focusNext: (id: string) => void;
+  focusField: (id: string) => void;
+  /** Attach to the surrounding ScrollView so FieldFlow can scroll the active field into view. */
+  scrollViewRef: React.RefObject<ScrollView | null>;
+  /** returnKeyType to use for a field given its position ("next" for all but the last, "done" for the last). */
+  getReturnKeyType: (id: string) => 'next' | 'done';
+  onSubmit: () => void;
+}
+
+export interface UseKeyboardManagerOptions {
+  /** Ordered list of field ids, e.g. ['name', 'email', 'password']. Determines Next/Done order. */
+  order: string[];
+  /** Called when "Done" is pressed on the last field, or focusNext is called past the end. */
+  onSubmit?: () => void;
+  /** Extra offset (px) added above the target field when auto-scrolling, e.g. for a sticky header. */
+  scrollOffset?: number;
+}
+
+/**
+ * Coordinates focus across many inputs in a form: pressing "Next" on the keyboard
+ * moves to the next field automatically, "Done" on the last field fires onSubmit,
+ * and the surrounding ScrollView auto-scrolls so the focused field stays visible
+ * above the keyboard.
+ */
+export function useKeyboardManager({
+  order,
+  onSubmit,
+  scrollOffset = 24,
+}: UseKeyboardManagerOptions): UseKeyboardManagerResult {
+  const fields = useRef<Map<string, KeyboardManagerField>>(new Map());
+  const scrollViewRef = useRef<ScrollView>(null);
+
+  const registerField = useCallback((id: string, ref: React.RefObject<TextInput | null>, offsetY?: number) => {
+    fields.current.set(id, { ref, offsetY });
+  }, []);
+
+  const unregisterField = useCallback((id: string) => {
+    fields.current.delete(id);
+  }, []);
+
+  const scrollToField = useCallback(
+    (id: string) => {
+      const field = fields.current.get(id);
+      if (field?.offsetY !== undefined && scrollViewRef.current) {
+        scrollViewRef.current.scrollTo({ y: Math.max(0, field.offsetY - scrollOffset), animated: true });
+      }
+    },
+    [scrollOffset],
+  );
+
+  const focusField = useCallback(
+    (id: string) => {
+      const field = fields.current.get(id);
+      field?.ref.current?.focus();
+      scrollToField(id);
+    },
+    [scrollToField],
+  );
+
+  const focusNext = useCallback(
+    (id: string) => {
+      const currentIndex = order.indexOf(id);
+      const nextId = order[currentIndex + 1];
+      if (nextId) {
+        focusField(nextId);
+      } else {
+        fields.current.get(id)?.ref.current?.blur();
+        onSubmit?.();
+      }
+    },
+    [order, focusField, onSubmit],
+  );
+
+  const getReturnKeyType = useCallback(
+    (id: string): 'next' | 'done' => {
+      const isLast = order.indexOf(id) === order.length - 1;
+      return isLast ? 'done' : 'next';
+    },
+    [order],
+  );
+
+  return {
+    registerField,
+    unregisterField,
+    focusNext,
+    focusField,
+    scrollViewRef,
+    getReturnKeyType,
+    onSubmit: () => onSubmit?.(),
+  };
+}

package/src/icons/Icon.tsx

@@ -0,0 +1,338 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, View, ViewStyle } from 'react-native';
+
+export type FieldFlowIconName =
+  | 'eye'
+  | 'eyeOff'
+  | 'clear'
+  | 'check'
+  | 'alert'
+  | 'search'
+  | 'send'
+  | 'camera'
+  | 'image'
+  | 'paperclip'
+  | 'mic'
+  | 'mapPin'
+  | 'spinner';
+
+export interface FieldFlowIconProps {
+  name: FieldFlowIconName;
+  size?: number;
+  color?: string;
+  style?: ViewStyle;
+}
+
+/**
+ * A minimal, dependency-free icon set built out of basic Views. Ships so consumers
+ * don't need to install react-native-svg / vector-icons just to use FieldFlow.
+ * Every icon accepts `size` and `color`, and you can always render your own
+ * icon via the `leftIcon` / `rightIcon` props on any FieldFlow component instead.
+ */
+export function FieldFlowIcon({ name, size = 18, color = '#6B7280', style }: FieldFlowIconProps) {
+  if (name === 'spinner') {
+    return <SpinnerIcon size={size} color={color} style={style} />;
+  }
+
+  const stroke = Math.max(1.5, size * 0.09);
+  const box: ViewStyle = { width: size, height: size, alignItems: 'center', justifyContent: 'center' };
+
+  switch (name) {
+    case 'eye':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size,
+              height: size * 0.55,
+              borderRadius: size * 0.55,
+              borderWidth: stroke,
+              borderColor: color,
+            }}
+          />
+          <View
+            style={{
+              position: 'absolute',
+              width: size * 0.3,
+              height: size * 0.3,
+              borderRadius: size * 0.15,
+              backgroundColor: color,
+            }}
+          />
+        </View>
+      );
+    case 'eyeOff':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size,
+              height: size * 0.55,
+              borderRadius: size * 0.55,
+              borderWidth: stroke,
+              borderColor: color,
+              opacity: 0.6,
+            }}
+          />
+          <View
+            style={{
+              position: 'absolute',
+              width: size * 1.15,
+              height: stroke,
+              backgroundColor: color,
+              transform: [{ rotate: '45deg' }],
+            }}
+          />
+        </View>
+      );
+    case 'clear':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size,
+              height: size,
+              borderRadius: size / 2,
+              backgroundColor: color,
+              opacity: 0.15,
+              position: 'absolute',
+            }}
+          />
+          <View style={{ width: size * 0.5, height: stroke, backgroundColor: color, transform: [{ rotate: '45deg' }], position: 'absolute' }} />
+          <View style={{ width: size * 0.5, height: stroke, backgroundColor: color, transform: [{ rotate: '-45deg' }], position: 'absolute' }} />
+        </View>
+      );
+    case 'check':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size * 0.55,
+              height: stroke,
+              backgroundColor: color,
+              transform: [{ rotate: '45deg' }, { translateY: size * 0.12 }, { translateX: -size * 0.08 }],
+              position: 'absolute',
+            }}
+          />
+          <View
+            style={{
+              width: size * 0.3,
+              height: stroke,
+              backgroundColor: color,
+              transform: [{ rotate: '-45deg' }, { translateY: size * 0.05 }, { translateX: -size * 0.22 }],
+              position: 'absolute',
+            }}
+          />
+        </View>
+      );
+    case 'alert':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size,
+              height: size,
+              borderRadius: size / 2,
+              borderWidth: stroke,
+              borderColor: color,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <View style={{ width: stroke, height: size * 0.32, backgroundColor: color, borderRadius: stroke, marginBottom: size * 0.08 }} />
+            <View style={{ width: stroke, height: stroke, borderRadius: stroke / 2, backgroundColor: color }} />
+          </View>
+        </View>
+      );
+    case 'search':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size * 0.7,
+              height: size * 0.7,
+              borderRadius: size * 0.35,
+              borderWidth: stroke,
+              borderColor: color,
+              position: 'absolute',
+              top: 0,
+              left: 0,
+            }}
+          />
+          <View
+            style={{
+              width: size * 0.4,
+              height: stroke,
+              backgroundColor: color,
+              position: 'absolute',
+              bottom: 0,
+              right: 0,
+              borderRadius: stroke,
+              transform: [{ rotate: '45deg' }],
+            }}
+          />
+        </View>
+      );
+    case 'send':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: 0,
+              height: 0,
+              borderTopWidth: size * 0.5,
+              borderBottomWidth: size * 0.5,
+              borderLeftWidth: size * 0.7,
+              borderTopColor: 'transparent',
+              borderBottomColor: 'transparent',
+              borderLeftColor: color,
+              transform: [{ rotate: '0deg' }],
+            }}
+          />
+        </View>
+      );
+    case 'camera':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size,
+              height: size * 0.75,
+              borderRadius: size * 0.15,
+              borderWidth: stroke,
+              borderColor: color,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <View style={{ width: size * 0.36, height: size * 0.36, borderRadius: size * 0.18, borderWidth: stroke, borderColor: color }} />
+          </View>
+        </View>
+      );
+    case 'image':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size,
+              height: size * 0.8,
+              borderRadius: size * 0.12,
+              borderWidth: stroke,
+              borderColor: color,
+              overflow: 'hidden',
+            }}
+          >
+            <View
+              style={{
+                position: 'absolute',
+                bottom: 0,
+                left: size * 0.1,
+                width: size * 0.3,
+                height: size * 0.35,
+                backgroundColor: color,
+                opacity: 0.8,
+              }}
+            />
+            <View
+              style={{
+                position: 'absolute',
+                top: size * 0.12,
+                right: size * 0.15,
+                width: size * 0.16,
+                height: size * 0.16,
+                borderRadius: size * 0.08,
+                backgroundColor: color,
+              }}
+            />
+          </View>
+        </View>
+      );
+    case 'paperclip':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size * 0.36,
+              height: size * 0.9,
+              borderRadius: size * 0.18,
+              borderWidth: stroke,
+              borderColor: color,
+              transform: [{ rotate: '20deg' }],
+            }}
+          />
+        </View>
+      );
+    case 'mic':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size * 0.4,
+              height: size * 0.65,
+              borderRadius: size * 0.2,
+              borderWidth: stroke,
+              borderColor: color,
+              marginBottom: size * 0.05,
+            }}
+          />
+          <View style={{ width: size * 0.6, height: stroke, backgroundColor: color, borderRadius: stroke }} />
+        </View>
+      );
+    case 'mapPin':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size * 0.7,
+              height: size * 0.7,
+              borderRadius: size * 0.35,
+              borderWidth: stroke,
+              borderColor: color,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <View style={{ width: size * 0.2, height: size * 0.2, borderRadius: size * 0.1, backgroundColor: color }} />
+          </View>
+        </View>
+      );
+    default:
+      return <View style={[box, style]} />;
+  }
+}
+
+function SpinnerIcon({ size, color, style }: { size: number; color: string; style?: ViewStyle }) {
+  const spin = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.timing(spin, {
+        toValue: 1,
+        duration: 800,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [spin]);
+
+  const rotate = spin.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] });
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderWidth: Math.max(1.5, size * 0.12),
+          borderColor: color,
+          borderTopColor: 'transparent',
+          transform: [{ rotate }],
+        },
+        style,
+      ]}
+    />
+  );
+}

package/src/icons/index.ts

@@ -0,0 +1,2 @@
+export { FieldFlowIcon } from './Icon';
+export type { FieldFlowIconName, FieldFlowIconProps } from './Icon';