@homefile/components-v2 2.8.34 → 2.8.36

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.js

@@ -1,8 +1,8 @@
-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 { homeAssistantSteps } from '../../../helpers';
@@ -26,7 +26,7 @@ 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: {
+    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/rooms/GroupsContainer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Stack } from '@chakra-ui/react';
 export const GroupsContainer = ({ children }) => {
-    return (_jsx(Stack, { spacing: "10", bgGradient: "linear(to-b, lightBlue.6, transparent)", py: "2", px: "base", children: children }));
+    return (_jsx(Stack, { spacing: "10", bgGradient: "linear(to-b, lightBlue.6, transparent)", py: "2", px: "base", "data-testid": "groups-container", children: children }));
 };

package/dist/components/rooms/GroupsHeader.js

@@ -5,5 +5,5 @@ import { GroupContent, LeftButton, RightPanel } from '..';
 import { useGroupsHeader } from '../../hooks';
 export const GroupsHeader = ({ groupList, onClick, showingTour = false, disabled, }) => {
     const { handleClick, isOpen, onOpen, onClose } = useGroupsHeader(onClick);
-    return (_jsxs(Box, { w: "10rem", ml: "auto", children: [_jsx(LeftButton, { onClick: onOpen, height: "2rem", label: t('addRoomGroup.addBtn'), position: "absolute", right: "0", disabled: disabled, id: "addItemToGroup", w: "fit-content" }), _jsx(RightPanel, { children: _jsx(GroupContent, { groupList: groupList, onClick: handleClick, onClose: onClose }), isOpen: showingTour || isOpen, onClose: onClose, size: "xs", overlay: !showingTour })] }));
+    return (_jsxs(Box, { w: "10rem", ml: "auto", "data-testid": "groups-header", children: [_jsx(LeftButton, { onClick: onOpen, height: "2rem", label: t('addRoomGroup.addBtn'), position: "absolute", right: "0", disabled: disabled, id: "addItemToGroup", w: "fit-content" }), _jsx(RightPanel, { children: _jsx(GroupContent, { groupList: groupList, onClick: handleClick, onClose: onClose }), isOpen: showingTour || isOpen, onClose: onClose, size: "xs", overlay: !showingTour })] }));
 };

package/dist/components/rooms/RoomHeader.js

@@ -6,7 +6,7 @@ import { roomIcons } from '../../helpers';
 import { useRoomHeader } from '../../hooks';
 export const RoomHeader = ({ isDeleteDisabled, onClickDelete, onSubmit, room, roomAmount, disabled, }) => {
     const { formattedAmount, handleChange, handleClick, inputValue, isEditing } = useRoomHeader({ onSubmit, room, roomAmount });
-    return (_jsx(Box, { w: "full", bg: "lightBlue.4", py: "2", px: "base", children: _jsxs(Flex, { justify: "space-between", align: "center", children: [_jsxs(Flex, { w: "fit-content", children: [_jsx(Center, { h: "2.3rem", minW: "2.6rem", mr: "2", children: _jsx(Image, { alt: room.name, maxH: "2rem", src: roomIcons[room.type], w: "auto" }) }), _jsx(TextInput, { fontWeight: isEditing ? 'regular' : 'medium', fontSize: "1.25rem", fontFamily: "primary", handleChange: handleChange, height: "full", id: room.name, isDisabled: !isEditing || disabled, placeholder: "", value: isEditing && !disabled
+    return (_jsx(Box, { w: "full", bg: "lightBlue.4", py: "2", px: "base", "data-testid": "room-header", children: _jsxs(Flex, { justify: "space-between", align: "center", children: [_jsxs(Flex, { w: "fit-content", children: [_jsx(Center, { h: "2.3rem", minW: "2.6rem", mr: "2", children: _jsx(Image, { alt: room.name, maxH: "2rem", src: roomIcons[room.type], w: "auto" }) }), _jsx(TextInput, { fontWeight: isEditing ? 'regular' : 'medium', fontSize: "1.25rem", fontFamily: "primary", handleChange: handleChange, height: "full", id: room.name, isDisabled: !isEditing || disabled, placeholder: "", value: isEditing && !disabled
                                 ? inputValue || ''
                                 : (inputValue === null || inputValue === void 0 ? void 0 : inputValue.toUpperCase()) || '' }), isEditing && !disabled ? (_jsx(Button, { variant: "tertiary", onClick: handleClick, ml: "2", children: t('roomHeader.saveBtn') })) : (_jsx(IconButton, { "aria-label": t('ariaLabels.edit'), icon: _jsx(Edit, {}), maxW: "fit-content", onClick: handleClick, px: "2", variant: "menuIconWithShadow", id: "customizeRoomName" }))] }), _jsxs(Flex, { align: "center", gap: "6", children: [_jsxs(Flex, { align: "center", gap: "6", id: "trackRoomValue", bg: "lightBlue.4", children: [_jsx(Show, { breakpoint: "(min-width: 600px)", children: _jsx(Text, { fontWeight: "medium", variant: "caption", children: t('roomHeader.roomValue').toUpperCase() }) }), _jsx(Text, { variant: "titleBolder", children: formattedAmount }), _jsx(Show, { breakpoint: "(min-width: 600px)", children: _jsx(Box, { h: "5", w: "1px", bg: "lightBlue.6" }) })] }), _jsx(IconButton, { "aria-label": t('ariaLabels.delete'), icon: _jsx(TrashIcon, {}), maxW: "fit-content", onClick: () => onClickDelete(room._id), disabled: isDeleteDisabled, px: "1", variant: "menuIconWithShadow" })] })] }) }));
 };

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') })) }));
 };

package/package.json

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

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

@@ -34,7 +34,7 @@ export const ShareContactsContent = ({
   const numberOfContacts = Number(contacts.length)
 
   return (
-    <DrawerContent bg="lightBlue.1">
+    <>
       <DrawerHeader p="0">
         <PanelHeader
           handleCloseButton={onClose}
@@ -63,6 +63,6 @@ export const ShareContactsContent = ({
           />
         </FooterDrawer>
       </DrawerFooter>
-    </DrawerContent>
+    </>
   )
 }

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

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

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

@@ -55,7 +55,7 @@ export const HomeAssistantPanel = ({
   })
 
   return (
-    <DrawerContent bg="lightBlue.1">
+    <>
       <DrawerHeader p="0">
         <PanelHeader
           handleCloseButton={onClose}
@@ -102,6 +102,6 @@ export const HomeAssistantPanel = ({
           }}
         />
       </DrawerFooter>
-    </DrawerContent>
+    </>
   )
 }

package/src/components/rooms/GroupsContainer.tsx

@@ -8,6 +8,7 @@ export const GroupsContainer = ({ children }: { children?: ReactNode }) => {
       bgGradient="linear(to-b, lightBlue.6, transparent)"
       py="2"
       px="base"
+      data-testid="groups-container"
     >
       {children}
     </Stack>

package/src/components/rooms/GroupsHeader.tsx

@@ -13,7 +13,7 @@ export const GroupsHeader = ({
   const { handleClick, isOpen, onOpen, onClose } = useGroupsHeader(onClick)
 
   return (
-    <Box w="10rem" ml="auto">
+    <Box w="10rem" ml="auto" data-testid="groups-header">
       <LeftButton
         onClick={onOpen}
         height="2rem"

package/src/components/rooms/RoomHeader.tsx

@@ -26,7 +26,7 @@ export const RoomHeader = ({
     useRoomHeader({ onSubmit, room, roomAmount })
 
   return (
-    <Box w="full" bg="lightBlue.4" py="2" px="base">
+    <Box w="full" bg="lightBlue.4" py="2" px="base" data-testid="room-header">
       <Flex justify="space-between" align="center">
         <Flex w="fit-content">
           <Center h="2.3rem" minW="2.6rem" mr="2">

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,15 @@ 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')}
+      />
+    </DrawerContent>
   )
 }