@vanira/sdk-react-native 0.0.2

package/src/presets/DynamicFormModal.tsx

@@ -0,0 +1,378 @@
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import {
+  buildFormSubmitPayload,
+  validateFormFields,
+  type FormValues,
+} from './form/formValidation';
+import {parseFormFields, type FormFieldDefinition} from './form/parseFormFields';
+import {PresetShellModal} from './PresetShellModal';
+import type {PresetContext} from './types';
+
+type Props = {
+  visible: boolean;
+  ctx: PresetContext;
+  onClose: () => void;
+  onCancel: (reason?: string) => void;
+  onComplete: (payload: Record<string, unknown>) => void;
+};
+
+const SUBMIT_DELAY_MS = 300;
+
+function optionLabel(opt: FormFieldDefinition['options'][number]): string {
+  return typeof opt === 'string' ? opt : opt.label;
+}
+
+function optionValue(opt: FormFieldDefinition['options'][number]): string {
+  return typeof opt === 'string' ? opt : opt.value;
+}
+
+export function DynamicFormModal({
+  visible,
+  ctx,
+  onClose,
+  onCancel,
+  onComplete,
+}: Props) {
+  const merged = useMemo(
+    () => ({...ctx.args, ...ctx.clientFields}),
+    [ctx.args, ctx.clientFields],
+  );
+
+  const title = String(
+    merged.title ?? ctx.args.title ?? 'Please fill out this form',
+  );
+  const reason = String(
+    ctx.args.reason ?? merged.reason ?? 'Please provide the following information.',
+  );
+
+  const fields = useMemo(
+    () => parseFormFields(merged.fields ?? ctx.args.fields),
+    [merged.fields, ctx.args.fields],
+  );
+
+  const [values, setValues] = useState<FormValues>({});
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
+  const [formError, setFormError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    const initial: FormValues = {};
+    for (const field of fields) {
+      initial[field.id] = field.type === 'checkbox' ? false : '';
+    }
+    setValues(initial);
+    setFieldErrors({});
+    setFormError(null);
+    setSubmitting(false);
+  }, [visible, ctx.toolCallId, fields]);
+
+  const setFieldValue = useCallback(
+    (id: string, value: string | boolean) => {
+      setValues(prev => ({...prev, [id]: value}));
+      setFieldErrors(prev => {
+        if (!prev[id]) {
+          return prev;
+        }
+        const next = {...prev};
+        delete next[id];
+        return next;
+      });
+      setFormError(null);
+    },
+    [],
+  );
+
+  const handleSubmit = useCallback(() => {
+    if (submitting) {
+      return;
+    }
+    if (fields.length === 0) {
+      setFormError('No form fields configured.');
+      return;
+    }
+
+    const errors = validateFormFields(fields, values);
+    if (Object.keys(errors).length > 0) {
+      setFieldErrors(errors);
+      setFormError('Please fix the highlighted fields.');
+      return;
+    }
+
+    setSubmitting(true);
+    setFormError(null);
+    const payload = buildFormSubmitPayload(fields, values);
+
+    setTimeout(() => {
+      setSubmitting(false);
+      onComplete(payload);
+    }, SUBMIT_DELAY_MS);
+  }, [fields, onComplete, submitting, values]);
+
+  const renderField = (field: FormFieldDefinition) => {
+    const error = fieldErrors[field.id];
+    const label = `${field.label}${field.required ? ' *' : ''}`;
+
+    switch (field.type) {
+      case 'textarea':
+        return (
+          <View key={field.id} style={styles.fieldWrap}>
+            <Text style={styles.label}>{label}</Text>
+            <TextInput
+              style={[styles.input, styles.textarea, error && styles.inputError]}
+              multiline
+              numberOfLines={4}
+              value={String(values[field.id] ?? '')}
+              placeholder={field.placeholder}
+              onChangeText={text => setFieldValue(field.id, text)}
+              editable={!submitting}
+            />
+            {error ? <Text style={styles.fieldError}>{error}</Text> : null}
+          </View>
+        );
+
+      case 'select':
+        return (
+          <View key={field.id} style={styles.fieldWrap}>
+            <Text style={styles.label}>{label}</Text>
+            <View style={styles.optionRow}>
+              {(field.options.length > 0
+                ? field.options
+                : ['Option 1']
+              ).map(opt => {
+                const val = optionValue(opt);
+                const selected = values[field.id] === val;
+                return (
+                  <Pressable
+                    key={val}
+                    style={[styles.chip, selected && styles.chipSelected]}
+                    onPress={() => setFieldValue(field.id, val)}
+                    disabled={submitting}>
+                    <Text
+                      style={[
+                        styles.chipText,
+                        selected && styles.chipTextSelected,
+                      ]}>
+                      {optionLabel(opt)}
+                    </Text>
+                  </Pressable>
+                );
+              })}
+            </View>
+            {error ? <Text style={styles.fieldError}>{error}</Text> : null}
+          </View>
+        );
+
+      case 'radio':
+        return (
+          <View key={field.id} style={styles.fieldWrap}>
+            <Text style={styles.label}>{label}</Text>
+            {(field.options.length > 0 ? field.options : ['Yes', 'No']).map(
+              opt => {
+                const val = optionValue(opt);
+                const selected = values[field.id] === val;
+                return (
+                  <Pressable
+                    key={val}
+                    style={styles.radioRow}
+                    onPress={() => setFieldValue(field.id, val)}
+                    disabled={submitting}>
+                    <View
+                      style={[
+                        styles.radioOuter,
+                        selected && styles.radioOuterSelected,
+                      ]}>
+                      {selected ? <View style={styles.radioInner} /> : null}
+                    </View>
+                    <Text style={styles.radioLabel}>{optionLabel(opt)}</Text>
+                  </Pressable>
+                );
+              },
+            )}
+            {error ? <Text style={styles.fieldError}>{error}</Text> : null}
+          </View>
+        );
+
+      case 'checkbox':
+        return (
+          <View key={field.id} style={styles.fieldWrap}>
+            <View style={styles.checkboxRow}>
+              <Switch
+                value={values[field.id] === true}
+                onValueChange={v => setFieldValue(field.id, v)}
+                disabled={submitting}
+              />
+              <Text style={styles.checkboxLabel}>{label}</Text>
+            </View>
+            {error ? <Text style={styles.fieldError}>{error}</Text> : null}
+          </View>
+        );
+
+      default: {
+        const keyboardType =
+          field.type === 'email'
+            ? 'email-address'
+            : field.type === 'phone'
+              ? 'phone-pad'
+              : field.type === 'number'
+                ? 'numeric'
+                : 'default';
+        return (
+          <View key={field.id} style={styles.fieldWrap}>
+            <Text style={styles.label}>{label}</Text>
+            <TextInput
+              style={[styles.input, error && styles.inputError]}
+              value={String(values[field.id] ?? '')}
+              placeholder={
+                field.placeholder ??
+                (field.type === 'date'
+                  ? 'YYYY-MM-DD'
+                  : `Enter your ${field.label.toLowerCase()}`)
+              }
+              keyboardType={keyboardType}
+              autoCapitalize={field.type === 'email' ? 'none' : 'sentences'}
+              onChangeText={text => setFieldValue(field.id, text)}
+              editable={!submitting}
+            />
+            {error ? <Text style={styles.fieldError}>{error}</Text> : null}
+          </View>
+        );
+      }
+    }
+  };
+
+  return (
+    <PresetShellModal
+      visible={visible}
+      title={title}
+      subtitle={reason}
+      onClose={onClose}
+      hideDefaultClose>
+      <ScrollView
+        style={styles.scroll}
+        contentContainerStyle={styles.scrollContent}
+        keyboardShouldPersistTaps="handled">
+        {fields.length === 0 ? (
+          <Text style={styles.formError}>No form fields configured.</Text>
+        ) : (
+          fields.map(renderField)
+        )}
+        {formError ? <Text style={styles.formError}>{formError}</Text> : null}
+      </ScrollView>
+
+      <View style={styles.actions}>
+        <Pressable
+          style={styles.cancelBtn}
+          onPress={() => onCancel('User cancelled')}
+          disabled={submitting}>
+          <Text style={styles.cancelBtnText}>Cancel</Text>
+        </Pressable>
+        <Pressable
+          style={[styles.submitBtn, submitting && styles.submitDisabled]}
+          onPress={handleSubmit}
+          disabled={submitting || fields.length === 0}>
+          {submitting ? (
+            <ActivityIndicator color="#fff" />
+          ) : (
+            <Text style={styles.submitBtnText}>Submit</Text>
+          )}
+        </Pressable>
+      </View>
+    </PresetShellModal>
+  );
+}
+
+const styles = StyleSheet.create({
+  scroll: {maxHeight: 400},
+  scrollContent: {paddingBottom: 8, gap: 12},
+  fieldWrap: {gap: 6},
+  label: {fontSize: 13, fontWeight: '600', color: '#374151'},
+  input: {
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 15,
+    color: '#111',
+    backgroundColor: '#fafafa',
+  },
+  textarea: {minHeight: 96, textAlignVertical: 'top'},
+  inputError: {borderColor: '#ef4444'},
+  fieldError: {fontSize: 12, color: '#ef4444'},
+  formError: {
+    fontSize: 13,
+    color: '#ef4444',
+    textAlign: 'center',
+    marginTop: 8,
+  },
+  optionRow: {flexDirection: 'row', flexWrap: 'wrap', gap: 8},
+  chip: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+    backgroundColor: '#f9fafb',
+  },
+  chipSelected: {backgroundColor: '#4f46e5', borderColor: '#4f46e5'},
+  chipText: {fontSize: 13, color: '#111'},
+  chipTextSelected: {color: '#fff', fontWeight: '600'},
+  radioRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    paddingVertical: 4,
+  },
+  radioOuter: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: '#9ca3af',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  radioOuterSelected: {borderColor: '#4f46e5'},
+  radioInner: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: '#4f46e5',
+  },
+  radioLabel: {fontSize: 14, color: '#111'},
+  checkboxRow: {flexDirection: 'row', alignItems: 'center', gap: 10},
+  checkboxLabel: {fontSize: 14, color: '#111', flex: 1},
+  actions: {flexDirection: 'row', gap: 10, marginTop: 12},
+  cancelBtn: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 10,
+    backgroundColor: '#f3f4f6',
+    alignItems: 'center',
+  },
+  cancelBtnText: {color: '#111', fontWeight: '600'},
+  submitBtn: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 10,
+    backgroundColor: '#4f46e5',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 44,
+  },
+  submitDisabled: {opacity: 0.6},
+  submitBtnText: {color: '#fff', fontWeight: '700'},
+});