df-forms-preview-pack/README.md

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

# df-forms-preview-pack

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

## Installation

```bash
npm install df-forms-preview-pack
```

## Peer Dependencies

This package requires the following peer dependencies:

```bash
npm install react react-dom
```

## Quick Start

### 1. Import Theme Variables

First, import the theme file to provide CSS variables:

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

### 2. Use Components

```typescript
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](./CSS_VARIABLES.md)
- [Package Ready Status](./PACKAGE_READY.md)

## License

MIT