|
| 1 | +// src/components/FormField.tsx |
| 2 | +import React, { useState } from "react" |
| 3 | +import { |
| 4 | + VscodeButton, |
| 5 | + VscodeSingleSelect, |
| 6 | + VscodeOption, |
| 7 | + VscodeTextfield, |
| 8 | + VscodeCheckbox, |
| 9 | +} from "@vscode-elements/react-elements" |
| 10 | +import { marked } from "marked" |
| 11 | + |
| 12 | +interface FormFieldProps { |
| 13 | + field: JSONSchemaSimpleType |
| 14 | + value: string | boolean | number |
| 15 | + onChange: (value: string | boolean | number) => void |
| 16 | +} |
| 17 | + |
| 18 | +const FormField: React.FC<FormFieldProps> = ({ field, value, onChange }) => { |
| 19 | + switch (field.type) { |
| 20 | + case "string": |
| 21 | + if (field.enum) { |
| 22 | + return ( |
| 23 | + <VscodeSingleSelect |
| 24 | + value={value as string} |
| 25 | + onChange={(e) => { |
| 26 | + const target = e.target as HTMLSelectElement |
| 27 | + onChange(target.value) |
| 28 | + }} |
| 29 | + > |
| 30 | + {field.enum.map((option) => ( |
| 31 | + <VscodeOption key={option} value={option}> |
| 32 | + {option} |
| 33 | + </VscodeOption> |
| 34 | + ))} |
| 35 | + </VscodeSingleSelect> |
| 36 | + ) |
| 37 | + } |
| 38 | + return ( |
| 39 | + <VscodeTextfield |
| 40 | + value={value as string} |
| 41 | + onChange={(e) => { |
| 42 | + const target = e.target as HTMLInputElement |
| 43 | + onChange(target.value) |
| 44 | + }} |
| 45 | + /> |
| 46 | + ) |
| 47 | + case "boolean": |
| 48 | + return ( |
| 49 | + <VscodeCheckbox |
| 50 | + checked={value as boolean} |
| 51 | + onChange={(e) => { |
| 52 | + const target = e.target as HTMLInputElement |
| 53 | + onChange(target.checked) |
| 54 | + }} |
| 55 | + /> |
| 56 | + ) |
| 57 | + default: |
| 58 | + return ( |
| 59 | + <VscodeTextfield |
| 60 | + value={value as string} |
| 61 | + onChange={(e) => { |
| 62 | + const target = e.target as HTMLInputElement |
| 63 | + onChange(target.value) |
| 64 | + }} |
| 65 | + /> |
| 66 | + ) |
| 67 | + } |
| 68 | +} |
| 69 | + |
| 70 | +interface JsonSchemaFormProps { |
| 71 | + schema: JSONSchemaObject |
| 72 | +} |
| 73 | + |
| 74 | +export const JsonSchemaForm: React.FC<JsonSchemaFormProps> = ({ schema }) => { |
| 75 | + const [formData, setFormData] = useState<FormData>({}) |
| 76 | + const [markdown, setMarkdown] = useState<string>("") |
| 77 | + |
| 78 | + const handleSubmit = (e: React.FormEvent) => { |
| 79 | + e.preventDefault() |
| 80 | + const markdownOutput = Object.entries(formData) |
| 81 | + .map(([key, value]) => `### ${key}\n${value}`) |
| 82 | + .join("\n\n") |
| 83 | + setMarkdown(markdownOutput) |
| 84 | + } |
| 85 | + |
| 86 | + const handleFieldChange = ( |
| 87 | + fieldName: string, |
| 88 | + value: string | boolean | number |
| 89 | + ) => { |
| 90 | + setFormData((prev) => ({ |
| 91 | + ...prev, |
| 92 | + [fieldName]: value, |
| 93 | + })) |
| 94 | + } |
| 95 | + |
| 96 | + return ( |
| 97 | + <div className="container"> |
| 98 | + <form onSubmit={handleSubmit}> |
| 99 | + {Object.entries(schema.properties || {}).map( |
| 100 | + ([fieldName, field]) => ( |
| 101 | + <div key={fieldName} className="field-container"> |
| 102 | + <label>{fieldName}</label> |
| 103 | + <FormField |
| 104 | + field={field} |
| 105 | + value={formData[fieldName] || ""} |
| 106 | + onChange={(value) => |
| 107 | + handleFieldChange(fieldName, value) |
| 108 | + } |
| 109 | + /> |
| 110 | + {field.description && ( |
| 111 | + <small className="description"> |
| 112 | + {field.description} |
| 113 | + </small> |
| 114 | + )} |
| 115 | + </div> |
| 116 | + ) |
| 117 | + )} |
| 118 | + <VSCodeButton type="submit">Generate Markdown</VSCodeButton> |
| 119 | + </form> |
| 120 | + |
| 121 | + {markdown && ( |
| 122 | + <div className="markdown-output"> |
| 123 | + <h2>Output:</h2> |
| 124 | + <div |
| 125 | + dangerouslySetInnerHTML={{ __html: marked(markdown) }} |
| 126 | + className="markdown-content" |
| 127 | + /> |
| 128 | + </div> |
| 129 | + )} |
| 130 | + </div> |
| 131 | + ) |
| 132 | +} |
0 commit comments