@digigov/form 0.10.16 → 0.11.0

package/CHANGELOG.md

@@ -1,6 +1,17 @@
 # Change Log - @digigov/form
 
-This log was last generated on Mon, 03 Apr 2023 11:13:15 GMT and should not be manually modified.
+This log was last generated on Tue, 02 May 2023 09:16:06 GMT and should not be manually modified.
+
+## 0.11.0
+Tue, 02 May 2023 09:16:06 GMT
+
+### Minor changes
+
+- Create OtpInput component, add validators and types
+
+### Patches
+
+- Update form stories
 
 ## 0.10.16
 Mon, 03 Apr 2023 11:13:15 GMT

package/Field/utils.js

@@ -27,6 +27,8 @@ var _FileInput = _interopRequireDefault(require("@digigov/form/inputs/FileInput"
 
 var _DateInput = _interopRequireDefault(require("@digigov/form/inputs/DateInput"));
 
+var _OtpInput = _interopRequireDefault(require("@digigov/form/inputs/OtpInput"));
+
 var _FormContext = require("@digigov/form/FormContext");
 
 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); }
@@ -54,6 +56,11 @@ var FIELD_COMPONENTS = {
     controlled: true,
     component: _DateInput["default"]
   },
+  otp: {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: _OtpInput["default"]
+  },
   'choice:multiple': {
     wrapper: 'fieldset',
     controlled: true,

package/Form.stories.d.ts

@@ -2,5 +2,3 @@ declare namespace _default {
     const title: string;
 }
 export default _default;
-export * from "@digigov/form/__stories__/IntField";
-export * from "@digigov/form/__stories__/AutoCompleteField";

package/Form.stories.js

@@ -3,36 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
 exports["default"] = void 0;
-
-var _IntField = require("@digigov/form/__stories__/IntField");
-
-Object.keys(_IntField).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _IntField[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _IntField[key];
-    }
-  });
-});
-
-var _AutoCompleteField = require("@digigov/form/__stories__/AutoCompleteField");
-
-Object.keys(_AutoCompleteField).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _AutoCompleteField[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _AutoCompleteField[key];
-    }
-  });
-});
 var _default = {
   title: 'Digigov Form'
 };

package/es/Field/utils.js

@@ -6,6 +6,7 @@ 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 OtpInput from '@digigov/form/inputs/OtpInput';
 import { FormContext } from '@digigov/form/FormContext';
 var AutoComplete = /*#__PURE__*/lazy(function () {
   return import('@digigov/form/inputs/AutoComplete');
@@ -26,6 +27,11 @@ var FIELD_COMPONENTS = {
     controlled: true,
     component: DateInput
   },
+  otp: {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: OtpInput
+  },
   'choice:multiple': {
     wrapper: 'fieldset',
     controlled: true,

package/es/Form.stories.js

@@ -1,5 +1,3 @@
 export default {
   title: 'Digigov Form'
-};
-export * from '@digigov/form/__stories__/IntField';
-export * from '@digigov/form/__stories__/AutoCompleteField';
+};

package/es/inputs/AutoComplete/AutoComplete.stories.js

@@ -0,0 +1,7 @@
+import AutoComplete from '@digigov/form/inputs/AutoComplete';
+export default {
+  title: 'Digigov Form/inputs/AutoComplete',
+  component: AutoComplete,
+  displayName: 'AutoComplete'
+};
+export * from '@digigov/form/inputs/AutoComplete/__stories__/Default';

package/{esm/__stories__/AutoCompleteField.js → es/inputs/AutoComplete/__stories__/Default.js}

@@ -31,7 +31,7 @@ var _ref2 = /*#__PURE__*/React.createElement(Button, {
   type: "submit"
 }, "Submit");
 
-export var AutoCompleteField = function AutoCompleteField() {
+export var Default = function Default() {
   return /*#__PURE__*/React.createElement(Suspense, {
     fallback: _ref
   }, /*#__PURE__*/React.createElement(FormBuilder, {

package/es/inputs/Input/__stories__/Integer.js

@@ -20,6 +20,14 @@ export var Integer = function Integer() {
       secondary: 'Εισάγετε έναν οποιοδήποτε αριθμό μεγαλύτερο από το μηδέν'
     },
     required: true
+  }), /*#__PURE__*/React.createElement(Field, {
+    key: "random-number-not-req",
+    name: "random-number-not-req",
+    type: "int",
+    label: {
+      primary: 'Δεύτερος τυχαίος αριθμός',
+      secondary: 'Προαιρετικό πεδίο'
+    }
   }), _ref);
 };
 export default Integer;

package/es/inputs/OtpInput/OtpInput.stories.js

@@ -0,0 +1,7 @@
+import OtpInput from '@digigov/form/inputs/OtpInput';
+export default {
+  title: 'Digigov Form/inputs/OtpInput',
+  component: OtpInput,
+  displayName: 'OtpInput'
+};
+export * from '@digigov/form/inputs/OtpInput/__stories__/Default';

package/es/inputs/OtpInput/__stories__/Default.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import FormBuilder, { Field, Fieldset } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+var FIELDS = [{
+  key: 'otp',
+  type: 'otp',
+  maxLength: 6,
+  required: true,
+  label: {
+    primary: 'Κωδικός Επιβεβαίωσης'
+  }
+}];
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    fields: FIELDS,
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Fieldset, null, FIELDS.map(function (field) {
+    return /*#__PURE__*/React.createElement(Field, {
+      key: field.key,
+      name: field.key
+    });
+  })), _ref);
+};
+export default Default;

package/es/inputs/OtpInput/index.js

@@ -0,0 +1,167 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["name", "maxLength"];
+import React, { useState, useCallback } from 'react';
+import SingleCharacterInputContainer, { SingleCharacterInputItem } from '@digigov/ui/core/SingleCharacterInputContainer';
+export var RE_DIGIT = new RegExp(/^\d+$/);
+export var REMOVE_SPACES = new RegExp(/\s+/g);
+
+function useOtp(onChange, maxLength) {
+  var _useState = useState(Array(maxLength).fill('')),
+      _useState2 = _slicedToArray(_useState, 2),
+      otpValues = _useState2[0],
+      setOTPValues = _useState2[1];
+
+  var handleOtpChange = useCallback(function (otp) {
+    var otpValue = otp.join('');
+    onChange(otpValue);
+  }, [onChange]);
+
+  var itemsArray = function itemsArray(item, idx) {
+    var updatedOTPValues = _toConsumableArray(otpValues);
+
+    if (item.length === 1 || item.length === 0) {
+      updatedOTPValues[idx] = item[0] || '';
+      setOTPValues(updatedOTPValues);
+      handleOtpChange(updatedOTPValues);
+    } else if (item.length === maxLength) {
+      var valueArray = item.split('');
+      var items = [];
+
+      for (var i = 0; i < maxLength; i++) {
+        var _char = valueArray[i];
+        items.push(_char);
+        setOTPValues(items);
+        handleOtpChange(items);
+      }
+    }
+  };
+
+  var SelectionRange = useCallback(function (target) {
+    return target.setSelectionRange(0, target.value.length);
+  }, []);
+  var focusToNextInput = useCallback(function (target) {
+    var nextElement = target.nextElementSibling;
+
+    if (nextElement) {
+      nextElement.focus();
+    }
+  }, []);
+  var focusToPrevInput = useCallback(function (target) {
+    var previousElement = target.previousElementSibling;
+
+    if (previousElement) {
+      previousElement.focus();
+    }
+  }, []);
+  var inputOnKeyDown = useCallback(function (e, idx) {
+    var key = e.key;
+    var target = e.target;
+    var targetValue = target.value;
+    SelectionRange(target);
+
+    if (key === 'ArrowRight' || key === 'ArrowDown') {
+      e.preventDefault();
+      return focusToNextInput(target);
+    }
+
+    if (key === 'ArrowLeft' || key === 'ArrowUp') {
+      e.preventDefault();
+      return focusToPrevInput(target);
+    }
+
+    if (e.key === 'Backspace' || e.key === 'Delete') {
+      if (targetValue !== '') {
+        targetValue = '';
+      } else {
+        focusToPrevInput(target);
+      }
+
+      itemsArray(targetValue, idx);
+      return e.preventDefault();
+    }
+  }, [itemsArray, focusToPrevInput, focusToNextInput]);
+  var inputOnFocus = useCallback(function (e) {
+    var target = e.target;
+    SelectionRange(target);
+  }, [SelectionRange]);
+  var inputOnChange = useCallback(function (e, idx) {
+    var target = e.target;
+    var targetValue = target.value;
+    var isTargetValueDigit = RE_DIGIT.test(targetValue);
+
+    if (!isTargetValueDigit && e.target.value !== '') {
+      return;
+    }
+
+    targetValue = isTargetValueDigit ? targetValue : '';
+    itemsArray(targetValue, idx);
+
+    if (target.value.length > 1) {
+      target.blur();
+    }
+
+    if (!isTargetValueDigit) {
+      return;
+    }
+
+    focusToNextInput(target);
+  }, [handleOtpChange, itemsArray, inputOnKeyDown, inputOnFocus]);
+  var handleOnPaste = useCallback(function (e) {
+    e.preventDefault();
+    var pastedData = e.clipboardData.getData('text/plain').replace(REMOVE_SPACES, '');
+
+    if (pastedData) {
+      itemsArray(pastedData, 0);
+    }
+  }, []);
+  return {
+    otpValues: otpValues,
+    inputOnChange: inputOnChange,
+    inputOnKeyDown: inputOnKeyDown,
+    inputOnFocus: inputOnFocus,
+    handleOnPaste: handleOnPaste
+  };
+}
+
+var SingleCharacterInputItemPart = function SingleCharacterInputItemPart(_ref) {
+  var props = _extends({}, _ref);
+
+  return /*#__PURE__*/React.createElement(SingleCharacterInputItem, props);
+};
+
+export var OtpInput = function OtpInput(_ref2) {
+  var name = _ref2.name,
+      _ref2$maxLength = _ref2.maxLength,
+      maxLength = _ref2$maxLength === void 0 ? 6 : _ref2$maxLength,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  var otp = useOtp(props.onChange, maxLength);
+  return /*#__PURE__*/React.createElement(SingleCharacterInputContainer, null, otp.otpValues.map(function (digit, idx) {
+    return /*#__PURE__*/React.createElement(SingleCharacterInputItemPart, {
+      name: "".concat(name, "-").concat(idx),
+      type: "text",
+      key: idx,
+      autoComplete: "one-time-code",
+      pattern: "\\d{1}",
+      maxLength: maxLength,
+      value: digit,
+      disabled: props.disabled,
+      "aria-required": props['aria-required'],
+      onChange: function onChange(e) {
+        return otp.inputOnChange(e, idx);
+      },
+      onInput: function onInput(e) {
+        return otp.inputOnChange(e, idx);
+      },
+      onKeyDown: function onKeyDown(e) {
+        return otp.inputOnKeyDown(e, idx);
+      },
+      onFocus: otp.inputOnFocus,
+      onPaste: otp.handleOnPaste
+    });
+  }));
+};
+export default OtpInput;

package/es/inputs/index.js

@@ -1,5 +1,6 @@
 export { default as Checkboxes } from '@digigov/form/inputs/Checkboxes';
 export { default as DateInput } from '@digigov/form/inputs/DateInput';
+export { default as OtpInput } from '@digigov/form/inputs/OtpInput';
 export { default as FileInput } from '@digigov/form/inputs/FileInput';
 export { default as Input } from '@digigov/form/inputs/Input';
 export { default as Label } from '@digigov/form/inputs/Label';

package/es/registry.js

@@ -20,6 +20,7 @@ import * as _digigov_form_inputs_FileInput from '@digigov/form/inputs/FileInput'
 import * as _digigov_form_inputs from '@digigov/form/inputs';
 import * as _digigov_form_inputs_Input from '@digigov/form/inputs/Input';
 import * as _digigov_form_inputs_Label from '@digigov/form/inputs/Label';
+import * as _digigov_form_inputs_OtpInput from '@digigov/form/inputs/OtpInput';
 import * as _digigov_form_inputs_Radio from '@digigov/form/inputs/Radio';
 import * as _digigov_form_inputs_Select from '@digigov/form/inputs/Select';
 import * as _digigov_form_internal from '@digigov/form/internal';
@@ -51,6 +52,7 @@ import * as _digigov_form_validators_utils_iban from '@digigov/form/validators/u
 import * as _digigov_form_validators_utils from '@digigov/form/validators/utils';
 import * as _digigov_form_validators_utils_int from '@digigov/form/validators/utils/int';
 import * as _digigov_form_validators_utils_number from '@digigov/form/validators/utils/number';
+import * as _digigov_form_validators_utils_otp from '@digigov/form/validators/utils/otp';
 import * as _digigov_form_validators_utils_phone from '@digigov/form/validators/utils/phone';
 import * as _digigov_form_validators_utils_postal_code from '@digigov/form/validators/utils/postal_code';
 import * as _digigov_form_validators_utils_uuid4 from '@digigov/form/validators/utils/uuid4';
@@ -92,6 +94,7 @@ export default {
   '@digigov/form/inputs': lazyImport(_digigov_form_inputs),
   '@digigov/form/inputs/Input': lazyImport(_digigov_form_inputs_Input),
   '@digigov/form/inputs/Label': lazyImport(_digigov_form_inputs_Label),
+  '@digigov/form/inputs/OtpInput': lazyImport(_digigov_form_inputs_OtpInput),
   '@digigov/form/inputs/Radio': lazyImport(_digigov_form_inputs_Radio),
   '@digigov/form/inputs/Select': lazyImport(_digigov_form_inputs_Select),
   '@digigov/form/internal': lazyImport(_digigov_form_internal),
@@ -123,6 +126,7 @@ export default {
   '@digigov/form/validators/utils': lazyImport(_digigov_form_validators_utils),
   '@digigov/form/validators/utils/int': lazyImport(_digigov_form_validators_utils_int),
   '@digigov/form/validators/utils/number': lazyImport(_digigov_form_validators_utils_number),
+  '@digigov/form/validators/utils/otp': lazyImport(_digigov_form_validators_utils_otp),
   '@digigov/form/validators/utils/phone': lazyImport(_digigov_form_validators_utils_phone),
   '@digigov/form/validators/utils/postal_code': lazyImport(_digigov_form_validators_utils_postal_code),
   '@digigov/form/validators/utils/uuid4': lazyImport(_digigov_form_validators_utils_uuid4)

package/es/validators/index.js

@@ -3,7 +3,7 @@ import * as yup from 'yup';
 import { useMemo } from 'react';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { getYupObjectShape, AFM_VALIDATOR, FILE_MAX_SIZE_VALIDATOR, IBAN_VALIDATOR, MOBILE_PHONE_VALIDATOR, PHONE_NUMBER_VALIDATOR, POSTALCODE_VALIDATOR, UUID4_VALIDATOR } from '@digigov/form/validators/utils';
+import { getYupObjectShape, AFM_VALIDATOR, FILE_MAX_SIZE_VALIDATOR, IBAN_VALIDATOR, OTP_VALIDATOR, MOBILE_PHONE_VALIDATOR, PHONE_NUMBER_VALIDATOR, POSTALCODE_VALIDATOR, UUID4_VALIDATOR } from '@digigov/form/validators/utils';
 import { NUMBER_VALIDATOR } from '@digigov/form/validators/utils/number';
 import { INT_VALIDATOR } from '@digigov/form/validators/utils/int';
 dayjs.extend(customParseFormat);
@@ -79,6 +79,9 @@ export var getYUPTypeMap = function getYUPTypeMap() {
     iban: function iban(field) {
       return yup.string().test(IBAN_VALIDATOR(field));
     },
+    otp: function otp(field) {
+      return yup.string().test(OTP_VALIDATOR(field));
+    },
     postal_code: function postal_code(field) {
       return yup.string().test(POSTALCODE_VALIDATOR(field));
     },

package/es/validators/utils/index.js

@@ -2,6 +2,7 @@ import * as yup from 'yup';
 export * from '@digigov/form/validators/utils/afm';
 export * from '@digigov/form/validators/utils/file';
 export * from '@digigov/form/validators/utils/iban';
+export * from '@digigov/form/validators/utils/otp';
 export * from '@digigov/form/validators/utils/phone';
 export * from '@digigov/form/validators/utils/postal_code';
 export * from '@digigov/form/validators/utils/uuid4';

package/es/validators/utils/otp.js

@@ -0,0 +1,26 @@
+export function validateOtp(value, maxLength) {
+  if (value.length === maxLength) {
+    return true;
+  } else {
+    return false;
+  }
+}
+export var OTP_VALIDATOR = function OTP_VALIDATOR(field) {
+  var maxLength = field === null || field === void 0 ? void 0 : field.maxLength;
+  return {
+    name: 'otp-validator',
+    message: {
+      key: 'form.error.otp.less_than',
+      context: {
+        maxLength: field === null || field === void 0 ? void 0 : field.maxLength
+      }
+    },
+    test: function test(value) {
+      if (!value) {
+        return true;
+      }
+
+      return validateOtp(value, maxLength);
+    }
+  };
+};

package/esm/Field/utils.js

@@ -6,6 +6,7 @@ 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 OtpInput from '@digigov/form/inputs/OtpInput';
 import { FormContext } from '@digigov/form/FormContext';
 var AutoComplete = /*#__PURE__*/lazy(function () {
   return import('@digigov/form/inputs/AutoComplete');
@@ -26,6 +27,11 @@ var FIELD_COMPONENTS = {
     controlled: true,
     component: DateInput
   },
+  otp: {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: OtpInput
+  },
   'choice:multiple': {
     wrapper: 'fieldset',
     controlled: true,

package/esm/Form.stories.js

@@ -1,5 +1,3 @@
 export default {
   title: 'Digigov Form'
-};
-export * from '@digigov/form/__stories__/IntField';
-export * from '@digigov/form/__stories__/AutoCompleteField';
+};

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v0.10.16
+/** @license Digigov v0.11.0
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.

package/esm/inputs/AutoComplete/AutoComplete.stories.js

@@ -0,0 +1,7 @@
+import AutoComplete from '@digigov/form/inputs/AutoComplete';
+export default {
+  title: 'Digigov Form/inputs/AutoComplete',
+  component: AutoComplete,
+  displayName: 'AutoComplete'
+};
+export * from '@digigov/form/inputs/AutoComplete/__stories__/Default';

package/{es/__stories__/AutoCompleteField.js → esm/inputs/AutoComplete/__stories__/Default.js}

@@ -31,7 +31,7 @@ var _ref2 = /*#__PURE__*/React.createElement(Button, {
   type: "submit"
 }, "Submit");
 
-export var AutoCompleteField = function AutoCompleteField() {
+export var Default = function Default() {
   return /*#__PURE__*/React.createElement(Suspense, {
     fallback: _ref
   }, /*#__PURE__*/React.createElement(FormBuilder, {

package/esm/inputs/Input/__stories__/Integer.js

@@ -20,6 +20,14 @@ export var Integer = function Integer() {
       secondary: 'Εισάγετε έναν οποιοδήποτε αριθμό μεγαλύτερο από το μηδέν'
     },
     required: true
+  }), /*#__PURE__*/React.createElement(Field, {
+    key: "random-number-not-req",
+    name: "random-number-not-req",
+    type: "int",
+    label: {
+      primary: 'Δεύτερος τυχαίος αριθμός',
+      secondary: 'Προαιρετικό πεδίο'
+    }
   }), _ref);
 };
 export default Integer;

package/esm/inputs/OtpInput/OtpInput.stories.js

@@ -0,0 +1,7 @@
+import OtpInput from '@digigov/form/inputs/OtpInput';
+export default {
+  title: 'Digigov Form/inputs/OtpInput',
+  component: OtpInput,
+  displayName: 'OtpInput'
+};
+export * from '@digigov/form/inputs/OtpInput/__stories__/Default';

package/esm/inputs/OtpInput/__stories__/Default.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import FormBuilder, { Field, Fieldset } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+var FIELDS = [{
+  key: 'otp',
+  type: 'otp',
+  maxLength: 6,
+  required: true,
+  label: {
+    primary: 'Κωδικός Επιβεβαίωσης'
+  }
+}];
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    fields: FIELDS,
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Fieldset, null, FIELDS.map(function (field) {
+    return /*#__PURE__*/React.createElement(Field, {
+      key: field.key,
+      name: field.key
+    });
+  })), _ref);
+};
+export default Default;