@digigov/form 0.8.3 → 0.8.5-alpha

package/FormBuilder/FormBuilder.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _FormBuilder = _interopRequireDefault(require("@digigov/form/FormBuilder"));
+
+var _Default = require("@digigov/form/FormBuilder/__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 _default = {
+  title: 'Digigov Form/FormBuilder',
+  component: _FormBuilder["default"]
+};
+exports["default"] = _default;

package/FormBuilder/__stories__/Default.js

@@ -0,0 +1,45 @@
+"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 _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 _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(_form["default"], {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_form.Field, {
+    key: "business-title",
+    name: "business-title",
+    type: "string",
+    label: {
+      primary: 'Όνομα επιχείρησης'
+    },
+    required: true
+  }), _ref);
+};
+
+exports.Default = Default;
+var _default = Default;
+exports["default"] = _default;

package/FormBuilder/index.d.ts

@@ -0,0 +1,2 @@
+import { FormBuilder } from '@digigov/form/FormBuilder/FormBuilder';
+export default FormBuilder;

package/FormBuilder/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _FormBuilder = require("@digigov/form/FormBuilder/FormBuilder");
+
+var _default = _FormBuilder.FormBuilder;
+exports["default"] = _default;

package/MultiplicityField/MultiplicityField.mdx

@@ -0,0 +1,148 @@
+---
+id: MultiplicityField
+title: Multiplicity Field
+sidebar_label: Recursively ask user data
+---
+
+import LeadText from "@site/src/components/LeadText";
+
+<LeadText>Multiplicity field enables users add instances of a particular schema for an
+arbitrary amount of times until they are done. It can be used with a fixed
+length of instances, or a minimum and maximum length.</LeadText>
+
+## What we are trying to achieve
+
+This field was developed as an accessible and guided way to fill arrays with
+objects described by a schema. For example, we can define the schema for a usual form by describing the fields
+it will render.
+
+These fields may describe an entity and its properties and it can be reused
+multiple times to generate data objects following this schema.
+
+```js
+const fields = [
+  {
+    key: "fullname",
+    name: "fullname",
+    type: "string",
+    required: true
+  },
+  {
+    key: "afm",
+    name: "afm",
+    type: "afm",
+    required: true
+  },
+];
+```
+
+We aim to have semantically correct and valid forms. What this means is that we
+cannot mix form-related HTML elements (eg. form, input, label) with generic ones
+(eg. div, cards, custom components). React will start throwing warnings left and
+right if we try to add a paragraph element inside a form.
+
+Apart from this, Digigov Form recommends using forms in their original way of
+filling and validating inputs, then submitting the form as a whole. The process
+repeats if validation fails or proceeds if validation is successful. In any
+case, it is imperative to provide meaningful information to the users on
+how they proceed to fix the validation errors.
+
+Last but not least, we should make our interfaces entirely accessible to screen
+readers and other accessibilty tools and this requirement adds another dimension
+to this problem. Forms and fields should read like a well-written piece of text
+and make sense to the users. Thus we should avoid the use of magic UX solutions
+that require users to have some well-developed digital skills and most of the
+time are used for expert users. 
+
+Users should fill in data as this schema dictates, and every time they add
+something we should ask them if they want to continue adding or escape the loop.
+We can also add some limitations so we can ask for an array with specific
+cardinality. In this way we can validate each form state regardless of whether a
+user is in the process of data input or reviewing what they've added. In any
+case, the form should guide users through steps and validation errors, and avoid
+giving too much freedom in actions that could lead to estranged users losing
+their way out of the maze.
+
+But how can we code this feature as part of a Digigov form? 
+
+## Enter the Multiplicity field
+
+To deal with this problem, we have decided to create a composite field that uses
+externally defined object schema alongside some internal helpers. This field in
+fact is considered as a single key-value pair by the form. The only difference is that
+the value will be of type `Array` instead of any other primitive used for a
+field type.
+
+The component internally uses the
+[useFieldArray](https://www.react-hook-form.com/api/usefieldarray) hook from
+react-hook-form.
+
+```jsx live
+import React from 'react';
+import Form, { Field } from '@digigov/form';
+
+export default function SimpleForm() {
+  return <Form>
+    <Field
+      key="children"
+      label={{ primary: "Children" }}
+      type="array"
+      multiplicity={true}
+      extra={{
+
+      label: {
+        object: {
+          title: 'Συνυπογράφοντας',
+          title_added: 'Οι συνυπογράφοντες που έχετε προσθέσει',
+          add: 'Προσθήκη',
+          delete: 'Αφαίρεση συνυπογράφοντος',
+        },
+        question: {
+          title: 'Do you want to add any additional children?',
+          objectLabel: {
+            primary: 'Προσθήκη νέου συνυπογράφοντα',
+            secondary: 'Συμπληρώστε τα στοιχεία και μετά πατήστε «Προσθήκη»',
+          },
+          yes: 'Yes',
+          no: '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: 'Επώνυμο',
+              },
+            },
+          ],
+        },
+      },
+      }}
+      required
+    />
+  </Form>
+}
+```

package/MultiplicityField/__stories__/Default.js

@@ -11,7 +11,7 @@ exports.Default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _form = _interopRequireWildcard(require("@digigov/form"));
 
@@ -102,9 +102,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
 }, "\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"], {
+  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
     onSubmit: function onSubmit(data) {
       debugger;
       console.log(data);
@@ -115,7 +113,7 @@ var Default = function Default() {
     name: "multiplicity"
   }, fields[1])), /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({
     name: "phonenumber"
-  }, fields[2])), _ref));
+  }, fields[2])), _ref);
 };
 
 exports.Default = Default;

package/MultiplicityField/__stories__/WithExactLength.js

@@ -11,7 +11,7 @@ exports.WithExactLength = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _form = _interopRequireWildcard(require("@digigov/form"));
 
@@ -97,9 +97,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
 }, "\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"], {
+  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
     onSubmit: function onSubmit(data) {
       debugger;
       console.log(data);
@@ -110,7 +108,7 @@ var WithExactLength = function WithExactLength() {
     name: "multiplicity"
   }, fields[1])), /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({
     name: "phonenumber"
-  }, fields[2])), _ref));
+  }, fields[2])), _ref);
 };
 
 exports.WithExactLength = WithExactLength;

package/MultiplicityField/__stories__/WithMaxLength.js

@@ -11,7 +11,7 @@ exports.WithMaxLength = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _form = _interopRequireWildcard(require("@digigov/form"));
 
@@ -100,9 +100,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
 }, "\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"], {
+  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
     onSubmit: function onSubmit(data) {
       debugger;
       console.log(data);
@@ -113,7 +111,7 @@ var WithMaxLength = function WithMaxLength() {
     name: "multiplicity"
   }, fields[1])), /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({
     name: "phonenumber"
-  }, fields[2])), _ref));
+  }, fields[2])), _ref);
 };
 
 exports.WithMaxLength = WithMaxLength;

package/MultiplicityField/__stories__/WithMinAndMaxLength.js

@@ -11,7 +11,7 @@ exports.WithMinAndMaxLength = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _form = _interopRequireWildcard(require("@digigov/form"));
 
@@ -101,9 +101,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
 }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
 
 var WithMinAndMaxLength = function WithMinAndMaxLength() {
-  return /*#__PURE__*/_react["default"].createElement(_react.Suspense, {
-    fallback: "loading"
-  }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
     onSubmit: function onSubmit(data) {
       debugger;
       console.log(data);
@@ -114,7 +112,7 @@ var WithMinAndMaxLength = function WithMinAndMaxLength() {
     name: "multiplicity"
   }, fields[1])), /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({
     name: "phonenumber"
-  }, fields[2])), _ref));
+  }, fields[2])), _ref);
 };
 
 exports.WithMinAndMaxLength = WithMinAndMaxLength;

package/MultiplicityField/__stories__/WithMinLength.js

@@ -11,7 +11,7 @@ exports.WithMinLength = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _form = _interopRequireWildcard(require("@digigov/form"));
 
@@ -100,9 +100,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
 }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
 
 var WithMinLength = function WithMinLength() {
-  return /*#__PURE__*/_react["default"].createElement(_react.Suspense, {
-    fallback: "loading"
-  }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
     onSubmit: function onSubmit(data) {
       debugger;
       console.log(data);
@@ -113,7 +111,7 @@ var WithMinLength = function WithMinLength() {
     name: "multiplicity"
   }, fields[1])), /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({
     name: "phonenumber"
-  }, fields[2])), _ref));
+  }, fields[2])), _ref);
 };
 
 exports.WithMinLength = WithMinLength;

package/Questions/Step/StepArrayReview.js

@@ -17,7 +17,7 @@ var _PageTitle = _interopRequireWildcard(require("@digigov/ui/app/PageTitle"));
 
 var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
 
-var _FormBuilder = require("@digigov/form/FormBuilder");
+var _FormBuilder = _interopRequireDefault(require("@digigov/form/FormBuilder"));
 
 var _Field = require("@digigov/form/Field");
 
@@ -58,7 +58,7 @@ var StepArrayReview = function StepArrayReview(props) {
         return props.handleDelete(idx);
       }
     }, t('button.delete')));
-  })), /*#__PURE__*/_react["default"].createElement(_FormBuilder.FormBuilder, {
+  })), /*#__PURE__*/_react["default"].createElement(_FormBuilder["default"], {
     key: "addmore",
     fields: fields,
     onSubmit: props.handleSubmit