@digigov/form 0.4.8 → 0.5.0

package/CHANGELOG.md

@@ -1,6 +1,36 @@
 # Change Log - @digigov/form
 
-This log was last generated on Thu, 03 Feb 2022 15:47:05 GMT and should not be manually modified.
+This log was last generated on Wed, 16 Feb 2022 12:49:28 GMT and should not be manually modified.
+
+## 0.5.0
+Wed, 16 Feb 2022 12:49:28 GMT
+
+### Minor changes
+
+- Add new `date` field type that renders a three-block date input
+
+### Patches
+
+- Pin dayjs dependency
+
+## 0.4.11
+Mon, 14 Feb 2022 09:56:29 GMT
+
+_Version update only_
+
+## 0.4.10
+Thu, 10 Feb 2022 13:45:56 GMT
+
+### Patches
+
+- pin down dependency versions
+
+## 0.4.9
+Tue, 08 Feb 2022 15:21:11 GMT
+
+### Patches
+
+- fix linting errors in @digigov/form
 
 ## 0.4.8
 Thu, 03 Feb 2022 15:47:05 GMT

package/Field/index.js

@@ -43,6 +43,8 @@ var _Select = _interopRequireDefault(require("@digigov/form/inputs/Select"));
 
 var _FileInput = _interopRequireDefault(require("@digigov/form/inputs/FileInput"));
 
+var _DateInput = _interopRequireDefault(require("@digigov/form/inputs/DateInput"));
+
 var _Label2 = _interopRequireDefault(require("@digigov/form/inputs/Label"));
 
 var _i18n = require("@digigov/ui/app/i18n");
@@ -63,13 +65,18 @@ var FIELD_COMPONENTS = {
   file: {
     component: _FileInput["default"]
   },
+  date: {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: _DateInput["default"]
+  },
   'choice:multiple': {
-    wrapper: "fieldset",
+    wrapper: 'fieldset',
     controlled: true,
     component: _Checkboxes["default"]
   },
   'choice:single': {
-    wrapper: "fieldset",
+    wrapper: 'fieldset',
     controlled: false,
     component: _Radio["default"]
   }

package/Questions/Step/index.js

@@ -111,6 +111,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 @typescript-eslint/no-explicit-any */
 var StepContext = /*#__PURE__*/(0, _react.createContext)({
   name: '',
   fields: [],

package/es/Field/index.js

@@ -16,6 +16,7 @@ import Checkboxes from '@digigov/form/inputs/Checkboxes';
 import Radio from '@digigov/form/inputs/Radio';
 import Select from '@digigov/form/inputs/Select';
 import FileInput from '@digigov/form/inputs/FileInput';
+import DateInput from '@digigov/form/inputs/DateInput';
 import Label from '@digigov/form/inputs/Label';
 import { useTranslation } from '@digigov/ui/app/i18n';
 var FIELD_COMPONENTS = {
@@ -28,13 +29,18 @@ var FIELD_COMPONENTS = {
   file: {
     component: FileInput
   },
+  date: {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: DateInput
+  },
   'choice:multiple': {
-    wrapper: "fieldset",
+    wrapper: 'fieldset',
     controlled: true,
     component: Checkboxes
   },
   'choice:single': {
-    wrapper: "fieldset",
+    wrapper: 'fieldset',
     controlled: false,
     component: Radio
   }

package/es/Questions/Step/index.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { createContext, useContext, useState } from 'react';
 import { QuestionsContext } from '@digigov/form/Questions/';
 import PageTitle, { PageTitleHeading } from '@digigov/ui/app/PageTitle';

package/es/index.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { createContext, useCallback, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@digigov/form/utils';

package/es/index.mdx

@@ -3,10 +3,7 @@ title: Form
 parent: docs/ui/components
 ---
 
-import { useState, useEffect } from 'react';
 import FormBuilder from '@digigov/form/';
-import PropsDoc from '@docs-components/propsDoc';
-import StylesDoc from '@docs-components/stylesDoc';
 
 export const fields = [
   {

package/es/inputs/Checkboxes/index.js

@@ -20,8 +20,12 @@ var Checkboxes = function Checkboxes(_ref) {
       var newValue;
 
       if (evt.currentTarget.checked) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         newValue = value.concat([optionValue]);
       } else {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         newValue = value.filter(function (val) {
           return val !== optionValue;
         });
@@ -40,7 +44,9 @@ var Checkboxes = function Checkboxes(_ref) {
     return /*#__PURE__*/React.createElement(CheckboxItem, _extends({
       name: name,
       disabled: disabled,
-      key: key,
+      key: key // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      ,
       checked: value.includes(option.value),
       onChange: handleChange(option.value)
     }, option), option.label && option.label.primary && t(option.label.primary) || value, option.label && option.label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(option.label.secondary)));

package/es/inputs/DateInput/index.js

@@ -0,0 +1,149 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["label"],
+    _excluded2 = ["name", "type"];
+import React, { useMemo, useState } from 'react';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { useTranslation } from '@digigov/ui/app/i18n';
+import CoreDateInput from '@digigov/react-core/DateInput';
+import CoreDateInputItem from '@digigov/react-core/DateInputItem';
+dayjs.extend(customParseFormat);
+
+function useDate(value, onChange) {
+  var _useMemo = useMemo(function () {
+    if (!value || value.length === '') {
+      return ['', '', ''];
+    }
+
+    var _value$split = value.split('/'),
+        _value$split2 = _slicedToArray(_value$split, 3),
+        day = _value$split2[0],
+        month = _value$split2[1],
+        year = _value$split2[2];
+
+    return [year, month, day];
+  }, [value]),
+      _useMemo2 = _slicedToArray(_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 = dayjs(val, VALID_FORMATS, true);
+
+  if (date.isValid()) {
+    return date.format('DD/MM/YYYY');
+  }
+
+  return '';
+};
+
+var DatePart = function DatePart(_ref) {
+  var label = _ref.label,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(CoreDateInputItem, props, label);
+};
+
+var DateInput = function DateInput(_ref2) {
+  var name = _ref2.name,
+      type = _ref2.type,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var _useState = useState(props.value),
+      _useState2 = _slicedToArray(_useState, 1),
+      initial = _useState2[0];
+
+  var value = 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.createElement(CoreDateInput, null, /*#__PURE__*/React.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
+  }), /*#__PURE__*/React.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
+  }), /*#__PURE__*/React.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
+  }));
+};
+
+export default DateInput;

package/es/inputs/FileInput/index.js

@@ -2,6 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
 import NormalText from '@digigov/react-core/NormalText';
 import FileUpload from '@digigov/react-core/FileUpload';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var FileInput = /*#__PURE__*/React.forwardRef(function FileInput(_ref, ref) {
   var name = _ref.name,
       _ref$extra = _ref.extra,

package/es/inputs/Input/index.js

@@ -19,8 +19,10 @@ var Input = /*#__PURE__*/React.forwardRef(function WrappedInput(_ref, ref) {
   var _ref2 = extra || {},
       _ref2$multiline = _ref2.multiline,
       multiline = _ref2$multiline === void 0 ? false : _ref2$multiline,
-      rows = _ref2.rows,
-      className = _ref2.className; // if enforced to multiline use true. Derive from type otherwise.
+      rows = _ref2.rows;
+
+  var _ref3 = extra || {},
+      className = _ref3.className; // if enforced to multiline use true. Derive from type otherwise.
 
 
   multiline = multiline === true || type === 'text'; // use explicit rows value if set. Derive from multiline otherwise.
@@ -40,6 +42,7 @@ var Input = /*#__PURE__*/React.forwardRef(function WrappedInput(_ref, ref) {
     return /*#__PURE__*/React.createElement(TextInput, _extends({
       name: name,
       type: fieldType,
+      className: className,
       ref: ref
     }, props));
   }

package/es/utils.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 var parseErrorSchema = function parseErrorSchema(error, validateAllFieldCriteria) {
   return Array.isArray(error.inner) && error.inner.length ? error.inner.reduce(function (previous, _ref) {
     var path = _ref.path,

package/es/validators.js

@@ -10,6 +10,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 import * as yup from 'yup';
 import * as gPhoneNumber from 'google-libphonenumber';
 import { useMemo } from 'react';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+dayjs.extend(customParseFormat);
 var DEFAULT_FILE_MAX_SIZE = 10000000;
 export function validateAFM(afm) {
   if (afm.length !== 9) {
@@ -280,6 +283,13 @@ var IBAN_VALIDATOR = function IBAN_VALIDATOR(field) {
   };
 };
 
+var VALID_DATE_FORMATS = ['DD/MM/YYYY'];
+var DATE_CACHE = {};
+
+var getDate = function getDate(v) {
+  return DATE_CACHE[v] ? DATE_CACHE[v] : dayjs(v, VALID_DATE_FORMATS, true);
+};
+
 function getYupField(field, yupTypeMap) {
   var yupField = yupTypeMap[field.type] || yupTypeMap.string;
   return yupField(field);
@@ -366,7 +376,8 @@ function computeShape(fields, yupTypeMap, validatorRegistry) {
   return fieldSchemas;
 }
 
-function getYupObjectShape(fields, yupTypeMap, validatorRegistry) {
+function getYupObjectShape( // eslint-disable-next-line @typescript-eslint/no-explicit-any
+fields, yupTypeMap, validatorRegistry) {
   if (!fields.current) {
     var fieldSchemas = computeShape(fields, yupTypeMap, validatorRegistry);
     return yup.object().shape(fieldSchemas);
@@ -407,7 +418,6 @@ var getYUPTypeMap = function getYUPTypeMap() {
     iban: function iban(field) {
       return yup.string().test(IBAN_VALIDATOR(field));
     },
-    // eslint-disable-next-line @typescript-eslint/camelcase
     mobile_phone: function mobile_phone() {
       return yup.string().test(MOBILE_PHONE_VALIDATOR);
     },
@@ -416,12 +426,81 @@ var getYUPTypeMap = function getYUPTypeMap() {
     },
     'choice:single': function choiceSingle() {
       return yup.string().nullable();
+    },
+    date: function date(field) {
+      var simpleDate = yup.string().nullable(true).test('date', 'form.error.date.invalid', function (value) {
+        if (!value) return true;
+        value = getDate(value);
+        return value.isValid();
+      });
+      var params = field.extra || {};
+
+      if (params.max) {
+        var maxDate;
+
+        if (params.max === 'now') {
+          var today = new Date();
+          maxDate = new Date(today);
+        } else {
+          maxDate = getDate(params.max).toDate();
+        }
+
+        var maxNextDate = new Date(maxDate);
+        maxNextDate.setDate(maxDate.getDate() + 1);
+        simpleDate = simpleDate.test({
+          name: 'earlier-than',
+          message: {
+            key: 'form.error.date.earlier_than',
+            context: {
+              maxDate: maxNextDate.toLocaleDateString()
+            }
+          },
+          test: function test(value) {
+            if (!value) return true;
+            value = getDate(value);
+            var isValid = +value.toDate() < +maxDate;
+            return isValid;
+          }
+        });
+      }
+
+      if (params.min) {
+        var minDate;
+
+        if (params.min === 'now') {
+          var _today = new Date();
+
+          minDate = new Date(_today);
+        } else {
+          minDate = getDate(params.min).toDate();
+        }
+
+        var minPreviousDate = new Date(minDate);
+        minPreviousDate.setDate(minDate.getDate() - 1);
+        simpleDate = simpleDate.test({
+          name: 'later-than',
+          message: {
+            key: 'form.error.date.later_than',
+            context: {
+              minDate: minPreviousDate.toLocaleDateString()
+            }
+          },
+          test: function test(value) {
+            if (!value) return true;
+            value = getDate(value);
+            var isValid = +value.toDate() > +minDate;
+            return isValid;
+          }
+        });
+      }
+
+      return simpleDate;
     }
   };
   return yupTypeMap;
-}; // Create a yup validation schema from given fields input
-
+};
 
+// Create a yup validation schema from given fields input
 export function useValidationSchema(fields, validatorRegistry) {
   return useMemo(function () {
     var yupTypeMap = getYUPTypeMap();

package/esm/Field/index.js

@@ -16,6 +16,7 @@ import Checkboxes from '@digigov/form/inputs/Checkboxes';
 import Radio from '@digigov/form/inputs/Radio';
 import Select from '@digigov/form/inputs/Select';
 import FileInput from '@digigov/form/inputs/FileInput';
+import DateInput from '@digigov/form/inputs/DateInput';
 import Label from '@digigov/form/inputs/Label';
 import { useTranslation } from '@digigov/ui/app/i18n';
 var FIELD_COMPONENTS = {
@@ -28,13 +29,18 @@ var FIELD_COMPONENTS = {
   file: {
     component: FileInput
   },
+  date: {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: DateInput
+  },
   'choice:multiple': {
-    wrapper: "fieldset",
+    wrapper: 'fieldset',
     controlled: true,
     component: Checkboxes
   },
   'choice:single': {
-    wrapper: "fieldset",
+    wrapper: 'fieldset',
     controlled: false,
     component: Radio
   }

package/esm/Questions/Step/index.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { createContext, useContext, useState } from 'react';
 import { QuestionsContext } from '@digigov/form/Questions/';
 import PageTitle, { PageTitleHeading } from '@digigov/ui/app/PageTitle';

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v0.4.8
+/** @license Digigov v0.5.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -6,6 +6,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { createContext, useCallback, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@digigov/form/utils';

package/esm/index.mdx

@@ -3,10 +3,7 @@ title: Form
 parent: docs/ui/components
 ---
 
-import { useState, useEffect } from 'react';
 import FormBuilder from '@digigov/form/';
-import PropsDoc from '@docs-components/propsDoc';
-import StylesDoc from '@docs-components/stylesDoc';
 
 export const fields = [
   {

package/esm/inputs/Checkboxes/index.js

@@ -20,8 +20,12 @@ var Checkboxes = function Checkboxes(_ref) {
       var newValue;
 
       if (evt.currentTarget.checked) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         newValue = value.concat([optionValue]);
       } else {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         newValue = value.filter(function (val) {
           return val !== optionValue;
         });
@@ -40,7 +44,9 @@ var Checkboxes = function Checkboxes(_ref) {
     return /*#__PURE__*/React.createElement(CheckboxItem, _extends({
       name: name,
       disabled: disabled,
-      key: key,
+      key: key // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      ,
       checked: value.includes(option.value),
       onChange: handleChange(option.value)
     }, option), option.label && option.label.primary && t(option.label.primary) || value, option.label && option.label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(option.label.secondary)));