@digigov/form 0.13.2 → 1.0.0-7c9716da
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/es/index.mdx
CHANGED
|
@@ -4,12 +4,19 @@ title: Digigov Form
|
|
|
4
4
|
sidebar_label: Introduction to Digigov Form
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
-
import LeadText from
|
|
7
|
+
import LeadText from '@site/src/components/LeadText';
|
|
8
8
|
|
|
9
|
-
<LeadText>
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
<LeadText>
|
|
10
|
+
Digigov Form is an off-the-shelf solution for managing web forms using
|
|
11
|
+
Reactjs. It supports flexible and multi-step forms and easy-to-use validation.
|
|
12
|
+
This page will guide you through everything you need to create accessible and
|
|
13
|
+
dynamic forms that can handle all sorts of user inputs.
|
|
14
|
+
</LeadText>
|
|
15
|
+
|
|
16
|
+
<img
|
|
17
|
+
src="/img/form.svg"
|
|
18
|
+
style={{ margin: '3rem 0', maxWidth: '450px', width: '60%' }}
|
|
19
|
+
/>
|
|
13
20
|
|
|
14
21
|
## Before we start
|
|
15
22
|
|
|
@@ -22,7 +29,7 @@ Finally, we also offer an easy way to spread your forms across multiple pages or
|
|
|
22
29
|
steps and still be able to gather data in a single serialized object that you
|
|
23
30
|
will be able to save via an JSON API.
|
|
24
31
|
|
|
25
|
-
## Overview
|
|
32
|
+
## Overview
|
|
26
33
|
|
|
27
34
|
The `@digigov/form` NPM package contains React components and validators. The
|
|
28
35
|
library uses basic, semantically correct HTML5 input fields.
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React, { Suspense } from 'react';
|
|
2
|
-
import FormBuilder from '@digigov/form/FormBuilder';
|
|
3
2
|
import { Field } from '@digigov/form/Field';
|
|
4
|
-
import
|
|
5
|
-
import { results } from '@digigov/ui/
|
|
3
|
+
import FormBuilder from '@digigov/form/FormBuilder';
|
|
4
|
+
import { results } from '@digigov/ui/form/AutoComplete/utils';
|
|
5
|
+
import Button from '@digigov/ui/form/Button';
|
|
6
6
|
var fields = [{
|
|
7
7
|
key: 'autocomplete',
|
|
8
8
|
label: {
|
|
@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["name", "extra", "onChange", "value"];
|
|
4
4
|
import React, { useCallback } from 'react';
|
|
5
|
-
import UIAutoComplete from '@digigov/ui/admin/AutoComplete';
|
|
6
5
|
import { Hint } from '@digigov/react-core';
|
|
6
|
+
import UIAutoComplete from '@digigov/ui/form/AutoComplete';
|
|
7
7
|
export var AutoComplete = function AutoComplete(_ref) {
|
|
8
8
|
var name = _ref.name,
|
|
9
9
|
options = _ref.extra.options,
|
|
@@ -4,12 +4,12 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
|
|
|
4
4
|
var _excluded = ["name", "onChange", "value", "extra", "disabled"],
|
|
5
5
|
_excluded2 = ["label", "value", "show", "disabled", "selected"];
|
|
6
6
|
import React, { useState } from 'react';
|
|
7
|
-
import {
|
|
7
|
+
import { Field } from '@digigov/form';
|
|
8
|
+
import { CheckboxConditional } from '@digigov/react-core';
|
|
8
9
|
import CoreCheckboxes from '@digigov/react-core/Checkbox';
|
|
9
10
|
import CheckboxItem from '@digigov/react-core/CheckboxItem';
|
|
10
11
|
import Hint from '@digigov/react-core/Hint';
|
|
11
|
-
import {
|
|
12
|
-
import { CheckboxConditional } from '@digigov/react-core';
|
|
12
|
+
import { useTranslation } from '@digigov/ui/i18n';
|
|
13
13
|
export var Checkboxes = function Checkboxes(_ref) {
|
|
14
14
|
var name = _ref.name,
|
|
15
15
|
onChange = _ref.onChange,
|
|
@@ -5,9 +5,9 @@ var _excluded = ["label"],
|
|
|
5
5
|
import React, { useMemo, useState } from 'react';
|
|
6
6
|
import dayjs from 'dayjs';
|
|
7
7
|
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
|
8
|
-
import { useTranslation } from '@digigov/ui/app/i18n';
|
|
9
8
|
import DateInputContainer from '@digigov/react-core/DateInputContainer';
|
|
10
9
|
import CoreDateInputItem from '@digigov/react-core/DateInputItem';
|
|
10
|
+
import { useTranslation } from '@digigov/ui/i18n';
|
|
11
11
|
dayjs.extend(customParseFormat);
|
|
12
12
|
|
|
13
13
|
function useDate(value, onChange) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import FormBuilder, { Field } from '@digigov/form';
|
|
3
|
-
import { Button } from '@digigov/ui/
|
|
3
|
+
import { Button } from '@digigov/ui/form/Button';
|
|
4
4
|
|
|
5
5
|
var _ref = /*#__PURE__*/React.createElement(Button, null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
|
|
6
6
|
|
|
@@ -4,12 +4,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
5
5
|
var _excluded = ["name", "extra", "disabled", "reset", "onChange"];
|
|
6
6
|
import React, { useState } from 'react';
|
|
7
|
-
import { useTranslation } from '@digigov/ui/app/i18n';
|
|
8
|
-
import Paragraph from '@digigov/ui/typography/Paragraph';
|
|
9
|
-
import CoreHint from '@digigov/react-core/Hint';
|
|
10
|
-
import Button from '@digigov/ui/core/Button';
|
|
11
|
-
import FileUploadContainer from '@digigov/react-core/FileUploadContainer';
|
|
12
7
|
import FileUpload from '@digigov/react-core/FileUpload';
|
|
8
|
+
import FileUploadContainer from '@digigov/react-core/FileUploadContainer';
|
|
9
|
+
import CoreHint from '@digigov/react-core/Hint';
|
|
10
|
+
import Button from '@digigov/ui/form/Button';
|
|
11
|
+
import { useTranslation } from '@digigov/ui/i18n';
|
|
12
|
+
import Paragraph from '@digigov/ui/typography/Paragraph';
|
|
13
13
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
14
14
|
export var FileInput = /*#__PURE__*/React.forwardRef(function FileInput(_ref, ref) {
|
|
15
15
|
var name = _ref.name,
|
package/es/inputs/Input/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import TextInput from '@digigov/react-core/TextInput';
|
|
|
6
6
|
import TextArea from '@digigov/react-core/TextArea';
|
|
7
7
|
import { Hint } from '@digigov/react-core';
|
|
8
8
|
import { useWatch } from 'react-hook-form';
|
|
9
|
-
import { useTranslation } from '@digigov/ui/
|
|
9
|
+
import { useTranslation } from '@digigov/ui/i18n';
|
|
10
10
|
var TYPES_MAP = {
|
|
11
11
|
string: 'text',
|
|
12
12
|
"int": 'text',
|
package/es/inputs/Label/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import LabelTitle from '@digigov/react-core/LabelTitle';
|
|
3
2
|
import Hint from '@digigov/react-core/Hint';
|
|
4
|
-
import
|
|
3
|
+
import LabelTitle from '@digigov/react-core/LabelTitle';
|
|
4
|
+
import { useTranslation } from '@digigov/ui/i18n';
|
|
5
5
|
export var Label = function Label(_ref) {
|
|
6
6
|
var className = _ref.className,
|
|
7
7
|
label = _ref.label,
|
|
@@ -16,7 +16,7 @@ export var Label = function Label(_ref) {
|
|
|
16
16
|
|
|
17
17
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelTitle, {
|
|
18
18
|
className: className,
|
|
19
|
-
size: "
|
|
19
|
+
size: "sm"
|
|
20
20
|
}, label && label.primary && t(label.primary) || value), label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(label.secondary)));
|
|
21
21
|
};
|
|
22
22
|
Label.defaultProps = {
|
|
@@ -4,7 +4,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
|
4
4
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
5
5
|
var _excluded = ["name", "maxLength"];
|
|
6
6
|
import React, { useState, useCallback } from 'react';
|
|
7
|
-
import SingleCharacterInputContainer, { SingleCharacterInputItem } from '@digigov/ui/
|
|
7
|
+
import SingleCharacterInputContainer, { SingleCharacterInputItem } from '@digigov/ui/form/SingleCharacterInputContainer';
|
|
8
8
|
export var RE_DIGIT = new RegExp(/^\d+$/);
|
|
9
9
|
export var REMOVE_SPACES = new RegExp(/\s+/g);
|
|
10
10
|
|
package/es/inputs/Radio/index.js
CHANGED
|
@@ -3,13 +3,13 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
|
|
|
3
3
|
var _excluded = ["name", "control", "register", "extra", "disabled"],
|
|
4
4
|
_excluded2 = ["label", "value", "show", "disabled", "selected"];
|
|
5
5
|
import React from 'react';
|
|
6
|
-
import RadioContainer from '@digigov/react-core/RadioContainer';
|
|
7
|
-
import RadioItem from '@digigov/react-core/RadioItem';
|
|
8
|
-
import { useTranslation } from '@digigov/ui/app/i18n';
|
|
9
6
|
import { useWatch } from 'react-hook-form';
|
|
10
|
-
import Hint from '@digigov/react-core/Hint';
|
|
11
7
|
import { Field } from '@digigov/form';
|
|
12
8
|
import { RadioConditional } from '@digigov/react-core';
|
|
9
|
+
import Hint from '@digigov/react-core/Hint';
|
|
10
|
+
import RadioContainer from '@digigov/react-core/RadioContainer';
|
|
11
|
+
import RadioItem from '@digigov/react-core/RadioItem';
|
|
12
|
+
import { useTranslation } from '@digigov/ui/i18n';
|
|
13
13
|
export var RadioButtonsGroup = function RadioButtonsGroup(_ref) {
|
|
14
14
|
var name = _ref.name,
|
|
15
15
|
control = _ref.control,
|
package/es/installation.mdx
CHANGED
|
@@ -7,39 +7,35 @@ sidebar_label: Installation
|
|
|
7
7
|
import Tabs from '@theme/Tabs';
|
|
8
8
|
import TabItem from '@theme/TabItem';
|
|
9
9
|
import CodeBlock from '@theme/CodeBlock';
|
|
10
|
-
import LeadText from
|
|
10
|
+
import LeadText from '@site/src/components/LeadText';
|
|
11
11
|
|
|
12
12
|
<LeadText>
|
|
13
|
-
This page will help you install Digigov Form depending on the framework that
|
|
14
|
-
use and the application architecture.
|
|
13
|
+
This page will help you install Digigov Form depending on the framework that
|
|
14
|
+
you use and the application architecture.
|
|
15
15
|
</LeadText>
|
|
16
16
|
|
|
17
17
|
We assume that your stack uses some of the following tools.
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
- React v16 or later
|
|
20
|
+
- Nextjs or create-react-app to run your code
|
|
21
|
+
- Digigov CSS, as a CSS import or as Tailwind plugin
|
|
22
22
|
|
|
23
23
|
## Using create-digigov-app
|
|
24
24
|
|
|
25
25
|
We highly recommend using `create-digigov-app`. Our scaffolder was created to save development teams time and effort. This way
|
|
26
26
|
everything you need is already configured.
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
If you choose to use our scaffolder tool, make sure you follow this
|
|
29
29
|
[guide](/docs/building-apps) first, if you haven't already done so.
|
|
30
30
|
|
|
31
31
|
Then you just install the `@digigov/form` package from NPM.
|
|
32
32
|
|
|
33
33
|
<Tabs>
|
|
34
34
|
<TabItem value="npm" label="NPM" default>
|
|
35
|
-
<CodeBlock>
|
|
36
|
-
npm install @digigov/form --save
|
|
37
|
-
</CodeBlock>
|
|
35
|
+
<CodeBlock>npm install @digigov/form --save</CodeBlock>
|
|
38
36
|
</TabItem>
|
|
39
37
|
<TabItem value="yarn" label="Yarn">
|
|
40
|
-
<CodeBlock>
|
|
41
|
-
yarn add @digigov/form
|
|
42
|
-
</CodeBlock>
|
|
38
|
+
<CodeBlock>yarn add @digigov/form</CodeBlock>
|
|
43
39
|
</TabItem>
|
|
44
40
|
</Tabs>
|
|
45
41
|
|
|
@@ -48,9 +44,9 @@ Then you just install the `@digigov/form` package from NPM.
|
|
|
48
44
|
This method is not recommended and you should proceed at your own risk. For
|
|
49
45
|
Digigov Form to work properly, it is essential to do some configuration.
|
|
50
46
|
|
|
51
|
-
|
|
47
|
+
- A working React application, ideally [Nextjs](https://nextjs.org/) or [Create
|
|
52
48
|
React App](https://create-react-app.dev/)
|
|
53
|
-
|
|
49
|
+
- You should already have [installed and configured Digigov
|
|
54
50
|
CSS](https://guide.services.gov.gr/docs/installation)
|
|
55
51
|
|
|
56
52
|
If you meet these prerequisites, now it is time to install the dependencies.
|
|
@@ -69,4 +65,4 @@ and install `@digigov/form` and it's dependencies.
|
|
|
69
65
|
yarn add @digigov/form @digigov/ui @digigov/react-core
|
|
70
66
|
</CodeBlock>
|
|
71
67
|
</TabItem>
|
|
72
|
-
</Tabs>
|
|
68
|
+
</Tabs>
|
package/es/utils.js
CHANGED
|
@@ -6,11 +6,11 @@ function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyri
|
|
|
6
6
|
|
|
7
7
|
import { validateFieldsNatively } from '@hookform/resolvers';
|
|
8
8
|
import { appendErrors } from 'react-hook-form';
|
|
9
|
+
|
|
9
10
|
/**
|
|
10
11
|
* Why `path!` ? because it could be `undefined` in some case
|
|
11
12
|
* https://github.com/jquense/yup#validationerrorerrors-string--arraystring-value-any-path-string
|
|
12
13
|
*/
|
|
13
|
-
|
|
14
14
|
var parseErrorSchema = function parseErrorSchema(error, validateAllFieldCriteria) {
|
|
15
15
|
return (error.inner || []).reduce(function (previous, error) {
|
|
16
16
|
var _error$path;
|
package/es/validators/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import _typeof from "@babel/runtime/helpers/typeof";
|
|
2
|
-
import * as yup from 'yup';
|
|
3
2
|
import { useMemo } from 'react';
|
|
4
3
|
import dayjs from 'dayjs';
|
|
5
4
|
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
|
5
|
+
import * as yup from 'yup';
|
|
6
6
|
import { getYupObjectShape, AFM_VALIDATOR, FILE_MAX_SIZE_VALIDATOR, IBAN_VALIDATOR, OTP_VALIDATOR, MOBILE_PHONE_VALIDATOR, PHONE_NUMBER_VALIDATOR, TEXT_LIMIT_VALIDATOR, POSTALCODE_VALIDATOR, UUID4_VALIDATOR } from '@digigov/form/validators/utils';
|
|
7
|
-
import { NUMBER_VALIDATOR } from '@digigov/form/validators/utils/number';
|
|
8
7
|
import { INT_VALIDATOR } from '@digigov/form/validators/utils/int';
|
|
8
|
+
import { NUMBER_VALIDATOR } from '@digigov/form/validators/utils/number';
|
|
9
9
|
dayjs.extend(customParseFormat);
|
|
10
10
|
var VALID_DATE_FORMATS = ['DD/MM/YYYY'];
|
|
11
11
|
var DATE_CACHE = {};
|
package/esm/Field/FieldBase.js
CHANGED
|
@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["required", "name", "component", "wrapper", "control", "type", "controlled", "enabled", "editable", "defaultValue", "label", "extra", "layout", "error", "register"];
|
|
4
4
|
import React from 'react';
|
|
5
|
-
import FieldBaseContainer from '@digigov/form/Field/FieldBaseContainer';
|
|
6
5
|
import { Controller } from 'react-hook-form';
|
|
6
|
+
import FieldBaseContainer from '@digigov/form/Field/FieldBaseContainer';
|
|
7
7
|
export var FieldBase = function FieldBase(props) {
|
|
8
8
|
var required = props.required,
|
|
9
9
|
name = props.name,
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import React from 'react';
|
|
3
|
+
import Label from '@digigov/form/inputs/Label';
|
|
4
|
+
import ErrorMessage from '@digigov/react-core/ErrorMessage';
|
|
3
5
|
import FieldContainer from '@digigov/react-core/FieldContainer';
|
|
4
|
-
import LabelContainer from '@digigov/react-core/LabelContainer';
|
|
5
6
|
import CoreFieldset from '@digigov/react-core/Fieldset';
|
|
6
|
-
import Hint from '@digigov/react-core/Hint';
|
|
7
7
|
import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
8
|
+
import Hint from '@digigov/react-core/Hint';
|
|
9
|
+
import LabelContainer from '@digigov/react-core/LabelContainer';
|
|
10
|
+
import { useTranslation } from '@digigov/ui/i18n';
|
|
11
11
|
export var FieldBaseContainer = function FieldBaseContainer(_ref) {
|
|
12
12
|
var name = _ref.name,
|
|
13
13
|
wrapper = _ref.wrapper,
|
|
@@ -26,7 +26,7 @@ export var FieldBaseContainer = function FieldBaseContainer(_ref) {
|
|
|
26
26
|
return /*#__PURE__*/React.createElement(FieldContainer, _extends({
|
|
27
27
|
error: !!error
|
|
28
28
|
}, layout), /*#__PURE__*/React.createElement(CoreFieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
|
|
29
|
-
size: "
|
|
29
|
+
size: "sm"
|
|
30
30
|
}, label && label.primary), label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(label.secondary)), error && /*#__PURE__*/React.createElement(ErrorMessage, {
|
|
31
31
|
id: "".concat(name, "-error")
|
|
32
32
|
}, t(errorMessage, errorContext)), children));
|
|
@@ -2,8 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { useWatch } from 'react-hook-form';
|
|
5
|
-
import { evaluateFieldWithConditions } from '@digigov/form/Field/utils';
|
|
6
5
|
import { FieldBase } from '@digigov/form/Field/FieldBase';
|
|
6
|
+
import { evaluateFieldWithConditions } from '@digigov/form/Field/utils';
|
|
7
7
|
var ChildFieldMemo = /*#__PURE__*/React.memo(function ChildField(_ref) {
|
|
8
8
|
var dependencies = _ref.dependencies,
|
|
9
9
|
field = _ref.field,
|
package/esm/Field/utils.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import { lazy, useContext, useMemo } from 'react';
|
|
3
|
-
import
|
|
3
|
+
import { FormContext } from '@digigov/form/FormContext';
|
|
4
4
|
import Checkboxes from '@digigov/form/inputs/Checkboxes';
|
|
5
|
-
import Radio from '@digigov/form/inputs/Radio';
|
|
6
|
-
import Select from '@digigov/form/inputs/Select';
|
|
7
|
-
import FileInput from '@digigov/form/inputs/FileInput';
|
|
8
5
|
import DateInput from '@digigov/form/inputs/DateInput';
|
|
6
|
+
import FileInput from '@digigov/form/inputs/FileInput';
|
|
7
|
+
import Input from '@digigov/form/inputs/Input';
|
|
9
8
|
import OtpInput from '@digigov/form/inputs/OtpInput';
|
|
10
|
-
import
|
|
9
|
+
import Radio from '@digigov/form/inputs/Radio';
|
|
10
|
+
import Select from '@digigov/form/inputs/Select';
|
|
11
11
|
var AutoComplete = /*#__PURE__*/lazy(function () {
|
|
12
12
|
return import('@digigov/form/inputs/AutoComplete');
|
|
13
13
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import FormBuilder, { Field } from '@digigov/form';
|
|
4
|
-
import { Button } from '@digigov/ui/
|
|
4
|
+
import { Button } from '@digigov/ui/form/Button';
|
|
5
5
|
var fields = [{
|
|
6
6
|
key: 'string',
|
|
7
7
|
type: 'string',
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import FormBuilder, { Field } from '@digigov/form';
|
|
4
|
-
import { Button } from '@digigov/ui/
|
|
4
|
+
import { Button } from '@digigov/ui/form/Button';
|
|
5
5
|
var fields = [{
|
|
6
6
|
key: 'string',
|
|
7
7
|
type: 'string',
|
package/esm/FieldArray/index.js
CHANGED
|
@@ -3,11 +3,11 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
|
|
|
3
3
|
var _excluded = ["name", "register", "control", "formState", "error", "layout", "label"];
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { useFieldArray } from 'react-hook-form';
|
|
6
|
+
import FieldContainer from '@digigov/form/Field/FieldBaseContainer';
|
|
6
7
|
import FieldObject from '@digigov/form/FieldObject';
|
|
7
|
-
import { Button, Card, Hint } from '@digigov/ui';
|
|
8
8
|
import { FieldsetLabel } from '@digigov/form/Fieldset';
|
|
9
9
|
import Fieldset from '@digigov/react-core/Fieldset';
|
|
10
|
-
import
|
|
10
|
+
import { Button, Card, Hint } from '@digigov/ui';
|
|
11
11
|
export var FieldArray = function FieldArray(_ref) {
|
|
12
12
|
var _customField$extra, _customField$extra$la, _customField$extra4, _customField$extra4$l;
|
|
13
13
|
|
package/esm/FieldObject/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import React, { useMemo } from 'react';
|
|
3
|
-
import Fieldset, { FieldsetCaption } from '@digigov/form/Fieldset';
|
|
4
|
-
import { useTranslation } from '@digigov/ui/app/i18n';
|
|
5
3
|
import { FieldBase } from '@digigov/form/Field/FieldBase';
|
|
6
4
|
import { calculateField } from '@digigov/form/Field/utils';
|
|
5
|
+
import Fieldset, { FieldsetCaption } from '@digigov/form/Fieldset';
|
|
7
6
|
import { FieldsetLegend } from '@digigov/react-core';
|
|
7
|
+
import { useTranslation } from '@digigov/ui/i18n';
|
|
8
8
|
export var FieldObject = function FieldObject(_ref) {
|
|
9
9
|
var name = _ref.name,
|
|
10
10
|
label = _ref.label,
|
|
@@ -18,7 +18,7 @@ export var FieldObject = function FieldObject(_ref) {
|
|
|
18
18
|
t = _useTranslation.t;
|
|
19
19
|
|
|
20
20
|
return /*#__PURE__*/React.createElement(Fieldset, null, (label === null || label === void 0 ? void 0 : label.primary) && /*#__PURE__*/React.createElement(FieldsetLegend, {
|
|
21
|
-
size: "
|
|
21
|
+
size: "sm"
|
|
22
22
|
}, t(label.primary)), (label === null || label === void 0 ? void 0 : label.secondary) && /*#__PURE__*/React.createElement(FieldsetCaption, null, t(label.secondary)), extra === null || extra === void 0 ? void 0 : extra.fields.map(function (field) {
|
|
23
23
|
return /*#__PURE__*/React.createElement(FieldObjectItem, {
|
|
24
24
|
key: "".concat(name, ".").concat(field.key),
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React, { useContext, useMemo } from 'react';
|
|
2
|
-
import { FormContext } from '@digigov/form/FormContext';
|
|
3
2
|
import Field from '@digigov/form/Field';
|
|
4
|
-
import { useTranslation } from '@digigov/ui/app/i18n';
|
|
5
3
|
import { Fieldset, FieldsetLabel, FieldsetCaption, FieldsetBody } from '@digigov/form/Fieldset/';
|
|
4
|
+
import { FormContext } from '@digigov/form/FormContext';
|
|
5
|
+
import { useTranslation } from '@digigov/ui/i18n';
|
|
6
6
|
export var FieldsetWithContext = function FieldsetWithContext(_ref) {
|
|
7
7
|
var name = _ref.name;
|
|
8
8
|
|
package/esm/Fieldset/index.js
CHANGED
|
@@ -3,10 +3,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
|
|
|
3
3
|
var _excluded = ["children"],
|
|
4
4
|
_excluded2 = ["children"];
|
|
5
5
|
import React from 'react';
|
|
6
|
-
import Grid from '@digigov/ui/layouts/Grid';
|
|
7
6
|
import Fieldset from '@digigov/react-core/Fieldset';
|
|
8
7
|
import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
|
|
9
8
|
import Hint from '@digigov/react-core/Hint';
|
|
9
|
+
import Grid from '@digigov/ui/layouts/Grid';
|
|
10
10
|
import NormalText from '@digigov/ui/typography/NormalText';
|
|
11
11
|
export var FieldsetLabel = function FieldsetLabel(_ref) {
|
|
12
12
|
var children = _ref.children,
|
|
@@ -7,11 +7,11 @@ var _excluded = ["onSubmit", "children", "registerField", "fieldsMap", "fieldset
|
|
|
7
7
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
8
8
|
import React, { useCallback, useRef } from 'react';
|
|
9
9
|
import { useForm } from 'react-hook-form';
|
|
10
|
-
import { yupResolver } from '@digigov/form/utils';
|
|
11
|
-
import { useValidationSchema } from '@digigov/form/validators';
|
|
12
|
-
import Fieldset from '@digigov/form/Fieldset';
|
|
13
10
|
import Field from '@digigov/form/Field';
|
|
11
|
+
import Fieldset from '@digigov/form/Fieldset';
|
|
14
12
|
import { FormContext } from '@digigov/form/FormContext';
|
|
13
|
+
import { yupResolver } from '@digigov/form/utils';
|
|
14
|
+
import { useValidationSchema } from '@digigov/form/validators';
|
|
15
15
|
import { Form } from '@digigov/react-core/Form';
|
|
16
16
|
export var FormBase = /*#__PURE__*/React.forwardRef(function FormBase(_ref, ref) {
|
|
17
17
|
var onSubmit = _ref.onSubmit,
|