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/companies/editable-field/components/CompanyNameEditableField.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+
+import { EditableField } from '@/ui/editable-field/components/EditableField';
+import { FieldContext } from '@/ui/editable-field/states/FieldContext';
+import { InplaceInputText } from '@/ui/inplace-input/components/InplaceInputText';
+import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql';
+
+type OwnProps = {
+  company: Pick<Company, 'id' | 'name'>;
+};
+
+export function CompanyNameEditableField({ company }: OwnProps) {
+  const [internalValue, setInternalValue] = useState(company.name);
+
+  const [updateCompany] = useUpdateOneCompanyMutation();
+
+  useEffect(() => {
+    setInternalValue(company.name);
+  }, [company.name]);
+
+  async function handleChange(newValue: string) {
+    setInternalValue(newValue);
+  }
+
+  async function handleSubmit() {
+    await updateCompany({
+      variables: {
+        where: {
+          id: company.id,
+        },
+        data: {
+          name: internalValue ?? '',
+        },
+      },
+    });
+  }
+
+  async function handleCancel() {
+    setInternalValue(company.name);
+  }
+
+  return (
+    <RecoilScope SpecificContext={FieldContext}>
+      <EditableField
+        onSubmit={handleSubmit}
+        onCancel={handleCancel}
+        editModeContent={
+          <InplaceInputText
+            placeholder={'Name'}
+            autoFocus
+            value={internalValue}
+            onChange={(newValue: string) => {
+              handleChange(newValue);
+            }}
+          />
+        }
+        displayModeContent={internalValue ?? ''}
+        isDisplayModeContentEmpty={!(internalValue !== '')}
+      />
+    </RecoilScope>
+  );
+}