How to use the @entando/utils.maxLength function in @entando/utils

import { required, maxLength } from '@entando/utils';
import RenderTextInput from 'ui/common/form/RenderTextInput';
import RenderSelectInput from 'ui/common/form/RenderSelectInput';
import FormLabel from 'ui/common/form/FormLabel';
import AttributeListTable from 'ui/common/attributes/AttributeListTable';
import DeleteAttributeModalContainer from 'ui/data-types/attributes/DeleteAttributeModalContainer';


const uppercaseThreeLetters = value =>
  (value && !/[A-Z]$/g.test(value)
    ?  : undefined);

const maxLength3 = maxLength(3);

const maxLength50 = maxLength(50);


export class DataTypeFormBody extends Component {
  componentWillMount() {
    this.props.onWillMount(this.props);
  }

  render() {
    const {
      attributesType, mode, handleSubmit,
      onAddAttribute, invalid, submitting,
      dataTypeCode,
    } = this.props;

    const isEdit = mode === 'edit';

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { Button, Row, Col } from 'patternfly-react';
import { formattedText, required, maxLength, code } from '@entando/utils';
import { FormattedMessage } from 'react-intl';
import RenderTextInput from 'ui/common/form/RenderTextInput';
import FormLabel from 'ui/common/form/FormLabel';

export const maxLength50 = maxLength(50);
export const maxLength20 = maxLength(20);

const EDIT_MODE = 'edit';
const NEW_MODE = 'new';

export class GroupFormBody extends Component {
  componentWillMount() {
    this.props.onWillMount(this.props);
  }

  onSubmit = (ev) => {
    ev.preventDefault();
    this.props.handleSubmit();
  };

  render() {

import { Field, reduxForm } from 'redux-form';
import { FormattedMessage } from 'react-intl';
import { InputGroup, Button, Row, Col } from 'patternfly-react';

import { required, maxLength } from '@entando/utils';
import RenderTextInput from 'ui/common/form/RenderTextInput';
import RenderSelectInput from 'ui/common/form/RenderSelectInput';
import FormLabel from 'ui/common/form/FormLabel';
import AttributeListTable from 'ui/common/attributes/AttributeListTable';
import DeleteAttributeModalContainer from 'ui/profile-types/attributes/DeleteAttributeModalContainer';

const uppercaseThreeLetters = value =>
  (value && !/^[A-Z]{1,3}$/i.test(value)
    ?  : undefined);

const maxLength50 = maxLength(50);


export class ProfileTypeFormBody extends Component {
  componentWillMount() {
    this.props.onWillMount(this.props);
  }
  render() {
    const {
      attributesType, mode, handleSubmit,
      onAddAttribute, invalid, submitting,
      profileTypeCode,
    } = this.props;

    const isEdit = mode === 'edit';

    const selectOptions = attributesType.map(item => ({

import { FormattedMessage } from 'react-intl';
import { InputGroup, Button, Row, Col } from 'patternfly-react';

import { required, maxLength } from '@entando/utils';
import RenderTextInput from 'ui/common/form/RenderTextInput';
import RenderSelectInput from 'ui/common/form/RenderSelectInput';
import FormLabel from 'ui/common/form/FormLabel';
import AttributeListTable from 'ui/common/attributes/AttributeListTable';
import DeleteAttributeModalContainer from 'ui/data-types/attributes/DeleteAttributeModalContainer';


const uppercaseThreeLetters = value =>
  (value && !/[A-Z]$/g.test(value)
    ?  : undefined);

const maxLength3 = maxLength(3);

const maxLength50 = maxLength(50);


export class DataTypeFormBody extends Component {
  componentWillMount() {
    this.props.onWillMount(this.props);
  }

  render() {
    const {
      attributesType, mode, handleSubmit,
      onAddAttribute, invalid, submitting,
      dataTypeCode,
    } = this.props;

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { Button, Row, Col } from 'patternfly-react';
import { formattedText, required, maxLength, code } from '@entando/utils';
import { FormattedMessage } from 'react-intl';
import RenderTextInput from 'ui/common/form/RenderTextInput';
import FormLabel from 'ui/common/form/FormLabel';
import PermissionGrid from 'ui/roles/common/PermissionGrid';

export const maxLength50 = maxLength(50);
export const maxLength20 = maxLength(20);

const EDIT_MODE = 'edit';
const NEW_MODE = 'new';

export class RoleFormBody extends Component {
  componentWillMount() {
    this.props.onWillMount(this.props);
  }

  onSubmit = (ev) => {
    ev.preventDefault();
    this.props.handleSubmit();
  };

  render() {

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { Button, Row, Col } from 'patternfly-react';
import { formattedText, required, maxLength } from '@entando/utils';
import { Link } from 'react-router-dom';
import { FormattedMessage } from 'react-intl';
import RenderTextInput from 'ui/common/form/RenderTextInput';
import FormLabel from 'ui/common/form/FormLabel';
import { ROUTE_FILE_BROWSER } from 'app-init/router';

export const maxLength50 = maxLength(50);

export class CreateFolderFormBody extends Component {
  onSubmit = (ev) => {
    ev.preventDefault();
    this.props.handleSubmit();
  };

  render() {
    const {
      invalid, submitting,
    } = this.props;

    return (
      <form>
        
          </form>

import React from 'react';
import PropTypes from 'prop-types';
import { Field, FieldArray } from 'redux-form';
import { Grid, Row, Col, InputGroup } from 'patternfly-react';
import DatasourceFormContainer from 'ui/widgets/common/form/containers/DatasourceFormContainer';
import { formattedText, minLength, maxLength } from '@entando/utils';

import RenderTextInput from 'ui/common/form/RenderTextInput';
import FormLabel from 'ui/common/form/FormLabel';
import FieldArrayDropDownMultiple from 'ui/common/FieldArrayDropDownMultiple';
import FormattedMessage from 'ui/i18n/FormattedMessage';
import IconMarker from './IconMarker';

const maxLength20 = maxLength(20);
const minLength3 = minLength(3);

const ICONS_MARKER_1 = [
  'fa-map-marker',
  'fa-map-pin',
  'fa-circle',
  'fa-exclamation-triangle',
  'fa-flag',
  'fa-star',
  'fa-street-view',
  'fa-bed',
];
const ICONS_MARKER_2 = [
  'fa-male',
  'fa-female',
  'fa-car',

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Field, FormSection } from 'redux-form';
import { maxLength } from '@entando/utils';
import FormattedMessage from 'ui/i18n/FormattedMessage';
import { OverlayTrigger, Tooltip } from 'patternfly-react';
import { get } from 'lodash';

import {
  SortableContainer,
  SortableElement,
  sortableHandle,
  arrayMove,
} from 'react-sortable-hoc';

const maxLength15 = maxLength(15);

const renderField = ({ input, meta: { touched, error } }) => {
  const classContainer =
    touched && error ?
      'DashboardTableColumns__container-input--error' :
      'DashboardTableColumns__container-input';

  return (
    <div>
      <input type="text" id="{input.name}">
      {touched &amp;&amp; (error &amp;&amp; <span>{error}</span>)}
    </div>
  );
};

const DragHandle = sortableHandle(() =&gt; (

import React from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { Button, Tabs, Tab, Row, Col, Alert } from 'patternfly-react';
import { Panel } from 'react-bootstrap';
import { formattedText, required, code, maxLength } from '@entando/utils';
import { FormattedMessage } from 'react-intl';
import RenderTextInput from 'ui/common/form/RenderTextInput';
import FormLabel from 'ui/common/form/FormLabel';

const EDIT_MODE = 'edit';
const NEW_MODE = 'new';

const maxLength50 = maxLength(50);

export const renderDefaultGuiCodeField = (field) => {
  const { input } = field;
  if (!input.value) {
    return (
      
        
      
    );
  }
  return (
    
      <pre>{input.value}</pre>
    
  );
};

import PropTypes from 'prop-types';
import { FormattedMessage, intlShape } from 'react-intl';
import { Field, FieldArray, reduxForm } from 'redux-form';
import { Collapse } from 'react-collapse';
import { Button, Row, Col, FormGroup, Alert } from 'patternfly-react';
import { maxLength } from '@entando/utils';
import { isUndefined } from 'lodash';

import RenderTextInput from 'ui/common/form/RenderTextInput';
import RenderSelectInput from 'ui/common/form/RenderSelectInput';
import FormLabel from 'ui/common/form/FormLabel';
import FormSectionTitle from 'ui/common/form/FormSectionTitle';
import MultiSelectRenderer from 'ui/pages/common/MultiSelectRenderer';
import FiltersSelectRenderer from 'ui/pages/common/FiltersSelectRenderer';

const maxLength70 = maxLength(70);
const CATEGORY_HOME = 'home';

export class ContentsQueryFormBody extends Component {
  constructor(props) {
    super(props);
    this.state = {
      publishingSettings: false,
      filters: false,
      extraOptions: false,
      frontendFilters: false,
    };
  }

  componentDidMount() {
    const { onDidMount } = this.props;
    onDidMount();