chore(ui): utilise le composant react-dsfr

#1618 (closed)

Meilleur typage, des fonctions utilitaires vraiment pratiques, trop bien !

https://github.com/codegouvfr/react-dsfr/issues/368

packages/ui/src/components/_common/dsfr-perimetre-table.tsx

@@ -31,11 +31,11 @@ const geoJsonToArray = (perimetre: FeatureCollectionPoints | FeatureCollectionFo
     const x_deg = toDegresMinutes(feature.geometry.coordinates[0])
     const y_deg = toDegresMinutes(feature.geometry.coordinates[1])
 
-    let foragesProperties
+    let foragesProperties: TableRow<string>['columns'] = {}
     if ('profondeur' in feature.properties) {
       foragesProperties = {
-        profondeur: { value: `${feature.properties.profondeur}` },
-        type: { value: capitalize(feature.properties.type) },
+        profondeur: { type: 'text', value: `${feature.properties.profondeur}` },
+        type: { type: 'text', value: capitalize(feature.properties.type) },
       }
     }
 
@@ -43,12 +43,12 @@ const geoJsonToArray = (perimetre: FeatureCollectionPoints | FeatureCollectionFo
       id: `${index}`,
       link: null,
       columns: {
-        description: { value: feature.properties.description ?? '' },
-        nom: { value: feature.properties.nom ?? '' },
-        x: { value: `${feature.geometry.coordinates[0]}` },
-        y: { value: `${feature.geometry.coordinates[1]}` },
-        x_deg: { value: `${x_deg.degres}°${Intl.NumberFormat('fr-FR').format(x_deg.minutes)}'` },
-        y_deg: { value: `${y_deg.degres}°${Intl.NumberFormat('fr-FR').format(y_deg.minutes)}'` },
+        description: { type: 'text', value: feature.properties.description ?? '' },
+        nom: { type: 'text', value: feature.properties.nom ?? '' },
+        x: { type: 'text', value: `${feature.geometry.coordinates[0]}` },
+        y: { type: 'text', value: `${feature.geometry.coordinates[1]}` },
+        x_deg: { type: 'text', value: `${x_deg.degres}°${Intl.NumberFormat('fr-FR').format(x_deg.minutes)}'` },
+        y_deg: { type: 'text', value: `${y_deg.degres}°${Intl.NumberFormat('fr-FR').format(y_deg.minutes)}'` },
         ...foragesProperties,
       },
     }
@@ -82,7 +82,7 @@ const TablePoints: FunctionalComponent<Pick<Props, 'geo_systeme_id' | 'geojson_o
       id: `${props.maxRows + 1}`,
       link: null,
       columns: columns.reduce<Record<string, TextColumnData>>((acc, { id }) => {
-        acc[id] = { value: '...' }
+        acc[id] = { type: 'text', value: '...' }
 
         return acc
       }, {}),
@@ -91,7 +91,7 @@ const TablePoints: FunctionalComponent<Pick<Props, 'geo_systeme_id' | 'geojson_o
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <TableAuto caption={props.caption} class="fr-mb-1w" columns={columns} rows={rowsToDisplay} initialSort="noSort" />
+      <TableAuto caption={{ value: props.caption, visible: true }} class="fr-mb-1w" columns={columns} rows={rowsToDisplay} initialSort="noSort" />
 
       <div style={{ display: 'flex' }}>
         {isNotNullNorUndefined(props.surface) ? <div class="fr-text--md">Surface : {props.surface} Km²</div> : null}
@@ -129,7 +129,7 @@ const TableForages: FunctionalComponent<NotNullableKeys<Pick<Props, 'geo_systeme
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <TableAuto caption="Forages" class="fr-mb-1w" columns={columns} rows={currentRows} initialSort="noSort" />
+      <TableAuto caption={{ value: 'Forages', visible: true }} class="fr-mb-1w" columns={columns} rows={currentRows} initialSort="noSort" />
 
       <DsfrLink
         style={{ alignSelf: 'end' }}