@digigov/form 0.6.10 → 0.8.0

package/FormBuilder.js

@@ -11,8 +11,6 @@ exports["default"] = exports.FormBuilder = exports.FormBase = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _extends4 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -23,8 +21,6 @@ var _reactHookForm = require("react-hook-form");
 
 var _utils = require("@digigov/form/utils");
 
-var _Grid = _interopRequireDefault(require("@digigov/ui/layouts/Grid"));
-
 var _validators = require("@digigov/form/validators");
 
 var _Fieldset = _interopRequireDefault(require("@digigov/form/Fieldset"));
@@ -33,8 +29,10 @@ var _Field = _interopRequireDefault(require("@digigov/form/Field"));
 
 var _FormContext = require("@digigov/form/FormContext");
 
-var _excluded = ["onSubmit", "children", "registerField", "fieldsMap", "fieldsetsMap", "resolver", "mode", "initial", "reValidateMode", "shouldFocusError", "criteriaMode", "componentRegistry"],
-    _excluded2 = ["fields", "fieldsets", "initial", "onSubmit", "children", "reValidateMode", "mode", "shouldFocusError", "criteriaMode", "auto", "validatorRegistry", "componentRegistry"];
+var _Form = require("@digigov/react-core/Form");
+
+var _excluded = ["onSubmit", "children", "registerField", "fieldsMap", "fieldsetsMap", "resolver", "mode", "initial", "reValidateMode", "shouldFocusError", "criteriaMode", "componentRegistry", "grid"],
+    _excluded2 = ["fields", "fieldsets", "initial", "onSubmit", "children", "reValidateMode", "mode", "shouldFocusError", "criteriaMode", "auto", "validatorRegistry", "componentRegistry", "grid"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -53,6 +51,7 @@ var FormBase = /*#__PURE__*/_react["default"].forwardRef(function FormBase(_ref,
       shouldFocusError = _ref.shouldFocusError,
       criteriaMode = _ref.criteriaMode,
       componentRegistry = _ref.componentRegistry,
+      grid = _ref.grid,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var form = (0, _reactHookForm.useForm)({
     resolver: resolver,
@@ -63,35 +62,33 @@ var FormBase = /*#__PURE__*/_react["default"].forwardRef(function FormBase(_ref,
     criteriaMode: criteriaMode
   });
   var handleSubmit = (0, _react.useCallback)(function (data) {
-    var errors = onSubmit && onSubmit(data);
-
-    if (errors) {
-      for (var key in errors) {
-        form.setError(key, errors[key]);
-      }
-    }
+    onSubmit && onSubmit(data);
   }, [onSubmit]);
   var ctx = {
     fieldsMap: fieldsMap,
     fieldsetsMap: fieldsetsMap,
     control: form.control,
     register: form.register,
+    watch: form.watch,
     registerField: registerField,
-    errors: form.errors,
+    errors: form.formState.errors,
+    formState: form.formState,
     reset: form.reset,
+    trigger: form.trigger,
+    getFieldState: form.getFieldState,
+    setValue: form.setValue,
+    clearErrors: form.clearErrors,
+    getValues: form.getValues,
+    unregister: form.unregister,
     componentRegistry: componentRegistry
   };
   return /*#__PURE__*/_react["default"].createElement(_FormContext.FormContext.Provider, {
     value: ctx
-  }, /*#__PURE__*/_react["default"].createElement("form", (0, _extends4["default"])({
+  }, /*#__PURE__*/_react["default"].createElement(_Form.Form, (0, _extends4["default"])({
+    grid: grid,
     onSubmit: form.handleSubmit(handleSubmit),
     ref: ref
-  }, props), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-    container: true
-  }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-    item: true,
-    xs: 12
-  }, children))));
+  }, props), children));
 });
 
 exports.FormBase = FormBase;
@@ -111,11 +108,13 @@ var FormBuilder = /*#__PURE__*/_react["default"].forwardRef(function FormBuilder
       _ref2$shouldFocusErro = _ref2.shouldFocusError,
       shouldFocusError = _ref2$shouldFocusErro === void 0 ? true : _ref2$shouldFocusErro,
       _ref2$criteriaMode = _ref2.criteriaMode,
-      criteriaMode = _ref2$criteriaMode === void 0 ? 'firstError' : _ref2$criteriaMode,
+      criteriaMode = _ref2$criteriaMode === void 0 ? 'all' : _ref2$criteriaMode,
       _ref2$auto = _ref2.auto,
       auto = _ref2$auto === void 0 ? false : _ref2$auto,
       validatorRegistry = _ref2.validatorRegistry,
       componentRegistry = _ref2.componentRegistry,
+      _ref2$grid = _ref2.grid,
+      grid = _ref2$grid === void 0 ? false : _ref2$grid,
       props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
   var fieldsState = (0, _react.useRef)(fields);
   var setFieldsState = (0, _react.useCallback)(function (newFields) {
@@ -123,7 +122,17 @@ var FormBuilder = /*#__PURE__*/_react["default"].forwardRef(function FormBuilder
   }, []);
   var schema = (0, _validators.useValidationSchema)(fieldsState, validatorRegistry);
   var registerField = (0, _react.useCallback)(function (field) {
-    setFieldsState([].concat((0, _toConsumableArray2["default"])(fieldsState.current), [field]));
+    var fieldIndex = fieldsState.current.findIndex(function (f) {
+      return f.key === field.key;
+    });
+
+    if (fieldIndex > -1) {
+      fieldsState.current[fieldIndex] = field;
+    } else {
+      fieldsState.current.push(field);
+    }
+
+    setFieldsState(fieldsState.current);
   }, []);
   var resolver;
   var fieldsMap;
@@ -169,7 +178,8 @@ var FormBuilder = /*#__PURE__*/_react["default"].forwardRef(function FormBuilder
     criteriaMode: criteriaMode,
     onSubmit: onSubmit,
     componentRegistry: componentRegistry,
-    ref: ref
+    ref: ref,
+    grid: grid
   }, props), fieldChildren, children);
 });
 

package/MultiplicityField/MultiplicityField.stories.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _MultiplicityField = _interopRequireDefault(require("@digigov/form/MultiplicityField"));
+
+var _Default = require("@digigov/form/MultiplicityField/__stories__/Default");
+
+Object.keys(_Default).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Default[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Default[key];
+    }
+  });
+});
+
+var _WithMinLength = require("@digigov/form/MultiplicityField/__stories__/WithMinLength");
+
+Object.keys(_WithMinLength).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WithMinLength[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _WithMinLength[key];
+    }
+  });
+});
+
+var _WithMaxLength = require("@digigov/form/MultiplicityField/__stories__/WithMaxLength");
+
+Object.keys(_WithMaxLength).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WithMaxLength[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _WithMaxLength[key];
+    }
+  });
+});
+
+var _WithMinAndMaxLength = require("@digigov/form/MultiplicityField/__stories__/WithMinAndMaxLength");
+
+Object.keys(_WithMinAndMaxLength).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WithMinAndMaxLength[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _WithMinAndMaxLength[key];
+    }
+  });
+});
+
+var _WithExactLength = require("@digigov/form/MultiplicityField/__stories__/WithExactLength");
+
+Object.keys(_WithExactLength).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WithExactLength[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _WithExactLength[key];
+    }
+  });
+});
+var _default = {
+  title: 'Digigov Form/MultiplicityField',
+  component: _MultiplicityField["default"]
+};
+exports["default"] = _default;

package/MultiplicityField/__stories__/Default.js

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _form = _interopRequireWildcard(require("@digigov/form"));
+
+var _core = require("@digigov/ui/core");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var fields = [{
+  key: 'string',
+  type: 'string',
+  label: {
+    primary: 'Πεδίο 1',
+    secondary: 'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας'
+  }
+}, {
+  key: 'multiplicity',
+  type: 'array',
+  multiplicity: true,
+  label: {
+    primary: 'Συνυπογράφοντες',
+    secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς'
+  },
+  extra: {
+    border: true,
+    label: {
+      object: {
+        title: 'Συνυπογράφοντας',
+        title_added: 'Οι συνυπογράφοντες που έχετε προσθέσει',
+        add: 'Προσθήκη',
+        "delete": 'Αφαίρεση συνυπογράφοντος'
+      },
+      question: {
+        title: 'Θέλετε να προσθέσετε επιπλέον συνυπογράφοντες;',
+        objectLabel: {
+          primary: 'Προσθήκη νέου συνυπογράφοντα',
+          secondary: 'Συμπληρώστε τα στοιχεία και μετά πατήστε «Προσθήκη»'
+        },
+        yes: 'Ναι',
+        no: 'Όχι'
+      }
+    },
+    of: {
+      type: 'object',
+      label: {
+        primary: 'Στοιχεία συνυπογράφοντα',
+        secondary: 'Δείτε και αλλάξτε τα στοιχεία του συνυπογράφοντα'
+      },
+      extra: {
+        fields: [{
+          key: 'afm',
+          type: 'afm',
+          required: true,
+          label: {
+            primary: 'ΑΦΜ'
+          }
+        }, {
+          key: 'firstName',
+          required: true,
+          type: 'string',
+          label: {
+            primary: 'Όνομα'
+          }
+        }, {
+          key: 'lastName',
+          required: true,
+          type: 'string',
+          label: {
+            primary: 'Επώνυμο'
+          }
+        }]
+      }
+    }
+  }
+}, {
+  key: 'phonenumber',
+  type: 'phone_number',
+  required: true,
+  label: {
+    primary: 'Πεδίο 2',
+    secondary: 'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας'
+  }
+}];
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_react.Suspense, {
+    fallback: "loading"
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({
+    name: "string"
+  }, fields[0])), /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({
+    name: "multiplicity"
+  }, fields[1])), /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({
+    name: "phonenumber"
+  }, fields[2])), _ref));
+};
+
+exports.Default = Default;

package/MultiplicityField/__stories__/WithExactLength.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithExactLength = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _form = _interopRequireWildcard(require("@digigov/form"));
+
+var _core = require("@digigov/ui/core");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var fields = [{
+  key: 'string',
+  type: 'string',
+  label: {
+    primary: 'Πεδίο 1',
+    secondary: 'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας'
+  }
+}, {
+  key: 'multiplicity',
+  type: 'array',
+  multiplicity: true,
+  label: {
+    primary: 'Εξαρτώμενα μέλη',
+    secondary: 'Τα εξαρτώμενα μέλη είναι φυσικά πρόσωπα που υπάγονται στη φορολογική σας δήλωση'
+  },
+  extra: {
+    label: {
+      object: {
+        title: 'Εξαρτώμενο μέλος',
+        add: 'Προσθήκη',
+        "delete": 'Αφαίρεση μέλους'
+      },
+      question: {
+        title: 'Θέλετε να προσθέσετε εξαρτώμενα μέλη;',
+        yes: 'Ναι',
+        no: 'Όχι'
+      }
+    },
+    length: 2,
+    of: {
+      type: 'object',
+      label: {
+        primary: 'Στοιχεία εξαρτώμενου μέλους',
+        secondary: 'Συμπληρώστε τα στοιχεία παρακάτω και μετά πατήστε το κουμπί «Προσθήκη»'
+      },
+      extra: {
+        fields: [{
+          key: 'firstName',
+          required: true,
+          type: 'string',
+          label: {
+            primary: 'Όνομα'
+          }
+        }, {
+          key: 'lastName',
+          required: true,
+          type: 'string',
+          label: {
+            primary: 'Επώνυμο'
+          }
+        }, {
+          key: 'bod',
+          required: true,
+          type: 'date',
+          label: {
+            primary: 'Ημερομηνία γέννησης'
+          }
+        }]
+      }
+    }
+  }
+}, {
+  key: 'phonenumber',
+  type: 'phone_number',
+  required: true,
+  label: {
+    primary: 'Πεδίο 2',
+    secondary: 'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας'
+  }
+}];
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var WithExactLength = function WithExactLength() {
+  return /*#__PURE__*/_react["default"].createElement(_react.Suspense, {
+    fallback: "loading"
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({
+    name: "string"
+  }, fields[0])), /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({
+    name: "multiplicity"
+  }, fields[1])), /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({
+    name: "phonenumber"
+  }, fields[2])), _ref));
+};
+
+exports.WithExactLength = WithExactLength;

package/MultiplicityField/__stories__/WithMaxLength.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithMaxLength = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _form = _interopRequireWildcard(require("@digigov/form"));
+
+var _core = require("@digigov/ui/core");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var fields = [{
+  key: 'string',
+  type: 'string',
+  label: {
+    primary: 'Πεδίο 1',
+    secondary: 'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας'
+  }
+}, {
+  key: 'multiplicity',
+  type: 'array',
+  multiplicity: true,
+  label: {
+    primary: 'Εξαρτώμενα μέλη',
+    secondary: 'Τα εξαρτώμενα μέλη είναι φυσικά πρόσωπα που υπάγονται στη φορολογική σας δήλωση'
+  },
+  extra: {
+    label: {
+      object: {
+        title: 'Εξαρτώμενο μέλος',
+        add: 'Προσθήκη',
+        "delete": 'Αφαίρεση μέλους'
+      },
+      question: {
+        title: 'Θέλετε να προσθέσετε εξαρτώμενα μέλη;',
+        yes: 'Ναι',
+        no: 'Όχι'
+      }
+    },
+    max: 2,
+    of: {
+      type: 'object',
+      label: {
+        primary: 'Στοιχεία εξαρτώμενου μέλους',
+        secondary: 'Συμπληρώστε τα στοιχεία παρακάτω και μετά πατήστε το κουμπί «Προσθήκη»'
+      },
+      extra: {
+        fields: [{
+          key: 'firstName',
+          required: true,
+          type: 'string',
+          label: {
+            primary: 'Όνομα'
+          }
+        }, {
+          key: 'lastName',
+          required: true,
+          type: 'string',
+          label: {
+            primary: 'Επώνυμο'
+          }
+        }, {
+          key: 'bod',
+          required: true,
+          type: 'date',
+          label: {
+            primary: 'Ημερομηνία γέννησης'
+          },
+          extra: {
+            max: 'now'
+          }
+        }]
+      }
+    }
+  }
+}, {
+  key: 'phonenumber',
+  type: 'phone_number',
+  required: true,
+  label: {
+    primary: 'Πεδίο 2',
+    secondary: 'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας'
+  }
+}];
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var WithMaxLength = function WithMaxLength() {
+  return /*#__PURE__*/_react["default"].createElement(_react.Suspense, {
+    fallback: "loading"
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({
+    name: "string"
+  }, fields[0])), /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({
+    name: "multiplicity"
+  }, fields[1])), /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({
+    name: "phonenumber"
+  }, fields[2])), _ref));
+};
+
+exports.WithMaxLength = WithMaxLength;