@homefile/components-v2 2.11.6 → 2.12.0

package/dist/assets/locales/en/index.json

@@ -187,7 +187,8 @@
   },
   "dynamicForm": {
     "item": "Name this item",
-    "myRating": "My Rating"
+    "myRating": "My Rating",
+    "searching": "Fetching product details, one moment please."
   },
   "feedback": {
     "alt": "Feedback sent",

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, onAISend, 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, searching, showTitle, title, uploadingFieldId, ...props }: DynamicFormI) => import("react/jsx-runtime").JSX.Element;

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

@@ -14,12 +14,15 @@ 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, AIGridField, } from '../..';
+import { HiddenFieldSection, GroupField, TextField, TextAreaField, SelectField, RatingField, GridField, FieldWithDelete, FileField, SwitchField, DateField, NumberField, CurrencyField, TileBody, CheckboxGroupField, CheckboxAgreement, AIGridField, SearchItemLoader, } from '../..';
 import { useDynamicForm } from '../../../hooks';
 import { fieldIcons } from '../../../helpers';
 export const DynamicForm = (_a) => {
-    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"]);
+    var { callback, displayImages, form: fields, menuItems, onAISend, onRemoveImage, onUpload, searching = false, showTitle = true, title, uploadingFieldId } = _a, props = __rest(_a, ["callback", "displayImages", "form", "menuItems", "onAISend", "onRemoveImage", "onUpload", "searching", "showTitle", "title", "uploadingFieldId"]);
     const { form, visibleFields, hiddenFields, handleAddAll, handleAdd, handleFilesUpload, handleRemove, } = useDynamicForm({ fields, onUpload });
+    if (searching) {
+        return _jsx(SearchItemLoader, {});
+    }
     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;
                         const baseProps = {

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

@@ -0,0 +1 @@
+export declare const SearchItemLoader: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Text, Stack } from '@chakra-ui/react';
+import { PuffLoader } from 'react-spinners';
+import { colors } from '../../../theme/colors';
+export const SearchItemLoader = () => {
+    return (_jsxs(Stack, { spacing: "base", align: "center", mt: "50px", children: [_jsx(PuffLoader, { color: colors.blue[1], size: 50 }), _jsx(Box, { w: "40%", children: _jsx(Text, { fontSize: "sm", textAlign: "center", children: t('dynamicForm.searching') }) })] }));
+};

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

@@ -4,3 +4,4 @@ export * from './DynamicForm';
 export * from './SimpleDynamicForm';
 export * from './HiddenField';
 export * from './HiddenFieldSection';
+export * from './SearchItemLoader';

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

@@ -4,3 +4,4 @@ export * from './DynamicForm';
 export * from './SimpleDynamicForm';
 export * from './HiddenField';
 export * from './HiddenFieldSection';
+export * from './SearchItemLoader';

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

@@ -28,6 +28,7 @@ export interface DynamicFormI extends Partial<PartnerFooterI> {
     onAISend?: AIGridFieldI['onAISend'];
     onRemoveImage?: (file: string) => void;
     onUpload?: (filesByFieldId: Record<string, FolderFileI[]>) => void;
+    searching?: boolean;
     showTitle?: boolean;
     title?: string;
     uploadingFieldId?: string;

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

@@ -28,7 +28,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, showTitle: false })) }));
+    return (_jsx(Box, { p: "base", bg: "neutral.white", w: ['full', '500px'], minH: "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.11.6",
+  "version": "2.12.0",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/assets/locales/en/index.json

@@ -187,7 +187,8 @@
   },
   "dynamicForm": {
     "item": "Name this item",
-    "myRating": "My Rating"
+    "myRating": "My Rating",
+    "searching": "Fetching product details, one moment please."
   },
   "feedback": {
     "alt": "Feedback sent",

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

@@ -20,6 +20,7 @@ import {
   CheckboxGroupField,
   CheckboxAgreement,
   AIGridField,
+  SearchItemLoader,
 } from '@/components'
 import { useDynamicForm } from '@/hooks'
 import { fieldIcons } from '@/helpers'
@@ -32,6 +33,7 @@ export const DynamicForm = ({
   onAISend,
   onRemoveImage,
   onUpload,
+  searching = false,
   showTitle = true,
   title,
   uploadingFieldId,
@@ -47,6 +49,10 @@ export const DynamicForm = ({
     handleRemove,
   } = useDynamicForm({ fields, onUpload })
 
+  if (searching) {
+    return <SearchItemLoader />
+  }
+
   return (
     <Stack bg="lightBlue.1" spacing="0" h="full" overflowX="hidden">
       {showTitle && (

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

@@ -0,0 +1,17 @@
+import { t } from 'i18next'
+import { Box, Text, Stack } from '@chakra-ui/react'
+import { PuffLoader } from 'react-spinners'
+import { colors } from '@/theme/colors'
+
+export const SearchItemLoader = () => {
+  return (
+    <Stack spacing="base" align="center" mt="50px">
+      <PuffLoader color={colors.blue[1]} size={50} />
+      <Box w="40%">
+        <Text fontSize="sm" textAlign="center">
+          {t('dynamicForm.searching')}
+        </Text>
+      </Box>
+    </Stack>
+  )
+}

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

@@ -4,3 +4,4 @@ export * from './DynamicForm'
 export * from './SimpleDynamicForm'
 export * from './HiddenField'
 export * from './HiddenFieldSection'
+export * from './SearchItemLoader'

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

@@ -136,6 +136,7 @@ export interface DynamicFormI extends Partial<PartnerFooterI> {
   onAISend?: AIGridFieldI['onAISend']
   onRemoveImage?: (file: string) => void
   onUpload?: (filesByFieldId: Record<string, FolderFileI[]>) => void
+  searching?: boolean
   showTitle?: boolean
   title?: string
   uploadingFieldId?: string

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

@@ -32,7 +32,7 @@ export default {
 
 export const DynamicFormComponent = (args: DynamicFormI) => {
   return (
-    <Box p="base" bg="neutral.white" w={['full', '500px']}>
+    <Box p="base" bg="neutral.white" w={['full', '500px']} minH="500px">
       <DynamicForm {...args} form={formFieldsMock} showTitle={false} />
     </Box>
   )