@digigov/form 0.8.4 → 0.8.5

package/CHANGELOG.md

@@ -1,6 +1,14 @@
 # Change Log - @digigov/form
 
-This log was last generated on Wed, 21 Sep 2022 14:27:06 GMT and should not be manually modified.
+This log was last generated on Tue, 27 Sep 2022 10:00:49 GMT and should not be manually modified.
+
+## 0.8.5
+Tue, 27 Sep 2022 10:00:49 GMT
+
+### Patches
+
+- consider all custom inline inputs as controlled
+- increase the range of accepted react version specified in peerDependencies
 
 ## 0.8.4
 Wed, 21 Sep 2022 14:27:06 GMT

package/Field/utils.js

@@ -75,6 +75,7 @@ function calculateField(children, field, componentRegistry) {
 
   if (children) {
     calculatedField.component = children;
+    calculatedField.controlled = true;
   } else if (typeof field.component === 'function') {// leave as is
   } else if (!field.component && !field.type) {
     var _fieldComponentRegist;

package/FieldArray/FieldArray.stories.playwright.json

@@ -0,0 +1,168 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-form-fieldarray--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>button"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            },
+            {
+              "name": "waitForSelector",
+              "args": {
+                "selector": "text=Το πεδίο πρέπει να έχει τουλάχιστον 2 εγγραφές. Προσθέστε μια ακόμα επιλέγοντας την απάντηση «Ναι» στην επόμενη ερώτηση.",
+                "options": {
+                  "state": "visible"
+                }
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>button",
+                "options": {
+                  "clickCount": 2
+                }
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "text=Συνέχεια"
+              }
+            },
+            {
+              "name": "waitForSelector",
+              "args": {
+                "selector": "text=Το πεδίο είναι υποχρεωτικό.",
+                "options": {
+                  "state": "visible"
+                }
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(3)>label>input",
+                "text": "2107474274"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "iMmV-vvS4iNn",
+          "title": "Add new items to FieldArray"
+        }
+      ]
+    },
+    "digigov-form-fieldarray--with-exact-length": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "text=Προσθήκη συνυπογράφοντα"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": ".govgr-fieldset:has-text(\"Συνυπογράφοντας 1\") .govgr-field:has-text(\"ΑΦΜ\") input",
+                "text": "094536469"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": ".govgr-fieldset:has-text(\"Συνυπογράφοντας 1\") .govgr-field:has-text(\"Όνομα\") input",
+                "text": "Γιάννης"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": ".govgr-fieldset:has-text(\"Συνυπογράφοντας 1\") .govgr-field:has-text(\"Επώνυμο\") input",
+                "text": "Δόες"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": ".govgr-field:has-text(\"Πεδίο 2\") input",
+                "text": "2107474274"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "text=Συνέχεια"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "text=Προσθήκη συνυπογράφοντα"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "text=Συνέχεια"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": ".govgr-fieldset:has-text(\"Συνυπογράφοντας 2\") .govgr-field:has-text(\"ΑΦΜ\") input",
+                "text": "094536469"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": ".govgr-fieldset:has-text(\"Συνυπογράφοντας 2\") .govgr-field:has-text(\"Όνομα\") input",
+                "text": "Γιάννης"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": ".govgr-fieldset:has-text(\"Συνυπογράφοντας 2\") .govgr-field:has-text(\"Επώνυμο\") input",
+                "text": "Δόες"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "RbhRN0ZiUB7C",
+          "title": "Add an exact length of items to FieldArray"
+        }
+      ]
+    }
+  }
+}

package/FieldArray/__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"));
 
@@ -90,9 +90,7 @@ var fields = [{
 var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, null, "\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);
@@ -103,7 +101,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/FieldArray/__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"));
 
@@ -89,9 +89,7 @@ var fields = [{
 var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, null, "\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);
@@ -102,7 +100,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/FieldArray/index.js

@@ -60,6 +60,7 @@ var FieldArray = function FieldArray(_ref) {
     }, /*#__PURE__*/_react["default"].createElement(_Fieldset2["default"], null, /*#__PURE__*/_react["default"].createElement(_Fieldset.FieldsetLabel, null, "\u03A3\u03C5\u03BD\u03C5\u03C0\u03BF\u03B3\u03C1\u03AC\u03C6\u03BF\u03BD\u03C4\u03B1\u03C2 ", index + 1), /*#__PURE__*/_react["default"].createElement(_FieldObject["default"], (0, _extends2["default"])({
       name: "".concat(name, ".").concat(index),
       error: Array.isArray(error) && error[index],
+      formState: formState,
       register: register,
       control: control
     }, (_customField$extra = customField.extra) === null || _customField$extra === void 0 ? void 0 : _customField$extra.of)), /*#__PURE__*/_react["default"].createElement(_core.Button, {

package/FieldObject/index.js

@@ -31,7 +31,6 @@ var FieldObject = function FieldObject(_ref) {
   var name = _ref.name,
       label = _ref.label,
       extra = _ref.extra,
-      error = _ref.error,
       control = _ref.control,
       register = _ref.register,
       reset = _ref.reset,
@@ -50,7 +49,7 @@ var FieldObject = function FieldObject(_ref) {
       register: register,
       reset: reset,
       field: field,
-      error: error && error[field.key],
+      error: formState.errors && formState.errors[field.key],
       formState: formState
     });
   }));

package/FormBuilder/FormBuilder.mdx

@@ -0,0 +1,271 @@
+---
+id: FormBuilder
+title: FormBuilder
+sidebar_label: FormBuilder
+---
+
+`FormBuilder` is a React component that provides an easy way to efficiently create reusable form page. Forms are a flexible mechanism for collecting user input because there are suitable widgets for entering many different types of data, including text boxes, checkboxes, radio buttons, dropdowns and so on  for submission to a server. Actually when we use `stepForm` for building step-forms all we do is to render `FormBuilder` component.
+
+`stepForm` component: 
+
+<Story packageName="@digigov/form" component="FormBuilder" story="Default.tsx" />
+
+### Importing and using FormBuilder Component
+
+To import `FormBuilder` component simply import it from `'@digigov/form`.
+
+```javascript
+
+import {FormBuilder} from '@digigov/form';
+
+```
+Now you can use the current component inisde of your component
+
+
+```javascript
+import BasicLayout, {
+  Top,
+  Content,
+  Main,
+  Bottom,
+} from '@digigov/ui/layouts/Basic';
+import {FormBuilder} from '@digigov/form';
+
+export default function MyComponent({ props }) {
+
+  return (
+    <BasicLayout>
+      .
+      .
+      <Content>
+        <Main>
+          .
+          .
+          <FormBuilder></FormBuilder>
+          .
+          .
+        </Main>
+      </Content>
+      <Bottom>
+        <GovGRFooter />
+      </Bottom>
+    </BasicLayout>
+  );
+}
+}
+```
+
+### Props
+
+`FormBuilder` component accepts several arguments as input props.
+
+| Name          |      Type     |  Default      | Description |
+| ------------- | :-----------: | :-----------: | :-----------: | 
+| children      | node |        |      allow you to pass components as data.  |
+| steps      | array |        |      an array which includes each step-form format data |
+| name      | string |        |      the name of the step.  |
+| title      | string |        |     the title from each step   |
+| fields      | array |        |     an array of object fields which they describe each field for each step-form |
+| key      | string |        |     the key value of the input field |
+| label      | object |        |    an object prop which describes the label primary and the secondary name of the field   |
+| primary      | string |        |    the name of te field |
+| required      | boolean |   false     |   describes the validation of the field  |
+| submitButton      | boolean |     false   |  if true, it creates a button to continue to the next step   |
+| type      | string |        |    describes the format of each field, e.x  `type:'string'` is a simple input format field |
+
+
+
+### Field types
+
+Below are demostrated some examples for each type of field
+
+
+### FormBuilder implementation
+
+The examples above are implemented by using the code below
+
+```javascript
+
+import React, { useState } from 'react';
+import BasicLayout, {
+  Top,
+  Content,
+  Main,
+  Bottom,
+} from '@digigov/ui/layouts/Basic';
+import Header, { HeaderTitle } from '@digigov/ui/app/Header';
+import GovGRLogo from '@digigov/ui/govgr/Logo';
+import GovGRFooter from '@digigov/ui/govgr/Footer';
+import Button from '@digigov/ui/core/Button';
+import PageTitle, {
+  PageTitleSection,
+  PageTitleCaption,
+  PageTitleHeading,
+} from '@digigov/ui/app/PageTitle';
+import BackButton from '@digigov/ui/core/Button/BackButton';
+import FormBuilder, { Fieldset, FieldsetLabel, Field } from '@digigov/form';
+import { useTranslation } from '@digigov/ui/app';
+
+const FIELDS = [
+  {
+    key: 'phone',
+    label: {
+      primary: 'Mobile phone',
+      secondary: 'A valid mobile number, eg. +306988848888',
+    },
+    required: true,
+    type: 'mobile_phone',
+  },
+  {
+    key: 'choice_single',
+    label: { primary: 'Is this true or not' },
+    type: 'choice:single',
+    required: true,
+    extra: {
+      options: [
+        {
+          label: { primary: 'Yes' },
+          value: 'yes',
+        },
+        {
+          label: { primary: 'No', secondary: 'Explanation about no option' },
+          value: 'no',
+        },
+      ],
+    },
+  },
+  {
+    key: 'choice_single_notitle',
+    type: 'choice:single',
+    extra: {
+      options: [
+        {
+          label: { primary: 'One' },
+          value: '1',
+        },
+        {
+          label: { primary: 'Two' },
+          value: '2',
+        },
+      ],
+    },
+  },
+  {
+    key: 'choice_multiple',
+    label: 'Select from below',
+    type: 'choice:multiple',
+    extra: {
+      options: [
+        {
+          label: { primary: 'Choice 1', secondary: 'Choice 1 explanation' },
+          value: 'choice_1',
+        },
+        {
+          label: { primary: 'Choice 2' },
+          value: 'choice_2',
+        },
+      ],
+    },
+  },
+  {
+    key: 'choice_single_select',
+    label: 'Select from below',
+    type: 'choice:single',
+    extra: {
+      options: [
+        {
+          label: { primary: 'Choice 1', secondary: 'Choice 1 explanation' },
+          value: 'choice_1',
+        },
+        {
+          label: { primary: 'Choice 2 lenghty explanation without reason' },
+          value: 'choice_2',
+        },
+      ],
+      component: 'Select',
+    },
+  },
+  {
+    key: 'number',
+    label: { primary: 'A positive number' },
+    required: true,
+    width: '100px',
+    type: 'int',
+  },
+  {
+    key: 'string',
+    label: null,
+    width: '100px',
+    required: true,
+    type: 'string',
+  },
+];
+const initialValues = {
+  phone: '6988888888',
+  choice_multiple: ['choice_2'],
+  string: 'default content',
+};
+
+const useStyles = makeStyles(
+  {
+    top: { minHeight: '75px' },
+    main: {},
+    side: {},
+  },
+  { name: 'MuiSite' }
+);
+
+export default function Index() {
+  const styles = useStyles();
+  const [data, setData] = useState(null);
+  const { t } = useTranslation();
+  return (
+    <BasicLayout>
+      <Top className={styles.top}>
+        <Header>
+          <GovGRLogo />
+          <HeaderTitle>Service name</HeaderTitle>
+        </Header>
+      </Top>
+      <Content>
+        <Main className={styles.main}>
+          <BackButton>{t('button.back')}</BackButton>
+          <PageTitle>
+            <PageTitleSection>
+              <PageTitleCaption>Before we start</PageTitleCaption>
+            </PageTitleSection>
+            <PageTitleHeading>Submit a form</PageTitleHeading>
+          </PageTitle>
+          <FormBuilder
+            fields={FIELDS}
+            onSubmit={setData}
+            initial={initialValues}
+          >
+            <Fieldset>
+              <FieldsetLabel>This is a fieldset</FieldsetLabel>
+              {FIELDS.map((field) => (
+                <Field key={field.key} name={field.key} />
+              ))}
+            </Fieldset>
+            <Button type="submit">{t('button.continue')}</Button>
+          </FormBuilder>
+          {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
+        </Main>
+      </Content>
+      <Bottom>
+        <GovGRFooter />
+      </Bottom>
+    </BasicLayout>
+  );
+}
+
+```
+
+
+
+
+
+
+
+
+

package/FormBuilder/FormBuilder.stories.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    export const title: string;
+    export { FormBuilder as component };
+}
+export default _default;
+export * from "@digigov/form/FormBuilder/__stories__/Default";
+import FormBuilder from "@digigov/form/FormBuilder";

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.d.ts

@@ -0,0 +1,2 @@
+export declare const Default: () => JSX.Element;
+export 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;