refactor(champ): update champ carte

app/components/editable_champ/carte_component.rb

@@ -4,10 +4,14 @@ class EditableChamp::CarteComponent < EditableChamp::EditableChampBaseComponent
     :fieldset
   end
 
-  def initialize(**args)
-    super(**args)
-
-    @autocomplete_component = EditableChamp::ComboSearchComponent.new(**args)
+  def react_props
+    {
+      feature_collection: @champ.to_feature_collection,
+      champ_id: @champ.input_id,
+      url: update_path,
+      adresse_source: data_sources_data_source_adresse_path,
+      options: @champ.render_options
+    }
   end
 
   def update_path

app/components/editable_champ/carte_component/carte_component.html.haml

@@ -1,14 +1,6 @@
 .fr-fieldset__element
-  = render @autocomplete_component
-
-  = react_component("MapEditor",
-    { featureCollection: @champ.to_feature_collection,
-    champId: @champ.input_id,
-    url: update_path,
-    options: @champ.render_options,
-    autocompleteAnnounceTemplateId: @autocomplete_component.announce_template_id,
-    autocompleteScreenReaderInstructions: t("combo_search_component.screen_reader_instructions") },
-    {class: 'width-100'})
+  %react-fragment.width-100
+    = render ReactComponent.new "MapEditor", **react_props
 
   .geo-areas{ id: dom_id(@champ, :geo_areas) }
     = render Dossiers::GeoAreasComponent.new(champ: @champ, editing: true)

app/javascript/components/MapEditor/components/AddressInput.tsx

@@ -1,33 +1,33 @@
-import React from 'react';
 import { fire } from '@utils';
 import type { FeatureCollection } from 'geojson';
 
-import ComboAdresseSearch from '../../ComboAdresseSearch';
-import { ComboSearchProps } from '~/components/ComboSearch';
+import { RemoteComboBox } from '../../ComboBox';
 
-export function AddressInput(
-  comboProps: Pick<
-    ComboSearchProps,
-    'screenReaderInstructions' | 'announceTemplateId'
-  > & { featureCollection: FeatureCollection; champId: string }
-) {
+export function AddressInput({
+  source,
+  featureCollection,
+  champId
+}: {
+  source: string;
+  featureCollection: FeatureCollection;
+  champId: string;
+}) {
   return (
-    <div
-      style={{
-        marginBottom: '10px'
-      }}
-    >
-      <ComboAdresseSearch
-        className="fr-input fr-mt-1w"
-        allowInputValues={false}
-        id={comboProps.champId}
-        onChange={(_, feature) => {
-          fire(document, 'map:zoom', {
-            featureCollection: comboProps.featureCollection,
-            feature
-          });
+    <div style={{ marginBottom: '10px' }}>
+      <RemoteComboBox
+        minimumInputLength={2}
+        id={champId}
+        loader={source}
+        label="Rechercher une Adresse"
+        description="Saisissez au moins 2 caractères"
+        onChange={(item) => {
+          if (item && item.data) {
+            fire(document, 'map:zoom', {
+              featureCollection,
+              feature: item.data
+            });
+          }
         }}
-        {...comboProps}
       />
     </div>
   );

app/javascript/components/MapEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { CursorClickIcon } from '@heroicons/react/outline';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
@@ -12,21 +12,18 @@ import { AddressInput } from './components/AddressInput';
 import { PointInput } from './components/PointInput';
 import { ImportFileInput } from './components/ImportFileInput';
 import { FlashMessage } from '../shared/FlashMessage';
-import { ComboSearchProps } from '../ComboSearch';
 
 export default function MapEditor({
   featureCollection: initialFeatureCollection,
   url,
+  adresseSource,
   options,
-  autocompleteAnnounceTemplateId,
-  autocompleteScreenReaderInstructions,
   champId
 }: {
   featureCollection: FeatureCollection;
   url: string;
+  adresseSource: string;
   options: { layers: string[] };
-  autocompleteAnnounceTemplateId: ComboSearchProps['announceTemplateId'];
-  autocompleteScreenReaderInstructions: ComboSearchProps['screenReaderInstructions'];
   champId: string;
 }) {
   const [cadastreEnabled, setCadastreEnabled] = useState(false);
@@ -41,15 +38,10 @@ export default function MapEditor({
       {error && <FlashMessage message={error} level="alert" fixed={true} />}
 
       <ImportFileInput featureCollection={featureCollection} {...actions} />
-      <label className="fr-label" htmlFor={champId}>
-        Rechercher une Adresse
-        <span className="fr-hint-text">Saisissez au moins 2 caractères</span>
-      </label>
       <AddressInput
+        source={adresseSource}
         champId={champId}
         featureCollection={featureCollection}
-        screenReaderInstructions={autocompleteScreenReaderInstructions}
-        announceTemplateId={autocompleteAnnounceTemplateId}
       />
 
       <MapLibre layers={options.layers}>

app/views/shared/champs/carte/_show.html.haml

@@ -1,4 +1,5 @@
 - if champ.geometry?
-  = react_component("MapReader", { featureCollection: champ.to_feature_collection, options: champ.render_options } )
+  %react-fragment.width-100
+    = render ReactComponent.new "MapReader", feature_collection: champ.to_feature_collection, options: champ.render_options
   .geo-areas
     = render Dossiers::GeoAreasComponent.new(champ:, editing: false)