@libromi/app-builder-react/README.md

React component for App Builder forms

# @libromi/app-builder-react

React component for embedding App Builder forms in your React applications.

## Installation

```bash
npm install @libromi/app-builder-react
```

or

```bash
yarn add @libromi/app-builder-react
```

## Usage

### Basic Usage

```jsx
import { AppEmbed } from '@libromi/app-builder-react';

function MyComponent() {
  return (
    <AppEmbed 
      appId="YOUR-APP-ID"
      apiKey={process.env.REACT_APP_FORM_BUILDER_API_KEY} // API key is required
      height="600px"
      width="100%"
    />
  );
}
```

### Advanced Usage with Callbacks

```jsx
import { AppEmbed } from '@libromi/app-builder-react';

function MyComponent() {
  const handleSubmit = (data) => {
    console.log('Form submitted:', data);
    // Process the data
  };

  return (
    <AppEmbed 
      appId="YOUR-APP-ID"
      apiKey={process.env.REACT_APP_FORM_BUILDER_API_KEY} // API key is required
      height="600px"
      width="100%"
      onSubmit={handleSubmit}
      theme="light" // or "dark"
    />
  );
}
```

### Passing External Data Sources

You can provide external data to your app by passing the `dataSources` prop. This is useful for populating form fields with data from your application:

```jsx
import { AppEmbed } from '@libromi/app-builder-react';

function MyComponent() {
  // Example data to pass to the form
  const customerData = {
    customers: [
      { id: 1, name: "John Doe", email: "john@example.com" },
      { id: 2, name: "Jane Smith", email: "jane@example.com" }
    ],
    products: [
      { id: 101, name: "Product A", price: 99.99 },
      { id: 102, name: "Product B", price: 149.99 }
    ]
  };

  return (
    <AppEmbed 
      appId="YOUR-APP-ID"
      apiKey={process.env.REACT_APP_FORM_BUILDER_API_KEY}
      dataSources={customerData}
      onSubmit={(data) => console.log('Form submitted:', data)}
    />
  );
}
```

The data you provide will be available in your app's local data sources, allowing you to map it to form fields using the data mapping feature in the app builder.

### Custom API URL

If your API and embed.js script are hosted on a different domain, you can specify a custom base URL:

```jsx
import { AppEmbed } from '@libromi/app-builder-react';

function MyComponent() {
  return (
    <AppEmbed 
      appId="YOUR-APP-ID"
      apiKey={process.env.REACT_APP_FORM_BUILDER_API_KEY}
      baseUrl="https://your-api.com"
      height="600px"
      width="100%"
    />
  );
}
```

The component will load the embed.js script from `{baseUrl}/embed.js` and use the same baseUrl for API calls.

## Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| appId | string | Yes | The ID of the app to embed |
| apiKey | string | Yes | Your API key for authentication |
| height | string \| number | No | Height of the embedded form (default: "600px") |
| width | string \| number | No | Width of the embedded form (default: "100%") |
| theme | "light" \| "dark" \| string | No | Theme for the form |
| onSubmit | function | No | Callback function when form is submitted |
| onValidate | function | No | Callback function for custom validation |
| className | string | No | Additional CSS class for the container |
| style | object | No | Additional inline styles for the container |
| baseUrl | string | No | Custom base URL for the API and embed.js script (default: current domain) |
| dataSources | object | No | External data to pass to the form |

## Environment Variables

For security, it's recommended to store your API key in an environment variable:

```
# .env file
REACT_APP_FORM_BUILDER_API_KEY=your_api_key_here
```

Then access it in your code:

```jsx
apiKey={process.env.REACT_APP_FORM_BUILDER_API_KEY}
```

## License

MIT