How to use the @data-driven-forms/react-form-renderer.componentTypes.TEXT_FIELD function in @data-driven-forms/react-form-renderer

const schema = {
  title: 'Start typing',
  fields: [{
    component: componentTypes.TEXT_FIELD,
    name: 'length',
    label: 'Length field',
    helperText: 'min 5 characters, max 10',
    validate: [{
      type: validatorTypes.MIN_LENGTH,
      threshold: 5,
    }, {
      type: validatorTypes.MAX_LENGTH,
      threshold: 10,
    }],
  }, {
    component: componentTypes.TEXT_FIELD,
    name: 'exact-length',
    label: 'Exact length field',
    helperText: 'must be 3 characters long',
    validate: [{
      type: validatorTypes.EXACT_LENGTH,
      threshold: 3,
    }],
  }],
};

const LengthValidators = () => (
  <div>
    </div>

label: 'Switch disabled',
                  component: components.SWITCH,
                  isDisabled: true,
                },
                {
                  name: 'switch_3',
                  label: 'Switch readOnly',
                  component: components.SWITCH,
                  isReadOnly: true,
                },
                {
                  name: 'text_box_2',
                  label: 'Text Box with help',
                  title: 'Text Box with help',
                  helperText: 'Helper text',
                  component: components.TEXT_FIELD,
                },
                {
                  name: 'text_box_3',
                  label: 'Text Box required',
                  title: 'Text Box required',
                  isRequired: true,
                  component: components.TEXT_FIELD,
                  validate: [
                    { type: validators.REQUIRED },
                  ],
                },
                {
                  name: 'text_box_4',
                  label: 'Text Box readonly',
                  title: 'Text Box readonly',
                  isReadOnly: true,

import React from 'react';
import FormRenderer, { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
import { layoutMapper, formFieldsMapper } from '@data-driven-forms/pf4-component-mapper';

const schema = {
  title: 'Start typing',
  fields: [{
    component: componentTypes.TEXT_FIELD,
    name: 'regexp-pattern',
    label: 'Regepx',
    helperText: 'Value must be equal to Foo',
    validate: [{
      type: validatorTypes.PATTERN_VALIDATOR,
      pattern: /^Foo$/,
    }],
  }, {
    component: componentTypes.TEXT_FIELD,
    name: 'string-pattern',
    label: 'String pattern',
    helperText: 'Value must be equal to Foo',
    validate: [{
      type: validatorTypes.PATTERN_VALIDATOR,
      pattern: '^Foo$',
    }],

component: componentTypes.FIELD_ARRAY,
      name: 'nicePeople',
      fieldKey: 'field_array',
      label: 'Nice people',
      description: 'This allow you to add nice people to the list dynamically',
      fields: [{
        component: componentTypes.TEXT_FIELD,
        name: 'name',
        label: 'Name',
        placeholder: 'Borek',
        isRequired: true,
        validate: [{
          type: validatorTypes.REQUIRED,
        }],
      }, {
        component: componentTypes.TEXT_FIELD,
        name: 'lastName',
        label: 'Last Name',
        placeholder: 'Stavitel',
      }],
    },
    {
      component: componentTypes.FIELD_ARRAY,
      name: 'minItems',
      label: 'A list with a minimal number of items',
      validate: [{ type: validatorTypes.MIN_ITEMS_VALIDATOR, threshold: 3 }],
      fields: [{
        component: componentTypes.TEXT_FIELD,
        label: 'Item',
      }],
    },
    {

label: 'Switch disabled',
                  component: components.SWITCH,
                  isDisabled: true,
                },
                {
                  name: 'switch_3',
                  label: 'Switch readOnly',
                  component: components.SWITCH,
                  isReadOnly: true,
                },
                {
                  name: 'text_box_2',
                  label: 'Text Box with help',
                  title: 'Text Box with help',
                  helperText: 'Helper text',
                  component: components.TEXT_FIELD,
                },
                {
                  name: 'text_box_3',
                  label: 'Text Box required',
                  title: 'Text Box required',
                  isRequired: true,
                  component: components.TEXT_FIELD,
                  validate: [
                    { type: validators.REQUIRED },
                  ],
                },
                {
                  name: 'text_box_4',
                  label: 'Text Box readonly',
                  title: 'Text Box readonly',
                  isReadOnly: true,

label: 'Text Box unvisible',
                  title: 'Text Box unvisible',
                  isVisible: false,
                  component: components.TEXT_FIELD,
                },
                {
                  name: 'text_box_7',
                  label: 'Text Box with validator',
                  title: 'Text Box with validator',
                  validate: [
                    {
                      type: validators.PATTERN_VALIDATOR,
                      pattern: '[0-9]',
                    },
                  ],
                  component: components.TEXT_FIELD,
                },
                {
                  name: 'text_box_8',
                  label: 'Text Box integer value',
                  title: 'Text Box integer value',
                  dataType: 'integer',
                  component: components.TEXT_FIELD,
                  type: 'number',
                },
                {
                  name: 'text_box_9',
                  label: 'Text Box string value',
                  title: 'Text Box string value',
                  dataType: 'string',
                  component: components.TEXT_FIELD,
                },

import React from 'react';
import FormRenderer, { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
import { layoutMapper, formFieldsMapper } from '@data-driven-forms/pf4-component-mapper';
import { Button } from '@material-ui/core';

const schema = {
  title: 'Combination of PF4 form and MUI buttons',
  fields: [{
    component: componentTypes.TEXT_FIELD,
    name: 'name',
    label: 'Name',
    isRequired: true,
    validate: [{
      type: validatorTypes.REQUIRED,
    }],
  }],
};

const FormButtons = ({ submitting, pristine, valid,  form: { submit, reset }}) => {
  return (
    <div>
      <button color="primary" style="{{" disabled="{">Submit</button>
      <button style="{{" disabled="{">Reset</button>
      <button>Cancel</button>
    </div>

label: 'Text Box with validator',
                  title: 'Text Box with validator',
                  validate: [
                    {
                      type: validators.PATTERN_VALIDATOR,
                      pattern: '[0-9]',
                    },
                  ],
                  component: components.TEXT_FIELD,
                },
                {
                  name: 'text_box_8',
                  label: 'Text Box integer value',
                  title: 'Text Box integer value',
                  dataType: 'integer',
                  component: components.TEXT_FIELD,
                  type: 'number',
                },
                {
                  name: 'text_box_9',
                  label: 'Text Box string value',
                  title: 'Text Box string value',
                  dataType: 'string',
                  component: components.TEXT_FIELD,
                },
              ],
              component: components.SUB_FORM,
            },
            {
              title: 'Text areas',
              key: '638',
              fields: [

import { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
import GenericComponentText from './examples-texts/generic-mui-component';
import TabsText from './examples-texts/tabs';
import CustomComponentText from './examples-texts/custom-component';
import WizardText from './examples-texts/wizard';

export const baseExamples = [{
  component: componentTypes.TEXT_FIELD,
  link: `?component=${componentTypes.TEXT_FIELD}`,
  linkText: 'Text Field',
  ContentText: GenericComponentText,
  value: { fields: [{
    component: componentTypes.TEXT_FIELD,
    label: 'First name',
    name: 'first-name',
  }]},
  canBeRequired: true,
  variants: [{
    name: 'isDisabled',
    title: 'Disabled',
  }, {
    name: 'helperText',
    title: 'Helper text',
    component: 'input',

import { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
import GenericComponentText from './examples-texts/generic-mui-component';
import TabsText from './examples-texts/tabs';
import CustomComponentText from './examples-texts/custom-component';
import WizardText from './examples-texts/wizard';
import SelectText from './examples-texts/select';

export const baseExamples = [{
  component: componentTypes.TEXT_FIELD,
  link: componentTypes.TEXT_FIELD,
  linkText: 'Text Field',
  ContentText: GenericComponentText,
  value: { fields: [{
    component: componentTypes.TEXT_FIELD,
    label: 'First name',
    name: 'first-name',
  }]},
  canBeRequired: true,
  variants: [{
    name: 'isDisabled',
    title: 'Disabled',
  }, {
    name: 'helperText',
    title: 'Helper text',
    component: 'input',
  }, {