@homefile/components-v2 2.6.8 → 2.7.0

package/dist/components/dialog/Dialog.d.ts

@@ -0,0 +1,2 @@
+import { DialogI } from '../../interfaces';
+export declare const Dialog: ({ actionText, body, cancelText, header, isOpen, onAction, onClose, }: DialogI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Button, Text, } from '@chakra-ui/react';
+export const Dialog = ({ actionText, body, cancelText = t('buttons.cancel'), header, isOpen, onAction, onClose, }) => {
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { minH: "220px", children: [_jsx(ModalHeader, { children: _jsx(Text, { variant: "title", fontWeight: "bold", children: header }) }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { children: _jsx(Text, { children: body }) }), _jsxs(ModalFooter, { gap: "base", children: [_jsx(Button, { variant: "secondaryFooter", onClick: onClose, children: cancelText }), _jsx(Button, { variant: "primaryFooter", onClick: onAction, children: actionText })] })] })] }));
+};

package/dist/components/index.d.ts

@@ -5,6 +5,7 @@ export * from './badge';
 export * from './buttons';
 export * from './contacts';
 export * from './customToast';
+export * from './dialog/Dialog';
 export * from './display';
 export * from './dragDrop';
 export * from './feedback';

package/dist/components/index.js

@@ -5,6 +5,7 @@ export * from './badge';
 export * from './buttons';
 export * from './contacts';
 export * from './customToast';
+export * from './dialog/Dialog';
 export * from './display';
 export * from './dragDrop';
 export * from './feedback';

package/dist/helpers/myHomes/HomeCard.helper.d.ts

@@ -1,7 +1,7 @@
-import { MyHomesFormI } from '../../interfaces';
+import { SelectItemI } from '../../interfaces';
 export declare const MenuItems: {
     label: string;
-    handleClick: (form: MyHomesFormI) => MyHomesFormI;
+    handleClick: (form: SelectItemI) => SelectItemI<string>;
 }[];
 export declare const HomeCards: ({
     accountType: string;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadTour, LeftPanel, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WellDone, YtdTile, } from './components';
+export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadTour, LeftPanel, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WellDone, YtdTile, } from './components';
 export { useCustomToast } from './hooks';
 export { randomColor } from './utils';
 export { billingProxy, dynamicFormProxy, homeCardProxy, partnerContentProxy, partnerDetailsProxy, paymentMethodProxy, recordsInputsProxy, recordsInputsToDBProxy, userDetailsProxy, confirmAddressProxy, } from './proxies';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadTour, LeftPanel, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WellDone, YtdTile, } from './components';
+export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadTour, LeftPanel, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WellDone, YtdTile, } from './components';
 export { useCustomToast } from './hooks';
 export { randomColor } from './utils';
 export { billingProxy, dynamicFormProxy, homeCardProxy, partnerContentProxy, partnerDetailsProxy, paymentMethodProxy, recordsInputsProxy, recordsInputsToDBProxy, userDetailsProxy, confirmAddressProxy, } from './proxies';

package/dist/interfaces/dialog/Dialog.interface.d.ts

@@ -0,0 +1,9 @@
+export interface DialogI {
+    actionText: string;
+    body: string;
+    cancelText?: string;
+    header: string;
+    isOpen: boolean;
+    onAction: () => void;
+    onClose: () => void;
+}

package/dist/interfaces/dialog/Dialog.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/index.d.ts

@@ -5,6 +5,7 @@ export * from './badge';
 export * from './buttons';
 export * from './contacts';
 export * from './customToast';
+export * from './dialog/Dialog.interface';
 export * from './display';
 export * from './dragDrop';
 export * from './feedback';

package/dist/interfaces/index.js

@@ -5,6 +5,7 @@ export * from './badge';
 export * from './buttons';
 export * from './contacts';
 export * from './customToast';
+export * from './dialog/Dialog.interface';
 export * from './display';
 export * from './dragDrop';
 export * from './feedback';

package/dist/interfaces/myHomes/HomeCard.interface.d.ts

@@ -1,4 +1,4 @@
-import { MyHomesFormI, HomeImageI } from '..';
+import { SelectItemI, HomeImageI } from '..';
 export interface HomeAddressI {
     city: string;
     state: string;
@@ -20,7 +20,7 @@ export interface MyHomeCardI {
     index?: number;
     image?: ImageI | null;
     name: string;
-    handleCardClick: (form: MyHomesFormI) => void;
+    handleCardClick: (form: SelectItemI) => void;
     addImage: (img: HomeImageI) => void;
     loading: boolean;
     loadingId: string;

package/dist/interfaces/myHomes/MyHomes.interface.d.ts

@@ -1,8 +1,4 @@
 import { HomeI, MenuItemI, SelectItemI } from '..';
-export interface MyHomesFormI {
-    _id: string | number;
-    name: string;
-}
 export interface HomeImageI {
     event: React.ChangeEvent<HTMLInputElement>;
     _id: string;
@@ -10,7 +6,7 @@ export interface HomeImageI {
 export interface MyHomesI {
     cardList: HomeI[];
     cardMenuItems?: MenuItemI[];
-    handleCardClick: (form: MyHomesFormI) => void;
+    handleCardClick: (form: SelectItemI) => void;
     handleFilterClick: (form: SelectItemI | string) => void;
     handleNewHomeClick: () => void;
     headerMenuItems: MenuItemI[];

package/dist/stories/dialog/Dialog.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { DialogI } from '../../interfaces';
+declare const _default: Meta<DialogI>;
+export default _default;
+export declare const DialogComponent: (args: DialogI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/dialog/Dialog.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog } from '../../components';
+import { Box } from '@chakra-ui/react';
+export default {
+    title: 'Components/Dialog',
+    component: Dialog,
+    args: {
+        actionText: 'Action',
+        body: 'This is a dialog body',
+        header: 'Dialog Header',
+        isOpen: true,
+    },
+};
+export const DialogComponent = (args) => {
+    return (_jsx(Box, { width: "fit-content", p: "base", children: _jsx(Dialog, Object.assign({}, args)) }));
+};

package/dist/stories/headers/ContainerHeader.stories.d.ts

@@ -11,7 +11,7 @@ export declare const ContainerHeaderComponent: {
         titleIcon: any;
         menuItems: {
             label: string;
-            handleClick: (form: import("../../interfaces").MyHomesFormI) => import("../../interfaces").MyHomesFormI;
+            handleClick: (form: import("../../interfaces").SelectItemI) => import("../../interfaces").SelectItemI<string>;
         }[];
     };
 };

package/dist/stories/myHomes/MyHomes.stories.d.ts

@@ -38,7 +38,7 @@ export declare const MyHomesComponent: {
         })[];
         cardMenuItems: {
             label: string;
-            handleClick: (form: import("../../interfaces").MyHomesFormI) => import("../../interfaces").MyHomesFormI;
+            handleClick: (form: import("../../interfaces").SelectItemI) => import("../../interfaces").SelectItemI<string>;
         }[];
         headerMenuItems: {
             handleClick: () => null;

package/package.json

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

package/src/components/dialog/Dialog.tsx

@@ -0,0 +1,49 @@
+import { t } from 'i18next'
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+  Button,
+  Text,
+} from '@chakra-ui/react'
+import { DialogI } from '@/interfaces'
+
+export const Dialog = ({
+  actionText,
+  body,
+  cancelText = t('buttons.cancel'),
+  header,
+  isOpen,
+  onAction,
+  onClose,
+}: DialogI) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent minH="220px">
+        <ModalHeader>
+          <Text variant="title" fontWeight="bold">
+            {header}
+          </Text>
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Text>{body}</Text>
+        </ModalBody>
+
+        <ModalFooter gap="base">
+          <Button variant="secondaryFooter" onClick={onClose}>
+            {cancelText}
+          </Button>
+          <Button variant="primaryFooter" onClick={onAction}>
+            {actionText}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

package/src/components/index.ts

@@ -5,6 +5,7 @@ export * from './badge'
 export * from './buttons'
 export * from './contacts'
 export * from './customToast'
+export * from './dialog/Dialog'
 export * from './display'
 export * from './dragDrop'
 export * from './feedback'

package/src/helpers/myHomes/HomeCard.helper.ts

@@ -1,9 +1,9 @@
-import { MyHomesFormI } from '@/interfaces'
+import { SelectItemI } from '@/interfaces'
 
 export const MenuItems = [
   {
     label: 'Edit',
-    handleClick: (form: MyHomesFormI) => form,
+    handleClick: (form: SelectItemI) => form,
   },
 ]
 

package/src/index.ts

@@ -30,6 +30,7 @@ export {
   CreditCardError,
   CustomerTile,
   DeleteBanner,
+  Dialog,
   DisplayFiles,
   DisplayFilesDetail,
   DisplayOptions,

package/src/interfaces/dialog/Dialog.interface.ts

@@ -0,0 +1,9 @@
+export interface DialogI {
+  actionText: string
+  body: string
+  cancelText?: string
+  header: string
+  isOpen: boolean
+  onAction: () => void
+  onClose: () => void
+}

package/src/interfaces/index.ts

@@ -5,6 +5,7 @@ export * from './badge'
 export * from './buttons'
 export * from './contacts'
 export * from './customToast'
+export * from './dialog/Dialog.interface'
 export * from './display'
 export * from './dragDrop'
 export * from './feedback'

package/src/interfaces/myHomes/HomeCard.interface.ts

@@ -1,4 +1,4 @@
-import { MyHomesFormI, HomeImageI } from '@/interfaces'
+import { SelectItemI, HomeImageI } from '@/interfaces'
 
 export interface HomeAddressI {
   city: string
@@ -23,7 +23,7 @@ export interface MyHomeCardI {
   index?: number
   image?: ImageI | null
   name: string
-  handleCardClick: (form: MyHomesFormI) => void
+  handleCardClick: (form: SelectItemI) => void
   addImage: (img: HomeImageI) => void
   loading: boolean
   loadingId: string

package/src/interfaces/myHomes/MyHomes.interface.ts

@@ -1,10 +1,5 @@
 import { HomeI, MenuItemI, SelectItemI } from '@/interfaces'
 
-export interface MyHomesFormI {
-  _id: string | number
-  name: string
-}
-
 export interface HomeImageI {
   event: React.ChangeEvent<HTMLInputElement>
   _id: string
@@ -13,7 +8,7 @@ export interface HomeImageI {
 export interface MyHomesI {
   cardList: HomeI[]
   cardMenuItems?: MenuItemI[]
-  handleCardClick: (form: MyHomesFormI) => void
+  handleCardClick: (form: SelectItemI) => void
   handleFilterClick: (form: SelectItemI | string) => void
   handleNewHomeClick: () => void
   headerMenuItems: MenuItemI[]

package/src/stories/dialog/Dialog.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta } from '@storybook/react'
+import { Dialog } from '@/components'
+import { Box } from '@chakra-ui/react'
+import { DialogI } from '@/interfaces'
+
+export default {
+  title: 'Components/Dialog',
+  component: Dialog,
+  args: {
+    actionText: 'Action',
+    body: 'This is a dialog body',
+    header: 'Dialog Header',
+    isOpen: true,
+  },
+} as Meta<DialogI>
+
+export const DialogComponent = (args: DialogI) => {
+  return (
+    <Box width="fit-content" p="base">
+      <Dialog {...args} />
+    </Box>
+  )
+}