@homefile/components-v2 2.7.16 → 2.7.18

package/dist/components/myProfile/details/UserDetails.d.ts

@@ -1,2 +1,2 @@
 import { UserDetailsI } from '../../../interfaces';
-export declare const UserDetails: ({ email, firstName, lastName, onSave, bg }: UserDetailsI) => import("react/jsx-runtime").JSX.Element;
+export declare const UserDetails: ({ email, firstName, lastName, onSave, bg, }: UserDetailsI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/myProfile/details/UserDetails.js

@@ -17,9 +17,9 @@ const schema = yup.object({
         .email(`${t('forms.invalid')} ${t('forms.email')}`)
         .required(`${t('forms.email')} ${t('forms.required')}`),
 });
-export const UserDetails = ({ email, firstName, lastName, onSave, bg }) => {
+export const UserDetails = ({ email, firstName, lastName, onSave, bg, }) => {
     const nameInitials = `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
-    const { control, handleSubmit, reset, formState: { errors, dirtyFields, touchedFields }, } = useForm({
+    const { control, handleSubmit, reset, formState: { errors, isDirty }, } = useForm({
         defaultValues: {
             firstName,
             lastName,
@@ -27,7 +27,13 @@ export const UserDetails = ({ email, firstName, lastName, onSave, bg }) => {
         },
         resolver: yupResolver(schema),
     });
-    const showButtons = Object.keys(Object.assign(Object.assign({}, dirtyFields), touchedFields)).length > 0;
+    const handleOnSave = (data) => {
+        onSave(data);
+        reset(data, {
+            keepDirty: false,
+            keepTouched: false,
+        });
+    };
     return (_jsxs(Flex, { align: "start", gap: "input.sm", bg: "lightBlue.2", p: "base", pb: "6", children: [_jsx(Center, { h: "121px", w: "121px", bg: bg, children: _jsx(Text, { fontSize: "5xl", fontWeight: "extrabold", fontFamily: "primary", color: "neutral.white", children: nameInitials }) }), _jsxs(Stack, { flex: "1", spacing: "input.sm", children: [_jsx(Controller, { name: "firstName", control: control, render: ({ field: { value, onBlur, onChange }, fieldState: { invalid }, }) => {
                             var _a;
                             return (_jsx(TextInput, { handleChange: onChange, placeholder: t('myProfile.placeholders.firstName'), value: value, onBlur: onBlur, hasError: invalid, errorMessage: (_a = errors.firstName) === null || _a === void 0 ? void 0 : _a.message }));
@@ -37,5 +43,14 @@ export const UserDetails = ({ email, firstName, lastName, onSave, bg }) => {
                         } }), _jsx(Controller, { name: "email", control: control, render: ({ field: { value, onBlur, onChange }, fieldState: { invalid }, }) => {
                             var _a;
                             return (_jsx(TextInput, { handleChange: onChange, placeholder: t('myProfile.placeholders.email'), value: value, onBlur: onBlur, hasError: invalid, errorMessage: (_a = errors.email) === null || _a === void 0 ? void 0 : _a.message }));
-                        } }), showButtons && (_jsx(ContextButtons, { onCancel: reset, onSave: handleSubmit(onSave) }))] })] }));
+                        } }), isDirty && (_jsx(ContextButtons, { onCancel: () => {
+                            reset({
+                                firstName,
+                                lastName,
+                                email,
+                            }, {
+                                keepDirty: false,
+                                keepTouched: false,
+                            });
+                        }, onSave: handleSubmit(handleOnSave) }))] })] }));
 };

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, 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, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, 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, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, 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, 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, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, 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, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, 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/stories/loaders/Loading.stories.d.ts

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

package/dist/stories/loaders/Loading.stories.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Loading } from '../../components';
+export default {
+    title: 'Components/Loaders',
+    component: Loading,
+};
+export const LoadingComponent = () => {
+    return (_jsx(Loading, {}));
+};

package/dist/stories/myProfile/details/UserDetails.stories.d.ts

@@ -4,9 +4,5 @@ declare const _default: Meta<UserDetailsI>;
 export default _default;
 export declare const UserDetailsComponent: {
     (args: UserDetailsI): import("react/jsx-runtime").JSX.Element;
-    args: {
-        email: string;
-        firstName: string;
-        lastName: string;
-    };
+    args: {};
 };

package/dist/stories/myProfile/details/UserDetails.stories.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@chakra-ui/react';
 import { UserDetails } from '../../../components';
+import { action } from '@storybook/addon-actions';
 export default {
     title: 'Components/MyProfile/Details',
     component: UserDetails,
+    args: {
+        email: 'user@user.com',
+        firstName: 'Gary',
+        lastName: 'Edmunds',
+        onSave: action('onSave'),
+    },
 };
 export const UserDetailsComponent = (args) => {
     return (_jsx(Box, { w: ['full', 'md'], p: "base", children: _jsx(UserDetails, Object.assign({}, args)) }));
 };
-UserDetailsComponent.args = {
-    email: 'user@user.com',
-    firstName: 'Gary',
-    lastName: 'Edmunds',
-};
+UserDetailsComponent.args = {};

package/package.json

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

package/src/components/myProfile/details/UserDetails.tsx

@@ -26,7 +26,7 @@ export const UserDetails = ({
   firstName,
   lastName,
   onSave,
-  bg
+  bg,
 }: UserDetailsI) => {
   const nameInitials = `${firstName.charAt(0)}${lastName.charAt(
     0
@@ -36,7 +36,7 @@ export const UserDetails = ({
     control,
     handleSubmit,
     reset,
-    formState: { errors, dirtyFields, touchedFields },
+    formState: { errors, isDirty },
   } = useForm<FormData>({
     defaultValues: {
       firstName,
@@ -46,16 +46,16 @@ export const UserDetails = ({
     resolver: yupResolver(schema),
   })
 
-  const showButtons = Object.keys({...dirtyFields, ...touchedFields}).length > 0
+  const handleOnSave = (data: FormData) => {
+    onSave(data)
+    reset(data, {
+      keepDirty: false,
+      keepTouched: false,
+    })
+  }
 
   return (
-    <Flex
-      align="start"
-      gap="input.sm"
-      bg="lightBlue.2"
-      p="base"
-      pb="6"
-    >
+    <Flex align="start" gap="input.sm" bg="lightBlue.2" p="base" pb="6">
       <Center h="121px" w="121px" bg={bg}>
         <Text
           fontSize="5xl"
@@ -118,8 +118,23 @@ export const UserDetails = ({
             />
           )}
         />
-        {showButtons && (
-          <ContextButtons onCancel={reset} onSave={handleSubmit(onSave)} />
+        {isDirty && (
+          <ContextButtons
+            onCancel={() => {
+              reset(
+                {
+                  firstName,
+                  lastName,
+                  email,
+                },
+                {
+                  keepDirty: false,
+                  keepTouched: false,
+                }
+              )
+            }}
+            onSave={handleSubmit(handleOnSave)}
+          />
         )}
       </Stack>
     </Flex>

package/src/index.ts

@@ -89,6 +89,7 @@ export {
   LaunchpadReceiptPanel,
   LaunchpadTour,
   LeftPanel,
+  Loading,
   MediaDetailsStep,
   MessagePanel,
   MessageChatPanel,

package/src/stories/loaders/Loading.stories.tsx

@@ -0,0 +1,13 @@
+import { Loading } from '@/components'
+import { Meta } from '@storybook/react'
+
+export default {
+    title: 'Components/Loaders',
+    component: Loading,
+  } as Meta
+
+  export const LoadingComponent = () => {
+    return (
+      <Loading />
+    )
+  }

package/src/stories/myProfile/details/UserDetails.stories.tsx

@@ -2,10 +2,17 @@ import { Meta } from '@storybook/react'
 import { Box } from '@chakra-ui/react'
 import { UserDetails } from '@/components'
 import { UserDetailsI } from '@/interfaces'
+import { action } from '@storybook/addon-actions'
 
 export default {
   title: 'Components/MyProfile/Details',
   component: UserDetails,
+  args: {
+    email: 'user@user.com',
+    firstName: 'Gary',
+    lastName: 'Edmunds',
+    onSave: action('onSave'),
+  },
 } as Meta<UserDetailsI>
 
 export const UserDetailsComponent = (args: UserDetailsI) => {
@@ -16,8 +23,4 @@ export const UserDetailsComponent = (args: UserDetailsI) => {
   )
 }
 
-UserDetailsComponent.args = {
-  email: 'user@user.com',
-  firstName: 'Gary',
-  lastName: 'Edmunds',
-}
+UserDetailsComponent.args = {}