fix: migrate input and field to base-ui

Author: scriptcoded

packages/ui-react/.storybook/style.css

@@ -3,7 +3,7 @@
 
 @layer base {
   html {
-    /* @apply text-gray-dark; */
-    @apply text-red;
+    /* Use a bold color to clearly show cases where we've forgotten to set text color. */
+    color: #ff00ff;
   }
 }

packages/ui-react/src/components/field/field.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, Preview } from "@storybook/react";
+import * as Input from "../input/input.js";
+import * as Field from "./field.js";
+
+export default {
+  title: "Components/Field",
+  component: Field.Field,
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+} satisfies Meta;
+
+export const WithInput = {
+  args: {
+    children: (
+      <>
+        <Field.Label>Name</Field.Label>
+        <Input.Input />
+      </>
+    ),
+  },
+} satisfies Preview;
+
+export const WithValidation = {
+  args: {
+    validate: () => "Please enter a valid email address.",
+    children: (
+      <>
+        <Field.Label>Email</Field.Label>
+        <Input.Input />
+
+        <Field.Error />
+        <Field.Description>
+          This field will always fail validation on blur.
+        </Field.Description>
+      </>
+    ),
+  },
+} satisfies Preview;

packages/ui-react/src/components/field/field.tsx

@@ -0,0 +1,45 @@
+import { Field } from "@base-ui-components/react/field";
+import { cn } from "../../lib/utils.js";
+
+export type FieldProps = React.HTMLAttributes<HTMLDivElement> & {
+  asChild?: boolean;
+  label: string;
+  labelFor: string;
+};
+
+const Root = Field.Root;
+const Control = Field.Control;
+const Validity = Field.Validity;
+
+const FieldError = ({ className, ...props }: Field.Error.Props) => {
+  return (
+    <Field.Error className={cn("text-sm text-red", className)} {...props} />
+  );
+};
+
+const Description = ({ className, ...props }: Field.Description.Props) => {
+  return (
+    <Field.Description
+      className={cn("text-sm text-gray-800", className)}
+      {...props}
+    />
+  );
+};
+
+const Label = ({ className, ...props }: Field.Label.Props) => {
+  return (
+    <Field.Label
+      className={cn("font-bold text-sm text-gray-dark", className)}
+      {...props}
+    />
+  );
+};
+
+export {
+  Root as Field,
+  Control,
+  Validity,
+  FieldError as Error,
+  Description,
+  Label,
+};

packages/ui-react/src/components/form-field/form-field.stories.tsx

@@ -1,44 +1,34 @@
-import { forwardRef } from "react";
+import { Input as InputPrimitive } from "@base-ui-components/react/input";
 import { cn } from "../../lib/utils.js";
 
-export type InputProps = Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  "placeholder"
-> & {
-  // Make id required
-  id: string;
-};
+export type InputProps = Omit<InputPrimitive.Props, "placeholder">;
 
-const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type = "text", ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          `
-            flex
-            h-10 w-full px-3 py-2
-            rounded-lg
-            border border-gray-300
-            bg-gray-100 text-gray-dark
-            text-base
-            file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground
-            focus-visible:outline-none
-            focus-visible:border-gray-500
-            disabled:cursor-not-allowed
-            disabled:opacity-50
-          `,
-          className,
-        )}
-        ref={ref}
-        {...props}
-        // Explicitly set placeholder to empty string to avoid users ignoring
-        // the types and passing placeholder anyways.
-        placeholder=""
-      />
-    );
-  },
-);
-Input.displayName = "Input";
+const Input = ({ className, type = "text", ...props }: InputProps) => {
+  return (
+    <InputPrimitive
+      type={type}
+      className={cn(
+        `
+          flex
+          h-10 w-full px-3 py-2
+          rounded-lg
+          border border-gray-300
+          bg-gray-100 text-gray-dark
+          text-base
+          file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground
+          focus-visible:outline-none
+          focus-visible:border-gray-500
+          disabled:cursor-not-allowed
+          disabled:opacity-50
+        `,
+        className,
+      )}
+      {...props}
+      // Explicitly set placeholder to empty string to prevent users from
+      // ignoring the types and passing placeholder anyways.
+      placeholder=""
+    />
+  );
+};
 
 export { Input };

packages/ui-react/src/components/form-field/form-field.tsx

@@ -1,7 +1,7 @@
 export * as Button from "./components/button/button.js";
+export * as Callout from "./components/callout/callout.js";
 export * as Checkbox from "./components/checkbox/checkbox.js";
-export * as FormField from "./components/form-field/form-field.js";
+export * as Field from "./components/field/field.js";
 export * as Input from "./components/input/input.js";
 export * as Select from "./components/select/select.js";
 export * as Toast from "./components/toast/toast.js";
-export * as Callout from "./components/callout/callout.js";