[FS-237]: Cycle 28 Maintenance (#123)

This PR cycles 28 maintenance.

---------

Co-authored-by: AmirabbasJ <amirabbasgamer2@gmail.com>

.eslintrc.js

@@ -28,6 +28,7 @@ module.exports = init({
         '@typescript-eslint/no-confusing-void-expression': 'off',
         'react/jsx-no-useless-fragment': 'off',
         'react-hooks/rules-of-hooks': 'off',
+        'storybook/no-title-property-in-meta': 'off',
       },
     },
   ],

app/pages/Dashboard/DashboardLayout.tsx → app/Dashboard/DashboardLayout.tsx

@@ -1,4 +1,3 @@
-import { SideBar } from '@camp/design';
 import { Outlet } from '@camp/router';
 import {
   AppShell as MantineAppShell,
@@ -9,6 +8,8 @@ import {
 import { ModalsProvider } from '@mantine/modals';
 import { Notifications } from '@mantine/notifications';
 
+import { DashboardSidebar } from './_components/DashboardSidebar';
+
 const useStyles = createStyles(theme => ({
   body: {
     height: '100vh',
@@ -35,7 +36,7 @@ export const DashboardLayout = ({ children = outlet }) => {
         asideOffsetBreakpoint="sm"
         navbar={
           <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
-            <SideBar />
+            <DashboardSidebar />
           </MediaQuery>
         }
       >

app/pages/Dashboard/Households/HouseholdDetail/HouseholdDetail.tsx → app/Dashboard/Households/HouseholdDetail/HouseholdDetail.tsx

@@ -8,6 +8,7 @@ import {
 import { debug } from '@camp/debug';
 import {
   ControlledSelect,
+  DestructiveButton,
   DetailCard,
   FullPageLoader,
   showNotification,
@@ -25,14 +26,11 @@ import { Button, createStyles, Flex, Title } from '@mantine/core';
 import { useBoolean } from 'ahooks';
 import { useForm } from 'react-hook-form';
 
-import {
-  HouseholderDetail,
-  InformationBadge,
-  MemberList,
-  SeverityBadge,
-  UndoButton,
-} from '../../../../components';
-import { openDeleteHouseholdModal } from '../DeleteHouseholdModal';
+import { InformationBadge } from '../../_components/InformationBadge';
+import { SeverityBadge } from '../../_components/SeverityBadge';
+import { openDeleteHouseholdModal } from '../_components/DeleteHouseholdModal';
+import { HouseholderDetail } from './_components/HouseholderDetail';
+import { MemberList } from './_components/MemberList';
 import { householdDetailIds as ids } from './HouseholdDetail.ids';
 
 interface FormSchema {
@@ -57,7 +55,7 @@ const useStyles = createStyles(theme => ({
 export const HouseholdDetail = () => {
   const t = messages.householdDetail;
   const tNotification = messages.notification.household;
-  const householdId = useParams();
+  const { id } = useParams();
   const navigate = useNavigate();
   const {
     handleSubmit,
@@ -75,7 +73,7 @@ export const HouseholdDetail = () => {
     loading,
     error,
   } = useHouseholdQuery({
-    variables: { id: householdId },
+    variables: { id },
     onCompleted: d => {
       reset(d.household ?? {});
     },
@@ -91,14 +89,14 @@ export const HouseholdDetail = () => {
 
   const household = householdData?.household;
   const { data: householderData } = useHouseholderQuery({
-    variables: { id: householdId },
+    variables: { id },
   });
 
   const onUpdateHousehold = handleSubmit(async formData => {
     try {
       await updateHousehold({
         variables: {
-          id: householdId,
+          id,
           update: { name: formData.name, severity: formData.severity },
         },
       });
@@ -196,12 +194,14 @@ export const HouseholdDetail = () => {
             <Flex gap={20}>
               {isEditing ? (
                 <>
-                  <UndoButton
+                  <DestructiveButton
                     onClick={() => {
                       reset();
                       setIsEditing(false);
                     }}
-                  />
+                  >
+                    {messages.actions.undoBtn}
+                  </DestructiveButton>
                   <Button
                     {...createTestAttr(ids.submitBtn)}
                     type="submit"
@@ -287,7 +287,12 @@ export const HouseholdDetail = () => {
         tabs={[
           {
             tab: <Title order={5}>{t.tabs.householderTitle}</Title>,
-            panel: <HouseholderDetail household={household} />,
+            panel: (
+              <HouseholderDetail
+                householdId={household.id}
+                householdName={household.name}
+              />
+            ),
             id: ids.householderTab,
             isBusy: !householder?.isCompleted,
             isDefault: true,

app/Dashboard/Households/HouseholdDetail/_components/HouseholderDetail/HouseholderDetail.stories.tsx

@@ -0,0 +1,26 @@
+import {
+  apiMemberListMock,
+  completeHouseholdMock,
+  householderMock,
+} from '@camp/fixtures';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HouseholderDetail } from './HouseholderDetail';
+
+export default {
+  component: HouseholderDetail,
+  args: {
+    householdId: '1',
+    householdName: 'محمد',
+  },
+} as Meta<typeof HouseholderDetail>;
+
+type Story = StoryObj<typeof HouseholderDetail>;
+
+export const Default: Story = {
+  parameters: {
+    apolloClient: {
+      mocks: [householderMock, completeHouseholdMock, apiMemberListMock],
+    },
+  },
+};

app/components/HouseholderDetail/HouseholderDetail.tsx → app/Dashboard/Households/HouseholdDetail/_components/HouseholderDetail/HouseholderDetail.tsx

@@ -1,17 +1,17 @@
 import { useHouseholderQuery } from '@camp/data-layer';
 import { debug, DebugScopes } from '@camp/debug';
 import { FullPageLoader } from '@camp/design';
-import type { HouseholdDetail, HouseholdKeys } from '@camp/domain';
 
 import { HouseholderForm } from '../HouseholderForm';
 
 interface Props {
-  household: HouseholdDetail & HouseholdKeys;
+  householdId: string;
+  householdName: string;
 }
 
-export const HouseholderDetail = ({ household }: Props) => {
+export const HouseholderDetail = ({ householdId, householdName }: Props) => {
   const { data, loading } = useHouseholderQuery({
-    variables: { id: household.id },
+    variables: { id: householdId },
   });
 
   const householder = data?.householder;
@@ -21,9 +21,9 @@ export const HouseholderDetail = ({ household }: Props) => {
 
   return (
     <HouseholderForm
-      householdId={household.id}
+      householdId={householdId}
       initialHouseholder={householder}
-      householdName={household.name}
+      householdName={householdName}
     />
   );
 };

app/components/HouseholderForm/HouseholderForm.ids.ts → app/Dashboard/Households/HouseholdDetail/_components/HouseholderForm/HouseholderForm.ids.ts

@@ -12,6 +12,7 @@ export const householderFormIds = {
   cityOfBirthInput: 'householder-city-of-birth',
   submitBtn: 'householder-submit-button',
   editBtn: 'householder-edit-button',
+  cancel: 'householder-cancel-button',
   notification: {
     success: 'householder-successful-update',
     failure: 'householder-failed-update',

app/components/HouseholderForm/HouseholderForm.tsx → app/Dashboard/Households/HouseholdDetail/_components/HouseholderForm/HouseholderForm.tsx

@@ -3,6 +3,7 @@ import {
   ControlledDateInput,
   ControlledSelect,
   DashboardTitle,
+  DestructiveButton,
   showNotification,
   TextInput,
 } from '@camp/design';
@@ -29,7 +30,6 @@ import { Button, createStyles, Group, SimpleGrid, Stack } from '@mantine/core';
 import { useBoolean } from 'ahooks';
 import { useForm } from 'react-hook-form';
 
-import { UndoButton } from '../UndoButton';
 import { householderFormIds as ids } from './HouseholderForm.ids';
 
 interface Props {
@@ -133,12 +133,16 @@ export const HouseholderForm = ({
           <Group spacing={20}>
             {isEditing ? (
               <>
-                <UndoButton
+                <DestructiveButton
+                  disabled={!isDirty}
                   onClick={() => {
                     reset();
                     setIsEditing(false);
                   }}
-                />
+                  {...createTestAttr(ids.cancel)}
+                >
+                  {messages.actions.undoBtn}
+                </DestructiveButton>
                 <Button
                   {...createTestAttr(ids.submitBtn)}
                   type="submit"

app/components/MemberEmptyState/MemberEmptyState.tsx → app/Dashboard/Households/HouseholdDetail/_components/MemberForm/MemberEmptyState/MemberEmptyState.tsx

@@ -3,7 +3,7 @@ import { UserIcon } from '@camp/icons';
 import { messages } from '@camp/messages';
 import { useMantineTheme } from '@mantine/core';
 
-import { CreateMemberButton } from '../MemberForm/CreateMemberButton';
+import { CreateMemberButton } from '../CreateMemberButton';
 
 interface Props {
   addNewMember: React.MouseEventHandler<HTMLButtonElement>;

app/components/MemberForm/MemberForm.ids.ts → app/Dashboard/Households/HouseholdDetail/_components/MemberForm/MemberForm.ids.ts

@@ -11,7 +11,7 @@ export const memberFormIds = {
   dobInput: 'member-date-of-birth',
   cityOfBirthInput: 'project-city-of-birth',
   submitBtn: 'submit-button',
-  undoBtn: 'undo-button',
+  cancelBtn: 'cancel-button',
   editBtn: 'edit-button',
   deleteBtn: 'delete-button',
   notification: {

app/Dashboard/Households/HouseholdDetail/_components/MemberForm/MemberForm.stories.tsx

@@ -0,0 +1,34 @@
+import {
+  GenderEnum,
+  MemberStatus,
+  NationalityEnum,
+  ReligionEnum,
+} from '@camp/domain';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { MemberForm } from './MemberForm';
+
+export default {
+  component: MemberForm,
+} as Meta<typeof MemberForm>;
+
+type Story = StoryObj<typeof MemberForm>;
+
+export const Default: Story = {};
+
+export const WithData: Story = {
+  args: {
+    initialMember: {
+      isCompleted: true,
+      name: 'محمد',
+      surname: 'محمد علیان',
+      status: MemberStatus.Completed,
+      dob: new Date('2000/01/01'),
+      fatherName: 'علی',
+      gender: GenderEnum.Male,
+      nationalId: '1234567890',
+      nationality: NationalityEnum.Ir,
+      religion: ReligionEnum.Islam,
+    },
+  },
+};

app/components/MemberForm/MemberForm.tsx → app/Dashboard/Households/HouseholdDetail/_components/MemberForm/MemberForm.tsx

@@ -4,6 +4,7 @@ import {
   ControlledDateInput,
   ControlledSelect,
   DashboardCard,
+  DestructiveButton,
   showNotification,
   TextInput,
 } from '@camp/design';
@@ -37,8 +38,7 @@ import { useDisclosure } from '@mantine/hooks';
 import { useBoolean } from 'ahooks';
 import { useForm } from 'react-hook-form';
 
-import { InformationBadge } from '../InformationBadge';
-import { UndoButton } from '../UndoButton';
+import { InformationBadge } from '../../../../_components/InformationBadge';
 import { memberFormIds as ids } from './MemberForm.ids';
 
 const useStyles = createStyles(theme => ({
@@ -272,13 +272,15 @@ export const MemberForm = ({
               </Group>
             ) : (
               <Group>
-                <UndoButton
-                  {...createTestAttr(ids.undoBtn)}
+                <DestructiveButton
+                  {...createTestAttr(ids.cancelBtn)}
                   onClick={() => {
                     reset();
                     onUndo?.();
                   }}
-                />
+                >
+                  {messages.actions.undoBtn}
+                </DestructiveButton>
                 <Button
                   key={2}
                   {...createTestAttr(ids.submitBtn)}

app/components/MemberList/MemberList.cy.tsx → app/Dashboard/Households/HouseholdDetail/_components/MemberList/MemberList.cy.tsx

@@ -41,7 +41,7 @@ describe('MemberList', () => {
 
     cy.findAllByTestId(memberFormIds.form)
       .eq(1)
-      .findByTestId(memberFormIds.undoBtn)
+      .findByTestId(memberFormIds.cancelBtn)
       .click();
 
     cy.findAllByTestId(memberFormIds.form).should('have.length', 2);

app/components/MemberList/MemberList.tsx → app/Dashboard/Households/HouseholdDetail/_components/MemberList/MemberList.tsx

@@ -1,11 +1,12 @@
 import { useMemberListQuery } from '@camp/data-layer';
+import { debug } from '@camp/debug';
 import { FullPageLoader, showNotification } from '@camp/design';
 import { errorMessages, messages } from '@camp/messages';
 import { Center, Group, Stack, Title } from '@mantine/core';
 import { useState } from 'react';
 
-import { MemberEmptyState } from '../MemberEmptyState';
 import { CreateMemberButton, MemberForm } from '../MemberForm';
+import { MemberEmptyState } from '../MemberForm/MemberEmptyState';
 
 interface Props {
   householdId: string;
@@ -20,6 +21,7 @@ export const MemberList = ({ householdId }: Props) => {
   });
   const member = data?.members;
   const isMemberEmpty = member?.length === 0 && newMembers.length === 0;
+  debug.trace('MemberList', member);
 
   const addNewMemberHandler = () => {
     setNewMembers(arr => [...arr, { id: Math.random() }]);

app/pages/Dashboard/Households/HouseholdEmptyState/HouseholdEmptyState.tsx → app/Dashboard/Households/HouseholdEmptyState/HouseholdEmptyState.tsx

@@ -3,7 +3,7 @@ import { PeopleIcon } from '@camp/icons';
 import { messages } from '@camp/messages';
 import { useMantineTheme } from '@mantine/core';
 
-import { CreateHouseholdButton } from '../CreateHousehold';
+import { CreateHouseholdButton } from '../_components/CreateHousehold';
 
 export const HouseholdEmptyState = () => {
   const theme = useMantineTheme();

app/pages/Dashboard/Households/HouseholdList/HouseholdList.tsx → app/Dashboard/Households/HouseholdList/HouseholdList.tsx

@@ -10,7 +10,7 @@ import { errorMessages, messages } from '@camp/messages';
 import { createTestAttr } from '@camp/test';
 import { isEmpty, isNull } from '@fullstacksjs/toolbox';
 
-import { CreateHouseholdButton } from '../CreateHousehold';
+import { CreateHouseholdButton } from '../_components/CreateHousehold';
 import { HouseholdEmptyState } from '../HouseholdEmptyState';
 import * as ids from './HouseholdList.ids';
 import { HouseholdTableRow } from './HouseholdTableRow';

app/pages/Dashboard/Households/HouseholdList/HouseholdTableRow.tsx → app/Dashboard/Households/HouseholdList/HouseholdTableRow.tsx

@@ -8,10 +8,10 @@ import { createTestAttr } from '@camp/test';
 import { isNull } from '@fullstacksjs/toolbox';
 import { Group } from '@mantine/core';
 
-import { InformationBadge } from '../../../../components/InformationBadge';
-import { SeverityBadge } from '../../../../components/SeverityBadge';
-import { openDeleteHouseholdModal } from '../DeleteHouseholdModal';
-import { HouseholdActionButton } from '../HouseholdActionButton';
+import { InformationBadge } from '../../_components/InformationBadge';
+import { SeverityBadge } from '../../_components/SeverityBadge';
+import { openDeleteHouseholdModal } from '../_components/DeleteHouseholdModal';
+import { HouseholdActionButton } from '../_components/HouseholdActionButton';
 import { householdRowIds as ids } from './HouseholdTableRow.ids';
 
 interface Props {

app/pages/Dashboard/Households/HouseholdsLayout.tsx → app/Dashboard/Households/HouseholdsLayout.tsx

@@ -1,7 +1,7 @@
 import { DashboardHeader } from '@camp/design';
 import { Outlet } from '@camp/router';
 
-import { CreateHouseholdButton } from './CreateHousehold';
+import { CreateHouseholdButton } from './_components/CreateHousehold';
 
 const outlet = <Outlet />;