metaforms-mui

Material UI with metaforms

Change logs

• Take theme and rest configuration parameters as input properties (theme and rest respectively).
• Set default textfield variant as filled.
• Added Phone control.

Install

npm install --save @manojadams/metaforms-mui

Basic Usage

1. Define your json schema

const exampleSchema = {
    "fields": [{
        "name": "first_name",
        "meta": {
            "displayType": "text",
            "displayName": "First Name"
        }
    }, {
        "name": "last_name",
        "meta": {
            "displayType": "text",
            "displayName": "Last Name"
        }
    }]
}

2. Schema details

export interface IUISchema {
    schema: ISchema;
}

export interface ISchema {
    fields: Array<IField>;
    theme?: ITheme;
    buttons?: Array<IField>;
    rest?: IRest;
}

export interface IRest {
    config: IConfig;
}

export interface IConfig {
    apihost?: string;
    basepath?: string;
    protocol?: string;
    headers?: Array<IConfigParam>;
}

export interface IConfigParam {
    key: string;
    value: string;
}

export interface IField {
    name: string;
    prop?: string;
    meta: IMeta;
    fields?: Array<IField>;
}

export interface IMeta {
    type?: string;
    display?: boolean;
    isArray?: boolean;
    displayName?: string;
    displayType?: string;
    placeholder?: string;
    value?: string | number | boolean;
    displayProps?: IDisplayProps;
    options?: Array<IOption>;
    isDisabled?: boolean;
    isReadonly?: boolean;
    validation?: IValidation;
    dependencies?: IDependency;
    loader?: ILoader;
    mui?: any;
    bootstrap?: any;
    url?: string;
    className?: string;
    events?: IEvent;
    labelPlacement?: string;
    error?: {hasError: boolean, errorMsg: string};
    init?: IURLLoaderConfig;
    config?: IURLLoaderConfig;
    icons?: IIconConfig;
}

export interface IOption {
    value: string;
    label: string;
    ref?: any;  // reference to original object
}

export interface IURLLoaderConfig {
    type: string;   // url_loader, lazy_loader
    url: string;
    queryParams?: Array<TParam>; // query params
    pathParams?: Array<TParam>; // path params
    responseKey?: string;
    valueKey?: string;
    labelKey?: string;
    loadOn?: Array<string>;
    openTo?: string;        // for calendar -- year, month, day
    inputFormat?: string;   // for calendar 
    views?: string;         // for calendar
}
export interface IIconConfig {
    [key: string]: {
        type: string;
        position?: string;
    };
}

export interface IFieldConfig extends IURLLoaderConfig {

}

export interface IDisplayProps {
    lg?: number;
    md?: number;
    sm?: number;
    xs?: number;
    offset?: string;
    rs?: boolean;   // row start
    isStandalone?: boolean;
    align?: string;//left, right, center
    fieldLayout?: string;
    optionsLayout?: string;
}

export interface ITheme {
    type: string;
    sectionLayout?: string;
    spacing?: string;
    className?: string;
    mui?: IMUITheme;
    bootstrap?: IBootstrapTheme;
}

export interface IValidation {
    required?: boolean;
    required_detail?: IValidationDetail;
    pattern?: string;
    pattern_detail?: IPatternValidationDetail;
    min?: number | string;
    min_detail?: IValidationDetail;
    max?: number | string;
    max_detail?: IValidationDetail;
    info_detail?: IInfoDetail;
}

export interface IValidationDetail {
    errorMsg?: string;
}

export interface IPatternValidationDetail extends IValidationDetail {
    allowValidOnly?: boolean;
}

export interface IInfoDetail {
    infoMsg?: string;
}

export interface IDependency {
    exists?: IExistsDependency;
    enabled?: IEnabledDependency;
    load?: ILoadDependency;
    equals?: IEqualsDependency;
    displayType?: IDisplayTypeDependency;
}

export interface IBaseDependency {
    section: string;
    ref: string;    
    value: string;
}

export interface IExistsDependency extends IBaseDependency {

}

export interface IEnabledDependency extends IBaseDependency {

}

export interface ILoadDependency extends IBaseDependency {
    url: string;
}

export interface IEqualsDependency extends IBaseDependency {
    currentValue: any;
    resetValue: any;
}

export interface IDisplayTypeDependency extends IBaseDependency {
    
}
export interface ILoader {

}

export interface IFieldChange {
    type: string;
    reference: string;
}

export interface IEvent {
    click?: IClickEvent;
    input?: IInputEvent;
    change?: IChangeEvent | Array<IChangeEvent>;
    open?: IConfig;   // for select
}

export interface IMUITheme {
    variant?: string;
    size?: string;
    tabs?: {
        variant: string;
    }
}

export interface IBootstrapTheme {
    
}

export interface IClickEvent {
    type: string; // submit, reset, next, previous, action (custom)
    value?: string;
}
export interface IInputEvent {
    type: string;
    url: string;
    params: Array<TParam>;
    labelKey?: string;
    valueKey?: string;
    responseKey?: string;
    response?: string;
    value?: string;
}

export interface IChangeEvent {
    type: string;       // setter
    ref: string;
    valueKey: string;
    value: any;
}

export interface IParamType {
    type?: string;
    ref?: string;       // reference field
    section?: string;   // reference section
}

export type TParamType = IParamType | string | undefined;
export type TParam = [string, TParamType];

export interface IFormatterType {
    [key: string]: Function;
}

3. Usage

import React, { Component } from 'react'

import MetaForm from '@manojadams/metaforms-mui'
import 'metaforms-mui/dist/index.css'

class Example extends Component {
  render() {
    return <MetaForm schema={exampleSchema} onSubmit={(formData) => {
      // submit data
    }}/>
  }
}

License

MIT © manojgetwealthy