DF Form Preview

A React component library for digital form preview with validation and responsive design. This package provides a comprehensive set of form components that can be used to build dynamic, validated forms with conditional logic and responsive layouts.

Features

• 🎨 Responsive Design: Desktop, tablet, and mobile layouts
• ✅ Built-in Validation: Email, required fields, min/max length, number validation
• 🔄 Conditional Logic: Show/hide fields based on other field values
• 🎯 TypeScript Support: Full TypeScript definitions included
• 🎨 Customizable Styling: CSS variables for easy theming
• 📱 Mobile-First: Optimized for all device sizes
• 🌙 Dark Mode Support: Built-in dark mode theming

Installation

npm install df-form-preview

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-dom

Optional dependencies for enhanced functionality:

npm install react-i18next i18next i18next-browser-languagedetector

Quick Start

import React from 'react';
import { DfFormPreview, FormComponentType } from 'df-form-preview';

const formComponents: FormComponentType[] = [
  {
    id: 'name',
    name: 'text-input',
    basic: {
      label: 'Full Name',
      placeholder: 'Enter your full name',
      defaultValue: ''
    },
    validation: {
      required: true,
      minLength: 2
    }
  },
  {
    id: 'email',
    name: 'email-input',
    basic: {
      label: 'Email Address',
      placeholder: 'Enter your email',
      defaultValue: ''
    },
    validation: {
      required: true
    }
  }
];

function MyForm() {
  const handleSubmit = (formData: FormComponentType[]) => {
    console.log('Form submitted:', formData);
  };

  return (
    <DfFormPreview
      formComponents={formComponents}
      onSubmit={handleSubmit}
      currentDevice="desktop"
      isPreviewMode={false}
    />
  );
}

Components

DfFormPreview

The main form preview component that renders all form controls.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | formComponents | FormComponentType[] | [] | Array of form components to render | | currentDevice | 'desktop' \| 'tablet' \| 'mobile' | 'desktop' | Device type for responsive layout | | isPreviewMode | boolean | false | If true, form is read-only | | initialFormData | FormComponentType[] | [] | Initial form data | | onSubmit | (formData: FormComponentType[]) => void | - | Callback when form is submitted | | onFormDataChange | (formData: FormComponentType[]) => void | - | Callback when form data changes |

Form Control Components

DfFormInput

Text, number, and email input fields.

import { DfFormInput, ITextInputComponent } from 'df-form-preview';

const textInput: ITextInputComponent = {
  id: 'username',
  name: 'text-input',
  basic: {
    label: 'Username',
    placeholder: 'Enter username',
    defaultValue: ''
  },
  validation: {
    required: true,
    minLength: 3,
    maxLength: 20
  }
};

DfFormTextarea

Multi-line text input.

import { DfFormTextarea, ITextareaComponent } from 'df-form-preview';

const textarea: ITextareaComponent = {
  id: 'description',
  name: 'textarea',
  basic: {
    label: 'Description',
    placeholder: 'Enter description',
    defaultValue: ''
  },
  validation: {
    required: true,
    minLength: 10
  }
};

DfFormSelect

Dropdown selection.

import { DfFormSelect, ISelectComponent } from 'df-form-preview';

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

DfFormCheckbox

Checkbox inputs.

import { DfFormCheckbox, ICheckboxComponent } from 'df-form-preview';

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

DfFormRadio

Radio button inputs.

import { DfFormRadio, IRadioComponent } from 'df-form-preview';

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

DfFormDateTime

Date and time inputs.

import { DfFormDateTime, IDateComponent } from 'df-form-preview';

const dateInput: IDateComponent = {
  id: 'birthdate',
  name: 'date',
  basic: {
    label: 'Birth Date',
    defaultValue: ''
  },
  validation: {
    required: true
  }
};

DfFormSignature

Signature pad component.

import { DfFormSignature, ISignatureComponent } from 'df-form-preview';

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

DfFormHeading

Heading component for form sections.

import { DfFormHeading, IHeadingComponent } from 'df-form-preview';

const heading: IHeadingComponent = {
  id: 'section-title',
  name: 'heading',
  basic: {
    label: 'Personal Information',
    level: 2
  }
};

Conditional Logic

You can show/hide fields based on other field values using conditional logic:

const formComponents: FormComponentType[] = [
  {
    id: 'has-newsletter',
    name: 'checkbox',
    basic: {
      label: 'Subscribe to newsletter',
      defaultValue: false
    },
    validation: {},
    options: [{ label: 'Yes', value: 'yes' }]
  },
  {
    id: 'newsletter-email',
    name: 'email-input',
    basic: {
      label: 'Newsletter Email',
      placeholder: 'Enter email for newsletter',
      defaultValue: ''
    },
    validation: {
      required: true
    },
    conditional: {
      showIf: {
        fieldId: 'has-newsletter',
        operator: 'equals',
        value: 'yes'
      }
    }
  }
];

Styling and Theming

The components use CSS custom properties for theming. You can override these variables to customize the appearance:

:root {
  --df-color-primary: #303992;
  --df-color-secondary: #ff7032;
  --df-color-text-dark: #000000;
  --df-color-text-light: #8c8c8c;
  --df-color-error-primary: #f04248;
  --df-color-success-primary: #00df80;
  /* ... more variables */
}

Dark Mode

Dark mode is supported through the .dark or [data-theme="dark"] class:

.dark {
  --df-color-primary: #1a1d24;
  --df-color-text-dark: #ffffff;
  /* ... dark mode overrides */
}

Validation

The components include built-in validation for:

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

TypeScript Support

Full TypeScript definitions are included. All components and interfaces are properly typed:

import { 
  DfFormPreview, 
  FormComponentType, 
  ITextInputComponent,
  IFormControlChange 
} from 'df-form-preview';

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For support, email [email protected] or create an issue in the GitHub repository.