npm package: @helmi_ba/form-builder
Description: React form builder and renderer with strict TypeScript support.
Author: Helmi Ben Abdelghani
Latest version: 0.1.4

# README for @helmi_ba/form-builder

![npm](https://img.shields.io/npm/v/@helmi_ba/form-builder)

**Visual Form Builder for React with TypeScript**

## Installation

```bash
npm install @helmi_ba/form-builder
```





## Peer Dependencies
@helmi_ba/form-builder depends on @helmi_ba/form-core for form schema types and validation logic.
You must install @helmi_ba/form-core alongside this package:

```bash
npm install @helmi_ba/form-core
```

⚠️ Important: This package requires `@helmi_ba/form-core` for schema types and validation.
If it's not installed, you may encounter build-time or runtime errors.


## Overview

`@helmi_ba/form-builder` provides a `<FormBuilder />` React component to build forms visually.

## `<FormBuilder>` Props

| Prop                          | Type                              | Default | Description                                                      |
|-------------------------------|-----------------------------------|---------|------------------------------------------------------------------|
| `enableLocalStorageAutoSave`  | `boolean`                         | `false` | Save schema to localStorage on change                            |
| `height`                      | `number`                          | `0`     | Canvas height (`0` = auto)                                       |
| `width`                       | `number`                          | `0`     | Canvas width (`0` = auto)                                        |
| `headerColor`                 | `string`                          | `'#fff'`| Color of builder header                                          |
| `primaryColor`                | `string`                          | `'#007bff'`| Primary action color                                          |
| `secondaryColor`              | `string`                          | `'#6c757d'`| Secondary action color                                        |
| `canvasColor`                 | `string`                          | `'#f8f9fa'`| Background color for canvas                                    |
| `initialLeftPanelWidth`       | `number`                          | `260`   | Width of left side panel                                        |
| `initialRightPanelWidth`      | `number`                          | `250`   | Width of right side panel                                       |
| `resizablePanels`             | `boolean`                         | `true`  | Allow resizing panels                                            |
| `onCallBack`                  | `(form?: FormSchema) => void`     | `undefined`| Handler called when schema changes                           |

## Usage Example

```tsx
import { FormBuilder } from '@helmi_ba/form-builder';
import { FormSchema } from '@helmi_ba/form-core';

const App = () => (
  <FormBuilder
    enableLocalStorageAutoSave={true}
    height={600}
    width={800}
    headerColor="#222"
    primaryColor="#0d6efd"
    secondaryColor="#6c757d"
    canvasColor="#f0f0f0"
    initialLeftPanelWidth={300}
    initialRightPanelWidth={300}
    resizablePanels={true}
    onCallBack={(form?: FormSchema) => console.log('Schema:', form)}
  />
);
```

---

*For more details, visit the [GitHub repository](https://github.com/helmi-ba/react-form-builder).*