rn-inputforge 0.3.1 → 0.4.0

package/src/utils/masks.ts

@@ -0,0 +1,137 @@
+export type FieldFlowMaskType = 'phone' | 'card' | 'currency' | 'date' | 'custom';
+
+export interface MaskResult {
+  /** Display value shown in the input. */
+  formatted: string;
+  /** Digits / raw value without mask characters (currency keeps decimal point). */
+  raw: string;
+}
+
+export interface ApplyMaskOptions {
+  /** Currency symbol prefix, e.g. "$" or "Rs ". Default: "$". */
+  currencySymbol?: string;
+  /** Max decimal places for currency. Default: 2. */
+  currencyDecimals?: number;
+  /** Custom mask pattern using `#` for digits. E.g. `(###) ###-####`. */
+  pattern?: string;
+}
+
+/** Strip everything except digits. */
+export function digitsOnly(value: string): string {
+  return value.replace(/\D/g, '');
+}
+
+/**
+ * Apply a digit pattern where `#` is a digit slot and any other char is literal.
+ * Extra digits beyond the pattern are ignored.
+ */
+export function applyPattern(rawDigits: string, pattern: string): MaskResult {
+  let di = 0;
+  let formatted = '';
+  for (let i = 0; i < pattern.length && di < rawDigits.length; i++) {
+    const ch = pattern[i];
+    if (ch === '#') {
+      formatted += rawDigits[di++];
+    } else {
+      formatted += ch;
+    }
+  }
+  return { formatted, raw: rawDigits.slice(0, di) };
+}
+
+export function applyPhoneMask(value: string): MaskResult {
+  const digits = digitsOnly(value).slice(0, 15);
+  // US-style when 10 digits or less; otherwise keep a loose international grouping
+  if (digits.length <= 10) {
+    return applyPattern(digits, '(###) ###-####');
+  }
+  // +X (XXX) XXX-XXXX… style for longer numbers
+  const country = digits.slice(0, digits.length - 10);
+  const rest = applyPattern(digits.slice(-10), '(###) ###-####').formatted;
+  return { formatted: `+${country} ${rest}`, raw: digits };
+}
+
+export function applyCardMask(value: string): MaskResult {
+  const digits = digitsOnly(value).slice(0, 19);
+  const groups = digits.match(/.{1,4}/g) ?? [];
+  return { formatted: groups.join(' '), raw: digits };
+}
+
+export function applyDateMask(value: string): MaskResult {
+  // MM/DD/YYYY
+  return applyPattern(digitsOnly(value).slice(0, 8), '##/##/####');
+}
+
+export function applyCurrencyMask(
+  value: string,
+  symbol = '$',
+  decimals = 2,
+): MaskResult {
+  // Keep only digits and at most one decimal point
+  let cleaned = value.replace(/[^0-9.]/g, '');
+  const firstDot = cleaned.indexOf('.');
+  if (firstDot !== -1) {
+    cleaned =
+      cleaned.slice(0, firstDot + 1) + cleaned.slice(firstDot + 1).replace(/\./g, '');
+    const [intPart, frac = ''] = cleaned.split('.');
+    cleaned = `${intPart}.${frac.slice(0, decimals)}`;
+  }
+
+  if (!cleaned || cleaned === '.') {
+    return { formatted: '', raw: '' };
+  }
+
+  const [intRaw, fracRaw] = cleaned.split('.');
+  const intFormatted = (intRaw || '0').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  const formatted =
+    fracRaw !== undefined ? `${symbol}${intFormatted}.${fracRaw}` : `${symbol}${intFormatted}`;
+
+  return { formatted, raw: cleaned };
+}
+
+/**
+ * Format a value with a built-in or custom mask.
+ * Pass the previous formatted value's raw length context via the incoming `value`
+ * (the function always re-derives from the full string the user typed).
+ */
+export function applyMask(
+  value: string,
+  type: FieldFlowMaskType,
+  options: ApplyMaskOptions = {},
+): MaskResult {
+  switch (type) {
+    case 'phone':
+      return applyPhoneMask(value);
+    case 'card':
+      return applyCardMask(value);
+    case 'date':
+      return applyDateMask(value);
+    case 'currency':
+      return applyCurrencyMask(value, options.currencySymbol ?? '$', options.currencyDecimals ?? 2);
+    case 'custom':
+      if (!options.pattern) {
+        return { formatted: value, raw: value };
+      }
+      return applyPattern(digitsOnly(value), options.pattern);
+    default:
+      return { formatted: value, raw: value };
+  }
+}
+
+/** Convenience: return only the formatted display string. */
+export function formatMasked(
+  value: string,
+  type: FieldFlowMaskType,
+  options?: ApplyMaskOptions,
+): string {
+  return applyMask(value, type, options).formatted;
+}
+
+/** Convenience: return only the raw (unmasked) value. */
+export function unmask(
+  value: string,
+  type: FieldFlowMaskType,
+  options?: ApplyMaskOptions,
+): string {
+  return applyMask(value, type, options).raw;
+}

package/src/validation/index.ts

@@ -13,3 +13,10 @@ export {
 } from './validators';
 export { useValidation } from './useValidation';
 export type { UseValidationResult } from './useValidation';
+export {
+  zodToFormErrors,
+  zodFormValidate,
+  createZodSubmitGuard,
+  fieldRulesFromZodString,
+} from './zodAdapter';
+export type { ZodSchemaLike, ZodIssueLike, ZodErrorLike } from './zodAdapter';

package/src/validation/zodAdapter.ts

@@ -0,0 +1,103 @@
+import type { FieldFlowRules } from '../types';
+
+/**
+ * Minimal structural types so consumers can pass a Zod schema without
+ * rn-inputforge taking a hard dependency on `zod`.
+ */
+export interface ZodIssueLike {
+  path: (string | number)[];
+  message: string;
+}
+
+export interface ZodErrorLike {
+  issues: ZodIssueLike[];
+}
+
+export interface ZodSchemaLike<T = unknown> {
+  safeParse: (data: unknown) => { success: true; data: T } | { success: false; error: ZodErrorLike };
+}
+
+/**
+ * Convert a Zod schema parse failure into FieldFlow form errors
+ * (first message per top-level field).
+ */
+export function zodToFormErrors<T extends Record<string, string>>(
+  schema: ZodSchemaLike<T>,
+  values: T,
+): Partial<Record<keyof T, string>> {
+  const result = schema.safeParse(values);
+  if (result.success) return {};
+
+  const errors: Partial<Record<keyof T, string>> = {};
+  for (const issue of result.error.issues) {
+    const key = issue.path[0];
+    if (typeof key === 'string' && errors[key as keyof T] === undefined) {
+      errors[key as keyof T] = issue.message;
+    }
+  }
+  return errors;
+}
+
+/**
+ * Drop into `useFieldFlowForm({ formValidate: zodFormValidate(schema) })`.
+ */
+export function zodFormValidate<T extends Record<string, string>>(schema: ZodSchemaLike<T>) {
+  return (values: T) => zodToFormErrors(schema, values);
+}
+
+/**
+ * Wrap an `onSubmit` so it only runs when Zod passes.
+ * Useful if you keep FieldFlow rules for UX and Zod as the final gate.
+ */
+export function createZodSubmitGuard<T extends Record<string, string>>(
+  schema: ZodSchemaLike<T>,
+  onValid: (values: T) => void | Promise<void>,
+  onInvalid?: (errors: Partial<Record<keyof T, string>>) => void,
+) {
+  return async (values: T) => {
+    const errors = zodToFormErrors(schema, values);
+    if (Object.keys(errors).length > 0) {
+      onInvalid?.(errors);
+      return;
+    }
+    await onValid(values);
+  };
+}
+
+/**
+ * Best-effort map of a Zod string schema onto declarative `FieldFlowRules`.
+ * Supports required / email / min / max / regex. For refinements and objects,
+ * use `zodFormValidate` instead.
+ */
+export function fieldRulesFromZodString(zodStringSchema: {
+  _def?: {
+    typeName?: string;
+    checks?: Array<{ kind: string; value?: unknown; regex?: RegExp; message?: string }>;
+  };
+  isOptional?: () => boolean;
+}): FieldFlowRules {
+  const rules: FieldFlowRules = {};
+  const def = zodStringSchema._def;
+  if (!def) return rules;
+
+  const optional = typeof zodStringSchema.isOptional === 'function' ? zodStringSchema.isOptional() : false;
+  if (!optional) rules.required = true;
+
+  for (const check of def.checks ?? []) {
+    if (check.kind === 'email') {
+      rules.email = check.message ?? true;
+    } else if (check.kind === 'min' && typeof check.value === 'number') {
+      if (check.value === 1 && !optional) {
+        rules.required = check.message ?? true;
+      } else {
+        rules.minLength = { value: check.value, message: check.message };
+      }
+    } else if (check.kind === 'max' && typeof check.value === 'number') {
+      rules.maxLength = { value: check.value, message: check.message };
+    } else if (check.kind === 'regex' && check.regex) {
+      rules.pattern = { value: check.regex, message: check.message };
+    }
+  }
+
+  return rules;
+}