const formData = [
    { label, defaultValue, validateKeypress, validateBlur, validateSubmit, notifyOnChange },
    {}
]
const outFormData = [
    { label, defaultValue, ref },
    {}
]
function MyForm() {
    const priceField = makeFormField({ label: "Price", def: 0 })
    const { fields, submit } = useMemo(makeForm([
        { label: 'Cost', min: 0, def: data.cost, required: true, type: CurrencyInput },
        priceField
    ]), [data])
    return (
        <form fields={fields}>
            <CurrencyInput label="Cost" min={0} def={data.cost} required nofity={[priceField]} />
            <Field {...fields.cost.field} />
            <CurrencyInput label="Price" {...priceField} />
            <button onclick={submit} />
        </form>
    )
}

function Field({ label, min, def, required, validateKeyPress, validateChange, ref, form, key, depends }) {
    return (
        <label value={label}>
            $<input type="text" onblur={validateChange} ref={ref} />
        </label>
    )
}
