@homefile/components-v2 2.9.4 → 2.11.0

package/dist/components/forms/dynamicForm/DynamicForm.d.ts

@@ -1,2 +1,2 @@
 import { DynamicFormI } from '../../../interfaces';
-export declare const DynamicForm: ({ callback, displayImages, form: fields, menuItems, onRemoveImage, onUpload, showTitle, title, uploadingFieldId, ...props }: DynamicFormI) => import("react/jsx-runtime").JSX.Element;
+export declare const DynamicForm: ({ callback, displayImages, form: fields, menuItems, onAISend, onRemoveImage, onUpload, showTitle, title, uploadingFieldId, ...props }: DynamicFormI) => import("react/jsx-runtime").JSX.Element;

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

@@ -10,15 +10,15 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { FormProvider } from 'react-hook-form';
 import { t } from 'i18next';
 import { Box, Stack, Text } from '@chakra-ui/react';
-import { HiddenFieldSection, GroupField, TextField, TextAreaField, SelectField, RatingField, GridField, FieldWithDelete, FileField, SwitchField, DateField, NumberField, CurrencyField, TileBody, CheckboxGroupField, CheckboxAgreement, } from '../..';
+import { HiddenFieldSection, GroupField, TextField, TextAreaField, SelectField, RatingField, GridField, FieldWithDelete, FileField, SwitchField, DateField, NumberField, CurrencyField, TileBody, CheckboxGroupField, CheckboxAgreement, AIGridField, } from '../..';
 import { useDynamicForm } from '../../../hooks';
 import { fieldIcons } from '../../../helpers';
 export const DynamicForm = (_a) => {
-    var { callback, displayImages, form: fields, menuItems, onRemoveImage, onUpload, showTitle = true, title, uploadingFieldId } = _a, props = __rest(_a, ["callback", "displayImages", "form", "menuItems", "onRemoveImage", "onUpload", "showTitle", "title", "uploadingFieldId"]);
+    var { callback, displayImages, form: fields, menuItems, onAISend, onRemoveImage, onUpload, showTitle = true, title, uploadingFieldId } = _a, props = __rest(_a, ["callback", "displayImages", "form", "menuItems", "onAISend", "onRemoveImage", "onUpload", "showTitle", "title", "uploadingFieldId"]);
     const { form, visibleFields, hiddenFields, handleAddAll, handleAdd, handleFilesUpload, handleRemove, } = useDynamicForm({ fields, onUpload });
     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) => {
                         const { canBeHidden, children, description, icon, id, name, options, type, value, } = field;
@@ -26,7 +26,7 @@ export const DynamicForm = (_a) => {
                             id,
                             value,
                             icon: icon ? fieldIcons[icon] : undefined,
-                            placeholder: (name && name !== "") ? name : description,
+                            placeholder: Boolean(name) ? name : description,
                         };
                         const fieldWithDeleteBaseProps = {
                             id,
@@ -62,6 +62,8 @@ export const DynamicForm = (_a) => {
                             case 'rating':
                                 return (_createElement(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { key: id }),
                                     _jsx(RatingField, Object.assign({}, baseProps))));
+                            case 'ai-grid':
+                                return (_jsxs(Stack, { p: "base", spacing: "base", bg: "lightBlue.2", children: [description && (_jsx(Text, { fontFamily: "secondary", children: description })), _jsx(AIGridField, Object.assign({}, baseProps, { onRemove: onRemoveImage, onUpload: (files) => handleFilesUpload({ id, files }), onAISend: onAISend, children: children }))] }, id));
                             case 'grid':
                                 return (_createElement(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { key: id }),
                                     _jsx(GridField, Object.assign({}, baseProps, { children: children }))));

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

@@ -0,0 +1,2 @@
+import { AIGridFieldI } from '../../../../interfaces';
+export declare const AIGridField: ({ children, onAISend, onRemove, onUpload, }: AIGridFieldI) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormContext } from 'react-hook-form';
+import { Flex, IconButton, Text } from '@chakra-ui/react';
+import { TextField, SingleImage, Plus } from '../../..';
+import { fieldIcons } from '../../../../helpers';
+import { colors } from '../../../../theme/colors';
+export const AIGridField = ({ children, onAISend, onRemove, onUpload, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { watch } = useFormContext();
+    const textChild = children === null || children === void 0 ? void 0 : children.find(({ type }) => type === 'text' || type === 'string');
+    const textProps = {
+        id: (_a = textChild === null || textChild === void 0 ? void 0 : textChild.id) !== null && _a !== void 0 ? _a : '',
+        value: (_b = textChild === null || textChild === void 0 ? void 0 : textChild.value) !== null && _b !== void 0 ? _b : '',
+        placeholder: (_c = textChild === null || textChild === void 0 ? void 0 : textChild.name) !== null && _c !== void 0 ? _c : textChild === null || textChild === void 0 ? void 0 : textChild.description,
+        icon: (textChild === null || textChild === void 0 ? void 0 : textChild.icon)
+            ? fieldIcons[textChild.icon]
+            : undefined,
+    };
+    const imageField = children === null || children === void 0 ? void 0 : children.find(({ type }) => type === 'ai-image');
+    const imageProps = {
+        id: (_d = imageField === null || imageField === void 0 ? void 0 : imageField.id) !== null && _d !== void 0 ? _d : '',
+        value: (_e = imageField === null || imageField === void 0 ? void 0 : imageField.value) !== null && _e !== void 0 ? _e : '',
+        placeholder: (_f = imageField === null || imageField === void 0 ? void 0 : imageField.name) !== null && _f !== void 0 ? _f : imageField === null || imageField === void 0 ? void 0 : imageField.description,
+        icon: (imageField === null || imageField === void 0 ? void 0 : imageField.icon)
+            ? fieldIcons[imageField.icon]
+            : undefined,
+    };
+    const code = watch(String(textChild === null || textChild === void 0 ? void 0 : textChild.id));
+    const handleAISend = () => {
+        const form = {
+            code,
+            image: imageField === null || imageField === void 0 ? void 0 : imageField.value,
+        };
+        onAISend === null || onAISend === void 0 ? void 0 : onAISend(form);
+    };
+    return (_jsxs(Flex, { align: "center", gap: "base", children: [_jsx(SingleImage, Object.assign({}, imageProps, { onUpload: onUpload, 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: !(code === null || code === void 0 ? void 0 : code.length) && !(imageField === null || imageField === void 0 ? void 0 : imageField.value) })] }));
+};

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

@@ -1,2 +1,2 @@
-import { ReportI } from '../../../../interfaces';
-export declare const GridField: ({ children }: Pick<ReportI, "children">) => import("react/jsx-runtime").JSX.Element;
+import { GridFieldI } from '../../../../interfaces';
+export declare const GridField: ({ children, onRemove, onUpload }: GridFieldI) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { Flex } from '@chakra-ui/react';
-import { DateField, NumberField, TextField, SelectField, CurrencyField, } from '../../..';
+import { DateField, NumberField, TextField, SelectField, CurrencyField, SingleImage, } from '../../..';
 import { fieldIcons } from '../../../../helpers';
-export const GridField = ({ children }) => {
+export const GridField = ({ children, onRemove, onUpload }) => {
     return (_jsx(Flex, { align: "stretch", gap: "base", children: children === null || children === void 0 ? void 0 : children.map(({ id, description, name, value, type, options = [], icon }) => {
             const baseProps = {
                 id,
                 value,
-                placeholder: (name && name !== "") ? name : description,
+                placeholder: name && name !== '' ? name : description,
                 icon: icon ? fieldIcons[icon] : undefined,
             };
             switch (type) {
@@ -27,6 +27,8 @@ export const GridField = ({ children }) => {
                     return _createElement(SelectField, Object.assign({}, baseProps, { key: id, options: options }));
                 case 'telephone':
                     return _createElement(TextField, Object.assign({}, baseProps, { key: id, type: "tel" }));
+                case 'ai-image':
+                    return (_createElement(SingleImage, Object.assign({}, baseProps, { key: id, onUpload: onUpload, onRemove: onRemove, value: value })));
                 default:
                     return null;
             }

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

@@ -0,0 +1,2 @@
+import { FileFieldI } from '../../../../interfaces';
+export declare const SingleImage: ({ onRemove, onUpload, uploading, value, }: FileFieldI) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AspectRatio, Box, Flex, IconButton, Image } from '@chakra-ui/react';
+import { colors } from '../../../../theme/colors';
+import { Close, MobileFileUploader } from '../../..';
+import { handleMapFile } from '../../../../utils';
+export const SingleImage = ({ onRemove, onUpload, uploading = false, value, }) => {
+    const handleInputChange = (event) => {
+        var _a;
+        const fileList = (_a = event.target.files) !== null && _a !== void 0 ? _a : [];
+        const files = Array.from(fileList);
+        if (files.length > 0) {
+            const selectedFiles = handleMapFile({ files });
+            onUpload === null || onUpload === void 0 ? void 0 : onUpload(selectedFiles);
+        }
+    };
+    return (_jsxs(Flex, { gap: "2", align: "center", h: "input.md", children: [_jsx(MobileFileUploader, { handleInputChange: handleInputChange, "aria-label": "upload image", minW: "72px" }), value && (_jsxs(Box, { position: "relative", minW: "30px", children: [_jsx(IconButton, { variant: "ghost", "aria-label": "close", maxW: "fit-content", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(value), icon: _jsx(Close, { size: 11, stroke: colors.error['2'] }), disabled: uploading, position: "absolute", bg: "neutral.white", p: "0.5", borderRadius: "full", top: "-2", right: "-2", zIndex: "1" }), _jsx(AspectRatio, { maxW: "100%", ratio: 1, children: _jsx(Image, { src: value, objectFit: "cover", alt: "image" }) })] }))] }));
+};

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

@@ -1,3 +1,4 @@
+export * from './AIGridField';
 export * from './CheckboxAgreement';
 export * from './CheckboxGroupField';
 export * from './CurrencyField';
@@ -13,6 +14,7 @@ export * from './SwitchField';
 export * from './RatingField';
 export * from './SelectField';
 export * from './SingleFields';
+export * from './SingleImage';
 export * from './TextAreaField';
 export * from './TextField';
 export * from './TileBodyFields';

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

@@ -1,3 +1,4 @@
+export * from './AIGridField';
 export * from './CheckboxAgreement';
 export * from './CheckboxGroupField';
 export * from './CurrencyField';
@@ -13,6 +14,7 @@ export * from './SwitchField';
 export * from './RatingField';
 export * from './SelectField';
 export * from './SingleFields';
+export * from './SingleImage';
 export * from './TextAreaField';
 export * from './TextField';
 export * from './TileBodyFields';

package/dist/components/icons/Camera.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { colors } from '../../theme/colors';
 export const Camera = ({ stroke = colors.blue[3], size = 24 }) => {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, fill: stroke, viewBox: "0 0 256 256", children: _jsx("path", { d: "M208,56H180.28L166.65,35.56A8,8,0,0,0,160,32H96a8,8,0,0,0-6.65,3.56L75.71,56H48A24,24,0,0,0,24,80V192a24,24,0,0,0,24,24H208a24,24,0,0,0,24-24V80A24,24,0,0,0,208,56Zm-44,76a36,36,0,1,1-36-36A36,36,0,0,1,164,132Z" }) }));
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 26.734 22.146", children: _jsxs("g", { id: "Icon_feather-camera", "data-name": "Icon feather-camera", transform: "translate(-0.75 -3.75)", children: [_jsx("path", { id: "Caminho_17678", "data-name": "Caminho 17678", d: "M26.735,22.852a2.294,2.294,0,0,1-2.294,2.294H3.794A2.294,2.294,0,0,1,1.5,22.852V10.235A2.294,2.294,0,0,1,3.794,7.941H8.382L10.676,4.5h6.882l2.294,3.441H24.44a2.294,2.294,0,0,1,2.294,2.294Z", transform: "translate(0 0)", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }), _jsx("path", { id: "Caminho_17679", "data-name": "Caminho 17679", d: "M21.176,18.088A4.588,4.588,0,1,1,16.588,13.5,4.588,4.588,0,0,1,21.176,18.088Z", transform: "translate(-2.471 -2.118)", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" })] }) }));
 };

package/dist/components/inputs/MobileFileUploader.d.ts

@@ -1,2 +1,2 @@
 import { EditFileUploaderI } from '../../interfaces';
-export declare const MobileFileUploader: ({ handleInputChange, ...props }: EditFileUploaderI) => import("react/jsx-runtime").JSX.Element;
+export declare const MobileFileUploader: ({ handleInputChange, multiple, ...props }: EditFileUploaderI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/MobileFileUploader.js

@@ -15,7 +15,7 @@ import { t } from 'i18next';
 import { IconButton } from '@chakra-ui/react';
 import { Camera } from '..';
 export const MobileFileUploader = (_a) => {
-    var { handleInputChange } = _a, props = __rest(_a, ["handleInputChange"]);
+    var { handleInputChange, multiple = true } = _a, props = __rest(_a, ["handleInputChange", "multiple"]);
     const hiddenFileInput = useRef(null);
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({}, props, { variant: "iconOutlined", h: "2.3rem", icon: _jsx(Camera, {}), onClick: () => { var _a; return (_a = hiddenFileInput === null || hiddenFileInput === void 0 ? void 0 : hiddenFileInput.current) === null || _a === void 0 ? void 0 : _a.click(); } })), _jsx("input", { style: { display: 'none' }, accept: "image/*", type: "file", name: "imageUpload", ref: hiddenFileInput, placeholder: t('addMedia.placeholder'), onChange: handleInputChange })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({}, props, { variant: "iconOutlined", minH: "40px", h: "full", icon: _jsx(Camera, {}), onClick: () => { var _a; return (_a = hiddenFileInput === null || hiddenFileInput === void 0 ? void 0 : hiddenFileInput.current) === null || _a === void 0 ? void 0 : _a.click(); } })), _jsx("input", { style: { display: 'none' }, accept: "image/*", type: "file", name: "imageUpload", ref: hiddenFileInput, placeholder: t('addMedia.placeholder'), onChange: handleInputChange, multiple: multiple })] }));
 };

package/dist/hooks/folderPanel/useFilesUploader.d.ts

@@ -1,6 +1,6 @@
 import { FolderFileI } from '../../interfaces';
 interface FilesUploaderHookI {
-    onUpload: (files: FolderFileI[]) => void;
+    onUpload?: (files: FolderFileI[]) => void;
     uploading: boolean;
     displayImages?: string[];
 }

package/dist/hooks/folderPanel/useFilesUploader.js

@@ -35,7 +35,7 @@ export const useFilesUploader = ({ onUpload, uploading, displayImages = [], }) =
         }
     }, [hasError]);
     useEffect(() => {
-        onUpload(acceptedFiles);
+        onUpload === null || onUpload === void 0 ? void 0 : onUpload(acceptedFiles);
     }, [acceptedFiles]);
     useEffect(() => {
         setIsUploading(uploading);

package/dist/interfaces/forms/dynamicForm/DynamicForm.interface.d.ts

@@ -1,5 +1,5 @@
-import { FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '../..';
-export type KindTypes = 'checkbox' | 'checkbox-agreement' | 'checkbox-group' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'hidden' | 'notes' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default' | UIKindTypes | HomeItemTypes;
+import { AIGridFieldI, FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '../..';
+export type KindTypes = 'ai-image' | 'ai-grid' | 'checkbox' | 'checkbox-agreement' | 'checkbox-group' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'hidden' | 'notes' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default' | UIKindTypes | HomeItemTypes;
 export type UIKindTypes = 'tile-body' | 'tile-body-logo' | 'tile-body-header' | 'tile-body-section' | 'tile-body-section-grid' | 'tile-form' | 'tile-body-action' | 'vertical-icon' | 'primary-cta' | 'secondary-cta';
 export type HomeItemTypes = 'appliances' | 'images' | 'guidelines' | 'item-related' | 'item-icon-btn';
 export type IconTypes = 'barcode' | 'battery' | 'billing' | 'book' | 'book-opened' | 'calc' | 'calendar' | 'check' | 'co2' | 'contact' | 'date' | 'default' | 'detector' | 'electricity' | 'goldbars' | 'heart' | 'image' | 'notes' | 'palette' | 'people' | 'price' | 'rating' | 'receipt' | 'registry' | 'sprinkler' | 'tools' | 'wind' | '68' | 'calendar2' | 'water' | 'calendar-drop' | 'umbrella' | 'heater' | 'roof' | 'foundation' | 'solar-panel' | 'pool' | 'drop' | 'mobile-drop' | 'light' | 'plate' | 'pressure-washer' | 'house' | 'target' | 'title' | 'company' | UIIconTypes;
@@ -25,6 +25,7 @@ export interface DynamicFormI extends Partial<PartnerFooterI> {
     displayImages?: string[];
     form: ReportI[];
     menuItems?: MenuItemI[];
+    onAISend?: AIGridFieldI['onAISend'];
     onRemoveImage?: (file: string) => void;
     onUpload?: (filesByFieldId: Record<string, FolderFileI[]>) => void;
     showTitle?: boolean;

package/dist/interfaces/forms/dynamicForm/fields/FileField.interface.d.ts

@@ -1,7 +1,8 @@
 import { FolderFileI, ReportI } from '../../..';
 export interface FileFieldI extends Pick<ReportI, 'description' | 'icon'> {
     onRemove?: (file: string) => void;
-    onUpload: (files: FolderFileI[]) => void;
+    onUpload?: (files: FolderFileI[]) => void;
     uploading?: boolean;
     displayImages?: string[];
+    value?: string;
 }

package/dist/interfaces/forms/dynamicForm/fields/GridField.interface.d.ts

@@ -0,0 +1,14 @@
+import { FolderFileI, ReportI } from '../../..';
+export interface GridFieldI {
+    children: ReportI['children'];
+    onRemove?: (file: string) => void;
+    onUpload?: (files: FolderFileI[]) => void;
+}
+export interface AIGridFieldI extends GridFieldI {
+    onAISend?: (form?: AIFormI) => void;
+}
+interface AIFormI {
+    code?: string;
+    image?: string;
+}
+export {};

package/dist/interfaces/forms/dynamicForm/fields/GridField.interface.js

@@ -0,0 +1 @@
+export {};

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

@@ -2,6 +2,7 @@ export * from './DateField.interface';
 export * from './FieldDescription.interface';
 export * from './FieldWithDelete.interface';
 export * from './FileField.interface';
+export * from './GridField.interface';
 export * from './GroupField.interface';
 export * from './RatingField.interface';
 export * from './SelectField.interface';

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

@@ -2,6 +2,7 @@ export * from './DateField.interface';
 export * from './FieldDescription.interface';
 export * from './FieldWithDelete.interface';
 export * from './FileField.interface';
+export * from './GridField.interface';
 export * from './GroupField.interface';
 export * from './RatingField.interface';
 export * from './SelectField.interface';

package/dist/interfaces/inputs/EditFileUploader.interface.d.ts

@@ -2,4 +2,5 @@ import { ChangeEvent } from 'react';
 import { IconButtonProps } from '@chakra-ui/react';
 export interface EditFileUploaderI extends IconButtonProps {
     handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    multiple?: boolean;
 }

package/dist/mocks/forms/dynamicForm.mock.js

@@ -9,6 +9,34 @@ export const formFieldsMock = [
         type: 'checkbox-agreement',
         visible: true,
     },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'ai form',
+        description: 'Add item details',
+        value: false,
+        type: 'ai-grid',
+        visible: true,
+        children: [
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Model or Serial',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: '',
+                type: 'text',
+                visible: true,
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'uploder',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: faker.image.urlPicsumPhotos(),
+                type: 'ai-image',
+                visible: true,
+            },
+        ],
+    },
     {
         id: faker.database.mongodbObjectId(),
         name: '',
@@ -137,7 +165,7 @@ export const formFieldsMock = [
                         name: 'Purchase Date',
                         description: faker.lorem.sentence(),
                         comments: faker.lorem.sentence(),
-                        value: faker.date.past().toLocaleDateString(),
+                        value: '',
                         type: 'date',
                         visible: true,
                     },
@@ -240,7 +268,7 @@ export const formFieldsMock = [
         name: 'Due Date',
         description: faker.lorem.sentence(),
         comments: faker.lorem.sentence(),
-        value: faker.date.future().toLocaleDateString(),
+        value: '',
         type: 'date',
         visible: true,
         icon: 'date',

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

@@ -19,6 +19,7 @@ export default {
             faker.image.urlPicsumPhotos(),
             faker.image.urlPicsumPhotos(),
         ],
+        onAiSend: action('onAiSend'),
         onUpload: action('onUpload'),
         menuItems: menuMock,
         socialLinks: socialLinksMock,
@@ -26,7 +27,7 @@ export default {
     },
 };
 export const DynamicFormComponent = (args) => {
-    return (_jsx(Box, { p: "base", bg: "neutral.white", w: ['full', '500px'], children: _jsx(DynamicForm, Object.assign({}, args, { form: formFieldsMock })) }));
+    return (_jsx(Box, { p: "base", bg: "neutral.white", w: ['full', '500px'], children: _jsx(DynamicForm, Object.assign({}, args, { form: formFieldsMock, 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/package.json

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

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

@@ -19,6 +19,7 @@ import {
   TileBody,
   CheckboxGroupField,
   CheckboxAgreement,
+  AIGridField,
 } from '@/components'
 import { useDynamicForm } from '@/hooks'
 import { fieldIcons } from '@/helpers'
@@ -28,6 +29,7 @@ export const DynamicForm = ({
   displayImages,
   form: fields,
   menuItems,
+  onAISend,
   onRemoveImage,
   onUpload,
   showTitle = true,
@@ -77,7 +79,7 @@ export const DynamicForm = ({
               id,
               value,
               icon: icon ? (fieldIcons[icon] as IconTypes) : undefined,
-              placeholder: (name && name !== "") ? name : description,
+              placeholder: Boolean(name) ? name : description,
             }
             const fieldWithDeleteBaseProps = {
               id,
@@ -140,6 +142,22 @@ export const DynamicForm = ({
                     <RatingField {...baseProps} />
                   </FieldWithDelete>
                 )
+              case 'ai-grid':
+                return (
+                  <Stack key={id} p="base" spacing="base" bg="lightBlue.2">
+                    {description && (
+                      <Text fontFamily="secondary">{description}</Text>
+                    )}
+                    <AIGridField
+                      {...baseProps}
+                      onRemove={onRemoveImage}
+                      onUpload={(files) => handleFilesUpload({ id, files })}
+                      onAISend={onAISend}
+                    >
+                      {children}
+                    </AIGridField>
+                  </Stack>
+                )
               case 'grid':
                 return (
                   <FieldWithDelete {...fieldWithDeleteBaseProps} key={id}>

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

@@ -0,0 +1,72 @@
+import { useFormContext } from 'react-hook-form'
+import { Flex, IconButton, Text } from '@chakra-ui/react'
+import { IconTypes, AIGridFieldI } from '@/interfaces'
+import { TextField, SingleImage, Plus } from '@/components'
+import { fieldIcons } from '@/helpers'
+import { colors } from '@/theme/colors'
+
+export const AIGridField = ({
+  children,
+  onAISend,
+  onRemove,
+  onUpload,
+}: AIGridFieldI) => {
+  const { watch } = useFormContext()
+
+  const textChild = children?.find(
+    ({ type }) => type === 'text' || type === 'string'
+  )
+
+  const textProps = {
+    id: textChild?.id ?? '',
+    value: textChild?.value ?? '',
+    placeholder: textChild?.name ?? textChild?.description,
+    icon: textChild?.icon
+      ? (fieldIcons[textChild.icon] as IconTypes)
+      : undefined,
+  }
+
+  const imageField = children?.find(({ type }) => type === 'ai-image')
+
+  const imageProps = {
+    id: imageField?.id ?? '',
+    value: imageField?.value ?? '',
+    placeholder: imageField?.name ?? imageField?.description,
+    icon: imageField?.icon
+      ? (fieldIcons[imageField.icon] as IconTypes)
+      : undefined,
+  }
+
+  const code = watch(String(textChild?.id))
+
+  const handleAISend = () => {
+    const form = {
+      code,
+      image: imageField?.value as string,
+    }
+    onAISend?.(form)
+  }
+
+  return (
+    <Flex align="center" gap="base">
+      <SingleImage
+        {...imageProps}
+        onUpload={onUpload}
+        onRemove={onRemove}
+        value={imageField?.value as string}
+      />
+      <Text fontFamily="secondary" textAlign="center">
+        OR
+      </Text>
+      <TextField {...textProps} />
+      <IconButton
+        aria-label="Add new address line"
+        variant="iconOutlined"
+        icon={<Plus size={28} stroke={colors.blue[3]} />}
+        onClick={handleAISend}
+        h="input.md"
+        disabled={!code?.length && !imageField?.value}
+      />
+    </Flex>
+  )
+}

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

@@ -1,15 +1,16 @@
 import { Flex } from '@chakra-ui/react'
-import { IconTypes, ReportI } from '@/interfaces'
+import { IconTypes, GridFieldI } from '@/interfaces'
 import {
   DateField,
   NumberField,
   TextField,
   SelectField,
   CurrencyField,
+  SingleImage,
 } from '@/components'
 import { fieldIcons } from '@/helpers'
 
-export const GridField = ({ children }: Pick<ReportI, 'children'>) => {
+export const GridField = ({ children, onRemove, onUpload }: GridFieldI) => {
   return (
     <Flex align="stretch" gap="base">
       {children?.map(
@@ -17,7 +18,7 @@ export const GridField = ({ children }: Pick<ReportI, 'children'>) => {
           const baseProps = {
             id,
             value,
-            placeholder: (name && name !== "") ? name : description,
+            placeholder: name && name !== '' ? name : description,
             icon: icon ? (fieldIcons[icon] as IconTypes) : undefined,
           }
 
@@ -45,6 +46,16 @@ export const GridField = ({ children }: Pick<ReportI, 'children'>) => {
               return <SelectField {...baseProps} key={id} options={options} />
             case 'telephone':
               return <TextField {...baseProps} key={id} type="tel" />
+            case 'ai-image':
+              return (
+                <SingleImage
+                  {...baseProps}
+                  key={id}
+                  onUpload={onUpload}
+                  onRemove={onRemove}
+                  value={value as string}
+                />
+              )
             default:
               return null
           }

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

@@ -0,0 +1,54 @@
+import { ChangeEvent } from 'react'
+import { AspectRatio, Box, Flex, IconButton, Image } from '@chakra-ui/react'
+import { colors } from '@/theme/colors'
+import { Close, MobileFileUploader } from '@/components'
+import { FileFieldI } from '@/interfaces'
+import { handleMapFile } from '@/utils'
+
+export const SingleImage = ({
+  onRemove,
+  onUpload,
+  uploading = false,
+  value,
+}: FileFieldI) => {
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const fileList = event.target.files ?? []
+    const files = Array.from(fileList)
+    if (files.length > 0) {
+      const selectedFiles = handleMapFile({ files })
+      onUpload?.(selectedFiles)
+    }
+  }
+
+  return (
+    <Flex gap="2" align="center" h="input.md">
+      <MobileFileUploader
+        handleInputChange={handleInputChange}
+        aria-label="upload image"
+        minW="72px"
+      />
+      {value && (
+        <Box position="relative" minW="30px">
+          <IconButton
+            variant="ghost"
+            aria-label="close"
+            maxW="fit-content"
+            onClick={() => onRemove?.(value)}
+            icon={<Close size={11} stroke={colors.error['2']} />}
+            disabled={uploading}
+            position="absolute"
+            bg="neutral.white"
+            p="0.5"
+            borderRadius="full"
+            top="-2"
+            right="-2"
+            zIndex="1"
+          />
+          <AspectRatio maxW="100%" ratio={1}>
+            <Image src={value} objectFit="cover" alt="image" />
+          </AspectRatio>
+        </Box>
+      )}
+    </Flex>
+  )
+}

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

@@ -1,3 +1,4 @@
+export * from './AIGridField'
 export * from './CheckboxAgreement'
 export * from './CheckboxGroupField'
 export * from './CurrencyField'
@@ -13,6 +14,7 @@ export * from './SwitchField'
 export * from './RatingField'
 export * from './SelectField'
 export * from './SingleFields'
+export * from './SingleImage'
 export * from './TextAreaField'
 export * from './TextField'
 export * from './TileBodyFields'

package/src/components/icons/Camera.tsx

@@ -6,10 +6,36 @@ export const Camera = ({ stroke = colors.blue[3], size = 24 }) => {
       xmlns="http://www.w3.org/2000/svg"
       width={size}
       height={size}
-      fill={stroke}
-      viewBox="0 0 256 256"
+      viewBox="0 0 26.734 22.146"
     >
-      <path d="M208,56H180.28L166.65,35.56A8,8,0,0,0,160,32H96a8,8,0,0,0-6.65,3.56L75.71,56H48A24,24,0,0,0,24,80V192a24,24,0,0,0,24,24H208a24,24,0,0,0,24-24V80A24,24,0,0,0,208,56Zm-44,76a36,36,0,1,1-36-36A36,36,0,0,1,164,132Z"></path>
+      <g
+        id="Icon_feather-camera"
+        data-name="Icon feather-camera"
+        transform="translate(-0.75 -3.75)"
+      >
+        <path
+          id="Caminho_17678"
+          data-name="Caminho 17678"
+          d="M26.735,22.852a2.294,2.294,0,0,1-2.294,2.294H3.794A2.294,2.294,0,0,1,1.5,22.852V10.235A2.294,2.294,0,0,1,3.794,7.941H8.382L10.676,4.5h6.882l2.294,3.441H24.44a2.294,2.294,0,0,1,2.294,2.294Z"
+          transform="translate(0 0)"
+          fill="none"
+          stroke={stroke}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+        <path
+          id="Caminho_17679"
+          data-name="Caminho 17679"
+          d="M21.176,18.088A4.588,4.588,0,1,1,16.588,13.5,4.588,4.588,0,0,1,21.176,18.088Z"
+          transform="translate(-2.471 -2.118)"
+          fill="none"
+          stroke={stroke}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+      </g>
     </svg>
   )
 }

package/src/components/inputs/MobileFileUploader.tsx

@@ -6,6 +6,7 @@ import { EditFileUploaderI } from '@/interfaces'
 
 export const MobileFileUploader = ({
   handleInputChange,
+  multiple = true,
   ...props
 }: EditFileUploaderI) => {
   const hiddenFileInput = useRef<HTMLInputElement | null>(null)
@@ -14,7 +15,8 @@ export const MobileFileUploader = ({
       <IconButton
         {...props}
         variant="iconOutlined"
-        h="2.3rem"
+        minH="40px"
+        h="full"
         icon={<Camera />}
         onClick={() => hiddenFileInput?.current?.click()}
       />
@@ -26,6 +28,7 @@ export const MobileFileUploader = ({
         ref={hiddenFileInput}
         placeholder={t('addMedia.placeholder')}
         onChange={handleInputChange}
+        multiple={multiple}
       />
     </>
   )

package/src/hooks/folderPanel/useFilesUploader.ts

@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react'
 import { useDropzone } from 'react-dropzone'
 
 interface FilesUploaderHookI {
-  onUpload: (files: FolderFileI[]) => void
+  onUpload?: (files: FolderFileI[]) => void
   uploading: boolean
   displayImages?: string[]
 }
@@ -55,7 +55,7 @@ export const useFilesUploader = ({
   }, [hasError])
 
   useEffect(() => {
-    onUpload(acceptedFiles)
+    onUpload?.(acceptedFiles)
   }, [acceptedFiles])
 
   useEffect(() => {

package/src/interfaces/forms/dynamicForm/DynamicForm.interface.ts

@@ -1,6 +1,14 @@
-import { FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '@/interfaces'
+import {
+  AIGridFieldI,
+  FolderFileI,
+  MenuItemI,
+  PartnerFooterI,
+  TileCtaI,
+} from '@/interfaces'
 
 export type KindTypes =
+  | 'ai-image'
+  | 'ai-grid'
   | 'checkbox'
   | 'checkbox-agreement'
   | 'checkbox-group'
@@ -125,6 +133,7 @@ export interface DynamicFormI extends Partial<PartnerFooterI> {
   displayImages?: string[]
   form: ReportI[]
   menuItems?: MenuItemI[]
+  onAISend?: AIGridFieldI['onAISend']
   onRemoveImage?: (file: string) => void
   onUpload?: (filesByFieldId: Record<string, FolderFileI[]>) => void
   showTitle?: boolean

package/src/interfaces/forms/dynamicForm/fields/FileField.interface.ts

@@ -2,7 +2,8 @@ import { FolderFileI, ReportI } from '@/interfaces'
 
 export interface FileFieldI extends Pick<ReportI, 'description' | 'icon'> {
   onRemove?: (file: string) => void
-  onUpload: (files: FolderFileI[]) => void
+  onUpload?: (files: FolderFileI[]) => void
   uploading?: boolean
   displayImages?: string[]
+  value?: string
 }

package/src/interfaces/forms/dynamicForm/fields/GridField.interface.ts

@@ -0,0 +1,16 @@
+import { FolderFileI, ReportI } from '@/interfaces'
+
+export interface GridFieldI {
+  children: ReportI['children']
+  onRemove?: (file: string) => void
+  onUpload?: (files: FolderFileI[]) => void
+}
+
+export interface AIGridFieldI extends GridFieldI {
+  onAISend?: (form?: AIFormI) => void
+}
+
+interface AIFormI {
+  code?: string
+  image?: string
+}

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

@@ -2,6 +2,7 @@ export * from './DateField.interface'
 export * from './FieldDescription.interface'
 export * from './FieldWithDelete.interface'
 export * from './FileField.interface'
+export * from './GridField.interface'
 export * from './GroupField.interface'
 export * from './RatingField.interface'
 export * from './SelectField.interface'

package/src/interfaces/inputs/EditFileUploader.interface.ts

@@ -3,4 +3,5 @@ import { IconButtonProps } from '@chakra-ui/react'
 
 export interface EditFileUploaderI extends IconButtonProps {
   handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void
+  multiple?: boolean
 }

package/src/mocks/forms/dynamicForm.mock.ts

@@ -12,6 +12,34 @@ export const formFieldsMock: ReportI[] = [
     type: 'checkbox-agreement',
     visible: true,
   },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'ai form',
+    description: 'Add item details',
+    value: false,
+    type: 'ai-grid',
+    visible: true,
+    children: [
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Model or Serial',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: '',
+        type: 'text',
+        visible: true,
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'uploder',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: faker.image.urlPicsumPhotos(),
+        type: 'ai-image',
+        visible: true,
+      },
+    ],
+  },
   {
     id: faker.database.mongodbObjectId(),
     name: '',
@@ -140,7 +168,7 @@ export const formFieldsMock: ReportI[] = [
             name: 'Purchase Date',
             description: faker.lorem.sentence(),
             comments: faker.lorem.sentence(),
-            value: faker.date.past().toLocaleDateString(),
+            value: '',
             type: 'date',
             visible: true,
           },
@@ -243,7 +271,7 @@ export const formFieldsMock: ReportI[] = [
     name: 'Due Date',
     description: faker.lorem.sentence(),
     comments: faker.lorem.sentence(),
-    value: faker.date.future().toLocaleDateString(),
+    value: '',
     type: 'date',
     visible: true,
     icon: 'date',

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

@@ -21,6 +21,7 @@ export default {
       faker.image.urlPicsumPhotos(),
       faker.image.urlPicsumPhotos(),
     ],
+    onAiSend: action('onAiSend'),
     onUpload: action('onUpload'),
     menuItems: menuMock,
     socialLinks: socialLinksMock,
@@ -31,7 +32,7 @@ export default {
 export const DynamicFormComponent = (args: DynamicFormI) => {
   return (
     <Box p="base" bg="neutral.white" w={['full', '500px']}>
-      <DynamicForm {...args} form={formFieldsMock} />
+      <DynamicForm {...args} form={formFieldsMock} showTitle={false} />
     </Box>
   )
 }