form-preview-df/src/df-form-controls/README.md

Resusable Form Preview Components

# Digital Form Controls (React)

This is a React implementation of the Digital Form Controls, based on the Angular version. These components provide a consistent, reusable set of form controls for building digital forms with validation, error handling, and styling.

## Components

### 1. DfFormInput
Text, email, and number input fields with validation.

```tsx
import { DfFormInput, ITextInputComponent } from './df-form-controls';

const inputProps: ITextInputComponent = {
  id: 'text-input-1',
  name: 'text-input',
  basic: {
    label: 'Full Name',
    placeholder: 'Enter your full name',
    defaultValue: ''
  },
  validation: {
    required: true,
    minLength: 2,
    maxLength: 50
  },
  styles: {
    labelAlignment: 'top'
  }
};

<DfFormInput
  {...inputProps}
  formValue={formData[inputProps.id] || ''}
  validationErrors={validationErrors}
  touchedFields={touchedFields}
  formSubmitted={formSubmitted}
  onValueChange={handleValueChange}
/>
```

### 2. DfFormCheckbox
Multi-select checkbox groups.

```tsx
import { DfFormCheckbox, ICheckboxComponent } from './df-form-controls';

const checkboxProps: ICheckboxComponent = {
  id: 'checkbox-1',
  name: 'checkbox',
  basic: {
    label: 'Interests',
    defaultValue: ''
  },
  options: [
    { label: 'Technology', value: 'tech' },
    { label: 'Sports', value: 'sports' },
    { label: 'Music', value: 'music' }
  ],
  validation: {
    required: true,
    multiple: true
  }
};

<DfFormCheckbox
  {...checkboxProps}
  formValue={formData[checkboxProps.id] || []}
  validationErrors={validationErrors}
  touchedFields={touchedFields}
  formSubmitted={formSubmitted}
  onValueChange={handleValueChange}
/>
```

### 3. DfFormRadio
Single-select radio button groups.

```tsx
import { DfFormRadio, IRadioComponent } from './df-form-controls';

const radioProps: IRadioComponent = {
  id: 'radio-1',
  name: 'radio',
  basic: {
    label: 'Gender',
    defaultValue: ''
  },
  options: [
    { label: 'Male', value: 'male' },
    { label: 'Female', value: 'female' },
    { label: 'Other', value: 'other' }
  ],
  validation: {
    required: true
  }
};

<DfFormRadio
  {...radioProps}
  formValue={formData[radioProps.id] || ''}
  validationErrors={validationErrors}
  touchedFields={touchedFields}
  formSubmitted={formSubmitted}
  onValueChange={handleValueChange}
/>
```

### 4. DfFormSelect
Dropdown select with single or multiple selection.

```tsx
import { DfFormSelect, ISelectComponent } from './df-form-controls';

const selectProps: ISelectComponent = {
  id: 'select-1',
  name: 'select',
  basic: {
    label: 'Country',
    placeholder: 'Select your country',
    defaultValue: ''
  },
  options: [
    { label: 'United States', value: 'us' },
    { label: 'Canada', value: 'ca' },
    { label: 'United Kingdom', value: 'uk' }
  ],
  validation: {
    required: true
  }
};

<DfFormSelect
  {...selectProps}
  formValue={formData[selectProps.id] || ''}
  validationErrors={validationErrors}
  touchedFields={touchedFields}
  formSubmitted={formSubmitted}
  onValueChange={handleValueChange}
/>
```

### 5. DfFormTextarea
Multi-line text input with validation.

```tsx
import { DfFormTextarea, ITextareaComponent } from './df-form-controls';

const textareaProps: ITextareaComponent = {
  id: 'textarea-1',
  name: 'textarea',
  basic: {
    label: 'Comments',
    placeholder: 'Enter your comments here...',
    defaultValue: ''
  },
  validation: {
    required: false,
    maxLength: 500
  }
};

<DfFormTextarea
  {...textareaProps}
  formValue={formData[textareaProps.id] || ''}
  validationErrors={validationErrors}
  touchedFields={touchedFields}
  formSubmitted={formSubmitted}
  onValueChange={handleValueChange}
/>
```

### 6. DfFormDateTime
Date input with min/max date validation.

```tsx
import { DfFormDateTime, IDateComponent } from './df-form-controls';

const dateProps: IDateComponent = {
  id: 'date-1',
  name: 'date',
  basic: {
    label: 'Date of Birth',
    defaultValue: ''
  },
  validation: {
    required: true,
    maxDate: new Date().toISOString().split('T')[0]
  }
};

<DfFormDateTime
  {...dateProps}
  formValue={formData[dateProps.id] || ''}
  validationErrors={validationErrors}
  touchedFields={touchedFields}
  formSubmitted={formSubmitted}
  onValueChange={handleValueChange}
/>
```

### 7. DfFormHeading
Styled headings for form sections.

```tsx
import { DfFormHeading, IHeadingComponent } from './df-form-controls';

const headingProps: IHeadingComponent = {
  id: 'heading-1',
  name: 'heading',
  basic: {
    label: 'Personal Information',
    level: 2
  },
  styles: {
    textAlign: 'left'
  }
};

<DfFormHeading {...headingProps} />
```

### 8. DfFormSignature
Digital signature pad with canvas drawing.

```tsx
import { DfFormSignature, ISignatureComponent } from './df-form-controls';

const signatureProps: ISignatureComponent = {
  id: 'signature-1',
  name: 'signature',
  basic: {
    label: 'Digital Signature',
    defaultValue: ''
  },
  validation: {
    required: true
  }
};

<DfFormSignature
  {...signatureProps}
  formValue={formData[signatureProps.id] || ''}
  validationErrors={validationErrors}
  touchedFields={touchedFields}
  formSubmitted={formSubmitted}
  onValueChange={handleValueChange}
/>
```

## Common Props

All form components share these common props:

- `id`: Unique identifier for the field
- `properties`: Component-specific configuration object
- `formValue`: Current value of the field
- `validationErrors`: Object containing validation errors
- `touchedFields`: Object tracking which fields have been touched
- `formSubmitted`: Boolean indicating if the form has been submitted
- `readonly`: Boolean to make the field read-only
- `disabled`: Boolean to disable the field
- `mode`: 'edit' | 'preview' | 'test' - determines the component behavior
- `onValueChange`: Callback function when the field value changes
- `onBlur`: Callback function when the field loses focus
- `onFocus`: Callback function when the field gains focus
- `className`: Additional CSS classes

## Validation

Each component includes built-in validation for:

- **Required fields**: Ensures the field is not empty
- **Length validation**: Min/max length for text inputs
- **Email validation**: Validates email format
- **Number validation**: Min/max values for number inputs
- **Date validation**: Min/max dates for date inputs
- **Pattern validation**: Custom regex patterns

## Styling

The components use CSS custom properties (variables) for theming:

```css
:root {
  --df-color-primary: #1976d2;
  --df-color-primary-border: #e0e0e0;
  --df-color-primary-disabled: #f5f5f5;
  --df-color-text-dark: #212121;
  --df-color-text-light: #757575;
  --df-color-black: #000000;
  --df-color-error-primary: #e53935;
  --df-color-white: #ffffff;
}
```

## Usage Example

See the `DfFormPreview` component for a complete example of how to use all the components together in a form with validation and error handling.

## File Structure

```
df-form-controls/
├── df-form-input/
│   ├── DfFormInput.tsx
│   └── index.ts
├── df-form-checkbox/
│   ├── DfFormCheckbox.tsx
│   └── index.ts
├── df-form-radio/
│   ├── DfFormRadio.tsx
│   └── index.ts
├── df-form-select/
│   ├── DfFormSelect.tsx
│   └── index.ts
├── df-form-textarea/
│   ├── DfFormTextarea.tsx
│   └── index.ts
├── df-form-date-time/
│   ├── DfFormDateTime.tsx
│   └── index.ts
├── df-form-heading/
│   ├── DfFormHeading.tsx
│   └── index.ts
├── df-form-signature/
│   ├── DfFormSignature.tsx
│   └── index.ts
├── df-form-error-msg/
│   ├── DfFormErrorMsg.tsx
│   └── index.ts
├── df-form-controls.scss
├── df-form-preview-interfaces.ts
├── index.ts
└── README.md
```

## Integration with Form Builder

These components are designed to work seamlessly with the form builder, providing:

1. **Consistent API**: All components follow the same interface pattern
2. **Validation**: Built-in validation with error messages
3. **Styling**: Consistent styling across all components
4. **Accessibility**: Proper labels, ARIA attributes, and keyboard navigation
5. **Responsive**: Works on desktop and mobile devices
6. **Themeable**: CSS custom properties for easy theming