@ilo-org/react 0.7.8 → 0.8.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 (174) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/lib/cjs/components/Checkbox/Checkbox.js +28 -16
  3. package/lib/cjs/components/Checkbox/index.js +25 -3
  4. package/lib/cjs/components/DatePicker/DatePicker.js +21 -16
  5. package/lib/cjs/components/DatePicker/index.js +4 -4
  6. package/lib/cjs/components/Dropdown/Dropdown.js +19 -15
  7. package/lib/cjs/components/Dropdown/index.js +3 -3
  8. package/lib/cjs/components/Fieldset/Fieldset.js +33 -9
  9. package/lib/cjs/components/Fieldset/index.js +2 -2
  10. package/lib/cjs/components/FileUpload/FileUpload.js +29 -15
  11. package/lib/cjs/components/FileUpload/index.js +3 -3
  12. package/lib/cjs/components/Form/Form.js +8 -55
  13. package/lib/cjs/components/Form/index.js +10 -20
  14. package/lib/cjs/components/FormControl/FormControl.js +79 -0
  15. package/lib/cjs/components/FormControl/index.js +16 -0
  16. package/lib/cjs/components/Input/Input.js +1 -1
  17. package/lib/cjs/components/NumberPicker/NumberPicker.js +21 -16
  18. package/lib/cjs/components/NumberPicker/index.js +4 -4
  19. package/lib/cjs/components/Radio/Radio.js +34 -17
  20. package/lib/cjs/components/Radio/index.js +19 -4
  21. package/lib/cjs/components/TextInput/TextInput.js +30 -0
  22. package/lib/cjs/components/TextInput/index.js +52 -0
  23. package/lib/cjs/components/Textarea/Textarea.js +19 -19
  24. package/lib/cjs/components/Textarea/index.js +26 -5
  25. package/lib/cjs/components/Toggle/Toggle.js +33 -0
  26. package/lib/cjs/components/Toggle/index.js +51 -0
  27. package/lib/cjs/components/Tooltip/Tooltip.js +2 -2
  28. package/lib/cjs/components/index.js +10 -11
  29. package/lib/cjs/hooks/usePrevious.js +20 -0
  30. package/lib/cjs/index.js +10 -11
  31. package/lib/esm/components/Checkbox/Checkbox.js +31 -19
  32. package/lib/esm/components/Checkbox/index.js +27 -2
  33. package/lib/esm/components/DatePicker/DatePicker.js +22 -17
  34. package/lib/esm/components/DatePicker/index.js +4 -4
  35. package/lib/esm/components/Dropdown/Dropdown.js +20 -16
  36. package/lib/esm/components/Dropdown/index.js +3 -3
  37. package/lib/esm/components/Fieldset/Fieldset.js +31 -11
  38. package/lib/esm/components/Fieldset/index.js +1 -1
  39. package/lib/esm/components/FileUpload/FileUpload.js +31 -17
  40. package/lib/esm/components/FileUpload/index.js +3 -3
  41. package/lib/esm/components/Form/Form.js +10 -57
  42. package/lib/esm/components/Form/index.js +13 -20
  43. package/lib/esm/components/FormControl/FormControl.js +73 -0
  44. package/lib/esm/components/{ChoiceGroup → FormControl}/index.js +3 -6
  45. package/lib/esm/components/NumberPicker/NumberPicker.js +21 -16
  46. package/lib/esm/components/NumberPicker/index.js +4 -4
  47. package/lib/esm/components/Radio/Radio.js +34 -17
  48. package/lib/esm/components/Radio/index.js +21 -3
  49. package/lib/esm/components/TextInput/TextInput.js +28 -0
  50. package/lib/esm/components/TextInput/index.js +49 -0
  51. package/lib/esm/components/Textarea/Textarea.js +19 -19
  52. package/lib/esm/components/Textarea/index.js +28 -4
  53. package/lib/esm/components/Toggle/Toggle.js +31 -0
  54. package/lib/esm/components/Toggle/index.js +48 -0
  55. package/lib/esm/components/Tooltip/Tooltip.js +2 -2
  56. package/lib/esm/components/index.js +8 -5
  57. package/lib/esm/hooks/usePrevious.js +15 -0
  58. package/lib/esm/index.js +8 -5
  59. package/lib/types/react/src/components/Checkbox/Checkbox.args.d.ts +52 -0
  60. package/lib/types/react/src/components/Checkbox/Checkbox.d.ts +5 -3
  61. package/lib/types/react/src/components/Checkbox/Checkbox.props.d.ts +4 -13
  62. package/lib/types/react/src/components/Checkbox/index.d.ts +1 -0
  63. package/lib/types/react/src/components/DatePicker/DatePicker.d.ts +4 -3
  64. package/lib/types/react/src/components/DatePicker/DatePicker.props.d.ts +10 -43
  65. package/lib/types/react/src/components/Dropdown/Dropdown.d.ts +5 -3
  66. package/lib/types/react/src/components/Dropdown/Dropdown.props.d.ts +16 -42
  67. package/lib/types/react/src/components/Fieldset/Fieldset.d.ts +6 -0
  68. package/lib/types/react/src/components/Fieldset/Fieldset.props.d.ts +14 -21
  69. package/lib/types/react/src/components/FileUpload/FileUpload.d.ts +5 -3
  70. package/lib/types/react/src/components/FileUpload/FileUpload.props.d.ts +7 -44
  71. package/lib/types/react/src/components/Form/Form.args.d.ts +2 -0
  72. package/lib/types/react/src/components/Form/Form.d.ts +1 -2
  73. package/lib/types/react/src/components/Form/Form.props.d.ts +4 -111
  74. package/lib/types/react/src/components/Form/index.d.ts +1 -0
  75. package/lib/types/react/src/components/FormControl/FormControl.d.ts +9 -0
  76. package/lib/types/react/src/components/FormControl/FormControl.props.d.ts +55 -0
  77. package/lib/types/react/src/components/FormControl/index.d.ts +2 -0
  78. package/lib/types/react/src/components/FormElement/FormElement.props.d.ts +2 -2
  79. package/lib/types/react/src/components/Input/Input.props.d.ts +2 -2
  80. package/lib/types/react/src/components/NumberPicker/NumberPicker.d.ts +5 -3
  81. package/lib/types/react/src/components/NumberPicker/NumberPicker.props.d.ts +5 -42
  82. package/lib/types/react/src/components/Radio/Radio.args.d.ts +8 -0
  83. package/lib/types/react/src/components/Radio/Radio.d.ts +5 -3
  84. package/lib/types/react/src/components/Radio/Radio.props.d.ts +4 -14
  85. package/lib/types/react/src/components/Radio/index.d.ts +1 -0
  86. package/lib/types/react/src/components/TextInput/TextInput.args.d.ts +10 -0
  87. package/lib/types/react/src/components/TextInput/TextInput.d.ts +6 -0
  88. package/lib/types/react/src/components/TextInput/TextInput.props.d.ts +17 -0
  89. package/lib/types/react/src/components/TextInput/index.d.ts +2 -0
  90. package/lib/types/react/src/components/Textarea/Textarea.args.d.ts +10 -0
  91. package/lib/types/react/src/components/Textarea/Textarea.d.ts +5 -3
  92. package/lib/types/react/src/components/Textarea/Textarea.props.d.ts +17 -39
  93. package/lib/types/react/src/components/Textarea/index.d.ts +2 -0
  94. package/lib/types/react/src/components/Toggle/Toggle.args.d.ts +12 -0
  95. package/lib/types/react/src/components/Toggle/Toggle.d.ts +5 -0
  96. package/lib/types/react/src/components/Toggle/Toggle.props.d.ts +22 -0
  97. package/lib/types/react/src/components/Toggle/index.d.ts +3 -0
  98. package/lib/types/react/src/components/Tooltip/Tooltip.props.d.ts +4 -0
  99. package/lib/types/react/src/components/index.d.ts +1 -5
  100. package/lib/types/react/src/hooks/usePrevious.d.ts +2 -0
  101. package/lib/types/react/src/types/index.d.ts +57 -1
  102. package/package.json +20 -19
  103. package/src/components/Checkbox/Checkbox.args.ts +31 -9
  104. package/src/components/Checkbox/Checkbox.props.ts +5 -13
  105. package/src/components/Checkbox/Checkbox.tsx +78 -76
  106. package/src/components/Checkbox/index.ts +1 -0
  107. package/src/components/DatePicker/DatePicker.args.ts +6 -32
  108. package/src/components/DatePicker/DatePicker.props.ts +11 -51
  109. package/src/components/DatePicker/DatePicker.tsx +71 -110
  110. package/src/components/Dropdown/Dropdown.args.ts +42 -192
  111. package/src/components/Dropdown/Dropdown.props.ts +18 -49
  112. package/src/components/Dropdown/Dropdown.tsx +73 -62
  113. package/src/components/Fieldset/Fieldset.props.ts +14 -23
  114. package/src/components/Fieldset/Fieldset.tsx +75 -69
  115. package/src/components/FileUpload/FileUpload.args.ts +25 -27
  116. package/src/components/FileUpload/FileUpload.props.ts +8 -53
  117. package/src/components/FileUpload/FileUpload.tsx +103 -72
  118. package/src/components/Form/Form.args.ts +2 -184
  119. package/src/components/Form/Form.props.ts +4 -133
  120. package/src/components/Form/Form.tsx +17 -77
  121. package/src/components/Form/index.ts +1 -0
  122. package/src/components/FormControl/FormControl.props.ts +72 -0
  123. package/src/components/FormControl/FormControl.tsx +169 -0
  124. package/src/components/FormControl/index.ts +2 -0
  125. package/src/components/FormElement/FormElement.props.ts +2 -2
  126. package/src/components/Input/Input.props.ts +2 -2
  127. package/src/components/Navigation/Navigation.args.ts +2 -1
  128. package/src/components/NumberPicker/NumberPicker.args.ts +18 -26
  129. package/src/components/NumberPicker/NumberPicker.props.ts +7 -52
  130. package/src/components/NumberPicker/NumberPicker.tsx +73 -56
  131. package/src/components/Radio/Radio.args.ts +1 -7
  132. package/src/components/Radio/Radio.props.ts +6 -14
  133. package/src/components/Radio/Radio.tsx +90 -52
  134. package/src/components/Radio/index.ts +1 -0
  135. package/src/components/TextInput/TextInput.args.ts +75 -0
  136. package/src/components/TextInput/TextInput.props.ts +20 -0
  137. package/src/components/TextInput/TextInput.tsx +71 -0
  138. package/src/components/TextInput/index.ts +2 -0
  139. package/src/components/Textarea/Textarea.args.ts +19 -37
  140. package/src/components/Textarea/Textarea.props.ts +18 -46
  141. package/src/components/Textarea/Textarea.tsx +44 -59
  142. package/src/components/Textarea/index.ts +2 -0
  143. package/src/components/Toggle/Toggle.args.ts +62 -0
  144. package/src/components/Toggle/Toggle.props.ts +27 -0
  145. package/src/components/Toggle/Toggle.tsx +85 -0
  146. package/src/components/Toggle/index.ts +3 -0
  147. package/src/components/Tooltip/Tooltip.props.ts +5 -0
  148. package/src/components/Tooltip/Tooltip.tsx +2 -0
  149. package/src/components/index.ts +1 -5
  150. package/src/hooks/usePrevious.ts +15 -0
  151. package/src/types/forms.args.ts +288 -0
  152. package/src/types/index.ts +69 -1
  153. package/tsconfig.json +2 -1
  154. package/lib/cjs/components/ChoiceGroup/ChoiceGroup.js +0 -34
  155. package/lib/cjs/components/ChoiceGroup/index.js +0 -19
  156. package/lib/cjs/components/FormGroup/FormGroup.js +0 -58
  157. package/lib/cjs/components/FormGroup/index.js +0 -26
  158. package/lib/esm/components/ChoiceGroup/ChoiceGroup.js +0 -32
  159. package/lib/esm/components/FormGroup/FormGroup.js +0 -56
  160. package/lib/esm/components/FormGroup/index.js +0 -20
  161. package/lib/types/react/src/components/ChoiceGroup/ChoiceGroup.d.ts +0 -4
  162. package/lib/types/react/src/components/ChoiceGroup/ChoiceGroup.props.d.ts +0 -20
  163. package/lib/types/react/src/components/ChoiceGroup/index.d.ts +0 -1
  164. package/lib/types/react/src/components/FormGroup/FormGroup.d.ts +0 -4
  165. package/lib/types/react/src/components/FormGroup/FormGroup.props.d.ts +0 -81
  166. package/lib/types/react/src/components/FormGroup/index.d.ts +0 -1
  167. package/src/components/ChoiceGroup/ChoiceGroup.args.ts +0 -95
  168. package/src/components/ChoiceGroup/ChoiceGroup.props.ts +0 -25
  169. package/src/components/ChoiceGroup/ChoiceGroup.tsx +0 -54
  170. package/src/components/ChoiceGroup/index.ts +0 -1
  171. package/src/components/FormGroup/FormGroup.args.ts +0 -85
  172. package/src/components/FormGroup/FormGroup.props.ts +0 -102
  173. package/src/components/FormGroup/FormGroup.tsx +0 -73
  174. package/src/components/FormGroup/index.ts +0 -1
@@ -1,3 +1,5 @@
1
+ import { FormControlPublicProps } from "../components/FormControl/FormControl.props";
2
+
1
3
  // export type AccordionSize = "small" | "large";
2
4
  export type ThemeTypes = "light" | "dark";
3
5
  export type ButtonFunctions = "button" | "submit" | "reset";
@@ -17,7 +19,7 @@ export type FieldTypes =
17
19
  | "file";
18
20
  export type FormGroupTypes = "default" | "filter";
19
21
  export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
20
- export type InputTypes =
22
+ export type TextInputTypes =
21
23
  | "email"
22
24
  | "hidden"
23
25
  | "password"
@@ -62,3 +64,69 @@ export type CardTypes =
62
64
  | "detail"
63
65
  | "factlist"
64
66
  | "data";
67
+ export interface FormFieldProps<T> {
68
+ /**
69
+ * The input's onChange callback.
70
+ */
71
+ onChange?: (e: React.ChangeEvent<T>) => any;
72
+
73
+ /**
74
+ * The input's onBlur callback.
75
+ */
76
+ onBlur?: (e: React.FocusEvent<T>) => any;
77
+
78
+ /**
79
+ * Specify an optional className to be added to your input.
80
+ */
81
+ className?: string;
82
+
83
+ /**
84
+ * Is the input disabled?
85
+ */
86
+ disabled?: boolean;
87
+
88
+ /**
89
+ * Does the input have an error?
90
+ */
91
+ error?: boolean;
92
+
93
+ /**
94
+ * The input's id attribute. Will otherwise be set to the same value as `name`.
95
+ */
96
+ id?: string;
97
+
98
+ /**
99
+ * The input's name attribute.
100
+ */
101
+ name: string;
102
+
103
+ /**
104
+ * Specify whether this input is required
105
+ */
106
+ required?: boolean;
107
+
108
+ /**
109
+ * Inline styles applies to the outermost container
110
+ */
111
+ style?: React.CSSProperties;
112
+ }
113
+
114
+ export interface ChoiceFieldProps<T> extends FormFieldProps<T> {
115
+ /**
116
+ * Whether the input should be checked by default
117
+ **/
118
+ defaultChecked?: boolean;
119
+
120
+ /**
121
+ * Whether the input is checked
122
+ */
123
+ checked?: boolean;
124
+
125
+ /**
126
+ * The input's value attribute.
127
+ */
128
+ value?: string;
129
+ }
130
+
131
+ export type LabelledFormFieldProps<T> = T &
132
+ FormControlPublicProps & { inputStyle?: React.CSSProperties };
package/tsconfig.json CHANGED
@@ -2,6 +2,7 @@
2
2
  "extends": "./tsconfig.build.json",
3
3
  "exclude": ["node_modules", "lib", "storybook-static"],
4
4
  "compilerOptions": {
5
- "types": ["jest", "node"]
5
+ "types": ["jest", "node"],
6
+ "module": "ESNext"
6
7
  }
7
8
  }
@@ -1,34 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var require$$0 = require('react');
5
- var components_Checkbox_Checkbox = require('../Checkbox/Checkbox.js');
6
- var components_Fieldset_Fieldset = require('../Fieldset/Fieldset.js');
7
- var components_Radio_Radio = require('../Radio/Radio.js');
8
- require('classnames');
9
- require('../../hooks/useGlobalSettings.js');
10
- require('tslib');
11
- require('../../GlobalCtx-97e4b433.js');
12
- require('../FormElement/FormElement.js');
13
- require('../Tooltip/Tooltip.js');
14
- require('react-dom');
15
-
16
- const ChoiceGroup = ({ className, choicegroupid, grouperror, grouphelper, grouptooltip, items, legend, }) => {
17
- // whatever type the first item has we expect from the other items
18
- const sanitzeditems = items.filter((item) => item !== items[0].type);
19
- const [radio, setRadio] = require$$0.useState(false);
20
- const radioChangeHandler = (e) => {
21
- setRadio(e.target.value);
22
- };
23
- return (jsxRuntime.jsx(components_Fieldset_Fieldset, Object.assign({ className: `ilo--choice-group ${className ? className : ""}`, legend: legend, fieldsetid: choicegroupid, grouphelper: grouphelper, grouperror: grouperror, grouptooltip: grouptooltip }, { children: sanitzeditems.map((item, i) => {
24
- if ((item === null || item === void 0 ? void 0 : item.type) === "checkbox") {
25
- return require$$0.createElement(components_Checkbox_Checkbox, Object.assign({}, item, { key: i }));
26
- }
27
- if ((item === null || item === void 0 ? void 0 : item.type) === "radio") {
28
- return (require$$0.createElement(components_Radio_Radio, Object.assign({}, item, { callback: radioChangeHandler, selected: radio, key: i })));
29
- }
30
- return null;
31
- }) })));
32
- };
33
-
34
- module.exports = ChoiceGroup;
@@ -1,19 +0,0 @@
1
- 'use strict';
2
-
3
- var components_ChoiceGroup_ChoiceGroup = require('./ChoiceGroup.js');
4
- require('react/jsx-runtime');
5
- require('react');
6
- require('../Checkbox/Checkbox.js');
7
- require('classnames');
8
- require('../../hooks/useGlobalSettings.js');
9
- require('tslib');
10
- require('../../GlobalCtx-97e4b433.js');
11
- require('../Fieldset/Fieldset.js');
12
- require('../Tooltip/Tooltip.js');
13
- require('react-dom');
14
- require('../FormElement/FormElement.js');
15
- require('../Radio/Radio.js');
16
-
17
-
18
-
19
- exports.ChoiceGroup = components_ChoiceGroup_ChoiceGroup;
@@ -1,58 +0,0 @@
1
- 'use strict';
2
-
3
- var require$$0 = require('react');
4
- var jsxRuntime = require('react/jsx-runtime');
5
- var classNames = require('classnames');
6
- var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
7
- var components_Checkbox_Checkbox = require('../Checkbox/Checkbox.js');
8
- var components_ChoiceGroup_ChoiceGroup = require('../ChoiceGroup/ChoiceGroup.js');
9
- var components_DatePicker_DatePicker = require('../DatePicker/DatePicker.js');
10
- var components_Dropdown_Dropdown = require('../Dropdown/Dropdown.js');
11
- var components_FileUpload_FileUpload = require('../FileUpload/FileUpload.js');
12
- var components_Input_Input = require('../Input/Input.js');
13
- var components_NumberPicker_NumberPicker = require('../NumberPicker/NumberPicker.js');
14
- var components_Textarea_Textarea = require('../Textarea/Textarea.js');
15
- require('tslib');
16
- require('../../GlobalCtx-97e4b433.js');
17
- require('../Fieldset/Fieldset.js');
18
- require('../Tooltip/Tooltip.js');
19
- require('react-dom');
20
- require('../FormElement/FormElement.js');
21
- require('../Radio/Radio.js');
22
-
23
- const FormGroup = ({ className, formgroupid, items, legend, type, }) => {
24
- const { prefix } = hooks_useGlobalSettings();
25
- const baseClass = `${prefix}--formgroup`;
26
- const formGroupClasses = classNames(className, {
27
- [baseClass]: true,
28
- });
29
- return (jsxRuntime.jsxs("fieldset", Object.assign({ className: `${formGroupClasses} ${type}`, id: formgroupid ? formgroupid : undefined }, { children: [legend && jsxRuntime.jsx("legend", Object.assign({ className: `${baseClass}--legend` }, { children: legend })), items.map((item, i) => {
30
- if ((item === null || item === void 0 ? void 0 : item.type) === "input") {
31
- return require$$0.createElement(components_Input_Input, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
32
- }
33
- if ((item === null || item === void 0 ? void 0 : item.type) === "dropdown") {
34
- return require$$0.createElement(components_Dropdown_Dropdown, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
35
- }
36
- if ((item === null || item === void 0 ? void 0 : item.type) === "checkbox" && Array.isArray(item === null || item === void 0 ? void 0 : item.field) === false) {
37
- return require$$0.createElement(components_Checkbox_Checkbox, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
38
- }
39
- if (((item === null || item === void 0 ? void 0 : item.type) === "checkbox" || (item === null || item === void 0 ? void 0 : item.type) === "radio") &&
40
- Array.isArray(item === null || item === void 0 ? void 0 : item.field)) {
41
- return (jsxRuntime.jsx(components_ChoiceGroup_ChoiceGroup, { items: item === null || item === void 0 ? void 0 : item.field, legend: item === null || item === void 0 ? void 0 : item.legend, choicegroupid: item === null || item === void 0 ? void 0 : item.choicegroupid }, i));
42
- }
43
- if ((item === null || item === void 0 ? void 0 : item.type) === "file") {
44
- return require$$0.createElement(components_FileUpload_FileUpload, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
45
- }
46
- if ((item === null || item === void 0 ? void 0 : item.type) === "date") {
47
- return require$$0.createElement(components_DatePicker_DatePicker, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
48
- }
49
- if ((item === null || item === void 0 ? void 0 : item.type) === "number") {
50
- return require$$0.createElement(components_NumberPicker_NumberPicker, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
51
- }
52
- if ((item === null || item === void 0 ? void 0 : item.type) === "textarea") {
53
- return require$$0.createElement(components_Textarea_Textarea, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
54
- }
55
- })] })));
56
- };
57
-
58
- module.exports = FormGroup;
@@ -1,26 +0,0 @@
1
- 'use strict';
2
-
3
- var components_FormGroup_FormGroup = require('./FormGroup.js');
4
- require('react');
5
- require('react/jsx-runtime');
6
- require('classnames');
7
- require('../../hooks/useGlobalSettings.js');
8
- require('tslib');
9
- require('../../GlobalCtx-97e4b433.js');
10
- require('../Checkbox/Checkbox.js');
11
- require('../Fieldset/Fieldset.js');
12
- require('../Tooltip/Tooltip.js');
13
- require('react-dom');
14
- require('../FormElement/FormElement.js');
15
- require('../ChoiceGroup/ChoiceGroup.js');
16
- require('../Radio/Radio.js');
17
- require('../DatePicker/DatePicker.js');
18
- require('../Dropdown/Dropdown.js');
19
- require('../FileUpload/FileUpload.js');
20
- require('../Input/Input.js');
21
- require('../NumberPicker/NumberPicker.js');
22
- require('../Textarea/Textarea.js');
23
-
24
-
25
-
26
- exports.FormGroup = components_FormGroup_FormGroup;
@@ -1,32 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { useState, createElement } from 'react';
3
- import Checkbox from '../Checkbox/Checkbox.js';
4
- import Fieldset from '../Fieldset/Fieldset.js';
5
- import Radio from '../Radio/Radio.js';
6
- import 'classnames';
7
- import '../../hooks/useGlobalSettings.js';
8
- import 'tslib';
9
- import '../../GlobalCtx-7fb23cfa.js';
10
- import '../FormElement/FormElement.js';
11
- import '../Tooltip/Tooltip.js';
12
- import 'react-dom';
13
-
14
- const ChoiceGroup = ({ className, choicegroupid, grouperror, grouphelper, grouptooltip, items, legend, }) => {
15
- // whatever type the first item has we expect from the other items
16
- const sanitzeditems = items.filter((item) => item !== items[0].type);
17
- const [radio, setRadio] = useState(false);
18
- const radioChangeHandler = (e) => {
19
- setRadio(e.target.value);
20
- };
21
- return (jsx(Fieldset, Object.assign({ className: `ilo--choice-group ${className ? className : ""}`, legend: legend, fieldsetid: choicegroupid, grouphelper: grouphelper, grouperror: grouperror, grouptooltip: grouptooltip }, { children: sanitzeditems.map((item, i) => {
22
- if ((item === null || item === void 0 ? void 0 : item.type) === "checkbox") {
23
- return createElement(Checkbox, Object.assign({}, item, { key: i }));
24
- }
25
- if ((item === null || item === void 0 ? void 0 : item.type) === "radio") {
26
- return (createElement(Radio, Object.assign({}, item, { callback: radioChangeHandler, selected: radio, key: i })));
27
- }
28
- return null;
29
- }) })));
30
- };
31
-
32
- export { ChoiceGroup as default };
@@ -1,56 +0,0 @@
1
- import { createElement } from 'react';
2
- import { jsxs, jsx } from 'react/jsx-runtime';
3
- import classNames from 'classnames';
4
- import useGlobalSettings from '../../hooks/useGlobalSettings.js';
5
- import Checkbox from '../Checkbox/Checkbox.js';
6
- import ChoiceGroup from '../ChoiceGroup/ChoiceGroup.js';
7
- import DatePicker from '../DatePicker/DatePicker.js';
8
- import Dropdown from '../Dropdown/Dropdown.js';
9
- import FileUpload from '../FileUpload/FileUpload.js';
10
- import Input from '../Input/Input.js';
11
- import NumberPicker from '../NumberPicker/NumberPicker.js';
12
- import Textarea from '../Textarea/Textarea.js';
13
- import 'tslib';
14
- import '../../GlobalCtx-7fb23cfa.js';
15
- import '../Fieldset/Fieldset.js';
16
- import '../Tooltip/Tooltip.js';
17
- import 'react-dom';
18
- import '../FormElement/FormElement.js';
19
- import '../Radio/Radio.js';
20
-
21
- const FormGroup = ({ className, formgroupid, items, legend, type, }) => {
22
- const { prefix } = useGlobalSettings();
23
- const baseClass = `${prefix}--formgroup`;
24
- const formGroupClasses = classNames(className, {
25
- [baseClass]: true,
26
- });
27
- return (jsxs("fieldset", Object.assign({ className: `${formGroupClasses} ${type}`, id: formgroupid ? formgroupid : undefined }, { children: [legend && jsx("legend", Object.assign({ className: `${baseClass}--legend` }, { children: legend })), items.map((item, i) => {
28
- if ((item === null || item === void 0 ? void 0 : item.type) === "input") {
29
- return createElement(Input, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
30
- }
31
- if ((item === null || item === void 0 ? void 0 : item.type) === "dropdown") {
32
- return createElement(Dropdown, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
33
- }
34
- if ((item === null || item === void 0 ? void 0 : item.type) === "checkbox" && Array.isArray(item === null || item === void 0 ? void 0 : item.field) === false) {
35
- return createElement(Checkbox, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
36
- }
37
- if (((item === null || item === void 0 ? void 0 : item.type) === "checkbox" || (item === null || item === void 0 ? void 0 : item.type) === "radio") &&
38
- Array.isArray(item === null || item === void 0 ? void 0 : item.field)) {
39
- return (jsx(ChoiceGroup, { items: item === null || item === void 0 ? void 0 : item.field, legend: item === null || item === void 0 ? void 0 : item.legend, choicegroupid: item === null || item === void 0 ? void 0 : item.choicegroupid }, i));
40
- }
41
- if ((item === null || item === void 0 ? void 0 : item.type) === "file") {
42
- return createElement(FileUpload, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
43
- }
44
- if ((item === null || item === void 0 ? void 0 : item.type) === "date") {
45
- return createElement(DatePicker, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
46
- }
47
- if ((item === null || item === void 0 ? void 0 : item.type) === "number") {
48
- return createElement(NumberPicker, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
49
- }
50
- if ((item === null || item === void 0 ? void 0 : item.type) === "textarea") {
51
- return createElement(Textarea, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
52
- }
53
- })] })));
54
- };
55
-
56
- export { FormGroup as default };
@@ -1,20 +0,0 @@
1
- export { default as FormGroup } from './FormGroup.js';
2
- import 'react';
3
- import 'react/jsx-runtime';
4
- import 'classnames';
5
- import '../../hooks/useGlobalSettings.js';
6
- import 'tslib';
7
- import '../../GlobalCtx-7fb23cfa.js';
8
- import '../Checkbox/Checkbox.js';
9
- import '../Fieldset/Fieldset.js';
10
- import '../Tooltip/Tooltip.js';
11
- import 'react-dom';
12
- import '../FormElement/FormElement.js';
13
- import '../ChoiceGroup/ChoiceGroup.js';
14
- import '../Radio/Radio.js';
15
- import '../DatePicker/DatePicker.js';
16
- import '../Dropdown/Dropdown.js';
17
- import '../FileUpload/FileUpload.js';
18
- import '../Input/Input.js';
19
- import '../NumberPicker/NumberPicker.js';
20
- import '../Textarea/Textarea.js';
@@ -1,4 +0,0 @@
1
- import { FC } from "react";
2
- import { ChoiceGroupProps } from "./ChoiceGroup.props";
3
- declare const ChoiceGroup: FC<ChoiceGroupProps>;
4
- export default ChoiceGroup;
@@ -1,20 +0,0 @@
1
- import { CheckboxProps } from "../Checkbox/Checkbox.props";
2
- import { RadioProps } from "../Radio/Radio.props";
3
- export interface CheckboxGroupItem {
4
- field: CheckboxProps;
5
- type: "checkbox";
6
- }
7
- export interface RadioGroupItem {
8
- field: RadioProps;
9
- type: "radio";
10
- }
11
- export type ChoiceGroupItem = CheckboxGroupItem | RadioGroupItem;
12
- export interface ChoiceGroupProps {
13
- className?: string;
14
- choicegroupid: string;
15
- grouperror?: string;
16
- grouphelper?: string;
17
- grouptooltip?: string;
18
- items: ChoiceGroupItem[];
19
- legend?: string;
20
- }
@@ -1 +0,0 @@
1
- export { default as ChoiceGroup } from "./ChoiceGroup";
@@ -1,4 +0,0 @@
1
- import { FC } from "react";
2
- import { FormGroupProps } from "./FormGroup.props";
3
- declare const FormGroup: FC<FormGroupProps>;
4
- export default FormGroup;
@@ -1,81 +0,0 @@
1
- import { FormGroupTypes } from "../../types";
2
- import { CheckboxProps } from "../Checkbox/Checkbox.props";
3
- import { DatePickerProps } from "../DatePicker/DatePicker.props";
4
- import { DropdownProps } from "../Dropdown/Dropdown.props";
5
- import { FileUploadProps } from "../FileUpload/FileUpload.props";
6
- import { InputProps } from "../Input/Input.props";
7
- import { NumberPickerProps } from "../NumberPicker/NumberPicker.props";
8
- import { RadioProps } from "../Radio/Radio.props";
9
- import { TextareaProps } from "../Textarea/Textarea.props";
10
- export interface InputItem {
11
- type: "input";
12
- field: InputProps;
13
- choicegroupid?: never;
14
- legend?: never;
15
- }
16
- export interface DropdownItem {
17
- type: "dropdown";
18
- field: DropdownProps;
19
- choicegroupid?: never;
20
- legend?: never;
21
- }
22
- export interface CheckboxItem {
23
- type: "checkbox";
24
- field: CheckboxProps | CheckboxProps[];
25
- choicegroupid: string;
26
- legend?: string;
27
- }
28
- export interface RadioItem {
29
- type: "radio";
30
- field: RadioProps | RadioProps[];
31
- choicegroupid: string;
32
- legend?: string;
33
- }
34
- export interface FileUploadItem {
35
- type: "file";
36
- field: FileUploadProps;
37
- choicegroupid?: never;
38
- legend?: never;
39
- }
40
- export interface NumberPickerItem {
41
- type: "number";
42
- field: NumberPickerProps;
43
- choicegroupid?: never;
44
- legend?: never;
45
- }
46
- export interface DatePickerItem {
47
- type: "date";
48
- field: DatePickerProps;
49
- choicegroupid?: never;
50
- legend?: never;
51
- }
52
- export interface TextareaItem {
53
- type: "textarea";
54
- field: TextareaProps;
55
- choicegroupid?: never;
56
- legend?: never;
57
- }
58
- type FormGroupItem = InputItem | DropdownItem | CheckboxItem | RadioItem | FileUploadItem | NumberPickerItem | DatePickerItem | TextareaItem;
59
- export interface FormGroupProps {
60
- /**
61
- * Specify an optional className to be added to your FormGroup component.
62
- */
63
- className?: string;
64
- /**
65
- * The ID of the FormGroup
66
- */
67
- formgroupid: string | boolean;
68
- /**
69
- * The inputs in this form group
70
- */
71
- items: FormGroupItem[];
72
- /**
73
- * The FormGroups's legend
74
- */
75
- legend: string | false;
76
- /**
77
- * This Form Groups's type
78
- */
79
- type: FormGroupTypes;
80
- }
81
- export {};
@@ -1 +0,0 @@
1
- export { default as FormGroup } from "./FormGroup";
@@ -1,95 +0,0 @@
1
- import {
2
- ChoiceGroupProps,
3
- CheckboxGroupItem,
4
- RadioGroupItem,
5
- } from "./ChoiceGroup.props";
6
- import CheckboxArgs from "../Checkbox/Checkbox.args";
7
- import RadioArgs from "../Radio/Radio.args";
8
-
9
- const checkboxfields = [] as CheckboxGroupItem[];
10
- const radiofields = [] as RadioGroupItem[];
11
- const radioid = `radio${Math.random() * (1000 - 1) + 1}`;
12
-
13
- for (let i = 0; i < 5; i++) {
14
- const checkboxargs = { ...CheckboxArgs.basic };
15
- const radioargs = { ...RadioArgs.basic };
16
- checkboxfields.push({ type: "checkbox", field: checkboxargs });
17
- checkboxfields[i].field.label = `Checkbox ${i}`;
18
- checkboxfields[i].field.name = `checkbox${i}`;
19
- checkboxfields[i].field.grouped = true;
20
- checkboxfields[i].type = "checkbox";
21
- radiofields.push({ type: "radio", field: radioargs });
22
- radiofields[i].field.label = `Radio ${i}`;
23
- radiofields[i].field.name = radioid;
24
- radiofields[i].type = "radio";
25
- }
26
-
27
- const checkboxes: ChoiceGroupProps = {
28
- choicegroupid: "checkboxgroup",
29
- items: checkboxfields,
30
- legend: "Checkbox Legend",
31
- };
32
-
33
- const radios: ChoiceGroupProps = {
34
- choicegroupid: "radiogroup",
35
- items: radiofields,
36
- legend: "Radio Legend",
37
- };
38
-
39
- const checkboxeshelper: ChoiceGroupProps = {
40
- choicegroupid: "checkboxgroup",
41
- grouphelper: "This is the helper text",
42
- items: checkboxfields,
43
- legend: "Checkbox Legend",
44
- };
45
-
46
- const radioshelper: ChoiceGroupProps = {
47
- choicegroupid: "radiogroup",
48
- grouphelper: "This is the helper text",
49
- items: radiofields,
50
- legend: "Radio Legend",
51
- };
52
-
53
- const checkboxeserror: ChoiceGroupProps = {
54
- choicegroupid: "checkboxgroup",
55
- grouperror: "this one has an error",
56
- items: checkboxfields,
57
- legend: "Checkbox Legend",
58
- };
59
-
60
- const radioserror: ChoiceGroupProps = {
61
- choicegroupid: "radiogroup",
62
- grouperror: "this one has an error",
63
- items: radiofields,
64
- legend: "Radio Legend",
65
- };
66
-
67
- const checkboxestooltip: ChoiceGroupProps = {
68
- choicegroupid: "checkboxgroup",
69
- items: checkboxfields,
70
- legend: "Checkbox Legend",
71
- grouptooltip: "This is the tooltip",
72
- };
73
-
74
- const radiostooltip: ChoiceGroupProps = {
75
- choicegroupid: "radiogroup",
76
- items: radiofields,
77
- legend: "Radio Legend",
78
- grouptooltip: "This is the tooltip",
79
- };
80
-
81
- /**
82
- * Sample prop definitions ChoiceGroup's enumerable properties (imported in stories and test)
83
- */
84
- const ChoiceGroupArgs = {
85
- checkboxes,
86
- radios,
87
- checkboxeshelper,
88
- radioshelper,
89
- checkboxeserror,
90
- radioserror,
91
- checkboxestooltip,
92
- radiostooltip,
93
- };
94
-
95
- export default ChoiceGroupArgs;
@@ -1,25 +0,0 @@
1
- // import { ChoiceGroupFieldTypes } from "../../types";
2
- import { CheckboxProps } from "../Checkbox/Checkbox.props";
3
- import { RadioProps } from "../Radio/Radio.props";
4
-
5
- export interface CheckboxGroupItem {
6
- field: CheckboxProps;
7
- type: "checkbox";
8
- }
9
-
10
- export interface RadioGroupItem {
11
- field: RadioProps;
12
- type: "radio";
13
- }
14
-
15
- export type ChoiceGroupItem = CheckboxGroupItem | RadioGroupItem;
16
-
17
- export interface ChoiceGroupProps {
18
- className?: string;
19
- choicegroupid: string;
20
- grouperror?: string;
21
- grouphelper?: string;
22
- grouptooltip?: string;
23
- items: ChoiceGroupItem[];
24
- legend?: string;
25
- }
@@ -1,54 +0,0 @@
1
- import { FC, useState } from "react";
2
- import { ChoiceGroupProps } from "./ChoiceGroup.props";
3
- import { Checkbox } from "../Checkbox";
4
- import { Fieldset } from "../Fieldset";
5
- import { Radio } from "../Radio";
6
-
7
- const ChoiceGroup: FC<ChoiceGroupProps> = ({
8
- className,
9
- choicegroupid,
10
- grouperror,
11
- grouphelper,
12
- grouptooltip,
13
- items,
14
- legend,
15
- }) => {
16
- // whatever type the first item has we expect from the other items
17
- const sanitzeditems = items.filter((item: any) => item !== items[0].type);
18
-
19
- const [radio, setRadio] = useState(false);
20
-
21
- const radioChangeHandler = (e: any) => {
22
- setRadio(e.target.value);
23
- };
24
-
25
- return (
26
- <Fieldset
27
- className={`ilo--choice-group ${className ? className : ""}`}
28
- legend={legend}
29
- fieldsetid={choicegroupid}
30
- grouphelper={grouphelper}
31
- grouperror={grouperror}
32
- grouptooltip={grouptooltip}
33
- >
34
- {sanitzeditems.map((item: any, i: any) => {
35
- if (item?.type === "checkbox") {
36
- return <Checkbox {...(item as any)} key={i} />;
37
- }
38
- if (item?.type === "radio") {
39
- return (
40
- <Radio
41
- {...(item as any)}
42
- callback={radioChangeHandler}
43
- selected={radio}
44
- key={i}
45
- />
46
- );
47
- }
48
- return null;
49
- })}
50
- </Fieldset>
51
- );
52
- };
53
-
54
- export default ChoiceGroup;
@@ -1 +0,0 @@
1
- export { default as ChoiceGroup } from "./ChoiceGroup";