UI: replace TextInput with simple Layout of InputBase, InputLabel, ErrorMessage

pkgs/webview-ui/app/src/Form/fields/TextInput.tsx

@@ -1,6 +1,8 @@
 import { createEffect, Show, type JSX } from "solid-js";
 import cx from "classnames";
 import { Label } from "../base/label";
+import { InputBase, InputLabel } from "@/src/components/inputBase";
+import { Typography } from "@/src/components/Typography";
 
 interface TextInputProps {
   value: string;
@@ -22,49 +24,39 @@ interface TextInputProps {
 }
 
 export function TextInput(props: TextInputProps) {
-  const value = () => props.value;
-
+  // createEffect(() => {
+  //   console.log("TextInput", props.error, props.value);
+  // });
   return (
-    <label
-      class={cx("form-control w-full", props.class)}
-      aria-disabled={props.disabled}
+    <div
+      class="grid grid-cols-12"
+      classList={{
+        "mb-[14.5px]": !props.error,
+      }}
     >
-      <div class="label">
-        <Label label={props.label} required={props.required} />
-        <span class="label-text-alt block">{props.altLabel}</span>
-      </div>
-
-      <div class="input input-bordered flex items-center gap-2">
-        <Show when={props.adornment && props.adornment.position === "start"}>
-          {props.adornment?.content}
-        </Show>
-        {props.inlineLabel}
-        <input
-          {...props.inputProps}
-          value={value()}
-          type={props.type ? props.type : "text"}
-          class="grow"
-          classList={{
-            "input-disabled": props.disabled,
-          }}
-          placeholder={`${props.placeholder || props.label}`}
-          required
-          disabled={props.disabled}
-        />
-        <Show when={props.adornment && props.adornment.position === "end"}>
-          {props.adornment?.content}
-        </Show>
-      </div>
-      <div class="label">
-        {props.helperText && (
-          <span class="label-text text-neutral">{props.helperText}</span>
-        )}
-        {props.error && (
-          <span class="label-text-alt font-bold text-error-700">
-            {props.error}
-          </span>
-        )}
-      </div>
-    </label>
+      <InputLabel
+        class="col-span-2"
+        required={props.required}
+        error={!!props.error}
+      >
+        {props.label}
+      </InputLabel>
+      <InputBase
+        error={!!props.error}
+        class="col-span-10"
+        {...props.inputProps}
+        value={props.value}
+      />
+      {props.error && (
+        <Typography
+          hierarchy="body"
+          size="xxs"
+          weight="medium"
+          class="col-span-full px-1 !fg-semantic-4"
+        >
+          {props.error}
+        </Typography>
+      )}
+    </div>
   );
 }