[WIP]: refactor(forms): migrate Input to TS

frontend/documentation/components/FieldError.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import FieldError from 'components/base/forms/FieldError'
+
+const meta: Meta<typeof FieldError> = {
+  component: FieldError,
+  parameters: { layout: 'padded' },
+  title: 'Components/Forms/FieldError',
+}
+export default meta
+
+type Story = StoryObj<typeof FieldError>
+
+export const Default: Story = {
+  render: () => <FieldError error='This field is required.' />,
+}
+
+export const RichMessage: Story = {
+  render: () => (
+    <FieldError
+      error={
+        <>
+          Must be a valid <strong>email address</strong>.
+        </>
+      }
+    />
+  ),
+}

frontend/documentation/components/FieldLabel.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import FieldLabel from 'components/base/forms/FieldLabel'
+
+const meta: Meta<typeof FieldLabel> = {
+  component: FieldLabel,
+  parameters: { layout: 'padded' },
+  title: 'Components/Forms/FieldLabel',
+}
+export default meta
+
+type Story = StoryObj<typeof FieldLabel>
+
+export const Default: Story = {
+  render: () => <FieldLabel htmlFor='email'>Email</FieldLabel>,
+}
+
+export const Required: Story = {
+  render: () => (
+    <FieldLabel htmlFor='email' required>
+      Email
+    </FieldLabel>
+  ),
+}
+
+export const WithTooltip: Story = {
+  render: () => (
+    <FieldLabel htmlFor='email' tooltip='We never share your email.'>
+      Email
+    </FieldLabel>
+  ),
+}

frontend/documentation/components/InputGroup.stories.tsx

@@ -0,0 +1,103 @@
+import React, { ComponentProps, useState } from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import InputGroup from 'components/base/forms/InputGroup'
+
+// Stateful wrapper so the field is controlled in the story (InputGroup forwards
+// value/onChange to the underlying control).
+type FieldProps = ComponentProps<typeof InputGroup> & { initialValue?: string }
+
+const Field = ({ initialValue, ...props }: FieldProps) => {
+  const [value, setValue] = useState(initialValue ?? '')
+  return (
+    <InputGroup
+      {...props}
+      value={value}
+      onChange={(
+        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+      ) => setValue(e.target.value)}
+    />
+  )
+}
+
+const meta: Meta = {
+  decorators: [
+    (Story: React.FC) => (
+      <div style={{ width: 320 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: { layout: 'centered' },
+  title: 'Components/Forms/InputGroup',
+}
+export default meta
+
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => <Field title='Email' placeholder='you@example.com' />,
+}
+
+// Info-icon tooltip after the label — the icon sits centred against the text.
+export const WithTooltip: Story = {
+  render: () => (
+    <Field
+      title='Email'
+      tooltip='We never share your email.'
+      placeholder='you@example.com'
+    />
+  ),
+}
+
+export const WithError: Story = {
+  render: () => (
+    <Field
+      title='Email'
+      initialValue='not-an-email'
+      isValid={false}
+      inputProps={{ error: 'Enter a valid email address.', name: 'email' }}
+    />
+  ),
+}
+
+export const MultipleErrors: Story = {
+  render: () => (
+    <Field
+      title='Password'
+      type='password'
+      initialValue='abc'
+      isValid={false}
+      inputProps={{
+        error: ['At least 8 characters', 'Must include a number'],
+        name: 'password',
+      }}
+    />
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => <Field title='Email' initialValue='you@example.com' disabled />,
+}
+
+export const Textarea: Story = {
+  render: () => (
+    <Field textarea title='Description' initialValue='A short description…' />
+  ),
+}
+
+// "Unsaved" badge beside the label, used when a field has pending changes.
+export const Unsaved: Story = {
+  render: () => <Field title='Display name' unsaved initialValue='Jane' />,
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className='d-flex flex-column gap-3'>
+      <Field size='large' title='Large' placeholder='Large' />
+      <Field title='Default' placeholder='Default' />
+      <Field size='small' title='Small' placeholder='Small' />
+      <Field size='xSmall' title='xSmall' placeholder='xSmall' />
+    </div>
+  ),
+}

frontend/web/components/BreadcrumbSeparator.tsx

@@ -1,4 +1,11 @@
-import React, { FC, ReactNode, useEffect, useRef, useState } from 'react'
+import React, {
+  FC,
+  KeyboardEvent,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import { IonIcon } from '@ionic/react'
 import { checkmarkCircle, chevronDown, chevronUp } from 'ionicons/icons'
 import InlineModal from './InlineModal'
@@ -334,10 +341,8 @@ const BreadcrumbSeparator: FC<BreadcrumbSeparatorType> = ({
             >
               <Input
                 autoFocus={focus === 'organisation'}
-                onKeyDown={(e: KeyboardEvent) =>
-                  navigateOrganisations(e, organisations)
-                }
-                onChange={(e: KeyboardEvent) => {
+                onKeyDown={(e) => navigateOrganisations(e, organisations)}
+                onChange={(e) => {
                   setOrganisationSearch(Utils.safeParseEventValue(e))
                 }}
                 search
@@ -390,11 +395,11 @@ const BreadcrumbSeparator: FC<BreadcrumbSeparatorType> = ({
               )}
             >
               <Input
-                onChange={(e: InputEvent) => {
+                onChange={(e) => {
                   setProjectSearch(Utils.safeParseEventValue(e))
                 }}
                 autoFocus={focus === 'project'}
-                onKeyDown={(e: KeyboardEvent) => navigateProjects(e)}
+                onKeyDown={(e) => navigateProjects(e)}
                 search
                 className='full-width'
                 inputClassName='border-0 bg-transparent border-bottom-1'

frontend/web/components/ChangeRequestsSetting.tsx

@@ -46,7 +46,7 @@ const ChangeRequestsSetting: FC<ChangeRequestsSettingType> = ({
               name='env-name'
               disabled={isLoading}
               min={0}
-              onChange={(e: InputEvent) => {
+              onChange={(e) => {
                 if (!Utils.safeParseEventValue(e)) return
                 onChange(parseInt(Utils.safeParseEventValue(e)))
               }}

frontend/web/components/GroupSelect.tsx

@@ -44,7 +44,7 @@ const GroupSelect: FC<GroupSelectType> = ({
       <Input
         disabled={disabled}
         value={filter}
-        onChange={(e: InputEvent) => setFilter(Utils.safeParseEventValue(e))}
+        onChange={(e) => setFilter(Utils.safeParseEventValue(e))}
         className='full-width mb-2'
         placeholder='Type or choose a Group'
         search

frontend/web/components/PermissionsTabs.tsx

@@ -110,9 +110,7 @@ const PermissionsTabs: FC<PermissionsTabsType> = ({
               type='text'
               className='ml-3'
               value={searchProject}
-              onChange={(e: InputEvent) =>
-                setSearchProject(Utils.safeParseEventValue(e))
-              }
+              onChange={(e) => setSearchProject(Utils.safeParseEventValue(e))}
               size='small'
               placeholder='Search Projects'
               search
@@ -142,9 +140,7 @@ const PermissionsTabs: FC<PermissionsTabsType> = ({
               type='text'
               className='ml-3'
               value={searchEnv}
-              onChange={(e: InputEvent) =>
-                setSearchEnv(Utils.safeParseEventValue(e))
-              }
+              onChange={(e) => setSearchEnv(Utils.safeParseEventValue(e))}
               size='small'
               placeholder='Search Environments'
               search

frontend/web/components/RegexTester.tsx

@@ -43,7 +43,6 @@ const RegexTester: FC<RegexTesterType> = ({
       <InputGroup
         title='Regular Expression'
         value={regex}
-        autoValidate
         inputProps={{
           className: 'full-width',
           onClick: forceSelectionRange,
@@ -65,7 +64,6 @@ const RegexTester: FC<RegexTesterType> = ({
         id='regex'
         title='Test Input'
         value={exampleText}
-        autoValidate
         inputProps={{
           autoValidate: true,
           className: 'full-width',

frontend/web/components/RolesSelect.tsx

@@ -44,7 +44,7 @@ const RoleSelect: FC<RoleSelectType> = ({
       <Input
         disabled={disabled}
         value={filter}
-        onChange={(e: InputEvent) => setFilter(Utils.safeParseEventValue(e))}
+        onChange={(e) => setFilter(Utils.safeParseEventValue(e))}
         className='full-width mb-2'
         placeholder='Type or choose a Role'
         search

frontend/web/components/base/forms/FieldError.tsx

@@ -0,0 +1,30 @@
+import React, { FC, ReactNode } from 'react'
+import cn from 'classnames'
+
+interface FieldErrorProps {
+  // The field-level error to show; renders nothing when falsy.
+  error?: ReactNode
+  // Set so the control can reference it via aria-describedby.
+  id?: string
+  className?: string
+}
+
+// Inline, per-field validation message shown beneath a control. The small-text
+// counterpart to ErrorMessage (which is a banner alert for API/form-level
+// errors) — use FieldError for a single field's validation.
+const FieldError: FC<FieldErrorProps> = ({ className, error, id }) => {
+  if (!error) {
+    return null
+  }
+  return (
+    <span
+      id={id}
+      className={cn('text-danger text-small d-block mt-1', className)}
+      role='alert'
+    >
+      {error}
+    </span>
+  )
+}
+
+export default FieldError