@homefile/components-v2 2.8.35 → 2.8.37

package/dist/components/contacts/sharePanel/ShareContactsContent.js

@@ -9,9 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { DrawerContent, DrawerHeader, DrawerBody, Stack, DrawerFooter, } from '@chakra-ui/react';
+import { DrawerHeader, DrawerBody, Stack, DrawerFooter, } from '@chakra-ui/react';
 import { Contacts } from '../../../assets/images';
 import { FooterButtons, FooterDrawer, PanelHeader, SelectedContacts, ShareContactSection, } from '../..';
 import { useShareContactsContent } from '../../../hooks';
@@ -19,7 +19,7 @@ export const ShareContactsContent = (_a) => {
     var { contacts, onClose, onShare } = _a, props = __rest(_a, ["contacts", "onClose", "onShare"]);
     const { contactsSelected, recipientsToSend, handleAddRecipient, handleDeleteSelectedContact, handleShareContacts, } = useShareContactsContent({ contacts, onShare });
     const numberOfContacts = Number(contacts.length);
-    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, icon: Contacts, title: `${t('contacts.shareContact')} (${numberOfContacts})` }) }), _jsx(DrawerBody, { p: "0", overflowX: "hidden", overflowY: "scroll", bg: "lightBlue.2", children: _jsxs(Stack, { pb: "120px", spacing: "0", children: [_jsx(SelectedContacts, { contacts: contactsSelected, onDeleteSelected: handleDeleteSelectedContact }), _jsx(ShareContactSection, Object.assign({}, props, { onShare: handleAddRecipient }))] }) }), _jsx(DrawerFooter, { p: "0", children: _jsx(FooterDrawer, { isOpen: true, children: _jsx(FooterButtons, { button1: {
+    return (_jsxs(_Fragment, { children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, icon: Contacts, title: `${t('contacts.shareContact')} (${numberOfContacts})` }) }), _jsx(DrawerBody, { p: "0", overflowX: "hidden", overflowY: "scroll", bg: "lightBlue.2", children: _jsxs(Stack, { pb: "120px", spacing: "0", children: [_jsx(SelectedContacts, { contacts: contactsSelected, onDeleteSelected: handleDeleteSelectedContact }), _jsx(ShareContactSection, Object.assign({}, props, { onShare: handleAddRecipient }))] }) }), _jsx(DrawerFooter, { p: "0", children: _jsx(FooterDrawer, { isOpen: true, children: _jsx(FooterButtons, { button1: {
                             buttonStyle: 'primaryFooter',
                             label: t('buttons.send'),
                             isDisabled: Number(recipientsToSend.length) === 0,

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { DrawerBody, DrawerHeader, DrawerContent, DrawerFooter, Box, } from '@chakra-ui/react';
+import { DrawerBody, DrawerHeader, DrawerFooter, Box, } from '@chakra-ui/react';
 import { PanelHeader, FooterDrawer, ItemFormFooter, Overlay, Loading } from '../../..';
 export const ItemFormPanel = ({ children, onClose, onSubmitForm, panelIcon, panelTitle, showOverlay = false, }) => {
     const { firstChild, otherChildren } = useMemo(() => {
@@ -15,5 +15,5 @@ export const ItemFormPanel = ({ children, onClose, onSubmitForm, panelIcon, pane
         }
         return { firstChild, otherChildren };
     }, [children]);
-    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, icon: panelIcon, title: panelTitle }) }), _jsx(DrawerBody, { p: "0", overflowX: "hidden", bg: "lightBlue.1", children: firstChild ? (_jsxs(_Fragment, { children: [firstChild, _jsxs(Box, { position: "relative", mb: "200px", children: [_jsx(Overlay, { showOverlay: showOverlay, position: "absolute", w: "inherit", h: "inherit", zIndex: "9" }), otherChildren] })] })) : (_jsx(Loading, {})) }), _jsx(FooterDrawer, { isOpen: !showOverlay, children: _jsx(DrawerFooter, { w: "100%", py: "0", children: _jsx(ItemFormFooter, { onSave: onSubmitForm, onCancel: onClose }) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, icon: panelIcon, title: panelTitle }) }), _jsx(DrawerBody, { p: "0", overflowX: "hidden", bg: "lightBlue.1", children: firstChild ? (_jsxs(_Fragment, { children: [firstChild, _jsxs(Box, { position: "relative", mb: "200px", children: [_jsx(Overlay, { showOverlay: showOverlay, position: "absolute", w: "inherit", h: "inherit", zIndex: "9" }), otherChildren] })] })) : (_jsx(Loading, {})) }), _jsx(FooterDrawer, { isOpen: !showOverlay, children: _jsx(DrawerFooter, { w: "100%", py: "0", children: _jsx(ItemFormFooter, { onSave: onSubmitForm, onCancel: onClose }) }) })] }));
 };

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

@@ -1,13 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import { FormProvider } from 'react-hook-form';
 import { t } from 'i18next';
-import { DrawerContent, DrawerHeader, DrawerBody, Stack, Text, DrawerFooter, } from '@chakra-ui/react';
+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,7 +26,9 @@ export const HomeAssistantPanel = ({ children, currentForm, currentStep, onAppli
     const { form, updatedFields } = useSimpleDynamicForm({
         fields: currentForm,
     });
-    return (_jsxs(DrawerContent, { bg: "lightBlue.1", 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: {
+    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'),
                         onClick: onBack,

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/contacts/ContactsContent.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DrawerContent } from '@chakra-ui/react';
 import { ContactsContent, RightPanel, ShareContactsContent } from '../../components';
 import { ContactsMock, ContactsMockCompleted, menuMock } from '../../mocks';
 import { Fragment, useState } from 'react';
@@ -44,5 +45,5 @@ export const ContactsContentComponent = (args) => {
     const handleOnRemoveContact = (email) => {
         setEmailsToShare(emailsToShare.filter((e) => e !== email));
     };
-    return (_jsxs(Fragment, { children: [_jsx(RightPanel, { isOpen: true, onClose: () => null, children: _jsx(ContactsContent, Object.assign({}, args, { onShareContacts: handleSetContacts })) }), _jsx(RightPanel, { isOpen: sharePanel.openSharePanel, onClose: handleToggleSharePanel, children: _jsx(ShareContactsContent, { contacts: sharePanel.contacts, homefileContacts: ContactsMockCompleted, onClose: handleToggleSharePanel, onShare: action('onShare'), isLoading: loading, shareWithList: emailsToShare, onContactSearch: handleSearch, onDropdownSelect: handleShareWithList, onRemoveContact: handleOnRemoveContact }) })] }));
+    return (_jsxs(Fragment, { children: [_jsx(RightPanel, { isOpen: true, onClose: () => null, children: _jsx(ContactsContent, Object.assign({}, args, { onShareContacts: handleSetContacts })) }), _jsx(RightPanel, { isOpen: sharePanel.openSharePanel, onClose: handleToggleSharePanel, children: _jsx(DrawerContent, { bg: "lightBlue.1", children: _jsx(ShareContactsContent, { contacts: sharePanel.contacts, homefileContacts: ContactsMockCompleted, onClose: handleToggleSharePanel, onShare: action('onShare'), isLoading: loading, shareWithList: emailsToShare, onContactSearch: handleSearch, onDropdownSelect: handleShareWithList, onRemoveContact: handleOnRemoveContact }) }) })] }));
 };

package/dist/stories/forms/ItemFormPanel/ItemFormPanel.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DrawerContent } from '@chakra-ui/react';
 import { ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemSubTypeSelect, RightPanel, } from '../../../components';
 import { Paint } from '../../../assets/images/groups';
 import { action } from '@storybook/addon-actions';
@@ -16,13 +17,13 @@ export default {
     },
 };
 export const ItemFormPanelComponent = (args) => {
-    return (_jsx(RightPanel, { isOpen: true, onClose: () => null, children: _jsxs(ItemFormPanel, Object.assign({}, args, { children: [_jsx(ItemNameHeader, { id: "item-name-header", onSave: action('onSaveItemName') }), _jsx(ItemSubTypeSelect, { initialSubType: {
-                        _id: '1',
-                        name: 'Sub Type',
-                    }, onSelectSubType: action('onSelectSubType'), label: "Category", subTypes: [
-                        {
+    return (_jsx(RightPanel, { isOpen: true, onClose: () => null, children: _jsx(DrawerContent, { bg: "lightBlue.1", children: _jsxs(ItemFormPanel, Object.assign({}, args, { children: [_jsx(ItemNameHeader, { id: "item-name-header", onSave: action('onSaveItemName') }), _jsx(ItemSubTypeSelect, { initialSubType: {
                             _id: '1',
                             name: 'Sub Type',
-                        },
-                    ] }), _jsx(ItemFormTabs, { form: contactFieldsMock })] })) }));
+                        }, onSelectSubType: action('onSelectSubType'), label: "Category", subTypes: [
+                            {
+                                _id: '1',
+                                name: 'Sub Type',
+                            },
+                        ] }), _jsx(ItemFormTabs, { form: contactFieldsMock })] })) }) }));
 };

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { DrawerContent } from '@chakra-ui/react';
 import { action } from '@storybook/addon-actions';
 import { HomeAssistantPanel, RightPanel } from '../../../components';
 import { homeAssitantStep1FormMock, homeAssitantStep2FormMock, homeAssitantStep3FormMock, homeAssitantStep4FormMock, homeAssitantStep5FormMock, homeAssitantStep6FormMock, } from '../../../mocks';
@@ -36,5 +37,5 @@ export const HomeAssistantPanelComponent = (args) => {
         return prev - 1;
     });
     const currentForm = forms[currentStep];
-    return (_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.35",
+  "version": "2.8.37",
   "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,
@@ -34,7 +33,7 @@ export const ShareContactsContent = ({
   const numberOfContacts = Number(contacts.length)
 
   return (
-    <DrawerContent bg="lightBlue.1">
+    <>
       <DrawerHeader p="0">
         <PanelHeader
           handleCloseButton={onClose}
@@ -63,6 +62,6 @@ export const ShareContactsContent = ({
           />
         </FooterDrawer>
       </DrawerFooter>
-    </DrawerContent>
+    </>
   )
 }

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'
@@ -40,7 +39,7 @@ export const ItemFormPanel = ({
   }, [children])
 
   return (
-    <DrawerContent bg="lightBlue.1">
+    <>
       <DrawerHeader p="0">
         <PanelHeader
           handleCloseButton={onClose}
@@ -75,6 +74,6 @@ export const ItemFormPanel = ({
           <ItemFormFooter onSave={onSubmitForm} onCancel={onClose} />
         </DrawerFooter>
       </FooterDrawer>
-    </DrawerContent>
+    </>
   )
 }

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,8 +55,10 @@ export const HomeAssistantPanel = ({
     fields: currentForm,
   })
 
+  if (isLoading) return <Loading />
+
   return (
-    <DrawerContent bg="lightBlue.1">
+    <>
       <DrawerHeader p="0">
         <PanelHeader
           handleCloseButton={onClose}
@@ -102,6 +105,6 @@ export const HomeAssistantPanel = ({
           }}
         />
       </DrawerFooter>
-    </DrawerContent>
+    </>
   )
 }

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/contacts/ContactsContent.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/react'
+import { DrawerContent } from '@chakra-ui/react'
 import { ContactsContent, RightPanel, ShareContactsContent } from '@/components'
 import { ContactsMock, ContactsMockCompleted, menuMock } from '@/mocks'
 import { Fragment, useState } from 'react'
@@ -69,17 +70,19 @@ export const ContactsContentComponent = (args: ContactsContentI) => {
         isOpen={sharePanel.openSharePanel}
         onClose={handleToggleSharePanel}
       >
-        <ShareContactsContent
-          contacts={sharePanel.contacts}
-          homefileContacts={ContactsMockCompleted}
-          onClose={handleToggleSharePanel}
-          onShare={action('onShare')}
-          isLoading={loading}
-          shareWithList={emailsToShare}
-          onContactSearch={handleSearch}
-          onDropdownSelect={handleShareWithList}
-          onRemoveContact={handleOnRemoveContact}
-        />
+        <DrawerContent bg="lightBlue.1">
+          <ShareContactsContent
+            contacts={sharePanel.contacts}
+            homefileContacts={ContactsMockCompleted}
+            onClose={handleToggleSharePanel}
+            onShare={action('onShare')}
+            isLoading={loading}
+            shareWithList={emailsToShare}
+            onContactSearch={handleSearch}
+            onDropdownSelect={handleShareWithList}
+            onRemoveContact={handleOnRemoveContact}
+          />
+        </DrawerContent>
       </RightPanel>
     </Fragment>
   )

package/src/stories/forms/ItemFormPanel/ItemFormPanel.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/react'
+import { DrawerContent } from '@chakra-ui/react'
 import {
   ItemFormPanel,
   ItemFormTabs,
@@ -27,27 +28,29 @@ export default {
 export const ItemFormPanelComponent = (args: ItemFormPanelI) => {
   return (
     <RightPanel isOpen onClose={() => null}>
-      <ItemFormPanel {...args}>
-        <ItemNameHeader
-          id="item-name-header"
-          onSave={action('onSaveItemName')}
-        />
-        <ItemSubTypeSelect
-          initialSubType={{
-            _id: '1',
-            name: 'Sub Type',
-          }}
-          onSelectSubType={action('onSelectSubType')}
-          label="Category"
-          subTypes={[
-            {
+      <DrawerContent bg="lightBlue.1">
+        <ItemFormPanel {...args}>
+          <ItemNameHeader
+            id="item-name-header"
+            onSave={action('onSaveItemName')}
+          />
+          <ItemSubTypeSelect
+            initialSubType={{
               _id: '1',
               name: 'Sub Type',
-            },
-          ]}
-        />
-        <ItemFormTabs form={contactFieldsMock} />
-      </ItemFormPanel>
+            }}
+            onSelectSubType={action('onSelectSubType')}
+            label="Category"
+            subTypes={[
+              {
+                _id: '1',
+                name: 'Sub Type',
+              },
+            ]}
+          />
+          <ItemFormTabs form={contactFieldsMock} />
+        </ItemFormPanel>
+      </DrawerContent>
     </RightPanel>
   )
 }

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

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/react'
+import { DrawerContent } from '@chakra-ui/react'
 import { action } from '@storybook/addon-actions'
 import { HomeAssistantPanel, RightPanel } from '@/components'
 import { HomeAssistantPanelI, ReportI } from '@/interfaces'
@@ -53,13 +54,16 @@ export const HomeAssistantPanelComponent = (args: HomeAssistantPanelI) => {
 
   const currentForm = forms[currentStep]
   return (
-    <HomeAssistantPanel
-      {...args}
-      currentStep={currentStep}
-      currentForm={currentForm}
-      onNext={handleFormChange}
-      onBack={handleBack}
-      onSave={action('onSave')}
-    />
+    <DrawerContent bg="lightBlue.1">
+      <HomeAssistantPanel
+        {...args}
+        currentStep={currentStep}
+        currentForm={currentForm}
+        onNext={handleFormChange}
+        onBack={handleBack}
+        onSave={action('onSave')}
+        isLoading={false}
+      />
+    </DrawerContent>
   )
 }