chore: update example

pinpong · pinpong · commit 19559e3d398e · 2025-10-14T20:57:30.000+07:00
diff --git a/example/src/components/maptConfigDialog/MapConfigDialog.tsx b/example/src/components/maptConfigDialog/MapConfigDialog.tsx
@@ -1,28 +1,32 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
-  Alert,
   Modal,
   Pressable,
   ScrollView,
   StyleSheet,
   Text,
   TextInput,
   View,
+  Alert,
 } from 'react-native';
-import { useForm, Controller, type FieldValues } from 'react-hook-form';
-import { validate } from 'superstruct';
+import { type Struct, validate } from 'superstruct';
 import { useAppTheme } from '../../hooks/useAppTheme';
+import {
+  formatSuperstructError,
+  parseWithUndefined,
+  stringifyWithUndefined,
+} from './utils';
 
 type Props<T> = {
   visible: boolean;
   title: string;
   initialData: T;
   onClose: () => void;
   onSave: (updated: T) => void;
-  validator?: any;
+  validator?: Struct<T, any>;
 };
 
-export default function MapConfigDialog<T extends FieldValues>({
+export default function MapConfigDialog<T>({
   visible,
   title,
   initialData,
@@ -32,74 +36,94 @@ export default function MapConfigDialog<T extends FieldValues>({
 }: Props<T>) {
   const theme = useAppTheme();
   const styles = getThemedStyles(theme);
-  const { control, handleSubmit, reset } = useForm<T>();
 
-  const onSubmit = (data: T) => {
-    if (validator) {
-      const [err, value] = validate(data, validator);
-      if (err) {
-        Alert.alert(
-          'Input error',
-          `${err.path?.join('.') || '(root)'}: ${err.message}`
-        );
-        return;
+  const [text, setText] = useState(() => stringifyWithUndefined(initialData));
+  const [isValid, setIsValid] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setText(stringifyWithUndefined(initialData));
+    setIsValid(true);
+    setError(null);
+  }, [initialData]);
+
+  const handleChange = (value: string) => {
+    setText(value);
+    try {
+      const parsed = parseWithUndefined(value);
+
+      if (validator) {
+        const [err] = validate(parsed, validator);
+        if (err) {
+          setIsValid(false);
+          setError(formatSuperstructError(err, validator));
+          return;
+        }
       }
-      onSave(value as T);
-    } else {
-      onSave(data);
+
+      setIsValid(true);
+      setError(null);
+    } catch (e: any) {
+      setIsValid(false);
+      setError(e.message);
     }
-    onClose();
   };
 
-  React.useEffect(() => {
-    reset(initialData);
-  }, [initialData, reset]);
+  const handleSave = () => {
+    if (!isValid) {
+      Alert.alert('Invalid JSON', error ?? 'Please fix JSON before saving.');
+      return;
+    }
+
+    try {
+      const parsed = parseWithUndefined(text);
+
+      if (validator) {
+        const [err, value] = validate(parsed, validator);
+        if (err) {
+          Alert.alert(
+            'Validation Error',
+            formatSuperstructError(err, validator)
+          );
+          return;
+        }
+        onSave(value as T);
+      } else {
+        onSave(parsed as T);
+      }
+
+      onClose();
+    } catch (e: any) {
+      Alert.alert('Invalid JSON', e.message);
+    }
+  };
 
   return (
     <Modal visible={visible} transparent animationType="fade">
       <View style={styles.overlay}>
         <View style={styles.dialog}>
           <Text style={styles.title}>{title}</Text>
           <ScrollView contentContainerStyle={styles.scroll}>
-            {Object.entries(initialData).map(([key, _]) => (
-              <View key={key} style={styles.field}>
-                <Text style={styles.label}>{key}</Text>
-                <Controller
-                  control={control}
-                  name={key as any}
-                  render={({ field: { onChange, value } }) => (
-                    <TextInput
-                      style={styles.input}
-                      spellCheck={false}
-                      autoCapitalize={'none'}
-                      autoCorrect={false}
-                      value={
-                        typeof value === 'object'
-                          ? JSON.stringify(value, null, 2)
-                          : String(value ?? '')
-                      }
-                      onChangeText={(v) => {
-                        try {
-                          onChange(JSON.parse(v));
-                        } catch {
-                          onChange(v);
-                        }
-                      }}
-                      multiline={typeof value === 'object'}
-                    />
-                  )}
-                />
-              </View>
-            ))}
+            <TextInput
+              value={text}
+              onChangeText={handleChange}
+              multiline
+              style={[styles.input, styles.multiline, !isValid && styles.error]}
+              autoCorrect={false}
+              autoCapitalize="none"
+              spellCheck={false}
+            />
+            {!isValid && (
+              <Text style={[styles.errorText]}>
+                {error ?? 'Invalid JSON or schema mismatch'}
+              </Text>
+            )}
           </ScrollView>
           <View style={styles.actions}>
             <Pressable onPress={onClose} style={styles.cancelButton}>
               <Text style={styles.buttonText}>Cancel</Text>
             </Pressable>
-            <Pressable
-              onPress={handleSubmit(onSubmit)}
-              style={styles.saveButton}
-            >
+            <Pressable onPress={handleSave} style={styles.saveButton}>
               <Text style={styles.buttonText}>Save</Text>
             </Pressable>
           </View>
@@ -122,16 +146,15 @@ const getThemedStyles = (theme: any) =>
       maxHeight: '85%',
       backgroundColor: theme.bgPrimary,
       borderRadius: 12,
+      flexShrink: 1,
     },
+    scroll: { padding: 12 },
     title: {
       padding: 12,
       fontSize: 18,
       fontWeight: '600',
       color: theme.textPrimary,
     },
-    scroll: { padding: 12 },
-    field: { marginBottom: 12 },
-    label: { fontSize: 14, marginBottom: 4, color: theme.label },
     input: {
       borderWidth: 1,
       borderRadius: 8,
@@ -142,6 +165,16 @@ const getThemedStyles = (theme: any) =>
       backgroundColor: theme.inputBg,
       fontFamily: 'monospace',
     },
+    multiline: { minHeight: 250, textAlignVertical: 'top' },
+    errorText: {
+      marginTop: 6,
+      color: theme.errorBorder,
+      fontSize: 12,
+      fontFamily: 'monospace',
+    },
+    error: {
+      borderColor: theme.errorBorder,
+    },
     actions: {
       flexDirection: 'row',
       justifyContent: 'flex-end',
diff --git a/example/src/components/maptConfigDialog/utils.ts b/example/src/components/maptConfigDialog/utils.ts
@@ -0,0 +1,91 @@
+import type { Struct, StructError } from 'superstruct';
+
+export function getSchemaNodeAtPath<T>(
+  validator: Struct<T, any>,
+  path: Array<string | number>
+): any | null {
+  let node: any = (validator as any)?.schema;
+  if (!node) return null;
+
+  for (const seg of path) {
+    if (!node) return null;
+    if (
+      node.type === 'object' &&
+      node.schema &&
+      typeof node.schema === 'object'
+    ) {
+      node = node.schema[seg as any];
+      continue;
+    }
+
+    if (node && typeof node === 'object' && seg in node) {
+      node = node[seg as any];
+      continue;
+    }
+    return null;
+  }
+  return node || null;
+}
+
+export function extractAllowedValuesFromNode(node: any): string[] | null {
+  if (!node || typeof node !== 'object') return null;
+
+  if (node.type === 'union' && Array.isArray(node._schema)) {
+    const vals: string[] = node._schema
+      .map((s: any) => String(s?.schema))
+      .filter((v: any) => typeof v === 'string');
+    return vals.length ? [...new Set(vals)] : null;
+  }
+
+  if (node.type === 'enums' && node.schema && typeof node.schema === 'object') {
+    const vals = Object.values(node.schema)
+      .filter((v) => typeof v === 'string' || typeof v === 'number')
+      .map(String);
+    const strOnly = vals.filter((v) => isNaN(Number(v)));
+    return (strOnly.length ? strOnly : vals).length
+      ? [...new Set(strOnly.length ? strOnly : vals)]
+      : null;
+  }
+
+  if (node.type === 'literal') {
+    const lit = node.schema;
+    if (typeof lit === 'string' || typeof lit === 'number')
+      return [String(lit)];
+  }
+
+  return null;
+}
+
+export function formatSuperstructError<T>(
+  err: StructError,
+  validator: Struct<T, any>
+): string {
+  const path = err.path ?? [];
+  const pathStr = path.length ? path.join('.') : '(root)';
+
+  const node = getSchemaNodeAtPath(validator, path);
+
+  const allowed = extractAllowedValuesFromNode(node);
+  if (allowed && allowed.length) {
+    return `${pathStr}: must be one of ${allowed.map((v) => `"${v}"`).join(', ')}`;
+  }
+
+  if (node?.type && ['number', 'boolean', 'string'].includes(node.type)) {
+    return `${pathStr}: expected ${node.type}`;
+  }
+
+  return `${pathStr}: ${err.message}`;
+}
+
+export function stringifyWithUndefined(obj: any) {
+  return JSON.stringify(
+    obj,
+    (_, v) => (v === undefined ? '__undefined__' : v),
+    2
+  ).replace(/"__undefined__"/g, 'undefined');
+}
+
+export function parseWithUndefined(json: string) {
+  const fixed = json.replace(/\bundefined\b/g, '"__undefined__"');
+  return JSON.parse(fixed, (_, v) => (v === '__undefined__' ? undefined : v));
+}
diff --git a/example/src/theme.ts b/example/src/theme.ts
@@ -12,6 +12,7 @@ export const lightTheme = {
   inputBg: '#FFFFFF',
   buttonBg: '#3B82F6',
   cancelBg: '#9CA3AF',
+  errorBorder: '#ff0000',
 };
 
 export const darkTheme = {
@@ -28,6 +29,7 @@ export const darkTheme = {
   inputBg: '#2C2C2E',
   buttonBg: '#2D6BE9',
   cancelBg: '#4B5563',
+  errorBorder: '#ff0000',
 };
 
 export type AppTheme = typeof lightTheme;
