UI/TextInput: use FieldLayout

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

@@ -1,62 +1,51 @@
-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 { splitProps, type JSX } from "solid-js";
+import { InputBase, InputError, InputLabel } from "@/src/components/inputBase";
 import { Typography } from "@/src/components/Typography";
+import { FieldLayout } from "./layout";
 
 interface TextInputProps {
-  value: string;
-  inputProps?: JSX.InputHTMLAttributes<HTMLInputElement>;
-  label: JSX.Element;
-  altLabel?: JSX.Element;
-  helperText?: JSX.Element;
+  // Common
   error?: string;
   required?: boolean;
-  type?: string;
-  inlineLabel?: JSX.Element;
-  class?: string;
-  adornment?: {
-    position: "start" | "end";
-    content: JSX.Element;
-  };
   disabled?: boolean;
+  // Passed to input
+  value: string;
+  inputProps?: JSX.InputHTMLAttributes<HTMLInputElement>;
   placeholder?: string;
+  // Passed to label
+  label: JSX.Element;
+  help?: string;
+  // Passed to layouad
+  class?: string;
 }
 
 export function TextInput(props: TextInputProps) {
-  // createEffect(() => {
-  //   console.log("TextInput", props.error, props.value);
-  // });
+  const [layoutProps, rest] = splitProps(props, ["class"]);
   return (
-    <div
-      class="grid grid-cols-12"
-      classList={{
-        "mb-[14.5px]": !props.error,
-      }}
-    >
-      <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"
+    <FieldLayout
+      label={
+        <InputLabel
+          class="col-span-2"
+          required={props.required}
+          error={!!props.error}
+          help={props.help}
         >
-          {props.error}
-        </Typography>
-      )}
-    </div>
+          {props.label}
+        </InputLabel>
+      }
+      field={
+        <InputBase
+          error={!!props.error}
+          required={props.required}
+          disabled={props.disabled}
+          placeholder={props.placeholder}
+          class="col-span-10"
+          {...props.inputProps}
+          value={props.value}
+        />
+      }
+      error={props.error && <InputError error={props.error} />}
+      {...layoutProps}
+    />
   );
 }