refactor(ui): migrate env var field to react [EE-4853] (#8451)

app/react/components/form-components/Input/InputLabeled.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
+
+import { InputLabeled } from './InputLabeled';
+
+export default {
+  component: InputLabeled,
+  title: 'Components/Form/InputLabeled',
+} as Meta;
+
+export { TextInput, NumberInput };
+
+function TextInput() {
+  const [value, setValue] = useState('');
+
+  return (
+    <InputLabeled
+      label="label"
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  );
+}
+
+function NumberInput() {
+  const [value, setValue] = useState(5);
+
+  return (
+    <InputLabeled
+      label="label"
+      type="number"
+      value={value}
+      onChange={(e) => setValue(e.target.valueAsNumber)}
+    />
+  );
+}

app/react/components/form-components/Input/InputLabeled.tsx

@@ -0,0 +1,28 @@
+import { ComponentProps, InputHTMLAttributes } from 'react';
+
+import { InputGroup } from '../InputGroup';
+
+export function InputLabeled({
+  label,
+  className,
+  size,
+  id,
+  ...props
+}: {
+  label: string;
+  className?: string;
+  size?: ComponentProps<typeof InputGroup>['size'];
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'children'>) {
+  return (
+    <InputGroup className={className} size={size}>
+      <InputGroup.Addon as="label" htmlFor={id}>
+        {label}
+      </InputGroup.Addon>
+      <InputGroup.Input
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        id={id}
+      />
+    </InputGroup>
+  );
+}