@digigov/form 1.0.0-079f34f3d → 1.0.0-23c81d9f

package/cjs/inputs/DateInput/index.js

@@ -0,0 +1,181 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.DateInput = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _dayjs = _interopRequireDefault(require("dayjs"));
+
+var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
+
+var _DateInputContainer = _interopRequireDefault(require("@digigov/react-core/cjs/DateInputContainer"));
+
+var _DateInputItem = _interopRequireDefault(require("@digigov/react-core/cjs/DateInputItem"));
+
+var _i18n = require("@digigov/ui/cjs/i18n");
+
+var _excluded = ["label"],
+    _excluded2 = ["name", "type"];
+
+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; }
+
+_dayjs["default"].extend(_customParseFormat["default"]);
+
+function useDate(value, onChange) {
+  var _useMemo = (0, _react.useMemo)(function () {
+    if (!value || value.length === 0) {
+      onChange('');
+      return ['', '', ''];
+    }
+
+    var _value$split = value.split('/'),
+        _value$split2 = (0, _slicedToArray2["default"])(_value$split, 3),
+        day = _value$split2[0],
+        month = _value$split2[1],
+        year = _value$split2[2];
+
+    return [year, month, day];
+  }, [value]),
+      _useMemo2 = (0, _slicedToArray2["default"])(_useMemo, 3),
+      year = _useMemo2[0],
+      month = _useMemo2[1],
+      day = _useMemo2[2];
+
+  function set(year, month, day) {
+    var value = "".concat(day || '', "/").concat(month || '', "/").concat(year || '');
+
+    if (!year && !month && !day) {
+      onChange(null);
+    } else {
+      onChange(value);
+    }
+  }
+
+  function setYear(evt) {
+    var val = evt.target.value;
+    set(val, month, day);
+  }
+
+  function setMonth(evt, cast) {
+    var val = evt.target.value;
+
+    if (cast && val && val.length === 1) {
+      val = '0' + val;
+    }
+
+    set(year, val, day);
+  }
+
+  function setDay(evt, cast) {
+    var val = evt.target.value;
+
+    if (cast && val && val.length === 1) {
+      val = '0' + val;
+    }
+
+    set(year, month, val);
+  }
+
+  return {
+    day: day,
+    month: month,
+    year: year,
+    setYear: setYear,
+    setMonth: setMonth,
+    setDay: setDay
+  };
+}
+
+var VALID_FORMATS = ['DD/MM/YYYY'];
+
+var makeDate = function makeDate(val) {
+  var date = (0, _dayjs["default"])(val, VALID_FORMATS, true);
+
+  if (date.isValid()) {
+    return date.format('DD/MM/YYYY');
+  }
+
+  return '';
+};
+
+var DatePart = function DatePart(_ref) {
+  var label = _ref.label,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_DateInputItem["default"], props, label);
+};
+
+var DateInput = function DateInput(_ref2) {
+  var name = _ref2.name,
+      type = _ref2.type,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+
+  var _useTranslation = (0, _i18n.useTranslation)(),
+      t = _useTranslation.t;
+
+  var _useState = (0, _react.useState)(props.value),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
+      initial = _useState2[0];
+
+  var value = (0, _react.useMemo)(function () {
+    if (initial === props.value) {
+      return makeDate(props.value);
+    }
+
+    return props.value;
+  }, [props.value, initial]);
+  var date = useDate(value || makeDate(props.defaultValue), props.onChange);
+  return /*#__PURE__*/_react["default"].createElement(_DateInputContainer["default"], null, /*#__PURE__*/_react["default"].createElement(DatePart, {
+    label: t('form.label.day'),
+    onChange: date.setDay,
+    onBlur: function onBlur(e) {
+      return date.setDay(e, true);
+    },
+    value: date.day,
+    width: 2,
+    name: "".concat(name, "-day"),
+    maxLength: "2",
+    disabled: props.disabled,
+    "aria-required": props['aria-required'],
+    error: !date.day ? props.error : false
+  }), /*#__PURE__*/_react["default"].createElement(DatePart, {
+    label: t('form.label.month'),
+    onChange: date.setMonth,
+    onBlur: function onBlur(e) {
+      return date.setMonth(e, true);
+    },
+    value: date.month,
+    width: 2,
+    name: "".concat(props.name, "-month"),
+    maxLength: "2",
+    disabled: props.disabled,
+    "aria-required": props['aria-required'],
+    error: !date.month ? props.error : false
+  }), /*#__PURE__*/_react["default"].createElement(DatePart, {
+    label: t('form.label.year'),
+    onChange: date.setYear,
+    value: date.year,
+    width: 4,
+    name: "".concat(props.name, "-year"),
+    maxLength: "4",
+    disabled: props.disabled,
+    "aria-required": props['aria-required'],
+    error: !date.year ? props.error : false
+  }));
+};
+
+exports.DateInput = DateInput;
+var _default = DateInput;
+exports["default"] = _default;

package/{inputs/FileInput/FileInput.stories.js → cjs/inputs/FileInput/FileInput.stories/index.js}

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {};
 exports["default"] = void 0;
 
-var _FileInput = _interopRequireDefault(require("@digigov/form/inputs/FileInput"));
+var _ = _interopRequireDefault(require("./"));
 
-var _Default = require("@digigov/form/inputs/FileInput/__stories__/Default");
+var _Default = require("./__stories__/Default");
 
 Object.keys(_Default).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -25,7 +25,7 @@ Object.keys(_Default).forEach(function (key) {
 });
 var _default = {
   title: 'Digigov Form/inputs/FileInput',
-  component: _FileInput["default"],
+  component: _["default"],
   displayName: 'FileInput'
 };
 exports["default"] = _default;

package/{inputs/FileInput/__stories__/Default.js → cjs/inputs/FileInput/__stories__/Default/index.js}

@@ -11,9 +11,9 @@ exports["default"] = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _form = _interopRequireWildcard(require("@digigov/form"));
+var _ = _interopRequireWildcard(require("../../.."));
 
-var _Button = require("@digigov/ui/form/Button");
+var _Button = require("@digigov/ui/cjs/form/Button");
 
 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); }
 
@@ -22,11 +22,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var _ref = /*#__PURE__*/_react["default"].createElement(_Button.Button, null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
 
 var Default = function Default() {
-  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_["default"], {
     onSubmit: function onSubmit(data) {
       console.log(data);
     }
-  }, /*#__PURE__*/_react["default"].createElement(_form.Field, {
+  }, /*#__PURE__*/_react["default"].createElement(_.Field, {
     key: 'string',
     name: "file",
     type: "file",

package/cjs/inputs/FileInput/index.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.FileInput = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _FileUpload = _interopRequireDefault(require("@digigov/react-core/cjs/FileUpload"));
+
+var _FileUploadContainer = _interopRequireDefault(require("@digigov/react-core/cjs/FileUploadContainer"));
+
+var _Hint = _interopRequireDefault(require("@digigov/react-core/cjs/Hint"));
+
+var _Button = _interopRequireDefault(require("@digigov/ui/cjs/form/Button"));
+
+var _i18n = require("@digigov/ui/cjs/i18n");
+
+var _Paragraph = _interopRequireDefault(require("@digigov/ui/cjs/typography/Paragraph"));
+
+var _excluded = ["name", "extra", "disabled", "reset", "onChange"];
+
+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; }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var FileInput = /*#__PURE__*/_react["default"].forwardRef(function FileInput(_ref, ref) {
+  var name = _ref.name,
+      _ref$extra = _ref.extra,
+      extra = _ref$extra === void 0 ? {} : _ref$extra,
+      disabled = _ref.disabled,
+      reset = _ref.reset,
+      onChange = _ref.onChange,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+
+  var _useTranslation = (0, _i18n.useTranslation)(),
+      t = _useTranslation.t;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      files = _useState2[0],
+      setFiles = _useState2[1];
+
+  var handleChange = function handleChange(e) {
+    var target = e.target;
+    var selectedFiles = Array.from(target.files).map(function (_ref2) {
+      var name = _ref2.name;
+      return name;
+    });
+    setFiles(selectedFiles); // proceed calling the onChange provided
+    // by react-hook-form
+
+    onChange(e);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_FileUploadContainer["default"], {
+    hasFiles: files && files.length > 0
+  }, files !== null && files !== void 0 && files.length ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Paragraph["default"], null, /*#__PURE__*/_react["default"].createElement("b", null, t('upload.file'), ":"), " ", "".concat(files.join(', ')))) : /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, t('upload.no_file')), /*#__PURE__*/_react["default"].createElement(_FileUpload["default"], (0, _extends2["default"])({
+    ref: ref,
+    hasFiles: !!(files !== null && files !== void 0 && files.length),
+    name: name,
+    disabled: disabled,
+    onChange: handleChange
+  }, (0, _extends2["default"])({}, props, {
+    required: undefined
+  })), files !== null && files !== void 0 && files.length ? t('upload.change_file') : t('upload.choose_file')), files !== undefined && files.length > 0 && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "link",
+    onClick: function onClick(event) {
+      event.preventDefault();
+      reset((0, _defineProperty2["default"])({}, name, ''));
+      setFiles(undefined);
+    }
+  }, t('upload.reset_file')))));
+});
+
+exports.FileInput = FileInput;
+var _default = FileInput;
+exports["default"] = _default;

package/cjs/inputs/ImageInput/ImageInput.stories/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _ = _interopRequireDefault(require("./"));
+
+var _Default = require("./__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 _WithInvalidImageSize = require("./__stories__/WithInvalidImageSize");
+
+Object.keys(_WithInvalidImageSize).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WithInvalidImageSize[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _WithInvalidImageSize[key];
+    }
+  });
+});
+
+var _WithInvalidImageDimension = require("./__stories__/WithInvalidImageDimension");
+
+Object.keys(_WithInvalidImageDimension).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WithInvalidImageDimension[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _WithInvalidImageDimension[key];
+    }
+  });
+});
+var _default = {
+  title: 'Digigov Form/inputs/ImageInput',
+  component: _["default"],
+  displayName: 'ImageInput'
+};
+exports["default"] = _default;

package/cjs/inputs/ImageInput/ImageInput.stories.playwright.json

@@ -0,0 +1,77 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-form-inputs-imageinput--with-invalid-image-dimension": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "setImages",
+              "args": {
+                "file": {
+                  "name": "image.jpg",
+                  "size": 500,
+                  "width": 500,
+                  "height": 500
+                },
+                "selector": "html>body>div:nth-child(5)>form>fieldset>div>fieldset>div>div>label"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "o22sSYzQqsMl",
+          "title": "Dimension image action"
+        }
+      ]
+    },
+    "digigov-form-inputs-imageinput--with-invalid-image-size": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "setImages",
+              "args": {
+                "file": {
+                  "name": "image.jpg",
+                  "size": 500,
+                  "width": 500,
+                  "height": 500
+                },
+                "selector": "html>body>div:nth-child(5)>form>fieldset>div>fieldset>div>div>label"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "0TewzMxhK1db",
+          "title": "Size image action"
+        }
+      ]
+    },
+    "digigov-form-inputs-imageinput--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "Pvb2kqeg1fI3",
+          "title": "Invalid submit"
+        }
+      ]
+    }
+  }
+}

package/cjs/inputs/ImageInput/__stories__/Default/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = _interopRequireWildcard(require("../../.."));
+
+var _Button = require("@digigov/ui/cjs/form/Button");
+
+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: 'image',
+  type: 'image',
+  required: true,
+  label: {
+    primary: 'Ανέβασμα φωτογραφίας'
+  }
+}];
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_["default"], {
+    fields: FIELDS,
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_.Fieldset, null, FIELDS.map(function (field) {
+    return /*#__PURE__*/_react["default"].createElement(_.Field, {
+      key: field.key,
+      name: field.key
+    });
+  })), _ref);
+};
+
+exports.Default = Default;
+var _default = Default;
+exports["default"] = _default;

package/cjs/inputs/ImageInput/__stories__/WithInvalidImageDimension/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithInvalidImageDimension = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = _interopRequireWildcard(require("../../.."));
+
+var _Button = require("@digigov/ui/cjs/form/Button");
+
+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: 'image',
+  type: 'image',
+  required: true,
+  label: {
+    primary: 'Ανέβασμα φωτογραφίας'
+  },
+  extra: {
+    limit: {
+      maxHeight: 400,
+      maxWidth: 400,
+      minHeight: 100,
+      minWidth: 100
+    }
+  }
+}];
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var WithInvalidImageDimension = function WithInvalidImageDimension() {
+  return /*#__PURE__*/_react["default"].createElement(_["default"], {
+    fields: FIELDS,
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_.Fieldset, null, FIELDS.map(function (field) {
+    return /*#__PURE__*/_react["default"].createElement(_.Field, {
+      key: field.key,
+      name: field.key
+    });
+  })), _ref);
+};
+
+exports.WithInvalidImageDimension = WithInvalidImageDimension;
+var _default = WithInvalidImageDimension;
+exports["default"] = _default;

package/cjs/inputs/ImageInput/__stories__/WithInvalidImageSize/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithInvalidImageSize = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = _interopRequireWildcard(require("../../.."));
+
+var _Button = require("@digigov/ui/cjs/form/Button");
+
+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: 'image',
+  type: 'image',
+  required: true,
+  label: {
+    primary: 'Ανέβασμα φωτογραφίας'
+  },
+  extra: {
+    limit: {
+      maxSize: 300
+    }
+  }
+}];
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var WithInvalidImageSize = function WithInvalidImageSize() {
+  return /*#__PURE__*/_react["default"].createElement(_["default"], {
+    fields: FIELDS,
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_.Fieldset, null, FIELDS.map(function (field) {
+    return /*#__PURE__*/_react["default"].createElement(_.Field, {
+      key: field.key,
+      name: field.key
+    });
+  })), _ref);
+};
+
+exports.WithInvalidImageSize = WithInvalidImageSize;
+var _default = WithInvalidImageSize;
+exports["default"] = _default;