Feature/edit name from show page (#806)

* Enable company name edition from page

* Enable editing persons as well

* Add styling for titles

* Better manage style with inheritance

* Add stories for poeple editable fields

* Remove failing test

* Revert "Remove failing test"

This reverts commit 02cdeeba64276a26f93cf4af94f5857e47d36fff.

* Fix test

* Update name

* Fix location

* Rename tests

* Fix stories

front/src/modules/people/components/__stories__/PeopleCompanyEditableField.stories.tsx

@@ -0,0 +1,22 @@
+import { BrowserRouter } from 'react-router-dom';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { mockedPeopleData } from '~/testing/mock-data/people';
+
+import { PeopleCompanyEditableField } from '../../editable-field/components/PeopleCompanyEditableField';
+
+const meta: Meta<typeof PeopleCompanyEditableField> = {
+  title: 'Modules/People/EditableFields/PeopleCompanyEditableField',
+  component: PeopleCompanyEditableField,
+};
+
+export default meta;
+type Story = StoryObj<typeof PeopleCompanyEditableField>;
+
+export const Default: Story = {
+  render: () => (
+    <BrowserRouter>
+      <PeopleCompanyEditableField people={mockedPeopleData[0]} />
+    </BrowserRouter>
+  ),
+};

front/src/modules/people/components/__stories__/PeopleFullNameEditableField.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { mockedPeopleData } from '~/testing/mock-data/people';
+
+import { PeopleFullNameEditableField } from '../../editable-field/components/PeopleFullNameEditableField';
+
+const meta: Meta<typeof PeopleFullNameEditableField> = {
+  title: 'Modules/People/EditableFields/PeopleFullNameEditableField',
+  component: PeopleFullNameEditableField,
+};
+
+export default meta;
+type Story = StoryObj<typeof PeopleFullNameEditableField>;
+
+export const Default: Story = {
+  render: () => <PeopleFullNameEditableField people={mockedPeopleData[0]} />,
+};

front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+
+import { EditableField } from '@/ui/editable-field/components/EditableField';
+import { FieldContext } from '@/ui/editable-field/states/FieldContext';
+import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { Person, useUpdateOnePersonMutation } from '~/generated/graphql';
+
+import { InplaceInputDoubleText } from '../../../ui/inplace-input/components/InplaceInputDoubleText';
+
+type OwnProps = {
+  people: Pick<Person, 'id' | 'firstName' | 'lastName'>;
+};
+
+export function PeopleFullNameEditableField({ people }: OwnProps) {
+  const [internalValueFirstName, setInternalValueFirstName] = useState(
+    people.firstName,
+  );
+  const [internalValueLastName, setInternalValueLastName] = useState(
+    people.lastName,
+  );
+
+  const [updatePeople] = useUpdateOnePersonMutation();
+
+  useEffect(() => {
+    setInternalValueFirstName(people.firstName);
+    setInternalValueLastName(people.lastName);
+  }, [people.firstName, people.lastName]);
+
+  async function handleChange(
+    newValueFirstName: string,
+    newValueLastName: string,
+  ) {
+    setInternalValueFirstName(newValueFirstName);
+    setInternalValueLastName(newValueLastName);
+  }
+
+  async function handleSubmit() {
+    await updatePeople({
+      variables: {
+        where: {
+          id: people.id,
+        },
+        data: {
+          firstName: internalValueFirstName ?? '',
+          lastName: internalValueLastName ?? '',
+        },
+      },
+    });
+  }
+
+  async function handleCancel() {
+    setInternalValueFirstName(people.firstName);
+    setInternalValueLastName(people.lastName);
+  }
+
+  return (
+    <RecoilScope SpecificContext={FieldContext}>
+      <EditableField
+        onSubmit={handleSubmit}
+        onCancel={handleCancel}
+        editModeContent={
+          <InplaceInputDoubleText
+            firstValuePlaceholder={'First name'}
+            secondValuePlaceholder={'Last name'}
+            firstValue={internalValueFirstName ?? ''}
+            secondValue={internalValueLastName ?? ''}
+            onChange={handleChange}
+          />
+        }
+        displayModeContent={`${internalValueFirstName}  ${internalValueLastName}`}
+        isDisplayModeContentEmpty={
+          !(internalValueFirstName !== '') && !(internalValueLastName !== '')
+        }
+      />
+    </RecoilScope>
+  );
+}