npm package: @octopuslabs/react-form-components
Description: Reusable React form components with auto-save and state recovery
Latest version: 0.1.0

# React Form Components

Reusable React form components with auto-save and state recovery. Built with TypeScript for type safety and designed to be headless for maximum customization flexibility.

## Features

- **Paginated forms** with smooth transitions between questions
- **Auto-save** functionality (default: every 10 seconds)
- **State recovery** - resume where you left off
- **TypeScript** support with full type definitions
- **Headless design** - fully customizable styling
- **Validation** - built-in and custom validators
- **Accessibility** - ARIA labels and keyboard navigation
- **Multiple question types**:
  - Single choice (radio buttons)
  - Multiple choice (checkboxes)
  - Text input with "specify" options

## Installation

```bash
npm install @octopuslabs/react-form-components
```

## Quick Start

```tsx
import { FormBuilder } from '@octopuslabs/react-form-components';

const myForm = {
  id: 'my-form',
  title: 'My Questionnaire',
  questions: [
    {
      id: 'q1',
      text: 'What is your name?',
      type: 'text',
      required: true
    }
  ]
};

const api = {
  saveProgress: async (formId, progress) => {
    await fetch('/api/save', { method: 'POST', body: JSON.stringify(progress) });
  },
  loadProgress: async (formId) => {
    const res = await fetch('/api/load');
    return res.json();
  },
  submitForm: async (formId, progress) => {
    await fetch('/api/submit', { method: 'POST', body: JSON.stringify(progress) });
  }
};

function App() {
  return (
    <FormBuilder
      schema={myForm}
      api={api}
      eventHandlers={{
        onSubmit: (progress) => console.log('Submitted!', progress)
      }}
    />
  );
}
```

## Documentation

See [INTEGRATION.md](./INTEGRATION.md) for complete documentation including:

- Detailed API reference
- Backend integration examples
- Customization guide
- TypeScript types
- Advanced examples

## Development

### Install dependencies

```bash
npm install
```

### Run demo app

```bash
npm run dev
```

The demo app will run on `http://localhost:5173` and includes a complete example form with mock backend.

### Build library

```bash
npm run build
```

This creates distributable files in the `dist/` directory.

### Type checking

```bash
npm run type-check
```

## Project Structure

```
form-components/
├── src/                      # Library source code
│   ├── components/           # React components
│   │   ├── FormBuilder.tsx   # Main form component
│   │   ├── questions/        # Question type components
│   │   └── navigation/       # Navigation & progress
│   ├── hooks/                # React hooks
│   │   ├── useFormState.ts   # Form state management
│   │   ├── useAutoSave.ts    # Auto-save logic
│   │   └── useFormValidation.ts
│   ├── types/                # TypeScript definitions
│   └── index.ts              # Main exports
├── demo/                     # Demo application
│   ├── App.tsx               # Demo app
│   ├── mockData.ts           # Example form schema
│   ├── mockBackend.ts        # Mock API
│   └── styles.css            # Demo styles
├── INTEGRATION.md            # Integration guide
└── package.json
```

## License

MIT

## Compatibility

- React 18+ or React 19+
- TypeScript 4.9+
- Modern browsers (ES2020+)