rn-inputforge 0.1.0

package/src/index.ts

@@ -0,0 +1,63 @@
+// Components
+export { FieldFlowInput } from './components/FieldFlowInput';
+export type { FieldFlowInputProps } from './components/FieldFlowInput';
+
+export { DescriptionField } from './components/DescriptionField';
+export type { DescriptionFieldProps } from './components/DescriptionField';
+
+export { ChatInput } from './components/ChatInput';
+export type { ChatInputProps, ChatAttachmentAction, CustomChatAction } from './components/ChatInput';
+
+export { KeyboardAwareFormWrapper } from './components/KeyboardAwareFormWrapper';
+export type { KeyboardAwareFormWrapperProps } from './components/KeyboardAwareFormWrapper';
+
+// Theming
+export { FieldFlowThemeProvider, useFieldFlowTheme, defaultTheme, darkTheme } from './theme';
+export type { FieldFlowThemeProviderProps } from './theme';
+
+// Hooks
+export { useFieldFlowForm, useKeyboardManager, useFieldState } from './hooks';
+export type {
+  UseFieldFlowFormOptions,
+  UseFieldFlowFormResult,
+  FieldFlowFormRules,
+  UseKeyboardManagerOptions,
+  UseKeyboardManagerResult,
+  UseFieldStateOptions,
+} from './hooks';
+
+// Validation
+export {
+  useValidation,
+  runRules,
+  isValidEmail,
+  isValidNumber,
+  isValidPhone,
+  requiredValidator,
+  emailValidator,
+  numberValidator,
+  phoneValidator,
+  minLengthValidator,
+  maxLengthValidator,
+  patternValidator,
+} from './validation';
+export type { UseValidationResult } from './validation';
+
+// Icons (in case consumers want to reuse FieldFlow's built-in icon set elsewhere)
+export { FieldFlowIcon } from './icons';
+export type { FieldFlowIconName, FieldFlowIconProps } from './icons';
+
+// Types
+export type {
+  FieldFlowFieldType,
+  FieldFlowState,
+  FieldFlowRules,
+  ValidationResult,
+  Validator,
+  FieldFlowColors,
+  FieldFlowSpacing,
+  FieldFlowTypography,
+  FieldFlowAnimationConfig,
+  FieldFlowTheme,
+  DeepPartial,
+} from './types';

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,49 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import type { DeepPartial, FieldFlowTheme } from '../types';
+import { defaultTheme } from './defaultTheme';
+
+const FieldFlowThemeContext = createContext<FieldFlowTheme>(defaultTheme);
+
+function mergeDeep<T extends Record<string, any>>(base: T, override?: DeepPartial<T>): T {
+  if (!override) return base;
+  const result: any = { ...base };
+  for (const key of Object.keys(override)) {
+    const overrideValue = (override as any)[key];
+    const baseValue = (base as any)[key];
+    if (
+      overrideValue &&
+      typeof overrideValue === 'object' &&
+      !Array.isArray(overrideValue) &&
+      baseValue &&
+      typeof baseValue === 'object'
+    ) {
+      result[key] = mergeDeep(baseValue, overrideValue);
+    } else if (overrideValue !== undefined) {
+      result[key] = overrideValue;
+    }
+  }
+  return result;
+}
+
+export interface FieldFlowThemeProviderProps {
+  theme?: DeepPartial<FieldFlowTheme>;
+  children: React.ReactNode;
+}
+
+/**
+ * Wrap your app (or a screen/form) in this provider to apply a custom theme.
+ * Any field not covered by your overrides falls back to FieldFlow's defaults,
+ * so you only need to specify what you want to change.
+ */
+export function FieldFlowThemeProvider({ theme, children }: FieldFlowThemeProviderProps) {
+  const merged = useMemo(() => mergeDeep(defaultTheme, theme), [theme]);
+  return (
+    <FieldFlowThemeContext.Provider value={merged}>{children}</FieldFlowThemeContext.Provider>
+  );
+}
+
+export function useFieldFlowTheme(): FieldFlowTheme {
+  return useContext(FieldFlowThemeContext);
+}
+
+export { mergeDeep };

package/src/theme/defaultTheme.ts

@@ -0,0 +1,58 @@
+import type { FieldFlowTheme } from '../types';
+
+export const defaultTheme: FieldFlowTheme = {
+  colors: {
+    background: '#FFFFFF',
+    backgroundDisabled: '#F2F3F5',
+    border: '#D8DCE2',
+    borderFocused: '#3B82F6',
+    borderError: '#EF4444',
+    borderSuccess: '#22C55E',
+    text: '#111827',
+    placeholder: '#9CA3AF',
+    label: '#374151',
+    labelFocused: '#3B82F6',
+    error: '#EF4444',
+    success: '#22C55E',
+    icon: '#6B7280',
+    iconFocused: '#3B82F6',
+  },
+  spacing: {
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    gap: 6,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderWidthFocused: 1.5,
+  },
+  typography: {
+    fontSize: 15,
+    labelFontSize: 13,
+    helperFontSize: 12,
+    fontWeight: '400',
+  },
+  animation: {
+    duration: 160,
+    useNativeDriver: false,
+  },
+};
+
+export const darkTheme: FieldFlowTheme = {
+  ...defaultTheme,
+  colors: {
+    background: '#1F2329',
+    backgroundDisabled: '#15171B',
+    border: '#3A3F47',
+    borderFocused: '#60A5FA',
+    borderError: '#F87171',
+    borderSuccess: '#4ADE80',
+    text: '#F3F4F6',
+    placeholder: '#6B7280',
+    label: '#D1D5DB',
+    labelFocused: '#60A5FA',
+    error: '#F87171',
+    success: '#4ADE80',
+    icon: '#9CA3AF',
+    iconFocused: '#60A5FA',
+  },
+};

package/src/theme/index.ts

@@ -0,0 +1,3 @@
+export { defaultTheme, darkTheme } from './defaultTheme';
+export { FieldFlowThemeProvider, useFieldFlowTheme, mergeDeep } from './ThemeProvider';
+export type { FieldFlowThemeProviderProps } from './ThemeProvider';

package/src/types/index.ts

@@ -0,0 +1,98 @@
+import type { KeyboardTypeOptions, TextInputProps, TextStyle } from 'react-native';
+
+/** Every field "flavor" the core input understands out of the box. */
+export type FieldFlowFieldType =
+  | 'text'
+  | 'email'
+  | 'number'
+  | 'decimal'
+  | 'phone'
+  | 'password'
+  | 'search'
+  | 'multiline'
+  | 'description'
+  | 'chat';
+
+export type FieldFlowState =
+  | 'idle'
+  | 'focused'
+  | 'error'
+  | 'success'
+  | 'disabled'
+  | 'readonly'
+  | 'loading';
+
+export interface ValidationResult {
+  valid: boolean;
+  message?: string;
+}
+
+export type Validator = (value: string) => ValidationResult;
+
+export interface FieldFlowRules {
+  required?: boolean | string;
+  minLength?: number | { value: number; message?: string };
+  maxLength?: number | { value: number; message?: string };
+  pattern?: RegExp | { value: RegExp; message?: string };
+  email?: boolean | string;
+  number?: boolean | string;
+  custom?: Validator | Validator[];
+}
+
+export interface FieldFlowColors {
+  background: string;
+  backgroundDisabled: string;
+  border: string;
+  borderFocused: string;
+  borderError: string;
+  borderSuccess: string;
+  text: string;
+  placeholder: string;
+  label: string;
+  labelFocused: string;
+  error: string;
+  success: string;
+  icon: string;
+  iconFocused: string;
+}
+
+export interface FieldFlowSpacing {
+  paddingHorizontal: number;
+  paddingVertical: number;
+  gap: number;
+  borderRadius: number;
+  borderWidth: number;
+  borderWidthFocused: number;
+}
+
+export interface FieldFlowTypography {
+  fontSize: number;
+  labelFontSize: number;
+  helperFontSize: number;
+  fontFamily?: string;
+  fontWeight: TextStyle['fontWeight'];
+}
+
+export interface FieldFlowAnimationConfig {
+  duration: number;
+  useNativeDriver: boolean;
+}
+
+export interface FieldFlowTheme {
+  colors: FieldFlowColors;
+  spacing: FieldFlowSpacing;
+  typography: FieldFlowTypography;
+  animation: FieldFlowAnimationConfig;
+}
+
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+
+export interface FieldFlowFieldConfigByType {
+  keyboardType: KeyboardTypeOptions;
+  secureTextEntry: boolean;
+  autoCapitalize: TextInputProps['autoCapitalize'];
+  autoCorrect: boolean;
+  multiline: boolean;
+}

package/src/utils/formatters.ts

@@ -0,0 +1,18 @@
+/** Strips everything except digits, a single leading "+", and "." for decimals. */
+export function sanitizeNumeric(value: string, allowDecimal = false): string {
+  if (allowDecimal) {
+    const cleaned = value.replace(/[^0-9.]/g, '');
+    const [head, ...rest] = cleaned.split('.');
+    return rest.length ? `${head}.${rest.join('')}` : head;
+  }
+  return value.replace(/[^0-9]/g, '');
+}
+
+export function sanitizePhone(value: string): string {
+  return value.replace(/[^0-9+()\-\s]/g, '');
+}
+
+export function truncate(value: string, maxLength?: number): string {
+  if (!maxLength) return value;
+  return value.length > maxLength ? value.slice(0, maxLength) : value;
+}

package/src/utils/keyboardTypes.ts

@@ -0,0 +1,85 @@
+import { Platform } from 'react-native';
+import type { FieldFlowFieldConfigByType, FieldFlowFieldType } from '../types';
+
+/**
+ * Central place that decides "if fieldType is X, the input should behave like Y".
+ * This is what powers the "just set type='email' and everything is handled" behavior.
+ */
+export function resolveFieldConfig(type: FieldFlowFieldType): FieldFlowFieldConfigByType {
+  switch (type) {
+    case 'email':
+      return {
+        keyboardType: 'email-address',
+        secureTextEntry: false,
+        autoCapitalize: 'none',
+        autoCorrect: false,
+        multiline: false,
+      };
+    case 'number':
+      return {
+        keyboardType: Platform.select({ ios: 'number-pad', android: 'numeric', default: 'numeric' }),
+        secureTextEntry: false,
+        autoCapitalize: 'none',
+        autoCorrect: false,
+        multiline: false,
+      };
+    case 'decimal':
+      return {
+        keyboardType: Platform.select({ ios: 'decimal-pad', android: 'numeric', default: 'decimal-pad' }),
+        secureTextEntry: false,
+        autoCapitalize: 'none',
+        autoCorrect: false,
+        multiline: false,
+      };
+    case 'phone':
+      return {
+        keyboardType: 'phone-pad',
+        secureTextEntry: false,
+        autoCapitalize: 'none',
+        autoCorrect: false,
+        multiline: false,
+      };
+    case 'password':
+      return {
+        keyboardType: 'default',
+        secureTextEntry: true,
+        autoCapitalize: 'none',
+        autoCorrect: false,
+        multiline: false,
+      };
+    case 'search':
+      return {
+        keyboardType: 'default',
+        secureTextEntry: false,
+        autoCapitalize: 'none',
+        autoCorrect: false,
+        multiline: false,
+      };
+    case 'multiline':
+    case 'description':
+    case 'chat':
+      return {
+        keyboardType: 'default',
+        secureTextEntry: false,
+        autoCapitalize: 'sentences',
+        autoCorrect: true,
+        multiline: true,
+      };
+    case 'text':
+    default:
+      return {
+        keyboardType: 'default',
+        secureTextEntry: false,
+        autoCapitalize: 'sentences',
+        autoCorrect: true,
+        multiline: false,
+      };
+  }
+}
+
+/** Returns sensible default validation rules implied purely by the field type (before user overrides). */
+export function implicitRulesForType(type: FieldFlowFieldType) {
+  if (type === 'email') return { email: true as const };
+  if (type === 'number' || type === 'decimal') return { number: true as const };
+  return {};
+}

package/src/validation/index.ts

@@ -0,0 +1,15 @@
+export {
+  isValidEmail,
+  isValidNumber,
+  isValidPhone,
+  requiredValidator,
+  emailValidator,
+  numberValidator,
+  phoneValidator,
+  minLengthValidator,
+  maxLengthValidator,
+  patternValidator,
+  runRules,
+} from './validators';
+export { useValidation } from './useValidation';
+export type { UseValidationResult } from './useValidation';

package/src/validation/useValidation.ts

@@ -0,0 +1,37 @@
+import { useCallback, useState } from 'react';
+import type { FieldFlowRules } from '../types';
+import { runRules } from './validators';
+
+export interface UseValidationResult {
+  error: string | null;
+  touched: boolean;
+  validate: (value: string) => boolean;
+  markTouched: () => void;
+  reset: () => void;
+}
+
+/**
+ * Lightweight per-field validation hook for use outside of `useFieldFlowForm`,
+ * e.g. when a single input is validated on its own.
+ */
+export function useValidation(rules?: FieldFlowRules): UseValidationResult {
+  const [error, setError] = useState<string | null>(null);
+  const [touched, setTouched] = useState(false);
+
+  const validate = useCallback(
+    (value: string) => {
+      const result = runRules(value, rules);
+      setError(result.valid ? null : result.message ?? 'Invalid value');
+      return result.valid;
+    },
+    [rules],
+  );
+
+  const markTouched = useCallback(() => setTouched(true), []);
+  const reset = useCallback(() => {
+    setError(null);
+    setTouched(false);
+  }, []);
+
+  return { error, touched, validate, markTouched, reset };
+}

package/src/validation/validators.ts

@@ -0,0 +1,93 @@
+import type { FieldFlowRules, ValidationResult, Validator } from '../types';
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const NUMBER_REGEX = /^-?\d+(\.\d+)?$/;
+const PHONE_REGEX = /^[+]?[\d\s()-]{7,20}$/;
+
+export const isValidEmail = (value: string): boolean => EMAIL_REGEX.test(value.trim());
+export const isValidNumber = (value: string): boolean => NUMBER_REGEX.test(value.trim());
+export const isValidPhone = (value: string): boolean => PHONE_REGEX.test(value.trim());
+
+export const requiredValidator =
+  (message = 'This field is required'): Validator =>
+  value =>
+    value !== undefined && value !== null && value.trim().length > 0
+      ? { valid: true }
+      : { valid: false, message };
+
+export const emailValidator =
+  (message = 'Enter a valid email address'): Validator =>
+  value =>
+    value.length === 0 || isValidEmail(value) ? { valid: true } : { valid: false, message };
+
+export const numberValidator =
+  (message = 'Enter a valid number'): Validator =>
+  value =>
+    value.length === 0 || isValidNumber(value) ? { valid: true } : { valid: false, message };
+
+export const phoneValidator =
+  (message = 'Enter a valid phone number'): Validator =>
+  value =>
+    value.length === 0 || isValidPhone(value) ? { valid: true } : { valid: false, message };
+
+export const minLengthValidator =
+  (min: number, message?: string): Validator =>
+  value =>
+    value.length === 0 || value.length >= min
+      ? { valid: true }
+      : { valid: false, message: message ?? `Must be at least ${min} characters` };
+
+export const maxLengthValidator =
+  (max: number, message?: string): Validator =>
+  value =>
+    value.length <= max ? { valid: true } : { valid: false, message: message ?? `Must be at most ${max} characters` };
+
+export const patternValidator =
+  (pattern: RegExp, message = 'Invalid format'): Validator =>
+  value =>
+    value.length === 0 || pattern.test(value) ? { valid: true } : { valid: false, message };
+
+/**
+ * Turns a declarative `FieldFlowRules` object into an ordered list of validators
+ * and runs them against a value, stopping at (and returning) the first failure.
+ */
+export function runRules(value: string, rules?: FieldFlowRules): ValidationResult {
+  if (!rules) return { valid: true };
+
+  const validators: Validator[] = [];
+
+  if (rules.required) {
+    const message = typeof rules.required === 'string' ? rules.required : undefined;
+    validators.push(requiredValidator(message));
+  }
+  if (rules.email) {
+    const message = typeof rules.email === 'string' ? rules.email : undefined;
+    validators.push(emailValidator(message));
+  }
+  if (rules.number) {
+    const message = typeof rules.number === 'string' ? rules.number : undefined;
+    validators.push(numberValidator(message));
+  }
+  if (rules.minLength !== undefined) {
+    const cfg = typeof rules.minLength === 'number' ? { value: rules.minLength } : rules.minLength;
+    validators.push(minLengthValidator(cfg.value, cfg.message));
+  }
+  if (rules.maxLength !== undefined) {
+    const cfg = typeof rules.maxLength === 'number' ? { value: rules.maxLength } : rules.maxLength;
+    validators.push(maxLengthValidator(cfg.value, cfg.message));
+  }
+  if (rules.pattern) {
+    const cfg = rules.pattern instanceof RegExp ? { value: rules.pattern } : rules.pattern;
+    validators.push(patternValidator(cfg.value, cfg.message));
+  }
+  if (rules.custom) {
+    const customs = Array.isArray(rules.custom) ? rules.custom : [rules.custom];
+    validators.push(...customs);
+  }
+
+  for (const validate of validators) {
+    const result = validate(value ?? '');
+    if (!result.valid) return result;
+  }
+  return { valid: true };
+}