wip

src/components/ErrorList.tsx

@@ -0,0 +1,33 @@
+import Alert from '@codegouvfr/react-dsfr/Alert'
+
+import {
+  ErrorListProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils'
+
+export default function ErrorList<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>({ errors, registry }: ErrorListProps<T, S, F>) {
+  const { translateString } = registry
+  return (
+    <Alert
+      severity="error"
+      title="Erreurs"
+      description={
+        <ul>
+          {errors.map((error, i: number) => {
+            return (
+              <li key={i} className="border-0">
+                <span>{error.stack}</span>
+              </li>
+            )
+          })}
+        </ul>
+      }
+    />
+  )
+}

src/components/LabelWithHelp.tsx

@@ -0,0 +1,46 @@
+import { fr } from '@codegouvfr/react-dsfr'
+import { ReactNode, useState } from 'react'
+
+type ElementWithHintProps = {
+  helpText: string | undefined
+  children: ReactNode
+  as?: string
+  [x: string]: any
+}
+
+export default function LabelWithHelp({
+  helpText,
+  children,
+  as = 'span',
+  ...rest
+}: ElementWithHintProps) {
+  const [showHelp, setShowHelp] = useState(false)
+  const Content = as as keyof JSX.IntrinsicElements
+  if (children == undefined) {
+    return null
+  }
+
+  return (
+    <div className="flex flex-col ">
+      <div className="flex" style={{ alignItems: 'center' }}>
+        <Content {...rest}>
+          {children}
+          {helpText ? (
+            <i
+              style={{ cursor: 'pointer' }}
+              className={fr.cx(
+                'fr-icon--sm',
+                'fr-ml-1w',
+                !showHelp
+                  ? 'fr-icon-information-line'
+                  : 'fr-icon-information-fill',
+              )}
+              onClick={() => setShowHelp(!showHelp)}
+            />
+          ) : null}
+        </Content>
+      </div>
+      {showHelp ? <p className="fr-hint-text">{helpText}</p> : null}
+    </div>
+  )
+}