docs: makes the custom ui options explicit

README.md

@@ -26,26 +26,59 @@ For now, the API matches the one from `react-jsonschema-form` and you can
 overrides some widgets (resp. templates) by specifying them in the props.
 
 ```tsx
-import { RJSFSchema } from "@rjsf/utils";
-import FormDSFR from "@codegouvfr/rjsf-dsfr";
-import { customizeValidator } from "@rjsf/validator-ajv8";
-import frenchLocalizer from "ajv-i18n/localize/fr";
+import { RJSFSchema } from '@rjsf/utils'
+import FormDSFR from '@codegouvfr/rjsf-dsfr'
+import { customizeValidator } from '@rjsf/validator-ajv8'
+import frenchLocalizer from 'ajv-i18n/localize/fr'
 
-const validator = customizeValidator({}, frenchLocalizer);
+const validator = customizeValidator({}, frenchLocalizer)
 
 const schema: RJSFSchema = {
-  type: "object",
+  type: 'object',
   properties: {
-    nom: { title: "Nom", type: "string", minLength: 2 },
-    prenom: { title: "Prénom", type: "string" },
-    ddn: { title: "Date de naissance", type: "string", format: "date" },
+    nom: { title: 'Nom', type: 'string', minLength: 2 },
+    prenom: { title: 'Prénom', type: 'string' },
+    ddn: { title: 'Date de naissance', type: 'string', format: 'date' },
   },
-  required: ["nom"],
-};
+  required: ['nom'],
+}
 
 export default function Form() {
-  return (
-      <FormDSFR schema={schema} validator={validator} />
-  );
+  return <FormDSFR schema={schema} validator={validator} />
 }
 ```
+
+### UI Options
+
+As described in the [react-jsonschema-form
+documentation](https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema),
+you can customize the form by providing a `uiSchema`.
+In addition to the standard options, you can use the following specific options
+for `rjsf-dsfr`.
+
+> [!TIP]
+> You can have a look to a real world example
+> [here](https://github.com/CatalaLang/catala-web-assets/blob/main/assets/aides_logement_ui_fr.schema.jsx)
+
+#### Global field options
+
+The following options can be set for any field in the `uiSchema`:
+
+- `ui:heading`: set the heading level for the field's title (available values: `h2`, `h3`, `h4`, `h5`, `h6`)
+- `ui:hideTitle`: hide the field's title
+
+#### Specific field options
+
+##### Array fields
+
+The following options can be set for fields of type `array`:
+
+- `ui:addIcon`: set the [DSFR icon id](https://react-dsfr.codegouv.studio/icons) for the _Add_ button
+- `ui:removeIcon`: set the [DSFR icon id](https://react-dsfr.codegouv.studio/icons) for the _Remove_ button
+- `ui:tabLabel`: set the label for the tab in the array field
+
+> [!NOTE]
+> By default, array fields are displayed in a
+> [`Tabs`](https://components.react-dsfr.codegouv.studio/?path=/docs/components-tabs--default)
+> component. Each tab is labeled with the `ui:tabLabel` value and the last tab
+> contains the _Add_ button.

src/components/TemplateArrayField.tsx

@@ -1,19 +1,39 @@
+import React from 'react'
+import { FrIconClassName, RiIconClassName } from '@codegouvfr/react-dsfr'
 import Button from '@codegouvfr/react-dsfr/Button'
 import Tabs from '@codegouvfr/react-dsfr/Tabs'
 import { ArrayFieldTemplateProps } from '@rjsf/utils'
-import React from 'react'
 
-const defaultAddIcon = 'fr-icon-add-circle-line'
-const defaultRemoveIcon = 'fr-icon-delete-line'
+import { UiSchemaDSFR } from '..'
+
+export type IconsDSFR = FrIconClassName | RiIconClassName
+
+/** Custom UI options for array fields */
+export type ArrayFieldUiOptionsDSFR = {
+  /** Icon for the add button */
+  'ui:addIcon'?: IconsDSFR
+  /** Icon for the remove button */
+  'ui:removeIcon'?: IconsDSFR
+  /** Label for tab component. */
+  'ui:tabLabel'?: string
+}
 
+/**
+ * Array field are displayed in a Tabs component where:
+ * - each tab corresponds to an element of the array,
+ * - the last tab is an "add" button,
+ * - tab label can be customized with `ui:tabLabel` and is numbered from 1,
+ */
 export default function ({
   title,
   uiSchema,
   items,
   canAdd,
   onAddClick,
-}: ArrayFieldTemplateProps & { removeIcon?: string; addIcon?: string }) {
-  const tabLabel = uiSchema !== undefined ? uiSchema['ui:tabLabel'] : 'Element'
+}: ArrayFieldTemplateProps & { uiSchema?: UiSchemaDSFR }) {
+  const tabLabel = uiSchema?.['ui:tabLabel'] ?? 'Element'
+  const removeIcon = uiSchema?.['ui:removeIcon'] ?? 'fr-icon-delete-line'
+  const addIcon = uiSchema?.['ui:addIcon'] ?? 'fr-icon-add-circle-line'
 
   return (
     <div className="form-group field">
@@ -27,11 +47,7 @@ export default function ({
                 content: (
                   <>
                     <Button
-                      iconId={
-                        uiSchema !== undefined
-                          ? uiSchema['ui:removeIcon']
-                          : defaultRemoveIcon
-                      }
+                      iconId={removeIcon}
                       onClick={element.onDropIndexClick(element.index)}
                       size="small"
                       priority="secondary"
@@ -49,11 +65,7 @@ export default function ({
                     <>
                       {canAdd && (
                         <Button
-                          iconId={
-                            uiSchema !== undefined
-                              ? uiSchema['ui:addIcon']
-                              : defaultAddIcon
-                          }
+                          iconId={addIcon}
                           onClick={onAddClick}
                           size="small"
                           priority="secondary"

src/index.tsx

@@ -5,17 +5,42 @@ import {
   RJSFSchema,
   StrictRJSFSchema,
   FormContextType,
+  UiSchema,
 } from '@rjsf/utils'
 import defaultValidator from '@rjsf/validator-ajv8'
 import { Button } from '@codegouvfr/react-dsfr/Button'
 
 import WidgetCheckBox from './components/WidgetCheckBox'
 import WidgetSelect from './components/WidgetSelect'
-import TemplateArrayField from './components/TemplateArrayField'
+import TemplateArrayField, {
+  ArrayFieldUiOptionsDSFR,
+} from './components/TemplateArrayField'
 import TemplateBaseInput from './components/TemplateBaseInput'
 import TemplateField from './components/TemplateField'
 import TemplateTitleField from './components/TemplateTitleField'
 
+export type UiSchemaDSFR<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+> = UiSchema<T, S, F> & FieldUiOptionsDSFR & ArrayFieldUiOptionsDSFR
+
+/** Custom UI options for all fields */
+export type FieldUiOptionsDSFR = {
+  /** Set the heading level for the title */
+  'ui:heading'?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  /** To hide the title */
+  'ui:hideTitle'?: boolean
+}
+
+export type FormPropsDSFR<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+> = FormProps<T, S, F> & {
+  uiSchema?: UiSchemaDSFR<T, S, F>
+}
+
 /**
  * Form component with default DSFR widgets and templates.
  *
@@ -27,7 +52,7 @@ export default function FormDSFR<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->({ widgets, templates, validator, ...rest }: FormProps<T, S, F>) {
+>({ widgets, templates, validator, ...rest }: FormPropsDSFR<T, S, F>) {
   return (
     <Form
       validator={validator ?? defaultValidator}