@digigov/form 0.13.2 → 1.0.0-rc
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Field/FieldBase.js +2 -2
- package/Field/FieldBaseContainer.js +8 -8
- package/Field/FieldConditional.js +2 -2
- package/Field/utils.js +6 -6
- package/FieldArray/__stories__/Default.js +2 -2
- package/FieldArray/__stories__/WithExactLength.js +2 -2
- package/FieldArray/index.js +3 -3
- package/FieldObject/index.d.ts +1 -1
- package/FieldObject/index.js +5 -5
- package/Fieldset/FieldsetWithContext.js +4 -4
- package/Fieldset/index.d.ts +1 -1
- package/Fieldset/index.js +2 -2
- package/Fieldset/types.d.ts +2 -2
- package/FormBuilder/FormBuilder.js +5 -5
- package/FormBuilder/FormBuilder.mdx +25 -37
- package/FormBuilder/__stories__/Default.js +2 -2
- package/MultiplicityField/MultiplicityField.mdx +277 -267
- package/MultiplicityField/__stories__/Default.js +2 -2
- package/MultiplicityField/__stories__/PreviewDisplay.js +8 -8
- package/MultiplicityField/__stories__/WithExactLength.js +2 -2
- package/MultiplicityField/__stories__/WithMaxLength.js +2 -2
- package/MultiplicityField/__stories__/WithMinAndMaxLength.js +2 -2
- package/MultiplicityField/__stories__/WithMinLength.js +2 -2
- package/MultiplicityField/add-objects.js +6 -6
- package/MultiplicityField/index.d.ts +2 -2
- package/MultiplicityField/index.js +7 -7
- package/Questions/Questions.js +2 -2
- package/Questions/Step/ReviewStep.js +8 -8
- package/Questions/Step/Step.js +2 -2
- package/Questions/Step/StepArrayReview.js +10 -10
- package/Questions/Step/StepDescription.js +2 -2
- package/Questions/Step/StepForm.d.ts +1 -1
- package/Questions/Step/StepForm.js +6 -6
- package/Questions/Step/StepTitle.js +2 -2
- package/Questions/Step/getAddMoreFields.d.ts +1 -1
- package/Questions/__snapshots__/index.spec.tsx.snap +5 -5
- package/Questions/__stories__/Default.js +6 -6
- package/Questions/index.mdx +41 -44
- package/Questions/index.spec.js +2 -2
- package/create-simple-form.mdx +258 -237
- package/es/Field/FieldBase.js +1 -1
- package/es/Field/FieldBaseContainer.js +6 -6
- package/es/Field/FieldConditional.js +1 -1
- package/es/Field/utils.js +5 -5
- package/es/FieldArray/__stories__/Default.js +1 -1
- package/es/FieldArray/__stories__/WithExactLength.js +1 -1
- package/es/FieldArray/index.js +2 -2
- package/es/FieldObject/index.js +3 -3
- package/es/Fieldset/FieldsetWithContext.js +2 -2
- package/es/Fieldset/index.js +1 -1
- package/es/FormBuilder/FormBuilder.js +3 -3
- package/es/FormBuilder/FormBuilder.mdx +25 -37
- package/es/FormBuilder/__stories__/Default.js +1 -1
- package/es/MultiplicityField/MultiplicityField.mdx +277 -267
- package/es/MultiplicityField/__stories__/Default.js +1 -1
- package/es/MultiplicityField/__stories__/PreviewDisplay.js +7 -7
- package/es/MultiplicityField/__stories__/WithExactLength.js +1 -1
- package/es/MultiplicityField/__stories__/WithMaxLength.js +1 -1
- package/es/MultiplicityField/__stories__/WithMinAndMaxLength.js +1 -1
- package/es/MultiplicityField/__stories__/WithMinLength.js +1 -1
- package/es/MultiplicityField/add-objects.js +3 -3
- package/es/MultiplicityField/index.js +5 -5
- package/es/Questions/Questions.js +1 -1
- package/es/Questions/Step/ReviewStep.js +5 -5
- package/es/Questions/Step/Step.js +1 -1
- package/es/Questions/Step/StepArrayReview.js +6 -6
- package/es/Questions/Step/StepDescription.js +1 -1
- package/es/Questions/Step/StepForm.js +5 -5
- package/es/Questions/Step/StepTitle.js +2 -2
- package/es/Questions/__snapshots__/index.spec.tsx.snap +5 -5
- package/es/Questions/__stories__/Default.js +4 -4
- package/es/Questions/index.mdx +41 -44
- package/es/Questions/index.spec.js +1 -1
- package/es/create-simple-form.mdx +258 -237
- package/es/index.mdx +13 -6
- package/es/inputs/AutoComplete/__stories__/Default.js +3 -3
- package/es/inputs/AutoComplete/index.js +1 -1
- package/es/inputs/Checkboxes/__stories__/Conditional.js +1 -1
- package/es/inputs/Checkboxes/__stories__/Default.js +1 -1
- package/es/inputs/Checkboxes/__stories__/WithDivider.js +1 -1
- package/es/inputs/Checkboxes/index.js +3 -3
- package/es/inputs/DateInput/__stories__/Default.js +1 -1
- package/es/inputs/DateInput/index.js +1 -1
- package/es/inputs/FileInput/__stories__/Default.js +1 -1
- package/es/inputs/FileInput/index.js +5 -5
- package/es/inputs/Input/__stories__/AFM.js +1 -1
- package/es/inputs/Input/__stories__/Boolean.js +1 -1
- package/es/inputs/Input/__stories__/Default.js +1 -1
- package/es/inputs/Input/__stories__/IBAN.js +1 -1
- package/es/inputs/Input/__stories__/Integer.js +1 -1
- package/es/inputs/Input/__stories__/MobilePhone.js +1 -1
- package/es/inputs/Input/__stories__/PhoneNumber.js +1 -1
- package/es/inputs/Input/__stories__/PostalCode.js +1 -1
- package/es/inputs/Input/__stories__/TextWithCharacterLimit.js +1 -1
- package/es/inputs/Input/index.js +1 -1
- package/es/inputs/Label/__stories__/Default.js +1 -1
- package/es/inputs/Label/index.js +3 -3
- package/es/inputs/OtpInput/__stories__/Default.js +1 -1
- package/es/inputs/OtpInput/index.js +1 -1
- package/es/inputs/Radio/__stories__/Conditional.js +1 -1
- package/es/inputs/Radio/__stories__/Default.js +1 -1
- package/es/inputs/Radio/__stories__/WithDivider.js +1 -1
- package/es/inputs/Radio/index.js +4 -4
- package/es/inputs/Select/__stories__/Default.js +1 -1
- package/es/installation.mdx +12 -16
- package/es/utils.js +1 -1
- package/es/validators/index.js +2 -2
- package/esm/Field/FieldBase.js +1 -1
- package/esm/Field/FieldBaseContainer.js +6 -6
- package/esm/Field/FieldConditional.js +1 -1
- package/esm/Field/utils.js +5 -5
- package/esm/FieldArray/__stories__/Default.js +1 -1
- package/esm/FieldArray/__stories__/WithExactLength.js +1 -1
- package/esm/FieldArray/index.js +2 -2
- package/esm/FieldObject/index.js +3 -3
- package/esm/Fieldset/FieldsetWithContext.js +2 -2
- package/esm/Fieldset/index.js +1 -1
- package/esm/FormBuilder/FormBuilder.js +3 -3
- package/esm/FormBuilder/FormBuilder.mdx +25 -37
- package/esm/FormBuilder/__stories__/Default.js +1 -1
- package/esm/MultiplicityField/MultiplicityField.mdx +277 -267
- package/esm/MultiplicityField/__stories__/Default.js +1 -1
- package/esm/MultiplicityField/__stories__/PreviewDisplay.js +7 -7
- package/esm/MultiplicityField/__stories__/WithExactLength.js +1 -1
- package/esm/MultiplicityField/__stories__/WithMaxLength.js +1 -1
- package/esm/MultiplicityField/__stories__/WithMinAndMaxLength.js +1 -1
- package/esm/MultiplicityField/__stories__/WithMinLength.js +1 -1
- package/esm/MultiplicityField/add-objects.js +3 -3
- package/esm/MultiplicityField/index.js +5 -5
- package/esm/Questions/Questions.js +1 -1
- package/esm/Questions/Step/ReviewStep.js +5 -5
- package/esm/Questions/Step/Step.js +1 -1
- package/esm/Questions/Step/StepArrayReview.js +6 -6
- package/esm/Questions/Step/StepDescription.js +1 -1
- package/esm/Questions/Step/StepForm.js +5 -5
- package/esm/Questions/Step/StepTitle.js +2 -2
- package/esm/Questions/__snapshots__/index.spec.tsx.snap +5 -5
- package/esm/Questions/__stories__/Default.js +4 -4
- package/esm/Questions/index.mdx +41 -44
- package/esm/Questions/index.spec.js +1 -1
- package/esm/create-simple-form.mdx +258 -237
- package/esm/index.js +1 -1
- package/esm/index.mdx +13 -6
- package/esm/inputs/AutoComplete/__stories__/Default.js +3 -3
- package/esm/inputs/AutoComplete/index.js +1 -1
- package/esm/inputs/Checkboxes/__stories__/Conditional.js +1 -1
- package/esm/inputs/Checkboxes/__stories__/Default.js +1 -1
- package/esm/inputs/Checkboxes/__stories__/WithDivider.js +1 -1
- package/esm/inputs/Checkboxes/index.js +3 -3
- package/esm/inputs/DateInput/__stories__/Default.js +1 -1
- package/esm/inputs/DateInput/index.js +1 -1
- package/esm/inputs/FileInput/__stories__/Default.js +1 -1
- package/esm/inputs/FileInput/index.js +5 -5
- package/esm/inputs/Input/__stories__/AFM.js +1 -1
- package/esm/inputs/Input/__stories__/Boolean.js +1 -1
- package/esm/inputs/Input/__stories__/Default.js +1 -1
- package/esm/inputs/Input/__stories__/IBAN.js +1 -1
- package/esm/inputs/Input/__stories__/Integer.js +1 -1
- package/esm/inputs/Input/__stories__/MobilePhone.js +1 -1
- package/esm/inputs/Input/__stories__/PhoneNumber.js +1 -1
- package/esm/inputs/Input/__stories__/PostalCode.js +1 -1
- package/esm/inputs/Input/__stories__/TextWithCharacterLimit.js +1 -1
- package/esm/inputs/Input/index.js +1 -1
- package/esm/inputs/Label/__stories__/Default.js +1 -1
- package/esm/inputs/Label/index.js +3 -3
- package/esm/inputs/OtpInput/__stories__/Default.js +1 -1
- package/esm/inputs/OtpInput/index.js +1 -1
- package/esm/inputs/Radio/__stories__/Conditional.js +1 -1
- package/esm/inputs/Radio/__stories__/Default.js +1 -1
- package/esm/inputs/Radio/__stories__/WithDivider.js +1 -1
- package/esm/inputs/Radio/index.js +4 -4
- package/esm/inputs/Select/__stories__/Default.js +1 -1
- package/esm/installation.mdx +12 -16
- package/esm/utils.js +1 -1
- package/esm/validators/index.js +2 -2
- package/index.mdx +13 -6
- package/inputs/AutoComplete/__stories__/Default.js +4 -4
- package/inputs/AutoComplete/index.d.ts +2 -2
- package/inputs/AutoComplete/index.js +2 -2
- package/inputs/Checkboxes/__stories__/Conditional.js +2 -2
- package/inputs/Checkboxes/__stories__/Default.js +2 -2
- package/inputs/Checkboxes/__stories__/WithDivider.js +2 -2
- package/inputs/Checkboxes/index.d.ts +1 -1
- package/inputs/Checkboxes/index.js +4 -4
- package/inputs/DateInput/__stories__/Default.js +2 -2
- package/inputs/DateInput/index.js +2 -2
- package/inputs/FileInput/__stories__/Default.js +2 -2
- package/inputs/FileInput/index.js +5 -5
- package/inputs/Input/__stories__/AFM.js +2 -2
- package/inputs/Input/__stories__/Boolean.js +2 -2
- package/inputs/Input/__stories__/Default.js +2 -2
- package/inputs/Input/__stories__/IBAN.js +2 -2
- package/inputs/Input/__stories__/Integer.js +2 -2
- package/inputs/Input/__stories__/MobilePhone.js +2 -2
- package/inputs/Input/__stories__/PhoneNumber.js +2 -2
- package/inputs/Input/__stories__/PostalCode.js +2 -2
- package/inputs/Input/__stories__/TextWithCharacterLimit.js +2 -2
- package/inputs/Input/index.js +1 -1
- package/inputs/Label/__stories__/Default.js +2 -2
- package/inputs/Label/index.js +4 -4
- package/inputs/OtpInput/__stories__/Default.js +2 -2
- package/inputs/OtpInput/index.js +1 -1
- package/inputs/Radio/__stories__/Conditional.js +2 -2
- package/inputs/Radio/__stories__/Default.js +2 -2
- package/inputs/Radio/__stories__/WithDivider.js +2 -2
- package/inputs/Radio/index.d.ts +1 -1
- package/inputs/Radio/index.js +7 -7
- package/inputs/Select/__stories__/Default.js +2 -2
- package/inputs/Select/index.d.ts +1 -1
- package/installation.mdx +12 -16
- package/package.json +5 -5
- package/src/Field/FieldBase.tsx +1 -1
- package/src/Field/FieldBaseContainer.tsx +7 -7
- package/src/Field/FieldConditional.tsx +1 -1
- package/src/Field/index.tsx +1 -1
- package/src/Field/utils.ts +7 -7
- package/src/FieldArray/FieldArray.stories.js +1 -1
- package/src/FieldArray/__stories__/Default.tsx +1 -1
- package/src/FieldArray/__stories__/WithExactLength.tsx +1 -1
- package/src/FieldArray/index.tsx +3 -3
- package/src/FieldObject/index.tsx +6 -6
- package/src/Fieldset/FieldsetWithContext.tsx +3 -3
- package/src/Fieldset/index.tsx +5 -5
- package/src/Fieldset/types.tsx +3 -3
- package/src/FormBuilder/FormBuilder.mdx +25 -37
- package/src/FormBuilder/FormBuilder.stories.js +1 -1
- package/src/FormBuilder/FormBuilder.tsx +4 -4
- package/src/FormBuilder/__stories__/Default.tsx +1 -1
- package/src/MultiplicityField/MultiplicityField.mdx +277 -267
- package/src/MultiplicityField/MultiplicityField.stories.js +1 -1
- package/src/MultiplicityField/__stories__/Default.tsx +1 -1
- package/src/MultiplicityField/__stories__/PreviewDisplay.tsx +14 -14
- package/src/MultiplicityField/__stories__/WithExactLength.tsx +1 -1
- package/src/MultiplicityField/__stories__/WithMaxLength.tsx +1 -1
- package/src/MultiplicityField/__stories__/WithMinAndMaxLength.tsx +1 -1
- package/src/MultiplicityField/__stories__/WithMinLength.tsx +1 -1
- package/src/MultiplicityField/add-objects.tsx +3 -3
- package/src/MultiplicityField/index.tsx +9 -9
- package/src/Questions/Questions.stories.js +1 -1
- package/src/Questions/Questions.tsx +2 -2
- package/src/Questions/Step/ReviewStep.tsx +6 -6
- package/src/Questions/Step/Step.tsx +1 -1
- package/src/Questions/Step/StepArrayReview.tsx +9 -9
- package/src/Questions/Step/StepDescription.tsx +1 -1
- package/src/Questions/Step/StepForm.tsx +6 -6
- package/src/Questions/Step/StepTitle.tsx +8 -3
- package/src/Questions/Step/getAddMoreFields.tsx +1 -1
- package/src/Questions/__snapshots__/index.spec.tsx.snap +5 -5
- package/src/Questions/__stories__/Default.tsx +4 -4
- package/src/Questions/index.mdx +41 -44
- package/src/Questions/index.spec.tsx +1 -1
- package/src/create-simple-form.mdx +258 -237
- package/src/index.mdx +13 -6
- package/src/inputs/AutoComplete/__stories__/Default.tsx +3 -3
- package/src/inputs/AutoComplete/index.tsx +4 -4
- package/src/inputs/Checkboxes/Checkboxes.stories.js +1 -1
- package/src/inputs/Checkboxes/__stories__/Conditional.tsx +2 -2
- package/src/inputs/Checkboxes/__stories__/Default.tsx +1 -1
- package/src/inputs/Checkboxes/__stories__/WithDivider.tsx +2 -2
- package/src/inputs/Checkboxes/index.tsx +4 -4
- package/src/inputs/DateInput/DateInput.stories.js +1 -1
- package/src/inputs/DateInput/__stories__/Default.tsx +1 -1
- package/src/inputs/DateInput/index.tsx +2 -2
- package/src/inputs/FileInput/FileInput.stories.js +1 -1
- package/src/inputs/FileInput/__stories__/Default.tsx +1 -1
- package/src/inputs/FileInput/index.tsx +5 -5
- package/src/inputs/Input/__stories__/AFM.tsx +1 -1
- package/src/inputs/Input/__stories__/Boolean.tsx +1 -1
- package/src/inputs/Input/__stories__/Default.tsx +1 -1
- package/src/inputs/Input/__stories__/IBAN.tsx +1 -1
- package/src/inputs/Input/__stories__/Integer.tsx +1 -1
- package/src/inputs/Input/__stories__/MobilePhone.tsx +1 -1
- package/src/inputs/Input/__stories__/PhoneNumber.tsx +1 -1
- package/src/inputs/Input/__stories__/PostalCode.tsx +1 -1
- package/src/inputs/Input/__stories__/TextWithCharacterLimit.tsx +1 -1
- package/src/inputs/Input/index.tsx +3 -3
- package/src/inputs/Label/Label.stories.js +1 -1
- package/src/inputs/Label/__stories__/Default.tsx +1 -1
- package/src/inputs/Label/index.tsx +4 -4
- package/src/inputs/OtpInput/__stories__/Default.tsx +1 -1
- package/src/inputs/OtpInput/index.tsx +7 -3
- package/src/inputs/Radio/Radio.stories.js +1 -2
- package/src/inputs/Radio/__stories__/Conditional.tsx +3 -3
- package/src/inputs/Radio/__stories__/Default.tsx +1 -1
- package/src/inputs/Radio/__stories__/WithDivider.tsx +2 -2
- package/src/inputs/Radio/index.tsx +6 -6
- package/src/inputs/Select/Select.stories.js +1 -1
- package/src/inputs/Select/__stories__/Default.tsx +1 -1
- package/src/inputs/Select/index.tsx +2 -2
- package/src/installation.mdx +12 -16
- package/src/types.tsx +4 -2
- package/src/utils.ts +1 -1
- package/src/validators/index.ts +10 -10
- package/src/validators/utils/file.ts +1 -1
- package/src/validators/utils/phone.ts +1 -1
- package/src/validators/utils/postal_code.ts +1 -1
- package/types.d.ts +4 -2
- package/validators/index.d.ts +3 -3
- package/validators/index.js +4 -4
- package/validators/utils/file.d.ts +1 -1
- package/validators/utils/phone.d.ts +1 -1
- package/validators/utils/postal_code.d.ts +1 -1
package/Field/FieldBase.js
CHANGED
|
@@ -13,10 +13,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
|
13
13
|
|
|
14
14
|
var _react = _interopRequireDefault(require("react"));
|
|
15
15
|
|
|
16
|
-
var _FieldBaseContainer = _interopRequireDefault(require("@digigov/form/Field/FieldBaseContainer"));
|
|
17
|
-
|
|
18
16
|
var _reactHookForm = require("react-hook-form");
|
|
19
17
|
|
|
18
|
+
var _FieldBaseContainer = _interopRequireDefault(require("@digigov/form/Field/FieldBaseContainer"));
|
|
19
|
+
|
|
20
20
|
var _excluded = ["required", "name", "component", "wrapper", "control", "type", "controlled", "enabled", "editable", "defaultValue", "label", "extra", "layout", "error", "register"];
|
|
21
21
|
|
|
22
22
|
var FieldBase = function FieldBase(props) {
|
|
@@ -11,21 +11,21 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
11
11
|
|
|
12
12
|
var _react = _interopRequireDefault(require("react"));
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var _Label = _interopRequireDefault(require("@digigov/form/inputs/Label"));
|
|
15
15
|
|
|
16
|
-
var
|
|
16
|
+
var _ErrorMessage = _interopRequireDefault(require("@digigov/react-core/ErrorMessage"));
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var _FieldContainer = _interopRequireDefault(require("@digigov/react-core/FieldContainer"));
|
|
19
19
|
|
|
20
|
-
var
|
|
20
|
+
var _Fieldset = _interopRequireDefault(require("@digigov/react-core/Fieldset"));
|
|
21
21
|
|
|
22
22
|
var _FieldsetLegend = _interopRequireDefault(require("@digigov/react-core/FieldsetLegend"));
|
|
23
23
|
|
|
24
|
-
var
|
|
24
|
+
var _Hint = _interopRequireDefault(require("@digigov/react-core/Hint"));
|
|
25
25
|
|
|
26
|
-
var
|
|
26
|
+
var _LabelContainer = _interopRequireDefault(require("@digigov/react-core/LabelContainer"));
|
|
27
27
|
|
|
28
|
-
var
|
|
28
|
+
var _i18n = require("@digigov/ui/i18n");
|
|
29
29
|
|
|
30
30
|
var FieldBaseContainer = function FieldBaseContainer(_ref) {
|
|
31
31
|
var name = _ref.name,
|
|
@@ -45,7 +45,7 @@ var FieldBaseContainer = function FieldBaseContainer(_ref) {
|
|
|
45
45
|
return /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], (0, _extends2["default"])({
|
|
46
46
|
error: !!error
|
|
47
47
|
}, layout), /*#__PURE__*/_react["default"].createElement(_Fieldset["default"], null, /*#__PURE__*/_react["default"].createElement(_FieldsetLegend["default"], {
|
|
48
|
-
size: "
|
|
48
|
+
size: "sm"
|
|
49
49
|
}, label && label.primary), label && label.secondary && /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, t(label.secondary)), error && /*#__PURE__*/_react["default"].createElement(_ErrorMessage["default"], {
|
|
50
50
|
id: "".concat(name, "-error")
|
|
51
51
|
}, t(errorMessage, errorContext)), children));
|
|
@@ -15,10 +15,10 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
15
15
|
|
|
16
16
|
var _reactHookForm = require("react-hook-form");
|
|
17
17
|
|
|
18
|
-
var _utils = require("@digigov/form/Field/utils");
|
|
19
|
-
|
|
20
18
|
var _FieldBase = require("@digigov/form/Field/FieldBase");
|
|
21
19
|
|
|
20
|
+
var _utils = require("@digigov/form/Field/utils");
|
|
21
|
+
|
|
22
22
|
var ChildFieldMemo = /*#__PURE__*/_react["default"].memo(function ChildField(_ref) {
|
|
23
23
|
var dependencies = _ref.dependencies,
|
|
24
24
|
field = _ref.field,
|
package/Field/utils.js
CHANGED
|
@@ -15,21 +15,21 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
15
15
|
|
|
16
16
|
var _react = require("react");
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var _FormContext = require("@digigov/form/FormContext");
|
|
19
19
|
|
|
20
20
|
var _Checkboxes = _interopRequireDefault(require("@digigov/form/inputs/Checkboxes"));
|
|
21
21
|
|
|
22
|
-
var
|
|
23
|
-
|
|
24
|
-
var _Select = _interopRequireDefault(require("@digigov/form/inputs/Select"));
|
|
22
|
+
var _DateInput = _interopRequireDefault(require("@digigov/form/inputs/DateInput"));
|
|
25
23
|
|
|
26
24
|
var _FileInput = _interopRequireDefault(require("@digigov/form/inputs/FileInput"));
|
|
27
25
|
|
|
28
|
-
var
|
|
26
|
+
var _Input = _interopRequireDefault(require("@digigov/form/inputs/Input"));
|
|
29
27
|
|
|
30
28
|
var _OtpInput = _interopRequireDefault(require("@digigov/form/inputs/OtpInput"));
|
|
31
29
|
|
|
32
|
-
var
|
|
30
|
+
var _Radio = _interopRequireDefault(require("@digigov/form/inputs/Radio"));
|
|
31
|
+
|
|
32
|
+
var _Select = _interopRequireDefault(require("@digigov/form/inputs/Select"));
|
|
33
33
|
|
|
34
34
|
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); }
|
|
35
35
|
|
|
@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
15
15
|
|
|
16
16
|
var _form = _interopRequireWildcard(require("@digigov/form"));
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var _Button = require("@digigov/ui/form/Button");
|
|
19
19
|
|
|
20
20
|
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); }
|
|
21
21
|
|
|
@@ -92,7 +92,7 @@ var fields = [{
|
|
|
92
92
|
}
|
|
93
93
|
}];
|
|
94
94
|
|
|
95
|
-
var _ref = /*#__PURE__*/_react["default"].createElement(
|
|
95
|
+
var _ref = /*#__PURE__*/_react["default"].createElement(_Button.Button, null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
|
|
96
96
|
|
|
97
97
|
var Default = function Default() {
|
|
98
98
|
return /*#__PURE__*/_react["default"].createElement(_form["default"], {
|
|
@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
15
15
|
|
|
16
16
|
var _form = _interopRequireWildcard(require("@digigov/form"));
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var _Button = require("@digigov/ui/form/Button");
|
|
19
19
|
|
|
20
20
|
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); }
|
|
21
21
|
|
|
@@ -92,7 +92,7 @@ var fields = [{
|
|
|
92
92
|
}
|
|
93
93
|
}];
|
|
94
94
|
|
|
95
|
-
var _ref = /*#__PURE__*/_react["default"].createElement(
|
|
95
|
+
var _ref = /*#__PURE__*/_react["default"].createElement(_Button.Button, null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
|
|
96
96
|
|
|
97
97
|
var WithExactLength = function WithExactLength() {
|
|
98
98
|
return /*#__PURE__*/_react["default"].createElement(_form["default"], {
|
package/FieldArray/index.js
CHANGED
|
@@ -15,15 +15,15 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
15
15
|
|
|
16
16
|
var _reactHookForm = require("react-hook-form");
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var _FieldBaseContainer = _interopRequireDefault(require("@digigov/form/Field/FieldBaseContainer"));
|
|
19
19
|
|
|
20
|
-
var
|
|
20
|
+
var _FieldObject = _interopRequireDefault(require("@digigov/form/FieldObject"));
|
|
21
21
|
|
|
22
22
|
var _Fieldset = require("@digigov/form/Fieldset");
|
|
23
23
|
|
|
24
24
|
var _Fieldset2 = _interopRequireDefault(require("@digigov/react-core/Fieldset"));
|
|
25
25
|
|
|
26
|
-
var
|
|
26
|
+
var _ui = require("@digigov/ui");
|
|
27
27
|
|
|
28
28
|
var _excluded = ["name", "register", "control", "formState", "error", "layout", "label"];
|
|
29
29
|
|
package/FieldObject/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { FieldProps } from '@digigov/form/Field/types';
|
|
3
2
|
import { ErrorOption, UseFormReturn } from 'react-hook-form';
|
|
3
|
+
import { FieldProps } from '@digigov/form/Field/types';
|
|
4
4
|
import { FieldSpec } from '@digigov/form/types';
|
|
5
5
|
export interface FieldObjectProps extends Omit<FieldProps, 'key'> {
|
|
6
6
|
control: UseFormReturn['control'];
|
package/FieldObject/index.js
CHANGED
|
@@ -13,16 +13,16 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
13
13
|
|
|
14
14
|
var _react = _interopRequireWildcard(require("react"));
|
|
15
15
|
|
|
16
|
-
var _Fieldset = _interopRequireWildcard(require("@digigov/form/Fieldset"));
|
|
17
|
-
|
|
18
|
-
var _i18n = require("@digigov/ui/app/i18n");
|
|
19
|
-
|
|
20
16
|
var _FieldBase = require("@digigov/form/Field/FieldBase");
|
|
21
17
|
|
|
22
18
|
var _utils = require("@digigov/form/Field/utils");
|
|
23
19
|
|
|
20
|
+
var _Fieldset = _interopRequireWildcard(require("@digigov/form/Fieldset"));
|
|
21
|
+
|
|
24
22
|
var _reactCore = require("@digigov/react-core");
|
|
25
23
|
|
|
24
|
+
var _i18n = require("@digigov/ui/i18n");
|
|
25
|
+
|
|
26
26
|
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); }
|
|
27
27
|
|
|
28
28
|
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; }
|
|
@@ -40,7 +40,7 @@ var FieldObject = function FieldObject(_ref) {
|
|
|
40
40
|
t = _useTranslation.t;
|
|
41
41
|
|
|
42
42
|
return /*#__PURE__*/_react["default"].createElement(_Fieldset["default"], null, (label === null || label === void 0 ? void 0 : label.primary) && /*#__PURE__*/_react["default"].createElement(_reactCore.FieldsetLegend, {
|
|
43
|
-
size: "
|
|
43
|
+
size: "sm"
|
|
44
44
|
}, t(label.primary)), (label === null || label === void 0 ? void 0 : label.secondary) && /*#__PURE__*/_react["default"].createElement(_Fieldset.FieldsetCaption, null, t(label.secondary)), extra === null || extra === void 0 ? void 0 : extra.fields.map(function (field) {
|
|
45
45
|
return /*#__PURE__*/_react["default"].createElement(FieldObjectItem, {
|
|
46
46
|
key: "".concat(name, ".").concat(field.key),
|
|
@@ -11,14 +11,14 @@ exports.FieldsetWithContext = void 0;
|
|
|
11
11
|
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
|
|
14
|
-
var _FormContext = require("@digigov/form/FormContext");
|
|
15
|
-
|
|
16
14
|
var _Field = _interopRequireDefault(require("@digigov/form/Field"));
|
|
17
15
|
|
|
18
|
-
var _i18n = require("@digigov/ui/app/i18n");
|
|
19
|
-
|
|
20
16
|
var _Fieldset = require("@digigov/form/Fieldset/");
|
|
21
17
|
|
|
18
|
+
var _FormContext = require("@digigov/form/FormContext");
|
|
19
|
+
|
|
20
|
+
var _i18n = require("@digigov/ui/i18n");
|
|
21
|
+
|
|
22
22
|
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); }
|
|
23
23
|
|
|
24
24
|
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; }
|
package/Fieldset/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import Fieldset from '@digigov/react-core/Fieldset';
|
|
3
2
|
import { FieldsetLabelProps, FieldsetCaptionProps, FieldsetBodyProps } from '@digigov/form/Fieldset/types';
|
|
3
|
+
import Fieldset from '@digigov/react-core/Fieldset';
|
|
4
4
|
export declare const FieldsetLabel: React.FC<FieldsetLabelProps>;
|
|
5
5
|
export declare const FieldsetCaption: React.FC<FieldsetCaptionProps>;
|
|
6
6
|
export declare const FieldsetBody: React.FC<FieldsetBodyProps>;
|
package/Fieldset/index.js
CHANGED
|
@@ -19,14 +19,14 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
|
19
19
|
|
|
20
20
|
var _react = _interopRequireDefault(require("react"));
|
|
21
21
|
|
|
22
|
-
var _Grid = _interopRequireDefault(require("@digigov/ui/layouts/Grid"));
|
|
23
|
-
|
|
24
22
|
var _Fieldset = _interopRequireDefault(require("@digigov/react-core/Fieldset"));
|
|
25
23
|
|
|
26
24
|
var _FieldsetLegend = _interopRequireDefault(require("@digigov/react-core/FieldsetLegend"));
|
|
27
25
|
|
|
28
26
|
var _Hint = _interopRequireDefault(require("@digigov/react-core/Hint"));
|
|
29
27
|
|
|
28
|
+
var _Grid = _interopRequireDefault(require("@digigov/ui/layouts/Grid"));
|
|
29
|
+
|
|
30
30
|
var _NormalText = _interopRequireDefault(require("@digigov/ui/typography/NormalText"));
|
|
31
31
|
|
|
32
32
|
var _excluded = ["children"],
|
package/Fieldset/types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { FieldsetLegendProps } from
|
|
2
|
-
import { HintProps } from
|
|
1
|
+
import { FieldsetLegendProps } from '@digigov/react-core/FieldsetLegend';
|
|
2
|
+
import { HintProps } from '@digigov/react-core/Hint';
|
|
3
3
|
export interface FieldsetLabelProps extends FieldsetLegendProps {
|
|
4
4
|
}
|
|
5
5
|
export interface FieldsetCaptionProps extends HintProps {
|
|
@@ -19,16 +19,16 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
19
19
|
|
|
20
20
|
var _reactHookForm = require("react-hook-form");
|
|
21
21
|
|
|
22
|
-
var
|
|
23
|
-
|
|
24
|
-
var _validators = require("@digigov/form/validators");
|
|
22
|
+
var _Field = _interopRequireDefault(require("@digigov/form/Field"));
|
|
25
23
|
|
|
26
24
|
var _Fieldset = _interopRequireDefault(require("@digigov/form/Fieldset"));
|
|
27
25
|
|
|
28
|
-
var _Field = _interopRequireDefault(require("@digigov/form/Field"));
|
|
29
|
-
|
|
30
26
|
var _FormContext = require("@digigov/form/FormContext");
|
|
31
27
|
|
|
28
|
+
var _utils = require("@digigov/form/utils");
|
|
29
|
+
|
|
30
|
+
var _validators = require("@digigov/form/validators");
|
|
31
|
+
|
|
32
32
|
var _Form = require("@digigov/react-core/Form");
|
|
33
33
|
|
|
34
34
|
var _excluded = ["onSubmit", "children", "registerField", "fieldsMap", "fieldsetsMap", "resolver", "mode", "initial", "reValidateMode", "shouldFocusError", "criteriaMode", "componentRegistry", "grid"],
|
|
@@ -4,23 +4,25 @@ title: FormBuilder
|
|
|
4
4
|
sidebar_label: FormBuilder
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
-
`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
|
|
7
|
+
`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.
|
|
8
8
|
|
|
9
|
-
`stepForm` component:
|
|
9
|
+
`stepForm` component:
|
|
10
10
|
|
|
11
|
-
<Story
|
|
11
|
+
<Story
|
|
12
|
+
packageName="@digigov/form"
|
|
13
|
+
component="FormBuilder"
|
|
14
|
+
story="Default.tsx"
|
|
15
|
+
/>
|
|
12
16
|
|
|
13
17
|
### Importing and using FormBuilder Component
|
|
14
18
|
|
|
15
19
|
To import `FormBuilder` component simply import it from `'@digigov/form`.
|
|
16
20
|
|
|
17
21
|
```javascript
|
|
18
|
-
|
|
19
|
-
import {FormBuilder} from '@digigov/form';
|
|
20
|
-
|
|
22
|
+
import { FormBuilder } from '@digigov/form';
|
|
21
23
|
```
|
|
22
|
-
Now you can use the current component inisde of your component
|
|
23
24
|
|
|
25
|
+
Now you can use the current component inisde of your component
|
|
24
26
|
|
|
25
27
|
```javascript
|
|
26
28
|
import BasicLayout, {
|
|
@@ -59,33 +61,29 @@ export default function MyComponent({ props }) {
|
|
|
59
61
|
|
|
60
62
|
`FormBuilder` component accepts several arguments as input props.
|
|
61
63
|
|
|
62
|
-
| Name
|
|
63
|
-
|
|
|
64
|
-
| children
|
|
65
|
-
| steps
|
|
66
|
-
| name
|
|
67
|
-
| title
|
|
68
|
-
| fields
|
|
69
|
-
| key
|
|
70
|
-
| label
|
|
71
|
-
| primary | string
|
|
72
|
-
| required
|
|
73
|
-
| submitButton
|
|
74
|
-
| type
|
|
75
|
-
|
|
76
|
-
|
|
64
|
+
| Name | Type | Default | Description |
|
|
65
|
+
| ------------ | :-----: | :-----: | :------------------------------------------------------------------------------------: |
|
|
66
|
+
| children | node | | allow you to pass components as data. |
|
|
67
|
+
| steps | array | | an array which includes each step-form format data |
|
|
68
|
+
| name | string | | the name of the step. |
|
|
69
|
+
| title | string | | the title from each step |
|
|
70
|
+
| fields | array | | an array of object fields which they describe each field for each step-form |
|
|
71
|
+
| key | string | | the key value of the input field |
|
|
72
|
+
| label | object | | an object prop which describes the label primary and the secondary name of the field |
|
|
73
|
+
| primary | string | | the name of te field |
|
|
74
|
+
| required | boolean | false | describes the validation of the field |
|
|
75
|
+
| submitButton | boolean | false | if true, it creates a button to continue to the next step |
|
|
76
|
+
| type | string | | describes the format of each field, e.x `type:'string'` is a simple input format field |
|
|
77
77
|
|
|
78
78
|
### Field types
|
|
79
79
|
|
|
80
80
|
Below are demostrated some examples for each type of field
|
|
81
81
|
|
|
82
|
-
|
|
83
82
|
### FormBuilder implementation
|
|
84
83
|
|
|
85
84
|
The examples above are implemented by using the code below
|
|
86
85
|
|
|
87
86
|
```javascript
|
|
88
|
-
|
|
89
87
|
import React, { useState } from 'react';
|
|
90
88
|
import BasicLayout, {
|
|
91
89
|
Top,
|
|
@@ -96,15 +94,15 @@ import BasicLayout, {
|
|
|
96
94
|
import Header, { HeaderTitle } from '@digigov/ui/app/Header';
|
|
97
95
|
import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
|
|
98
96
|
import GovGRFooter from '@digigov/ui/govgr/Footer';
|
|
99
|
-
import Button from '@digigov/ui/
|
|
97
|
+
import Button from '@digigov/ui/form/Button';
|
|
100
98
|
import PageTitle, {
|
|
101
99
|
PageTitleSection,
|
|
102
100
|
PageTitleCaption,
|
|
103
101
|
PageTitleHeading,
|
|
104
102
|
} from '@digigov/ui/app/PageTitle';
|
|
105
|
-
import BackButton from '@digigov/ui/
|
|
103
|
+
import BackButton from '@digigov/ui/form/Button/BackButton';
|
|
106
104
|
import FormBuilder, { Fieldset, FieldsetLabel, Field } from '@digigov/form';
|
|
107
|
-
import { useTranslation } from '@digigov/ui/
|
|
105
|
+
import { useTranslation } from '@digigov/ui/i18n';
|
|
108
106
|
|
|
109
107
|
const FIELDS = [
|
|
110
108
|
{
|
|
@@ -258,14 +256,4 @@ export default function Index() {
|
|
|
258
256
|
</BasicLayout>
|
|
259
257
|
);
|
|
260
258
|
}
|
|
261
|
-
|
|
262
259
|
```
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
@@ -13,7 +13,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
13
13
|
|
|
14
14
|
var _form = _interopRequireWildcard(require("@digigov/form"));
|
|
15
15
|
|
|
16
|
-
var
|
|
16
|
+
var _Button = require("@digigov/ui/form/Button");
|
|
17
17
|
|
|
18
18
|
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); }
|
|
19
19
|
|
|
@@ -23,7 +23,7 @@ var initialValues = {
|
|
|
23
23
|
'business-title': null
|
|
24
24
|
};
|
|
25
25
|
|
|
26
|
-
var _ref = /*#__PURE__*/_react["default"].createElement(
|
|
26
|
+
var _ref = /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
27
27
|
type: "submit"
|
|
28
28
|
}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
|
|
29
29
|
|