df-forms-preview-pack

A comprehensive React form preview component library with form controls, validation, conditional logic, drag-and-drop, and responsive design.

Installation

npm install df-forms-preview-pack

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-dom

Quick Start

1. Import Theme Variables

First, import the theme file to provide CSS variables:

import 'df-forms-preview-pack/theme.scss';
// OR define your own CSS variables (see CSS_VARIABLES.md)

2. Use Components

import { DfFormPreview, DfFormInput, DfFormSection } from 'df-forms-preview-pack';

function App() {
  const formComponents = [
    {
      id: '1',
      name: 'text-input',
      basic: {
        label: 'Name',
        placeholder: 'Enter your name'
      },
      validation: {
        required: true
      }
    }
  ];

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

Available Components

Form Controls

• DfFormInput - Text, number, and email inputs
• DfFormTextarea - Multi-line text input
• DfFormSelect - Dropdown select
• DfFormCheckbox - Checkbox input
• DfFormRadio - Radio button input
• DfFormSegment - Segmented control
• DfFormDateTime - Date and time picker
• DfFormSignature - Signature pad
• DfFormFileUpload - File upload
• DfFormLocation - Location picker
• DfFormHeading - Heading/Title
• DfFormInstruction - Instruction text
• DfFormComments - Comments component
• DfFormErrorMsg - Error message display

Container Components

• DfFormSection - Section container with collapsible content
• DfFormTable - Table layout with cells
• DfFormDataGrid - Grid layout for form components

Main Component

• DfFormPreview - Main preview component that renders all form components

Additional Components

• ComponentActionFeatures - Action features for components
• ThresholdAlert - Threshold validation alerts
• RaiseIssueModal - Modal for raising issues

CSS Variables

This package uses CSS variables for theming. See CSS_VARIABLES.md for a complete list of required variables, or import theme.scss for default values.

Features

• ✅ Form Controls: 14+ form control components
• ✅ Validation: Built-in validation with error messages
• ✅ Conditional Logic: Show/hide components based on conditions
• ✅ Drag & Drop: Reorder components with drag-and-drop
• ✅ Responsive Design: Mobile, tablet, and desktop views
• ✅ Dark Mode: Full dark mode support
• ✅ TypeScript: Full TypeScript support with type definitions
• ✅ Accessible: ARIA labels and keyboard navigation

Documentation

• CSS Variables Documentation
• Package Ready Status

License

MIT