fix: PR fixes

Author: pt-tsl

packages/components/.storybook/decorators/index.ts

@@ -1,2 +1,3 @@
 export { default as withTokenSetup } from './withTokenSetup'
 export { default as withProviders } from './withProviders'
+export { default as withMutationResolver } from './withMutationResolver'

packages/components/.storybook/decorators/withMutationResolver.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect } from 'react'
+
+import { createTestEnvironment } from '@baseapp-frontend/graphql'
+
+import type { StoryContext, StoryFn } from '@storybook/react'
+import { Observable, OperationDescriptor } from 'relay-runtime'
+import { MockPayloadGenerator } from 'relay-test-utils'
+import { MockResolvers } from 'relay-test-utils/lib/RelayMockPayloadGenerator'
+
+export type DynamicMockResolvers = (operation: OperationDescriptor) => MockResolvers
+
+const withMutationResolver = (Story: StoryFn, context: StoryContext) => {
+  const { environment, queueOperationResolver } = context.parameters
+    .relayMockEnvironment as ReturnType<typeof createTestEnvironment>
+
+  const mockResolvers = context.parameters.mockResolvers || undefined
+  const dynamicMockResolvers: DynamicMockResolvers =
+    context.parameters.dynamicMockResolvers || undefined
+  const mutationError: string = context.parameters.mutationError || undefined
+
+  useEffect(() => {
+    const originalExecuteMutation = environment.executeMutation
+
+    environment.executeMutation = (request) => {
+      if (!mutationError) {
+        if (dynamicMockResolvers) {
+          environment.mock.queueOperationResolver(() => {
+            return MockPayloadGenerator.generate(
+              request.operation,
+              dynamicMockResolvers(request.operation),
+            )
+          })
+        } else if (mockResolvers) {
+          environment.mock.queueOperationResolver(() => {
+            return MockPayloadGenerator.generate(request.operation, mockResolvers)
+          })
+        }
+      }
+
+      const observable = originalExecuteMutation.call(environment, request)
+
+      return Observable.create((sink) => {
+        if (mutationError) {
+          setTimeout(() => {
+            sink.error(new Error(mutationError))
+          }, 100)
+        } else {
+          observable.subscribe({
+            complete: () => {
+              setTimeout(() => {
+                sink.complete()
+              }, 100)
+            },
+          })
+        }
+      })
+    }
+
+    return () => {
+      environment.executeMutation = originalExecuteMutation
+    }
+  }, [environment, queueOperationResolver])
+
+  return <Story />
+}
+
+export default withMutationResolver

packages/components/modules/profiles/common/graphql/queries/ProfileSettingsRelayTest.ts

@@ -0,0 +1,9 @@
+import { graphql } from 'react-relay'
+
+export const ProfileSettingsRelayTest = graphql`
+  query ProfileSettingsRelayTestQuery @relay_test_operation {
+    profile: node(id: "test-id") {
+      ...ProfileComponentFragment
+    }
+  }
+`

packages/components/modules/profiles/web/ProfileSettingsComponent/__storybook__/index.tsx

@@ -0,0 +1,14 @@
+import { useLazyLoadQuery } from 'react-relay'
+
+import { ProfileSettingsRelayTestQuery as QueryType } from '../../../../../__generated__/ProfileSettingsRelayTestQuery.graphql'
+import { ProfileSettingsRelayTest } from '../../../common/graphql/queries/ProfileSettingsRelayTest'
+import ProfileSettingsComponent from '../index'
+import { ProfileSettingsComponentProps } from '../types'
+
+const ProfileSettingsComponentWithQuery = (props: ProfileSettingsComponentProps) => {
+  const profileRef = useLazyLoadQuery<QueryType>(ProfileSettingsRelayTest, {})
+
+  return <ProfileSettingsComponent {...props} profile={profileRef.profile} />
+}
+
+export default ProfileSettingsComponentWithQuery

packages/components/modules/profiles/web/ProfileSettingsComponent/__storybook__/mockResolver.ts

@@ -0,0 +1,30 @@
+export const mockResolvers = {
+  Node: () => ({
+    __typename: 'Profile',
+    id: '1',
+    name: 'Profile 1',
+    biography: 'Profile 1 biography',
+    image: null,
+    bannerImage: null,
+    canChange: true,
+    canDelete: true,
+    urlPath: {
+      path: '/profile/1',
+    },
+    owner: {
+      phoneNumber: '1234567890',
+    },
+  }),
+  Mutation: () => ({
+    profileUpdate: {
+      errors: null,
+    },
+  }),
+}
+
+export const mockResolversWithMutationError = {
+  ...mockResolvers,
+  Mutation: () => ({
+    profileUpdate: {},
+  }),
+}

packages/components/modules/profiles/web/ProfileSettingsComponent/__storybook__/stories.tsx

@@ -0,0 +1,45 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+
+import { withMutationResolver } from '../../../../../.storybook/decorators'
+import { ProfileSettingsComponentProps } from '../types'
+import ProfileSettingsComponentWithQuery from './index'
+import { mockResolvers, mockResolversWithMutationError } from './mockResolver'
+
+export default {
+  title: '@baseapp-frontend-template / Pages/User/Settings/AccountSettings/AccountProfile',
+  component: ProfileSettingsComponentWithQuery,
+  decorators: [withMutationResolver],
+  args: {
+    profile: {},
+  },
+  argTypes: {
+    profile: {
+      description: 'Graphql reference to extract the Profile fragment.',
+      table: {
+        type: {
+          summary: 'AccountProfileFragment$key | null',
+        },
+      },
+      control: false,
+    },
+  },
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta
+
+const Template: StoryFn = (args) => <ProfileSettingsComponentWithQuery {...args} />
+
+type Story = StoryObj<ProfileSettingsComponentProps>
+
+export const Default: Story = Template.bind({})
+Default.storyName = 'AccountProfile'
+Default.parameters = {
+  mockResolvers,
+}
+
+export const ErrorStatus: Story = Template.bind({})
+ErrorStatus.storyName = 'AccountProfile with Error'
+ErrorStatus.parameters = {
+  mockResolvers: mockResolversWithMutationError,
+}

packages/components/modules/profiles/web/profile-popover/CurrentProfile/index.tsx

@@ -26,7 +26,7 @@ const CurrentProfile: FC = () => {
 
         {profile?.urlPath && (
           <Typography variant="body2" sx={{ color: 'text.secondary' }} noWrap>
-            {profile.urlPath.replace('/', '')}
+            {profile?.urlPath?.replace('/', '')}
           </Typography>
         )}
       </Box>

packages/design-system/components/web/inputs/PhoneNumberField/CountrySelect/index.tsx

@@ -1,10 +1,16 @@
 import { FC } from 'react'
 
 import { MenuItem, Typography } from '@mui/material'
-import { CountryIso2, FlagImage, defaultCountries, parseCountry } from 'react-international-phone'
+import {
+  CountryData,
+  CountryIso2,
+  FlagImage,
+  defaultCountries,
+  parseCountry,
+} from 'react-international-phone'
 
 import { CountrySelectProps } from '../types'
-import { ContryTitle, Select as StyledSelect } from './styled'
+import { CountryTitle, Select as StyledSelect } from './styled'
 
 export const CountrySelect: FC<CountrySelectProps> = ({
   country,
@@ -33,12 +39,12 @@ export const CountrySelect: FC<CountrySelectProps> = ({
     onChange={(event) => setCountry(event.target.value as CountryIso2)}
     renderValue={(value) => <FlagImage iso2={value as CountryIso2} />}
   >
-    {defaultCountries.map((c: any) => {
+    {defaultCountries.map((c: CountryData) => {
       const defaultCountry = parseCountry(c)
       return (
         <MenuItem {...optionProps} key={defaultCountry.iso2} value={defaultCountry.iso2}>
           <FlagImage iso2={defaultCountry.iso2} />
-          <ContryTitle {...countryNameProps}>{defaultCountry.name}</ContryTitle>
+          <CountryTitle {...countryNameProps}>{defaultCountry.name}</CountryTitle>
           <Typography {...countryDialCodeProps}>+{defaultCountry.dialCode}</Typography>
         </MenuItem>
       )

packages/design-system/components/web/inputs/PhoneNumberField/CountrySelect/styled.tsx

@@ -23,7 +23,7 @@ export const Select = styled((props) => <MUISelect {...props} />)<SelectProps>((
   },
 }))
 
-export const ContryTitle = styled((props) => <Typography {...props} />)<TypographyProps>(
+export const CountryTitle = styled((props) => <Typography {...props} />)<TypographyProps>(
   ({ theme }) => ({
     margin: theme.spacing(0, 1),
   }),