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/_ui/table-auto.tsx

@@ -96,63 +96,61 @@ export const TableAuto = defineComponent<Props>(props => {
   }
 
   return () => (
-    <div style={{ overflowX: 'auto' }}>
-      <div class={[fr.cx('fr-table'), fr.cx('fr-table--no-scroll'), props.caption.visible ? null : fr.cx('fr-table--no-caption')]}>
-        <div class={[fr.cx('fr-table__wrapper')]} style={{ width: 'auto' }}>
-          <div class={[fr.cx('fr-table__container')]}>
-            <div class={[fr.cx('fr-table__content')]}>
-              <table style={{ display: 'table', width: '100%' }}>
-                <caption>{props.caption.value}</caption>
-                <thead>
-                  <tr>
-                    {props.columns.map(col => (
-                      <th key={col.id} scope="col" class={[...(col.class ?? []), 'nowrap']}>
-                        {col.noSort !== undefined && col.noSort ? (
-                          <div class="fr-text--md">{col.contentTitle === '' ? '-' : col.contentTitle}</div>
-                        ) : sort.value !== null && sort.value.colonne === col.id ? (
-                          <a
-                            class={['fr-link', 'fr-link--icon-right', sort.value.ordre === 'asc' ? 'fr-icon-arrow-down-fill' : 'fr-icon-arrow-up-fill']}
-                            onClick={handleChangeCurrentColonne}
-                            title={sort.value.ordre === 'asc' ? `Trier par la colonne ${col.contentTitle} par ordre descendant` : `Trier par la colonne ${col.contentTitle} par ordre ascendant`}
-                            aria-label={sort.value.ordre === 'asc' ? `Trier par la colonne ${col.contentTitle} par ordre descendant` : `Trier par la colonne ${col.contentTitle} par ordre ascendant`}
-                            href="#!"
-                          >
-                            {col.contentTitle}
-                          </a>
+    <div class={[fr.cx('fr-table'), fr.cx('fr-table--no-scroll'), props.caption.visible ? null : fr.cx('fr-table--no-caption')]}>
+      <div class={[fr.cx('fr-table__wrapper')]} style={{ width: 'auto' }}>
+        <div class={[fr.cx('fr-table__container')]}>
+          <div class={[fr.cx('fr-table__content')]}>
+            <table style={{ display: 'table', width: '100%' }}>
+              <caption>{props.caption.value}</caption>
+              <thead>
+                <tr>
+                  {props.columns.map(col => (
+                    <th key={col.id} scope="col" class={[...(col.class ?? []), 'nowrap']}>
+                      {col.noSort !== undefined && col.noSort ? (
+                        <div class="fr-text--md">{col.contentTitle === '' ? '-' : col.contentTitle}</div>
+                      ) : sort.value !== null && sort.value.colonne === col.id ? (
+                        <a
+                          class={['fr-link', 'fr-link--icon-right', sort.value.ordre === 'asc' ? 'fr-icon-arrow-down-fill' : 'fr-icon-arrow-up-fill']}
+                          onClick={handleChangeCurrentColonne}
+                          title={sort.value.ordre === 'asc' ? `Trier par la colonne ${col.contentTitle} par ordre descendant` : `Trier par la colonne ${col.contentTitle} par ordre ascendant`}
+                          aria-label={sort.value.ordre === 'asc' ? `Trier par la colonne ${col.contentTitle} par ordre descendant` : `Trier par la colonne ${col.contentTitle} par ordre ascendant`}
+                          href="#!"
+                        >
+                          {col.contentTitle}
+                        </a>
+                      ) : (
+                        <a
+                          class={['fr-link']}
+                          onClick={handleChangeNewColonne(col.id)}
+                          title={`Trier par la colonne ${col.contentTitle}`}
+                          aria-label={`Trier par la colonne ${col.contentTitle}`}
+                          href="#!"
+                        >
+                          {col.contentTitle === '' ? '-' : col.contentTitle}
+                        </a>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {myRows.map(row => (
+                  <tr key={row.id} class={row.class}>
+                    {props.columns.map((col, index) => (
+                      <td key={col.id} class={[...(col.class ?? [])]}>
+                        {index === 0 && row.link !== null ? (
+                          <router-link class="fr-link" to={row.link}>
+                            <DisplayColumn data={row.columns[col.id]} />
+                          </router-link>
                         ) : (
-                          <a
-                            class={['fr-link']}
-                            onClick={handleChangeNewColonne(col.id)}
-                            title={`Trier par la colonne ${col.contentTitle}`}
-                            aria-label={`Trier par la colonne ${col.contentTitle}`}
-                            href="#!"
-                          >
-                            {col.contentTitle === '' ? '-' : col.contentTitle}
-                          </a>
+                          <DisplayColumn data={row.columns[col.id]} />
                         )}
-                      </th>
+                      </td>
                     ))}
                   </tr>
-                </thead>
-                <tbody>
-                  {myRows.map(row => (
-                    <tr key={row.id} class={row.class}>
-                      {props.columns.map((col, index) => (
-                        <td key={col.id} class={[...(col.class ?? [])]}>
-                          {index === 0 && row.link !== null ? (
-                            <router-link class="fr-link" to={row.link}>
-                              <DisplayColumn data={row.columns[col.id]} />
-                            </router-link>
-                          ) : (
-                            <DisplayColumn data={row.columns[col.id]} />
-                          )}
-                        </td>
-                      ))}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
+                ))}
+              </tbody>
+            </table>
           </div>
         </div>
       </div>