@dhis2/ui-forms 9.11.0 → 9.11.1-beta.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (192) hide show
  1. package/build/cjs/CheckboxFieldFF/{CheckboxFieldFF.stories.e2e.js → CheckboxFieldFF.e2e.stories.js} +22 -15
  2. package/build/cjs/CheckboxFieldFF/CheckboxFieldFF.js +2 -12
  3. package/build/cjs/CheckboxFieldFF/{CheckboxFieldFF.stories.js → CheckboxFieldFF.prod.stories.js} +29 -24
  4. package/build/cjs/CheckboxFieldFF/features/can_toggle_a_boolean/index.js +0 -1
  5. package/build/cjs/CheckboxFieldFF/features/can_toggle_a_value/index.js +0 -1
  6. package/build/cjs/CheckboxFieldFF/features/common/index.js +0 -1
  7. package/build/cjs/CheckboxFieldFF/features/displays_error/index.js +0 -2
  8. package/build/cjs/FieldGroupFF/FieldGroupFF.js +1 -10
  9. package/build/cjs/FieldGroupFF/{FieldGroupFF.stories.js → FieldGroupFF.prod.stories.js} +11 -12
  10. package/build/cjs/FileInputFieldFF/{FileInputFieldFF.stories.e2e.js → FileInputFieldFF.e2e.stories.js} +45 -56
  11. package/build/cjs/FileInputFieldFF/FileInputFieldFF.js +2 -19
  12. package/build/cjs/FileInputFieldFF/{FileInputFieldFF.stories.js → FileInputFieldFF.prod.stories.js} +29 -22
  13. package/build/cjs/FileInputFieldFF/features/accepts_file/index.js +0 -1
  14. package/build/cjs/FileInputFieldFF/features/common/index.js +0 -1
  15. package/build/cjs/FileInputFieldFF/features/displays_error/index.js +0 -1
  16. package/build/cjs/InputFieldFF/InputFieldFF.e2e.stories.js +30 -0
  17. package/build/cjs/InputFieldFF/InputFieldFF.js +2 -12
  18. package/build/cjs/InputFieldFF/{InputFieldFF.stories.js → InputFieldFF.prod.stories.js} +29 -22
  19. package/build/cjs/InputFieldFF/features/can_set_a_value/index.js +0 -1
  20. package/build/cjs/InputFieldFF/features/displays_error/index.js +0 -2
  21. package/build/cjs/MultiSelectFieldFF/{MultiSelectFieldFF.stories.e2e.js → MultiSelectFieldFF.e2e.stories.js} +15 -17
  22. package/build/cjs/MultiSelectFieldFF/MultiSelectFieldFF.js +3 -15
  23. package/build/cjs/MultiSelectFieldFF/MultiSelectFieldFF.prod.stories.js +107 -0
  24. package/build/cjs/MultiSelectFieldFF/features/can_set_a_value/index.js +0 -1
  25. package/build/cjs/MultiSelectFieldFF/features/common/index.js +1 -2
  26. package/build/cjs/MultiSelectFieldFF/features/displays_error/index.js +0 -2
  27. package/build/cjs/RadioFieldFF/RadioFieldFF.e2e.stories.js +45 -0
  28. package/build/cjs/RadioFieldFF/RadioFieldFF.js +2 -12
  29. package/build/cjs/RadioFieldFF/{RadioFieldFF.stories.js → RadioFieldFF.prod.stories.js} +29 -16
  30. package/build/cjs/RadioFieldFF/features/can_set_a_value/index.js +0 -1
  31. package/build/cjs/RadioFieldFF/features/common/index.js +0 -1
  32. package/build/cjs/RadioFieldFF/features/displays_error/index.js +0 -2
  33. package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.e2e.stories.js +39 -0
  34. package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.js +2 -12
  35. package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.prod.stories.js +106 -0
  36. package/build/cjs/SingleSelectFieldFF/features/can_set_a_value/index.js +0 -1
  37. package/build/cjs/SingleSelectFieldFF/features/common/index.js +0 -1
  38. package/build/cjs/SingleSelectFieldFF/features/displays_error/index.js +0 -2
  39. package/build/cjs/SwitchFieldFF/SwitchFieldFF.e2e.stories.js +56 -0
  40. package/build/cjs/SwitchFieldFF/SwitchFieldFF.js +2 -12
  41. package/build/cjs/SwitchFieldFF/{SwitchFieldFF.stories.js → SwitchFieldFF.prod.stories.js} +29 -24
  42. package/build/cjs/SwitchFieldFF/features/can_toggle_a_boolean/index.js +0 -1
  43. package/build/cjs/SwitchFieldFF/features/can_toggle_a_value/index.js +0 -1
  44. package/build/cjs/SwitchFieldFF/features/common/index.js +0 -1
  45. package/build/cjs/SwitchFieldFF/features/displays_error/index.js +0 -2
  46. package/build/cjs/TextAreaFieldFF/TextAreaFieldFF.e2e.stories.js +30 -0
  47. package/build/cjs/TextAreaFieldFF/TextAreaFieldFF.js +2 -12
  48. package/build/cjs/TextAreaFieldFF/{TextAreaFieldFF.stories.js → TextAreaFieldFF.prod.stories.js} +29 -24
  49. package/build/cjs/TextAreaFieldFF/features/can_set_a_value/index.js +0 -1
  50. package/build/cjs/TextAreaFieldFF/features/displays_error/index.js +0 -2
  51. package/build/cjs/__tests__/__snapshots__/index.test.js.snap +3 -0
  52. package/build/cjs/__tests__/index.test.js +1 -1
  53. package/build/cjs/formDecorator.js +6 -21
  54. package/build/cjs/index.js +2 -21
  55. package/build/cjs/locales/index.js +3 -75
  56. package/build/cjs/shared/helpers/createBlurHandler.js +0 -3
  57. package/build/cjs/shared/helpers/createChangeHandler.js +0 -2
  58. package/build/cjs/shared/helpers/createFocusHandler.js +0 -3
  59. package/build/cjs/shared/helpers/createSelectChangeHandler.js +0 -2
  60. package/build/cjs/shared/helpers/createToggleChangeHandler.js +0 -3
  61. package/build/cjs/shared/helpers/getValidationText.js +0 -6
  62. package/build/cjs/shared/helpers/hasError.js +0 -2
  63. package/build/cjs/shared/helpers/isLoading.js +0 -2
  64. package/build/cjs/shared/helpers/isValid.js +0 -2
  65. package/build/cjs/shared/helpers.js +0 -9
  66. package/build/cjs/shared/propTypes.js +7 -20
  67. package/build/cjs/transformers/arrayWithIdObjects.js +2 -6
  68. package/build/cjs/transformers/index.js +0 -1
  69. package/build/cjs/validators/__tests__/alphaNumeric.test.js +0 -2
  70. package/build/cjs/validators/__tests__/boolean.test.js +0 -2
  71. package/build/cjs/validators/__tests__/composeValidators.test.js +0 -3
  72. package/build/cjs/validators/__tests__/createCharacterLengthRange.test.js +6 -6
  73. package/build/cjs/validators/__tests__/createEqualTo.test.js +0 -3
  74. package/build/cjs/validators/__tests__/createMaxCharacterLength.test.js +1 -2
  75. package/build/cjs/validators/__tests__/createMaxNumber.test.js +1 -2
  76. package/build/cjs/validators/__tests__/createMinCharacterLength.test.js +1 -2
  77. package/build/cjs/validators/__tests__/createMinNumber.test.js +1 -2
  78. package/build/cjs/validators/__tests__/createNumberRange.test.js +0 -3
  79. package/build/cjs/validators/__tests__/createPattern.test.js +1 -3
  80. package/build/cjs/validators/__tests__/dhis2Password.test.js +0 -2
  81. package/build/cjs/validators/__tests__/dhis2Username.test.js +0 -2
  82. package/build/cjs/validators/__tests__/email.test.js +7 -6
  83. package/build/cjs/validators/__tests__/hasValue.test.js +0 -2
  84. package/build/cjs/validators/__tests__/integer.test.js +0 -2
  85. package/build/cjs/validators/__tests__/internationalPhoneNumber.test.js +6 -5
  86. package/build/cjs/validators/__tests__/number.test.js +0 -2
  87. package/build/cjs/validators/__tests__/string.test.js +0 -2
  88. package/build/cjs/validators/__tests__/url.test.js +1 -2
  89. package/build/cjs/validators/alphaNumeric.js +2 -11
  90. package/build/cjs/validators/boolean.js +2 -10
  91. package/build/cjs/validators/composeValidators.js +0 -4
  92. package/build/cjs/validators/createCharacterLengthRange.js +1 -8
  93. package/build/cjs/validators/createEqualTo.js +1 -8
  94. package/build/cjs/validators/createMaxCharacterLength.js +1 -6
  95. package/build/cjs/validators/createMaxNumber.js +1 -6
  96. package/build/cjs/validators/createMinCharacterLength.js +1 -6
  97. package/build/cjs/validators/createMinNumber.js +1 -6
  98. package/build/cjs/validators/createNumberRange.js +1 -8
  99. package/build/cjs/validators/createPattern.js +2 -10
  100. package/build/cjs/validators/dhis2Password.js +6 -28
  101. package/build/cjs/validators/dhis2Username.js +2 -11
  102. package/build/cjs/validators/email.js +3 -11
  103. package/build/cjs/validators/hasValue.js +2 -10
  104. package/build/cjs/validators/helpers/index.js +1 -16
  105. package/build/cjs/validators/index.js +0 -20
  106. package/build/cjs/validators/integer.js +3 -10
  107. package/build/cjs/validators/internationalPhoneNumber.js +8 -14
  108. package/build/cjs/validators/number.js +2 -10
  109. package/build/cjs/validators/string.js +2 -10
  110. package/build/cjs/validators/test-helpers/index.js +1 -6
  111. package/build/cjs/validators/url.js +2 -11
  112. package/build/es/CheckboxFieldFF/{CheckboxFieldFF.stories.e2e.js → CheckboxFieldFF.e2e.stories.js} +14 -7
  113. package/build/es/CheckboxFieldFF/CheckboxFieldFF.js +1 -3
  114. package/build/es/CheckboxFieldFF/{CheckboxFieldFF.stories.js → CheckboxFieldFF.prod.stories.js} +29 -3
  115. package/build/es/FieldGroupFF/FieldGroupFF.js +0 -2
  116. package/build/es/FieldGroupFF/{FieldGroupFF.stories.js → FieldGroupFF.prod.stories.js} +11 -1
  117. package/build/es/FileInputFieldFF/{FileInputFieldFF.stories.e2e.js → FileInputFieldFF.e2e.stories.js} +14 -16
  118. package/build/es/FileInputFieldFF/FileInputFieldFF.js +1 -8
  119. package/build/es/FileInputFieldFF/{FileInputFieldFF.stories.js → FileInputFieldFF.prod.stories.js} +29 -3
  120. package/build/es/InputFieldFF/{InputFieldFF.stories.e2e.js → InputFieldFF.e2e.stories.js} +8 -4
  121. package/build/es/InputFieldFF/InputFieldFF.js +1 -3
  122. package/build/es/InputFieldFF/{InputFieldFF.stories.js → InputFieldFF.prod.stories.js} +29 -3
  123. package/build/es/MultiSelectFieldFF/{MultiSelectFieldFF.stories.e2e.js → MultiSelectFieldFF.e2e.stories.js} +7 -7
  124. package/build/es/MultiSelectFieldFF/MultiSelectFieldFF.js +2 -6
  125. package/build/es/MultiSelectFieldFF/MultiSelectFieldFF.prod.stories.js +98 -0
  126. package/build/es/MultiSelectFieldFF/features/common/index.js +1 -1
  127. package/build/es/RadioFieldFF/{RadioFieldFF.stories.e2e.js → RadioFieldFF.e2e.stories.js} +6 -3
  128. package/build/es/RadioFieldFF/RadioFieldFF.js +1 -3
  129. package/build/es/RadioFieldFF/{RadioFieldFF.stories.js → RadioFieldFF.prod.stories.js} +29 -3
  130. package/build/es/SingleSelectFieldFF/{SingleSelectFieldFF.stories.e2e.js → SingleSelectFieldFF.e2e.stories.js} +10 -6
  131. package/build/es/SingleSelectFieldFF/SingleSelectFieldFF.js +1 -3
  132. package/build/es/SingleSelectFieldFF/SingleSelectFieldFF.prod.stories.js +97 -0
  133. package/build/es/SwitchFieldFF/{SwitchFieldFF.stories.e2e.js → SwitchFieldFF.e2e.stories.js} +14 -7
  134. package/build/es/SwitchFieldFF/SwitchFieldFF.js +1 -3
  135. package/build/es/SwitchFieldFF/{SwitchFieldFF.stories.js → SwitchFieldFF.prod.stories.js} +29 -3
  136. package/build/es/TextAreaFieldFF/{TextAreaFieldFF.stories.e2e.js → TextAreaFieldFF.e2e.stories.js} +8 -4
  137. package/build/es/TextAreaFieldFF/TextAreaFieldFF.js +1 -3
  138. package/build/es/TextAreaFieldFF/{TextAreaFieldFF.stories.js → TextAreaFieldFF.prod.stories.js} +29 -3
  139. package/build/es/__tests__/__snapshots__/index.test.js.snap +3 -0
  140. package/build/es/__tests__/index.test.js +1 -0
  141. package/build/es/formDecorator.js +5 -12
  142. package/build/es/index.js +2 -2
  143. package/build/es/shared/helpers/createBlurHandler.js +0 -2
  144. package/build/es/shared/helpers/createChangeHandler.js +0 -2
  145. package/build/es/shared/helpers/createFocusHandler.js +0 -2
  146. package/build/es/shared/helpers/createSelectChangeHandler.js +0 -1
  147. package/build/es/shared/helpers/createToggleChangeHandler.js +0 -2
  148. package/build/es/shared/helpers/getValidationText.js +0 -5
  149. package/build/es/shared/helpers/hasError.js +0 -1
  150. package/build/es/shared/helpers/isLoading.js +0 -1
  151. package/build/es/shared/helpers/isValid.js +0 -1
  152. package/build/es/transformers/arrayWithIdObjects.js +0 -2
  153. package/build/es/validators/__tests__/createCharacterLengthRange.test.js +6 -3
  154. package/build/es/validators/__tests__/createMaxCharacterLength.test.js +1 -0
  155. package/build/es/validators/__tests__/createMaxNumber.test.js +1 -0
  156. package/build/es/validators/__tests__/createMinCharacterLength.test.js +1 -0
  157. package/build/es/validators/__tests__/createMinNumber.test.js +1 -0
  158. package/build/es/validators/__tests__/createPattern.test.js +1 -1
  159. package/build/es/validators/__tests__/email.test.js +7 -4
  160. package/build/es/validators/__tests__/internationalPhoneNumber.test.js +6 -3
  161. package/build/es/validators/__tests__/url.test.js +1 -0
  162. package/build/es/validators/alphaNumeric.js +0 -2
  163. package/build/es/validators/boolean.js +0 -2
  164. package/build/es/validators/composeValidators.js +0 -2
  165. package/build/es/validators/createCharacterLengthRange.js +0 -2
  166. package/build/es/validators/createEqualTo.js +0 -2
  167. package/build/es/validators/createMaxCharacterLength.js +0 -2
  168. package/build/es/validators/createMaxNumber.js +0 -2
  169. package/build/es/validators/createMinCharacterLength.js +0 -2
  170. package/build/es/validators/createMinNumber.js +0 -2
  171. package/build/es/validators/createNumberRange.js +0 -2
  172. package/build/es/validators/createPattern.js +0 -3
  173. package/build/es/validators/dhis2Password.js +3 -12
  174. package/build/es/validators/dhis2Username.js +0 -2
  175. package/build/es/validators/email.js +1 -2
  176. package/build/es/validators/hasValue.js +0 -2
  177. package/build/es/validators/integer.js +3 -4
  178. package/build/es/validators/internationalPhoneNumber.js +7 -7
  179. package/build/es/validators/number.js +0 -2
  180. package/build/es/validators/string.js +0 -2
  181. package/build/es/validators/test-helpers/index.js +1 -4
  182. package/build/es/validators/url.js +2 -3
  183. package/package.json +13 -13
  184. package/build/cjs/InputFieldFF/InputFieldFF.stories.e2e.js +0 -27
  185. package/build/cjs/MultiSelectFieldFF/MultiSelectFieldFF.stories.js +0 -91
  186. package/build/cjs/RadioFieldFF/RadioFieldFF.stories.e2e.js +0 -45
  187. package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.stories.e2e.js +0 -37
  188. package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.stories.js +0 -90
  189. package/build/cjs/SwitchFieldFF/SwitchFieldFF.stories.e2e.js +0 -49
  190. package/build/cjs/TextAreaFieldFF/TextAreaFieldFF.stories.e2e.js +0 -27
  191. package/build/es/MultiSelectFieldFF/MultiSelectFieldFF.stories.js +0 -70
  192. package/build/es/SingleSelectFieldFF/SingleSelectFieldFF.stories.js +0 -69
@@ -4,23 +4,16 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.createNumberRange = void 0;
7
-
8
7
  var _index = _interopRequireDefault(require("../locales/index.js"));
9
-
10
8
  var _index2 = require("./helpers/index.js");
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
10
  const createNumberRange = (lowerBound, upperBound, customMessage) => {
15
11
  (0, _index2.requireArgument)(lowerBound, 'number');
16
12
  (0, _index2.requireArgument)(upperBound, 'number');
17
-
18
13
  const errorMessage = customMessage || _index.default.t('Number cannot be less than {{lowerBound}} or more than {{upperBound}}', {
19
14
  lowerBound,
20
15
  upperBound
21
16
  });
22
-
23
17
  return value => (0, _index2.isEmpty)(value) || (0, _index2.isNumeric)(value) && (0, _index2.isInRange)(lowerBound, upperBound, (0, _index2.toNumber)(value)) ? undefined : errorMessage;
24
18
  };
25
-
26
19
  exports.createNumberRange = createNumberRange;
@@ -4,24 +4,16 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.invalidPatternMessage = exports.createPattern = void 0;
7
-
8
7
  var _index = _interopRequireDefault(require("../locales/index.js"));
9
-
10
8
  var _index2 = require("./helpers/index.js");
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
- const invalidPatternMessage = 'The first argument passed to createPattern was not a valid regex';
15
- exports.invalidPatternMessage = invalidPatternMessage;
16
-
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ const invalidPatternMessage = exports.invalidPatternMessage = 'The first argument passed to createPattern was not a valid regex';
17
11
  const createPattern = (pattern, message) => {
18
12
  if (!(pattern instanceof RegExp)) {
19
13
  throw new Error(invalidPatternMessage);
20
14
  }
21
-
22
15
  return value => (0, _index2.isEmpty)(value) || (0, _index2.isString)(value) && pattern.test(value) ? undefined : message || _index.default.t('Please make sure the value of this input matches the pattern {{patternString}}.', {
23
16
  patternString: pattern.toString()
24
17
  });
25
18
  };
26
-
27
19
  exports.createPattern = createPattern;
@@ -4,33 +4,23 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.errorMessages = exports.dhis2Password = void 0;
7
-
8
7
  var _index = _interopRequireDefault(require("../locales/index.js"));
9
-
10
8
  var _index2 = require("./helpers/index.js");
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
10
  const LOWER_CASE_PATTERN = /^(?=.*[a-z]).+$/;
15
11
  const UPPER_CASE_PATTERN = /^(?=.*[A-Z]).+$/;
16
- const DIGIT_PATTERN = /^(?=.*[0-9]).+$/; // Using this regex to match all non-alphanumeric characters to match server-side implementation
12
+ const DIGIT_PATTERN = /^(?=.*[0-9]).+$/;
13
+ // Using this regex to match all non-alphanumeric characters to match server-side implementation
17
14
  // https://github.com/dhis2/dhis2-core/blob/master/dhis-2/dhis-services/dhis-service-core/src/main/java/org/hisp/dhis/user/SpecialCharacterValidationRule.java#L39
18
-
19
15
  const SPECIAL_CHARACTER_PATTERN = /[^a-zA-Z0-9]/;
20
-
21
16
  const notString = _index.default.t('Password should be a string');
22
-
23
17
  const tooShort = _index.default.t('Password should be at least 8 characters long');
24
-
25
18
  const tooLong = _index.default.t('Password should be no longer than 34 characters');
26
-
27
19
  const noLowerCase = _index.default.t('Password should contain at least one lowercase letter');
28
-
29
20
  const noUpperCase = _index.default.t('Password should contain at least one UPPERCASE letter');
30
-
31
21
  const noNumber = _index.default.t('Password should contain at least one number');
32
-
33
22
  const noSpecialCharacter = _index.default.t('Password should have at least one special character');
23
+
34
24
  /**
35
25
  * Tests if a given password is compliant with the password restrictions.
36
26
  * This function checks all restrictions below, but returns when the first violation was found:
@@ -41,46 +31,35 @@ const noSpecialCharacter = _index.default.t('Password should have at least one s
41
31
  * - Contains at least 1 number
42
32
  * - Contains at least 1 special character
43
33
  */
44
-
45
-
46
34
  const dhis2Password = value => {
47
35
  if ((0, _index2.isEmpty)(value)) {
48
36
  return undefined;
49
37
  }
50
-
51
38
  if (!(0, _index2.isString)(value)) {
52
39
  return notString;
53
40
  }
54
-
55
41
  if (value.length < 8) {
56
42
  return tooShort;
57
43
  }
58
-
59
44
  if (value.length > 35) {
60
45
  return tooLong;
61
46
  }
62
-
63
47
  if (!LOWER_CASE_PATTERN.test(value)) {
64
48
  return noLowerCase;
65
49
  }
66
-
67
50
  if (!UPPER_CASE_PATTERN.test(value)) {
68
51
  return noUpperCase;
69
52
  }
70
-
71
53
  if (!DIGIT_PATTERN.test(value)) {
72
54
  return noNumber;
73
55
  }
74
-
75
56
  if (!SPECIAL_CHARACTER_PATTERN.test(value)) {
76
57
  return noSpecialCharacter;
77
58
  }
78
-
79
59
  return undefined;
80
60
  };
81
-
82
61
  exports.dhis2Password = dhis2Password;
83
- const errorMessages = {
62
+ const errorMessages = exports.errorMessages = {
84
63
  notString,
85
64
  tooShort,
86
65
  tooLong,
@@ -88,5 +67,4 @@ const errorMessages = {
88
67
  noUpperCase,
89
68
  noNumber,
90
69
  noSpecialCharacter
91
- };
92
- exports.errorMessages = errorMessages;
70
+ };
@@ -4,19 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.invalidUsernameMessage = exports.dhis2Username = void 0;
7
-
8
7
  var _index = _interopRequireDefault(require("../locales/index.js"));
9
-
10
8
  var _index2 = require("./helpers/index.js");
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
10
  const USERNAME_PATTERN = /^(?=.{4,255}$)(?![_\-.@])(?!.*[_\-.@]{2})[a-zA-Z0-9._\-@]+(?<![_\-.@])$/;
15
-
16
- const invalidUsernameMessage = _index.default.t('Please provide a username between 4 and 255 characters long and possibly separated by . _ - or @');
17
-
18
- exports.invalidUsernameMessage = invalidUsernameMessage;
19
-
11
+ const invalidUsernameMessage = exports.invalidUsernameMessage = _index.default.t('Please provide a username between 4 and 255 characters long and possibly separated by . _ - or @');
20
12
  const dhis2Username = value => (0, _index2.isEmpty)(value) || (0, _index2.isString)(value) && USERNAME_PATTERN.test(value) ? undefined : invalidUsernameMessage;
21
-
22
13
  exports.dhis2Username = dhis2Username;
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.invalidEmailMessage = exports.email = void 0;
7
-
8
7
  var _index = _interopRequireDefault(require("../locales/index.js"));
9
-
10
8
  var _index2 = require("./helpers/index.js");
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
10
  /*
15
11
  * Email validation is complicated business. There is no perfect regex,
16
12
  * instead we have to make a trade-off between complexity, correctness,
@@ -34,12 +30,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
34
30
  * overall picture in terms of false negatives and positives, so I settled on that one:
35
31
  * https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript/46181#46181
36
32
  */
37
- const EMAIL_ADDRESS_PATTERN = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;
38
-
39
- const invalidEmailMessage = _index.default.t('Please provide a valid email address');
40
-
41
- exports.invalidEmailMessage = invalidEmailMessage;
42
33
 
34
+ const EMAIL_ADDRESS_PATTERN = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;
35
+ const invalidEmailMessage = exports.invalidEmailMessage = _index.default.t('Please provide a valid email address');
43
36
  const email = value => (0, _index2.isEmpty)(value) || (0, _index2.isString)(value) && EMAIL_ADDRESS_PATTERN.test(value) ? undefined : invalidEmailMessage;
44
-
45
37
  exports.email = email;
@@ -4,17 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.hasValueMessage = exports.hasValue = void 0;
7
-
8
7
  var _index = _interopRequireDefault(require("../locales/index.js"));
9
-
10
8
  var _index2 = require("./helpers/index.js");
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
- const hasValueMessage = _index.default.t('Please provide a value');
15
-
16
- exports.hasValueMessage = hasValueMessage;
17
-
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ const hasValueMessage = exports.hasValueMessage = _index.default.t('Please provide a value');
18
11
  const hasValue = value => (0, _index2.isEmpty)(value) ? hasValueMessage : undefined;
19
-
20
12
  exports.hasValue = hasValue;
@@ -4,37 +4,22 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.toNumber = exports.requiredArgumentErrorMessage = exports.requireArgument = exports.isString = exports.isNumeric = exports.isNumber = exports.isInRange = exports.isEmpty = void 0;
7
-
8
7
  const isEmpty = value => typeof value === 'undefined' || value === null || value === '';
9
-
10
8
  exports.isEmpty = isEmpty;
11
-
12
9
  const isString = value => typeof value === 'string';
13
-
14
10
  exports.isString = isString;
15
-
16
11
  const isNumber = value => typeof value === 'number';
17
-
18
12
  exports.isNumber = isNumber;
19
-
20
13
  const isNumeric = value => (isString(value) || isNumber(value)) && !isNaN(value);
21
-
22
14
  exports.isNumeric = isNumeric;
23
-
24
15
  const isInRange = (lowerBound, upperBound, value) => value >= lowerBound && value <= upperBound;
25
-
26
16
  exports.isInRange = isInRange;
27
-
28
17
  const toNumber = value => Number(value);
29
-
30
18
  exports.toNumber = toNumber;
31
- const requiredArgumentErrorMessage = 'Incorrect arguments provided when creating validator';
32
- exports.requiredArgumentErrorMessage = requiredArgumentErrorMessage;
33
-
19
+ const requiredArgumentErrorMessage = exports.requiredArgumentErrorMessage = 'Incorrect arguments provided when creating validator';
34
20
  const requireArgument = (value, type) => {
35
21
  if (isEmpty(value) || typeof value !== type) {
36
22
  throw new Error(requiredArgumentErrorMessage);
37
23
  }
38
24
  };
39
-
40
25
  exports.requireArgument = requireArgument;
@@ -123,43 +123,23 @@ Object.defineProperty(exports, "url", {
123
123
  return _url.url;
124
124
  }
125
125
  });
126
-
127
126
  var _alphaNumeric = require("./alphaNumeric.js");
128
-
129
127
  var _boolean = require("./boolean.js");
130
-
131
128
  var _composeValidators = require("./composeValidators.js");
132
-
133
129
  var _createCharacterLengthRange = require("./createCharacterLengthRange.js");
134
-
135
130
  var _createEqualTo = require("./createEqualTo.js");
136
-
137
131
  var _createMaxCharacterLength = require("./createMaxCharacterLength.js");
138
-
139
132
  var _createMaxNumber = require("./createMaxNumber.js");
140
-
141
133
  var _createMinCharacterLength = require("./createMinCharacterLength.js");
142
-
143
134
  var _createMinNumber = require("./createMinNumber.js");
144
-
145
135
  var _createNumberRange = require("./createNumberRange.js");
146
-
147
136
  var _createPattern = require("./createPattern.js");
148
-
149
137
  var _dhis2Password = require("./dhis2Password.js");
150
-
151
138
  var _dhis2Username = require("./dhis2Username.js");
152
-
153
139
  var _email = require("./email.js");
154
-
155
140
  var _hasValue = require("./hasValue.js");
156
-
157
141
  var _integer = require("./integer.js");
158
-
159
142
  var _internationalPhoneNumber = require("./internationalPhoneNumber.js");
160
-
161
143
  var _number = require("./number.js");
162
-
163
144
  var _string = require("./string.js");
164
-
165
145
  var _url = require("./url.js");
@@ -4,20 +4,13 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.invalidIntegerMessage = exports.integer = void 0;
7
-
8
7
  var _index = _interopRequireDefault(require("../locales/index.js"));
9
-
10
8
  var _index2 = require("./helpers/index.js");
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ const invalidIntegerMessage = exports.invalidIntegerMessage = _index.default.t('Please provide a round number without decimals');
11
11
 
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
- const invalidIntegerMessage = _index.default.t('Please provide a round number without decimals'); // Regex accepts only digits (no decimals even if it is trailing like 4.0)
12
+ // Regex accepts only digits (no decimals even if it is trailing like 4.0)
15
13
  // it also rejects a leading 0 (i.e 04) as this is rejected by backend
16
-
17
-
18
- exports.invalidIntegerMessage = invalidIntegerMessage;
19
14
  const INTEGER_PATTERN = /^(-?[1-9]\d*|0)$/;
20
-
21
15
  const integer = value => (0, _index2.isEmpty)(value) || INTEGER_PATTERN.test(value) && (0, _index2.isNumeric)(value) && Number.isSafeInteger((0, _index2.toNumber)(value)) ? undefined : invalidIntegerMessage;
22
-
23
16
  exports.integer = integer;
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.invalidInternationalPhoneNumberMessage = exports.internationalPhoneNumber = void 0;
7
-
8
7
  var _index = _interopRequireDefault(require("../locales/index.js"));
9
-
10
8
  var _index2 = require("./helpers/index.js");
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
10
  /*
15
11
  * There were some problems with the server side implementation
16
12
  * of how international phone numbers are validated, and the
@@ -36,25 +32,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
36
32
  * all spaces, dashes [‘-‘] and parentheses [ ‘(‘ and ‘)’] are removed, besides the
37
33
  * leading ‘+’ all characters should be numeric.
38
34
  */
39
- const invalidInternationalPhoneNumberMessage = _index.default.t('Please provide a valid international phone number.');
40
-
41
- exports.invalidInternationalPhoneNumberMessage = invalidInternationalPhoneNumberMessage;
42
35
 
36
+ const invalidInternationalPhoneNumberMessage = exports.invalidInternationalPhoneNumberMessage = _index.default.t('Please provide a valid international phone number.');
43
37
  const internationalPhoneNumber = value => {
44
38
  // allow empty values
45
39
  if ((0, _index2.isEmpty)(value)) {
46
40
  return undefined;
47
- } // value must be a string
48
-
41
+ }
49
42
 
43
+ // value must be a string
50
44
  if (!(0, _index2.isString)(value)) {
51
45
  return invalidInternationalPhoneNumberMessage;
52
46
  }
53
-
54
- const cleanedValue = value // strip all hyphens, dots, spaces
55
- .replace(/[-. )(]/g, '') // trim leading zeroes and plus signs
47
+ const cleanedValue = value
48
+ // strip all hyphens, dots, spaces
49
+ .replace(/[-. )(]/g, '')
50
+ // trim leading zeroes and plus signs
56
51
  .replace(/^[0+]+/, '');
57
52
  return (0, _index2.isNumeric)(cleanedValue) && cleanedValue.length <= 15 ? undefined : invalidInternationalPhoneNumberMessage;
58
53
  };
59
-
60
54
  exports.internationalPhoneNumber = internationalPhoneNumber;
@@ -4,17 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.number = exports.invalidNumberMessage = void 0;
7
-
8
7
  var _index = _interopRequireDefault(require("../locales/index.js"));
9
-
10
8
  var _index2 = require("./helpers/index.js");
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
- const invalidNumberMessage = _index.default.t('Please provide a number');
15
-
16
- exports.invalidNumberMessage = invalidNumberMessage;
17
-
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ const invalidNumberMessage = exports.invalidNumberMessage = _index.default.t('Please provide a number');
18
11
  const number = value => (0, _index2.isEmpty)(value) || (0, _index2.isNumeric)(value) ? undefined : invalidNumberMessage;
19
-
20
12
  exports.number = number;
@@ -4,17 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.string = exports.invalidStringMessage = void 0;
7
-
8
7
  var _index = _interopRequireDefault(require("../locales/index.js"));
9
-
10
8
  var _index2 = require("./helpers/index.js");
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
- const invalidStringMessage = _index.default.t('Please provide a string');
15
-
16
- exports.invalidStringMessage = invalidStringMessage;
17
-
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ const invalidStringMessage = exports.invalidStringMessage = _index.default.t('Please provide a string');
18
11
  const string = value => (0, _index2.isEmpty)(value) || (0, _index2.isString)(value) ? undefined : invalidStringMessage;
19
-
20
12
  exports.string = string;
@@ -4,25 +4,20 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.testValidatorValues = exports.allowsEmptyValues = void 0;
7
-
8
7
  const testValidatorValues = (validator, returnValue, values) => {
9
8
  const returnValueStr = returnValue === undefined ? 'undefined' : 'an error string';
10
-
11
9
  for (const value of values) {
12
10
  const type = typeof value;
13
11
  const valueStr = type === 'object' ? JSON.stringify(value) : value;
14
- it("should return ".concat(returnValueStr, " for value `").concat(valueStr, "` of type ").concat(type), () => {
12
+ it(`should return ${returnValueStr} for value \`${valueStr}\` of type ${type}`, () => {
15
13
  expect(validator(value)).toBe(returnValue);
16
14
  });
17
15
  }
18
16
  };
19
-
20
17
  exports.testValidatorValues = testValidatorValues;
21
-
22
18
  const allowsEmptyValues = validator => {
23
19
  describe('allows empty values', () => {
24
20
  testValidatorValues(validator, undefined, ['', null, undefined]);
25
21
  });
26
22
  };
27
-
28
23
  exports.allowsEmptyValues = allowsEmptyValues;
@@ -4,20 +4,11 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.url = exports.invalidUrlMessage = void 0;
7
-
8
7
  var _index = _interopRequireDefault(require("../locales/index.js"));
9
-
10
8
  var _index2 = require("./helpers/index.js");
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
10
  // Source: https://gist.github.com/dperini/729294
15
11
  const URL_PATTERN = /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:[/?#]\S*)?$/i;
16
-
17
- const invalidUrlMessage = _index.default.t('Please provide a valid url');
18
-
19
- exports.invalidUrlMessage = invalidUrlMessage;
20
-
12
+ const invalidUrlMessage = exports.invalidUrlMessage = _index.default.t('Please provide a valid url');
21
13
  const url = value => (0, _index2.isEmpty)(value) || (0, _index2.isString)(value) && URL_PATTERN.test(value) ? undefined : invalidUrlMessage;
22
-
23
14
  exports.url = url;
@@ -1,12 +1,16 @@
1
- import { storiesOf } from '@storybook/react';
2
1
  import React from 'react';
3
2
  import { Field } from 'react-final-form';
4
3
  import { formDecorator } from '../formDecorator.js';
5
4
  import { hasValue } from '../validators/index.js';
6
- import { CheckboxFieldFF } from './CheckboxFieldFF.js'; // https://github.com/final-form/react-final-form-arrays/issues/111
5
+ import { CheckboxFieldFF } from './CheckboxFieldFF.js';
7
6
 
7
+ // https://github.com/final-form/react-final-form-arrays/issues/111
8
8
  const initialValue = ['yes'];
9
- storiesOf('Testing:Checkbox', module).addDecorator(formDecorator).add('Unchecked', () => /*#__PURE__*/React.createElement(Field, {
9
+ export default {
10
+ title: 'Testing:Checkbox',
11
+ decorators: [formDecorator]
12
+ };
13
+ export const Unchecked = () => /*#__PURE__*/React.createElement(Field, {
10
14
  type: "checkbox",
11
15
  component: CheckboxFieldFF,
12
16
  className: "checkbox",
@@ -14,21 +18,24 @@ storiesOf('Testing:Checkbox', module).addDecorator(formDecorator).add('Unchecked
14
18
  label: "Label text",
15
19
  validate: hasValue,
16
20
  required: true
17
- })).add('Checked ', () => /*#__PURE__*/React.createElement(Field, {
21
+ });
22
+ export const Checked = () => /*#__PURE__*/React.createElement(Field, {
18
23
  type: "checkbox",
19
24
  component: CheckboxFieldFF,
20
25
  className: "checkbox",
21
26
  name: "checkbox",
22
27
  label: "Label text",
23
28
  initialValue: true
24
- })).add('Unchecked with value', () => /*#__PURE__*/React.createElement(Field, {
29
+ });
30
+ export const UncheckedWithValue = () => /*#__PURE__*/React.createElement(Field, {
25
31
  type: "checkbox",
26
32
  component: CheckboxFieldFF,
27
33
  className: "checkbox",
28
34
  name: "checkbox",
29
35
  label: "Label text",
30
36
  value: "yes"
31
- })).add('Checked with value', () => /*#__PURE__*/React.createElement(Field, {
37
+ });
38
+ export const CheckedWithValue = () => /*#__PURE__*/React.createElement(Field, {
32
39
  type: "checkbox",
33
40
  component: CheckboxFieldFF,
34
41
  className: "checkbox",
@@ -36,4 +43,4 @@ storiesOf('Testing:Checkbox', module).addDecorator(formDecorator).add('Unchecked
36
43
  label: "Label text",
37
44
  value: "yes",
38
45
  initialValue: initialValue
39
- }));
46
+ });
@@ -1,5 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
1
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
3
2
  import { CheckboxField } from '@dhis2-ui/checkbox';
4
3
  import PropTypes from 'prop-types';
5
4
  import React from 'react';
@@ -32,7 +31,6 @@ export const CheckboxFieldFF = _ref => {
32
31
  CheckboxFieldFF.propTypes = {
33
32
  /** Provided by Final Form `Field` */
34
33
  input: inputPropType.isRequired,
35
-
36
34
  /** Provided by Final Form `Field` */
37
35
  meta: metaPropType.isRequired,
38
36
  error: PropTypes.bool,
@@ -4,7 +4,31 @@ import { formDecorator } from '../formDecorator.js';
4
4
  import { inputArgType, metaArgType } from '../shared/propTypes.js';
5
5
  import { hasValue } from '../validators/index.js';
6
6
  import { CheckboxFieldFF } from './CheckboxFieldFF.js';
7
- const description = "\nThe `CheckboxFieldFF` is a wrapper around a `CheckboxField` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.\n\n#### Final Form\n\nSee how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).\n\nInside a Final Form `<Form>` component, these 'FF' UI components are intended to be used in the `component` prop of the [Final Form `<Field>` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. `<Field component={CheckboxFieldFF} />`. See the code samples below for examples.\n\n#### Props\n\nThe props shown in the table below are generally provided to the `CheckboxFieldFF` wrapper by the Final Form `Field`.\n\nNote that any props beyond the API of the `Field` component will be spread to the `CheckboxFieldFF`, which passes any extra props to the underlying `CheckboxField` using `{...rest}`.\n\nTherefore, to add any props to the `CheckboxFieldFF` or `CheckboxField`, add those props to the parent Final Form `Field` component.\n\nAlso see `Checkbox` and `CheckboxField` for notes about props and implementation.\n\n```js\nimport { CheckboxFieldFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n";
7
+ const description = `
8
+ The \`CheckboxFieldFF\` is a wrapper around a \`CheckboxField\` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.
9
+
10
+ #### Final Form
11
+
12
+ See how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).
13
+
14
+ Inside a Final Form \`<Form>\` component, these 'FF' UI components are intended to be used in the \`component\` prop of the [Final Form \`<Field>\` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. \`<Field component={CheckboxFieldFF} />\`. See the code samples below for examples.
15
+
16
+ #### Props
17
+
18
+ The props shown in the table below are generally provided to the \`CheckboxFieldFF\` wrapper by the Final Form \`Field\`.
19
+
20
+ Note that any props beyond the API of the \`Field\` component will be spread to the \`CheckboxFieldFF\`, which passes any extra props to the underlying \`CheckboxField\` using \`{...rest}\`.
21
+
22
+ Therefore, to add any props to the \`CheckboxFieldFF\` or \`CheckboxField\`, add those props to the parent Final Form \`Field\` component.
23
+
24
+ Also see \`Checkbox\` and \`CheckboxField\` for notes about props and implementation.
25
+
26
+ \`\`\`js
27
+ import { CheckboxFieldFF } from '@dhis2/ui'
28
+ \`\`\`
29
+
30
+ Press **Submit** to see the form values logged to the console.
31
+ `;
8
32
  export default {
9
33
  title: 'Checkbox Field (Final Form)',
10
34
  component: CheckboxFieldFF,
@@ -17,9 +41,11 @@ export default {
17
41
  }
18
42
  },
19
43
  argTypes: {
20
- input: { ...inputArgType
44
+ input: {
45
+ ...inputArgType
21
46
  },
22
- meta: { ...metaArgType
47
+ meta: {
48
+ ...metaArgType
23
49
  }
24
50
  }
25
51
  };
@@ -22,7 +22,6 @@ export const FieldGroupFF = _ref => {
22
22
  });
23
23
  const isError = !!error && !!touched;
24
24
  let errorText;
25
-
26
25
  if (isError) {
27
26
  if (typeof error === 'string') {
28
27
  errorText = error;
@@ -32,7 +31,6 @@ export const FieldGroupFF = _ref => {
32
31
  errorText = null;
33
32
  }
34
33
  }
35
-
36
34
  return /*#__PURE__*/React.createElement(FieldGroup, {
37
35
  label: label,
38
36
  required: required,
@@ -4,7 +4,17 @@ import { CheckboxFieldFF } from '../CheckboxFieldFF/CheckboxFieldFF.js';
4
4
  import { formDecorator } from '../formDecorator.js';
5
5
  import { hasValue } from '../validators/index.js';
6
6
  import { FieldGroupFF } from './FieldGroupFF.js';
7
- const description = "\nThis component is intended for use with [Final Form](https://final-form.org/docs/react-final-form/getting-started), the preferred library for form validation and utilities in DHIS 2 apps.\n\n`FieldGroupFF` groups related fields (using the Final Form `<Field>`), like checkboxes, and adds a label and name.\n\n```js\nimport { FieldGroupFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n";
7
+ const description = `
8
+ This component is intended for use with [Final Form](https://final-form.org/docs/react-final-form/getting-started), the preferred library for form validation and utilities in DHIS 2 apps.
9
+
10
+ \`FieldGroupFF\` groups related fields (using the Final Form \`<Field>\`), like checkboxes, and adds a label and name.
11
+
12
+ \`\`\`js
13
+ import { FieldGroupFF } from '@dhis2/ui'
14
+ \`\`\`
15
+
16
+ Press **Submit** to see the form values logged to the console.
17
+ `;
8
18
  export default {
9
19
  title: 'Field Group (Final Form)',
10
20
  component: FieldGroupFF,