@thinkitive/form-builder/README.md

A drag-and-drop JSON Forms Builder for React

# Thinkitive Form Builder

## About

**Thinkitive Form Builder** is a powerful, extensible React library for building dynamic, drag-and-drop forms using [JSON Forms](https://jsonforms.io/docs/architecture) and [React DnD](https://react-dnd.github.io/react-dnd/about). It allows you to visually create forms, edit field properties, and generate JSON Schema and UI Schema for use in any JSON Forms-compatible renderer.

- **JSON Forms**: Provides the core utilities for managing and rendering JSON Schema-based forms. Highly customizable and framework-agnostic. [Learn more](https://jsonforms.io/docs/architecture)
- **React DnD**: Enables robust drag-and-drop interactions in React. [Learn more](https://react-dnd.github.io/react-dnd/about)

### Features

- Drag-and-drop form builder UI
- Edit field properties (label, required, etc.) in a dedicated panel
- Save field property changes in batch
- JSON Schema and UI Schema output compatible with JSON Forms
- Built with React, TypeScript, Material-UI, Redux Toolkit

---

## Getting Started

### Install dependencies

```bash
npm install
```

### Run the development server

```bash
npm run dev
```

### Build for production

```bash
npm run build
```

---

## Usage Example: Importing in Another React Project

1. **Install the package** (after publishing to npm):

```bash
npm install @thinkitive/form-builder
```

2. **Use in your React app:**

```jsx
import { FormBuilder, FormRenderer } from "@thinkitive/form-builder";
import type {
  FormBuilderSchema,
  FormBuilderUiSchema,
  FormError,
} from "@thinkitive/form-builder";

function App() {
  type FormBuilderSchema = typeof FormBuilderSchema;
  type FormBuilderUiSchema = typeof FormBuilderUiSchema;
  type FormError = typeof FormError;

  const handleSchema = (schema: FormBuilderSchema) =>
    console.log("SCHEMA:", schema);
  const handleUiSchema = (uiSchema: FormBuilderUiSchema) =>
    console.log("UISchema:", uiSchema);
  const handleData = (data: unknown) => console.log("DATA:", data);

  const schema: FormBuilderSchema = {
    type: "object",
    properties: {
      firstName: {
        type: "string",
        minLength: 2,
        maxLength: 50,
        title: "First Name",
      },
      lastName: {
        type: "string",
        minLength: 2,
        maxLength: 50,
        title: "Last Name",
      },
      age: {
        type: "integer",
        minimum: 0,
        maximum: 150,
        title: "Age",
      },
      email: {
        type: "string",
        format: "email",
        title: "Email Address",
      },
      isEmployed: {
        type: "boolean",
        title: "Currently Employed",
      },
    },
    required: ["firstName", "lastName", "email"],
  };

  const uischema: FormBuilderUiSchema = {
    type: "Group",
    label: "Personal Information",
    elements: [
      { type: "Control", scope: "#/properties/firstName" },
      { type: "Control", scope: "#/properties/lastName" },
      { type: "Control", scope: "#/properties/age" },
      { type: "Control", scope: "#/properties/email" },
      { type: "Control", scope: "#/properties/isEmployed" },
    ],
  };

  const data = {
    firstName: "Rohit",
    lastName: "Sharma",
    age: 45,
    email: "hitman.rohit@example.com",
    isEmployed: true,
  };

  return (
    <>
      <FormBuilder
        onSchemaChange={handleSchema}
        onUiSchemaChange={handleUiSchema}
        onDataChange={handleData}
      />
      <h2>Sample Form Preview (View mode):</h2>
      <FormRenderer
        schema={schema}
        uischema={uischema}
        data={data}
        onChange={(updatedData: unknown) =>
          console.log("Updated data:", updatedData)
        }
        onSave={(formData: unknown) => console.log("Form submitted:", formData)}
        onErrors={(errors: FormError) =>
          console.log("Validation errors:", errors)
        }
      />
    </>
  );
}

export default App;
```

---

## TypeScript Configuration

If you encounter TypeScript errors about missing module types, add the following to your `global.d.ts` or `types.d.ts`:

```ts
// types.d.ts or global.d.ts
declare module '@thinkitive/form-builder';
```