@homefile/components-v2 2.14.6 → 2.14.8

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 (9) hide show
  1. package/dist/components/forms/readOnly/fields/ReadOnlyTextArea.js +10 -1
  2. package/dist/mocks/forms/dynamicForm.mock.js +17 -0
  3. package/dist/stories/forms/readOnly/ReadOnlyDynamicForm.stories.js +6 -5
  4. package/dist/utils/DynamicForm.utils.js +10 -12
  5. package/package.json +1 -1
  6. package/src/components/forms/readOnly/fields/ReadOnlyTextArea.tsx +10 -0
  7. package/src/mocks/forms/dynamicForm.mock.ts +17 -0
  8. package/src/stories/forms/readOnly/ReadOnlyDynamicForm.stories.tsx +6 -5
  9. package/src/utils/DynamicForm.utils.ts +14 -12
package/dist/components/forms/readOnly/fields/ReadOnlyTextArea.js CHANGED
@@ -16,5 +16,14 @@ export const ReadOnlyTextArea = (_a) => {
16
16
  var { icon, value } = _a, props = __rest(_a, ["icon", "value"]);
17
17
  if (!value)
18
18
  return null;
19
- return (_jsxs(ReadOnlyWrapper, Object.assign({}, props, { align: "start", flex: "auto", children: [_jsx(FormIcon, { icon: icon }), _jsx(Box, { p: "base", border: "1px solid", borderColor: "lightBlue.5", flex: "auto", children: _jsx(Text, { fontFamily: "secondary", dangerouslySetInnerHTML: { __html: value } }) })] })));
19
+ return (_jsxs(ReadOnlyWrapper, Object.assign({}, props, { align: "start", flex: "auto", children: [_jsx(FormIcon, { icon: icon }), _jsx(Box, { p: "base", border: "1px solid", borderColor: "lightBlue.5", flex: "auto", children: _jsx(Text, { fontFamily: "secondary", dangerouslySetInnerHTML: { __html: value }, css: {
20
+ '& ul': {
21
+ listStyleType: 'disc',
22
+ margin: '0',
23
+ paddingLeft: '1.5rem',
24
+ },
25
+ '& li': {
26
+ marginBottom: '0.5rem 0',
27
+ },
28
+ } }) })] })));
20
29
  };
package/dist/mocks/forms/dynamicForm.mock.js CHANGED
@@ -825,6 +825,23 @@ export const unknownFormMock = {
825
825
  fanMotor: 'LG part number 4681JB1028C',
826
826
  lighting: 'LG part number 6912JB2004E',
827
827
  },
828
+ recommendedParts: [
829
+ {
830
+ partName: 'Water Filter',
831
+ partNumber: 'EDR1RXD1',
832
+ description: 'Refrigerator water filter for cleaner, fresher water.',
833
+ },
834
+ {
835
+ partName: 'Ice Maker Kit',
836
+ partNumber: 'W10190948A',
837
+ description: 'Replacement ice maker assembly for the freezer.',
838
+ },
839
+ {
840
+ partName: 'Shelves',
841
+ partNumber: 'W10720274',
842
+ description: 'Adjustable shelves for refrigerator compartment.',
843
+ },
844
+ ],
828
845
  },
829
846
  createdAt: '2025-04-17T19:26:39.435Z',
830
847
  updatedAt: '2025-04-17T19:26:39.435Z',
package/dist/stories/forms/readOnly/ReadOnlyDynamicForm.stories.js CHANGED
@@ -1,14 +1,15 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Box } from '@chakra-ui/react';
3
3
  import { ReadOnlyDynamicForm } from '../../../components';
4
- import { formFieldsMock } from '../../../mocks';
4
+ import { unknownFormMock } from '../../../mocks';
5
+ import { mapApiObjectToFormFields } from '../../../utils';
5
6
  export default {
6
7
  title: 'Components/Forms/ReadOnlyDynamicForm',
7
8
  component: ReadOnlyDynamicForm,
8
- args: {
9
- form: formFieldsMock,
10
- },
11
9
  };
12
10
  export const ReadOnlyDynamicFormComponent = (args) => {
13
- return (_jsx(Box, { p: "base", bg: "neutral.white", w: ['full', '500px'], children: _jsx(ReadOnlyDynamicForm, Object.assign({}, args)) }));
11
+ const unknownForm = mapApiObjectToFormFields({
12
+ obj: unknownFormMock,
13
+ });
14
+ return (_jsx(Box, { p: "base", bg: "neutral.white", w: ['full', '500px'], children: _jsx(ReadOnlyDynamicForm, { form: unknownForm }) }));
14
15
  };
package/dist/utils/DynamicForm.utils.js CHANGED
@@ -57,9 +57,7 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
57
57
  ];
58
58
  }
59
59
  if (Array.isArray(value) && value.every((v) => typeof v === 'string')) {
60
- const htmlValue = `<ul>${value
61
- .map((v) => `<li>${v}</li>`)
62
- .join('')}</ul>`;
60
+ const htmlValue = value.map((v) => `${v}`).join('<br/>');
63
61
  return [
64
62
  {
65
63
  id: uuidv4(),
@@ -83,10 +81,10 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
83
81
  const label = capitalize(k);
84
82
  return Array.isArray(v) &&
85
83
  v.every((el) => typeof el === 'string')
86
- ? `<li><strong>${label}:</strong><ul>${v
84
+ ? `<span><strong>${label}:</strong><ul>${v
87
85
  .map((el) => `<li>${el}</li>`)
88
- .join('')}</ul></li>`
89
- : `<li><strong>${label}:</strong> ${formatHtmlValue(v)}</li>`;
86
+ .join('')}</ul></span><br/>`
87
+ : `<span><strong>${label}:</strong> ${formatHtmlValue(v)}</span><br/>`;
90
88
  })
91
89
  .join('');
92
90
  })
@@ -98,7 +96,7 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
98
96
  label: currentLabel,
99
97
  description: '',
100
98
  comments: '',
101
- value: `<ul>${htmlList}</ul>`,
99
+ value: `<span>${htmlList}</span>`,
102
100
  type: 'textarea',
103
101
  visible: true,
104
102
  },
@@ -110,13 +108,13 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
110
108
  .map(([k, v]) => {
111
109
  const label = capitalize(k);
112
110
  return Array.isArray(v) && v.every((el) => typeof el === 'string')
113
- ? `<li><strong>${label}:</strong><ul>${v
111
+ ? `<span><strong>${label}:</strong><ul>${v
114
112
  .map((el) => `<li>${el}</li>`)
115
- .join('')}</ul></li>`
116
- : `<li><strong>${label}:</strong> ${formatHtmlValue(v)}</li>`;
113
+ .join('')}</ul></span></br/>`
114
+ : `<span><strong>${label}:</strong> ${formatHtmlValue(v)}</span></br/>`;
117
115
  })
118
116
  .join('');
119
- const htmlValue = `<ul>${lines}</ul>`;
117
+ const htmlValue = `<span>${lines}</span>`;
120
118
  return [
121
119
  {
122
120
  id: uuidv4(),
@@ -155,7 +153,7 @@ const isRecord = (val) => {
155
153
  };
156
154
  const formatHtmlValue = (val) => {
157
155
  if (Array.isArray(val) && val.every((v) => typeof v === 'string')) {
158
- return `<ul>${val.map((v) => `<li>${v}</li>`).join('')}</ul>`;
156
+ return val.map((v) => `${v}`).join('<br/>');
159
157
  }
160
158
  return String(val);
161
159
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homefile/components-v2",
3
- "version": "2.14.6",
3
+ "version": "2.14.8",
4
4
  "author": "Homefile",
5
5
  "license": "UNLICENSED",
6
6
  "typings": "dist/index.d.ts",
package/src/components/forms/readOnly/fields/ReadOnlyTextArea.tsx CHANGED
@@ -11,6 +11,16 @@ export const ReadOnlyTextArea = ({ icon, value, ...props }: ReadOnlyInputI) => {
11
11
  <Text
12
12
  fontFamily="secondary"
13
13
  dangerouslySetInnerHTML={{ __html: value }}
14
+ css={{
15
+ '& ul': {
16
+ listStyleType: 'disc',
17
+ margin: '0',
18
+ paddingLeft: '1.5rem',
19
+ },
20
+ '& li': {
21
+ marginBottom: '0.5rem 0',
22
+ },
23
+ }}
14
24
  />
15
25
  </Box>
16
26
  </ReadOnlyWrapper>
package/src/mocks/forms/dynamicForm.mock.ts CHANGED
@@ -836,6 +836,23 @@ export const unknownFormMock: Record<string, any> = {
836
836
  fanMotor: 'LG part number 4681JB1028C',
837
837
  lighting: 'LG part number 6912JB2004E',
838
838
  },
839
+ recommendedParts: [
840
+ {
841
+ partName: 'Water Filter',
842
+ partNumber: 'EDR1RXD1',
843
+ description: 'Refrigerator water filter for cleaner, fresher water.',
844
+ },
845
+ {
846
+ partName: 'Ice Maker Kit',
847
+ partNumber: 'W10190948A',
848
+ description: 'Replacement ice maker assembly for the freezer.',
849
+ },
850
+ {
851
+ partName: 'Shelves',
852
+ partNumber: 'W10720274',
853
+ description: 'Adjustable shelves for refrigerator compartment.',
854
+ },
855
+ ],
839
856
  },
840
857
  createdAt: '2025-04-17T19:26:39.435Z',
841
858
  updatedAt: '2025-04-17T19:26:39.435Z',
package/src/stories/forms/readOnly/ReadOnlyDynamicForm.stories.tsx CHANGED
@@ -1,21 +1,22 @@
1
1
  import { Meta } from '@storybook/react'
2
2
  import { Box } from '@chakra-ui/react'
3
3
  import { ReadOnlyDynamicForm } from '@/components'
4
- import { formFieldsMock } from '@/mocks'
4
+ import { unknownFormMock } from '@/mocks'
5
5
  import { DynamicFormI } from '@/interfaces'
6
+ import { mapApiObjectToFormFields } from '@/utils'
6
7
 
7
8
  export default {
8
9
  title: 'Components/Forms/ReadOnlyDynamicForm',
9
10
  component: ReadOnlyDynamicForm,
10
- args: {
11
- form: formFieldsMock,
12
- },
13
11
  } as Meta
14
12
 
15
13
  export const ReadOnlyDynamicFormComponent = (args: DynamicFormI) => {
14
+ const unknownForm = mapApiObjectToFormFields({
15
+ obj: unknownFormMock,
16
+ })
16
17
  return (
17
18
  <Box p="base" bg="neutral.white" w={['full', '500px']}>
18
- <ReadOnlyDynamicForm {...args} />
19
+ <ReadOnlyDynamicForm form={unknownForm} />
19
20
  </Box>
20
21
  )
21
22
  }
package/src/utils/DynamicForm.utils.ts CHANGED
@@ -79,9 +79,7 @@ export const mapApiObjectToFormFields = ({
79
79
  }
80
80
 
81
81
  if (Array.isArray(value) && value.every((v) => typeof v === 'string')) {
82
- const htmlValue = `<ul>${value
83
- .map((v) => `<li>${v}</li>`)
84
- .join('')}</ul>`
82
+ const htmlValue = value.map((v) => `${v}`).join('<br/>')
85
83
  return [
86
84
  {
87
85
  id: uuidv4(),
@@ -110,10 +108,12 @@ export const mapApiObjectToFormFields = ({
110
108
  const label = capitalize(k)
111
109
  return Array.isArray(v) &&
112
110
  v.every((el) => typeof el === 'string')
113
- ? `<li><strong>${label}:</strong><ul>${v
111
+ ? `<span><strong>${label}:</strong><ul>${v
114
112
  .map((el) => `<li>${el}</li>`)
115
- .join('')}</ul></li>`
116
- : `<li><strong>${label}:</strong> ${formatHtmlValue(v)}</li>`
113
+ .join('')}</ul></span><br/>`
114
+ : `<span><strong>${label}:</strong> ${formatHtmlValue(
115
+ v
116
+ )}</span><br/>`
117
117
  })
118
118
  .join('')
119
119
  })
@@ -126,7 +126,7 @@ export const mapApiObjectToFormFields = ({
126
126
  label: currentLabel,
127
127
  description: '',
128
128
  comments: '',
129
- value: `<ul>${htmlList}</ul>`,
129
+ value: `<span>${htmlList}</span>`,
130
130
  type: 'textarea',
131
131
  visible: true,
132
132
  },
@@ -140,13 +140,15 @@ export const mapApiObjectToFormFields = ({
140
140
  .map(([k, v]) => {
141
141
  const label = capitalize(k)
142
142
  return Array.isArray(v) && v.every((el) => typeof el === 'string')
143
- ? `<li><strong>${label}:</strong><ul>${v
143
+ ? `<span><strong>${label}:</strong><ul>${v
144
144
  .map((el) => `<li>${el}</li>`)
145
- .join('')}</ul></li>`
146
- : `<li><strong>${label}:</strong> ${formatHtmlValue(v)}</li>`
145
+ .join('')}</ul></span></br/>`
146
+ : `<span><strong>${label}:</strong> ${formatHtmlValue(
147
+ v
148
+ )}</span></br/>`
147
149
  })
148
150
  .join('')
149
- const htmlValue = `<ul>${lines}</ul>`
151
+ const htmlValue = `<span>${lines}</span>`
150
152
 
151
153
  return [
152
154
  {
@@ -190,7 +192,7 @@ const isRecord = (val: unknown): val is Record<string, any> => {
190
192
 
191
193
  const formatHtmlValue = (val: unknown): string => {
192
194
  if (Array.isArray(val) && val.every((v) => typeof v === 'string')) {
193
- return `<ul>${val.map((v) => `<li>${v}</li>`).join('')}</ul>`
195
+ return val.map((v) => `${v}`).join('<br/>')
194
196
  }
195
197
  return String(val)
196
198
  }