@homefile/components-v2 2.14.2 → 2.14.3

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 (13) hide show
  1. package/dist/components/forms/dynamicForm/DynamicForm.js +2 -2
  2. package/dist/components/forms/dynamicForm/fields/GridField.js +2 -2
  3. package/dist/components/forms/dynamicForm/fields/SingleFields.js +2 -2
  4. package/dist/interfaces/forms/dynamicForm/DynamicForm.interface.d.ts +1 -0
  5. package/dist/mocks/forms/dynamicForm.mock.js +16 -0
  6. package/dist/utils/DynamicForm.utils.js +7 -0
  7. package/package.json +1 -1
  8. package/src/components/forms/dynamicForm/DynamicForm.tsx +2 -1
  9. package/src/components/forms/dynamicForm/fields/GridField.tsx +2 -2
  10. package/src/components/forms/dynamicForm/fields/SingleFields.tsx +2 -1
  11. package/src/interfaces/forms/dynamicForm/DynamicForm.interface.ts +1 -0
  12. package/src/mocks/forms/dynamicForm.mock.ts +16 -0
  13. package/src/utils/DynamicForm.utils.ts +7 -0
package/dist/components/forms/dynamicForm/DynamicForm.js CHANGED
@@ -24,13 +24,13 @@ export const DynamicForm = (_a) => {
24
24
  return _jsx(SearchItemLoader, {});
25
25
  }
26
26
  return (_jsxs(Stack, { bg: "lightBlue.1", spacing: "0", h: "full", overflowX: "hidden", children: [showTitle && (_jsx(Box, { px: "base", pt: "4", pb: "2", borderBottom: "1px dashed", borderColor: "lightBlue.6", children: _jsx(Text, { fontFamily: "secondary", children: title !== null && title !== void 0 ? title : t('forms.itemDetails') }) })), _jsx(FormProvider, Object.assign({}, form, { children: _jsx(_Fragment, { children: visibleFields === null || visibleFields === void 0 ? void 0 : visibleFields.map((field) => {
27
- const { canBeHidden, children, description, icon, id, name, options, type, value, } = field;
27
+ const { canBeHidden, children, description, icon, id, name, label, options, type, value, } = field;
28
28
  const baseProps = {
29
29
  id,
30
30
  value,
31
31
  icon: icon ? fieldIcons[icon] : undefined,
32
32
  placeholder: Boolean(name) ? name : description,
33
- label: name !== null && name !== void 0 ? name : description,
33
+ label,
34
34
  };
35
35
  const fieldWithDeleteBaseProps = {
36
36
  id,
package/dist/components/forms/dynamicForm/fields/GridField.js CHANGED
@@ -4,12 +4,12 @@ import { Flex } from '@chakra-ui/react';
4
4
  import { DateField, NumberField, TextField, SelectField, CurrencyField, SingleImage, } from '../../..';
5
5
  import { fieldIcons } from '../../../../helpers';
6
6
  export const GridField = ({ children, onRemove, onUpload }) => {
7
- return (_jsx(Flex, { align: "stretch", gap: "base", children: children === null || children === void 0 ? void 0 : children.map(({ id, description, name, value, type, options = [], icon }) => {
7
+ return (_jsx(Flex, { align: "stretch", gap: "base", children: children === null || children === void 0 ? void 0 : children.map(({ id, description, label, name, value, type, options = [], icon }) => {
8
8
  const baseProps = {
9
9
  id,
10
10
  value,
11
11
  placeholder: name !== null && name !== void 0 ? name : description,
12
- label: name !== null && name !== void 0 ? name : description,
12
+ label,
13
13
  icon: icon ? fieldIcons[icon] : undefined,
14
14
  };
15
15
  switch (type) {
package/dist/components/forms/dynamicForm/fields/SingleFields.js CHANGED
@@ -3,12 +3,12 @@ import { createElement as _createElement } from "react";
3
3
  import { fieldIcons } from '../../../../helpers';
4
4
  import { GridField, RatingField, TextAreaField, TextField, SelectField, SwitchField, NumberField, DateField, CurrencyField, TileBodyHeader, TileBodyLogo, VerticalIcon, TileBodySectionGrid, TileBodyAction, TileCta, } from '../../..';
5
5
  export const SingleFields = ({ callback, fields, menuItems }) => {
6
- return (_jsx(_Fragment, { children: fields === null || fields === void 0 ? void 0 : fields.map(({ children, description, id, name, type, value, icon, link, options = [], }) => {
6
+ return (_jsx(_Fragment, { children: fields === null || fields === void 0 ? void 0 : fields.map(({ children, description, id, label, name, type, value, icon, link, options = [], }) => {
7
7
  const baseProps = {
8
8
  id,
9
9
  icon: icon ? fieldIcons[icon] : undefined,
10
10
  placeholder: name,
11
- label: name,
11
+ label,
12
12
  value,
13
13
  };
14
14
  switch (type) {
package/dist/interfaces/forms/dynamicForm/DynamicForm.interface.d.ts CHANGED
@@ -13,6 +13,7 @@ export interface ReportI {
13
13
  description?: string;
14
14
  icon?: IconTypes;
15
15
  id: string;
16
+ label?: string;
16
17
  link?: string;
17
18
  name?: string;
18
19
  options?: OptionsTypes;
package/dist/mocks/forms/dynamicForm.mock.js CHANGED
@@ -4,6 +4,7 @@ export const formFieldsMock = [
4
4
  {
5
5
  id: faker.database.mongodbObjectId(),
6
6
  name: 'Select to have Homefile find & add information on your item.',
7
+ label: 'Find & add information',
7
8
  description: 'Homefile has an extensive data base of products, but we will also search the web for the most relevant information around products. This includes details like warranty Information, manuals, price, energy info, product ratings, etc. If the item is not in our database, it will populate as soon as we add the info.',
8
9
  value: false,
9
10
  type: 'checkbox-agreement',
@@ -12,6 +13,7 @@ export const formFieldsMock = [
12
13
  {
13
14
  id: faker.database.mongodbObjectId(),
14
15
  name: 'ai form',
16
+ label: 'Add item details',
15
17
  description: 'Add item details',
16
18
  value: false,
17
19
  type: 'ai-grid',
@@ -20,6 +22,7 @@ export const formFieldsMock = [
20
22
  {
21
23
  id: faker.database.mongodbObjectId(),
22
24
  name: 'Model or Serial',
25
+ label: 'Model or Serial',
23
26
  description: faker.lorem.sentence(),
24
27
  comments: faker.lorem.sentence(),
25
28
  value: '',
@@ -29,6 +32,7 @@ export const formFieldsMock = [
29
32
  {
30
33
  id: faker.database.mongodbObjectId(),
31
34
  name: 'uploder',
35
+ label: 'Upload Image',
32
36
  description: faker.lorem.sentence(),
33
37
  comments: faker.lorem.sentence(),
34
38
  value: faker.image.urlPicsumPhotos(),
@@ -40,6 +44,7 @@ export const formFieldsMock = [
40
44
  {
41
45
  id: faker.database.mongodbObjectId(),
42
46
  name: '',
47
+ label: 'Add item details',
43
48
  description: faker.lorem.sentence(),
44
49
  comments: faker.lorem.sentence(),
45
50
  value: '',
@@ -50,6 +55,7 @@ export const formFieldsMock = [
50
55
  {
51
56
  id: faker.database.mongodbObjectId(),
52
57
  name: 'Brand',
58
+ label: 'Brand',
53
59
  description: faker.lorem.sentence(),
54
60
  comments: faker.lorem.sentence(),
55
61
  value: '',
@@ -60,6 +66,7 @@ export const formFieldsMock = [
60
66
  {
61
67
  id: faker.database.mongodbObjectId(),
62
68
  name: 'Services',
69
+ label: 'Services',
63
70
  description: faker.lorem.sentence(),
64
71
  comments: faker.lorem.sentence(),
65
72
  value: 'Select the services you are requesting support for?',
@@ -70,6 +77,7 @@ export const formFieldsMock = [
70
77
  {
71
78
  id: faker.database.mongodbObjectId(),
72
79
  name: 'Pressure Washing',
80
+ label: 'Pressure Washing',
73
81
  description: faker.lorem.sentence(),
74
82
  comments: faker.lorem.sentence(),
75
83
  value: true,
@@ -79,6 +87,7 @@ export const formFieldsMock = [
79
87
  {
80
88
  id: faker.database.mongodbObjectId(),
81
89
  name: 'Window Cleaning',
90
+ label: 'Window Cleaning',
82
91
  description: faker.lorem.sentence(),
83
92
  comments: faker.lorem.sentence(),
84
93
  value: false,
@@ -88,6 +97,7 @@ export const formFieldsMock = [
88
97
  {
89
98
  id: faker.database.mongodbObjectId(),
90
99
  name: 'Roof Cleaning',
100
+ label: 'Roof Cleaning',
91
101
  description: faker.lorem.sentence(),
92
102
  comments: faker.lorem.sentence(),
93
103
  value: false,
@@ -136,6 +146,7 @@ export const formFieldsMock = [
136
146
  {
137
147
  id: faker.database.mongodbObjectId(),
138
148
  name: 'Receipt',
149
+ label: 'Receipt',
139
150
  description: faker.lorem.sentence(),
140
151
  comments: faker.lorem.sentence(),
141
152
  value: faker.lorem.sentence(),
@@ -146,6 +157,7 @@ export const formFieldsMock = [
146
157
  {
147
158
  id: faker.database.mongodbObjectId(),
148
159
  name: 'SKU',
160
+ label: 'SKU',
149
161
  description: faker.lorem.sentence(),
150
162
  comments: faker.lorem.sentence(),
151
163
  value: faker.lorem.sentence(),
@@ -163,6 +175,7 @@ export const formFieldsMock = [
163
175
  {
164
176
  id: faker.database.mongodbObjectId(),
165
177
  name: 'Purchase Date',
178
+ label: 'Purchase Date',
166
179
  description: faker.lorem.sentence(),
167
180
  comments: faker.lorem.sentence(),
168
181
  value: '',
@@ -172,6 +185,7 @@ export const formFieldsMock = [
172
185
  {
173
186
  id: faker.database.mongodbObjectId(),
174
187
  name: '$ Amount Paid',
188
+ label: '$ Amount Paid',
175
189
  description: faker.lorem.sentence(),
176
190
  comments: faker.lorem.sentence(),
177
191
  value: faker.finance.amount({ min: 10, max: 100 }),
@@ -186,6 +200,7 @@ export const formFieldsMock = [
186
200
  {
187
201
  id: faker.database.mongodbObjectId(),
188
202
  name: 'Color',
203
+ label: 'Color',
189
204
  description: faker.lorem.sentence(),
190
205
  comments: faker.lorem.sentence(),
191
206
  value: faker.lorem.word(),
@@ -196,6 +211,7 @@ export const formFieldsMock = [
196
211
  {
197
212
  id: faker.database.mongodbObjectId(),
198
213
  name: 'Finish',
214
+ label: 'Finish',
199
215
  description: faker.lorem.sentence(),
200
216
  comments: faker.lorem.sentence(),
201
217
  value: 'Matte',
package/dist/utils/DynamicForm.utils.js CHANGED
@@ -19,6 +19,7 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
19
19
  {
20
20
  id: uuidv4(),
21
21
  name: currentLabel,
22
+ label: currentLabel,
22
23
  description: '',
23
24
  comments: '',
24
25
  value,
@@ -32,6 +33,7 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
32
33
  {
33
34
  id: uuidv4(),
34
35
  name: currentLabel,
36
+ label: currentLabel,
35
37
  description: '',
36
38
  comments: '',
37
39
  value: String(value),
@@ -45,6 +47,7 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
45
47
  {
46
48
  id: uuidv4(),
47
49
  name: currentLabel,
50
+ label: currentLabel,
48
51
  description: '',
49
52
  comments: '',
50
53
  value: String(value),
@@ -61,6 +64,7 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
61
64
  {
62
65
  id: uuidv4(),
63
66
  name: currentLabel,
67
+ label: currentLabel,
64
68
  description: '',
65
69
  comments: '',
66
70
  value: htmlValue,
@@ -91,6 +95,7 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
91
95
  {
92
96
  id: uuidv4(),
93
97
  name: currentLabel,
98
+ label: currentLabel,
94
99
  description: '',
95
100
  comments: '',
96
101
  value: `<ul>${htmlList}</ul>`,
@@ -116,6 +121,7 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
116
121
  {
117
122
  id: uuidv4(),
118
123
  name: currentLabel,
124
+ label: currentLabel,
119
125
  description: '',
120
126
  comments: '',
121
127
  value: htmlValue,
@@ -128,6 +134,7 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
128
134
  {
129
135
  id: uuidv4(),
130
136
  name: currentLabel,
137
+ label: currentLabel,
131
138
  description: '',
132
139
  comments: '',
133
140
  value: String(value),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homefile/components-v2",
3
- "version": "2.14.2",
3
+ "version": "2.14.3",
4
4
  "author": "Homefile",
5
5
  "license": "UNLICENSED",
6
6
  "typings": "dist/index.d.ts",
package/src/components/forms/dynamicForm/DynamicForm.tsx CHANGED
@@ -76,6 +76,7 @@ export const DynamicForm = ({
76
76
  icon,
77
77
  id,
78
78
  name,
79
+ label,
79
80
  options,
80
81
  type,
81
82
  value,
@@ -86,7 +87,7 @@ export const DynamicForm = ({
86
87
  value,
87
88
  icon: icon ? (fieldIcons[icon] as IconTypes) : undefined,
88
89
  placeholder: Boolean(name) ? name : description,
89
- label: name ?? description,
90
+ label,
90
91
  }
91
92
  const fieldWithDeleteBaseProps = {
92
93
  id,
package/src/components/forms/dynamicForm/fields/GridField.tsx CHANGED
@@ -14,12 +14,12 @@ export const GridField = ({ children, onRemove, onUpload }: GridFieldI) => {
14
14
  return (
15
15
  <Flex align="stretch" gap="base">
16
16
  {children?.map(
17
- ({ id, description, name, value, type, options = [], icon }) => {
17
+ ({ id, description, label, name, value, type, options = [], icon }) => {
18
18
  const baseProps = {
19
19
  id,
20
20
  value,
21
21
  placeholder: name ?? description,
22
- label: name ?? description,
22
+ label,
23
23
  icon: icon ? (fieldIcons[icon] as IconTypes) : undefined,
24
24
  }
25
25
 
package/src/components/forms/dynamicForm/fields/SingleFields.tsx CHANGED
@@ -26,6 +26,7 @@ export const SingleFields = ({ callback, fields, menuItems }: FieldTypesI) => {
26
26
  children,
27
27
  description,
28
28
  id,
29
+ label,
29
30
  name,
30
31
  type,
31
32
  value,
@@ -37,7 +38,7 @@ export const SingleFields = ({ callback, fields, menuItems }: FieldTypesI) => {
37
38
  id,
38
39
  icon: icon ? fieldIcons[icon] : undefined,
39
40
  placeholder: name,
40
- label: name,
41
+ label,
41
42
  value,
42
43
  }
43
44
  switch (type) {
package/src/interfaces/forms/dynamicForm/DynamicForm.interface.ts CHANGED
@@ -120,6 +120,7 @@ export interface ReportI {
120
120
  description?: string
121
121
  icon?: IconTypes
122
122
  id: string
123
+ label?: string
123
124
  link?: string
124
125
  name?: string
125
126
  options?: OptionsTypes
package/src/mocks/forms/dynamicForm.mock.ts CHANGED
@@ -6,6 +6,7 @@ export const formFieldsMock: ReportI[] = [
6
6
  {
7
7
  id: faker.database.mongodbObjectId(),
8
8
  name: 'Select to have Homefile find & add information on your item.',
9
+ label: 'Find & add information',
9
10
  description:
10
11
  'Homefile has an extensive data base of products, but we will also search the web for the most relevant information around products. This includes details like warranty Information, manuals, price, energy info, product ratings, etc. If the item is not in our database, it will populate as soon as we add the info.',
11
12
  value: false,
@@ -15,6 +16,7 @@ export const formFieldsMock: ReportI[] = [
15
16
  {
16
17
  id: faker.database.mongodbObjectId(),
17
18
  name: 'ai form',
19
+ label: 'Add item details',
18
20
  description: 'Add item details',
19
21
  value: false,
20
22
  type: 'ai-grid',
@@ -23,6 +25,7 @@ export const formFieldsMock: ReportI[] = [
23
25
  {
24
26
  id: faker.database.mongodbObjectId(),
25
27
  name: 'Model or Serial',
28
+ label: 'Model or Serial',
26
29
  description: faker.lorem.sentence(),
27
30
  comments: faker.lorem.sentence(),
28
31
  value: '',
@@ -32,6 +35,7 @@ export const formFieldsMock: ReportI[] = [
32
35
  {
33
36
  id: faker.database.mongodbObjectId(),
34
37
  name: 'uploder',
38
+ label: 'Upload Image',
35
39
  description: faker.lorem.sentence(),
36
40
  comments: faker.lorem.sentence(),
37
41
  value: faker.image.urlPicsumPhotos(),
@@ -43,6 +47,7 @@ export const formFieldsMock: ReportI[] = [
43
47
  {
44
48
  id: faker.database.mongodbObjectId(),
45
49
  name: '',
50
+ label: 'Add item details',
46
51
  description: faker.lorem.sentence(),
47
52
  comments: faker.lorem.sentence(),
48
53
  value: '',
@@ -53,6 +58,7 @@ export const formFieldsMock: ReportI[] = [
53
58
  {
54
59
  id: faker.database.mongodbObjectId(),
55
60
  name: 'Brand',
61
+ label: 'Brand',
56
62
  description: faker.lorem.sentence(),
57
63
  comments: faker.lorem.sentence(),
58
64
  value: '',
@@ -63,6 +69,7 @@ export const formFieldsMock: ReportI[] = [
63
69
  {
64
70
  id: faker.database.mongodbObjectId(),
65
71
  name: 'Services',
72
+ label: 'Services',
66
73
  description: faker.lorem.sentence(),
67
74
  comments: faker.lorem.sentence(),
68
75
  value: 'Select the services you are requesting support for?',
@@ -73,6 +80,7 @@ export const formFieldsMock: ReportI[] = [
73
80
  {
74
81
  id: faker.database.mongodbObjectId(),
75
82
  name: 'Pressure Washing',
83
+ label: 'Pressure Washing',
76
84
  description: faker.lorem.sentence(),
77
85
  comments: faker.lorem.sentence(),
78
86
  value: true,
@@ -82,6 +90,7 @@ export const formFieldsMock: ReportI[] = [
82
90
  {
83
91
  id: faker.database.mongodbObjectId(),
84
92
  name: 'Window Cleaning',
93
+ label: 'Window Cleaning',
85
94
  description: faker.lorem.sentence(),
86
95
  comments: faker.lorem.sentence(),
87
96
  value: false,
@@ -91,6 +100,7 @@ export const formFieldsMock: ReportI[] = [
91
100
  {
92
101
  id: faker.database.mongodbObjectId(),
93
102
  name: 'Roof Cleaning',
103
+ label: 'Roof Cleaning',
94
104
  description: faker.lorem.sentence(),
95
105
  comments: faker.lorem.sentence(),
96
106
  value: false,
@@ -139,6 +149,7 @@ export const formFieldsMock: ReportI[] = [
139
149
  {
140
150
  id: faker.database.mongodbObjectId(),
141
151
  name: 'Receipt',
152
+ label: 'Receipt',
142
153
  description: faker.lorem.sentence(),
143
154
  comments: faker.lorem.sentence(),
144
155
  value: faker.lorem.sentence(),
@@ -149,6 +160,7 @@ export const formFieldsMock: ReportI[] = [
149
160
  {
150
161
  id: faker.database.mongodbObjectId(),
151
162
  name: 'SKU',
163
+ label: 'SKU',
152
164
  description: faker.lorem.sentence(),
153
165
  comments: faker.lorem.sentence(),
154
166
  value: faker.lorem.sentence(),
@@ -166,6 +178,7 @@ export const formFieldsMock: ReportI[] = [
166
178
  {
167
179
  id: faker.database.mongodbObjectId(),
168
180
  name: 'Purchase Date',
181
+ label: 'Purchase Date',
169
182
  description: faker.lorem.sentence(),
170
183
  comments: faker.lorem.sentence(),
171
184
  value: '',
@@ -175,6 +188,7 @@ export const formFieldsMock: ReportI[] = [
175
188
  {
176
189
  id: faker.database.mongodbObjectId(),
177
190
  name: '$ Amount Paid',
191
+ label: '$ Amount Paid',
178
192
  description: faker.lorem.sentence(),
179
193
  comments: faker.lorem.sentence(),
180
194
  value: faker.finance.amount({ min: 10, max: 100 }),
@@ -189,6 +203,7 @@ export const formFieldsMock: ReportI[] = [
189
203
  {
190
204
  id: faker.database.mongodbObjectId(),
191
205
  name: 'Color',
206
+ label: 'Color',
192
207
  description: faker.lorem.sentence(),
193
208
  comments: faker.lorem.sentence(),
194
209
  value: faker.lorem.word(),
@@ -199,6 +214,7 @@ export const formFieldsMock: ReportI[] = [
199
214
  {
200
215
  id: faker.database.mongodbObjectId(),
201
216
  name: 'Finish',
217
+ label: 'Finish',
202
218
  description: faker.lorem.sentence(),
203
219
  comments: faker.lorem.sentence(),
204
220
  value: 'Matte',
package/src/utils/DynamicForm.utils.ts CHANGED
@@ -38,6 +38,7 @@ export const mapApiObjectToFormFields = ({
38
38
  {
39
39
  id: uuidv4(),
40
40
  name: currentLabel,
41
+ label: currentLabel,
41
42
  description: '',
42
43
  comments: '',
43
44
  value,
@@ -52,6 +53,7 @@ export const mapApiObjectToFormFields = ({
52
53
  {
53
54
  id: uuidv4(),
54
55
  name: currentLabel,
56
+ label: currentLabel,
55
57
  description: '',
56
58
  comments: '',
57
59
  value: String(value),
@@ -66,6 +68,7 @@ export const mapApiObjectToFormFields = ({
66
68
  {
67
69
  id: uuidv4(),
68
70
  name: currentLabel,
71
+ label: currentLabel,
69
72
  description: '',
70
73
  comments: '',
71
74
  value: String(value),
@@ -83,6 +86,7 @@ export const mapApiObjectToFormFields = ({
83
86
  {
84
87
  id: uuidv4(),
85
88
  name: currentLabel,
89
+ label: currentLabel,
86
90
  description: '',
87
91
  comments: '',
88
92
  value: htmlValue,
@@ -119,6 +123,7 @@ export const mapApiObjectToFormFields = ({
119
123
  {
120
124
  id: uuidv4(),
121
125
  name: currentLabel,
126
+ label: currentLabel,
122
127
  description: '',
123
128
  comments: '',
124
129
  value: `<ul>${htmlList}</ul>`,
@@ -147,6 +152,7 @@ export const mapApiObjectToFormFields = ({
147
152
  {
148
153
  id: uuidv4(),
149
154
  name: currentLabel,
155
+ label: currentLabel,
150
156
  description: '',
151
157
  comments: '',
152
158
  value: htmlValue,
@@ -160,6 +166,7 @@ export const mapApiObjectToFormFields = ({
160
166
  {
161
167
  id: uuidv4(),
162
168
  name: currentLabel,
169
+ label: currentLabel,
163
170
  description: '',
164
171
  comments: '',
165
172
  value: String(value),