[form-builder] Use TextInput from Sanity UI in StringInput

packages/@sanity/form-builder/src/inputs/StringInput.tsx

@@ -1,52 +1,50 @@
 import React from 'react'
-import {uniqueId} from 'lodash'
+import {useId} from '@reach/auto-id'
 import {StringSchemaType} from '@sanity/types'
-import TextInput from 'part:@sanity/components/textinputs/default'
-import FormField from 'part:@sanity/components/formfields/default'
+import {TextInput} from '@sanity/ui'
+import {FormField} from '@sanity/base/components'
 import PatchEvent, {set, unset} from '../PatchEvent'
 import {Props} from './types'
 
-export default class StringInput extends React.Component<Props<string, StringSchemaType>> {
-  _input: TextInput | null
-  _inputId = uniqueId('StringInput')
-  handleChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
-    const value = event.currentTarget.value
-    this.props.onChange(PatchEvent.from(value ? set(value) : unset()))
-  }
-  focus() {
-    if (this._input) {
-      this._input.focus()
-    }
-  }
-  setInput = (input: TextInput | null) => {
-    this._input = input
-  }
-  render() {
-    const {value, readOnly, type, markers, level, onFocus, onBlur, presence} = this.props
-    const validation = markers.filter((marker) => marker.type === 'validation')
-    const errors = validation.filter((marker) => marker.level === 'error')
-    return (
-      <FormField
-        markers={markers}
-        level={level}
-        label={type.title}
-        description={type.description}
-        presence={presence}
-        labelFor={this._inputId}
-      >
-        <TextInput
-          inputId={this._inputId}
-          customValidity={errors.length > 0 ? errors[0].item.message : ''}
-          type="text"
-          value={value}
-          readOnly={readOnly}
-          placeholder={type.placeholder}
-          onChange={this.handleChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          ref={this.setInput}
-        />
-      </FormField>
-    )
-  }
-}
+const StringInput = React.forwardRef(function StringInput(
+  props: Props<string, StringSchemaType>,
+  forwardedRef: React.ForwardedRef<HTMLInputElement>
+) {
+  const {value, readOnly, type, markers, level, onFocus, onBlur, onChange, presence} = props
+  const inputId = useId()
+  const validation = markers.filter((marker) => marker.type === 'validation')
+  const errors = validation.filter((marker) => marker.level === 'error')
+
+  const handleChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const inputValue = event.currentTarget.value
+      onChange(PatchEvent.from(inputValue ? set(inputValue) : unset()))
+    },
+    [onChange]
+  )
+
+  return (
+    <FormField
+      description={type.description}
+      inputId={inputId}
+      level={level}
+      __unstable_markers={markers}
+      __unstable_presence={presence}
+      title={type.title}
+    >
+      <TextInput
+        id={inputId}
+        customValidity={errors.length > 0 ? errors[0].item.message : ''}
+        value={value || ''}
+        readOnly={Boolean(readOnly)}
+        placeholder={type.placeholder}
+        onChange={handleChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        ref={forwardedRef}
+      />
+    </FormField>
+  )
+})
+
+export default StringInput