Chore/typescript migration 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/Button.tsx

@@ -16,6 +16,8 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   download?: boolean;
   submit?: boolean;
   children?: React.ReactNode;
+  target?: string;
+  rel?: string;
 }
 
 const Button: React.FC<ButtonProps> = ({

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

@@ -11,6 +11,7 @@ type Props = {
   submit?: boolean;
   iconFill?: boolean;
   children: React.ReactNode;
+  target?: string;
 };
 
 const HyperText: React.FC<Props> = ({

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

@@ -17,6 +17,8 @@ type Props = {
   icon?: string;
   newTab?: boolean;
   children: React.ReactNode;
+  title?: string;
+  target?: 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/atoms/inputs/RadioInput.tsx

@@ -5,7 +5,7 @@ import Label from './Label';
 import { InputProps } from './Input';
 
 interface RadioInputProps extends InputProps {
-  options?: { id: string; label: string }[];
+  options?: { id: string | number; label: string }[];
 }
 
 export const RadioInput: React.FC<RadioInputProps> = ({

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

@@ -10,11 +10,11 @@ import SideBySideWrapper from './SideBySideWrapper';
 import Label from './Label';
 
 interface SelectInputProps extends SelectHTMLAttributes<HTMLSelectElement> {
-  options?: { id: string; label: string }[];
+  options?: { id: string | number; label: string }[];
   useOtherOption?: boolean;
-  label: string;
-  helper: string;
-  meta: string;
+  label: string | React.ReactNode;
+  helper?: string;
+  meta?: string;
 }
 
 export const SelectInput: React.FC<SelectInputProps> = ({

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/molecules/Stepper/index.tsx

@@ -2,7 +2,7 @@ import './style.css';
 import { useDataProviderConfigurations } from '../../templates/hooks/use-data-provider-configurations';
 
 type StepperProps = {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   steps: string[];
   currentStep: string | null;
   previousStepNotCompleted?: boolean;

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>