@homefile/components-v2 2.9.3 → 2.10.0

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

@@ -10,7 +10,7 @@ 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';
@@ -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: [_jsx(Text, { fontFamily: "secondary", children: description }), _jsx(GridField, Object.assign({}, baseProps, { onRemove: onRemoveImage, onUpload: (files) => handleFilesUpload({ id, files }), 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/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: "1", align: "center", flex: "auto1", children: [_jsx(MobileFileUploader, { handleInputChange: handleInputChange, "aria-label": "upload image" }), value && (_jsxs(Box, { position: "relative", w: "66px", 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

@@ -13,6 +13,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

@@ -13,6 +13,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;
+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;

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,6 @@
+import { FolderFileI, ReportI } from '../../..';
+export interface GridFieldI {
+    children: ReportI['children'];
+    onRemove?: (file: string) => void;
+    onUpload?: (files: FolderFileI[]) => void;
+}

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/interfaces/myProfile/details/TwoFactorDialog.interface.d.ts

@@ -4,5 +4,5 @@ export interface TwoFactorDialogI {
     onClose: () => void;
     onResend?: () => void;
     onReset: (code: string) => void;
-    twoFactorMethod: 'sms' | 'email';
+    twoFactorMethod: 'sms' | 'email' | "";
 }

package/dist/interfaces/pages/TwoFactor.interface.d.ts

@@ -3,5 +3,5 @@ export interface TwoFactorI {
     onReset: (code: string) => void;
     isDialog?: boolean;
     isLoading: boolean;
-    twoFactorMethod: 'sms' | 'email';
+    twoFactorMethod: 'sms' | 'email' | "";
 }

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

@@ -26,7 +26,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.3",
+  "version": "2.10.0",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

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

@@ -77,7 +77,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 +140,19 @@ export const DynamicForm = ({
                     <RatingField {...baseProps} />
                   </FieldWithDelete>
                 )
+              case 'ai-grid':
+                return (
+                  <Stack key={id} p="base" spacing="base" bg="lightBlue.2">
+                    <Text fontFamily="secondary">{description}</Text>
+                    <GridField
+                      {...baseProps}
+                      onRemove={onRemoveImage}
+                      onUpload={(files) => handleFilesUpload({ id, files })}
+                    >
+                      {children}
+                    </GridField>
+                  </Stack>
+                )
               case 'grid':
                 return (
                   <FieldWithDelete {...fieldWithDeleteBaseProps} key={id}>

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,53 @@
+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="1" align="center" flex="auto1">
+      <MobileFileUploader
+        handleInputChange={handleInputChange}
+        aria-label="upload image"
+      />
+      {value && (
+        <Box position="relative" w="66px">
+          <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

@@ -13,6 +13,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,8 @@
 import { FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '@/interfaces'
 
 export type KindTypes =
+  | 'ai-image'
+  | 'ai-grid'
   | 'checkbox'
   | 'checkbox-agreement'
   | 'checkbox-group'

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,7 @@
+import { FolderFileI, ReportI } from '@/interfaces'
+
+export interface GridFieldI {
+  children: ReportI['children']
+  onRemove?: (file: string) => void
+  onUpload?: (files: FolderFileI[]) => void
+}

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/interfaces/myProfile/details/TwoFactorDialog.interface.ts

@@ -4,5 +4,5 @@ export interface TwoFactorDialogI {
   onClose: () => void
   onResend?: () => void
   onReset: (code: string) => void
-  twoFactorMethod: 'sms' | 'email'
+  twoFactorMethod: 'sms' | 'email' | ""
 }

package/src/interfaces/pages/TwoFactor.interface.ts

@@ -3,5 +3,5 @@ export interface TwoFactorI {
   onReset: (code: string) => void
   isDialog?: boolean
   isLoading: boolean
-  twoFactorMethod: 'sms' | 'email'
+  twoFactorMethod: 'sms' | 'email' | ""
 }

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

@@ -31,7 +31,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>
   )
 }