402 lines
12 KiB
TypeScript
402 lines
12 KiB
TypeScript
import { useState, useEffect, useCallback, useRef } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import JsonEditor from "./JsonEditor";
|
|
import { updateValueAtPath, JsonObject } from "@/utils/jsonPathUtils";
|
|
import { generateDefaultValue, formatFieldLabel } from "@/utils/schemaUtils";
|
|
|
|
export type JsonValue =
|
|
| string
|
|
| number
|
|
| boolean
|
|
| null
|
|
| undefined
|
|
| JsonValue[]
|
|
| { [key: string]: JsonValue };
|
|
|
|
export type JsonSchemaType = {
|
|
type:
|
|
| "string"
|
|
| "number"
|
|
| "integer"
|
|
| "boolean"
|
|
| "array"
|
|
| "object"
|
|
| "null";
|
|
description?: string;
|
|
required?: boolean;
|
|
default?: JsonValue;
|
|
properties?: Record<string, JsonSchemaType>;
|
|
items?: JsonSchemaType;
|
|
};
|
|
|
|
interface DynamicJsonFormProps {
|
|
schema: JsonSchemaType;
|
|
value: JsonValue;
|
|
onChange: (value: JsonValue) => void;
|
|
maxDepth?: number;
|
|
}
|
|
|
|
const DynamicJsonForm = ({
|
|
schema,
|
|
value,
|
|
onChange,
|
|
maxDepth = 3,
|
|
}: DynamicJsonFormProps) => {
|
|
const [isJsonMode, setIsJsonMode] = useState(false);
|
|
const [jsonError, setJsonError] = useState<string>();
|
|
// Store the raw JSON string to allow immediate feedback during typing
|
|
// while deferring parsing until the user stops typing
|
|
const [rawJsonValue, setRawJsonValue] = useState<string>(
|
|
JSON.stringify(value ?? generateDefaultValue(schema), null, 2),
|
|
);
|
|
|
|
// Use a ref to manage debouncing timeouts to avoid parsing JSON
|
|
// on every keystroke which would be inefficient and error-prone
|
|
const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
|
|
|
|
// Debounce JSON parsing and parent updates to handle typing gracefully
|
|
const debouncedUpdateParent = useCallback(
|
|
(jsonString: string) => {
|
|
// Clear any existing timeout
|
|
if (timeoutRef.current) {
|
|
clearTimeout(timeoutRef.current);
|
|
}
|
|
|
|
// Set a new timeout
|
|
timeoutRef.current = setTimeout(() => {
|
|
try {
|
|
const parsed = JSON.parse(jsonString);
|
|
onChange(parsed);
|
|
setJsonError(undefined);
|
|
} catch {
|
|
// Don't set error during normal typing
|
|
}
|
|
}, 300);
|
|
},
|
|
[onChange, setJsonError],
|
|
);
|
|
|
|
// Update rawJsonValue when value prop changes
|
|
useEffect(() => {
|
|
if (!isJsonMode) {
|
|
setRawJsonValue(
|
|
JSON.stringify(value ?? generateDefaultValue(schema), null, 2),
|
|
);
|
|
}
|
|
}, [value, schema, isJsonMode]);
|
|
|
|
const handleSwitchToFormMode = () => {
|
|
if (isJsonMode) {
|
|
// When switching to Form mode, ensure we have valid JSON
|
|
try {
|
|
const parsed = JSON.parse(rawJsonValue);
|
|
// Update the parent component's state with the parsed value
|
|
onChange(parsed);
|
|
// Switch to form mode
|
|
setIsJsonMode(false);
|
|
} catch (err) {
|
|
setJsonError(err instanceof Error ? err.message : "Invalid JSON");
|
|
}
|
|
} else {
|
|
// Update raw JSON value when switching to JSON mode
|
|
setRawJsonValue(
|
|
JSON.stringify(value ?? generateDefaultValue(schema), null, 2),
|
|
);
|
|
setIsJsonMode(true);
|
|
}
|
|
};
|
|
|
|
const renderFormFields = (
|
|
propSchema: JsonSchemaType,
|
|
currentValue: JsonValue,
|
|
path: string[] = [],
|
|
depth: number = 0,
|
|
) => {
|
|
if (
|
|
depth >= maxDepth &&
|
|
(propSchema.type === "object" || propSchema.type === "array")
|
|
) {
|
|
// Render as JSON editor when max depth is reached
|
|
return (
|
|
<JsonEditor
|
|
value={JSON.stringify(
|
|
currentValue ?? generateDefaultValue(propSchema),
|
|
null,
|
|
2,
|
|
)}
|
|
onChange={(newValue) => {
|
|
try {
|
|
const parsed = JSON.parse(newValue);
|
|
handleFieldChange(path, parsed);
|
|
setJsonError(undefined);
|
|
} catch (err) {
|
|
setJsonError(err instanceof Error ? err.message : "Invalid JSON");
|
|
}
|
|
}}
|
|
error={jsonError}
|
|
/>
|
|
);
|
|
}
|
|
|
|
switch (propSchema.type) {
|
|
case "string":
|
|
return (
|
|
<Input
|
|
type="text"
|
|
value={(currentValue as string) ?? ""}
|
|
onChange={(e) => {
|
|
const val = e.target.value;
|
|
// Allow clearing non-required fields by setting undefined
|
|
// This preserves the distinction between empty string and unset
|
|
if (!val && !propSchema.required) {
|
|
handleFieldChange(path, undefined);
|
|
} else {
|
|
handleFieldChange(path, val);
|
|
}
|
|
}}
|
|
placeholder={propSchema.description}
|
|
required={propSchema.required}
|
|
/>
|
|
);
|
|
case "number":
|
|
return (
|
|
<Input
|
|
type="number"
|
|
value={(currentValue as number)?.toString() ?? ""}
|
|
onChange={(e) => {
|
|
const val = e.target.value;
|
|
// Allow clearing non-required number fields
|
|
// This preserves the distinction between 0 and unset
|
|
if (!val && !propSchema.required) {
|
|
handleFieldChange(path, undefined);
|
|
} else {
|
|
const num = Number(val);
|
|
if (!isNaN(num)) {
|
|
handleFieldChange(path, num);
|
|
}
|
|
}
|
|
}}
|
|
placeholder={propSchema.description}
|
|
required={propSchema.required}
|
|
/>
|
|
);
|
|
case "integer":
|
|
return (
|
|
<Input
|
|
type="number"
|
|
step="1"
|
|
value={(currentValue as number)?.toString() ?? ""}
|
|
onChange={(e) => {
|
|
const val = e.target.value;
|
|
// Allow clearing non-required integer fields
|
|
// This preserves the distinction between 0 and unset
|
|
if (!val && !propSchema.required) {
|
|
handleFieldChange(path, undefined);
|
|
} else {
|
|
const num = Number(val);
|
|
// Only update if it's a valid integer
|
|
if (!isNaN(num) && Number.isInteger(num)) {
|
|
handleFieldChange(path, num);
|
|
}
|
|
}
|
|
}}
|
|
placeholder={propSchema.description}
|
|
required={propSchema.required}
|
|
/>
|
|
);
|
|
case "boolean":
|
|
return (
|
|
<Input
|
|
type="checkbox"
|
|
checked={(currentValue as boolean) ?? false}
|
|
onChange={(e) => handleFieldChange(path, e.target.checked)}
|
|
className="w-4 h-4"
|
|
required={propSchema.required}
|
|
/>
|
|
);
|
|
case "object": {
|
|
// Handle case where we have a value but no schema properties
|
|
const objectValue = (currentValue as JsonObject) || {};
|
|
|
|
// If we have schema properties, use them to render fields
|
|
if (propSchema.properties) {
|
|
return (
|
|
<div className="space-y-4 border rounded-md p-4">
|
|
{Object.entries(propSchema.properties).map(([key, prop]) => (
|
|
<div key={key} className="space-y-2">
|
|
<Label>{formatFieldLabel(key)}</Label>
|
|
{renderFormFields(
|
|
prop,
|
|
objectValue[key],
|
|
[...path, key],
|
|
depth + 1,
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
// If we have a value but no schema properties, render fields based on the value
|
|
else if (Object.keys(objectValue).length > 0) {
|
|
return (
|
|
<div className="space-y-4 border rounded-md p-4">
|
|
{Object.entries(objectValue).map(([key, value]) => (
|
|
<div key={key} className="space-y-2">
|
|
<Label>{formatFieldLabel(key)}</Label>
|
|
<Input
|
|
type="text"
|
|
value={String(value)}
|
|
onChange={(e) =>
|
|
handleFieldChange([...path, key], e.target.value)
|
|
}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
// If we have neither schema properties nor value, return null
|
|
return null;
|
|
}
|
|
case "array": {
|
|
const arrayValue = Array.isArray(currentValue) ? currentValue : [];
|
|
if (!propSchema.items) return null;
|
|
return (
|
|
<div className="space-y-4">
|
|
{propSchema.description && (
|
|
<p className="text-sm text-gray-600">{propSchema.description}</p>
|
|
)}
|
|
|
|
{propSchema.items?.description && (
|
|
<p className="text-sm text-gray-500">
|
|
Items: {propSchema.items.description}
|
|
</p>
|
|
)}
|
|
|
|
<div className="space-y-2">
|
|
{arrayValue.map((item, index) => (
|
|
<div key={index} className="flex items-center gap-2">
|
|
{renderFormFields(
|
|
propSchema.items as JsonSchemaType,
|
|
item,
|
|
[...path, index.toString()],
|
|
depth + 1,
|
|
)}
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => {
|
|
const newArray = [...arrayValue];
|
|
newArray.splice(index, 1);
|
|
handleFieldChange(path, newArray);
|
|
}}
|
|
>
|
|
Remove
|
|
</Button>
|
|
</div>
|
|
))}
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => {
|
|
const defaultValue = generateDefaultValue(
|
|
propSchema.items as JsonSchemaType,
|
|
);
|
|
handleFieldChange(path, [
|
|
...arrayValue,
|
|
defaultValue ?? null,
|
|
]);
|
|
}}
|
|
title={
|
|
propSchema.items?.description
|
|
? `Add new ${propSchema.items.description}`
|
|
: "Add new item"
|
|
}
|
|
>
|
|
Add Item
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const handleFieldChange = (path: string[], fieldValue: JsonValue) => {
|
|
if (path.length === 0) {
|
|
onChange(fieldValue);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const newValue = updateValueAtPath(value, path, fieldValue);
|
|
onChange(newValue);
|
|
} catch (error) {
|
|
console.error("Failed to update form value:", error);
|
|
onChange(value);
|
|
}
|
|
};
|
|
|
|
const shouldUseJsonMode =
|
|
schema.type === "object" &&
|
|
(!schema.properties || Object.keys(schema.properties).length === 0);
|
|
|
|
useEffect(() => {
|
|
if (shouldUseJsonMode && !isJsonMode) {
|
|
setIsJsonMode(true);
|
|
}
|
|
}, [shouldUseJsonMode, isJsonMode]);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex justify-end">
|
|
<Button variant="outline" size="sm" onClick={handleSwitchToFormMode}>
|
|
{isJsonMode ? "Switch to Form" : "Switch to JSON"}
|
|
</Button>
|
|
</div>
|
|
|
|
{isJsonMode ? (
|
|
<JsonEditor
|
|
value={rawJsonValue}
|
|
onChange={(newValue) => {
|
|
// Always update local state
|
|
setRawJsonValue(newValue);
|
|
|
|
// Use the debounced function to attempt parsing and updating parent
|
|
debouncedUpdateParent(newValue);
|
|
}}
|
|
error={jsonError}
|
|
/>
|
|
) : // If schema type is object but value is not an object or is empty, and we have actual JSON data,
|
|
// render a simple representation of the JSON data
|
|
schema.type === "object" &&
|
|
(typeof value !== "object" ||
|
|
value === null ||
|
|
Object.keys(value).length === 0) &&
|
|
rawJsonValue &&
|
|
rawJsonValue !== "{}" ? (
|
|
<div className="space-y-4 border rounded-md p-4">
|
|
<p className="text-sm text-gray-500">
|
|
Form view not available for this JSON structure. Using simplified
|
|
view:
|
|
</p>
|
|
<pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto">
|
|
{rawJsonValue}
|
|
</pre>
|
|
<p className="text-sm text-gray-500">
|
|
Use JSON mode for full editing capabilities.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
renderFormFields(schema, value)
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DynamicJsonForm;
|