@dhis2/ui-forms 9.10.3 → 9.11.1-beta.1

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.
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
@@ -1,8 +1,6 @@
1
1
  import i18n from '../locales/index.js';
2
2
  import { createCharacterLengthRange } from './createCharacterLengthRange.js';
3
-
4
3
  const createMinCharacterLength = lowerBound => createCharacterLengthRange(lowerBound, Infinity, i18n.t('Please enter at least {{lowerBound}} characters', {
5
4
  lowerBound
6
5
  }));
7
-
8
6
  export { createMinCharacterLength };
@@ -1,8 +1,6 @@
1
1
  import i18n from '../locales/index.js';
2
2
  import { createNumberRange } from './createNumberRange.js';
3
-
4
3
  const createMinNumber = lowerBound => createNumberRange(lowerBound, Infinity, i18n.t('Please enter a number of at least {{lowerBound}}', {
5
4
  lowerBound
6
5
  }));
7
-
8
6
  export { createMinNumber };
@@ -1,6 +1,5 @@
1
1
  import i18n from '../locales/index.js';
2
2
  import { isEmpty, isNumeric, toNumber, isInRange, requireArgument } from './helpers/index.js';
3
-
4
3
  const createNumberRange = (lowerBound, upperBound, customMessage) => {
5
4
  requireArgument(lowerBound, 'number');
6
5
  requireArgument(upperBound, 'number');
@@ -10,5 +9,4 @@ const createNumberRange = (lowerBound, upperBound, customMessage) => {
10
9
  });
11
10
  return value => isEmpty(value) || isNumeric(value) && isInRange(lowerBound, upperBound, toNumber(value)) ? undefined : errorMessage;
12
11
  };
13
-
14
12
  export { createNumberRange };
@@ -1,15 +1,12 @@
1
1
  import i18n from '../locales/index.js';
2
2
  import { isEmpty, isString } from './helpers/index.js';
3
3
  const invalidPatternMessage = 'The first argument passed to createPattern was not a valid regex';
4
-
5
4
  const createPattern = (pattern, message) => {
6
5
  if (!(pattern instanceof RegExp)) {
7
6
  throw new Error(invalidPatternMessage);
8
7
  }
9
-
10
8
  return value => isEmpty(value) || isString(value) && pattern.test(value) ? undefined : message || i18n.t('Please make sure the value of this input matches the pattern {{patternString}}.', {
11
9
  patternString: pattern.toString()
12
10
  });
13
11
  };
14
-
15
12
  export { createPattern, invalidPatternMessage };
@@ -2,9 +2,9 @@ import i18n from '../locales/index.js';
2
2
  import { isEmpty, isString } from './helpers/index.js';
3
3
  const LOWER_CASE_PATTERN = /^(?=.*[a-z]).+$/;
4
4
  const UPPER_CASE_PATTERN = /^(?=.*[A-Z]).+$/;
5
- const DIGIT_PATTERN = /^(?=.*[0-9]).+$/; // Using this regex to match all non-alphanumeric characters to match server-side implementation
5
+ const DIGIT_PATTERN = /^(?=.*[0-9]).+$/;
6
+ // Using this regex to match all non-alphanumeric characters to match server-side implementation
6
7
  // 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
7
-
8
8
  const SPECIAL_CHARACTER_PATTERN = /[^a-zA-Z0-9]/;
9
9
  const notString = i18n.t('Password should be a string');
10
10
  const tooShort = i18n.t('Password should be at least 8 characters long');
@@ -13,6 +13,7 @@ const noLowerCase = i18n.t('Password should contain at least one lowercase lette
13
13
  const noUpperCase = i18n.t('Password should contain at least one UPPERCASE letter');
14
14
  const noNumber = i18n.t('Password should contain at least one number');
15
15
  const noSpecialCharacter = i18n.t('Password should have at least one special character');
16
+
16
17
  /**
17
18
  * Tests if a given password is compliant with the password restrictions.
18
19
  * This function checks all restrictions below, but returns when the first violation was found:
@@ -23,43 +24,33 @@ const noSpecialCharacter = i18n.t('Password should have at least one special cha
23
24
  * - Contains at least 1 number
24
25
  * - Contains at least 1 special character
25
26
  */
26
-
27
27
  const dhis2Password = value => {
28
28
  if (isEmpty(value)) {
29
29
  return undefined;
30
30
  }
31
-
32
31
  if (!isString(value)) {
33
32
  return notString;
34
33
  }
35
-
36
34
  if (value.length < 8) {
37
35
  return tooShort;
38
36
  }
39
-
40
37
  if (value.length > 35) {
41
38
  return tooLong;
42
39
  }
43
-
44
40
  if (!LOWER_CASE_PATTERN.test(value)) {
45
41
  return noLowerCase;
46
42
  }
47
-
48
43
  if (!UPPER_CASE_PATTERN.test(value)) {
49
44
  return noUpperCase;
50
45
  }
51
-
52
46
  if (!DIGIT_PATTERN.test(value)) {
53
47
  return noNumber;
54
48
  }
55
-
56
49
  if (!SPECIAL_CHARACTER_PATTERN.test(value)) {
57
50
  return noSpecialCharacter;
58
51
  }
59
-
60
52
  return undefined;
61
53
  };
62
-
63
54
  const errorMessages = {
64
55
  notString,
65
56
  tooShort,
@@ -2,7 +2,5 @@ import i18n from '../locales/index.js';
2
2
  import { isEmpty, isString } from './helpers/index.js';
3
3
  const USERNAME_PATTERN = /^(?=.{4,255}$)(?![_\-.@])(?!.*[_\-.@]{2})[a-zA-Z0-9._\-@]+(?<![_\-.@])$/;
4
4
  const invalidUsernameMessage = i18n.t('Please provide a username between 4 and 255 characters long and possibly separated by . _ - or @');
5
-
6
5
  const dhis2Username = value => isEmpty(value) || isString(value) && USERNAME_PATTERN.test(value) ? undefined : invalidUsernameMessage;
7
-
8
6
  export { dhis2Username, invalidUsernameMessage };
@@ -1,5 +1,6 @@
1
1
  import i18n from '../locales/index.js';
2
2
  import { isEmpty, isString } from './helpers/index.js';
3
+
3
4
  /*
4
5
  * Email validation is complicated business. There is no perfect regex,
5
6
  * instead we have to make a trade-off between complexity, correctness,
@@ -26,7 +27,5 @@ import { isEmpty, isString } from './helpers/index.js';
26
27
 
27
28
  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;
28
29
  const invalidEmailMessage = i18n.t('Please provide a valid email address');
29
-
30
30
  const email = value => isEmpty(value) || isString(value) && EMAIL_ADDRESS_PATTERN.test(value) ? undefined : invalidEmailMessage;
31
-
32
31
  export { email, invalidEmailMessage };
@@ -1,7 +1,5 @@
1
1
  import i18n from '../locales/index.js';
2
2
  import { isEmpty } from './helpers/index.js';
3
3
  const hasValueMessage = i18n.t('Please provide a value');
4
-
5
4
  const hasValue = value => isEmpty(value) ? hasValueMessage : undefined;
6
-
7
5
  export { hasValue, hasValueMessage };
@@ -1,10 +1,9 @@
1
1
  import i18n from '../locales/index.js';
2
2
  import { isEmpty, isNumeric, toNumber } from './helpers/index.js';
3
- const invalidIntegerMessage = i18n.t('Please provide a round number without decimals'); // Regex accepts only digits (no decimals even if it is trailing like 4.0)
4
- // it also rejects a leading 0 (i.e 04) as this is rejected by backend
3
+ const invalidIntegerMessage = i18n.t('Please provide a round number without decimals');
5
4
 
5
+ // Regex accepts only digits (no decimals even if it is trailing like 4.0)
6
+ // it also rejects a leading 0 (i.e 04) as this is rejected by backend
6
7
  const INTEGER_PATTERN = /^(-?[1-9]\d*|0)$/;
7
-
8
8
  const integer = value => isEmpty(value) || INTEGER_PATTERN.test(value) && isNumeric(value) && Number.isSafeInteger(toNumber(value)) ? undefined : invalidIntegerMessage;
9
-
10
9
  export { integer, invalidIntegerMessage };
@@ -1,5 +1,6 @@
1
1
  import i18n from '../locales/index.js';
2
2
  import { isEmpty, isString, isNumeric } from './helpers/index.js';
3
+
3
4
  /*
4
5
  * There were some problems with the server side implementation
5
6
  * of how international phone numbers are validated, and the
@@ -27,22 +28,21 @@ import { isEmpty, isString, isNumeric } from './helpers/index.js';
27
28
  */
28
29
 
29
30
  const invalidInternationalPhoneNumberMessage = i18n.t('Please provide a valid international phone number.');
30
-
31
31
  const internationalPhoneNumber = value => {
32
32
  // allow empty values
33
33
  if (isEmpty(value)) {
34
34
  return undefined;
35
- } // value must be a string
36
-
35
+ }
37
36
 
37
+ // value must be a string
38
38
  if (!isString(value)) {
39
39
  return invalidInternationalPhoneNumberMessage;
40
40
  }
41
-
42
- const cleanedValue = value // strip all hyphens, dots, spaces
43
- .replace(/[-. )(]/g, '') // trim leading zeroes and plus signs
41
+ const cleanedValue = value
42
+ // strip all hyphens, dots, spaces
43
+ .replace(/[-. )(]/g, '')
44
+ // trim leading zeroes and plus signs
44
45
  .replace(/^[0+]+/, '');
45
46
  return isNumeric(cleanedValue) && cleanedValue.length <= 15 ? undefined : invalidInternationalPhoneNumberMessage;
46
47
  };
47
-
48
48
  export { internationalPhoneNumber, invalidInternationalPhoneNumberMessage };
@@ -1,7 +1,5 @@
1
1
  import i18n from '../locales/index.js';
2
2
  import { isEmpty, isNumeric } from './helpers/index.js';
3
3
  const invalidNumberMessage = i18n.t('Please provide a number');
4
-
5
4
  const number = value => isEmpty(value) || isNumeric(value) ? undefined : invalidNumberMessage;
6
-
7
5
  export { number, invalidNumberMessage };
@@ -1,7 +1,5 @@
1
1
  import i18n from '../locales/index.js';
2
2
  import { isEmpty, isString } from './helpers/index.js';
3
3
  const invalidStringMessage = i18n.t('Please provide a string');
4
-
5
4
  const string = value => isEmpty(value) || isString(value) ? undefined : invalidStringMessage;
6
-
7
5
  export { string, invalidStringMessage };
@@ -1,19 +1,16 @@
1
1
  const testValidatorValues = (validator, returnValue, values) => {
2
2
  const returnValueStr = returnValue === undefined ? 'undefined' : 'an error string';
3
-
4
3
  for (const value of values) {
5
4
  const type = typeof value;
6
5
  const valueStr = type === 'object' ? JSON.stringify(value) : value;
7
- it("should return ".concat(returnValueStr, " for value `").concat(valueStr, "` of type ").concat(type), () => {
6
+ it(`should return ${returnValueStr} for value \`${valueStr}\` of type ${type}`, () => {
8
7
  expect(validator(value)).toBe(returnValue);
9
8
  });
10
9
  }
11
10
  };
12
-
13
11
  const allowsEmptyValues = validator => {
14
12
  describe('allows empty values', () => {
15
13
  testValidatorValues(validator, undefined, ['', null, undefined]);
16
14
  });
17
15
  };
18
-
19
16
  export { testValidatorValues, allowsEmptyValues };
@@ -1,9 +1,8 @@
1
1
  import i18n from '../locales/index.js';
2
- import { isEmpty, isString } from './helpers/index.js'; // Source: https://gist.github.com/dperini/729294
2
+ import { isEmpty, isString } from './helpers/index.js';
3
3
 
4
+ // Source: https://gist.github.com/dperini/729294
4
5
  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;
5
6
  const invalidUrlMessage = i18n.t('Please provide a valid url');
6
-
7
7
  const url = value => isEmpty(value) || isString(value) && URL_PATTERN.test(value) ? undefined : invalidUrlMessage;
8
-
9
8
  export { url, invalidUrlMessage };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2/ui-forms",
3
- "version": "9.10.3",
3
+ "version": "9.11.1-beta.1",
4
4
  "main": "./build/cjs/index.js",
5
5
  "module": "./build/es/index.js",
6
6
  "sideEffects": [
@@ -26,24 +26,24 @@
26
26
  "access": "public"
27
27
  },
28
28
  "scripts": {
29
- "start": "start-storybook -c ../../storybook/config --port 5000",
29
+ "start": "storybook dev -c ../../storybook/config --port 5000",
30
30
  "build": "d2-app-scripts build"
31
31
  },
32
32
  "peerDependencies": {
33
- "react": "^16.8",
34
- "react-dom": "^16.8"
33
+ "react": "^16.13",
34
+ "react-dom": "^16.13"
35
35
  },
36
36
  "dependencies": {
37
37
  "@dhis2/prop-types": "^3.1.2",
38
- "@dhis2-ui/button": "9.10.3",
39
- "@dhis2-ui/checkbox": "9.10.3",
40
- "@dhis2-ui/field": "9.10.3",
41
- "@dhis2-ui/file-input": "9.10.3",
42
- "@dhis2-ui/input": "9.10.3",
43
- "@dhis2-ui/radio": "9.10.3",
44
- "@dhis2-ui/select": "9.10.3",
45
- "@dhis2-ui/switch": "9.10.3",
46
- "@dhis2-ui/text-area": "9.10.3",
38
+ "@dhis2-ui/button": "9.11.1-beta.1",
39
+ "@dhis2-ui/checkbox": "9.11.1-beta.1",
40
+ "@dhis2-ui/field": "9.11.1-beta.1",
41
+ "@dhis2-ui/file-input": "9.11.1-beta.1",
42
+ "@dhis2-ui/input": "9.11.1-beta.1",
43
+ "@dhis2-ui/radio": "9.11.1-beta.1",
44
+ "@dhis2-ui/select": "9.11.1-beta.1",
45
+ "@dhis2-ui/switch": "9.11.1-beta.1",
46
+ "@dhis2-ui/text-area": "9.11.1-beta.1",
47
47
  "classnames": "^2.3.1",
48
48
  "final-form": "^4.20.2",
49
49
  "prop-types": "^15.7.2",
@@ -1,27 +0,0 @@
1
- "use strict";
2
-
3
- var _react = require("@storybook/react");
4
-
5
- var _react2 = _interopRequireDefault(require("react"));
6
-
7
- var _reactFinalForm = require("react-final-form");
8
-
9
- var _formDecorator = require("../formDecorator.js");
10
-
11
- var _index = require("../validators/index.js");
12
-
13
- var _InputFieldFF = require("./InputFieldFF.js");
14
-
15
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
-
17
- (0, _react.storiesOf)('Testing:InputFieldFF', module).addDecorator(_formDecorator.formDecorator).add('Default', () => /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
18
- component: _InputFieldFF.InputFieldFF,
19
- name: "agree",
20
- label: "Do you agree?"
21
- })).add('Required', () => /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
22
- name: "agree",
23
- component: _InputFieldFF.InputFieldFF,
24
- required: true,
25
- validate: _index.hasValue,
26
- label: "Do you agree?"
27
- }));
@@ -1,91 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.InitialValue = exports.Default = void 0;
7
-
8
- var _react = _interopRequireDefault(require("react"));
9
-
10
- var _reactFinalForm = require("react-final-form");
11
-
12
- var _formDecorator = require("../formDecorator.js");
13
-
14
- var _propTypes = require("../shared/propTypes.js");
15
-
16
- var _MultiSelectFieldFF = require("./MultiSelectFieldFF.js");
17
-
18
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
-
20
- const description = "\nThe `MultiSelectFieldFF` is a wrapper around a `MultiSelectField` 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={MultiSelectFieldFF} />`. See the code samples below for examples.\n\n#### Props\n\nThe props shown in the table below are generally provided to the `MultiSelectFieldFF` wrapper by the Final Form `Field`.\n\nNote that any props beyond the API of the `Field` component will be spread to the `MultiSelectFieldFF`, which passes any extra props to the underlying `MultiSelectField` using `{...rest}`.\n\nTherefore, to add any props to the `MultiSelectFieldFF` or `MultiSelectField`, add those props to the parent Final Form `Field` component.\n\nAlso see `MultiSelect` and `MultiSelectField` for notes about props and implementation.\n\n```js\nimport { MultiSelectFieldFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n\n_**Note:** Dropdowns may not appear correctly on this page. See the affected demos in the 'Canvas' tab for propper dropdown placement._\n";
21
- const options = [{
22
- value: '1',
23
- label: 'one'
24
- }, {
25
- value: '2',
26
- label: 'two'
27
- }, {
28
- value: '3',
29
- label: 'three'
30
- }, {
31
- value: '4',
32
- label: 'four'
33
- }, {
34
- value: '5',
35
- label: 'five'
36
- }, {
37
- value: '6',
38
- label: 'six'
39
- }, {
40
- value: '7',
41
- label: 'seven'
42
- }, {
43
- value: '8',
44
- label: 'eight'
45
- }, {
46
- value: '9',
47
- label: 'nine'
48
- }, {
49
- value: '10',
50
- label: 'ten'
51
- }];
52
- const initialValue = ['3', '4', '9', '10'];
53
- var _default = {
54
- title: 'Multi Select Field (Final Form)',
55
- component: _MultiSelectFieldFF.MultiSelectFieldFF,
56
- decorators: [_formDecorator.formDecorator],
57
- parameters: {
58
- docs: {
59
- description: {
60
- component: description
61
- }
62
- }
63
- },
64
- argTypes: {
65
- input: { ..._propTypes.inputArgType
66
- },
67
- meta: { ..._propTypes.metaArgType
68
- }
69
- }
70
- };
71
- exports.default = _default;
72
-
73
- const Default = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
74
- component: _MultiSelectFieldFF.MultiSelectFieldFF,
75
- name: "agree",
76
- label: "Do you agree?",
77
- options: options
78
- });
79
-
80
- exports.Default = Default;
81
-
82
- const InitialValue = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
83
- component: _MultiSelectFieldFF.MultiSelectFieldFF,
84
- name: "agree",
85
- label: "Do you agree?",
86
- options: options,
87
- initialValue: initialValue
88
- });
89
-
90
- exports.InitialValue = InitialValue;
91
- InitialValue.storyName = 'InitialValue';
@@ -1,45 +0,0 @@
1
- "use strict";
2
-
3
- var _react = require("@storybook/react");
4
-
5
- var _react2 = _interopRequireDefault(require("react"));
6
-
7
- var _reactFinalForm = require("react-final-form");
8
-
9
- var _FieldGroupFF = require("../FieldGroupFF/FieldGroupFF.js");
10
-
11
- var _formDecorator = require("../formDecorator.js");
12
-
13
- var _index = require("../validators/index.js");
14
-
15
- var _RadioFieldFF = require("./RadioFieldFF.js");
16
-
17
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18
-
19
- (0, _react.storiesOf)('Testing:RadioFieldFF', module).addDecorator(_formDecorator.formDecorator).add('Required and no selected value', () => /*#__PURE__*/_react2.default.createElement(_FieldGroupFF.FieldGroupFF, {
20
- name: "choice"
21
- }, /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
22
- type: "radio",
23
- component: _RadioFieldFF.RadioFieldFF,
24
- name: "choice",
25
- label: "One",
26
- value: "one",
27
- validate: _index.hasValue,
28
- required: true
29
- }), /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
30
- type: "radio",
31
- component: _RadioFieldFF.RadioFieldFF,
32
- name: "choice",
33
- label: "Two",
34
- value: "two",
35
- validate: _index.hasValue,
36
- required: true
37
- }), /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
38
- type: "radio",
39
- component: _RadioFieldFF.RadioFieldFF,
40
- name: "choice",
41
- label: "Three",
42
- value: "three",
43
- validate: _index.hasValue,
44
- required: true
45
- })));
@@ -1,37 +0,0 @@
1
- "use strict";
2
-
3
- var _react = require("@storybook/react");
4
-
5
- var _react2 = _interopRequireDefault(require("react"));
6
-
7
- var _reactFinalForm = require("react-final-form");
8
-
9
- var _formDecorator = require("../formDecorator.js");
10
-
11
- var _index = require("../validators/index.js");
12
-
13
- var _SingleSelectFieldFF = require("./SingleSelectFieldFF.js");
14
-
15
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
-
17
- const defaultOptions = [{
18
- value: 'initial',
19
- label: 'Initial'
20
- }];
21
- (0, _react.storiesOf)('Testing:SingleSelectFieldFF', module).addDecorator(_formDecorator.formDecorator).addParameters({
22
- options: {
23
- showPanel: false
24
- }
25
- }).add('Required', (_, _ref) => {
26
- let {
27
- cypressProps
28
- } = _ref;
29
- return /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
30
- required: true,
31
- name: "singleSelect",
32
- label: "Single select",
33
- component: _SingleSelectFieldFF.SingleSelectFieldFF,
34
- validate: _index.hasValue,
35
- options: cypressProps.options || defaultOptions
36
- });
37
- });
@@ -1,90 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.InitialValue = exports.Default = void 0;
7
-
8
- var _react = _interopRequireDefault(require("react"));
9
-
10
- var _reactFinalForm = require("react-final-form");
11
-
12
- var _formDecorator = require("../formDecorator.js");
13
-
14
- var _propTypes = require("../shared/propTypes.js");
15
-
16
- var _SingleSelectFieldFF = require("./SingleSelectFieldFF.js");
17
-
18
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
-
20
- const description = "\nThe `SingleSelectFieldFF` is a wrapper around a `SingleSelectField` 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={SingleSelectFieldFF} />`. See the code samples below for examples.\n\n#### Props\n\nThe props shown in the table below are generally provided to the `SingleSelectFieldFF` wrapper by the Final Form `Field`.\n\nNote that any props beyond the API of the `Field` component will be spread to the `SingleSelectFieldFF`, which passes any extra props to the underlying `SingleSelectField` using `{...rest}`.\n\nTherefore, to add any props to the `SingleSelectFieldFF` or `SingleSelectField`, add those props to the parent Final Form `Field` component.\n\nAlso see `SingleSelect` and `SingleSelectField` for notes about props and implementation.\n\n```js\nimport { SingleSelectFieldFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n\n_**Note:** Dropdowns may not appear correctly on this page. See the affected demos in the 'Canvas' tab for propper dropdown placement._\n";
21
- const options = [{
22
- value: '1',
23
- label: 'one'
24
- }, {
25
- value: '2',
26
- label: 'two'
27
- }, {
28
- value: '3',
29
- label: 'three'
30
- }, {
31
- value: '4',
32
- label: 'four'
33
- }, {
34
- value: '5',
35
- label: 'five'
36
- }, {
37
- value: '6',
38
- label: 'six'
39
- }, {
40
- value: '7',
41
- label: 'seven'
42
- }, {
43
- value: '8',
44
- label: 'eight'
45
- }, {
46
- value: '9',
47
- label: 'nine'
48
- }, {
49
- value: '10',
50
- label: 'ten'
51
- }];
52
- var _default = {
53
- title: 'Single Select Field (Final Form)',
54
- component: _SingleSelectFieldFF.SingleSelectFieldFF,
55
- decorators: [_formDecorator.formDecorator],
56
- parameters: {
57
- docs: {
58
- description: {
59
- component: description
60
- }
61
- }
62
- },
63
- argTypes: {
64
- input: { ..._propTypes.inputArgType
65
- },
66
- meta: { ..._propTypes.metaArgType
67
- }
68
- }
69
- };
70
- exports.default = _default;
71
-
72
- const Default = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
73
- component: _SingleSelectFieldFF.SingleSelectFieldFF,
74
- name: "agree",
75
- label: "Do you agree?",
76
- options: options
77
- });
78
-
79
- exports.Default = Default;
80
-
81
- const InitialValue = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
82
- component: _SingleSelectFieldFF.SingleSelectFieldFF,
83
- name: "agree",
84
- label: "Do you agree?",
85
- options: options,
86
- initialValue: "4"
87
- });
88
-
89
- exports.InitialValue = InitialValue;
90
- InitialValue.storyName = 'InitialValue';
@@ -1,49 +0,0 @@
1
- "use strict";
2
-
3
- var _react = require("@storybook/react");
4
-
5
- var _react2 = _interopRequireDefault(require("react"));
6
-
7
- var _reactFinalForm = require("react-final-form");
8
-
9
- var _formDecorator = require("../formDecorator.js");
10
-
11
- var _index = require("../validators/index.js");
12
-
13
- var _SwitchFieldFF = require("./SwitchFieldFF.js");
14
-
15
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
-
17
- // https://github.com/final-form/react-final-form-arrays/issues/111
18
- const initialValue = ['yes'];
19
- (0, _react.storiesOf)('Testing:SwitchFieldFF', module).addDecorator(_formDecorator.formDecorator).add('Unchecked', () => /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
20
- component: _SwitchFieldFF.SwitchFieldFF,
21
- className: "switch",
22
- name: "switch",
23
- label: "Label text",
24
- validate: _index.hasValue,
25
- required: true,
26
- type: "checkbox"
27
- })).add('Checked ', () => /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
28
- component: _SwitchFieldFF.SwitchFieldFF,
29
- className: "switch",
30
- name: "switch",
31
- label: "Label text",
32
- initialValue: true,
33
- type: "checkbox"
34
- })).add('Unchecked with value', () => /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
35
- component: _SwitchFieldFF.SwitchFieldFF,
36
- className: "switch",
37
- name: "switch",
38
- label: "Label text",
39
- value: "yes",
40
- type: "checkbox"
41
- })).add('Checked with value', () => /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
42
- component: _SwitchFieldFF.SwitchFieldFF,
43
- className: "switch",
44
- name: "switch",
45
- label: "Label text",
46
- value: "yes",
47
- initialValue: initialValue,
48
- type: "checkbox"
49
- }));