@digigov/form 0.10.16 → 0.11.1

package/src/registry.js

@@ -21,6 +21,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';
@@ -52,6 +53,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'
@@ -96,6 +98,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),
@@ -127,6 +130,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/src/types.tsx

@@ -30,6 +30,7 @@ export interface FieldSpec {
     | 'choice:single'
     | 'mobile_phone'
     | 'date'
+    | 'otp'
     | 'afm'
     | 'iban'
     | 'file'
@@ -38,6 +39,7 @@ export interface FieldSpec {
     | 'array'
     | 'object';
   component?: any;
+  maxLength?: number;
   condition?: Record<string, FieldCondition>;
   controlled?: boolean;
   label?: FieldLabelProps;

package/src/validators/index.ts

@@ -9,6 +9,7 @@ import {
   AFM_VALIDATOR,
   FILE_MAX_SIZE_VALIDATOR,
   IBAN_VALIDATOR,
+  OTP_VALIDATOR,
   MOBILE_PHONE_VALIDATOR,
   PHONE_NUMBER_VALIDATOR,
   POSTALCODE_VALIDATOR,
@@ -105,6 +106,7 @@ export const getYUPTypeMap = (): Record<string, any> => {
     afm: (): yup.StringSchema => yup.string().test(AFM_VALIDATOR),
     uuid4: (): yup.StringSchema => yup.string().test(UUID4_VALIDATOR),
     iban: (field): yup.StringSchema => yup.string().test(IBAN_VALIDATOR(field)),
+    otp: (field): yup.StringSchema => yup.string().test(OTP_VALIDATOR(field)),
     postal_code: (field): yup.StringSchema =>
       yup.string().test(POSTALCODE_VALIDATOR(field)),
     mobile_phone: (): yup.StringSchema =>

package/src/validators/utils/index.ts

@@ -5,6 +5,7 @@ import { ValidatorSchema } from '@digigov/form/validators/types';
 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/src/validators/utils/otp.ts

@@ -0,0 +1,28 @@
+import { FieldSpec } from '@digigov/form/types';
+import { ValidatorSchema } from '@digigov/form/validators/types';
+export function validateOtp(value: string, maxLength: number): boolean {
+  if (value.length === maxLength) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+export const OTP_VALIDATOR = (field: FieldSpec): ValidatorSchema => {
+  const maxLength = field?.maxLength;
+  return {
+    name: 'otp-validator',
+    message: {
+      key: 'form.error.otp.less_than',
+      context: {
+        maxLength: field?.maxLength,
+      },
+    },
+    test: (value: string): boolean => {
+      if (!value) {
+        return true;
+      }
+      return validateOtp(value, maxLength as number);
+    },
+  };
+};

package/types.d.ts

@@ -17,8 +17,9 @@ export interface FieldCondition {
 }
 export interface FieldSpec {
     key: string;
-    type?: 'int' | 'string' | 'text' | 'boolean' | 'email' | 'uuid4' | 'choice:multiple' | 'choice:single' | 'mobile_phone' | 'date' | 'afm' | 'iban' | 'file' | 'postal_code' | 'phone_number' | 'array' | 'object';
+    type?: 'int' | 'string' | 'text' | 'boolean' | 'email' | 'uuid4' | 'choice:multiple' | 'choice:single' | 'mobile_phone' | 'date' | 'otp' | 'afm' | 'iban' | 'file' | 'postal_code' | 'phone_number' | 'array' | 'object';
     component?: any;
+    maxLength?: number;
     condition?: Record<string, FieldCondition>;
     controlled?: boolean;
     label?: FieldLabelProps;

package/validators/index.js

@@ -104,6 +104,9 @@ var getYUPTypeMap = function getYUPTypeMap() {
     iban: function iban(field) {
       return yup.string().test((0, _utils.IBAN_VALIDATOR)(field));
     },
+    otp: function otp(field) {
+      return yup.string().test((0, _utils.OTP_VALIDATOR)(field));
+    },
     postal_code: function postal_code(field) {
       return yup.string().test((0, _utils.POSTALCODE_VALIDATOR)(field));
     },

package/validators/utils/index.d.ts

@@ -4,6 +4,7 @@ import { ValidatorSchema } from '@digigov/form/validators/types';
 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/validators/utils/index.js

@@ -58,6 +58,20 @@ Object.keys(_iban).forEach(function (key) {
   });
 });
 
+var _otp = require("@digigov/form/validators/utils/otp");
+
+Object.keys(_otp).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _otp[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _otp[key];
+    }
+  });
+});
+
 var _phone = require("@digigov/form/validators/utils/phone");
 
 Object.keys(_phone).forEach(function (key) {

package/validators/utils/otp.d.ts

@@ -0,0 +1,4 @@
+import { FieldSpec } from '@digigov/form/types';
+import { ValidatorSchema } from '@digigov/form/validators/types';
+export declare function validateOtp(value: string, maxLength: number): boolean;
+export declare const OTP_VALIDATOR: (field: FieldSpec) => ValidatorSchema;

package/validators/utils/otp.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OTP_VALIDATOR = void 0;
+exports.validateOtp = validateOtp;
+
+function validateOtp(value, maxLength) {
+  if (value.length === maxLength) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+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);
+    }
+  };
+};
+
+exports.OTP_VALIDATOR = OTP_VALIDATOR;

package/Form.stories.playwright.json

@@ -1,71 +0,0 @@
-{
-  "version": "4",
-  "stories": {
-    "digigov-form--int-field": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            },
-            {
-              "name": "type",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>div:nth-child(1)>label>input",
-                "text": "2.2"
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            }
-          ],
-          "id": "7wMj7iTumGC-",
-          "title": "Show validation errors"
-        },
-        {
-          "actions": [
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            }
-          ],
-          "id": "e7W6ZshKZmsE",
-          "title": "Focus with keyboard"
-        },
-        {
-          "actions": [
-            {
-              "name": "type",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>div:nth-child(1)>label>input",
-                "text": "1"
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            }
-          ],
-          "id": "DBqARxwPma5a",
-          "title": "Add number"
-        }
-      ]
-    }
-  }
-}

package/__stories__/AutoCompleteField.d.ts

@@ -1 +0,0 @@
-export declare const AutoCompleteField: () => JSX.Element;

package/__stories__/IntField.d.ts

@@ -1 +0,0 @@
-export declare const IntField: () => JSX.Element;

package/__stories__/IntField.js

@@ -1,56 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.IntField = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _FormBuilder = _interopRequireDefault(require("@digigov/form/FormBuilder"));
-
-var _Field = require("@digigov/form/Field");
-
-var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
-
-var fields = [{
-  key: 'number_required',
-  label: {
-    primary: 'A positive number',
-    secondary: 'required'
-  },
-  required: true,
-  type: 'int'
-}, {
-  key: 'number_not_required',
-  label: {
-    primary: 'A positive number',
-    secondary: 'not required'
-  },
-  required: false,
-  type: 'int'
-}];
-var initialValues = {};
-
-var _ref = /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-  type: "submit"
-}, "Submit");
-
-var IntField = function IntField() {
-  return /*#__PURE__*/_react["default"].createElement(_FormBuilder["default"], {
-    fields: fields,
-    onSubmit: function onSubmit(data) {
-      console.log(data);
-    },
-    initial: initialValues
-  }, fields.map(function (field) {
-    return /*#__PURE__*/_react["default"].createElement(_Field.Field, {
-      key: field.key,
-      name: field.key
-    });
-  }), _ref);
-};
-
-exports.IntField = IntField;

package/es/Form.stories.playwright.json

@@ -1,71 +0,0 @@
-{
-  "version": "4",
-  "stories": {
-    "digigov-form--int-field": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            },
-            {
-              "name": "type",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>div:nth-child(1)>label>input",
-                "text": "2.2"
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            }
-          ],
-          "id": "7wMj7iTumGC-",
-          "title": "Show validation errors"
-        },
-        {
-          "actions": [
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            }
-          ],
-          "id": "e7W6ZshKZmsE",
-          "title": "Focus with keyboard"
-        },
-        {
-          "actions": [
-            {
-              "name": "type",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>div:nth-child(1)>label>input",
-                "text": "1"
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            }
-          ],
-          "id": "DBqARxwPma5a",
-          "title": "Add number"
-        }
-      ]
-    }
-  }
-}

package/es/__stories__/IntField.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import FormBuilder from '@digigov/form/FormBuilder';
-import { Field } from '@digigov/form/Field';
-import Button from '@digigov/ui/core/Button';
-var fields = [{
-  key: 'number_required',
-  label: {
-    primary: 'A positive number',
-    secondary: 'required'
-  },
-  required: true,
-  type: 'int'
-}, {
-  key: 'number_not_required',
-  label: {
-    primary: 'A positive number',
-    secondary: 'not required'
-  },
-  required: false,
-  type: 'int'
-}];
-var initialValues = {};
-
-var _ref = /*#__PURE__*/React.createElement(Button, {
-  type: "submit"
-}, "Submit");
-
-export var IntField = function IntField() {
-  return /*#__PURE__*/React.createElement(FormBuilder, {
-    fields: fields,
-    onSubmit: function onSubmit(data) {
-      console.log(data);
-    },
-    initial: initialValues
-  }, fields.map(function (field) {
-    return /*#__PURE__*/React.createElement(Field, {
-      key: field.key,
-      name: field.key
-    });
-  }), _ref);
-};

package/esm/Form.stories.playwright.json

@@ -1,71 +0,0 @@
-{
-  "version": "4",
-  "stories": {
-    "digigov-form--int-field": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            },
-            {
-              "name": "type",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>div:nth-child(1)>label>input",
-                "text": "2.2"
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            }
-          ],
-          "id": "7wMj7iTumGC-",
-          "title": "Show validation errors"
-        },
-        {
-          "actions": [
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            }
-          ],
-          "id": "e7W6ZshKZmsE",
-          "title": "Focus with keyboard"
-        },
-        {
-          "actions": [
-            {
-              "name": "type",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>div:nth-child(1)>label>input",
-                "text": "1"
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            }
-          ],
-          "id": "DBqARxwPma5a",
-          "title": "Add number"
-        }
-      ]
-    }
-  }
-}

package/esm/__stories__/IntField.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import FormBuilder from '@digigov/form/FormBuilder';
-import { Field } from '@digigov/form/Field';
-import Button from '@digigov/ui/core/Button';
-var fields = [{
-  key: 'number_required',
-  label: {
-    primary: 'A positive number',
-    secondary: 'required'
-  },
-  required: true,
-  type: 'int'
-}, {
-  key: 'number_not_required',
-  label: {
-    primary: 'A positive number',
-    secondary: 'not required'
-  },
-  required: false,
-  type: 'int'
-}];
-var initialValues = {};
-
-var _ref = /*#__PURE__*/React.createElement(Button, {
-  type: "submit"
-}, "Submit");
-
-export var IntField = function IntField() {
-  return /*#__PURE__*/React.createElement(FormBuilder, {
-    fields: fields,
-    onSubmit: function onSubmit(data) {
-      console.log(data);
-    },
-    initial: initialValues
-  }, fields.map(function (field) {
-    return /*#__PURE__*/React.createElement(Field, {
-      key: field.key,
-      name: field.key
-    });
-  }), _ref);
-};

package/src/Form.stories.playwright.json

@@ -1,71 +0,0 @@
-{
-  "version": "4",
-  "stories": {
-    "digigov-form--int-field": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            },
-            {
-              "name": "type",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>div:nth-child(1)>label>input",
-                "text": "2.2"
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            }
-          ],
-          "id": "7wMj7iTumGC-",
-          "title": "Show validation errors"
-        },
-        {
-          "actions": [
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            }
-          ],
-          "id": "e7W6ZshKZmsE",
-          "title": "Focus with keyboard"
-        },
-        {
-          "actions": [
-            {
-              "name": "type",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>div:nth-child(1)>label>input",
-                "text": "1"
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            }
-          ],
-          "id": "DBqARxwPma5a",
-          "title": "Add number"
-        }
-      ]
-    }
-  }
-}

package/src/__stories__/IntField.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import FormBuilder from '@digigov/form/FormBuilder';
-import { Field } from '@digigov/form/Field';
-import { FieldSpec } from '@digigov/form/types';
-import Button from '@digigov/ui/core/Button';
-const fields: FieldSpec[] = [
-  {
-    key: 'number_required',
-    label: { primary: 'A positive number', secondary: 'required' },
-    required: true,
-    type: 'int',
-  },
-  {
-    key: 'number_not_required',
-    label: { primary: 'A positive number', secondary: 'not required' },
-    required: false,
-    type: 'int',
-  },
-];
-
-const initialValues = {};
-
-export const IntField = () => {
-  return (
-    <FormBuilder
-      fields={fields}
-      onSubmit={(data) => {
-        console.log(data);
-      }}
-      initial={initialValues}
-    >
-      {fields.map((field) => (
-        <Field key={field.key} name={field.key} />
-      ))}
-      <Button type="submit">Submit</Button>
-    </FormBuilder>
-  );
-};