Finish migrate form-sections

frontend/src/components/atoms/Alert/index.tsx

@@ -11,7 +11,7 @@ export enum AlertType {
 
 type Props = {
   type?: AlertType;
-  title?: string;
+  title?: string | React.ReactNode;
   onAlertClose?: MouseEventHandler<HTMLButtonElement>;
   children: React.ReactNode;
 };

frontend/src/components/atoms/hyperTexts/Link.tsx

@@ -17,6 +17,7 @@ type Props = {
   icon?: string;
   newTab?: boolean;
   children: React.ReactNode;
+  title?: string;
 };
 
 const Link: React.FC<Props> = ({

frontend/src/components/atoms/inputs/Label.tsx

@@ -2,7 +2,7 @@ import React, { FunctionComponent, ReactNode } from 'react';
 import Helper from '../Helper';
 
 type Props = {
-  id: string;
+  id?: string;
   label: ReactNode;
   required?: boolean;
   helper?: string;

frontend/src/components/molecules/FileInput/DownloadButton.tsx

@@ -7,8 +7,8 @@ import useFileDownloader from '../../templates/hooks/use-file-downloader';
 
 type Props = {
   id: string;
-  label: string;
-  disabled: boolean;
+  label: string | React.ReactNode;
+  disabled?: boolean;
   onReplaceFile: () => void;
   uploadedDocuments: Document[];
   documentType: string;

frontend/src/components/molecules/FileInput/FileInput.tsx

@@ -1,6 +1,7 @@
 import React, {
   ChangeEventHandler,
   FunctionComponent,
+  InputHTMLAttributes,
   useEffect,
   useState,
 } from 'react';
@@ -10,18 +11,16 @@ import { DocumentToUpload } from './index';
 // NB: please keep this limit in sync with the limit in nginx datapass-backend configuration
 const FILE_SIZE_LIMIT_IN_MB = 10;
 
-type Props = {
-  id: string;
-  label: string;
+export interface FileInputProps extends InputHTMLAttributes<HTMLInputElement> {
   documentType: string;
-  disabled: boolean;
-  onChange: ChangeEventHandler<HTMLInputElement>;
-  mimeTypes: string;
-  meta?: string;
   documentsToUpload: DocumentToUpload[];
-};
+  mimeTypes?: string;
+  meta?: string;
+  label: string | React.ReactNode;
+  onChange: ChangeEventHandler<HTMLInputElement>;
+}
 
-export const FileInput: FunctionComponent<Props> = ({
+export const FileInput: FunctionComponent<FileInputProps> = ({
   id,
   label,
   documentType,

frontend/src/components/molecules/FileInput/index.tsx

@@ -6,7 +6,7 @@ import React, {
 } from 'react';
 import { isEmpty, uniqueId } from 'lodash';
 import DownloadButton from './DownloadButton';
-import FileInput from './FileInput';
+import FileInput, { FileInputProps } from './FileInput';
 
 export type DocumentToUpload = { attachment: File; type: string };
 
@@ -21,18 +21,12 @@ export type Document = {
   filename: string;
 };
 
-type Props = {
-  label: string;
-  documentType: string;
-  disabled: boolean;
-  onChange: ChangeEventHandler<HTMLInputElement>;
-  mimeTypes?: string;
-  meta?: string;
-  documentsToUpload: DocumentToUpload[];
+interface IndexProps extends FileInputProps {
   uploadedDocuments: Document[];
-};
+  disabled?: boolean;
+}
 
-const Index: FunctionComponent<Props> = ({
+const Index: FunctionComponent<IndexProps> = ({
   label,
   meta,
   mimeTypes = '.pdf, application/pdf',

frontend/src/components/organisms/ConfirmationModal.js → frontend/src/components/organisms/ConfirmationModal.tsx

@@ -1,12 +1,21 @@
-import React from 'react';
+import React, { MouseEventHandler, SyntheticEvent } from 'react';
 import AriaModal from '@justfixnyc/react-aria-modal';
 import Button from '../atoms/hyperTexts/Button';
 import ButtonGroup from '../molecules/ButtonGroup';
 import Link from '../atoms/hyperTexts/Link';
 import { InfoIcon } from '../atoms/icons/fr-fi-icons';
 import './ConfirmationModal.css';
 
-const ConfirmationModal = ({
+type ConfirmationModalProps = {
+  handleConfirm: MouseEventHandler<HTMLButtonElement>;
+  confirmLabel: string;
+  handleCancel: (event: Event | SyntheticEvent<Element, Event>) => void;
+  cancelLabel?: string;
+  title: string;
+  children: React.ReactNode;
+};
+
+const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   handleConfirm,
   confirmLabel = 'Confirmer',
   handleCancel,
@@ -18,7 +27,7 @@ const ConfirmationModal = ({
     titleText={title}
     onExit={handleCancel}
     focusDialog
-    getApplicationNode={() => document.getElementById('root')}
+    getApplicationNode={() => document.getElementById('root') as Element}
     scrollDisabled={false}
     alert
   >

frontend/src/components/organisms/ErrorBoundaryFallback.js → frontend/src/components/organisms/ErrorBoundaryFallback.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import Alert from '../atoms/Alert';
+import Alert, { AlertType } from '../atoms/Alert';
 import IndexPointingRightEmoji from '../atoms/icons/IndexPointingRightEmoji';
 
 export const ErrorBoundaryFallback = () => (
   <div className="page">
     <main className="full-page">
-      <Alert type="error" title="Erreur inconnue">
+      <Alert type={AlertType.error} title="Erreur inconnue">
         <p>
           Une erreur est survenue. Merci de réessayer ultérieurement. Vous
           pouvez également essayer d'utiliser un autre navigateur (ex: Firefox

frontend/src/components/organisms/FormRouter.js → frontend/src/components/organisms/FormRouter.tsx

@@ -5,13 +5,14 @@ import Loader from '../atoms/Loader';
 import Enrollment from '../templates/Enrollment';
 import { useFullDataProvider } from '../templates/hooks/use-full-data-provider';
 import NotFound from './NotFound';
+import { TargetAPI } from '../../config/data-provider-configurations';
 
 const FormRouter = () => {
   const { targetApi: targetApiFromUrl } = useParams();
-  const targetApi = targetApiFromUrl.replace(/-/g, '_');
+  const targetApi = (targetApiFromUrl as TargetAPI).replace(/-/g, '_');
 
   const { Component, configuration, notFound } = useFullDataProvider({
-    targetApi: targetApi,
+    targetApi: targetApi as TargetAPI,
   });
 
   if (notFound) {

frontend/src/components/organisms/Header.js → frontend/src/components/organisms/Header.tsx

@@ -13,8 +13,8 @@ import { isEmpty } from 'lodash';
 const { REACT_APP_BACK_HOST: BACK_HOST } = process.env;
 
 const Header = () => {
-  const [displayContactLink, setDisplayContactLink] = useState();
-  const [targetApi, setTargetApi] = useState();
+  const [displayContactLink, setDisplayContactLink] = useState<boolean>();
+  const [targetApi, setTargetApi] = useState<string>();
   let location = useLocation();
   const { user, logout } = useAuth();
   const { dataProviderConfigurations } = useDataProviderConfigurations();
@@ -119,7 +119,7 @@ const Header = () => {
                       </Button>
                     </li>
                   )}
-                  {user && user.roles.includes('administrator') && (
+                  {user && user?.roles?.includes('administrator') && (
                     <>
                       <li>
                         <Button icon="calendar" href="/admin">

frontend/src/components/organisms/Nav.js → frontend/src/components/organisms/Nav.tsx

@@ -4,13 +4,21 @@ import { ScrollableLink } from './Scrollable';
 import Button from '../atoms/hyperTexts/Button';
 import useListItemNavigation from '../templates/hooks/use-list-item-navigation';
 import Link from '../atoms/hyperTexts/Link';
+import { TargetAPI } from '../../config/data-provider-configurations';
 
-export const getDefaultDocumentationUrl = (target_api) =>
+export const getDefaultDocumentationUrl = (target_api: TargetAPI) =>
   `https://api.gouv.fr/les-api/${target_api.replace(/_/g, '-')}`;
 
 export const DEFAULT_CONTACT_EMAIL = '[email protected]';
 
-const Nav = ({
+type NavProps = {
+  target_api: TargetAPI;
+  sectionLabels: string[];
+  contactEmail: string;
+  documentationUrl: string;
+};
+
+const Nav: React.FC<NavProps> = ({
   target_api,
   sectionLabels = [],
   contactEmail,

frontend/src/components/organisms/NotFound.js → frontend/src/components/organisms/NotFound.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import Alert from '../atoms/Alert';
+import Alert, { AlertType } from '../atoms/Alert';
 
 export const NotFound = () => (
   <div className="full-page">
-    <Alert type="error" title="Erreur 404">
+    <Alert type={AlertType.error} title="Erreur 404">
       La page que vous recherchez est introuvable.
     </Alert>
   </div>

frontend/src/components/organisms/form-sections/CguSection/index.js → frontend/src/components/organisms/form-sections/CguSection/index.tsx

@@ -1,5 +1,4 @@
 import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
 import { isEmpty } from 'lodash';
 import { ScrollablePanel } from '../../Scrollable';
 import { FormContext } from '../../../templates/Form';
@@ -9,7 +8,19 @@ import Link from '../../../atoms/hyperTexts/Link';
 const SECTION_LABEL = 'Les modalités d’utilisation';
 const SECTION_ID = encodeURIComponent(SECTION_LABEL);
 
-export const CguSection = ({ cguLink, additionalTermsOfUse = [] }) => {
+type CguSectionProps = {
+  cguLink: string;
+  additionalTermsOfUse: { id: string; label: string }[];
+};
+
+interface CguSectionType extends React.FC<CguSectionProps> {
+  sectionLabel: string;
+}
+
+export const CguSection: CguSectionType = ({
+  cguLink,
+  additionalTermsOfUse = [],
+}) => {
   const {
     disabled,
     onChange,
@@ -62,10 +73,4 @@ export const CguSection = ({ cguLink, additionalTermsOfUse = [] }) => {
 
 CguSection.sectionLabel = SECTION_LABEL;
 
-CguSection.propTypes = {
-  CguDescription: PropTypes.func,
-  cguLink: PropTypes.string.isRequired,
-  AdditionalCguContent: PropTypes.func,
-};
-
 export default CguSection;

frontend/src/components/organisms/form-sections/DemarcheSection/DemarcheSectionReadOnly.tsx

@@ -10,7 +10,7 @@ import { ScopeConfiguration } from '../DonneesSection/Scopes';
 
 const valueToLabel = (
   key: string,
-  scopesConfiguration: ScopeConfiguration[]
+  scopesConfiguration?: ScopeConfiguration[]
 ) => {
   const scope = find(scopesConfiguration, { value: key });
   if (scope) {
@@ -22,7 +22,7 @@ const valueToLabel = (
 
 type DemarcheSectionReadOnlyProps = {
   scrollableId: string;
-  scopesConfiguration: ScopeConfiguration[];
+  scopesConfiguration?: ScopeConfiguration[];
 };
 
 export const DemarcheSectionReadOnly: React.FC<

frontend/src/components/organisms/form-sections/DemarcheSection/DemarcheSectionSelect.js → frontend/src/components/organisms/form-sections/DemarcheSection/DemarcheSectionSelect.tsx

@@ -1,22 +1,37 @@
 import { get, has, isEmpty, merge, pickBy } from 'lodash';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import {
+  ChangeEventHandler,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { findModifiedFields } from '../../../../lib';
 import SelectInput from '../../../atoms/inputs/SelectInput';
 import { FormContext } from '../../../templates/Form';
 import ConfirmationModal from '../../ConfirmationModal';
 import { ScrollablePanel } from '../../Scrollable';
 import DemarcheSectionSelectNotification from './DemarcheSectionSelectNotification';
 
-export const DemarcheSectionSelect = ({ body, scrollableId }) => {
+export const DemarcheSectionSelect = ({
+  body,
+  scrollableId,
+}: {
+  body: React.ReactNode;
+  scrollableId: string;
+}) => {
   const { disabled, onChange, enrollment, demarches } = useContext(FormContext);
   const { demarche: selectedDemarcheId } = enrollment;
 
   const [isLoading, setIsLoading] = useState(false);
-  const [confirmNewDemarcheId, setConfirmNewDemarcheId] = useState(false);
+  const [confirmNewDemarcheId, setConfirmNewDemarcheId] = useState<
+    string | null
+  >(null);
 
   // reducer expects onChange events from HTML Element
   const selectNewDemarche = useCallback(
-    (newDemarcheId) => {
+    (newDemarcheId: string) => {
       onChange({ target: { value: newDemarcheId, name: 'demarche' } });
     },
     [onChange]
@@ -36,7 +51,7 @@ export const DemarcheSectionSelect = ({ body, scrollableId }) => {
     [demarches, enrollment.technical_team_value, selectedDemarcheId]
   );
 
-  const onSelectDemarche = (event) => {
+  const onSelectDemarche: ChangeEventHandler<HTMLSelectElement> = (event) => {
     let newDemarcheId = event.target.value || 'default';
 
     const preFilledEnrollment = merge(
@@ -97,9 +112,9 @@ export const DemarcheSectionSelect = ({ body, scrollableId }) => {
         {confirmNewDemarcheId && (
           <ConfirmationModal
             title="Attention, vous allez écraser certains de vos changements"
-            handleCancel={() => setConfirmNewDemarcheId(false)}
+            handleCancel={() => setConfirmNewDemarcheId(null)}
             handleConfirm={() => {
-              setConfirmNewDemarcheId(false);
+              setConfirmNewDemarcheId(null);
               selectNewDemarche(confirmNewDemarcheId);
             }}
             confirmLabel="Changer tout de même"

frontend/src/components/organisms/form-sections/DemarcheSection/DemarcheSectionSelectNotification.js → frontend/src/components/organisms/form-sections/DemarcheSection/DemarcheSectionSelectNotification.tsx

@@ -4,12 +4,17 @@ import { get, isEmpty } from 'lodash';
 import Alert from '../../../atoms/Alert';
 import HighVoltageEmoji from '../../../atoms/icons/HighVoltageEmoji';
 import Link from '../../../atoms/hyperTexts/Link';
+import { Demarche } from '../../../templates/Form/enrollmentReducer';
 
-const DemarcheSectionNotification = ({
-  isLoading = false,
-  selectedDemarcheId,
-  demarches,
-}) => (
+type DemarcheSectionNotificationProps = {
+  isLoading: boolean;
+  selectedDemarcheId: string;
+  demarches: Record<string, Demarche>;
+};
+
+const DemarcheSectionNotification: React.FC<
+  DemarcheSectionNotificationProps
+> = ({ isLoading = false, selectedDemarcheId, demarches }) => (
   <>
     {isLoading ? (
       <Loader message="pré-remplissage du formulaire en cours ..." />
@@ -23,22 +28,20 @@ const DemarcheSectionNotification = ({
       >
         <br />
         Vous avez sélectionné le cas d’usage «{' '}
-        <b>
-          {get(demarches, selectedDemarcheId, {}).label || selectedDemarcheId}
-        </b>
+        <b>{get(demarches, selectedDemarcheId)?.label || selectedDemarcheId}</b>
         {' '}
         ».{' '}
         {!isEmpty(demarches) &&
           selectedDemarcheId &&
-          get(demarches, selectedDemarcheId, {}).about && (
+          get(demarches, selectedDemarcheId)?.about && (
             <>
               Pour en savoir plus sur ce cas d’usage, vous pouvez en consulter
               la{' '}
               <Link
                 inline
                 newTab
                 aria-label={`Plus d’information sur le cas d’usage « ${selectedDemarcheId} »`}
-                href={get(demarches, selectedDemarcheId, {}).about}
+                href={get(demarches, selectedDemarcheId)?.about}
               >
                 fiche explicative
               </Link>