chore: Improve configuration step form components (#2461)

* add checkbox and radio components

* f

* f

Author: screspod

web/src/components/common/Checkbox.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { useSettings } from '../../contexts/SettingsContext';
+
+interface CheckboxProps {
+  id: string;
+  label: string;
+  helpText?: string;
+  error?: string;
+  required?: boolean;
+  checked: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  className?: string;
+  labelClassName?: string;
+  dataTestId?: string;
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  id,
+  label,
+  helpText,
+  error,
+  required,
+  checked,
+  onChange,
+  disabled = false,
+  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,
+            accentColor: themeColor,
+          } as React.CSSProperties}
+        />
+        <label htmlFor={id} className={`text-sm text-gray-700 ${labelClassName}`}>
+          {label}
+          {required && <span className="text-red-500 ml-1">*</span>}
+        </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/Input.tsx

@@ -4,38 +4,38 @@ import { useSettings } from '../../contexts/SettingsContext';
 interface InputProps {
   id: string;
   label: string;
+  helpText?: string;
+  error?: string;
+  required?: boolean;
   type?: string;
   value: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  icon?: React.ReactNode;
+  placeholder?: string;
   onKeyDown?: (e: React.KeyboardEvent) => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
-  placeholder?: string;
-  required?: boolean;
   disabled?: boolean;
-  error?: string;
-  helpText?: string;
   className?: string;
   labelClassName?: string;
-  icon?: React.ReactNode;
   dataTestId?: string;
 }
 
 const Input: React.FC<InputProps> = ({
   id,
   label,
+  helpText,
+  error,
+  required,
   type = 'text',
   value,
-  onChange,
+  icon,
+  placeholder = '',
   onKeyDown,
+  onChange,
   onFocus,
-  placeholder = '',
-  required = false,
   disabled = false,
-  error,
-  helpText,
   className = '',
   labelClassName = '',
-  icon,
   dataTestId,
 }) => {
   const { settings } = useSettings();

web/src/components/common/Label.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+interface LabelProps {
+  content: string;
+  className?: string;
+  dataTestId?: string;
+}
+
+const Label: React.FC<LabelProps> = ({
+  content,
+  className = '',
+  dataTestId,
+}) => {
+  return (
+    <div className={`mb-4 ${className}`} data-testid={dataTestId}>
+      <div className="prose prose-sm prose-gray max-w-none">
+        <Markdown
+          remarkPlugins={[remarkGfm]}
+          components={{
+            a: ({ ...props }) => (
+              <a
+                {...props}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-600 hover:text-blue-800 underline"
+              />
+            ),
+          }}
+        >
+          {content}
+        </Markdown>
+      </div>
+    </div>
+  );
+};
+
+export default Label;

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 {
+  id: string;
+  label: string;
+  helpText?: string;
+  error?: string;
+  required?: boolean;
+  value: string;
+  options: AppConfigChildItem[];
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  className?: string;
+  labelClassName?: string;
+}
+
+const Radio: React.FC<RadioProps> = ({
+  id,
+  label,
+  helpText,
+  error,
+  required,
+  value,
+  options,
+  onChange,
+  disabled = false,
+  className = '',
+  labelClassName = '',
+}) => {
+  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}
+        {required && <span className="text-red-500 ml-1">*</span>}
+      </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

@@ -4,14 +4,14 @@ import { useSettings } from '../../contexts/SettingsContext';
 interface TextareaProps {
   id: string;
   label: string;
+  helpText?: string;
+  error?: string;
+  required?: boolean;
   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;
   dataTestId?: string;
@@ -20,14 +20,14 @@ interface TextareaProps {
 const Textarea = ({
   id,
   label,
+  helpText,
+  error,
+  required = false,
   value,
-  onChange,
   rows = 4,
   placeholder = '',
-  required = false,
+  onChange,
   disabled = false,
-  error,
-  helpText,
   className = '',
   labelClassName = '',
   dataTestId,