@homefile/components-v2 2.11.5 → 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/folderPanel/displayFiles/GridFile.js

@@ -16,7 +16,7 @@ import { DocIcon } from '../../../assets/images';
 import { fileTypes, getFileExtension } from '../../../helpers';
 export const GridFile = (_a) => {
     var { menu = [], onClick, onMove } = _a, props = __rest(_a, ["menu", "onClick", "onMove"]);
-    const { _id, title, updatedAt, files = [], receipt } = props;
+    const { _id, title, updatedAt, files = [], receipt, report } = props;
     const fileExtension = getFileExtension(files, !!receipt);
     const itemForm = {
         _id,
@@ -24,5 +24,5 @@ export const GridFile = (_a) => {
         updatedAt,
         icon: fileTypes[fileExtension] || DocIcon,
     };
-    return (_jsxs(WrapItem, { maxW: "7rem", position: "relative", children: [_jsx(Box, { position: "absolute", top: "0", right: "1", zIndex: "docked", children: _jsx(IconMenuWithMove, { disabled: menu.length < 1 ? true : false, icon: _jsx(MoreHorizontal, { size: 28 }), itemForm: itemForm, menuItems: menu, onMove: () => onMove(itemForm) }) }), _jsx(Button, { variant: "folder", px: "base", pb: "base", pt: "6", onClick: () => onClick(props), children: _jsxs(Stack, { spacing: "1", align: "center", children: [_jsx(Image, { src: fileTypes[fileExtension] || DocIcon, w: "46px", h: "49px", alt: fileExtension, transition: "all 0.2s ease-in-out" }), _jsxs(Box, { children: [_jsx(Text, { isTruncated: true, maxWidth: "5rem", fontSize: "sm", children: title }), _jsx(Text, { variant: "date", children: updatedAt })] })] }) })] }));
+    return (_jsxs(WrapItem, { maxW: "7rem", position: "relative", children: [_jsx(Box, { position: "absolute", top: "0", right: "1", zIndex: "docked", children: _jsx(IconMenuWithMove, { disabled: menu.length < 1 ? true : false, icon: _jsx(MoreHorizontal, { size: 28 }), itemForm: itemForm, menuItems: menu, onMove: () => onMove(itemForm) }) }), _jsx(Button, { variant: "folder", px: "base", pb: "base", pt: "6", onClick: () => onClick(props), children: _jsxs(Stack, { spacing: "1", align: "center", children: [_jsx(Image, { src: (report && report.length > 0) ? DocIcon : fileTypes[fileExtension] || DocIcon, w: "46px", h: "49px", alt: fileExtension, transition: "all 0.2s ease-in-out" }), _jsxs(Box, { children: [_jsx(Text, { isTruncated: true, maxWidth: "5rem", fontSize: "sm", children: title }), _jsx(Text, { variant: "date", children: updatedAt })] })] }) })] }));
 };

package/dist/components/folderPanel/displayFiles/ListFile.js

@@ -16,7 +16,7 @@ import { DocIcon } from '../../../assets/images';
 import { fileTypes, getFileExtension } from '../../../helpers';
 export const ListFile = (_a) => {
     var { menu = [], onClick, onMove } = _a, props = __rest(_a, ["menu", "onClick", "onMove"]);
-    const { _id, title, updatedAt, files = [], receipt } = props;
+    const { _id, title, updatedAt, files = [], receipt, report } = props;
     const fileExtension = getFileExtension(files, !!receipt);
     const itemForm = {
         _id,
@@ -24,5 +24,5 @@ export const ListFile = (_a) => {
         updatedAt,
         icon: fileTypes[fileExtension] || DocIcon,
     };
-    return (_jsx(Box, { bg: "neutral.white", w: "100%", transition: "all 0.2s ease-in-out", _hover: { bg: 'lightGreen.1' }, children: _jsxs(Flex, { children: [_jsxs(Flex, { gap: "base", p: "base", as: "button", flex: "1", onClick: () => onClick(props), children: [_jsx(Image, { src: fileTypes[fileExtension] || DocIcon, minW: "32px", h: "auto", alt: fileExtension, transition: "all 0.2s ease-in-out" }), _jsxs(Box, { mt: "-1", children: [_jsx(Text, { variant: "date", textTransform: "uppercase", textAlign: "left", children: fileExtension === '' ? 'Doc' : fileExtension }), _jsx(Text, { textOverflow: "ellipsis", noOfLines: 1, fontSize: "sm", textAlign: "left", children: title })] })] }), _jsxs(Flex, { align: "center", gap: "2", h: "fit-content", p: "1", pr: "base", children: [_jsx(Text, { variant: "date", w: "fit-content", children: updatedAt }), _jsx(IconMenuWithMove, { disabled: menu.length < 1 ? true : false, icon: _jsx(MoreHorizontal, { size: 28 }), itemForm: itemForm, menuItems: menu, onMove: () => onMove(itemForm) })] })] }) }));
+    return (_jsx(Box, { bg: "neutral.white", w: "100%", transition: "all 0.2s ease-in-out", _hover: { bg: 'lightGreen.1' }, children: _jsxs(Flex, { children: [_jsxs(Flex, { gap: "base", p: "base", as: "button", flex: "1", onClick: () => onClick(props), children: [_jsx(Image, { src: (report && report.length > 0) ? DocIcon : fileTypes[fileExtension] || DocIcon, minW: "32px", h: "auto", alt: fileExtension, transition: "all 0.2s ease-in-out" }), _jsxs(Box, { mt: "-1", children: [_jsx(Text, { variant: "date", textTransform: "uppercase", textAlign: "left", children: fileExtension === '' ? 'Doc' : fileExtension }), _jsx(Text, { textOverflow: "ellipsis", noOfLines: 1, fontSize: "sm", textAlign: "left", children: title })] })] }), _jsxs(Flex, { align: "center", gap: "2", h: "fit-content", p: "1", pr: "base", children: [_jsx(Text, { variant: "date", w: "fit-content", children: updatedAt }), _jsx(IconMenuWithMove, { disabled: menu.length < 1 ? true : false, icon: _jsx(MoreHorizontal, { size: 28 }), itemForm: itemForm, menuItems: menu, onMove: () => onMove(itemForm) })] })] }) }));
 };

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/mocks/folderPanel/DisplayFiles.mock.js

@@ -23,6 +23,16 @@ export const DisplayFilesMock = [
         ],
         updatedAt: '2021-08-01T00:00:00.000Z',
         receipt: 'receipt',
+        // report: [
+        //     {
+        //       "name": "Brand/Manufacturer",
+        //       "description": "",
+        //       "comments": "",
+        //       "value": "",
+        //       "type": "text",
+        //       "id": "10"
+        //   }
+        // ]
     },
     // {
     //   _id: '2',

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.5",
+  "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/folderPanel/displayFiles/GridFile.tsx

@@ -10,7 +10,7 @@ export const GridFile = ({
   onMove,
   ...props
 }: DisplayFileI) => {
-  const { _id, title, updatedAt, files = [], receipt } = props
+  const { _id, title, updatedAt, files = [], receipt, report } = props
 
   const fileExtension = getFileExtension(files, !!receipt)
 
@@ -41,7 +41,7 @@ export const GridFile = ({
       >
         <Stack spacing="1" align="center">
           <Image
-            src={fileTypes[fileExtension] || DocIcon}
+            src={(report && report.length > 0) ? DocIcon : fileTypes[fileExtension] || DocIcon}
             w="46px"
             h="49px"
             alt={fileExtension}

package/src/components/folderPanel/displayFiles/ListFile.tsx

@@ -10,7 +10,7 @@ export const ListFile = ({
   onMove,
   ...props
 }: DisplayFileI) => {
-  const { _id, title, updatedAt, files = [], receipt } = props
+  const { _id, title, updatedAt, files = [], receipt, report } = props
 
   const fileExtension = getFileExtension(files, !!receipt)
 
@@ -37,7 +37,7 @@ export const ListFile = ({
           onClick={() => onClick(props)}
         >
           <Image
-            src={fileTypes[fileExtension] || DocIcon}
+            src={(report && report.length > 0) ? DocIcon : fileTypes[fileExtension] || DocIcon}
             minW="32px"
             h="auto"
             alt={fileExtension}

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/mocks/folderPanel/DisplayFiles.mock.ts

@@ -25,6 +25,16 @@ export const DisplayFilesMock: FileInfoI[] = [
     ],
     updatedAt: '2021-08-01T00:00:00.000Z',
     receipt: 'receipt',
+    // report: [
+    //     {
+    //       "name": "Brand/Manufacturer",
+    //       "description": "",
+    //       "comments": "",
+    //       "value": "",
+    //       "type": "text",
+    //       "id": "10"
+    //   }
+    // ]
   },
   // {
   //   _id: '2',

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>
   )