rn-inputforge 0.5.0 → 0.5.1

package/src/schema/FieldFlowSchemaForm.tsx

@@ -0,0 +1,274 @@
+import React, { useMemo, useState } from 'react';
+import { View, type ViewStyle } from 'react-native';
+import { FieldFlowInput } from '../components/FieldFlowInput';
+import { FieldFlowCheckbox } from '../components/FieldFlowCheckbox';
+import { FieldFlowSwitch } from '../components/FieldFlowSwitch';
+import { FieldFlowRadio } from '../components/FieldFlowRadio';
+import { FieldFlowSegmented } from '../components/FieldFlowSegmented';
+import { FieldFlowDropdown } from '../components/FieldFlowDropdown';
+import { FieldFlowTags } from '../components/FieldFlowTags';
+import { FieldFlowRating } from '../components/FieldFlowRating';
+import { FieldFlowSlider } from '../components/FieldFlowSlider';
+import { FieldFlowNumberStepper } from '../components/FieldFlowNumberStepper';
+import { FieldFlowSection } from '../components/FieldFlowSection';
+import { useFieldFlowForm } from '../hooks/useFieldFlowForm';
+import type { FieldFlowFormSchema, FieldFlowSchemaField } from './types';
+import type { FieldFlowLocale } from '../i18n/messages';
+
+export type FieldFlowSchemaShowWhenFn = (values: Record<string, string>) => boolean;
+
+export interface FieldFlowSchemaFormProps {
+  schema: FieldFlowFormSchema;
+  /** Named showWhen resolvers referenced by field.showWhen string key. */
+  showWhenFns?: Record<string, FieldFlowSchemaShowWhenFn>;
+  locale?: FieldFlowLocale;
+  onSubmit?: (values: Record<string, string>) => void | Promise<void>;
+  /** Extra non-string state (tags, rating, etc.) change callback. */
+  onMetaChange?: (meta: Record<string, unknown>) => void;
+  /** Render a custom submit footer; receives form submit + values. */
+  renderFooter?: (ctx: {
+    submit: () => Promise<void>;
+    values: Record<string, string>;
+    meta: Record<string, unknown>;
+    isSubmitting: boolean;
+  }) => React.ReactNode;
+  containerStyle?: ViewStyle;
+  testID?: string;
+}
+
+function buildInitial(schema: FieldFlowFormSchema): Record<string, string> {
+  const base: Record<string, string> = { ...(schema.initialValues ?? {}) };
+  for (const field of schema.fields) {
+    if (base[field.name] === undefined) {
+      if (field.type === 'checkbox' || field.type === 'switch') base[field.name] = 'false';
+      else if (field.type === 'rating' || field.type === 'slider' || field.type === 'stepper') {
+        base[field.name] = String(field.min ?? 0);
+      } else base[field.name] = '';
+    }
+  }
+  return base;
+}
+
+function buildRules(schema: FieldFlowFormSchema) {
+  const rules: Record<string, FieldFlowSchemaField['rules']> = {};
+  for (const field of schema.fields) {
+    const r = { ...(field.rules ?? {}) };
+    if (field.required && !r.required) r.required = true;
+    if (field.type === 'email' && r.email === undefined) r.email = true;
+    if (Object.keys(r).length) rules[field.name] = r;
+  }
+  return rules;
+}
+
+/**
+ * Declarative form renderer — JSON / object schema → FieldFlow controls.
+ */
+export function FieldFlowSchemaForm({
+  schema,
+  showWhenFns,
+  locale,
+  onSubmit,
+  onMetaChange,
+  renderFooter,
+  containerStyle,
+  testID,
+}: FieldFlowSchemaFormProps) {
+  const initialValues = useMemo(() => buildInitial(schema), [schema]);
+  const rules = useMemo(() => buildRules(schema), [schema]);
+
+  const form = useFieldFlowForm({
+    initialValues,
+    rules,
+    locale,
+    onSubmit,
+  });
+
+  const [meta, setMeta] = useState<Record<string, unknown>>({});
+
+  const patchMeta = (key: string, value: unknown) => {
+    setMeta(prev => {
+      const next = { ...prev, [key]: value };
+      onMetaChange?.(next);
+      return next;
+    });
+  };
+
+  const isVisible = (field: FieldFlowSchemaField) => {
+    if (!field.showWhen) return true;
+    const fn = showWhenFns?.[field.showWhen];
+    if (!fn) return true;
+    return fn(form.values);
+  };
+
+  const sections = schema.sections ?? [];
+  const bySection = useMemo(() => {
+    const map = new Map<string | null, FieldFlowSchemaField[]>();
+    for (const field of schema.fields) {
+      const key = field.section ?? null;
+      const list = map.get(key) ?? [];
+      list.push(field);
+      map.set(key, list);
+    }
+    return map;
+  }, [schema.fields]);
+
+  const renderField = (field: FieldFlowSchemaField) => {
+    if (!isVisible(field)) return null;
+    const props = form.getInputProps(field.name);
+    if (!props && field.type !== 'checkbox' && field.type !== 'switch' && field.type !== 'rating' && field.type !== 'slider' && field.type !== 'stepper' && field.type !== 'tags' && field.type !== 'dropdown' && field.type !== 'radio' && field.type !== 'segmented') {
+      return null;
+    }
+
+    switch (field.type) {
+      case 'checkbox':
+        return (
+          <FieldFlowCheckbox
+            key={field.name}
+            label={field.label}
+            value={form.values[field.name] === 'true'}
+            onChange={v => form.handleChange(field.name)(v ? 'true' : 'false')}
+            required={field.required}
+            helperText={field.helperText}
+          />
+        );
+      case 'switch':
+        return (
+          <FieldFlowSwitch
+            key={field.name}
+            label={field.label}
+            value={form.values[field.name] === 'true'}
+            onChange={v => form.handleChange(field.name)(v ? 'true' : 'false')}
+            helperText={field.helperText}
+          />
+        );
+      case 'radio':
+        return (
+          <FieldFlowRadio
+            key={field.name}
+            label={field.label}
+            value={form.values[field.name] || null}
+            onChange={v => form.handleChange(field.name)(v)}
+            options={field.options ?? []}
+            required={field.required}
+          />
+        );
+      case 'segmented':
+        return (
+          <FieldFlowSegmented
+            key={field.name}
+            label={field.label}
+            value={form.values[field.name] || null}
+            onChange={v => form.handleChange(field.name)(v)}
+            options={field.options ?? []}
+            required={field.required}
+          />
+        );
+      case 'dropdown':
+        return (
+          <FieldFlowDropdown
+            key={field.name}
+            label={field.label}
+            placeholder={field.placeholder}
+            options={field.options ?? []}
+            value={form.values[field.name] || null}
+            onChange={v => form.handleChange(field.name)(v ?? '')}
+            required={field.required}
+            helperText={field.helperText}
+          />
+        );
+      case 'tags':
+        return (
+          <FieldFlowTags
+            key={field.name}
+            label={field.label}
+            value={(meta[field.name] as string[]) ?? []}
+            onChange={tags => patchMeta(field.name, tags)}
+            placeholder={field.placeholder}
+            helperText={field.helperText}
+          />
+        );
+      case 'rating':
+        return (
+          <FieldFlowRating
+            key={field.name}
+            label={field.label}
+            value={Number(form.values[field.name] || 0)}
+            onChange={v => form.handleChange(field.name)(String(v))}
+            max={field.max ?? 5}
+            required={field.required}
+          />
+        );
+      case 'slider':
+        return (
+          <FieldFlowSlider
+            key={field.name}
+            label={field.label}
+            value={Number(form.values[field.name] || field.min || 0)}
+            onChange={v => form.handleChange(field.name)(String(v))}
+            min={field.min ?? 0}
+            max={field.max ?? 100}
+            step={field.step ?? 1}
+          />
+        );
+      case 'stepper':
+        return (
+          <FieldFlowNumberStepper
+            key={field.name}
+            label={field.label}
+            value={Number(form.values[field.name] || field.min || 0)}
+            onChange={v => form.handleChange(field.name)(String(v))}
+            min={field.min ?? 0}
+            max={field.max ?? 99}
+            step={field.step ?? 1}
+          />
+        );
+      default:
+        return (
+          <FieldFlowInput
+            key={field.name}
+            type={field.type as 'text'}
+            label={field.label}
+            placeholder={field.placeholder}
+            helperText={field.helperText}
+            variant={field.variant}
+            leftIcon={field.leftIcon}
+            autofill={field.autofill}
+            suggestions={field.suggestions}
+            showStrength={field.showStrength}
+            prefix={field.prefix}
+            suffix={field.suffix}
+            {...props!}
+          />
+        );
+    }
+  };
+
+  const unsectioned = bySection.get(null) ?? [];
+
+  return (
+    <View style={containerStyle} testID={testID}>
+      {unsectioned.map(renderField)}
+      {sections.map(section => {
+        const fields = bySection.get(section.id) ?? [];
+        if (!fields.length) return null;
+        return (
+          <FieldFlowSection
+            key={section.id}
+            title={section.title}
+            description={section.description}
+            icon={section.icon}
+            collapsible={section.collapsible}
+          >
+            {fields.map(renderField)}
+          </FieldFlowSection>
+        );
+      })}
+      {renderFooter?.({
+        submit: form.submit,
+        values: form.values,
+        meta,
+        isSubmitting: form.isSubmitting,
+      })}
+    </View>
+  );
+}

package/src/schema/index.ts

@@ -0,0 +1,8 @@
+export { FieldFlowSchemaForm } from './FieldFlowSchemaForm';
+export type { FieldFlowSchemaFormProps, FieldFlowSchemaShowWhenFn } from './FieldFlowSchemaForm';
+export type {
+  FieldFlowFormSchema,
+  FieldFlowSchemaField,
+  FieldFlowSchemaFieldType,
+  FieldFlowSchemaSection,
+} from './types';

package/src/schema/types.ts

@@ -0,0 +1,63 @@
+import type { FieldFlowRules, FieldFlowOption, FieldFlowVariant } from '../types';
+import type { FieldFlowAutofillRole } from '../autofill/profiles';
+import type { FieldFlowIconSource } from '../icons';
+
+export type FieldFlowSchemaFieldType =
+  | 'text'
+  | 'email'
+  | 'phone'
+  | 'password'
+  | 'number'
+  | 'decimal'
+  | 'search'
+  | 'multiline'
+  | 'switch'
+  | 'checkbox'
+  | 'radio'
+  | 'segmented'
+  | 'dropdown'
+  | 'tags'
+  | 'rating'
+  | 'slider'
+  | 'stepper';
+
+export interface FieldFlowSchemaField {
+  name: string;
+  type: FieldFlowSchemaFieldType;
+  label?: string;
+  placeholder?: string;
+  helperText?: string;
+  required?: boolean;
+  rules?: FieldFlowRules;
+  variant?: FieldFlowVariant;
+  autofill?: FieldFlowAutofillRole;
+  leftIcon?: FieldFlowIconSource;
+  options?: FieldFlowOption[];
+  /** For slider / stepper / rating. */
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Show when predicate returns true (values bag). */
+  showWhen?: string;
+  /** JSON-serializable expression keys — resolved by `showWhenFns` map on the renderer. */
+  section?: string;
+  suggestions?: boolean | 'email' | 'phone' | 'currency';
+  showStrength?: boolean;
+  prefix?: string;
+  suffix?: string;
+}
+
+export interface FieldFlowSchemaSection {
+  id: string;
+  title?: string;
+  description?: string;
+  icon?: FieldFlowIconSource;
+  collapsible?: boolean;
+}
+
+export interface FieldFlowFormSchema {
+  fields: FieldFlowSchemaField[];
+  sections?: FieldFlowSchemaSection[];
+  /** Initial string values for text-like fields. */
+  initialValues?: Record<string, string>;
+}

package/src/theme/ThemeProvider.tsx

@@ -1,6 +1,18 @@
-import React, { createContext, useContext, useMemo } from 'react';
-import type { DeepPartial, FieldFlowTheme } from '../types';
+import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import type {
+  DeepPartial,
+  FieldFlowAppearance,
+  FieldFlowControlSize,
+  FieldFlowDensity,
+  FieldFlowFocusRing,
+  FieldFlowShape,
+  FieldFlowSurface,
+  FieldFlowTheme,
+} from '../types';
 import { defaultTheme } from './defaultTheme';
+import { applyAppearance, defaultAppearance } from './appearance';
+import { useReducedMotion } from '../motion/useReducedMotion';
 
 const FieldFlowThemeContext = createContext<FieldFlowTheme>(defaultTheme);
 
@@ -27,18 +39,95 @@ function mergeDeep<T extends Record<string, any>>(base: T, override?: DeepPartia
 
 export interface FieldFlowThemeProviderProps {
   theme?: DeepPartial<FieldFlowTheme>;
+  /** Form-wide density. Default: comfortable. */
+  density?: FieldFlowDensity;
+  /** Control size scale. Default: md. */
+  size?: FieldFlowControlSize;
+  /** Surface depth language. Default: flat. */
+  surface?: FieldFlowSurface;
+  /** Corner shape. Default: rounded. */
+  shape?: FieldFlowShape;
+  /** Focus ring style. Default: softGlow. */
+  focusRing?: FieldFlowFocusRing;
+  /**
+   * Soft crossfade when the resolved theme changes (e.g. switching presets).
+   * Default: true. Skipped when Reduce Motion is on.
+   */
+  animateTheme?: boolean;
   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.
+ * Density / size / shape / surface / focusRing are one-liner visual knobs.
  */
-export function FieldFlowThemeProvider({ theme, children }: FieldFlowThemeProviderProps) {
-  const merged = useMemo(() => mergeDeep(defaultTheme, theme), [theme]);
+export function FieldFlowThemeProvider({
+  theme,
+  density,
+  size,
+  surface,
+  shape,
+  focusRing,
+  animateTheme = true,
+  children,
+}: FieldFlowThemeProviderProps) {
+  const reducedMotion = useReducedMotion();
+  const appearanceOverride = useMemo(() => {
+    const partial: Partial<FieldFlowAppearance> = {};
+    if (density) partial.density = density;
+    if (size) partial.size = size;
+    if (surface) partial.surface = surface;
+    if (shape) partial.shape = shape;
+    if (focusRing) partial.focusRing = focusRing;
+    return partial;
+  }, [density, size, surface, shape, focusRing]);
+
+  const merged = useMemo(() => {
+    const base = mergeDeep(defaultTheme, theme);
+    const withAppearanceDefaults: FieldFlowTheme = {
+      ...base,
+      appearance: { ...defaultAppearance, ...(base.appearance ?? {}), ...appearanceOverride },
+      colors: {
+        ...defaultTheme.colors,
+        ...base.colors,
+      },
+    };
+    return applyAppearance(withAppearanceDefaults, appearanceOverride);
+  }, [theme, appearanceOverride]);
+
+  const opacity = useRef(new Animated.Value(1)).current;
+  const themeKey = useMemo(
+    () =>
+      JSON.stringify({
+        colors: merged.colors,
+        appearance: merged.appearance,
+        spacing: merged.spacing,
+      }),
+    [merged],
+  );
+  const prevKey = useRef(themeKey);
+
+  useEffect(() => {
+    if (!animateTheme || reducedMotion) {
+      opacity.setValue(1);
+      prevKey.current = themeKey;
+      return;
+    }
+    if (prevKey.current === themeKey) return;
+    prevKey.current = themeKey;
+    opacity.setValue(0.35);
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: Math.max(180, merged.animation.duration + 40),
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start();
+  }, [themeKey, animateTheme, reducedMotion, opacity, merged.animation.duration]);
+
   return (
-    <FieldFlowThemeContext.Provider value={merged}>{children}</FieldFlowThemeContext.Provider>
+    <FieldFlowThemeContext.Provider value={merged}>
+      <Animated.View style={{ opacity }}>{children}</Animated.View>
+    </FieldFlowThemeContext.Provider>
   );
 }
 

package/src/theme/appearance.ts

@@ -0,0 +1,105 @@
+import type {
+  FieldFlowAppearance,
+  FieldFlowControlSize,
+  FieldFlowDensity,
+  FieldFlowFocusRing,
+  FieldFlowShape,
+  FieldFlowSurface,
+  FieldFlowTheme,
+} from '../types';
+
+export const defaultAppearance: FieldFlowAppearance = {
+  density: 'comfortable',
+  size: 'md',
+  surface: 'flat',
+  shape: 'rounded',
+  focusRing: 'softGlow',
+};
+
+const DENSITY_SCALE: Record<FieldFlowDensity, number> = {
+  compact: 0.85,
+  comfortable: 1,
+  spacious: 1.18,
+};
+
+const SIZE_SCALE: Record<FieldFlowControlSize, number> = {
+  sm: 0.88,
+  md: 1,
+  lg: 1.14,
+};
+
+const SHAPE_RADIUS: Record<FieldFlowShape, (base: number) => number> = {
+  square: () => 4,
+  rounded: base => base,
+  pill: () => 999,
+};
+
+function scale(n: number, factor: number): number {
+  return Math.round(n * factor * 10) / 10;
+}
+
+/**
+ * Apply density / size / shape onto spacing + typography.
+ * Surface and focusRing stay as appearance flags for components to read.
+ */
+export function applyAppearance(
+  theme: FieldFlowTheme,
+  appearance: Partial<FieldFlowAppearance> = {},
+): FieldFlowTheme {
+  const next: FieldFlowAppearance = {
+    ...defaultAppearance,
+    ...(theme.appearance ?? defaultAppearance),
+    ...appearance,
+  };
+  const factor = DENSITY_SCALE[next.density] * SIZE_SCALE[next.size];
+  const radius = SHAPE_RADIUS[next.shape](theme.spacing.borderRadius);
+
+  return {
+    ...theme,
+    appearance: next,
+    spacing: {
+      ...theme.spacing,
+      paddingHorizontal: scale(theme.spacing.paddingHorizontal, factor),
+      paddingVertical: scale(theme.spacing.paddingVertical, factor),
+      gap: scale(theme.spacing.gap, factor),
+      borderRadius: radius,
+    },
+    typography: {
+      ...theme.typography,
+      fontSize: scale(theme.typography.fontSize, factor),
+      labelFontSize: scale(theme.typography.labelFontSize, factor),
+      helperFontSize: scale(theme.typography.helperFontSize, Math.min(factor, 1.1)),
+    },
+  };
+}
+
+export function surfaceShadow(surface: FieldFlowSurface): {
+  shadowColor?: string;
+  shadowOpacity?: number;
+  shadowRadius?: number;
+  shadowOffset?: { width: number; height: number };
+  elevation?: number;
+} | null {
+  switch (surface) {
+    case 'elevated':
+      return {
+        shadowColor: '#000',
+        shadowOpacity: 0.08,
+        shadowRadius: 10,
+        shadowOffset: { width: 0, height: 4 },
+        elevation: 3,
+      };
+    case 'soft':
+      return {
+        shadowColor: '#000',
+        shadowOpacity: 0.04,
+        shadowRadius: 6,
+        shadowOffset: { width: 0, height: 2 },
+        elevation: 1,
+      };
+    default:
+      return null;
+  }
+}
+
+export type { FieldFlowDensity, FieldFlowControlSize, FieldFlowSurface, FieldFlowShape, FieldFlowFocusRing };

package/src/theme/defaultTheme.ts

@@ -1,4 +1,5 @@
 import type { FieldFlowTheme } from '../types';
+import { defaultAppearance } from './appearance';
 
 export const defaultTheme: FieldFlowTheme = {
   colors: {
@@ -16,6 +17,10 @@ export const defaultTheme: FieldFlowTheme = {
     success: '#22C55E',
     icon: '#6B7280',
     iconFocused: '#3B82F6',
+    warning: '#D97706',
+    info: '#0284C7',
+    surfaceMuted: '#F8FAFC',
+    surfaceElevated: '#FFFFFF',
   },
   spacing: {
     paddingHorizontal: 14,
@@ -35,6 +40,7 @@ export const defaultTheme: FieldFlowTheme = {
     duration: 160,
     useNativeDriver: false,
   },
+  appearance: { ...defaultAppearance },
 };
 
 export const darkTheme: FieldFlowTheme = {
@@ -54,5 +60,10 @@ export const darkTheme: FieldFlowTheme = {
     success: '#4ADE80',
     icon: '#9CA3AF',
     iconFocused: '#60A5FA',
+    warning: '#FBBF24',
+    info: '#38BDF8',
+    surfaceMuted: '#15171B',
+    surfaceElevated: '#262B33',
   },
+  appearance: { ...defaultAppearance },
 };

package/src/theme/index.ts

@@ -3,3 +3,4 @@ export { FieldFlowThemeProvider, useFieldFlowTheme, mergeDeep } from './ThemePro
 export type { FieldFlowThemeProviderProps } from './ThemeProvider';
 export { themePresets, getThemePreset } from './presets';
 export type { FieldFlowThemePresetName } from './presets';
+export { applyAppearance, defaultAppearance, surfaceShadow } from './appearance';

package/src/types/globals.d.ts

@@ -0,0 +1,2 @@
+/** React Native / Metro global. */
+declare const __DEV__: boolean;

package/src/types/index.ts

@@ -67,6 +67,14 @@ export interface FieldFlowColors {
   success: string;
   icon: string;
   iconFocused: string;
+  /** Soft warning (amber). */
+  warning: string;
+  /** Informational blue/teal. */
+  info: string;
+  /** Muted surface for soft / inset wells. */
+  surfaceMuted: string;
+  /** Elevated card surface. */
+  surfaceElevated: string;
 }
 
 export interface FieldFlowSpacing {
@@ -91,11 +99,31 @@ export interface FieldFlowAnimationConfig {
   useNativeDriver: boolean;
 }
 
+/** Form-wide visual rhythm. */
+export type FieldFlowDensity = 'compact' | 'comfortable' | 'spacious';
+/** Control scale. */
+export type FieldFlowControlSize = 'sm' | 'md' | 'lg';
+/** Chrome depth. */
+export type FieldFlowSurface = 'flat' | 'elevated' | 'soft' | 'inset';
+/** Corner language. */
+export type FieldFlowShape = 'square' | 'rounded' | 'pill';
+/** Focus treatment. */
+export type FieldFlowFocusRing = 'solid' | 'softGlow' | 'underlinePulse';
+
+export interface FieldFlowAppearance {
+  density: FieldFlowDensity;
+  size: FieldFlowControlSize;
+  surface: FieldFlowSurface;
+  shape: FieldFlowShape;
+  focusRing: FieldFlowFocusRing;
+}
+
 export interface FieldFlowTheme {
   colors: FieldFlowColors;
   spacing: FieldFlowSpacing;
   typography: FieldFlowTypography;
   animation: FieldFlowAnimationConfig;
+  appearance: FieldFlowAppearance;
 }
 
 export type DeepPartial<T> = {