feat(redmine 1291405): fix types errors

packages/react-front-kit/src/Form/AddressAutocompleteFields/AddressAutocompleteFields.mock.ts

@@ -1,22 +1,16 @@
 import type { IAdressFields } from './AddressAutocompleteFields';
+import type { IAddressGouvData } from '../FetchAutocompleteField/FetchAutoCompleteField.mock';
+import type { IValue } from '../FetchAutocompleteField/FetchAutocompleteField';
 
-export function onOptionSubmitMock(value: {
-  value: {
-    properties?: {
-      city?: string;
-      housenumber?: string;
-      number?: string;
-      postcode?: string;
-      street?: string;
-    };
-  };
-}): IAdressFields {
+export function onOptionSubmitMock(
+  value: IValue<IAddressGouvData>,
+): IAdressFields {
   const address = value.value.properties;
   return {
-    city: address?.city,
+    city: address.city,
     country: 'France',
-    number: address?.housenumber,
-    postCode: address?.postcode,
-    street: address?.street,
+    number: address.housenumber,
+    postCode: address.postcode,
+    street: address.street,
   };
 }

packages/react-front-kit/src/Form/AddressAutocompleteFields/AddressAutocompleteFields.stories.tsx

@@ -1,3 +1,4 @@
+import type { IAddressGouvData } from '../FetchAutocompleteField/FetchAutoCompleteField.mock';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { action } from '@storybook/addon-actions';
@@ -8,20 +9,18 @@ import { AddressAutocompleteFields as Cmp } from './AddressAutocompleteFields';
 import { onOptionSubmitMock } from './AddressAutocompleteFields.mock';
 
 const meta = {
-  component: Cmp,
+  component: Cmp<IAddressGouvData>,
   tags: ['autodocs'],
   title: '3-custom/Form/AddressAutocompleteFields',
-} satisfies Meta<typeof Cmp>;
+} satisfies Meta<typeof Cmp<IAddressGouvData>>;
 
 export default meta;
 type IStory = StoryObj<typeof meta>;
 
 export const AddressAutocompleteFields: IStory = {
   args: {
-    // @ts-expect-error-type
     onFetchData: getDataAddressGouvMock,
     onFieldsValuesChange: action('value change'),
-    // @ts-expect-error-type
     onOptionSubmit: onOptionSubmitMock,
   },
 };

packages/react-front-kit/src/Form/AddressAutocompleteFields/AddressAutocompleteFields.tsx

@@ -1,5 +1,8 @@
 'use client';
-import type { IFetchAutocompleteFieldProps } from '../FetchAutocompleteField/FetchAutocompleteField';
+import type {
+  IFetchAutocompleteFieldProps,
+  IValue,
+} from '../FetchAutocompleteField/FetchAutocompleteField';
 import type { TextInputProps } from '@mantine/core';
 import type { ReactElement } from 'react';
 
@@ -18,51 +21,67 @@ export interface IAdressFields {
   street?: string;
 }
 
+export interface ICity {
+  description?: string;
+  label?: string;
+  placeholder?: string;
+}
+export interface ICountry {
+  description?: string;
+  label?: string;
+  placeholder?: string;
+}
+export interface INumber {
+  description?: string;
+  label?: string;
+  placeholder?: string;
+}
+export interface IPostcode {
+  description?: string;
+  label?: string;
+  placeholder?: string;
+}
+
+export interface IStreet {
+  description?: string;
+  label?: string;
+  placeholder?: string;
+}
+
 export interface IAddressAutocompleteFieldsProps<T>
   extends Omit<IFetchAutocompleteFieldProps<T>, 'onOptionSubmit'> {
-  cityDescription?: string;
-  cityLabel?: string;
-  cityPlaceholder?: string;
-  countryDescription?: string;
-  countryLabel?: string;
-  countryPlaceholder?: string;
-  numberDescription?: string;
-  numberLabel?: string;
-  numberPlaceholder?: string;
+  city?: ICity;
+  country?: ICountry;
+  number?: INumber;
   onFieldsValuesChange?: (value: IAdressFields) => void;
-  onOptionSubmit: (value: unknown) => IAdressFields;
-  postCodeDescription?: string;
-  postCodeLabel?: string;
-  postCodePlaceholder?: string;
-  streetDescription?: string;
-  streetLabel?: string;
-  streetPlaceholder?: string;
+  onOptionSubmit: (value: IValue<T>) => IAdressFields;
+  postCode?: IPostcode;
+  street?: IStreet;
   textInputProps?: TextInputProps;
 }
 
 export function AddressAutocompleteFields<T>(
   props: IAddressAutocompleteFieldsProps<T>,
 ): ReactElement {
   const {
-    streetDescription,
-    streetLabel = 'Street Name',
-    streetPlaceholder = 'Pall Mall',
-    cityDescription,
-    cityLabel = 'City',
-    cityPlaceholder = 'London',
-    countryDescription,
-    countryLabel = 'Country',
-    countryPlaceholder = 'United Kingdom',
-    numberDescription,
-    numberLabel = 'Street number',
-    numberPlaceholder = '89',
+    street = {
+      label: 'Street Name',
+      placeholder: 'Pall Mall',
+    },
+    city = {
+      label: 'City',
+      placeholder: 'London',
+    },
+    country = { label: 'Country', placeholder: 'United Kingdom' },
+    number = { label: 'Street number', placeholder: '89' },
     onOptionSubmit,
     onFieldsValuesChange,
-    postCodeDescription,
-    postCodeLabel = 'Postal code',
-    postCodePlaceholder = 'SW1Y 5HS',
+    postCode = {
+      label: 'Postal code',
+      placeholder: 'SW1Y 5HS',
+    },
     textInputProps,
-    ...FetchAutocompleteFieldProps
+    ...fetchAutocompleteFieldProps
   } = props;
 
   const [streetValue, setStreetValue] = useState('');
@@ -71,13 +90,13 @@ export function AddressAutocompleteFields<T>(
   const [postCodeValue, setPostCodeValue] = useState('');
   const [countryValue, setCountryValue] = useState('');
 
-  function onOptionSubmitHandle(value: unknown): void {
+  function onOptionSubmitHandle(value: IValue<T>): void {
     const addressFields = onOptionSubmit(value);
-    addressFields.street && setStreetValue(addressFields.street);
-    addressFields.number && setNumberValue(addressFields.number);
-    addressFields.city && setCityValue(addressFields.city);
-    addressFields.postCode && setPostCodeValue(addressFields.postCode);
-    addressFields.country && setCountryValue(addressFields.country);
+    setStreetValue(addressFields.street ?? '');
+    setNumberValue(addressFields.number ?? '');
+    setCityValue(addressFields.city ?? '');
+    setPostCodeValue(addressFields.postCode ?? '');
+    setCountryValue(addressFields.country ?? '');
   }
 
   function onChangeHandle(label: string, value: string): void {
@@ -86,53 +105,53 @@ export function AddressAutocompleteFields<T>(
 
   const inputs = [
     {
-      description: streetDescription,
-      label: streetLabel,
+      description: street.description,
+      label: street.label,
       onchange: (e: React.ChangeEvent<HTMLInputElement>) => {
         setStreetValue(e.target.value);
         onChangeHandle('street', e.target.value);
       },
-      placeholder: streetPlaceholder,
+      placeholder: street.placeholder,
       value: streetValue,
     },
     {
-      description: numberDescription,
-      label: numberLabel,
+      description: number.description,
+      label: number.label,
       onchange: (e: React.ChangeEvent<HTMLInputElement>) => {
         setNumberValue(e.target.value);
         onChangeHandle('number', e.target.value);
       },
-      placeholder: numberPlaceholder,
+      placeholder: number.placeholder,
       value: numberValue,
     },
     {
-      description: cityDescription,
-      label: cityLabel,
+      description: city.description,
+      label: city.label,
       onchange: (e: React.ChangeEvent<HTMLInputElement>) => {
         setCityValue(e.target.value);
         onChangeHandle('city', e.target.value);
       },
-      placeholder: cityPlaceholder,
+      placeholder: city.placeholder,
       value: cityValue,
     },
     {
-      description: postCodeDescription,
-      label: postCodeLabel,
+      description: postCode.description,
+      label: postCode.label,
       onchange: (e: React.ChangeEvent<HTMLInputElement>) => {
         setPostCodeValue(e.target.value);
         onChangeHandle('postCode', e.target.value);
       },
-      placeholder: postCodePlaceholder,
+      placeholder: postCode.placeholder,
       value: postCodeValue,
     },
     {
-      description: countryDescription,
-      label: countryLabel,
+      description: country.description,
+      label: country.label,
       onchange: (e: React.ChangeEvent<HTMLInputElement>) => {
         setCountryValue(e.target.value);
         onChangeHandle('country', e.target.value);
       },
-      placeholder: countryPlaceholder,
+      placeholder: country.placeholder,
       value: countryValue,
     },
   ];
@@ -141,7 +160,7 @@ export function AddressAutocompleteFields<T>(
     <div>
       <FetchAutocompleteField
         onOptionSubmit={(value) => onOptionSubmitHandle(value)}
-        {...FetchAutocompleteFieldProps}
+        {...fetchAutocompleteFieldProps}
       />
       <div className={classes.inputContainer}>
         {inputs.map((input) => {

packages/react-front-kit/src/Form/AddressGouvAutocompleteField/AddressGouvAutocompleteField.tsx

@@ -9,17 +9,17 @@ import type { ReactElement } from 'react';
 
 import { FetchAutocompleteField } from '../FetchAutocompleteField/FetchAutocompleteField';
 
-export interface IAddressAutocompleteFieldProps<F>
-  extends Omit<IFetchAutocompleteFieldProps<F>, 'onFetchData'> {
+export interface IAddressAutocompleteFieldProps
+  extends Omit<IFetchAutocompleteFieldProps<IAddressGouvData>, 'onFetchData'> {
   lat?: string;
   limit?: number;
   lon?: string;
-  onFetchData?: (value: string) => Promise<IValue<F>[]>;
+  onFetchData?: (value: string) => Promise<IValue<IAddressGouvData>[]>;
   type?: string;
 }
 
-export function AddressGouvAutocompleteField<F>(
-  props: IAddressAutocompleteFieldProps<F>,
+export function AddressGouvAutocompleteField(
+  props: IAddressAutocompleteFieldProps,
 ): ReactElement {
   const {
     lat = '',
@@ -28,7 +28,9 @@ export function AddressGouvAutocompleteField<F>(
     type = '',
     ...fetchAutocompleteFieldProps
   } = props;
-  async function getDataAddressGouv(value: string): Promise<IValue<unknown>[]> {
+  async function getDataAddressGouv(
+    value: string,
+  ): Promise<IValue<IAddressGouvData>[]> {
     const response = await fetch(
       `https://api-Adresse.data.gouv.fr/search/?q=${encodeURIComponent(
         value,

packages/react-front-kit/src/Form/FetchAutocompleteField/AddressGouvApi.stories.tsx

@@ -0,0 +1,23 @@
+import type { IAddressGouvData } from './FetchAutoCompleteField.mock';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { action } from '@storybook/addon-actions';
+
+import { getDataAddressGouvMock } from './FetchAutoCompleteField.mock';
+import { FetchAutocompleteField as Cmp } from './FetchAutocompleteField';
+
+const meta = {
+  component: Cmp<IAddressGouvData>,
+  tags: ['autodocs'],
+  title: '3-custom/Form/FetchAutocompleteField',
+} satisfies Meta<typeof Cmp<IAddressGouvData>>;
+
+export default meta;
+type IStory = StoryObj<typeof meta>;
+
+export const FieldWithAddressGouvApi: IStory = {
+  args: {
+    onFetchData: getDataAddressGouvMock,
+    onOptionSubmit: action('location'),
+  },
+};

packages/react-front-kit/src/Form/FetchAutocompleteField/FetchAutoCompleteField.mock.tsx

@@ -1,29 +1,40 @@
+import type { IValue } from './FetchAutocompleteField';
+
 /* eslint-disable @typescript-eslint/naming-convention */
 export interface IOpenStreetMapData {
   display_name: string;
 }
 
 export interface IAddressGouvData {
-  properties: { label: string };
+  properties: {
+    city?: string;
+    housenumber?: string;
+    label: string;
+    number?: string;
+    postcode?: string;
+    street?: string;
+  };
 }
 
 export async function getDataOpenStreetMapMock(
   value: string,
-): Promise<unknown> {
+): Promise<IValue<IOpenStreetMapData>[]> {
   const response = await fetch(
     `https://nominatim.openstreetmap.org/search.php?q=${encodeURIComponent(
       value,
     )}&format=jsonv2&addressdetails=1&countrycodes=fr&accept-language=fr&limit=10&dedupe=1`,
   );
   const data: IOpenStreetMapData[] = await response.json();
-  const result = data.map((element) => {
+  const result: IValue<IOpenStreetMapData>[] = data.map((element) => {
     return { label: element.display_name, value: element };
   });
 
   return result;
 }
 
-export async function getDataAddressGouvMock(value: string): Promise<unknown> {
+export async function getDataAddressGouvMock(
+  value: string,
+): Promise<IValue<IAddressGouvData>[]> {
   const response = await fetch(
     `https://api-Adresse.data.gouv.fr/search/?q=${encodeURIComponent(
       value,