chore: Config item component improvements

web/src/components/common/Checkbox.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { useSettings } from '../../contexts/SettingsContext';
+
+interface CheckboxProps {
+  checked: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  error?: string;
+  className?: string;
+  labelClassName?: string;
+
+  // props shared through ConfigItem
+  id?: string;
+  label?: string;
+  dataTestId?: string;
+  helpText?: string;
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  checked,
+  onChange,
+  disabled = false,
+  error,
+  className = '',
+  labelClassName = '',
+  id,
+  label,
+  helpText,
+}) => {
+  const { settings } = useSettings();
+  const themeColor = settings.themeColor;
+
+  return (
+    <div className="mb-4">
+      <div className="flex items-center space-x-3">
+        <input
+          id={id}
+          type="checkbox"
+          checked={checked}
+          onChange={onChange}
+          disabled={disabled}
+          className={`h-4 w-4 focus:ring-offset-2 border-gray-300 rounded ${className}`}
+          data-testid={`bool-input-${id}`}
+          style={{
+            color: themeColor,
+            '--tw-ring-color': themeColor,
+            accentColor: themeColor,
+          } as React.CSSProperties}
+        />
+        <label htmlFor={id} className={`text-sm text-gray-700 ${labelClassName}`}>
+          {label}
+        </label>
+      </div>
+      {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
+      {helpText && !error && <p className="mt-1 text-sm text-gray-500">{helpText}</p>}
+    </div>
+  );
+};
+
+export default Checkbox;

web/src/components/common/ConfigItem.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+interface ConfigItemProps {
+  id: string;
+  label: string;
+  dataTestId?: string;
+  helpText?: string;
+  children: React.ReactElement;
+}
+
+/**
+ * A wrapper component that provides consistent styling and layout for configuration form elements
+ *
+ * Props:
+ * @param {string} id - Unique identifier for the form element
+ * @param {string} label - Label text to display above the input
+ * @param {string} [dataTestId] - Optional test ID for e2e testing
+ * @param {string} [helpText] - Optional help text displayed below the input
+ * @param {React.ReactElement} children - The form input component to wrap
+ *
+ * The component clones the child element and injects common props (id, label, helpText)
+ * to ensure consistent behavior across different input types.
+ *
+ * Example:
+ * ```tsx
+ * <ConfigItem
+ *   id="hostname"
+ *   label="Hostname"
+ *   helpText="Enter the server hostname"
+ * >
+ *   <Input />
+ * </ConfigItem>
+ * ```
+ */
+const ConfigItem: React.FC<ConfigItemProps> = ({
+  id,
+  label,
+  helpText,
+  children,
+}) => {
+  // Clone the child element and inject the common props
+  const enhancedChild = React.cloneElement(children, {
+    id,
+    label,
+    helpText,
+  } as React.HTMLAttributes<HTMLElement>);
+
+  return (
+    <div key={id} data-testid={`config-item-${id}`}>
+      <div className="mb-4">
+        {enhancedChild}
+      </div>
+    </div>
+  );
+};
+
+
+export default ConfigItem;

web/src/components/common/Input.tsx

@@ -2,39 +2,40 @@ import React from 'react';
 import { useSettings } from '../../contexts/SettingsContext';
 
 interface InputProps {
-  id: string;
-  label: string;
   type?: string;
   value: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onKeyDown?: (e: React.KeyboardEvent) => void;
+  icon?: React.ReactNode;
   placeholder?: string;
   required?: boolean;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   disabled?: boolean;
   error?: string;
-  helpText?: string;
   className?: string;
   labelClassName?: string;
-  icon?: React.ReactNode;
+
+  // props shared through ConfigItem
+  id?: string;
+  label?: string;
   dataTestId?: string;
+  helpText?: string;
 }
 
 const Input: React.FC<InputProps> = ({
-  id,
-  label,
   type = 'text',
   value,
-  onChange,
-  onKeyDown,
+  icon,
   placeholder = '',
   required = false,
+  onKeyDown,
+  onChange,
   disabled = false,
   error,
-  helpText,
   className = '',
   labelClassName = '',
-  icon,
-  dataTestId,
+  id,
+  label,
+  helpText,
 }) => {
   const { settings } = useSettings();
   const themeColor = settings.themeColor;
@@ -69,7 +70,7 @@ const Input: React.FC<InputProps> = ({
             '--tw-ring-color': themeColor,
             '--tw-ring-offset-color': themeColor,
           } as React.CSSProperties}
-          data-testid={dataTestId}
+          data-testid={`text-input-${id}`}
         />
       </div>
       {error && <p className="mt-1 text-sm text-red-500">{error}</p>}

web/src/components/common/Radio.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { useSettings } from '../../contexts/SettingsContext';
+import { AppConfigChildItem } from '../../types';
+
+interface RadioProps {
+  value: string;
+  options: AppConfigChildItem[];
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  error?: string;
+  className?: string;
+  labelClassName?: string;
+
+  // props shared through ConfigItem
+  id?: string;
+  label?: string;
+  dataTestId?: string;
+  helpText?: string;
+}
+
+const Radio: React.FC<RadioProps> = ({
+   value,
+   options,
+   onChange,
+   disabled = false,
+   error,
+   className = '',
+   labelClassName = '',
+   id,
+   label,
+   helpText,
+}) => {
+  const { settings } = useSettings();
+  const themeColor = settings.themeColor;
+
+  return (
+    <div className="mb-4">
+      <label className={`block text-sm font-medium text-gray-700 mb-2 ${labelClassName}`}>
+        {label}
+      </label>
+      <div className="space-y-2">
+        {options.map(option => (
+          <div key={option.name} className="flex items-center">
+            <input
+              type="radio"
+              id={option.name}
+              name={id}
+              value={option.name}
+              checked={value === option.name}
+              onChange={onChange}
+              disabled={disabled}
+              className={`h-4 w-4 focus:ring-offset-2 border-gray-300 ${className}`}
+              data-testid={`radio-input-${option.name}`}
+              style={{
+                color: themeColor,
+                '--tw-ring-color': themeColor,
+                accentColor: themeColor,
+              } as React.CSSProperties}
+            />
+            <label htmlFor={option.name} className="ml-3 text-sm text-gray-700">
+              {option.title}
+            </label>
+          </div>
+        ))}
+      </div>
+      {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
+      {helpText && !error && <p className="mt-1 text-sm text-gray-500">{helpText}</p>}
+    </div>
+  );
+};
+
+export default Radio;

web/src/components/common/Textarea.tsx

@@ -2,35 +2,36 @@ import { ChangeEvent, CSSProperties } from 'react';
 import { useSettings } from '../../contexts/SettingsContext';
 
 interface TextareaProps {
-  id: string;
-  label: string;
   value: string;
-  onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
   rows?: number;
   placeholder?: string;
   required?: boolean;
+  onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
   disabled?: boolean;
   error?: string;
-  helpText?: string;
   className?: string;
   labelClassName?: string;
+
+  // props shared through ConfigItem
+  id?: string;
+  label?: string;
   dataTestId?: string;
+  helpText?: string;
 }
 
 const Textarea = ({
-  id,
-  label,
   value,
-  onChange,
   rows = 4,
   placeholder = '',
   required = false,
+  onChange,
   disabled = false,
   error,
-  helpText,
   className = '',
   labelClassName = '',
-  dataTestId,
+  id,
+  label,
+  helpText,
 }: TextareaProps) => {
   const { settings } = useSettings();
   const themeColor = settings.themeColor;
@@ -58,7 +59,7 @@ const Textarea = ({
           '--tw-ring-color': themeColor,
           '--tw-ring-offset-color': themeColor,
         } as CSSProperties}
-        data-testid={dataTestId}
+        data-testid={`textarea-input-${id}`}
       />
       {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
       {helpText && !error && <p className="mt-1 text-sm text-gray-500">{helpText}</p>}