For text field: more kobalte-y, add description, proper error + Show …

…! when accordion has error

Using
https://modularforms.dev/solid/guides/kobalte
and
https://kobalte.dev/docs/core/components/text-field

apps/class-solid/src/components/ObjectField.tsx

@@ -1,10 +1,13 @@
 import type { JSONSchemaType } from "ajv";
-import { For, Match, Switch } from "solid-js";
+import { For, Match, Show, Switch, splitProps } from "solid-js";
 import {
   TextField,
+  TextFieldDescription,
+  TextFieldErrorMessage,
   TextFieldInput,
   TextFieldLabel,
 } from "~/components/ui/text-field";
+import { MdiExclamationThick } from "./icons";
 import {
   Accordion,
   AccordionContent,
@@ -47,7 +50,20 @@ export function ObjectField<S>({
       </Match>
       <Match when={!isRoot}>
         <AccordionItem value={name}>
-          <AccordionTrigger>{schema.description ?? name}</AccordionTrigger>
+          <Field name={name}>
+            {/* biome-ignore lint/suspicious/noExplicitAny: json schema types are too complex */}
+            {(field: any) => (
+              <AccordionTrigger>
+                <span>{schema.title ?? name}</span>
+                {/* TODO after child error has been fixed, this keeps showing, find way to clear it before submit */}
+                <Show when={field.error}>
+                  <span class="text-destructive" title="Sub form has errors">
+                    <MdiExclamationThick />
+                  </span>
+                </Show>
+              </AccordionTrigger>
+            )}
+          </Field>
           <AccordionContent>{Children()}</AccordionContent>
         </AccordionItem>
       </Match>
@@ -86,32 +102,42 @@ export function MyTextField({
   // TODO use generics to type more explicitly
   // biome-ignore lint/suspicious/noExplicitAny: <explanation>
   function myfield(field: any, props: any) {
+    const [rootProps, inputProps] = splitProps(
+      props,
+      ["name", "onChange", "required", "disabled"],
+      ["placeholder", "ref", "onInput", "onBlur"],
+    );
     return (
       <>
-        <TextField class="flex items-center gap-2 p-1">
-          <TextFieldLabel for={name} class="basis-1/2">
-            {schema.description ?? name}
-          </TextFieldLabel>
-          <TextFieldInput
-            type="text"
-            id={props.name}
-            name={props.name}
-            value={field.value}
-            placeholder={schema.default}
-            {...props}
-            class="basis-1/2"
-          />
+        <TextField
+          class="p-1"
+          {...rootProps}
+          value={field.value}
+          validationState={field.error ? "invalid" : "valid"}
+        >
+          <div class="flex items-center gap-2">
+            <TextFieldLabel class="basis-1/2">
+              {schema.title ?? name}
+            </TextFieldLabel>
+            <TextFieldInput
+              {...inputProps}
+              placeholder={schema.default}
+              type="text"
+              class="basis-1/2"
+            />
+          </div>
+          {schema.description && (
+            <TextFieldDescription class="pt-2">
+              {schema.description}
+            </TextFieldDescription>
+          )}
+          <TextFieldErrorMessage class="pt-2">
+            {field.error}
+          </TextFieldErrorMessage>
         </TextField>
-        {field.error && (
-          <div class="bg-error p-2 text-error-foreground">{field.error}</div>
-        )}
       </>
     );
   }
 
-  return (
-    // TODO: display units after input field?
-    // TODO: add more modularforms functionality
-    <Field name={name}>{myfield}</Field>
-  );
+  return <Field name={name}>{myfield}</Field>;
 }