Liferay Clay Form Generator

Introduction

The Liferay Clay Form Generator is a dynamic form generator built for Liferay applications. It allows developers to define form schemas and automatically generate forms with validation, layout, and a variety of input controls.

Features

• Dynamic form generation from schema
• Support for various control types: select, checkbox, toggle, radio, date, file, input, slider, and textarea
• Built-in validation with custom messages
• Flexible layout configuration

Installation

To install the Liferay Clay Form Generator, run:

npm install clay-dynamic-forms

Usage

Basic Example

import React, { useRef } from 'react';
import { LRDynamicForm, LRDynamicFormRef } from 'liferay-clay-form-generator';

const formSchema = {
    properties: {
        username: {
            name: 'username',
            title: 'Username',
            controlType: 'input',
            dataType: 'text',
            validators: [{ type: 'required', message: 'Username is required' }]
        },
        password: {
            name: 'password',
            title: 'Password',
            controlType: 'input',
            dataType: 'text',
            validators: [{ type: 'required', message: 'Password is required' }]
        }
    }
};

const MyFormComponent = () => {
    const formRef = useRef<LRDynamicFormRef>(null);

    const handleSubmit = () => {
        if (formRef.current) {
            formRef.current.handleFormSubmit();
        }
    };

    return (
        <div>
            <LRDynamicForm schema={formSchema} ref={formRef} />
            <button onClick={handleSubmit}>Submit</button>
        </div>
    );
};

export default MyFormComponent;

Schema Definition

FormField

export interface FormField {
    name: string;
    title: string;
    controlType: 'select' | 'checkbox' | 'toggle' | 'radio' | 'toggle-group' | 'date' | 'file' | 'input' | 'slider' | 'textarea';
    dataType: 'text' | 'boolean' | 'number' | 'object';
    format?: string;
    default?: any;
    enum?: any[];
    config?: any;
    tooltipPosition?: "top" | "bottom";
    [key: string]: any;
}

Sizes

export interface Sizes {
  lg: number;
  md: number;
  sm: number;
  xs: number;
}

LayoutItem

export interface LayoutItem {
  type: 'row' | 'col';
  sizes?: Sizes;
  field: string;
  items?: LayoutItem[];
}

FormSchema

export interface FormSchema {
  properties: {
    [key: string]: FormField;
  };
  layout?: LayoutItem[];
  validation?: FieldValidation[];
}

Validator

export interface Validator {
  type: 'required' | 'pattern';
  pattern?: string;
  message?: string;
}

FieldValidation

export interface FieldValidation {
  field: string;
  validators: Validator[];
}

Props

LRDynamicFormProps

export interface LRDynamicFormProps {
  schema: any;
}

Ref

LRDynamicFormRef

export interface LRDynamicFormRef {
  handleFormSubmit: () => void;
  handleFormReset: () => void;
  handleFormValidation: () => Promise<boolean>;
}

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any bugs or features.

License

This project is licensed under the MIT License.