@homefile/components-v2 2.8.36 → 2.8.38

package/dist/components/forms/readOnly/fields/ReadOnlyGrid.js

@@ -17,7 +17,6 @@ export const ReadOnlyGrid = (_a) => {
     var { children, onClick } = _a, props = __rest(_a, ["children", "onClick"]);
     return (_jsx(Flex, Object.assign({ align: "stretch", gap: "base", borderBottom: "1px dashed", borderColor: "lightBlue.6", p: "base" }, props, { children: children === null || children === void 0 ? void 0 : children.map(({ children, id, name, value, type, icon }) => {
             const baseProps = {
-                key: `${id}-${name}-${value}-${type}`,
                 id,
                 value,
                 icon: icon && fieldIcons[icon],
@@ -31,9 +30,9 @@ export const ReadOnlyGrid = (_a) => {
                 case 'select':
                 case 'string':
                 case 'currency':
-                    return (_jsx(ReadOnlyInput, Object.assign({}, baseProps, { border: "none", flex: "auto", p: "0" })));
+                    return (_jsx(ReadOnlyInput, Object.assign({}, baseProps, { border: "none", flex: "auto", p: "0" }), `${id}-${name}-${value}-${type}`));
                 case 'date':
-                    return _jsx(ReadOnlyDate, Object.assign({}, baseProps, { name: name, p: "0" }));
+                    return _jsx(ReadOnlyDate, Object.assign({}, baseProps, { name: name, p: "0" }), `${id}-${name}-${value}-${type}`);
                 case 'guidelines':
                     return (_jsx(ReadOnlyGuidelines, { name: name, children: children, onClick: onClick }, id));
                 case 'item-related':

package/dist/components/forms/readOnly/fields/ReadOnlyGroup.js

@@ -5,7 +5,6 @@ import { fieldIcons } from '../../../../helpers';
 export const ReadOnlyGroup = ({ children }) => {
     return (_jsx(Stack, { align: "stretch", spacing: "base", p: "base", borderBottom: "1px dashed", borderColor: "lightBlue.6", children: children === null || children === void 0 ? void 0 : children.map(({ children, id, name, value, type, icon }) => {
             const baseProps = {
-                key: `${id}-${name}-${value}-${type}`,
                 id,
                 value,
                 icon: icon && fieldIcons[icon],
@@ -19,7 +18,7 @@ export const ReadOnlyGroup = ({ children }) => {
                 case 'select':
                 case 'string':
                 case 'currency':
-                    return (_jsx(ReadOnlyInput, Object.assign({}, baseProps, { border: "none", flex: "auto", p: "0" })));
+                    return (_jsx(ReadOnlyInput, Object.assign({}, baseProps, { border: "none", flex: "auto", p: "0" }), `${id}-${name}-${value}-${type}`));
                 case 'date':
                     return _jsx(ReadOnlyDate, Object.assign({}, baseProps, { name: name }));
                 case 'grid':

package/dist/components/homeAssistant/panel/HomeAssistantPanel.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
 import { HomeAssistantPanelI } from '../../../interfaces';
-export declare const HomeAssistantPanel: ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted }: PropsWithChildren<HomeAssistantPanelI>) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeAssistantPanel: ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading }: PropsWithChildren<HomeAssistantPanelI>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/panel/HomeAssistantPanel.js

@@ -4,10 +4,10 @@ import { FormProvider } from 'react-hook-form';
 import { t } from 'i18next';
 import { DrawerHeader, DrawerBody, Stack, Text, DrawerFooter, } from '@chakra-ui/react';
 import { IA } from '../../../assets/images';
-import { ApplianceSteps, SimpleDynamicForm, FooterButtons, HomeAssistantPanelStep, PanelHeader, } from '../..';
+import { ApplianceSteps, SimpleDynamicForm, FooterButtons, HomeAssistantPanelStep, PanelHeader, Loading } from '../..';
 import { homeAssistantSteps } from '../../../helpers';
 import { useSimpleDynamicForm } from '../../../hooks';
-export const HomeAssistantPanel = ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted }) => {
+export const HomeAssistantPanel = ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading }) => {
     const [addedAppliances, updateAddedAppliances] = useState([]);
     const { title } = homeAssistantSteps[currentStep - 1];
     const text = `${t('homeAssistant.details')} ${title.toLowerCase()}:`;
@@ -26,6 +26,8 @@ export const HomeAssistantPanel = ({ children, currentForm, currentStep, onAppli
     const { form, updatedFields } = useSimpleDynamicForm({
         fields: currentForm,
     });
+    if (isLoading)
+        return _jsx(Loading, {});
     return (_jsxs(_Fragment, { children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, title: t('homeAssistant.title'), icon: IA }) }), _jsxs(DrawerBody, { p: "0", children: [_jsx(HomeAssistantPanelStep, { currentStep: currentStep }), children, isAppliances && (_jsx(ApplianceSteps, { onClick: onApplianceClick, addedAppliances: addedAppliances })), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: text }), _jsx(FormProvider, Object.assign({}, form, { children: _jsx(SimpleDynamicForm, { fields: currentForm }) }))] })] }), _jsx(DrawerFooter, { px: "0", py: "6", bg: "neutral.white", children: _jsx(FooterButtons, { button1: {
                         buttonStyle: 'secondaryFooter',
                         label: t('buttons.back'),

package/dist/components/homeBoard/HomeBoard.js

@@ -48,7 +48,7 @@ export const HomeBoard = () => {
             ], onShareContacts: () => null, onDeleteContacts: () => null })),
         PartnerCatalog: (_jsx(PartnerCatalogPanel, { onClose: onRightClose, onPartnerAdd: () => null, partners: partnerCatalogMock })),
         AddHouseholdItem: (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: handleClose, icon: Painting, title: "Add Household Item" }) }), _jsx(DrawerBody, { children: _jsx(DynamicForm, { form: formFieldsMock }) })] })),
-        HomeAssistant: (_jsx(HomeAssistantPanel, { currentStep: homeAssistantCurrentStep, currentForm: currentHomeAssistantForm, onNext: handleHomeAssistantFormChange, onBack: handleHomeAssistantBack, onApplianceClick: () => null, onClose: onRightClose, onSave: () => { }, backDisabled: false, nextDisabled: false, hasCompleted: true })),
+        HomeAssistant: (_jsx(HomeAssistantPanel, { currentStep: homeAssistantCurrentStep, currentForm: currentHomeAssistantForm, onNext: handleHomeAssistantFormChange, onBack: handleHomeAssistantBack, onApplianceClick: () => null, onClose: onRightClose, onSave: () => { }, backDisabled: false, nextDisabled: false, hasCompleted: true, isLoading: false })),
         Notifications: (_jsx(NotificationsPanel, { notifications: notificationsMock, onClose: onRightClose, onDismiss: () => null })),
     };
     const panelSize = currentComponent === 'PartnerCatalog' ? 'lg' : 'md';

package/dist/interfaces/homeAssistant/HomeAssistantPanel.interface.d.ts

@@ -10,4 +10,5 @@ export interface HomeAssistantPanelI {
     backDisabled: boolean;
     nextDisabled: boolean;
     hasCompleted: boolean;
+    isLoading: boolean;
 }

package/dist/stories/homeAssistant/panel/HomeAssistantPanel.stories.js

@@ -37,5 +37,5 @@ export const HomeAssistantPanelComponent = (args) => {
         return prev - 1;
     });
     const currentForm = forms[currentStep];
-    return (_jsx(DrawerContent, { bg: "lightBlue.1", children: _jsx(HomeAssistantPanel, Object.assign({}, args, { currentStep: currentStep, currentForm: currentForm, onNext: handleFormChange, onBack: handleBack, onSave: action('onSave') })) }));
+    return (_jsx(DrawerContent, { bg: "lightBlue.1", children: _jsx(HomeAssistantPanel, Object.assign({}, args, { currentStep: currentStep, currentForm: currentForm, onNext: handleFormChange, onBack: handleBack, onSave: action('onSave'), isLoading: false })) }));
 };

package/package.json

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

package/src/components/contacts/sharePanel/ShareContactsContent.tsx

@@ -1,6 +1,5 @@
 import { t } from 'i18next'
 import {
-  DrawerContent,
   DrawerHeader,
   DrawerBody,
   Stack,

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

@@ -2,7 +2,6 @@ import { PropsWithChildren, ReactNode, useMemo } from 'react'
 import {
   DrawerBody,
   DrawerHeader,
-  DrawerContent,
   DrawerFooter,
   Box,
 } from '@chakra-ui/react'

package/src/components/forms/readOnly/fields/ReadOnlyGrid.tsx

@@ -24,7 +24,6 @@ export const ReadOnlyGrid = ({
     >
       {children?.map(({ children, id, name, value, type, icon }) => {
         const baseProps = {
-          key: `${id}-${name}-${value}-${type}`,
           id,
           value,
           icon: icon && (fieldIcons[icon] as IconTypes),
@@ -39,10 +38,10 @@ export const ReadOnlyGrid = ({
           case 'string':
           case 'currency':
             return (
-              <ReadOnlyInput {...baseProps} border="none" flex="auto" p="0" />
+              <ReadOnlyInput key={`${id}-${name}-${value}-${type}`} {...baseProps} border="none" flex="auto" p="0" />
             )
           case 'date':
-            return <ReadOnlyDate {...baseProps} name={name} p="0" />
+            return <ReadOnlyDate key={`${id}-${name}-${value}-${type}`} {...baseProps} name={name} p="0" />
 
           case 'guidelines':
             return (

package/src/components/forms/readOnly/fields/ReadOnlyGroup.tsx

@@ -3,7 +3,7 @@ import { IconTypes, ReportI } from '@/interfaces'
 import { ReadOnlyDate, ReadOnlyGrid, ReadOnlyInput } from '@/components'
 import { fieldIcons } from '@/helpers'
 
-export const ReadOnlyGroup = ({ children }: Pick<ReportI, 'children'>) => {
+export const ReadOnlyGroup = ({ children}: Pick<ReportI, 'children'>) => {
   return (
     <Stack
       align="stretch"
@@ -14,7 +14,6 @@ export const ReadOnlyGroup = ({ children }: Pick<ReportI, 'children'>) => {
     >
       {children?.map(({ children, id, name, value, type, icon }) => {
         const baseProps = {
-          key: `${id}-${name}-${value}-${type}`,
           id,
           value,
           icon: icon && (fieldIcons[icon] as IconTypes),
@@ -29,7 +28,7 @@ export const ReadOnlyGroup = ({ children }: Pick<ReportI, 'children'>) => {
           case 'string':
           case 'currency':
             return (
-              <ReadOnlyInput {...baseProps} border="none" flex="auto" p="0" />
+              <ReadOnlyInput key={`${id}-${name}-${value}-${type}`} {...baseProps} border="none" flex="auto" p="0" />
             )
           case 'date':
             return <ReadOnlyDate {...baseProps} name={name} />

package/src/components/homeAssistant/panel/HomeAssistantPanel.tsx

@@ -2,7 +2,6 @@ import { PropsWithChildren, useState, useEffect } from 'react'
 import { FormProvider } from 'react-hook-form'
 import { t } from 'i18next'
 import {
-  DrawerContent,
   DrawerHeader,
   DrawerBody,
   Stack,
@@ -16,6 +15,7 @@ import {
   FooterButtons,
   HomeAssistantPanelStep,
   PanelHeader,
+  Loading
 } from '@/components'
 import { AppliancesType, HomeAssistantPanelI } from '@/interfaces'
 import { homeAssistantSteps } from '@/helpers'
@@ -32,7 +32,8 @@ export const HomeAssistantPanel = ({
   onSave,
   backDisabled,
   nextDisabled,
-  hasCompleted
+  hasCompleted,
+  isLoading
 }: PropsWithChildren<HomeAssistantPanelI>) => {
   const [addedAppliances, updateAddedAppliances] = useState<AppliancesType[]>([])
   const { title } = homeAssistantSteps[currentStep - 1]
@@ -54,6 +55,8 @@ export const HomeAssistantPanel = ({
     fields: currentForm,
   })
 
+  if (isLoading) return <Loading />
+
   return (
     <>
       <DrawerHeader p="0">

package/src/components/homeBoard/HomeBoard.tsx

@@ -279,6 +279,7 @@ export const HomeBoard = () => {
         backDisabled={false}
         nextDisabled={false}
         hasCompleted={true}
+        isLoading={false}
       />
     ),
     Notifications: (

package/src/interfaces/homeAssistant/HomeAssistantPanel.interface.ts

@@ -11,4 +11,5 @@ export interface HomeAssistantPanelI {
   backDisabled: boolean
   nextDisabled: boolean
   hasCompleted: boolean
+  isLoading: boolean
 }

package/src/stories/homeAssistant/panel/HomeAssistantPanel.stories.tsx

@@ -62,6 +62,7 @@ export const HomeAssistantPanelComponent = (args: HomeAssistantPanelI) => {
         onNext={handleFormChange}
         onBack={handleBack}
         onSave={action('onSave')}
+        isLoading={false}
       />
     </DrawerContent>
   )