### Create React App and Install Dependencies

Source: https://formengine.io/documentation/formik-integration

Initializes a new React project with TypeScript and installs Formik, Yup, and FormEngine packages. Starts the development server.

```bash
npx create-react-app with-formik --template typescript
cd with-formik
npm add formik yup @react-form-builder/core @react-form-builder/components-rsuite @react-form-builder/designer
npm run start
```

--------------------------------

### Cloning and Running the Angular Form Example

Source: https://formengine.io/documentation/llms-full.txt

Clone the FormEngine repository and run the Angular reactive forms example to get started. This sets up a basic booking form with debug output.

```bash
git clone https://github.com/optimajet/formengine
cd formengine/premium/examples/with-angular-forms/step1-reactive-forms
npm install
npm run start
```

--------------------------------

### Live Example Setup for Flex Container

Source: https://formengine.io/documentation/formengine-core/custom-components/container-component

Demonstrates setting up a live editor environment to use the FlexContainer component, including its definition and integration with a FormViewer.

```typescript
function App() {
  const FlexContainerComponent 	= ({children, className, style}) 	=> (
    <div className	={className} style	={style}	>
      {children}
    </div	>
  )
  const flexContainer 	= define(FlexContainerComponent, 'FlexContainer')
    .kind('container')
    .props({
      children: node
    })
    .css({
      display: string.default('flex'),
      flexDirection: oneOf('row', 'column', 'row-reverse', 'column-reverse').default('row'),
      justifyContent: oneOf(
        'flex-start', 'flex-end', 'center', 'space-between',
        'space-around', 'space-evenly'
      ).default('flex-start'),
      alignItems: oneOf('stretch', 'flex-start', 'flex-end', 'center', 'baseline').default('stretch'),
      flexWrap: oneOf('nowrap', 'wrap', 'wrap-reverse').default('nowrap'),
      gap: size.default('8px'),
      padding: size.default('0px'),
      backgroundColor: color.default('transparent')
    })
    .build()
  const view 	= muiView
  view.define(flexContainer.model)
  const formJson 	= {
    "form": {
      "key": "Screen",
      "type": "Screen",
      "children": 	[
        {
          "key": "buttonGroup",
          "type": "FlexContainer",
          "css": {
            "any": {
              "object": {
                "gap": 10,
                "backgroundColor": "cornsilk"
              }
            }
          },
          "children": 	[
            {
              "key": "cancelBtn",
              "type": "MuiButton",
              "props": {
                "children": {
                  "value": "Cancel"
                }
              }
            },
            {
              "key": "submitBtn",
              "type": "MuiButton",
              "props": {
                "children": {
                  "value": "Submit"
                }
              }
            }
          ]
        }
      ]
    }
  }
  return (
    <FormViewer
      view	={view}
      getForm	={() 	=> JSON.stringify(formJson)}
    />
  )
}
```

--------------------------------

### Installing FormEngine Dependencies

Source: https://formengine.io/documentation/adding-wasm-component

Install the core, designer, and rSuite components for FormEngine. Ensure you have followed the initial installation guide.

```bash
npm install @react-form-builder/core @react-form-builder/designer @react-form-builder/components-rsuite
```

--------------------------------

### Live Example: Form Validation with Custom Validators

Source: https://formengine.io/documentation/formengine-core/validation

Demonstrates a live editor setup for a form with custom registration validators. This example includes username, password, and age validation logic.

```javascript
function App() {
  const formJson =
    {
      "errorType": "MuiErrorWrapper",
      "tooltipType": "MuiTooltip",
      "form": {
        "key": "Screen",
        "type": "Screen",
        "children": [
          {
            "key": "username",
            "type": "MuiTextField",
            "props": {
              "label": {
                "value": "Username"
              }
            }
          },
          {
            "key": "password",
            "type": "MuiTextField",
            "props": {
              "label": {
                "value": "Password"
              },
              "type": {
                "value": "password"
              }
            }
          },
          {
            "key": "age",
            "type": "MuiTextField",
            "props": {
              "label": {
                "value": "Age"
              }
            }
          },
          {
            "key": "validate",
            "type": "MuiButton",
            "props": {
              "children": {
                "value": "Validate"
              }
            },
            "events": {
              "onClick": [
                {
                  "name": "validate",
                  "type": "common"
                }
              ]
            }
          }
        ]
      }
    }
  // Define external form validators
  const registrationValidators =
    [
      async (formData) => {
        const errors = {}

        if (!formData.username) {
          errors.username = 'Please provide the username'
        }

        // Check if username is already taken (simulate async check)
        if (formData.username === 'admin') {
          errors.username = 'Username "admin" is reserved'
        }

        if (!formData.password) {
          errors.password = 'Please provide the password'
        }

        // Validate password strength
        if (formData.password) {
          const hasUpperCase = /[A-Z]/.test(formData.password)
          const hasLowerCase = /[a-z]/.test(formData.password)
          const hasNumbers = /\d/.test(formData.password)

          if (!hasUpperCase) errors.password = 'Must contain uppercase letter'
          if (!hasLowerCase) errors.password = 'Must contain lowercase letter'
          if (!hasNumbers) errors.password = 'Must contain number'
        }
        return errors
      },
      async (formData) => {
        // Second validator: check age requirements
        const errors = {}

        if (formData.age) {
          const age = Number(formData.age)
          if (age < 13) {
            errors.age = 'You must be at least 13 years old'
          } else if (age > 120) {
            errors.age = 'Please enter a valid age'
          }
        } else {
          errors.age = 'Please enter an age'
        }

        return errors
      }
    ]
  return (
    <FormViewer
      view={muiView}
      formValidators={registrationValidators}
      getForm={() => JSON.stringify(formJson)}
    />
  )
}
```

--------------------------------

### Create React App with Vite

Source: https://formengine.io/documentation/llms-full.txt

Commands to create a new React application using Vite, install dependencies, and start the development server.

```bash
npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm run dev
```

--------------------------------

### Install QR Code Component

Source: https://formengine.io/documentation/formengine-designer/components/qr-code

Use this command to install the QR code component package.

```bash
npm install @react-form-builder/components-fast-qr
```

--------------------------------

### FormEngine Designer Integration Example

Source: https://formengine.io/documentation/formengine-designer/getting-started/usage

This example demonstrates how to set up and use the FormEngine Designer component in a React application. It includes installing dependencies, importing necessary modules, defining component metadata, and configuring the designer with CSS loaders and custom storage.

```tsx
import {
  ltrCssLoader,
  rsErrorMessage,
  RsLocalizationWrapper,
  rsTooltip,
  rSuiteComponents,
  rtlCssLoader
} from '@react-form-builder/components-rsuite'
import {
  ActionDefinition,
  BiDi,
  ComponentLocalizer,
  IFormViewer,
  Validators
} from '@react-form-builder/core'
import {
  BuilderView,
  FormBuilder,
  IFormStorage
} from '@react-form-builder/designer'
import {
  useCallback,
  useRef
} from 'react'

// Here you can pass the metadata of your components
const componentsMetadata = rSuiteComponents.map(definer => definer.build())

const builderView = new BuilderView(componentsMetadata)
  // Pass an array of template names to the withTemplates function to display them in the designer
  .withTemplates([])
  // The following parameters are required for correct CSS loading in LTR and RTL modes
  .withViewerWrapper(RsLocalizationWrapper)
  .withCssLoader(BiDi.LTR, ltrCssLoader)
  .withCssLoader(BiDi.RTL, rtlCssLoader)

// This is where you can define the custom storage for the designer
const formStorage: IFormStorage | undefined = undefined

// You can define custom validators for form fields
const customValidators: Validators = {
  'string': {
    'isHex': {
      validate: value => /^[0-9A-F]*$/i.test(value)
    },
    'isHappy': {
      params: [],
      validate: value => value === 'Happy'
    },
    'equals': {
      params: [
        {
          key: 'value',
          type: 'string',
          required: false,
          default: 'Ring'
        },
        {
          key: 'message',
          type: 'string',
          required: false,
          default: 'Value must be equals to '
        }
      ],
      validate: (value, _, args) => {
        const errorMessage = args?.['message']
      }
    }
  }
}

function App() {
  const formBuilder = useRef(
    new FormBuilder(builderView, {
      formStorage,
      customValidators
    })
  )

  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <FormBuilder formBuilder={formBuilder.current} />
    </div>
  )
}

export default App

```

--------------------------------

### Install FormEngine Packages

Source: https://formengine.io/documentation/integration-with-electron

Install the designer and components packages for FormEngine using npm.

```bash
npm install @react-form-builder/designer @react-form-builder/components-rsuite
```

--------------------------------

### Create Vite Application and Install Dependencies

Source: https://formengine.io/documentation/formengine-designer

Use this command to create a new React + TypeScript Vite project and install the necessary FormEngine libraries.

```bash
npx create-vite formbuilder-app --template react-tsc
npm install @react-form-builder/core @react-form-builder/components-rsuite
```

--------------------------------

### Live Example: Rendering a Form with a Custom Card Component

Source: https://formengine.io/documentation/formengine-core/custom-components/container-component

Demonstrates a complete React application setup that defines and renders a form utilizing the custom 'Card' container component. It includes the component definition and form JSON.

```javascript
function App() {
  const Card = ({title, subtitle, children, className, style}) => (
    <div className={className} style={style}>
      <div className="card-header">
        <h3 className="card-title">{title}</h3>
        {subtitle && <p className="card-subtitle">{subtitle}</p>}
      </div>
      <div className="card-body">
        {children}
      </div>
    </div>
  )
  const card = define(Card, 'Card')
    .kind('container')
    .props({
      title: string.default('Card Title'),
      subtitle: string.default(''),
      children: node
    })
    .css({
      backgroundColor: color.default('#ffffff'),
      padding: size.default('24px'),
      borderRadius: size.default('8px'),
      borderWidth: size.default('1px'),
      borderStyle: oneOf('solid', 'none').default('solid'),
      borderColor: color.default('#e0e0e0'),
      boxShadow: string.default('0 2px 4px rgba(0,0,0,0.1)'),
      gap: size.default('16px')
    })
    .build()
  const view = muiView
  view.define(card.model)
  const formJson = {
    "form": {
      "key": "Screen",
      "type": "Screen",
      "children": [
        {
          "key": "userProfileCard",
          "type": "Card",
          "props": {
            "title": {
              "value": "User Profile"
            },
            "subtitle": {
              "value": "Complete your profile information"
            }
          },
          "css": {
            "any": {
              "object": {
                "backgroundColor": "#f8f9fa",
                "borderRadius": 12,
                "boxShadow": "0 4px 6px rgba(0,0,0,0.05)"
              }
            }
          },
          "children": [
            {
              "key": "nameField",
              "type": "MuiTextField",
              "props": {
                "label": {
                  "value": "Full Name"
                },
                "helperText": {
                  "value": "Enter your name"
                }
              }
            },
            {
              "key": "emailField",
              "type": "MuiTextField",
              "props": {
                "label": {
                  "value": "Email Address"
                },
                "helperText": {
                  "value": "Enter your email"
                }
              }
            }
          ]
        }
      ]
    }
  }
  return (
    <FormViewer
      view={view}
      getForm={() => JSON.stringify(formJson)}
    />
  )
}
```

--------------------------------

### Install React Suite Components

Source: https://formengine.io/documentation/components-library

Install the React Suite components package using npm. Manual installation of peer dependencies might be required.

```bash
npm install @react-form-builder/components-rsuite

# Install peer dependencies manually if needed
npm install clsx@2.1.1 @rsuite/icons@1.3.2 react-number-format@5.1.4 rsuite@5.83.4 --save-exact
```

--------------------------------

### React App Setup with RSuite Context

Source: https://formengine.io/documentation/formengine-designer/faq/using-designer-and-rsuite-components-in-react-19

This snippet shows the basic setup for a React 18 application using createRoot and the CreateRootContextProvider from rsuite. Ensure this is part of your main application entry point.

```javascript
import React from 'react'
import {createRoot} from 'react-dom/client'
import {CreateRootContextProvider} from 'rsuite'
import App from './App'

const rootEl = document.getElementById('root');
if (rootEl) {
  const root = createRoot(rootEl);
  root.render(
    <React.StrictMode>
      <CreateRootContextProvider value={createRoot}>
        <App/>
      </CreateRootContextProvider>
    </React.StrictMode>,
  );
}
```

--------------------------------

### Installing the fast_qr Library

Source: https://formengine.io/documentation/adding-wasm-component

Install the 'fast_qr' npm package, which is a Rust-compiled WASM library for generating QR codes.

```bash
npm install fast_qr
```

--------------------------------

### Live Example: Using a Styled Button in a Form

Source: https://formengine.io/documentation/formengine-core/custom-components/styling-custom-components

Demonstrates how to integrate a custom styled button component into a FormEngine application. This example shows the component definition and its usage within a `FormViewer`.

```typescript
function App() {
  const StyledButton = ({label, variant, disabled, onClick, className}) => {
    const baseClasses = `btn ${variant || 'primary'} ${disabled ? 'disabled' : ''}`
    return (
      <button
        className={`${baseClasses} ${className || ''}`}
        disabled={disabled}
        onClick={onClick}
      >
        {label}
      </button>
    )
  }
  const styledButton = define(StyledButton, 'StyledButton')
    .props({
      label: string.default('Click me'),
      variant: oneOf('primary', 'secondary', 'outline', 'ghost').default('primary'),
      disabled: boolean.default(false),
      onClick: event
    })
    .css({
      // Background and border
      backgroundColor: color.default('#007bff'),
      borderColor: color.default('#0056b3'),
      borderWidth: size.default('1px'),
      borderStyle: oneOf('solid', 'none', 'dashed').default('solid'),
      borderRadius: size.default('4px'),
      // Text
      color: color.default('#ffffff'),
      fontSize: number.default(14),
      fontWeight: oneOf('normal', 'bold', 'lighter').default('normal'),
      textAlign: oneOf('left', 'center', 'right').default('center'),
      // Sizing
      padding: size.default('8px 16px'),
      width: size.default('auto'),
      height: size.default('auto'),
      // Effects
      boxShadow: oneOf('none', 'small', 'medium', 'large').default('none'),
      opacity: number.default(1)
    })
    .build()
  const formJson = {
    "form": {
      "key": "Screen",
      "type": "Screen",
      "children": [
        {
          "key": "styledButton",
          "type": "StyledButton",
          "props": {
            "label": {
              "value": "Button"
            }
          }
        }
      ]
    }
  }
  const view = createView([styledButton.model])
  return (
    <FormViewer
      view={view}
      getForm={() => JSON.stringify(formJson)}
    />
  )
}
```

--------------------------------

### Install Emotion Packages

Source: https://formengine.io/documentation/formengine-core/installation

Ensure Emotion packages are installed to resolve Material UI styling issues.

```bash
npm install @emotion/react @emotion/styled
```

--------------------------------

### HTML Structure for Content-Security-Policy Example

Source: https://formengine.io/documentation/formengine-designer/getting-started/installation

The HTML structure for a FormEngine Designer example that runs with a stricter Content-Security-Policy. It includes meta tags for CSP and script/style loading configurations.

```html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>FormEngine Designer Content-Security-Policy Example</title>
  <!-- Use https://cdn.jsdelivr.net to load Monaco if you're loading it from a CDN -->
  <meta http-equiv="Content-Security-Policy"
        content="default-src 'self';           script-src 'self' 'unsafe-eval';           script-src-elem 'self' 'unsafe-inline' https://cdn.jsdelivr.net;           style-src 'unsafe-inline' https://cdn.jsdelivr.net file:;           img-src 'self' data:;           font-src 'self' https://cdn.jsdelivr.net data:;           connect-src 'self' https://cdn.jsdelivr.net;           object-src 'none';           base-uri 'self';           worker-src 'self' blob:;           form-action 'self';">
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
```

--------------------------------

### Live Example: CustomSelect in FormViewer

Source: https://formengine.io/documentation/formengine-core/custom-components/component-with-events

Demonstrates integrating the custom 'CustomSelect' component within a FormEngine 'FormViewer'. This example shows how to configure the component's options and display it in a live form.

```javascript
function App() {
  const CustomSelect = ({value, onChange, options, placeholder}) => (
    <select
      value={value}
      onChange={e => onChange(e.target.value)}
    >
      <option value=''>{placeholder}</option>
      {options.map(opt => (
        <option key={opt.value} value={opt.value}>
          {opt.label}
        </option>
      ))}
    </select>
  )
  const customSelect = define(CustomSelect, 'CustomSelect')
    .props({
      value: string.valued.uncontrolledValue(''),
      onChange: event,
      options: array.default([]),
      placeholder: string.default('Select an option...')
    })
    .build()
  const view = createView([customSelect.model])
  const formJson = {
    "form": {
      "key": "Screen",
      "type": "Screen",
      "children": [
        {
          "key": "customSelect",
          "type": "CustomSelect",
          "props": {
            "options": {
              "value": [
                {
                  "label": "Mercedes",
                  "value": "m"
                },
                {
                  "label": "Toyota",
                  "value": "t"
                },
                {
                  "label": "Kia",
                  "value": "k"
                }
              ]
            }
          }
        }
      ]
    }
  }
  return (
    <FormViewer
      view={view}
      getForm={() => JSON.stringify(formJson)}
      onFormDataChange={({data}) => {
        console.log(JSON.stringify(data))
      }}
    />
  )
}
```

--------------------------------

### Live Example: Debounced Input in FormViewer

Source: https://formengine.io/documentation/formengine-core/custom-components/valued-components

Demonstrates integrating the custom 'DebouncedInput' component within a FormEngine 'FormViewer'. This example shows how to configure the component and render it using a form JSON structure.

```javascript
function App() {
  const DebouncedInput = ({value, onChange, delay}) => {
    const [internalValue, setInternalValue] = useState(value)
    useEffect(() => {
      const timeout = setTimeout(() => {
        onChange(internalValue)
      }, delay)
      return () => clearTimeout(timeout)
    }, [internalValue, delay, onChange])
    return (
      <input
        value={internalValue}
        onChange={e => setInternalValue(e.target.value)}
      />
    )
  }
  const debouncedInput = define(DebouncedInput, 'DebouncedInput')
    .props({
      value: string
        .valued
        .uncontrolledValue(''), // Component manages initial state
      delay: number.default(300)
    })
    .build()
  const view = createView([debouncedInput.model])
  const formJson = {
    "form": {
      "key": "Screen",
      "type": "Screen",
      "children": [
        {
          "key": "debouncedInput",
          "type": "DebouncedInput"
        }
      ]
    }
  }
  return (
    <FormViewer
      view={view}
      getForm={() => JSON.stringify(formJson)}
      onFormDataChange={({data}) => {
        console.log(JSON.stringify(data))
      }}
    />
  )
}
```

--------------------------------

### Install React Suite Components Package

Source: https://formengine.io/documentation/formengine-designer/getting-started/installation

Install the @react-form-builder/components-rsuite package using npm to get started with a pre-populated set of components for the form designer.

```bash
npm install @react-form-builder/components-rsuite
```

--------------------------------

### onTouchStart

Source: https://formengine.io/documentation/api-reference/@react-form-builder/components-material-ui/interfaces/MuiFormControlProps

Callback fired when the touch start event occurs.

```APIDOC
## onTouchStart

### Description
Callback fired when the touch start event occurs.

### Type
`optional TouchEventHandler<HTMLDivElement>`

### Inherited from
`FormControlProps.onTouchStart`
```

--------------------------------

### Clone and Install Electron React Boilerplate

Source: https://formengine.io/documentation/integration-with-electron

Clone the electron-react-boilerplate repository and install its dependencies to start building the Electron application.

```bash
git clone --depth 1 --branch main https://github.com/electron-react-boilerplate/electron-react-boilerplate.git electron-formengine
cd electron-formenginenpm install
```

--------------------------------

### onTouchStart

Source: https://formengine.io/documentation/api-reference/@react-form-builder/viewer-bundle/namespaces/rSuiteComponents/interfaces/RsTabProps

Handles the touch start event. This handler is inherited from NavProps.

```APIDOC
## onTouchStart

### Description
Handles the touch start event on the tab.

### Type
`TouchEventHandler<HTMLElement>`

### Optional
Yes

### Inherited From
`NavProps.onTouchStart`
```

--------------------------------

### Start the React Application

Source: https://formengine.io/documentation/formengine-designer/features/custom-components

Command to run the React development server and view the application in the browser.

```bash
npm run start
```

--------------------------------

### fields

Source: https://formengine.io/documentation/api-reference/@react-form-builder/core/classes/ComponentData

Gets all the fields in the tree as a map, starting from this node.

```APIDOC
## fields

### Description
Gets all the fields in the tree as a map, starting from this node.

### Method
GET

### Endpoint
/fields

### Returns
- `Map<string, Field>`: A map of all fields in the tree.
```

--------------------------------

### onLoadStart

Source: https://formengine.io/documentation/api-reference/@react-form-builder/components-rsuite/interfaces/RsMenuProps

Callback fired when the media data starts loading.

```APIDOC
## onLoadStart

### Description
Callback fired when the media data starts loading.

### Type
`optional` ReactEventHandler<HTMLElement>

### Inherited from
`NavProps.onLoadStart`
```

--------------------------------

### onLoadStart

Source: https://formengine.io/documentation/api-reference/@react-form-builder/components-rsuite/interfaces/RsUploaderProps

Callback fired when the browser starts playback of the media.

```APIDOC
## onLoadStart

### Description
Callback fired when the browser starts playback of the media.

### Type
`optional` **onLoadStart**: `ReactEventHandler`<`HTMLElement`

### Inherited From
`UploaderProps.onLoadStart`
```

--------------------------------

### Live Example: Using a Styled Custom Component in an App

Source: https://formengine.io/documentation/formengine-core/custom-components/styling-custom-components

Demonstrates how to integrate a custom styled component, defined with CSS properties, into a FormEngine application. This includes setting up the component definition and rendering it within a `FormViewer`.

```javascript
function App() {
  const StyledBox = ({children, className}) => (
    <div className={className}>{children}</div>
  )
  const styledBox = define(StyledBox, 'StyledBox')
    .name('Styled Box')
    .props({
      content: string.default('Styled content')
    })
    .css({
      // Define CSS properties with type safety
      backgroundColor: color.default('#ffffff'),
      textAlign: oneOf('left', 'center', 'right', 'justify').default('left'),
      fontSize: number.default(16),
      padding: size.default('10px'),
      borderWidth: size.default('1px'),
      borderStyle: oneOf('solid', 'dashed', 'dotted', 'none').default('solid'),
      borderColor: color.default('#cccccc'),
      borderRadius: size.default('4px')
    })
    .build()
  const formJson = {
    "form": {
      "key": "Screen",
      "type": "Screen",
      "children": [
        {
          "key": "styledBox",
          "type": "StyledBox"
        }
      ]
    }
  }
  
  const view = createView([styledBox.model])
  return (
    <FormViewer
      view={view}
      getForm={() => JSON.stringify(formJson)}
    />
  )
}
```

--------------------------------

### Connect QR Code to FormBuilder

Source: https://formengine.io/documentation/formengine-designer/components/qr-code

Example of connecting the QR code component to the FormBuilder, assuming rsuite components are also installed.

```javascript
import {rSuiteComponents} from '@react-form-builder/components-rsuite'
import {BuilderView, FormBuilder} from '@react-form-builder/designer'
import {fastQrComponent} from '@react-form-builder/components-fast-qr'

const components = rSuiteComponents.map((c) => c.build())
const builderView = new BuilderView([...components, fastQrComponent.build()])

function App() {
  return <FormBuilder view={builderView}/>
}
```

--------------------------------

### onTouchStart

Source: https://formengine.io/documentation/api-reference/@react-form-builder/components-material-ui/interfaces/MuiListItemProps

Handler for the touchstart event. Inherited from ListItemProps.

```APIDOC
## onTouchStart

### Description
Handler for the touchstart event on a list item.

### Method
Not applicable (event handler)

### Endpoint
Not applicable (event handler)

### Parameters
#### Event Handler
- **onTouchStart** (TouchEventHandler<HTMLLIElement>) - Optional - Handler for the touchstart event.

#### Inherited From
`ListItemProps.onTouchStart`
```

--------------------------------

### Run Development Server Command

Source: https://formengine.io/documentation/formengine-core/installation

Command to start the development server for your React application. This command is typically used after installing dependencies and setting up your project.

```bash
npm run dev
```

--------------------------------

### Full Form Viewer Example with Combined Validators

Source: https://formengine.io/documentation/formengine-core/validation

Demonstrates integrating both JSON-defined and external JavaScript validators within a FormViewer component. This setup allows for comprehensive form validation logic.

```javascript
function App() {
  const formJson 	= {
    "formValidator": "  const errors = {};\n  if (!formData.email) {\n    errors.email = 'Email is required';\n  }\n  if (!formData.password) {\n    errors.password = 'Password is required';\n  }\n  return errors;",
    "tooltipType": "MuiTooltip",
    "errorType": "MuiErrorWrapper",
    "form": {
      "key": "Screen",
      "type": "Screen",
      "children": [
        {
          "key": "email",
          "type": "MuiTextField",
          "props": {
            "label": {
              "value": "Email"
            }
          }
        },
        {
          "key": "password",
          "type": "MuiTextField",
          "props": {
            "label": {
              "value": "Password"
            }
          }
        },
        {
          "key": "accountType",
          "type": "MuiSelect",
          "props": {
            "items": {
              "value": [
                {
                  "value": "free",
                  "label": "Free"
                },
                {
                  "value": "premium",
                  "label": "Premium"
                }
              ]
            },
            "label": {
              "value": "Account Type"
            }
          }
        },
        {
          "key": "companyName",
          "type": "MuiTextField",
          "props": {
            "label": {
              "value": "Company Name"
            }
          }
        },
        {
          "key": "validate",
          "type": "MuiButton",
          "props": {
            "children": {
              "value": "Validate"
            }
          },
          "events": {
            "onClick": [
              {
                "name": "validate",
                "type": "common"
              }
            ]
          }
        }
      ]
    }
  }
  // External validator
  const externalValidator 	= async (formData) 	=> {
    const errors 	= {}
    // Business rule: premium users must provide company name
    if (formData.accountType 	=== 'premium' && !formData.companyName) {
      errors.companyName 	= 'Company name is required for premium accounts'
    }
    return errors
  }
  const formValidators 	= [externalValidator]
  return (
    <FormViewer
      view				={muiView}
      formValidators		={formValidators}
      getForm					={() 	=> JSON.stringify(formJson)}
    />
  )
}
```

--------------------------------

### Bootstrapping a React Application with Vite

Source: https://formengine.io/documentation/adding-wasm-component

Create a new React application using Vite and install necessary dependencies. This sets up the basic project structure.

```bash
npm create vite@latest my-react-app -- --template react-tscd my-react-app
npm install
npm run dev
```

--------------------------------

### Live Example: FormViewer with Custom ActionButton

Source: https://formengine.io/documentation/formengine-core/custom-components/component-with-events

A complete React application demonstrating the usage of the custom ActionButton component within a FormViewer. It includes the component definition, form JSON, and viewer setup.

```jsx
function App() {
  const ActionButton = ({children, onClick, disabled, loading}) => {
    const handleClick = (event) => {
      if (!disabled && !loading) {
        onClick?.(event)
      }
    }

    return (
      <button
        className="action-button"
        onClick={handleClick}
        disabled={disabled || loading}
      >
        {loading && <span className="action-button__spinner">⟳</span>}
        <span className="action-button__text">{children}</span>
      </button>
    )
  }

  const actionButton = define(ActionButton, 'ActionButton')
    .props({
      children: string.default('Click Me'),
      onClick: event,
      disabled: boolean.default(false),
      loading: boolean.default(false)
    })
    .build()

  const view = createView([actionButton.model])

  const formJson = {
    "form": {
      "key": "Screen",
      "type": "Screen",
      "children": [
        {
          "key": "submitButton",
          "type": "ActionButton",
          "props": {
            "children": {
              "value": "Submit Form"
            }
          },
          "events": {
            "onClick": [
              {
                "name": "validate",
                "type": "common"
              },
              {
                "name": "log",
                "type": "common"
              }
            ]
          }
        }
      ]
    }
  }

  return (
    <FormViewer
      view={view}
      getForm={() => JSON.stringify(formJson)}
      onFormDataChange={({data}) => {
        console.log(JSON.stringify(data))
      }}
    />
  )
}
```

--------------------------------

### onTouchStart

Source: https://formengine.io/documentation/llms-full.txt

Handles the touch start event for the Box component. This event is fired when a touch point is placed on the surface.

```APIDOC
## onTouchStart

### Description
Handles the touch start event for the Box component. This event is fired when a touch point is placed on the surface.

### Type
`TouchEventHandler<HTMLDivElement>`

### Optional
This property is optional.
```

--------------------------------

### Form Viewer with Functional Property Example

Source: https://formengine.io/documentation/formengine-core/custom-components/functional-properties

Demonstrates a complete FormEngine setup using a DataDisplay component with a functional property for data formatting. The 'format' property is defined in the form JSON with a 'computeType' of 'function'.

```javascript
function App() {
  const DataDisplay = ({label, data, format}) => {
    const formattedValue = useMemo(() => {
      if (format) return format(data)
      return typeof data === 'number' ? `${data}` : ''
    }, [data, format])

    return <div>
      <span>{label} </span>{formattedValue}
    </div>
  }

  const dataDisplay = define(DataDisplay, 'DataDisplay')
    .props({
      label: string.default('Value:'),
      data: number.dataBound,
      format: fn(`/** 
 * @param {number} data 
 * @returns {string} 
 */
function format(data) {`)
    })
    .build()

  const view = createView([dataDisplay.model])

  const formJson = {
    "form": {
      "key": "Screen",
      "type": "Screen",
      "children": [
        {
          "key": "dataDisplay1",
          "type": "DataDisplay",
          "props": {
            "data": {
              "value": 1212
            },
            "format": {
              "computeType": "function",
              "fnSource": "return (/\*\*\n * @param {number} data\n * @returns {string}\n *\/\nfunction formattedValue(data) {return 'data is ' + data})"
            }
          }
        }
      ]
    }
  }

  return (
    <FormViewer
      view={view}
      getForm={() => JSON.stringify(formJson)}
    />
  )
}
```

--------------------------------

### Live Example: Form with Tooltip Integration

Source: https://formengine.io/documentation/formengine-core/tooltip

Demonstrates how to integrate the SimpleTooltip component into a form using FormEngine Core's MuiView and FormViewer. This example shows a text field with a tooltip that appears on hover, configured via `tooltipProps`.

```javascript
function App() {
  const containerStyle 	= {
    position: 'relative',
    display: 'inline-flex',
    alignItems: 'center'
  }
  const bubbleStyle 	= {
    position: 'absolute',
    backgroundColor: '#111827',
    color: '#ffffff',
    padding: '6px 8px',
    borderRadius: 4,
    fontSize: 12,
    whiteSpace: 'nowrap',
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
    transition: 'opacity 120ms ease',
    zIndex: 10
  }
  const placements 	= {
    top: {bottom: '100%', left: '50%', transform: 'translate(-50%, -8px)'},
    right: {left: '100%', top: '50%', transform: 'translate(8px, -50%)'},
    bottom: {top: '100%', left: '50%', transform: 'translate(-50%, 8px)'},
    left: {right: '100%', top: '50%', transform: 'translate(-8px, -50%)'}
  }
  const SimpleTooltip 	= ({text, placement 	= 'top', children, className})
 	=> {
    const 	[open, setOpen]	 	= useState(false)
    const tooltipStyle 	= useMemo(() 	=> ({
      ...bubbleStyle,
      ...placements[placement],
      opacity: open ? 1 : 0,
      pointerEvents: open ? 'auto' : 'none'
    }), [open, placement])
    if (!children) return null
    return (
      <span
        className	={className}
        style	={containerStyle}
        onMouseEnter	={() 	=> setOpen(true)}
        onMouseLeave	={() 	=> setOpen(false)}
      >
        {children}
        <span style	={tooltipStyle} role	="tooltip"	>{text}</span>
      </span>
    )
  }
  const simpleTooltip 	= define(SimpleTooltip, 'SimpleTooltip')
    .props({
      text: string.required.default('Tooltip message...').dataBound,
      placement: oneOf('top', 'right', 'bottom', 'left').default('top'),
      children: node
    })
    .componentRole('tooltip')
    .build()
  const view 	= muiView
  view.define(simpleTooltip.model)
  const form 	= {
    tooltipType: 'SimpleTooltip',
    form: {
      key: 'Screen',
      type: 'Screen',
      props: {},
      children: [
        {
          key: 'intro',
          type: 'MuiTypography',
          props: {
            children: {
              value: 'Account setup'
            },
            variant: {
              value: 'h6'
            }
          }
        },
        {
          key: 'email',
          type: 'MuiTextField',
          props: {
            label: {
              value: 'Email address'
            },
            helperText: {
              value: 'Hover for tooltip help'
            }
          },
          tooltipProps: {
            text: {
              value: 'We only use this to send updates'
            },
            placement: {
              value: 'top'
            }
          }
        }
      ]
    }
  }
  const getForm 	= useCallback(() 	=> JSON.stringify(form), [form])
  return <FormViewer view	={view} getForm	={getForm} />
}
```

--------------------------------

### Form Viewer Component Setup

Source: https://formengine.io/documentation/formengine-core/localization

This JavaScript code sets up the FormViewer component, including defining how to get form data and handling language changes. It initializes the language state and provides actions for the form.

```javascript
const getForm = useCallback((name) => {
  const data = name === 'confirmation-dialog' ? confirmationDialog : form
  return JSON.stringify(data)
}, [confirmationDialog, form])
muiView.define(myDialog.model)
const [language, setLanguage] = useState<LanguageFullCode>('en-US')
const actions = useMemo(() => ({
  onLangChange: (e) => {
    setLanguage(e.args[0] ?? 'en-US')
  }
}), [])
const initialData = useMemo(() => ({langSelect: 'en-US'}), [])
return <FormViewer
  initialData={initialData}
  view={muiView}
  getForm={getForm}
  actions={actions}
  language={language}
/>
```

--------------------------------

### onLoadStart

Source: https://formengine.io/documentation/api-reference/@react-form-builder/viewer-bundle-premium/namespaces/rSuiteComponents/interfaces/RsMenuProps

Callback fired when the component starts loading. Inherited from NavProps.

```APIDOC
## onLoadStart

### Description
Callback fired when the component starts loading. This event is inherited from `NavProps`.

### Method
`optional` onLoadStart: `ReactEventHandler`<`HTMLElement`

### Inherited From
`NavProps.onLoadStart`
```

--------------------------------

### Form Configuration with onFormDataChange Example

Source: https://formengine.io/documentation/tracking-form-changes

This snippet demonstrates a form configuration in JSON format and the associated React component setup. It includes the definition of form fields and a button whose disabled state is controlled by form data changes. Use this to set up your forms and integrate the change tracking logic.

```javascript
import {
  ltrCssLoader,
  RsLocalizationWrapper,
  rSuiteComponents,
  rtlCssLoader,
} from '@react-form-builder/components-rsuite'
import {BiDi, createView, FormViewer} from '@react-form-builder/core'
// Here you can pass the metadata of your components
const componentsMetadata = rSuiteComponents.map(
  (definer) => definer.build().model,
)
const view = createView(componentsMetadata)
  // The following parameters are required for correct CSS loading in LTR and RTL modes
  .withViewerWrapper(RsLocalizationWrapper)
  .withCssLoader(BiDi.LTR, ltrCssLoader)
  .withCssLoader(BiDi.RTL, rtlCssLoader)
// Example form, in JSON format
const emptyForm = `{
  "version": "1",
  "form": {
    "key": "Screen",
    "type": "Screen",
    "props": {},
    "children": [
      {
        "key": "firstName",
        "type": "RsInput",
        "props": {
          "label": {
            "value": "First name"
          }
        }
      },
      {
        "key": "lastName",
        "type": "RsInput",
        "props": {
          "label": {
            "value": "Last Name"
          }
        }
      },
      {
        "key": "rsButton1",
        "type": "RsButton",
        "props": {
          "appearance": {
            "value": "primary"
          },
          "children": {
            "value": "Save"
          },
          "color": {
            "value": "blue"
          },
          "disabled": {
            "value": false,
            "computeType": "function",
            "fnSource": "  return form.state.dataChanged !== true;"
          }
        }
      }
    ]
  },
  "localization": {},
  "languages": [
    {
      "code": "en",
      "dialect": "US",
      "name": "English",
      "description": "American English",
      "bidi": "ltr"
    }
  ],
  "defaultLanguage": "en-US"
}`

const formName = 'Example'

async function getFormFn(name?: string) {
  if (name === formName) return emptyForm
  throw new Error(`Form '${name}' is not found.`)
}

const initialData = {
  firstName: 'Mars',
  lastName: 'Jupiter',
}

const App = () => {
  return (
    <FormViewer
      view={view}
      getForm={getFormFn}
      formName={formName}
      initialData={initialData}
      onFormDataChange={({data, state}) => {
        const sourceData = JSON.stringify(initialData)
        const currentData = JSON.stringify(data)
        state.dataChanged = sourceData !== currentData
      }}
    />
  )
}

export default App
```

--------------------------------

### Live Responsive Form Example

Source: https://formengine.io/documentation/formengine-core/styling-components-and-forms

A React component demonstrating a live, responsive form using FormViewer. It dynamically generates the form configuration and passes it to the viewer.

```javascript
function App() {
  const form 	= {
    "form": {
      "key": "Screen",
      "type": "Screen",
      "css": {
        "desktop": {
          "object": {
            "padding": 40,
            "maxWidth": 800
          }
        },
        "tablet": {
          "object": {
            "padding": 24,
            "maxWidth": 600
          }
        },
        "mobile": {
          "object": {
            "padding": 16,
            "maxWidth": "100%"
          }
        },
        "any": {
          "object": {
            "margin": "0 auto",
            "backgroundColor": "#fafafa"
          }
        }
      },
      "children": [
        {
          "key": "formFields",
          "type": "MuiBox",
          "css": {
            "desktop": {
              "object": {
                "display": "grid",
                "gridTemplateColumns": "1fr 1fr",
                "gap": 24
              }
            },
            "mobile": {
              "object": {
                "display": "flex",
                "flexDirection": "column",
                "gap": 16
              }
            },
            "any": {
              "object": {
                "marginBottom": 32
              }
            }
          },
          "children": [
            {
              "key": "firstName",
              "type": "MuiTextField",
              "props": {
                "label": {
                  "value": "First Name"
                }
              },
              "wrapperCss": {
                "any": {
                  "object": {
                    "width": "100%"
                  }
                }
              }
            },
            {
              "key": "lastName",
              "type": "MuiTextField",
              "props": {
                "label": {
                  "value": "Last Name"
                }
              },
              "wrapperCss": {
                "any": {
                  "object": {
                    "width": "100%"
                  }
                }
              }
            }
          ]
        }
      ]
    }
  }
  const getForm 	= useCallback(() 	=> JSON.stringify(form), [form])
  return <FormViewer
    view			={muiView}
    getForm		={getForm}
  />
}
```

--------------------------------

### Install Mantine Components

Source: https://formengine.io/documentation/components-library

Install the Mantine components package using npm. Remember to install peer dependencies.

```bash
npm install @react-form-builder/components-mantine

# Optional: Install peer dependencies
npm install @mantine/core @mantine/dates# Optional: @mantine/dropzone @mantine/tiptap
```

--------------------------------

### Load and Send Form Data with Mock Backend

Source: https://formengine.io/documentation/form-data

This example demonstrates fetching initial form data from a mock backend and sending updated data back. It uses `mockBackendGet` and `mockBackendPost` to simulate asynchronous API calls. The `Send` button is enabled only when there are pending changes.

```javascript
// ...let mockBackendStore = generateData()
const mockBackendGet = async () => {
  await new Promise(r => setTimeout(r, 300))
  return {
    generated: +new Date,
    data: mockBackendStore
  }
}

const mockBackendPost = async (data: any) => {
  await new Promise(r => setTimeout(r, 300))
  mockBackendStore = data
  return {
    status: 'success',
    data: mockBackendStore
  }
}

export const FormViewerExample = () => {
  // ...
  const loadData = useCallback(async () => {
    const response = await mockBackendGet()
    setAppLevelState(response.data)
    setPendingChanges(EMPTY)
  }, [])

  const sendData = useCallback(async () => {
    if (havePendingChanges) {
      const result = await mockBackendPost(pendingChanges)
      if (result.status === 'success') {
        setPendingChanges(EMPTY)
      }
    }
  }, [havePendingChanges])

  return <>
    <Buttons title={'Emulate backend'}>
      <button className={'button'} onClick={loadData}>Load</button>
      <button className={'button'} onClick={sendData} disabled={!havePendingChanges}>Send</button>
    </Buttons>
    <FormViewer view={view} formName="SampleForm" getForm={getForm}
                onFormDataChange={onFormDataChanged}
                viewerRef={viewerRef}
                initialData={appLevelState} actions={customActions}/>
  </>
}
```

--------------------------------

### Install Peer Dependencies (if needed)

Source: https://formengine.io/documentation/formengine-designer/getting-started/installation

If your package manager does not automatically install peer dependencies, install them manually using this command.

```bash
npm install clsx@2.1.1 mobx@6.13.5 mobx-react@9.2.0 rsuite@5.83.4 --save-exact
```