From ad3e547b2269907e8b6dd25acb6ee76e5d368727 Mon Sep 17 00:00:00 2001
From: Justin Bennett <git@just-be.dev>
Date: Thu, 21 Jul 2022 18:14:19 +0100
Subject: [PATCH 1/2] Remove formik Field components from UI layer

---
 app/components/form/fields/CheckboxField.tsx  |  13 ++
 app/components/form/fields/ListboxField.tsx   |   4 +-
 app/components/form/fields/RadioField.tsx     |   4 +-
 app/components/form/fields/TagsField.tsx      |   4 +-
 app/components/form/fields/TextField.tsx      |  28 ++--
 app/components/form/fields/index.ts           |   1 +
 app/forms/firewall-rules-create.tsx           | 139 +++++++-----------
 app/forms/instance-create.tsx                 |  18 +--
 .../project/networking/VpcPage/VpcPage.e2e.ts |  10 +-
 libs/ui/index.ts                              |   2 +-
 libs/ui/lib/checkbox/Checkbox.tsx             |  10 --
 libs/ui/lib/radio/Radio.tsx                   |   5 +-
 .../TextInput.stories.tsx}                    |   8 +-
 .../TextInput.tsx}                            |  30 ++--
 14 files changed, 121 insertions(+), 155 deletions(-)
 create mode 100644 app/components/form/fields/CheckboxField.tsx
 rename libs/ui/lib/{text-field/TextField.stories.tsx => text-input/TextInput.stories.tsx} (64%)
 rename libs/ui/lib/{text-field/TextField.tsx => text-input/TextInput.tsx} (78%)

diff --git a/app/components/form/fields/CheckboxField.tsx b/app/components/form/fields/CheckboxField.tsx
new file mode 100644
index 0000000000..0ace09912d
--- /dev/null
+++ b/app/components/form/fields/CheckboxField.tsx
@@ -0,0 +1,13 @@
+import type { FieldAttributes } from 'formik'
+import { Field } from 'formik'
+
+import type { CheckboxProps } from '@oxide/ui'
+import { Checkbox } from '@oxide/ui'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type CheckboxFieldProps = CheckboxProps & Omit<FieldAttributes<any>, 'type'>
+
+/** Formik Field version of Checkbox */
+export const CheckboxField = (props: CheckboxFieldProps) => (
+  <Field type="checkbox" as={Checkbox} {...props} />
+)
diff --git a/app/components/form/fields/ListboxField.tsx b/app/components/form/fields/ListboxField.tsx
index dbcdaf3839..c2651c4fe4 100644
--- a/app/components/form/fields/ListboxField.tsx
+++ b/app/components/form/fields/ListboxField.tsx
@@ -1,7 +1,7 @@
 import cn from 'classnames'
 import { useField } from 'formik'
 
-import { FieldLabel, Listbox, TextFieldHint } from '@oxide/ui'
+import { FieldLabel, Listbox, TextInputHint } from '@oxide/ui'
 
 export type ListboxFieldProps = {
   name: string
@@ -35,7 +35,7 @@ export function ListboxField({
         <FieldLabel id={`${id}-label`} tip={description} optional={!required}>
           {label}
         </FieldLabel>
-        {helpText && <TextFieldHint id={`${id}-help-text`}>{helpText}</TextFieldHint>}
+        {helpText && <TextInputHint id={`${id}-help-text`}>{helpText}</TextInputHint>}
       </div>
       <Listbox
         defaultValue={value}
diff --git a/app/components/form/fields/RadioField.tsx b/app/components/form/fields/RadioField.tsx
index 075b1fe3fb..9b328130e1 100644
--- a/app/components/form/fields/RadioField.tsx
+++ b/app/components/form/fields/RadioField.tsx
@@ -1,7 +1,7 @@
 import cn from 'classnames'
 
 import type { RadioGroupProps } from '@oxide/ui'
-import { FieldLabel, RadioGroup, TextFieldHint } from '@oxide/ui'
+import { FieldLabel, RadioGroup, TextInputHint } from '@oxide/ui'
 
 // TODO: Centralize these docstrings perhaps on the `FieldLabel` component?
 export interface RadioFieldProps extends Omit<RadioGroupProps, 'name'> {
@@ -48,7 +48,7 @@ export function RadioField({
           </FieldLabel>
         )}
         {/* TODO: Figure out where this hint field def should live */}
-        {helpText && <TextFieldHint id={`${id}-help-text`}>{helpText}</TextFieldHint>}
+        {helpText && <TextInputHint id={`${id}-help-text`}>{helpText}</TextInputHint>}
       </div>
       <RadioGroup
         name={name}
diff --git a/app/components/form/fields/TagsField.tsx b/app/components/form/fields/TagsField.tsx
index 1a88bbef30..5163ad775d 100644
--- a/app/components/form/fields/TagsField.tsx
+++ b/app/components/form/fields/TagsField.tsx
@@ -1,4 +1,4 @@
-import { Button, FieldLabel, TextFieldHint } from '@oxide/ui'
+import { Button, FieldLabel, TextInputHint } from '@oxide/ui'
 import { capitalize } from '@oxide/util'
 
 export interface TagsFieldProps {
@@ -17,7 +17,7 @@ export function TagsField(props: TagsFieldProps) {
         {title || capitalize(name)}
       </FieldLabel>
       {/* TODO: Should TextFieldHint be grouped with FieldLabel? */}
-      {hint && <TextFieldHint id={`${id}-hint`}>{hint}</TextFieldHint>}
+      {hint && <TextInputHint id={`${id}-hint`}>{hint}</TextInputHint>}
       <Button
         variant="default"
         size="sm"
diff --git a/app/components/form/fields/TextField.tsx b/app/components/form/fields/TextField.tsx
index 8932f8da8e..7e3536a8cf 100644
--- a/app/components/form/fields/TextField.tsx
+++ b/app/components/form/fields/TextField.tsx
@@ -1,20 +1,22 @@
 import cn from 'classnames'
+import type { FieldValidator } from 'formik'
+import { useField } from 'formik'
 
 import type {
   TextAreaProps as UITextAreaProps,
-  TextFieldBaseProps as UITextFieldProps,
+  TextInputBaseProps as UITextFieldProps,
 } from '@oxide/ui'
-import { TextFieldError } from '@oxide/ui'
-import { TextFieldHint } from '@oxide/ui'
-import { FieldLabel, TextField as UITextField } from '@oxide/ui'
+import { TextInputError } from '@oxide/ui'
+import { TextInputHint } from '@oxide/ui'
+import { FieldLabel, TextInput as UITextField } from '@oxide/ui'
 import { capitalize } from '@oxide/util'
 
-import { useFieldError } from '../../../hooks/useFieldError'
-
 export interface TextFieldProps extends UITextFieldProps {
   id: string
   /** Will default to id if not provided */
   name?: string
+  /** HTML type attribute, defaults to text */
+  type?: string
   /** Will default to name if not provided */
   label?: string
   /**
@@ -35,17 +37,20 @@ export interface TextFieldProps extends UITextFieldProps {
   description?: string
   placeholder?: string
   units?: string
+  validate?: FieldValidator
 }
 
 export function TextField({
   id,
   name = id,
+  type = 'text',
   label = capitalize(name),
   units,
+  validate,
   ...props
 }: TextFieldProps & UITextAreaProps) {
   const { description, helpText, required } = props
-  const error = useFieldError(name)
+  const [field, meta] = useField({ name, validate, type })
   return (
     <div className="max-w-lg">
       <div className="mb-2">
@@ -53,19 +58,20 @@ export function TextField({
           {label} {units && <span className="ml-1 text-secondary">({units})</span>}
         </FieldLabel>
       </div>
-      {helpText && <TextFieldHint id={`${id}-help-text`}>{helpText}</TextFieldHint>}
+      {helpText && <TextInputHint id={`${id}-help-text`}>{helpText}</TextInputHint>}
       <UITextField
         id={id}
-        name={name}
         title={label}
-        error={!!error}
+        type={type}
+        error={!!meta.error}
         aria-labelledby={cn(`${id}-label`, {
           [`${id}-help-text`]: !!description,
         })}
         aria-describedby={description ? `${id}-label-tip` : undefined}
         {...props}
+        {...field}
       />
-      <TextFieldError name={name} />
+      <TextInputError>{meta.error}</TextInputError>
     </div>
   )
 }
diff --git a/app/components/form/fields/index.ts b/app/components/form/fields/index.ts
index c8911ac82d..4f9f87ef5b 100644
--- a/app/components/form/fields/index.ts
+++ b/app/components/form/fields/index.ts
@@ -1,3 +1,4 @@
+export * from './CheckboxField'
 export * from './DescriptionField'
 export * from './DiskSizeField'
 export * from './DisksTableField'
diff --git a/app/forms/firewall-rules-create.tsx b/app/forms/firewall-rules-create.tsx
index 960955f9f0..8321ff6b79 100644
--- a/app/forms/firewall-rules-create.tsx
+++ b/app/forms/firewall-rules-create.tsx
@@ -9,22 +9,18 @@ import {
   useApiQueryClient,
 } from '@oxide/api'
 import type { ErrorResponse, VpcFirewallRule, VpcFirewallRuleUpdate } from '@oxide/api'
+import { Button, Delete10Icon, Divider, Radio, Table } from '@oxide/ui'
+
 import {
-  Button,
   CheckboxField,
-  Delete10Icon,
-  Divider,
-  FieldLabel,
-  NumberTextField,
-  Radio,
-  RadioGroup,
-  Table,
+  DescriptionField,
+  Form,
+  ListboxField,
+  NameField,
+  RadioField,
+  SideModalForm,
   TextField,
-  TextFieldError,
-  TextFieldHint,
-} from '@oxide/ui'
-
-import { Form, ListboxField, SideModalForm } from 'app/components/form'
+} from 'app/components/form'
 import { useParams } from 'app/hooks'
 
 import type { CreateSideModalFormProps } from '.'
@@ -104,43 +100,20 @@ export const CommonFields = ({ error }: { error: ErrorResponse | null }) => {
       {/* omitting value prop makes it a boolean value. beautiful */}
       {/* TODO: better text or heading or tip or something on this checkbox */}
       <CheckboxField name="enabled">Enabled</CheckboxField>
-      <div className="space-y-0.5">
-        <FieldLabel id="rule-name-label" htmlFor="rule-name">
-          Name
-        </FieldLabel>
-        <TextField id="rule-name" name="name" />
-      </div>
-      <div className="space-y-0.5">
-        <FieldLabel id="rule-description-label" htmlFor="rule-description">
-          Description {/* TODO: indicate optional */}
-        </FieldLabel>
-        <TextField id="rule-description" name="description" />
-      </div>
+      <NameField id="rule-name" />
+      <DescriptionField id="rule-description" />
 
       <Divider />
 
-      <div className="space-y-0.5">
-        <FieldLabel id="priority-label" htmlFor="priority">
-          Priority
-        </FieldLabel>
-        <TextFieldHint id="priority-hint">Must be 0&ndash;65535</TextFieldHint>
-        <NumberTextField id="priority" name="priority" aria-describedby="priority-hint" />
-        <TextFieldError name="priority" />
-      </div>
-      <fieldset>
-        <legend>Action</legend>
-        <RadioGroup column name="action">
-          <Radio value="allow">Allow</Radio>
-          <Radio value="deny">Deny</Radio>
-        </RadioGroup>
-      </fieldset>
-      <fieldset>
-        <legend>Direction of traffic</legend>
-        <RadioGroup column name="direction">
-          <Radio value="inbound">Incoming</Radio>
-          <Radio value="outbound">Outgoing</Radio>
-        </RadioGroup>
-      </fieldset>
+      <TextField type="number" id="priority" helpText="Must be 0&ndash;65535" />
+      <RadioField id="action" label="Action" column>
+        <Radio value="allow">Allow</Radio>
+        <Radio value="deny">Deny</Radio>
+      </RadioField>
+      <RadioField id="direction" label="Direction of traffic" column>
+        <Radio value="inbound">Incoming</Radio>
+        <Radio value="outbound">Outgoing</Radio>
+      </RadioField>
 
       <Divider />
 
@@ -155,12 +128,9 @@ export const CommonFields = ({ error }: { error: ErrorResponse | null }) => {
           { value: 'instance', label: 'Instance' },
         ]}
       />
-      <div className="space-y-0.5">
-        <FieldLabel id="targetValue-label" htmlFor="targetValue">
-          Target name
-        </FieldLabel>
-        <TextField id="targetValue" name="targetValue" />
-      </div>
+      {/* TODO: This is set as optional which is kind of wrong. This section represents an inlined
+      subform which means it likely should be a custom field */}
+      <NameField id="targetValue" name="targetValue" label="Target name" required={false} />
 
       <div className="flex justify-end">
         {/* TODO does this clear out the form or the existing targets? */}
@@ -238,19 +208,15 @@ export const CommonFields = ({ error }: { error: ErrorResponse | null }) => {
           { value: 'internet_gateway', label: 'Internet Gateway' },
         ]}
       />
-      <div className="space-y-0.5">
-        {/* For everything but IP this is a name, but for IP it's an IP.
+      {/* For everything but IP this is a name, but for IP it's an IP.
           So we should probably have the label on this field change when the
           host type changes. Also need to confirm that it's just an IP and
           not a block. */}
-        <FieldLabel id="hostValue-label" htmlFor="hostValue">
-          Value
-        </FieldLabel>
-        <TextFieldHint id="hostValue-hint">
-          For IP, an address. For the rest, a name. [TODO: copy]
-        </TextFieldHint>
-        <TextField id="hostValue" name="hostValue" aria-describedby="hostValue-hint" />
-      </div>
+      <TextField
+        id="hostValue"
+        label="Value"
+        helpText="For IP, an address. For the rest, a name. [TODO: copy]"
+      />
 
       <div className="flex justify-end">
         <Button variant="ghost" color="secondary" className="mr-2.5">
@@ -314,32 +280,27 @@ export const CommonFields = ({ error }: { error: ErrorResponse | null }) => {
 
       <Divider />
 
-      <div className="space-y-0.5">
-        <FieldLabel id="portRange-label" htmlFor="portRange">
-          Port filter
-        </FieldLabel>
-        <TextFieldHint id="portRange-hint">
-          A single port (1234) or a range (1234-2345)
-        </TextFieldHint>
-        <TextField id="portRange" name="portRange" aria-describedby="portRange-hint" />
-        <TextFieldError name="portRange" />
-        <div className="flex justify-end">
-          <Button variant="ghost" color="secondary" className="mr-2.5">
-            Clear
-          </Button>
-          <Button
-            variant="default"
-            onClick={() => {
-              const portRange = values.portRange.trim()
-              // TODO: show error instead of ignoring the click
-              if (!parsePortRange(portRange)) return
-              setFieldValue('ports', [...values.ports, portRange])
-              setFieldValue('portRange', '')
-            }}
-          >
-            Add port filter
-          </Button>
-        </div>
+      <TextField
+        id="portRange"
+        label="Port filter"
+        helpText="A single port (1234) or a range (1234-2345)"
+      />
+      <div className="flex justify-end">
+        <Button variant="ghost" color="secondary" className="mr-2.5">
+          Clear
+        </Button>
+        <Button
+          variant="default"
+          onClick={() => {
+            const portRange = values.portRange.trim()
+            // TODO: show error instead of ignoring the click
+            if (!parsePortRange(portRange)) return
+            setFieldValue('ports', [...values.ports, portRange])
+            setFieldValue('portRange', '')
+          }}
+        >
+          Add port filter
+        </Button>
       </div>
       <Table className="w-full">
         <Table.Header>
diff --git a/app/forms/instance-create.tsx b/app/forms/instance-create.tsx
index 843cf7542a..3257aaad10 100644
--- a/app/forms/instance-create.tsx
+++ b/app/forms/instance-create.tsx
@@ -17,7 +17,7 @@ import {
   Success16Icon,
   Tab,
   Tabs,
-  TextFieldHint,
+  TextInputHint,
 } from '@oxide/ui'
 import { GiB } from '@oxide/util'
 
@@ -182,10 +182,10 @@ export default function CreateInstanceForm({
       <Tabs id="choose-cpu-ram" fullWidth aria-labelledby="hardware">
         <Tab>General Purpose</Tab>
         <Tab.Panel>
-          <TextFieldHint id="hw-gp-help-text" className="mb-12 max-w-xl text-sans-md">
+          <TextInputHint id="hw-gp-help-text" className="mb-12 max-w-xl text-sans-md">
             General purpose instances provide a good balance of CPU, memory, and high
             performance storage; well suited for a wide range of use cases.
-          </TextFieldHint>
+          </TextInputHint>
           <RadioField id="hw-general-purpose" name="type" label="">
             {renderLargeRadioCards('general')}
           </RadioField>
@@ -193,9 +193,9 @@ export default function CreateInstanceForm({
 
         <Tab>CPU Optimized</Tab>
         <Tab.Panel>
-          <TextFieldHint id="hw-cpu-help-text" className="mb-12 max-w-xl  text-sans-md">
+          <TextInputHint id="hw-cpu-help-text" className="mb-12 max-w-xl  text-sans-md">
             CPU optimized instances provide a good balance of...
-          </TextFieldHint>
+          </TextInputHint>
           <RadioField id="hw-cpu-optimized" name="type" label="">
             {renderLargeRadioCards('cpuOptimized')}
           </RadioField>
@@ -203,9 +203,9 @@ export default function CreateInstanceForm({
 
         <Tab>Memory optimized</Tab>
         <Tab.Panel>
-          <TextFieldHint id="hw-mem-help-text" className="mb-12 max-w-xl  text-sans-md">
+          <TextInputHint id="hw-mem-help-text" className="mb-12 max-w-xl  text-sans-md">
             CPU optimized instances provide a good balance of...
-          </TextFieldHint>
+          </TextInputHint>
           <RadioField id="hw-mem-optimized" name="type" label="">
             {renderLargeRadioCards('memoryOptimized')}
           </RadioField>
@@ -213,9 +213,9 @@ export default function CreateInstanceForm({
 
         <Tab>Custom</Tab>
         <Tab.Panel>
-          <TextFieldHint id="hw-custom-help-text" className="mb-12 max-w-xl  text-sans-md">
+          <TextInputHint id="hw-custom-help-text" className="mb-12 max-w-xl  text-sans-md">
             Custom instances...
-          </TextFieldHint>
+          </TextInputHint>
           <RadioField id="hw-custom" name="type" label="">
             {renderLargeRadioCards('custom')}
           </RadioField>
diff --git a/app/pages/project/networking/VpcPage/VpcPage.e2e.ts b/app/pages/project/networking/VpcPage/VpcPage.e2e.ts
index cd2f06f736..267e3bd984 100644
--- a/app/pages/project/networking/VpcPage/VpcPage.e2e.ts
+++ b/app/pages/project/networking/VpcPage/VpcPage.e2e.ts
@@ -57,12 +57,12 @@ test.describe('VpcPage', () => {
     await page.fill('input[name=name]', 'my-new-rule')
     await page.locator('text=Outgoing').click()
 
-    await page.fill('text="Priority"', '5')
+    await page.fill('role=spinbutton[name="Priority"]', '5')
 
     // add target VPC "my-target-vpc"
     await page.locator('role=button[name="Target type"]').click()
     await page.locator('role=option[name="VPC"]').click()
-    await page.fill('text="Target name"', 'my-target-vpc')
+    await page.fill('role=textbox[name="Target name"]', 'my-target-vpc')
     await page.locator('text="Add target"').click()
 
     // target is added to targets table
@@ -71,14 +71,14 @@ test.describe('VpcPage', () => {
     // add host filter instance "host-filter-instance"
     await page.locator('role=button[name="Host type"]').click()
     await page.locator('role=option[name="Instance"]').click()
-    await page.fill('text="Value"', 'host-filter-instance')
+    await page.fill('role=textbox[name="Value"]', 'host-filter-instance')
     await page.locator('text="Add host filter"').click()
 
     // host is added to hosts table
     await expect(page.locator('td:has-text("host-filter-instance")')).toBeVisible()
 
     // TODO: test invalid port range once I put an error message in there
-    await page.fill('text="Port filter"', '123-456')
+    await page.fill('role=textbox[name="Port filter"]', '123-456')
     await page.locator('text="Add port filter"').click()
 
     // port range is added to port ranges table
@@ -158,7 +158,7 @@ test.describe('VpcPage', () => {
     // add host filter
     await page.locator('role=button[name="Host type"]').click()
     await page.locator('role=option[name="Instance"]').click()
-    await page.fill('text="Value"', 'edit-filter-instance')
+    await page.fill('role=textbox[name="Value"]', 'edit-filter-instance')
     await page.locator('text="Add host filter"').click()
 
     // new host is added to hosts table
diff --git a/libs/ui/index.ts b/libs/ui/index.ts
index e0326edf78..25f6dd938d 100644
--- a/libs/ui/index.ts
+++ b/libs/ui/index.ts
@@ -24,6 +24,6 @@ export * from './lib/skip-link/SkipLink'
 export * from './lib/spinner/Spinner'
 export * from './lib/table/Table'
 export * from './lib/tabs/Tabs'
-export * from './lib/text-field/TextField'
+export * from './lib/text-input/TextInput'
 export * from './lib/toast/Toast'
 export * from './lib/tooltip/Tooltip'
diff --git a/libs/ui/lib/checkbox/Checkbox.tsx b/libs/ui/lib/checkbox/Checkbox.tsx
index b7b1631f6a..81de8b1847 100644
--- a/libs/ui/lib/checkbox/Checkbox.tsx
+++ b/libs/ui/lib/checkbox/Checkbox.tsx
@@ -1,6 +1,4 @@
 import cn from 'classnames'
-import type { FieldAttributes } from 'formik'
-import { Field } from 'formik'
 
 import { Checkmark12Icon } from '@oxide/ui'
 import { classed } from '@oxide/util'
@@ -54,11 +52,3 @@ export const Checkbox = ({
     {children && <span className="ml-2.5 text-sans-md text-secondary">{children}</span>}
   </label>
 )
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type CheckboxFieldProps = CheckboxProps & Omit<FieldAttributes<any>, 'type'>
-
-/** Formik Field version of Checkbox */
-export const CheckboxField = (props: CheckboxFieldProps) => (
-  <Field type="checkbox" as={Checkbox} {...props} />
-)
diff --git a/libs/ui/lib/radio/Radio.tsx b/libs/ui/lib/radio/Radio.tsx
index c57eec14e3..35a0193847 100644
--- a/libs/ui/lib/radio/Radio.tsx
+++ b/libs/ui/lib/radio/Radio.tsx
@@ -6,7 +6,6 @@
  * difference is that label content is handled through children.
  */
 import cn from 'classnames'
-import { Field } from 'formik'
 import type { ComponentProps } from 'react'
 
 // input type is fixed to "radio"
@@ -24,7 +23,7 @@ const fieldStyles = `
 export const Radio = ({ children, className, ...inputProps }: RadioProps) => (
   <label className="inline-flex items-center">
     <span className="relative h-4 w-4">
-      <Field className={cn(fieldStyles, className)} type="radio" {...inputProps} />
+      <input className={cn(fieldStyles, className)} type="radio" {...inputProps} />
       {/* the dot in the middle. hide by default, use peer-checked to show if checked */}
       <div className="absolute left-1 top-1 hidden h-2 w-2 rounded-full bg-accent peer-checked:block" />
     </span>
@@ -51,7 +50,7 @@ export function RadioCard({ children, className, ...inputProps }: RadioProps) {
   const focus = className?.includes(':focus') ? ':focus' : ''
   return (
     <label className="inline-flex items-center">
-      <Field className={cn(focus, 'peer sr-only')} type="radio" {...inputProps} />
+      <input className={cn(focus, 'peer sr-only')} type="radio" {...inputProps} />
       <span className={cn('ox-radio-card divide-y', cardLabelStyles, className)}>
         {children}
       </span>
diff --git a/libs/ui/lib/text-field/TextField.stories.tsx b/libs/ui/lib/text-input/TextInput.stories.tsx
similarity index 64%
rename from libs/ui/lib/text-field/TextField.stories.tsx
rename to libs/ui/lib/text-input/TextInput.stories.tsx
index a281f2c925..a8a7305958 100644
--- a/libs/ui/lib/text-field/TextField.stories.tsx
+++ b/libs/ui/lib/text-input/TextInput.stories.tsx
@@ -1,14 +1,12 @@
 import type { StoryObj } from '@storybook/react'
 import type { ComponentProps } from 'react'
 
-import { FormikDecorator } from '../../util/formik-decorator'
-import { TextField } from './TextField'
+import { TextInput } from './TextInput'
 
-type Story = StoryObj<ComponentProps<typeof TextField>>
+type Story = StoryObj<ComponentProps<typeof TextInput>>
 
 export default {
-  component: TextField,
-  decorators: [FormikDecorator('')],
+  component: TextInput,
 } as Story
 
 export const Default: Story = {
diff --git a/libs/ui/lib/text-field/TextField.tsx b/libs/ui/lib/text-input/TextInput.tsx
similarity index 78%
rename from libs/ui/lib/text-field/TextField.tsx
rename to libs/ui/lib/text-input/TextInput.tsx
index dc89c6f181..a845ed23f7 100644
--- a/libs/ui/lib/text-field/TextField.tsx
+++ b/libs/ui/lib/text-input/TextInput.tsx
@@ -1,7 +1,7 @@
 import { Alert } from '@reach/alert'
 import cn from 'classnames'
-import type { FieldValidator } from 'formik'
-import { ErrorMessage, Field } from 'formik'
+
+import type { ChildrenProp } from '@oxide/util'
 
 /**
  * This is a little complicated. We only want to allow the `rows` prop if
@@ -26,8 +26,7 @@ export type TextAreaProps =
 // it makes a bunch of props required that should be optional. Instead we simply
 // take the props of an input field (which are part of the Field props) and
 // manually tack on validate.
-export type TextFieldBaseProps = React.ComponentProps<'input'> & {
-  validate?: FieldValidator
+export type TextInputBaseProps = React.ComponentProps<'input'> & {
   // error is used to style the wrapper, also to put aria-invalid on the input
   error?: boolean
   disabled?: boolean
@@ -35,12 +34,13 @@ export type TextFieldBaseProps = React.ComponentProps<'input'> & {
   fieldClassName?: string
 }
 
-export const TextField = ({
+export const TextInput = ({
+  type = 'text',
   error,
   className,
   fieldClassName,
   ...fieldProps
-}: TextFieldBaseProps & TextAreaProps) => (
+}: TextInputBaseProps & TextAreaProps) => (
   <div
     className={cn(
       'flex rounded border border-default',
@@ -49,8 +49,8 @@ export const TextField = ({
       className
     )}
   >
-    <Field
-      type="text"
+    <input
+      type={type}
       className={cn(
         `w-full border-none bg-transparent
         py-[0.6875rem] px-3
@@ -68,11 +68,11 @@ export const TextField = ({
 // TODO: do this properly: extract a NumberField that styles the up and down
 // buttons for when we do want them *and* add a flag to hide them using
 // appearance-textfield
-export const NumberTextField = ({
+export const NumberInput = ({
   fieldClassName,
   ...props
-}: Omit<TextFieldBaseProps, 'type'>) => (
-  <TextField
+}: Omit<TextInputBaseProps, 'type'>) => (
+  <TextInput
     type="number"
     {...props}
     fieldClassName={cn(fieldClassName, 'appearance-textfield')}
@@ -89,16 +89,14 @@ type HintProps = {
 /**
  * Pass id here and include that ID in aria-describedby on the TextField
  */
-export const TextFieldHint = ({ id, children, className }: HintProps) => (
+export const TextInputHint = ({ id, children, className }: HintProps) => (
   <div id={id} className={cn('mt-1 text-sans-sm text-secondary', className)}>
     {children}
   </div>
 )
 
-export const TextFieldError = ({ name }: { name: string }) => (
+export const TextInputError = ({ children }: ChildrenProp) => (
   <div className="ml-px">
-    <ErrorMessage name={name}>
-      {(msg) => msg && <Alert className="py-2 text-mono-sm text-destructive">{msg}</Alert>}
-    </ErrorMessage>
+    {children && <Alert className="py-2 text-mono-sm text-destructive">{children}</Alert>}
   </div>
 )

From c4ebf5176a984fdeeb3e995b1299bbc9c0dd480f Mon Sep 17 00:00:00 2001
From: Justin Bennett <git@just-be.dev>
Date: Thu, 21 Jul 2022 18:41:41 +0100
Subject: [PATCH 2/2] Nix the formik decorator

---
 .../ui/lib/radio-group/RadioGroup.stories.tsx |  5 ----
 libs/ui/lib/radio/Radio.stories.tsx           |  2 --
 libs/ui/util/formik-decorator.tsx             | 28 -------------------
 3 files changed, 35 deletions(-)
 delete mode 100644 libs/ui/util/formik-decorator.tsx

diff --git a/libs/ui/lib/radio-group/RadioGroup.stories.tsx b/libs/ui/lib/radio-group/RadioGroup.stories.tsx
index ef7b5ed483..d6774910fe 100644
--- a/libs/ui/lib/radio-group/RadioGroup.stories.tsx
+++ b/libs/ui/lib/radio-group/RadioGroup.stories.tsx
@@ -1,7 +1,6 @@
 import type { StoryObj } from '@storybook/react'
 import type { ComponentProps } from 'react'
 
-import { FormikDecorator } from '../../util/formik-decorator'
 import { Radio, RadioCard } from '../radio/Radio'
 import { RadioGroup } from './RadioGroup'
 
@@ -17,7 +16,6 @@ export const Default = () => (
     <Radio value="do-not-notify">Nothing</Radio>
   </RadioGroup>
 )
-Default.decorators = [FormikDecorator({ group1: 'notify' })]
 
 export const DefaultColumn = () => (
   <RadioGroup name="group2" column>
@@ -30,7 +28,6 @@ export const DefaultColumn = () => (
     <Radio value="600">600 GB</Radio>
   </RadioGroup>
 )
-DefaultColumn.decorators = [FormikDecorator({ group2: '100' })]
 
 export const Cards = () => (
   <RadioGroup name="group3">
@@ -43,7 +40,6 @@ export const Cards = () => (
     <RadioCard value="600">600 GB</RadioCard>
   </RadioGroup>
 )
-Cards.decorators = [FormikDecorator({ group3: '100' })]
 
 export const Disabled = () => (
   <RadioGroup name="group4" column disabled>
@@ -56,4 +52,3 @@ export const Disabled = () => (
     <Radio value="600">600 GB</Radio>
   </RadioGroup>
 )
-Disabled.decorators = [FormikDecorator()]
diff --git a/libs/ui/lib/radio/Radio.stories.tsx b/libs/ui/lib/radio/Radio.stories.tsx
index 966e352d9f..a91e5c3898 100644
--- a/libs/ui/lib/radio/Radio.stories.tsx
+++ b/libs/ui/lib/radio/Radio.stories.tsx
@@ -1,7 +1,6 @@
 import type { StoryObj } from '@storybook/react'
 import type { ComponentProps } from 'react'
 
-import { FormikDecorator } from '../../util/formik-decorator'
 import { Radio, RadioCard } from './Radio'
 
 type Story = StoryObj<ComponentProps<typeof Radio>>
@@ -12,7 +11,6 @@ export default {
     checked: { control: 'boolean' },
     children: { control: 'text' },
   },
-  decorators: [FormikDecorator()],
 } as Story
 
 export const All = () => {
diff --git a/libs/ui/util/formik-decorator.tsx b/libs/ui/util/formik-decorator.tsx
deleted file mode 100644
index 0ffd76b964..0000000000
--- a/libs/ui/util/formik-decorator.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/* Helper for reducing boilerplate in stories for Formik-based components.
- *
- * Usage in MDX:
- *
- *   <Story decorators={[FormikDecorator()]} /> for one story
- *   <Meta  decorators={[FormikDecorator()]} /> for all stories for that component
- *
- * Usage in CSF:
- *
- *   StoryComponent.decorators = [FormikDecorator()]
- *
- * Pass an argument to set initialValues: FormikDecorator({ name: 'Neo' }). If
- * you want to pass other props to Formik, just use <Formik> directly in the
- * story definition
- */
-import type { Story } from '@storybook/react'
-import { Form, Formik } from 'formik'
-
-export const FormikDecorator =
-  (initialValues = {}) =>
-  (Story: Story) =>
-    (
-      <Formik initialValues={initialValues} onSubmit={() => {}}>
-        <Form>
-          <Story />
-        </Form>
-      </Formik>
-    )