@homefile/components-v2 2.13.0 → 2.14.1

package/dist/components/forms/dynamicForm/fields/AIGridField.js

@@ -43,5 +43,5 @@ export const AIGridField = ({ children, onAISend, onRemove, onUpload, }) => {
         }
         onAISend === null || onAISend === void 0 ? void 0 : onAISend(form);
     };
-    return (_jsxs(Flex, { align: "center", gap: "base", children: [_jsx(SingleImage, Object.assign({}, imageProps, { onUpload: handleUpload, onRemove: onRemove, value: imageField === null || imageField === void 0 ? void 0 : imageField.value })), _jsx(Text, { fontFamily: "secondary", textAlign: "center", children: "OR" }), _jsx(TextField, Object.assign({}, textProps)), _jsx(IconButton, { "aria-label": "Add new address line", variant: "iconOutlined", icon: _jsx(Plus, { size: 28, stroke: colors.blue[3] }), onClick: handleAISend, h: "input.md", disabled: !(model === null || model === void 0 ? void 0 : model.length) && !(imageField === null || imageField === void 0 ? void 0 : imageField.value) })] }));
+    return (_jsxs(Flex, { align: "flex-end", gap: "base", children: [_jsxs(Flex, { align: "center", gap: "base", children: [_jsx(SingleImage, Object.assign({}, imageProps, { onUpload: handleUpload, onRemove: onRemove, value: imageField === null || imageField === void 0 ? void 0 : imageField.value })), _jsx(Text, { fontFamily: "secondary", textAlign: "center", children: "OR" })] }), _jsx(TextField, Object.assign({}, textProps)), _jsx(IconButton, { "aria-label": "Add new address line", variant: "iconOutlined", icon: _jsx(Plus, { size: 28, stroke: colors.blue[3] }), onClick: handleAISend, h: "input.md", disabled: !(model === null || model === void 0 ? void 0 : model.length) && !(imageField === null || imageField === void 0 ? void 0 : imageField.value) })] }));
 };

package/dist/components/forms/dynamicForm/fields/CurrencyField.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Controller, useFormContext } from 'react-hook-form';
-import { Flex, Input, Tooltip } from '@chakra-ui/react';
-import { FormIcon } from '../../..';
+import { Flex, Input } from '@chakra-ui/react';
+import { FormIcon, LabeledField } from '../../..';
 import { formatCurrency } from '../../../../utils';
 export const CurrencyField = ({ id, icon, placeholder, value }) => {
     const { control } = useFormContext();
@@ -12,6 +12,6 @@ export const CurrencyField = ({ id, icon, placeholder, value }) => {
                         const currency = formatCurrency({ value: number });
                         onChange(currency);
                     };
-                    return (_jsx(Tooltip, { label: placeholder, children: _jsx(Input, { onChange: handleChange, placeholder: placeholder, textAlign: "right", value: value, _placeholder: { color: 'gray.2' } }) }));
+                    return (_jsx(LabeledField, { label: String(placeholder), children: _jsx(Input, { onChange: handleChange, placeholder: placeholder, textAlign: "right", value: value, _placeholder: { color: 'gray.2' } }) }));
                 } })] }));
 };

package/dist/components/forms/dynamicForm/fields/DateField.js

@@ -5,6 +5,6 @@ import { DatePicker, FormIcon } from '../../..';
 export const DateField = ({ id, icon, name, placeholder, showCalendarIcon = true, value, width, }) => {
     const { control } = useFormContext();
     return (_jsxs(Flex, { align: "center", gap: "base", w: "full", children: [name && (_jsxs(Flex, { align: "center", gap: "base", flexShrink: 0, children: [_jsx(FormIcon, { icon: icon }), _jsx(Text, { fontFamily: "secondary", noOfLines: 1, overflow: "hidden", children: name })] })), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
-                    return (_jsx(DatePicker, { onChange: onChange, showCalendarIcon: showCalendarIcon, placeholder: placeholder, value: value, width: width }));
+                    return (_jsx(DatePicker, { onChange: onChange, showCalendarIcon: showCalendarIcon, placeholder: name ? '' : placeholder, value: value, width: width }));
                 } })] }));
 };

package/dist/components/forms/dynamicForm/fields/GroupField.js

@@ -3,5 +3,5 @@ import { Stack } from '@chakra-ui/react';
 import { FieldWithDelete } from '../../..';
 import { SingleFields } from './SingleFields';
 export const GroupField = ({ id, fields, onRemove, canBeHidden, }) => {
-    return (_jsx(FieldWithDelete, { id: id, onRemove: onRemove, canBeHidden: canBeHidden, children: _jsx(Stack, { spacing: "base", flex: "1", children: _jsx(SingleFields, { fields: fields }) }) }));
+    return (_jsx(FieldWithDelete, { id: id, onRemove: onRemove, canBeHidden: canBeHidden, children: _jsx(Stack, { spacing: "1", flex: "1", children: _jsx(SingleFields, { fields: fields }) }) }));
 };

package/dist/components/forms/dynamicForm/fields/LabeledField.d.ts

@@ -0,0 +1,6 @@
+interface LabeledFieldProps {
+    children: React.ReactNode;
+    label: string;
+}
+export declare const LabeledField: ({ label, children }: LabeledFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/forms/dynamicForm/fields/LabeledField.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, Flex } from '@chakra-ui/react';
+export const LabeledField = ({ label, children }) => {
+    if (!label) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsxs(Box, { w: "100%", children: [_jsx(Flex, { gap: "1", align: "start", children: _jsx(Text, { fontSize: "xs", fontFamily: "secondary", mb: "1", children: label }) }), children] }));
+};

package/dist/components/forms/dynamicForm/fields/NumberField.js

@@ -1,19 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Controller, useFormContext } from 'react-hook-form';
-import { Flex, Input, Tooltip } from '@chakra-ui/react';
-import { FieldDescription } from '../../..';
+import { Flex, Input } from '@chakra-ui/react';
+import { LabeledField } from '../../..';
 export const NumberField = ({ description, id, icon, placeholder, value, }) => {
     const { control } = useFormContext();
-    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", children: [_jsx(FieldDescription, { description: description, icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
-                    return (_jsx(Tooltip, { label: !description && placeholder, children: _jsx(Input, { onChange: (e) => {
-                                const value = e.target.valueAsNumber;
-                                const isNumber = !isNaN(value);
-                                if (!isNumber) {
-                                    onChange('');
-                                }
-                                else {
-                                    onChange(value);
-                                }
-                            }, placeholder: placeholder, type: "number", pattern: "[1-9]", value: value, textAlign: "right", _placeholder: { color: 'gray.2' } }) }));
-                } })] }));
+    return (_jsx(Flex, { align: "center", gap: "base", flex: "auto", children: _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
+                return (_jsx(LabeledField, { label: String(!description && placeholder), children: _jsx(Input, { onChange: (e) => {
+                            const value = e.target.valueAsNumber;
+                            const isNumber = !isNaN(value);
+                            if (!isNumber) {
+                                onChange('');
+                            }
+                            else {
+                                onChange(value);
+                            }
+                        }, placeholder: placeholder, type: "number", pattern: "[1-9]", value: value, textAlign: "right", _placeholder: { color: 'gray.2' } }) }));
+            } }) }));
 };

package/dist/components/forms/dynamicForm/fields/SelectField.js

@@ -1,12 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Controller, useFormContext } from 'react-hook-form';
 import { Box, Flex } from '@chakra-ui/react';
-import { FieldDescription, SelectInput } from '../../..';
+import { SelectInput } from '../../..';
 export const SelectField = ({ description, id, icon, options, placeholder, value, }) => {
     var _a;
     const { control } = useFormContext();
     const stringOptions = (_a = options === null || options === void 0 ? void 0 : options.map((option) => String(option))) !== null && _a !== void 0 ? _a : [];
-    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", w: description ? '100%' : '40%', children: [_jsx(FieldDescription, { description: description, icon: icon }), _jsx(Box, { w: description ? '102px' : '100%', children: _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
-                        return (_jsx(SelectInput, { handleClick: onChange, height: "md", initialValue: value !== null && value !== void 0 ? value : stringOptions[0], items: stringOptions, placeholder: !description ? placeholder : '', width: "100%" }));
-                    } }) })] }));
+    return (_jsx(Flex, { align: "start", gap: "base", flex: "auto", w: description ? '100%' : '40%', children: _jsx(Box, { w: description ? '102px' : '100%', children: _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
+                    return (_jsx(SelectInput, { handleClick: onChange, height: "md", initialValue: value !== null && value !== void 0 ? value : stringOptions[0], items: stringOptions, placeholder: !description ? placeholder : '', width: "100%" }));
+                } }) }) }));
 };

package/dist/components/forms/dynamicForm/fields/TextAreaField.js

@@ -1,14 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useFormContext, Controller } from 'react-hook-form';
-import { Flex, Image, Tooltip } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import QuillEditor from 'react-quill-new';
 import 'react-quill-new/dist/quill.snow.css';
 import '../../../../styles/quill.css';
+import { LabeledField } from './LabeledField';
 export const TextAreaField = ({ id, icon, placeholder = '', value, }) => {
     const { control } = useFormContext();
-    return (_jsx(Tooltip, { label: placeholder, children: _jsxs(Flex, { gap: "base", align: "start", flex: "auto", children: [icon && _jsx(Image, { h: "auto", w: "icon.md", src: icon, marginTop: "2" }), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
-                        return (_jsx(QuillEditor, { theme: "snow", value: value, formats: formats, modules: { toolbar }, onChange: onChange, placeholder: placeholder }));
-                    } })] }) }));
+    return (_jsx(Flex, { gap: "base", align: "start", flex: "auto", children: _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
+                return (_jsx(LabeledField, { label: placeholder, children: _jsx(QuillEditor, { theme: "snow", value: value, formats: formats, modules: { toolbar }, onChange: onChange, placeholder: placeholder }) }));
+            } }) }));
 };
 const formats = [
     'header',

package/dist/components/forms/dynamicForm/fields/TextField.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Controller, useFormContext } from 'react-hook-form';
 import { Flex } from '@chakra-ui/react';
-import { FormIcon, TextInput } from '../../..';
+import { TextInput } from '../../..';
 export const TextField = ({ id, icon, placeholder = '', type = 'text', value, }) => {
     const { control } = useFormContext();
-    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", children: [_jsx(FormIcon, { icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
-                    return (_jsx(TextInput, { handleChange: onChange, placeholder: placeholder, type: type, value: value }));
-                } })] }));
+    return (_jsx(Flex, { align: "center", gap: "base", flex: "auto", children: _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
+                return (_jsx(TextInput, { handleChange: onChange, placeholder: placeholder, type: type, value: value }));
+            } }) }));
 };

package/dist/components/forms/dynamicForm/fields/index.d.ts

@@ -9,6 +9,7 @@ export * from './FieldWithDelete';
 export * from './FileField';
 export * from './GridField';
 export * from './GroupField';
+export * from './LabeledField';
 export * from './NumberField';
 export * from './SwitchField';
 export * from './RatingField';

package/dist/components/forms/dynamicForm/fields/index.js

@@ -9,6 +9,7 @@ export * from './FieldWithDelete';
 export * from './FileField';
 export * from './GridField';
 export * from './GroupField';
+export * from './LabeledField';
 export * from './NumberField';
 export * from './SwitchField';
 export * from './RatingField';

package/dist/components/inputs/DatePicker.js

@@ -3,8 +3,8 @@ import { useEffect, useState } from 'react';
 import DatePickerComponent from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import '../../styles/calendar.css';
-import { Flex, IconButton, Input, Tooltip } from '@chakra-ui/react';
-import { Calendar as CalendarIcon } from '..';
+import { Flex, IconButton, Input } from '@chakra-ui/react';
+import { Calendar as CalendarIcon, LabeledField } from '..';
 import { colors } from '../../theme/colors';
 import { extractDayMonthYear, joinDayMonthYear } from '../../utils';
 export const DatePicker = ({ onChange, placeholder, showCalendarIcon, value, width = '290px', }) => {
@@ -38,7 +38,7 @@ export const DatePicker = ({ onChange, placeholder, showCalendarIcon, value, wid
         }
     }, [value]);
     const renderCustomInput = () => {
-        return (_jsxs(Flex, { gap: "base", w: width, children: [_jsx(Tooltip, { label: placeholder, children: _jsx(Input, { placeholder: placeholder, onChange: handleInputChange, _placeholder: { color: 'gray.2' }, value: value }) }), showCalendarIcon && (_jsx(IconButton, { "aria-label": "Calendar icon", variant: "iconOutlined", icon: _jsx(CalendarIcon, { size: 28, stroke: colors.blue[3] }), maxH: "input.md", flexShrink: 0 }))] }));
+        return (_jsxs(Flex, { gap: "base", w: width, children: [_jsx(LabeledField, { label: String(placeholder), children: _jsx(Input, { placeholder: placeholder || 'MM/DD/YYYY', onChange: handleInputChange, _placeholder: { color: 'gray.2' }, value: value }) }), showCalendarIcon && (_jsx(IconButton, { "aria-label": "Calendar icon", variant: "iconOutlined", icon: _jsx(CalendarIcon, { size: 28, stroke: colors.blue[3] }), maxH: "input.md", flexShrink: 0 }))] }));
     };
     return (_jsx(DatePickerComponent, { selected: day, onChange: handleOnChange, customInput: renderCustomInput(), calendarClassName: "custom-calendar" }));
 };

package/dist/components/inputs/SelectInput.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import { t } from 'i18next';
-import { Menu, Text, Input, InputGroup, InputRightElement, Tooltip, Box, } from '@chakra-ui/react';
+import { Menu, Text, Input, InputGroup, InputRightElement, Box, } from '@chakra-ui/react';
 import { textOptionVariants } from '../../helpers';
-import { SearchIcon, SelectButton, SelectItem, SelectList } from '..';
+import { LabeledField, SearchIcon, SelectButton, SelectItem, SelectList, } from '..';
 import { colors } from '../../theme/colors';
 export const SelectInput = ({ filterValue = '', handleClick, handleFilter = () => null, hasFilter, height = 'sm', initialValue = 'All', isDisabled, items, placeholder, variant = 'primary', width = '10rem', }) => {
     const [selectedValue, setSelectedValue] = useState(initialValue);
     useEffect(() => {
         setSelectedValue(initialValue);
     }, [initialValue]);
-    return (_jsxs(Menu, { children: [_jsx(Tooltip, { label: placeholder, children: _jsx(Box, { w: "100%", children: _jsx(SelectButton, { selectedValue: selectedValue, height: height, isDisabled: isDisabled, variant: variant, width: width }) }) }), _jsxs(SelectList, { children: [hasFilter && (_jsxs(InputGroup, { size: "md", w: "100%", px: "2", pb: "2", children: [_jsx(Input, { variant: "filled", bg: "lightBlue.2", pr: "4.5rem", placeholder: t('forms.search'), value: String(filterValue), onChange: handleFilter }), _jsx(InputRightElement, { mr: "base", children: _jsx(SearchIcon, { size: 26, stroke: colors.gray[3] }) })] })), items === null || items === void 0 ? void 0 : items.map((item) => {
+    return (_jsxs(Menu, { children: [_jsx(LabeledField, { label: String(placeholder), children: _jsx(Box, { w: "100%", children: _jsx(SelectButton, { selectedValue: selectedValue, height: height, isDisabled: isDisabled, variant: variant, width: width }) }) }), _jsxs(SelectList, { children: [hasFilter && (_jsxs(InputGroup, { size: "md", w: "100%", px: "2", pb: "2", children: [_jsx(Input, { variant: "filled", bg: "lightBlue.2", pr: "4.5rem", placeholder: t('forms.search'), value: String(filterValue), onChange: handleFilter }), _jsx(InputRightElement, { mr: "base", children: _jsx(SearchIcon, { size: 26, stroke: colors.gray[3] }) })] })), items === null || items === void 0 ? void 0 : items.map((item) => {
                         const isSelectItem = typeof item === 'object';
                         const id = isSelectItem ? item._id : item;
                         const name = isSelectItem ? item.name : item;

package/dist/components/inputs/TextInput.js

@@ -10,9 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormControl, Text, Input, Tooltip } from '@chakra-ui/react';
+import { FormControl, Text, Input } from '@chakra-ui/react';
+import { LabeledField } from '..';
 export const TextInput = (_a) => {
     var { autoCapitalize = 'on', autoCorrect = 'on', errorMessage, handleChange, hasError, id, isDisabled, placeholder, value = '', type = 'text' } = _a, props = __rest(_a, ["autoCapitalize", "autoCorrect", "errorMessage", "handleChange", "hasError", "id", "isDisabled", "placeholder", "value", "type"]);
     const error = hasError && !isDisabled;
-    return (_jsxs(FormControl, { isInvalid: error, children: [_jsx(Tooltip, { label: placeholder, children: _jsx(Input, Object.assign({}, props, { autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, id: id, placeholder: placeholder, value: value, type: type, onChange: handleChange, isInvalid: error, isDisabled: isDisabled, _placeholder: { color: 'gray.2' } })) }), error && _jsx(Text, { variant: "error", children: errorMessage })] }));
+    return (_jsxs(FormControl, { isInvalid: error, children: [_jsx(LabeledField, { label: placeholder, children: _jsx(Input, Object.assign({}, props, { autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, id: id, placeholder: placeholder, value: value, type: type, onChange: handleChange, isInvalid: error, isDisabled: isDisabled, _placeholder: { color: 'gray.2' } })) }), error && _jsx(Text, { variant: "error", children: errorMessage })] }));
 };

package/dist/stories/forms/dynamicForm/DynamicForm.stories.js

@@ -2,8 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { action } from '@storybook/addon-actions';
 import { Box } from '@chakra-ui/react';
 import { DynamicForm } from '../../../components';
-import { formFieldsMock, menuMock, socialLinksMock, tileUIMock } from '../../../mocks';
+import { formFieldsMock, unknownFormMock, menuMock, socialLinksMock, tileUIMock, } from '../../../mocks';
 import { faker } from '@faker-js/faker';
+import { mapApiObjectToFormFields } from '../../../utils';
 export default {
     title: 'Components/Forms/DynamicForm',
     component: DynamicForm,
@@ -28,7 +29,10 @@ export default {
     },
 };
 export const DynamicFormComponent = (args) => {
-    return (_jsx(Box, { p: "base", bg: "neutral.white", w: ['full', '500px'], minH: "500px", children: _jsx(DynamicForm, Object.assign({}, args, { form: formFieldsMock, showTitle: false })) }));
+    const unknownForm = mapApiObjectToFormFields({
+        obj: unknownFormMock,
+    });
+    return (_jsx(Box, { p: "base", bg: "neutral.white", w: ['full', '500px'], minH: "500px", children: _jsx(DynamicForm, Object.assign({}, args, { form: [...formFieldsMock, ...unknownForm], showTitle: false })) }));
 };
 export const DynamicUIFormComponent = (args) => {
     return (_jsx(Box, { m: "base", w: ['full', '320px'], children: _jsx(DynamicForm, Object.assign({}, args, { form: tileUIMock, showTitle: false, callback: action('callback') })) }));

package/dist/utils/DynamicForm.utils.js

@@ -9,13 +9,8 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
         : {};
     const rest = Object.assign({}, obj);
     delete rest.misc;
-    const miscEntries = Object.entries(misc);
-    const rootEntries = Object.entries(rest);
-    const allEntries = [
-        ...rootEntries.map(([key, value]) => [key, value]),
-        ...miscEntries.map(([key, value]) => [key, value]),
-    ];
-    return allEntries
+    const merged = Object.assign(Object.assign({}, rest), misc);
+    return Object.entries(merged)
         .filter(([key]) => !FIELDS_TO_IGNORE.includes(key))
         .flatMap(([key, value]) => {
         const currentLabel = `${labelPrefix ? `${labelPrefix} - ` : ''}${capitalize(key)}`;
@@ -39,7 +34,7 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
                     name: currentLabel,
                     description: '',
                     comments: '',
-                    value,
+                    value: String(value),
                     type: 'number',
                     visible: true,
                 },
@@ -52,7 +47,7 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
                     name: currentLabel,
                     description: '',
                     comments: '',
-                    value,
+                    value: String(value),
                     type: 'switch',
                     visible: true,
                 },
@@ -76,32 +71,58 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
         }
         if (Array.isArray(value) &&
             value.every((v) => Object.prototype.toString.call(v) === '[object Object]')) {
-            return value.flatMap((item, index) => {
-                const itemLabel = `${currentLabel} [${index + 1}]`;
-                return [
-                    {
-                        id: uuidv4(),
-                        name: itemLabel,
-                        description: '',
-                        comments: '',
-                        value: '',
-                        type: 'group',
-                        visible: true,
-                        children: mapApiObjectToFormFields({
-                            obj: item,
-                            depth: depth + 1,
-                            labelPrefix: itemLabel,
-                        }),
-                    },
-                ];
-            });
+            const htmlList = value
+                .map((item) => {
+                const flat = flattenObject(item);
+                return Object.entries(flat)
+                    .map(([k, v]) => {
+                    const label = capitalize(k);
+                    return Array.isArray(v) &&
+                        v.every((el) => typeof el === 'string')
+                        ? `<li><strong>${label}:</strong><ul>${v
+                            .map((el) => `<li>${el}</li>`)
+                            .join('')}</ul></li>`
+                        : `<li><strong>${label}:</strong> ${formatHtmlValue(v)}</li>`;
+                })
+                    .join('');
+            })
+                .join('<br/>');
+            return [
+                {
+                    id: uuidv4(),
+                    name: currentLabel,
+                    description: '',
+                    comments: '',
+                    value: `<ul>${htmlList}</ul>`,
+                    type: 'textarea',
+                    visible: true,
+                },
+            ];
         }
-        if (Object.prototype.toString.call(value) === '[object Object]') {
-            return mapApiObjectToFormFields({
-                obj: value,
-                depth: depth + 1,
-                labelPrefix: currentLabel,
-            });
+        if (isRecord(value)) {
+            const flat = flattenObject(value);
+            const lines = Object.entries(flat)
+                .map(([k, v]) => {
+                const label = capitalize(k);
+                return Array.isArray(v) && v.every((el) => typeof el === 'string')
+                    ? `<li><strong>${label}:</strong><ul>${v
+                        .map((el) => `<li>${el}</li>`)
+                        .join('')}</ul></li>`
+                    : `<li><strong>${label}:</strong> ${formatHtmlValue(v)}</li>`;
+            })
+                .join('');
+            const htmlValue = `<ul>${lines}</ul>`;
+            return [
+                {
+                    id: uuidv4(),
+                    name: currentLabel,
+                    description: '',
+                    comments: '',
+                    value: htmlValue,
+                    type: 'textarea',
+                    visible: true,
+                },
+            ];
         }
         return [
             {
@@ -116,4 +137,32 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
         ];
     });
 };
-const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+const capitalize = (str) => {
+    return str
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .replace(/_/g, ' ')
+        .replace(/\b\w/g, (c) => c.toUpperCase());
+};
+const isRecord = (val) => {
+    return typeof val === 'object' && val !== null && !Array.isArray(val);
+};
+const formatHtmlValue = (val) => {
+    if (Array.isArray(val) && val.every((v) => typeof v === 'string')) {
+        return `<ul>${val.map((v) => `<li>${v}</li>`).join('')}</ul>`;
+    }
+    return String(val);
+};
+const flattenObject = (obj, parentKey = '') => {
+    return Object.entries(obj).reduce((acc, [key, value]) => {
+        const fullKey = parentKey
+            ? `${parentKey} - ${capitalize(key)}`
+            : capitalize(key);
+        if (value && typeof value === 'object' && !Array.isArray(value)) {
+            Object.assign(acc, flattenObject(value, fullKey));
+        }
+        else {
+            acc[fullKey] = value;
+        }
+        return acc;
+    }, {});
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.13.0",
+  "version": "2.14.1",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/components/forms/dynamicForm/fields/AIGridField.tsx

@@ -59,16 +59,18 @@ export const AIGridField = ({
   }
 
   return (
-    <Flex align="center" gap="base">
-      <SingleImage
-        {...imageProps}
-        onUpload={handleUpload}
-        onRemove={onRemove}
-        value={imageField?.value as string}
-      />
-      <Text fontFamily="secondary" textAlign="center">
-        OR
-      </Text>
+    <Flex align="flex-end" gap="base">
+      <Flex align="center" gap="base">
+        <SingleImage
+          {...imageProps}
+          onUpload={handleUpload}
+          onRemove={onRemove}
+          value={imageField?.value as string}
+        />
+        <Text fontFamily="secondary" textAlign="center">
+          OR
+        </Text>
+      </Flex>
       <TextField {...textProps} />
       <IconButton
         aria-label="Add new address line"

package/src/components/forms/dynamicForm/fields/CurrencyField.tsx

@@ -1,7 +1,7 @@
 import { Controller, useFormContext } from 'react-hook-form'
 import { Flex, Input, Tooltip } from '@chakra-ui/react'
 import { TextFieldI } from '@/interfaces'
-import { FormIcon } from '@/components'
+import { FormIcon, LabeledField } from '@/components'
 import { formatCurrency } from '@/utils'
 
 export const CurrencyField = ({ id, icon, placeholder, value }: TextFieldI) => {
@@ -22,7 +22,7 @@ export const CurrencyField = ({ id, icon, placeholder, value }: TextFieldI) => {
             onChange(currency)
           }
           return (
-            <Tooltip label={placeholder}>
+            <LabeledField label={String(placeholder)}>
               <Input
                 onChange={handleChange}
                 placeholder={placeholder}
@@ -30,7 +30,7 @@ export const CurrencyField = ({ id, icon, placeholder, value }: TextFieldI) => {
                 value={value}
                 _placeholder={{ color: 'gray.2' }}
               />
-            </Tooltip>
+            </LabeledField>
           )
         }}
       />

package/src/components/forms/dynamicForm/fields/DateField.tsx

@@ -34,7 +34,7 @@ export const DateField = ({
             <DatePicker
               onChange={onChange}
               showCalendarIcon={showCalendarIcon}
-              placeholder={placeholder}
+              placeholder={name ? '' : placeholder}
               value={value}
               width={width}
             />

package/src/components/forms/dynamicForm/fields/GroupField.tsx

@@ -11,7 +11,7 @@ export const GroupField = ({
 }: GroupFieldI) => {
   return (
     <FieldWithDelete id={id} onRemove={onRemove} canBeHidden={canBeHidden}>
-      <Stack spacing="base" flex="1">
+      <Stack spacing="1" flex="1">
         <SingleFields fields={fields} />
       </Stack>
     </FieldWithDelete>

package/src/components/forms/dynamicForm/fields/LabeledField.tsx

@@ -0,0 +1,22 @@
+import { Box, Text, Flex, Image } from '@chakra-ui/react'
+
+interface LabeledFieldProps {
+  children: React.ReactNode
+  label: string
+}
+
+export const LabeledField = ({ label, children }: LabeledFieldProps) => {
+  if (!label) {
+    return <>{children}</>
+  }
+  return (
+    <Box w="100%">
+      <Flex gap="1" align="start">
+        <Text fontSize="xs" fontFamily="secondary" mb="1">
+          {label}
+        </Text>
+      </Flex>
+      {children}
+    </Box>
+  )
+}

package/src/components/forms/dynamicForm/fields/NumberField.tsx

@@ -1,7 +1,7 @@
 import { Controller, useFormContext } from 'react-hook-form'
-import { Flex, Input, Tooltip } from '@chakra-ui/react'
+import { Flex, Input } from '@chakra-ui/react'
 import { TextFieldI } from '@/interfaces'
-import { FieldDescription } from '@/components'
+import { FieldDescription, LabeledField } from '@/components'
 
 export const NumberField = ({
   description,
@@ -13,14 +13,14 @@ export const NumberField = ({
   const { control } = useFormContext()
   return (
     <Flex align="center" gap="base" flex="auto">
-      <FieldDescription description={description} icon={icon} />
+      {/* <FieldDescription description={description} icon={icon} /> */}
       <Controller
         control={control}
         name={id}
         defaultValue={value}
         render={({ field: { value, onChange } }) => {
           return (
-            <Tooltip label={!description && placeholder}>
+            <LabeledField label={String(!description && placeholder)}>
               <Input
                 onChange={(e) => {
                   const value = e.target.valueAsNumber
@@ -38,7 +38,7 @@ export const NumberField = ({
                 textAlign="right"
                 _placeholder={{ color: 'gray.2' }}
               />
-            </Tooltip>
+            </LabeledField>
           )
         }}
       />

package/src/components/forms/dynamicForm/fields/SelectField.tsx

@@ -14,13 +14,8 @@ export const SelectField = ({
   const { control } = useFormContext()
   const stringOptions = options?.map((option) => String(option)) ?? []
   return (
-    <Flex
-      align="center"
-      gap="base"
-      flex="auto"
-      w={description ? '100%' : '40%'}
-    >
-      <FieldDescription description={description} icon={icon} />
+    <Flex align="start" gap="base" flex="auto" w={description ? '100%' : '40%'}>
+      {/* <FieldDescription description={description} icon={icon} /> */}
       <Box w={description ? '102px' : '100%'}>
         <Controller
           control={control}

package/src/components/forms/dynamicForm/fields/TextAreaField.tsx

@@ -1,9 +1,10 @@
 import { useFormContext, Controller } from 'react-hook-form'
-import { Flex, Image, Tooltip } from '@chakra-ui/react'
+import { Flex, Image } from '@chakra-ui/react'
 import QuillEditor from 'react-quill-new'
 import { TextAreaFieldI } from '@/interfaces'
 import 'react-quill-new/dist/quill.snow.css'
 import '@/styles/quill.css'
+import { LabeledField } from './LabeledField'
 
 export const TextAreaField = ({
   id,
@@ -13,15 +14,15 @@ export const TextAreaField = ({
 }: TextAreaFieldI) => {
   const { control } = useFormContext()
   return (
-    <Tooltip label={placeholder}>
-      <Flex gap="base" align="start" flex="auto">
-        {icon && <Image h="auto" w="icon.md" src={icon} marginTop="2" />}
-        <Controller
-          control={control}
-          name={id}
-          defaultValue={value}
-          render={({ field: { value, onChange } }) => {
-            return (
+    <Flex gap="base" align="start" flex="auto">
+      {/* {icon && <Image h="auto" w="icon.md" src={icon} marginTop="2" />} */}
+      <Controller
+        control={control}
+        name={id}
+        defaultValue={value}
+        render={({ field: { value, onChange } }) => {
+          return (
+            <LabeledField label={placeholder}>
               <QuillEditor
                 theme="snow"
                 value={value}
@@ -30,11 +31,11 @@ export const TextAreaField = ({
                 onChange={onChange}
                 placeholder={placeholder}
               />
-            )
-          }}
-        />
-      </Flex>
-    </Tooltip>
+            </LabeledField>
+          )
+        }}
+      />
+    </Flex>
   )
 }
 

package/src/components/forms/dynamicForm/fields/TextField.tsx

@@ -13,7 +13,6 @@ export const TextField = ({
   const { control } = useFormContext()
   return (
     <Flex align="center" gap="base" flex="auto">
-      <FormIcon icon={icon} />
       <Controller
         control={control}
         name={id}

package/src/components/forms/dynamicForm/fields/index.ts

@@ -9,6 +9,7 @@ export * from './FieldWithDelete'
 export * from './FileField'
 export * from './GridField'
 export * from './GroupField'
+export * from './LabeledField'
 export * from './NumberField'
 export * from './SwitchField'
 export * from './RatingField'

package/src/components/inputs/DatePicker.tsx

@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react'
 import DatePickerComponent from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'
 import '@/styles/calendar.css'
-import { Flex, IconButton, Input, Tooltip } from '@chakra-ui/react'
-import { Calendar as CalendarIcon } from '@/components'
+import { Flex, IconButton, Input } from '@chakra-ui/react'
+import { Calendar as CalendarIcon, LabeledField } from '@/components'
 import { DatePickerI } from '@/interfaces'
 import { colors } from '@/theme/colors'
 import { extractDayMonthYear, joinDayMonthYear } from '@/utils'
@@ -56,14 +56,14 @@ export const DatePicker = ({
   const renderCustomInput = () => {
     return (
       <Flex gap="base" w={width}>
-        <Tooltip label={placeholder}>
+        <LabeledField label={String(placeholder)}>
           <Input
-            placeholder={placeholder}
+            placeholder={placeholder || 'MM/DD/YYYY'}
             onChange={handleInputChange}
             _placeholder={{ color: 'gray.2' }}
             value={value}
           />
-        </Tooltip>
+        </LabeledField>
         {showCalendarIcon && (
           <IconButton
             aria-label="Calendar icon"

package/src/components/inputs/SelectInput.tsx

@@ -11,7 +11,13 @@ import {
 } from '@chakra-ui/react'
 import { SelectI } from '@/interfaces'
 import { textOptionVariants } from '@/helpers'
-import { SearchIcon, SelectButton, SelectItem, SelectList } from '@/components'
+import {
+  LabeledField,
+  SearchIcon,
+  SelectButton,
+  SelectItem,
+  SelectList,
+} from '@/components'
 import { colors } from '@/theme/colors'
 
 export const SelectInput = ({
@@ -35,7 +41,7 @@ export const SelectInput = ({
 
   return (
     <Menu>
-      <Tooltip label={placeholder}>
+      <LabeledField label={String(placeholder)}>
         <Box w="100%">
           <SelectButton
             selectedValue={selectedValue}
@@ -45,7 +51,7 @@ export const SelectInput = ({
             width={width}
           />
         </Box>
-      </Tooltip>
+      </LabeledField>
       <SelectList>
         {hasFilter && (
           <InputGroup size="md" w="100%" px="2" pb="2">

package/src/components/inputs/TextInput.tsx

@@ -1,5 +1,6 @@
-import { FormControl, Text, Input, Tooltip } from '@chakra-ui/react'
+import { FormControl, Text, Input } from '@chakra-ui/react'
 import { InputI } from '@/interfaces'
+import { LabeledField } from '@/components'
 
 export const TextInput = ({
   autoCapitalize = 'on',
@@ -17,7 +18,7 @@ export const TextInput = ({
   const error = hasError && !isDisabled
   return (
     <FormControl isInvalid={error}>
-      <Tooltip label={placeholder}>
+      <LabeledField label={placeholder}>
         <Input
           {...props}
           autoCapitalize={autoCapitalize}
@@ -31,7 +32,7 @@ export const TextInput = ({
           isDisabled={isDisabled}
           _placeholder={{ color: 'gray.2' }}
         />
-      </Tooltip>
+      </LabeledField>
       {error && <Text variant="error">{errorMessage}</Text>}
     </FormControl>
   )

package/src/stories/forms/dynamicForm/DynamicForm.stories.tsx

@@ -2,9 +2,16 @@ import { Meta } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import { Box } from '@chakra-ui/react'
 import { DynamicForm } from '@/components'
-import { formFieldsMock, menuMock, socialLinksMock, tileUIMock } from '@/mocks'
-import { DynamicFormI } from '@/interfaces'
+import {
+  formFieldsMock,
+  unknownFormMock,
+  menuMock,
+  socialLinksMock,
+  tileUIMock,
+} from '@/mocks'
+import { DynamicFormI, ReportI } from '@/interfaces'
 import { faker } from '@faker-js/faker'
+import { mapApiObjectToFormFields } from '@/utils'
 
 export default {
   title: 'Components/Forms/DynamicForm',
@@ -31,9 +38,16 @@ export default {
 } as Meta<DynamicFormI>
 
 export const DynamicFormComponent = (args: DynamicFormI) => {
+  const unknownForm = mapApiObjectToFormFields({
+    obj: unknownFormMock,
+  })
   return (
     <Box p="base" bg="neutral.white" w={['full', '500px']} minH="500px">
-      <DynamicForm {...args} form={formFieldsMock} showTitle={false} />
+      <DynamicForm
+        {...args}
+        form={[...formFieldsMock, ...unknownForm]}
+        showTitle={false}
+      />
     </Box>
   )
 }

package/src/utils/DynamicForm.utils.ts

@@ -24,17 +24,11 @@ export const mapApiObjectToFormFields = ({
   const rest = { ...obj }
   delete rest.misc
 
-  const miscEntries = Object.entries(misc)
-  const rootEntries = Object.entries(rest)
+  const merged = { ...rest, ...misc }
 
-  const allEntries = [
-    ...rootEntries.map(([key, value]) => [key, value] as const),
-    ...miscEntries.map(([key, value]) => [key, value] as const),
-  ]
-
-  return allEntries
+  return Object.entries(merged)
     .filter(([key]) => !FIELDS_TO_IGNORE.includes(key))
-    .flatMap(([key, value]) => {
+    .flatMap(([key, value]): any => {
       const currentLabel = `${
         labelPrefix ? `${labelPrefix} - ` : ''
       }${capitalize(key)}`
@@ -60,7 +54,7 @@ export const mapApiObjectToFormFields = ({
             name: currentLabel,
             description: '',
             comments: '',
-            value,
+            value: String(value),
             type: 'number',
             visible: true,
           },
@@ -74,7 +68,7 @@ export const mapApiObjectToFormFields = ({
             name: currentLabel,
             description: '',
             comments: '',
-            value,
+            value: String(value),
             type: 'switch',
             visible: true,
           },
@@ -104,33 +98,62 @@ export const mapApiObjectToFormFields = ({
           (v) => Object.prototype.toString.call(v) === '[object Object]'
         )
       ) {
-        return value.flatMap((item, index) => {
-          const itemLabel = `${currentLabel} [${index + 1}]`
-          return [
-            {
-              id: uuidv4(),
-              name: itemLabel,
-              description: '',
-              comments: '',
-              value: '',
-              type: 'group',
-              visible: true,
-              children: mapApiObjectToFormFields({
-                obj: item,
-                depth: depth + 1,
-                labelPrefix: itemLabel,
-              }),
-            },
-          ]
-        })
+        const htmlList = value
+          .map((item) => {
+            const flat = flattenObject(item)
+            return Object.entries(flat)
+              .map(([k, v]) => {
+                const label = capitalize(k)
+                return Array.isArray(v) &&
+                  v.every((el) => typeof el === 'string')
+                  ? `<li><strong>${label}:</strong><ul>${v
+                      .map((el) => `<li>${el}</li>`)
+                      .join('')}</ul></li>`
+                  : `<li><strong>${label}:</strong> ${formatHtmlValue(v)}</li>`
+              })
+              .join('')
+          })
+          .join('<br/>')
+
+        return [
+          {
+            id: uuidv4(),
+            name: currentLabel,
+            description: '',
+            comments: '',
+            value: `<ul>${htmlList}</ul>`,
+            type: 'textarea',
+            visible: true,
+          },
+        ]
       }
 
-      if (Object.prototype.toString.call(value) === '[object Object]') {
-        return mapApiObjectToFormFields({
-          obj: value,
-          depth: depth + 1,
-          labelPrefix: currentLabel,
-        })
+      if (isRecord(value)) {
+        const flat = flattenObject(value)
+
+        const lines = Object.entries(flat)
+          .map(([k, v]) => {
+            const label = capitalize(k)
+            return Array.isArray(v) && v.every((el) => typeof el === 'string')
+              ? `<li><strong>${label}:</strong><ul>${v
+                  .map((el) => `<li>${el}</li>`)
+                  .join('')}</ul></li>`
+              : `<li><strong>${label}:</strong> ${formatHtmlValue(v)}</li>`
+          })
+          .join('')
+        const htmlValue = `<ul>${lines}</ul>`
+
+        return [
+          {
+            id: uuidv4(),
+            name: currentLabel,
+            description: '',
+            comments: '',
+            value: htmlValue,
+            type: 'textarea',
+            visible: true,
+          },
+        ]
       }
 
       return [
@@ -147,4 +170,37 @@ export const mapApiObjectToFormFields = ({
     })
 }
 
-const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
+const capitalize = (str: string) => {
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .replace(/_/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase())
+}
+
+const isRecord = (val: unknown): val is Record<string, any> => {
+  return typeof val === 'object' && val !== null && !Array.isArray(val)
+}
+
+const formatHtmlValue = (val: unknown): string => {
+  if (Array.isArray(val) && val.every((v) => typeof v === 'string')) {
+    return `<ul>${val.map((v) => `<li>${v}</li>`).join('')}</ul>`
+  }
+  return String(val)
+}
+
+const flattenObject = (
+  obj: Record<string, any>,
+  parentKey = ''
+): Record<string, any> => {
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    const fullKey = parentKey
+      ? `${parentKey} - ${capitalize(key)}`
+      : capitalize(key)
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      Object.assign(acc, flattenObject(value, fullKey))
+    } else {
+      acc[fullKey] = value
+    }
+    return acc
+  }, {} as Record<string, any>)
+}