add checkbox and radio components

Author: screspod

web/src/components/common/Checkbox.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { useSettings } from '../../contexts/SettingsContext';
+
+interface CheckboxProps {
+  id: string;
+  label: string;
+  checked: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  error?: string;
+  helpText?: string;
+  className?: string;
+  labelClassName?: string;
+  dataTestId?: string;
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  id,
+  label,
+  checked,
+  onChange,
+  disabled = false,
+  error,
+  helpText,
+  className = '',
+  labelClassName = '',
+  dataTestId,
+}) => {
+  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={dataTestId}
+          style={{
+            color: themeColor,
+            '--tw-ring-color': 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/Radio.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useSettings } from '../../contexts/SettingsContext';
+import { AppConfigChildItem } from '../../types';
+
+interface RadioProps {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  options: AppConfigChildItem[];
+  disabled?: boolean;
+  error?: string;
+  helpText?: string;
+  className?: string;
+  labelClassName?: string;
+  dataTestId?: string;
+}
+
+const Radio: React.FC<RadioProps> = ({
+  id,
+  label,
+  value,
+  onChange,
+  options,
+  disabled = false,
+  error,
+  helpText,
+  className = '',
+  labelClassName = '',
+  dataTestId,
+}) => {
+  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={dataTestId ? `${dataTestId}-${option.name}` : undefined}
+              style={{
+                color: themeColor,
+                '--tw-ring-color': 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/wizard/config/ConfigurationStep.tsx

@@ -4,6 +4,8 @@ import Card from '../../common/Card';
 import Button from '../../common/Button';
 import Input from '../../common/Input';
 import Textarea from '../../common/Textarea';
+import Checkbox from '../../common/Checkbox';
+import Radio from '../../common/Radio';
 import { useWizard } from '../../../contexts/WizardModeContext';
 import { useAuth } from '../../../contexts/AuthContext';
 import { useSettings } from '../../../contexts/SettingsContext';
@@ -182,60 +184,34 @@ const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
             value={getDisplayValue(item)}
             onChange={handleInputChange}
             dataTestId={`textarea-input-${item.name}`}
+            helpText={item.help_text}
           />
         );
 
       case 'bool':
         return (
-          <div className="flex items-center space-x-3">
-            <input
-              id={item.name}
-              type="checkbox"
-              checked={getEffectiveValue(item) === '1'}
-              onChange={handleCheckboxChange}
-              className="h-4 w-4 focus:ring-offset-2 border-gray-300 rounded"
-              data-testid={`bool-input-${item.name}`}
-              style={{
-                color: themeColor,
-                '--tw-ring-color': themeColor,
-              } as React.CSSProperties}
-            />
-            <label htmlFor={item.name} className="text-sm text-gray-700">
-              {item.title}
-            </label>
-          </div>
+          <Checkbox
+            id={item.name}
+            label={item.title}
+            checked={getEffectiveValue(item) === '1'}
+            onChange={handleCheckboxChange}
+            dataTestId={`bool-input-${item.name}`}
+            helpText={item.help_text}
+          />
         );
 
       case 'radio':
         if (item.items) {
           return (
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">
-                {item.title}
-              </label>
-              <div className="space-y-2">
-                {item.items.map(child => (
-                  <div key={child.name} className="flex items-center">
-                    <input
-                      type="radio"
-                      id={child.name}
-                      value={child.name}
-                      checked={getEffectiveValue(item) === child.name}
-                      onChange={e => handleRadioChange(item.name, e)}
-                      className="h-4 w-4 focus:ring-offset-2 border-gray-300"
-                      data-testid={`radio-input-${child.name}`}
-                      style={{
-                        color: themeColor,
-                        '--tw-ring-color': themeColor,
-                      } as React.CSSProperties}
-                    />
-                    <label htmlFor={child.name} className="ml-3 text-sm text-gray-700">
-                      {child.title}
-                    </label>
-                  </div>
-                ))}
-              </div>
-            </div>
+            <Radio
+              id={item.name}
+              label={item.title}
+              value={getEffectiveValue(item)}
+              onChange={e => handleRadioChange(item.name, e)}
+              options={item.items}
+              dataTestId={`radio-input-${item.name}`}
+              helpText={item.help_text}
+            />
           );
         }
         return null;