@viveksinghind/narrative-form-native 1.0.2

package/dist/index.mjs

@@ -0,0 +1,621 @@
+import { createContext, useState, useRef, useCallback, useMemo, useEffect, useContext } from 'react';
+import { StyleSheet, Animated, Text, Keyboard, View, TouchableOpacity, TextInput, ScrollView } from 'react-native';
+import { FormStateEngine, fetchFormConfig, validateField, hasAsyncValidation, validateFieldAsync, mergeStrings } from '@viveksinghind/narrative-form-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/NarrativeForm.tsx
+function useFormState(fields) {
+  const [, setTick] = useState(0);
+  const engineRef = useRef(null);
+  if (engineRef.current === null) {
+    engineRef.current = new FormStateEngine(fields, () => {
+      setTick((t) => t + 1);
+    });
+  }
+  const engine = engineRef.current;
+  const startTyping = useCallback((key) => engine.startTyping(key), [engine]);
+  const activateField = useCallback((key) => engine.activateField(key), [engine]);
+  const confirmField = useCallback(
+    (key, value) => engine.confirmField(key, value),
+    [engine]
+  );
+  const editField = useCallback((key) => engine.editField(key), [engine]);
+  const reconfirmField = useCallback(
+    (key, value) => engine.reconfirmField(key, value),
+    [engine]
+  );
+  const next = useCallback(() => engine.next(), [engine]);
+  const focusField = useCallback((key) => engine.focusField(key), [engine]);
+  const reset = useCallback(() => engine.reset(), [engine]);
+  const getValues = useCallback(() => engine.getValues(), [engine]);
+  const getMeta = useCallback(
+    (formId, formVersion) => engine.getMeta(formId, formVersion),
+    [engine]
+  );
+  const snapshot = engine.getSnapshot();
+  return useMemo(
+    () => ({
+      snapshot,
+      startTyping,
+      activateField,
+      confirmField,
+      editField,
+      reconfirmField,
+      next,
+      focusField,
+      reset,
+      getValues,
+      getMeta
+    }),
+    // snapshot changes every tick, which is what we want
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [snapshot]
+  );
+}
+function useDynamicForm({
+  fieldsUrl,
+  fieldsUrlHeaders,
+  formConfig,
+  onFetchError
+}) {
+  const [config, setConfig] = useState(formConfig != null ? formConfig : null);
+  const [loading, setLoading] = useState(!!fieldsUrl && !formConfig);
+  const [error, setError] = useState(null);
+  const [retryCount, setRetryCount] = useState(0);
+  useEffect(() => {
+    if (formConfig) {
+      setConfig(formConfig);
+      setLoading(false);
+      setError(null);
+      return;
+    }
+    if (!fieldsUrl) {
+      return;
+    }
+    let isMounted = true;
+    setLoading(true);
+    setError(null);
+    fetchFormConfig(fieldsUrl, { headers: fieldsUrlHeaders }).then((data) => {
+      if (isMounted) {
+        setConfig(data);
+        setLoading(false);
+      }
+    }).catch((err) => {
+      if (isMounted) {
+        setError(err);
+        setLoading(false);
+        onFetchError == null ? void 0 : onFetchError(err);
+      }
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [fieldsUrl, fieldsUrlHeaders, formConfig, retryCount, onFetchError]);
+  const retry = useCallback(() => {
+    if (fieldsUrl && !formConfig) {
+      setRetryCount((c) => c + 1);
+    }
+  }, [fieldsUrl, formConfig]);
+  return { config, loading, error, retry };
+}
+var ThemeContext = createContext({
+  theme: void 0,
+  isDark: false
+});
+var useTheme = () => useContext(ThemeContext);
+var ThemeProvider = ({ theme, children }) => {
+  const value = useMemo(() => {
+    return {
+      theme,
+      isDark: !!(theme == null ? void 0 : theme.mode) && theme.mode === "dark"
+    };
+  }, [theme]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+};
+var ErrorMessage = ({ message, config }) => {
+  var _a;
+  const { theme } = useTheme();
+  const opacity = useRef(new Animated.Value(0)).current;
+  const translateY = useRef(new Animated.Value(-10)).current;
+  useEffect(() => {
+    if (message) {
+      Animated.parallel([
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 200,
+          useNativeDriver: true
+        }),
+        Animated.timing(translateY, {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: true
+        })
+      ]).start();
+    } else {
+      opacity.setValue(0);
+      translateY.setValue(-10);
+    }
+  }, [message, opacity, translateY]);
+  if (!message) return null;
+  return /* @__PURE__ */ jsx(Animated.View, { style: { opacity, transform: [{ translateY }] }, children: /* @__PURE__ */ jsx(Text, { style: [styles.errorText, { color: ((_a = theme == null ? void 0 : theme.colors) == null ? void 0 : _a.error) || "#d32f2f" }], children: message }) });
+};
+var styles = StyleSheet.create({
+  errorText: {
+    fontSize: 14,
+    marginTop: 4,
+    marginBottom: 8
+  }
+});
+var Line = ({
+  field,
+  status,
+  value,
+  allValues,
+  typewriter,
+  editable,
+  locked,
+  editLabel,
+  onTypingComplete,
+  onConfirm,
+  onEdit,
+  onError,
+  onChange,
+  onFocus,
+  onBlur
+}) => {
+  var _a, _b;
+  const { theme, isDark } = useTheme();
+  const [typedPrompt, setTypedPrompt] = useState("");
+  const [localValue, setLocalValue] = useState(value ? String(value) : "");
+  const [errorMsg, setErrorMsg] = useState(null);
+  const [isValidating, setIsValidating] = useState(false);
+  const inputRef = useRef(null);
+  const opacity = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 300,
+      useNativeDriver: true
+    }).start();
+  }, [opacity]);
+  useEffect(() => {
+    if (value !== void 0 && String(value) !== localValue) {
+      setLocalValue(String(value));
+    }
+  }, [value]);
+  useEffect(() => {
+    var _a2;
+    if (status !== "typing") return;
+    if (!typewriter.enabled) {
+      setTypedPrompt(field.prompt);
+      onTypingComplete(field.key);
+      return;
+    }
+    let i = 0;
+    const interval = setInterval(() => {
+      setTypedPrompt(field.prompt.slice(0, i + 1));
+      i++;
+      if (i >= field.prompt.length) {
+        clearInterval(interval);
+        onTypingComplete(field.key);
+      }
+    }, (_a2 = typewriter.delayMs) != null ? _a2 : 30);
+    return () => clearInterval(interval);
+  }, [status, field.prompt, field.key, typewriter, onTypingComplete]);
+  useEffect(() => {
+    if (status === "active" || status === "editing") {
+      setTimeout(() => {
+        var _a2;
+        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      }, 50);
+    }
+  }, [status]);
+  const handleConfirm = useCallback(async () => {
+    const syncResult = validateField(field, localValue);
+    if (!syncResult.valid) {
+      setErrorMsg(syncResult.error || "Invalid input");
+      onError(field.key, syncResult.error || "Invalid input");
+      return;
+    }
+    if (hasAsyncValidation(field)) {
+      setIsValidating(true);
+      const asyncResult = await validateFieldAsync(field, localValue);
+      setIsValidating(false);
+      if (!asyncResult.valid) {
+        setErrorMsg(asyncResult.error || "Invalid input");
+        onError(field.key, asyncResult.error || "Invalid input");
+        return;
+      }
+    }
+    setErrorMsg(null);
+    Keyboard.dismiss();
+    onConfirm(field.key, localValue);
+  }, [field, localValue, onError, onConfirm]);
+  const textColor = ((_a = theme == null ? void 0 : theme.colors) == null ? void 0 : _a.text) || (isDark ? "#fff" : "#000");
+  const primaryColor = ((_b = theme == null ? void 0 : theme.colors) == null ? void 0 : _b.primary) || "#007bff";
+  const isConfirmed = status === "confirmed";
+  const isActive = status === "active" || status === "editing";
+  return /* @__PURE__ */ jsxs(Animated.View, { style: [styles2.container, { opacity }], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles2.promptRow, children: [
+      /* @__PURE__ */ jsx(Text, { style: [styles2.prompt, { color: textColor }], children: status === "typing" ? typedPrompt : field.prompt }),
+      isConfirmed && /* @__PURE__ */ jsx(Text, { style: [styles2.value, { color: primaryColor }], children: localValue }),
+      isConfirmed && editable && !locked && /* @__PURE__ */ jsx(TouchableOpacity, { onPress: () => onEdit(field.key), style: styles2.editBtn, children: /* @__PURE__ */ jsx(Text, { style: [styles2.editBtnText, { color: primaryColor }], children: editLabel }) })
+    ] }),
+    isActive && /* @__PURE__ */ jsx(View, { style: styles2.inputRow, children: /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        ref: inputRef,
+        style: [
+          styles2.input,
+          { color: textColor, borderBottomColor: isValidating ? "#ccc" : primaryColor }
+        ],
+        value: localValue,
+        onChangeText: (text) => {
+          setLocalValue(text);
+          onChange(field.key, text);
+          if (errorMsg) setErrorMsg(null);
+        },
+        onFocus: () => onFocus(field.key),
+        onBlur: () => onBlur(field.key, localValue),
+        onSubmitEditing: handleConfirm,
+        keyboardType: field.type === "email" ? "email-address" : "default",
+        secureTextEntry: field.type === "password",
+        returnKeyType: "next",
+        editable: !isValidating
+      }
+    ) }),
+    /* @__PURE__ */ jsx(ErrorMessage, { message: errorMsg })
+  ] });
+};
+var styles2 = StyleSheet.create({
+  container: {
+    marginVertical: 12
+  },
+  promptRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap"
+  },
+  prompt: {
+    fontSize: 18,
+    marginRight: 8
+  },
+  value: {
+    fontSize: 18,
+    fontWeight: "600",
+    marginRight: 8
+  },
+  editBtn: {
+    marginLeft: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+    backgroundColor: "rgba(0,0,0,0.05)"
+  },
+  editBtnText: {
+    fontSize: 12,
+    fontWeight: "bold"
+  },
+  inputRow: {
+    marginTop: 8
+  },
+  input: {
+    fontSize: 18,
+    paddingVertical: 8,
+    borderBottomWidth: 2
+  }
+});
+var ToastContext = createContext({
+  showToast: () => {
+  }
+});
+var useToast = () => useContext(ToastContext);
+var ToastProvider = ({ children }) => {
+  const [toast, setToast] = useState(null);
+  const showToast = useCallback((message, type = "info") => {
+    setToast({ message, type });
+    setTimeout(() => setToast(null), 3e3);
+  }, []);
+  return /* @__PURE__ */ jsx(ToastContext.Provider, { value: { showToast }, children: /* @__PURE__ */ jsxs(View, { style: styles3.container, children: [
+    children,
+    toast && /* @__PURE__ */ jsx(View, { style: [styles3.toast, toast.type === "error" ? styles3.toastError : styles3.toastSuccess], children: /* @__PURE__ */ jsx(Text, { style: styles3.toastText, children: toast.message }) })
+  ] }) });
+};
+var styles3 = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  toast: {
+    position: "absolute",
+    bottom: 40,
+    left: 20,
+    right: 20,
+    padding: 16,
+    borderRadius: 8,
+    backgroundColor: "#333",
+    alignItems: "center"
+  },
+  toastError: {
+    backgroundColor: "#d32f2f"
+  },
+  toastSuccess: {
+    backgroundColor: "#2e7d32"
+  },
+  toastText: {
+    color: "#fff",
+    fontSize: 14
+  }
+});
+var WelcomeScreen = ({ welcome, typewriter, onStart }) => {
+  var _a, _b;
+  const { theme, isDark } = useTheme();
+  const opacity = useRef(new Animated.Value(0)).current;
+  const [typedTitle, setTypedTitle] = useState("");
+  useEffect(() => {
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 500,
+      useNativeDriver: true
+    }).start();
+  }, [opacity]);
+  useEffect(() => {
+    var _a2;
+    if (!typewriter.enabled) {
+      setTypedTitle(welcome.title);
+      return;
+    }
+    let i = 0;
+    const interval = setInterval(() => {
+      setTypedTitle(welcome.title.slice(0, i + 1));
+      i++;
+      if (i >= welcome.title.length) {
+        clearInterval(interval);
+      }
+    }, (_a2 = typewriter.delayMs) != null ? _a2 : 30);
+    return () => clearInterval(interval);
+  }, [welcome.title, typewriter]);
+  const textColor = ((_a = theme == null ? void 0 : theme.colors) == null ? void 0 : _a.text) || (isDark ? "#fff" : "#000");
+  const primaryColor = ((_b = theme == null ? void 0 : theme.colors) == null ? void 0 : _b.primary) || "#007bff";
+  return /* @__PURE__ */ jsxs(Animated.View, { style: [styles4.container, { opacity }], children: [
+    /* @__PURE__ */ jsx(Text, { style: [styles4.title, { color: textColor }], children: typedTitle }),
+    welcome.subtitle && /* @__PURE__ */ jsx(Text, { style: [styles4.subtitle, { color: textColor, opacity: 0.7 }], children: welcome.subtitle }),
+    /* @__PURE__ */ jsx(
+      TouchableOpacity,
+      {
+        style: [styles4.button, { backgroundColor: primaryColor }],
+        onPress: onStart,
+        accessibilityRole: "button",
+        children: /* @__PURE__ */ jsx(Text, { style: styles4.buttonText, children: welcome.startLabel || "Start" })
+      }
+    )
+  ] });
+};
+var styles4 = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "flex-start",
+    padding: 20
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "bold",
+    marginBottom: 8
+  },
+  subtitle: {
+    fontSize: 16,
+    marginBottom: 24
+  },
+  button: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 8
+  },
+  buttonText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600"
+  }
+});
+var DoneScreen = ({ done, values, meta }) => {
+  var _a;
+  const { theme, isDark } = useTheme();
+  const opacity = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 500,
+      useNativeDriver: true
+    }).start();
+  }, [opacity]);
+  const textColor = ((_a = theme == null ? void 0 : theme.colors) == null ? void 0 : _a.text) || (isDark ? "#fff" : "#000");
+  return /* @__PURE__ */ jsxs(Animated.View, { style: [styles5.container, { opacity }], children: [
+    /* @__PURE__ */ jsx(Text, { style: [styles5.title, { color: textColor }], children: done.title }),
+    done.subtitle && /* @__PURE__ */ jsx(Text, { style: [styles5.subtitle, { color: textColor, opacity: 0.7 }], children: done.subtitle })
+  ] });
+};
+var styles5 = StyleSheet.create({
+  container: {
+    padding: 20,
+    marginTop: 20
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "bold",
+    marginBottom: 8
+  },
+  subtitle: {
+    fontSize: 16
+  }
+});
+var NarrativeFormInner = (props) => {
+  var _a, _b, _c;
+  const { isDark } = useTheme();
+  const i18n = useMemo(() => mergeStrings(props.strings), [props.strings]);
+  const { config: dynamicConfig, loading, error, retry } = useDynamicForm({ fieldsUrl: props.fieldsUrl, fieldsUrlHeaders: props.fieldsUrlHeaders });
+  const resolvedConfig = useMemo(() => {
+    if (props.fields) return { fields: props.fields };
+    if (props.formConfig) return props.formConfig;
+    if (dynamicConfig) return dynamicConfig;
+    return null;
+  }, [props.fields, props.formConfig, dynamicConfig]);
+  const fields = (_a = resolvedConfig == null ? void 0 : resolvedConfig.fields) != null ? _a : [];
+  const welcome = (_b = props.welcome) != null ? _b : resolvedConfig && "welcome" in resolvedConfig ? resolvedConfig.welcome : void 0;
+  const done = (_c = props.done) != null ? _c : resolvedConfig && "done" in resolvedConfig ? resolvedConfig.done : void 0;
+  const effectiveTypewriter = useMemo(() => {
+    var _a2, _b2;
+    return {
+      ...props.typewriter,
+      enabled: props.reducedMotion ? false : (_b2 = (_a2 = props.typewriter) == null ? void 0 : _a2.enabled) != null ? _b2 : true
+    };
+  }, [props.typewriter, props.reducedMotion]);
+  const {
+    snapshot,
+    startTyping,
+    activateField,
+    confirmField,
+    editField,
+    reconfirmField,
+    next,
+    focusField,
+    reset,
+    getValues,
+    getMeta
+  } = useFormState(fields);
+  const showWelcome = (welcome == null ? void 0 : welcome.show) !== false && welcome !== void 0;
+  const [welcomeDismissed, setWelcomeDismissed] = useState(!showWelcome);
+  const hasStartedRef = useRef(false);
+  useEffect(() => {
+    if (!welcomeDismissed || hasStartedRef.current || fields.length === 0) return;
+    hasStartedRef.current = true;
+    const firstField = fields.find((f) => snapshot.statuses[f.key] !== "confirmed");
+    if (firstField) {
+      startTyping(firstField.key);
+    }
+  }, [welcomeDismissed, fields, startTyping, snapshot.statuses]);
+  const handleConfirm = useCallback((key, value) => {
+    var _a2, _b2;
+    const status = snapshot.statuses[key];
+    if (status === "editing") {
+      reconfirmField(key, value);
+    } else {
+      confirmField(key, value);
+    }
+    (_b2 = (_a2 = props.callbacks) == null ? void 0 : _a2.onFieldComplete) == null ? void 0 : _b2.call(_a2, key, value, 0);
+    const currentIndex = fields.findIndex((f) => f.key === key);
+    for (let i = currentIndex + 1; i < fields.length; i++) {
+      const nextField = fields[i];
+      if (!nextField || snapshot.statuses[nextField.key] === "confirmed") continue;
+      startTyping(nextField.key);
+      break;
+    }
+  }, [snapshot, fields, confirmField, reconfirmField, startTyping, props.callbacks]);
+  const visibleFields = useMemo(() => {
+    return fields.filter((field) => {
+      const status = snapshot.statuses[field.key];
+      return status === "typing" || status === "active" || status === "confirmed" || status === "editing";
+    });
+  }, [fields, snapshot.statuses]);
+  const scrollViewRef = useRef(null);
+  useEffect(() => {
+    if (visibleFields.length > 0) {
+      setTimeout(() => {
+        var _a2;
+        (_a2 = scrollViewRef.current) == null ? void 0 : _a2.scrollToEnd({ animated: true });
+      }, 100);
+    }
+  }, [visibleFields.length]);
+  return /* @__PURE__ */ jsxs(
+    ScrollView,
+    {
+      ref: scrollViewRef,
+      style: [styles6.container, isDark ? styles6.darkContainer : styles6.lightContainer],
+      contentContainerStyle: styles6.content,
+      keyboardShouldPersistTaps: "handled",
+      children: [
+        !welcomeDismissed && welcome && /* @__PURE__ */ jsx(
+          WelcomeScreen,
+          {
+            welcome,
+            typewriter: effectiveTypewriter,
+            onStart: () => setWelcomeDismissed(true)
+          }
+        ),
+        welcomeDismissed && /* @__PURE__ */ jsx(View, { style: styles6.formBody, children: visibleFields.map((field) => {
+          var _a2, _b2, _c2, _d, _e;
+          return /* @__PURE__ */ jsx(
+            Line,
+            {
+              field,
+              status: (_a2 = snapshot.statuses[field.key]) != null ? _a2 : "idle",
+              value: (_c2 = (_b2 = props.values) == null ? void 0 : _b2[field.key]) != null ? _c2 : snapshot.values[field.key],
+              allValues: snapshot.values,
+              typewriter: effectiveTypewriter,
+              editable: (_d = props.editable) != null ? _d : true,
+              locked: false,
+              editLabel: (_e = props.editLabel) != null ? _e : i18n.editLabel,
+              onTypingComplete: (k) => activateField(k),
+              onConfirm: handleConfirm,
+              onEdit: (k) => {
+                var _a3, _b3;
+                editField(k);
+                (_b3 = (_a3 = props.callbacks) == null ? void 0 : _a3.onEdit) == null ? void 0 : _b3.call(_a3, k);
+              },
+              onError: (k, err) => {
+                var _a3, _b3;
+                return (_b3 = (_a3 = props.callbacks) == null ? void 0 : _a3.onError) == null ? void 0 : _b3.call(_a3, k, err);
+              },
+              onChange: (k, v) => {
+                var _a3, _b3;
+                return (_b3 = (_a3 = props.callbacks) == null ? void 0 : _a3.onChange) == null ? void 0 : _b3.call(_a3, k, v);
+              },
+              onFocus: (k) => {
+                var _a3, _b3;
+                return (_b3 = (_a3 = props.callbacks) == null ? void 0 : _a3.onFieldFocus) == null ? void 0 : _b3.call(_a3, k);
+              },
+              onBlur: (k, v) => {
+                var _a3, _b3;
+                return (_b3 = (_a3 = props.callbacks) == null ? void 0 : _a3.onFieldBlur) == null ? void 0 : _b3.call(_a3, k, v);
+              }
+            },
+            field.key
+          );
+        }) }),
+        snapshot.isComplete && done && /* @__PURE__ */ jsx(
+          DoneScreen,
+          {
+            done,
+            values: snapshot.values,
+            meta: getMeta(),
+            typewriter: effectiveTypewriter
+          }
+        )
+      ]
+    }
+  );
+};
+var NarrativeForm = (props) => {
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme: props.theme, children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(NarrativeFormInner, { ...props }) }) });
+};
+var styles6 = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  lightContainer: {
+    backgroundColor: "#ffffff"
+  },
+  darkContainer: {
+    backgroundColor: "#121212"
+  },
+  content: {
+    padding: 20,
+    flexGrow: 1
+  },
+  formBody: {
+    flex: 1
+  }
+});
+
+export { DoneScreen, ErrorMessage, Line, NarrativeForm, ThemeProvider, ToastProvider, WelcomeScreen, useDynamicForm, useFormState, useTheme, useToast };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map