@homefile/components-v2 2.10.0 → 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

@@ -14,11 +14,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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;
@@ -63,7 +63,7 @@ export const DynamicForm = (_a) => {
                                 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));
+                                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/SingleImage.js

@@ -13,5 +13,5 @@ export const SingleImage = ({ onRemove, onUpload, uploading = false, value, }) =
             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" }) })] }))] }));
+    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';

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

@@ -1,3 +1,4 @@
+export * from './AIGridField';
 export * from './CheckboxAgreement';
 export * from './CheckboxGroupField';
 export * from './CurrencyField';

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

@@ -1,4 +1,4 @@
-import { FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '../..';
+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';
@@ -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/GridField.interface.d.ts

@@ -4,3 +4,11 @@ export interface GridFieldI {
     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/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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.10.0",
+  "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,
@@ -143,14 +145,17 @@ export const DynamicForm = ({
               case 'ai-grid':
                 return (
                   <Stack key={id} p="base" spacing="base" bg="lightBlue.2">
-                    <Text fontFamily="secondary">{description}</Text>
-                    <GridField
+                    {description && (
+                      <Text fontFamily="secondary">{description}</Text>
+                    )}
+                    <AIGridField
                       {...baseProps}
                       onRemove={onRemoveImage}
                       onUpload={(files) => handleFilesUpload({ id, files })}
+                      onAISend={onAISend}
                     >
                       {children}
-                    </GridField>
+                    </AIGridField>
                   </Stack>
                 )
               case 'grid':

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/SingleImage.tsx

@@ -21,13 +21,14 @@ export const SingleImage = ({
   }
 
   return (
-    <Flex gap="1" align="center" flex="auto1">
+    <Flex gap="2" align="center" h="input.md">
       <MobileFileUploader
         handleInputChange={handleInputChange}
         aria-label="upload image"
+        minW="72px"
       />
       {value && (
-        <Box position="relative" w="66px">
+        <Box position="relative" minW="30px">
           <IconButton
             variant="ghost"
             aria-label="close"

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

@@ -1,3 +1,4 @@
+export * from './AIGridField'
 export * from './CheckboxAgreement'
 export * from './CheckboxGroupField'
 export * from './CurrencyField'

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

@@ -1,4 +1,10 @@
-import { FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '@/interfaces'
+import {
+  AIGridFieldI,
+  FolderFileI,
+  MenuItemI,
+  PartnerFooterI,
+  TileCtaI,
+} from '@/interfaces'
 
 export type KindTypes =
   | 'ai-image'
@@ -127,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/GridField.interface.ts

@@ -5,3 +5,12 @@ export interface GridFieldI {
   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/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,