@sia-ui/cli 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @sia-ui/cli
 
+## 0.5.0
+
+### Patch Changes
+
+- Erreurs serveur dans les formulaires, client HTTP plus sûr, registre vérifié.
+
+  ## Défauts
+  - **Registre `drawer`** — `context.ts` et la dépendance `icons` manquaient :
+    `sia-ui add app-shell` produisait un projet qui ne compilait pas. Un test
+    vérifie désormais que chaque import relatif de chaque entrée est apporté par
+    son installation.
+  - **`sia-ui.css`** pose `box-sizing: border-box` (spécificité nulle). Sans
+    reset côté projet, `AppShell` débordait de 32 px.
+  - **`@sia-ui/api`** ne rejoue plus d'office que `GET` et `HEAD`
+    (`retryMethods`). Une écriture n'est rejouée que si l'appel pose `retry`.
+  - Plus aucun avertissement `react-hooks/exhaustive-deps` dans les composants.
+
+  ## Formulaires et erreurs serveur
+  - `Form` intercepte un envoi rejeté : erreurs de champ sous les champs, le
+    reste dans une alerte. `onSubmit` peut aussi rendre `{ champ: message }`
+    (`FormSubmitResult`), dans `useLocalForm`, `Form`, `CrudPage` et
+    l'adaptateur react-hook-form. `CrudPage` garde alors sa boîte ouverte.
+  - Les erreurs posées par `setErrors` survivent à la validation locale jusqu'à
+    la modification de leur champ.
+  - `HttpError.toFormErrors()`, option `fieldErrors` du client et préréglage
+    `nestFieldErrors` (class-validator). `readSubmitError` et `hasFormErrors`
+    dans `@sia-ui/headless`.
+  - La pagination à plat `{ data, total, page, limit }` est reconnue, et `get`
+    ne déballe plus `data` quand l'objet porte une pagination.
+
+  ## Tableaux
+  - `searchDelay` sur `DataTable` et `CrudPage`.
+  - `CrudPage` place les `extraRowActions` avant « Supprimer ».
+
 ## 0.4.0
 
 ### Minor Changes

package/README.md

@@ -68,6 +68,40 @@ Le contenu ci-dessous reprend intégralement `CHANGELOG.md` pour rester visible
 <!-- sia:changelog:start -->
 # @sia-ui/cli
 
+## 0.5.0
+
+### Patch Changes
+
+- Erreurs serveur dans les formulaires, client HTTP plus sûr, registre vérifié.
+
+  ## Défauts
+  - **Registre `drawer`** — `context.ts` et la dépendance `icons` manquaient :
+    `sia-ui add app-shell` produisait un projet qui ne compilait pas. Un test
+    vérifie désormais que chaque import relatif de chaque entrée est apporté par
+    son installation.
+  - **`sia-ui.css`** pose `box-sizing: border-box` (spécificité nulle). Sans
+    reset côté projet, `AppShell` débordait de 32 px.
+  - **`@sia-ui/api`** ne rejoue plus d'office que `GET` et `HEAD`
+    (`retryMethods`). Une écriture n'est rejouée que si l'appel pose `retry`.
+  - Plus aucun avertissement `react-hooks/exhaustive-deps` dans les composants.
+
+  ## Formulaires et erreurs serveur
+  - `Form` intercepte un envoi rejeté : erreurs de champ sous les champs, le
+    reste dans une alerte. `onSubmit` peut aussi rendre `{ champ: message }`
+    (`FormSubmitResult`), dans `useLocalForm`, `Form`, `CrudPage` et
+    l'adaptateur react-hook-form. `CrudPage` garde alors sa boîte ouverte.
+  - Les erreurs posées par `setErrors` survivent à la validation locale jusqu'à
+    la modification de leur champ.
+  - `HttpError.toFormErrors()`, option `fieldErrors` du client et préréglage
+    `nestFieldErrors` (class-validator). `readSubmitError` et `hasFormErrors`
+    dans `@sia-ui/headless`.
+  - La pagination à plat `{ data, total, page, limit }` est reconnue, et `get`
+    ne déballe plus `data` quand l'objet porte une pagination.
+
+  ## Tableaux
+  - `searchDelay` sur `DataTable` et `CrudPage`.
+  - `CrudPage` place les `extraRowActions` avant « Supprimer ».
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/registry/package/components/Calendar/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState, type ReactNode } from "react";
+import { useCallback, useMemo, useState, type ReactNode } from "react";
 import { cn, toneClass } from "@sia-ui/utils";
 import type { ComponentTone } from "@sia-ui/tokens";
 import { ChevronLeftIcon, ChevronRightIcon } from "../Icons";
@@ -119,10 +119,10 @@ export function Calendar({
     if (mode === undefined) setPanelMode(next);
     onPanelChange?.(monthIso(controlledMonth), next);
   };
-  const isDisabled = (date: string) => Boolean(
+  const isDisabled = useCallback((date: string) => Boolean(
     disabledDate?.(date) ||
     (validRange && (date < validRange[0] || date > validRange[1])),
-  );
+  ), [disabledDate, validRange]);
   const selectDate = (date: string) => {
     if (isDisabled(date)) return;
     if (selectionMode === "range") {
@@ -160,7 +160,7 @@ export function Calendar({
         ...(rangeEdge ? { rangeEdge } : {}),
       };
     });
-  }, [year, monthIndex, firstDayOfWeek, disabledDate, validRange, currentValue, currentRange.start, currentRange.end]);
+  }, [year, monthIndex, firstDayOfWeek, isDisabled, currentValue, currentRange.start, currentRange.end]);
   const weekdays = Array.from({ length: 7 }, (_, index) => new Intl.DateTimeFormat(locale, { weekday: "short" }).format(new Date(2024, 0, 7 + firstDayOfWeek + index)));
   const monthName = new Intl.DateTimeFormat(locale, { month: "long" }).format(controlledMonth);
   const updateFromString = (next: string) => setMonth(parseMonth(next));

package/dist/registry/package/components/CrudPage/dialogs.tsx

@@ -1,7 +1,16 @@
 import { type Key, type ReactNode } from "react";
-import type { FormValidator } from "@sia-ui/headless";
+import {
+  hasFormErrors,
+  type FormSubmitResult,
+  type FormValidator,
+} from "@sia-ui/headless";
 import { Modal } from "../Modal";
-import { Form, type FormEntry, type FormShape } from "../Form";
+import {
+  Form,
+  formFieldNames,
+  type FormEntry,
+  type FormShape,
+} from "../Form";
 import { Descriptions } from "../Descriptions";
 import type { DataTableColumn } from "../DataTable/types";
 import { renduCellule } from "../DataTable/values";
@@ -29,24 +38,12 @@ export interface CrudDialogOptions {
 }
 
 /**
- * Les noms de champs, groupes aplatis.
- *
- * Servent à fabriquer un formulaire vide : sans valeur initiale déclarée, un
- * champ non contrôlé le devient à la première frappe, et React s'en plaint à
- * juste titre.
+ * Un formulaire vide : sans valeur initiale déclarée, un champ non contrôlé
+ * le devient à la première frappe, et React s'en plaint à juste titre.
  */
-function nomsDeChamps(fields: FormEntry[]): string[] {
-  const noms: string[] = [];
-  for (const entree of fields) {
-    if ("group" in entree) noms.push(...entree.fields.map((f) => f.name));
-    else noms.push(entree.name);
-  }
-  return noms;
-}
-
 export function valeursVides(fields: FormEntry[]): FormShape {
   const valeurs: FormShape = {};
-  for (const nom of nomsDeChamps(fields)) valeurs[nom] = "";
+  for (const nom of formFieldNames(fields)) valeurs[nom] = "";
   return valeurs;
 }
 
@@ -60,7 +57,7 @@ export function valeursVides(fields: FormEntry[]): FormShape {
 export function valeursDeLigne<T>(row: T, fields: FormEntry[]): FormShape {
   const source = row as Record<string, unknown>;
   const valeurs: FormShape = {};
-  for (const nom of nomsDeChamps(fields)) {
+  for (const nom of formFieldNames(fields)) {
     const valeur = source[nom];
     valeurs[nom] =
       typeof valeur === "string" ||
@@ -84,7 +81,7 @@ export interface CrudDialogsProps<T> {
     | ((
         values: FormShape,
         context: { mode: "create" | "edit"; row?: T; index?: number },
-      ) => void | Promise<void>)
+      ) => FormSubmitResult<FormShape> | Promise<FormSubmitResult<FormShape>>)
     | undefined;
 
   createDefaults?: FormShape | undefined;
@@ -177,11 +174,14 @@ export function CrudDialogs<T>({
             // conviennent.
             requireDirty={modification}
             onSubmit={async (values) => {
-              await onSubmit?.(values, {
+              const resultat = await onSubmit?.(values, {
                 mode: creation ? "create" : "edit",
                 ...(state?.row !== undefined ? { row: state.row } : {}),
                 ...(state?.index !== undefined ? { index: state.index } : {}),
               });
+              // Refusé par le serveur : la boîte reste ouverte, les erreurs
+              // sous les champs. La fermer perdrait la saisie.
+              if (hasFormErrors(resultat)) return resultat;
               onClose();
             }}
           />

package/dist/registry/package/components/CrudPage/index.tsx

@@ -1,6 +1,10 @@
 import { useMemo, useState, type Key, type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
-import type { FormValidator, PermissionRule } from "@sia-ui/headless";
+import type {
+  FormSubmitResult,
+  FormValidator,
+  PermissionRule,
+} from "@sia-ui/headless";
 import { PageHeader } from "../PageHeader";
 import { Button } from "../Button";
 import { Pagination } from "../Pagination";
@@ -98,11 +102,16 @@ interface CrudPageBase<T> {
    */
   fields?: FormEntry[];
 
-  /** Ce que la page fait d'un formulaire envoyé. */
+  /**
+   * Ce que la page fait d'un formulaire envoyé.
+   *
+   * Rendre des erreurs par champ, ou lever une `HttpError`, garde la boîte
+   * ouverte avec les erreurs affichées ; sinon elle se ferme.
+   */
   onSubmit?: (
     values: FormShape,
     context: { mode: "create" | "edit"; row?: T; index?: number },
-  ) => void | Promise<void>;
+  ) => FormSubmitResult<FormShape> | Promise<FormSubmitResult<FormShape>>;
 
   /**
    * La validation, sous la même forme que `Form`.
@@ -164,6 +173,8 @@ interface CrudPageBase<T> {
   searchKeys?: string[];
   searchPlaceholder?: string;
   onSearch?: (query: string) => void;
+  /** Temporise `onSearch` — voir `DataTable`. 300 pour une recherche serveur. */
+  searchDelay?: number;
 
   loading?: boolean;
   error?: ReactNode;
@@ -173,6 +184,11 @@ interface CrudPageBase<T> {
   page?: number;
   totalPages?: number;
   onPageChange?: (page: number) => void;
+  /** Avec `onPageSizeChange`, ajoute le choix du nombre de lignes par page. */
+  pageSize?: number;
+  onPageSizeChange?: (pageSize: number) => void;
+  /** Les tailles proposées — voir `Pagination`. */
+  pageSizeOptions?: number[];
 
   /**
    * Ce qui n'a pas de raccourci ici passe au tableau tel quel — densité,
@@ -266,6 +282,7 @@ export function CrudPage<T>({
   searchKeys: clesDeRecherche,
   searchPlaceholder,
   onSearch,
+  searchDelay,
   loading = false,
   error,
   onRetry,
@@ -273,6 +290,9 @@ export function CrudPage<T>({
   page,
   totalPages,
   onPageChange,
+  pageSize,
+  onPageSizeChange,
+  pageSizeOptions,
   table,
   children,
   className,
@@ -416,11 +436,17 @@ export function CrudPage<T>({
       return actionsDeLigne.length > 0 ? actionsDeLigne : undefined;
     }
 
+    // Les ajouts se glissent avant « Supprimer » : la destruction reste la
+    // dernière action, là où on ne la vise pas par mégarde.
+    const suppression = actionsDeLigne.filter((a) => a.key === "delete");
+    const autres = actionsDeLigne.filter((a) => a.key !== "delete");
+
     return (row: T, index: number) => [
-      ...actionsDeLigne,
+      ...autres,
       ...(typeof extraRowActions === "function"
         ? extraRowActions(row, index)
         : extraRowActions),
+      ...suppression,
     ];
   }, [actionsDeLigne, extraRowActions]);
 
@@ -471,6 +497,7 @@ export function CrudPage<T>({
           {...(searchKeys ? { searchKeys } : {})}
           {...(searchPlaceholder ? { searchPlaceholder } : {})}
           {...(onSearch ? { onSearch } : {})}
+          {...(searchDelay !== undefined ? { searchDelay } : {})}
           {...(toutesLesActions ? { rowActions: toutesLesActions } : {})}
           {...(can ? { can } : {})}
           loading={loading}
@@ -543,6 +570,9 @@ export function CrudPage<T>({
           totalPages={totalPages}
           onPageChange={onPageChange}
           showTotal
+          {...(pageSize !== undefined ? { pageSize } : {})}
+          {...(onPageSizeChange ? { onPageSizeChange } : {})}
+          {...(pageSizeOptions ? { pageSizeOptions } : {})}
         />
       )}
     </section>

package/dist/registry/package/components/DataTable/index.tsx

@@ -54,6 +54,7 @@ export function DataTable<T>({
   searchKeys,
   searchPlaceholder,
   onSearch,
+  searchDelay = 0,
   layout = "auto",
   maxHeight,
   stickyHeader = false,
@@ -210,9 +211,12 @@ export function DataTable<T>({
               <SearchInput
                 value={recherche}
                 placeholder={searchPlaceholder ?? locale.search}
+                // Avec un délai, c'est le champ qui temporise : il sait aussi
+                // déclencher tout de suite sur Entrée et à l'effacement.
+                {...(onSearch && searchDelay > 0 ? { onSearch, searchDelay } : {})}
                 onValueChange={(v) => {
                   setRecherche(v);
-                  onSearch?.(v);
+                  if (searchDelay <= 0) onSearch?.(v);
                 }}
               />
             )}

package/dist/registry/package/components/DataTable/types.ts

@@ -107,6 +107,14 @@ export interface DataTableProps<T> {
   searchPlaceholder?: string;
   /** Recherche déléguée. Fournie, le tableau cesse de filtrer lui-même. */
   onSearch?: (query: string) => void;
+  /**
+   * Millisecondes d'inactivité avant d'appeler `onSearch`.
+   *
+   * `0` — le défaut — l'appelle à chaque frappe, ce qui convient à un
+   * filtrage local. Pour une recherche serveur, 300 évite une requête par
+   * lettre ; Entrée et l'effacement déclenchent sans attendre.
+   */
+  searchDelay?: number;
 
   /* ─────────────────────────────────────────────────────── mise en page */
 

package/dist/registry/package/components/Drawer/index.tsx

@@ -79,6 +79,7 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
       phase: state,
       open: doOpen,
       close: doClose,
+      toggle,
     } = useDisclosureState({
       ...(open !== undefined ? { open } : {}),
       defaultOpen,
@@ -88,6 +89,11 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
 
     const drawerRef = useRef<HTMLDivElement | null>(null);
     const zIndexRef = useRef<number | null>(null);
+    // Lue par l'écouteur d'Échap : la mettre dans ses dépendances le
+    // réabonnerait — et rebasculerait le verrou du body — à chaque rendu où
+    // `onOpenChange` est une fonction en ligne.
+    const fermer = useRef(doClose);
+    fermer.current = doClose;
 
     /* 🔌 API IMPÉRATIVE */
     useImperativeHandle(
@@ -95,10 +101,10 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
       () => ({
         open: doOpen,
         close: doClose,
-        toggle: () => (isOpen ? doClose() : doOpen()),
+        toggle,
         isOpen: () => isOpen,
       }),
-      [isOpen, open],
+      [isOpen, doOpen, doClose, toggle],
     );
 
     /* Overlay stack */
@@ -123,7 +129,7 @@ export const Drawer = forwardRef<DrawerRef, IDrawerProps>(
       const onKeyDown = (e: KeyboardEvent) => {
         if (!closeOnEsc || e.key !== "Escape") return;
         if (overlayStack.isTop(zIndexRef.current)) {
-          doClose();
+          fermer.current();
         }
       };
 

package/dist/registry/package/components/Form/index.tsx

@@ -1,10 +1,15 @@
-import { type CSSProperties, type ReactNode } from "react";
+import { useState, type CSSProperties, type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
 import {
+  readSubmitError,
   useLocalForm,
+  useSiaLocale,
   type FormAdapter,
+  type FormErrors,
+  type FormSubmitResult,
   type FormValidator,
 } from "@sia-ui/headless";
+import { Alert } from "../Alert";
 import { Button, type ButtonProps } from "../Button";
 import { Field, type FieldProps, type FieldValue } from "../Field";
 import "./styles.css";
@@ -32,6 +37,16 @@ function isGroup(entry: FormEntry): entry is FormFieldGroup {
   return "group" in entry;
 }
 
+/** Les noms de champs, groupes aplatis. */
+export function formFieldNames(fields: FormEntry[]): string[] {
+  const noms: string[] = [];
+  for (const entree of fields) {
+    if (isGroup(entree)) noms.push(...entree.fields.map((f) => f.name));
+    else noms.push(entree.name);
+  }
+  return noms;
+}
+
 /**
  * Les valeurs qu'un formulaire déclaratif peut porter.
  *
@@ -54,7 +69,16 @@ export interface FormProps<TValues extends FormShape = FormShape> {
   defaultValues?: TValues;
   /** La validation. Un schéma Zod s'y branche en cinq lignes. */
   validate?: FormValidator<TValues>;
-  onSubmit?: (values: TValues) => void | Promise<void>;
+  /**
+   * L'envoi.
+   *
+   * Rendre des erreurs par champ les pose sous les champs. Lever une erreur
+   * l'affiche dans une alerte en tête des boutons — et une `HttpError` de
+   * `@sia-ui/api` voit en plus ses erreurs de champ posées à leur place.
+   */
+  onSubmit?: (
+    values: TValues,
+  ) => FormSubmitResult<TValues> | Promise<FormSubmitResult<TValues>>;
   columns?: number;
   submitText?: ReactNode;
   clearText?: ReactNode;
@@ -118,6 +142,38 @@ export function Form<TValues extends FormShape = FormShape>({
     ...(onSubmit ? { onSubmit } : {}),
   });
   const form = adapter ?? interne;
+  const locale = useSiaLocale();
+
+  /**
+   * L'échec du dernier envoi, quand il ne se range pas sous un champ.
+   *
+   * Sans lui, un 409 ou un 500 devenait une promesse rejetée que personne ne
+   * lisait : le bouton se relâchait, et rien ne disait pourquoi.
+   */
+  const [echec, setEchec] = useState<string | null>(null);
+
+  const envoyer = () => {
+    setEchec(null);
+    form.submit().catch((error: unknown) => {
+      const { fields: erreurs, message } = readSubmitError(error);
+      const connus = new Set(formFieldNames(fields));
+      const sousLesChamps: Record<string, string> = {};
+      const ailleurs: string[] = [];
+
+      for (const [nom, texte] of Object.entries(erreurs)) {
+        if (connus.has(nom)) sousLesChamps[nom] = texte;
+        else ailleurs.push(texte);
+      }
+
+      form.setErrors(sousLesChamps as FormErrors<TValues>);
+      // Ce que les champs affichent déjà n'est pas répété dans l'alerte ; ce
+      // qui vise un champ absent du formulaire, si.
+      if (ailleurs.length > 0) setEchec(ailleurs.join(" "));
+      else if (Object.keys(sousLesChamps).length === 0) {
+        setEchec(message ?? locale.submitError);
+      }
+    });
+  };
 
   const busy = loading || form.state.isSubmitting;
   const submitDisabled =
@@ -157,7 +213,7 @@ export function Form<TValues extends FormShape = FormShape>({
       noValidate
       onSubmit={(event) => {
         event.preventDefault();
-        void form.submit();
+        envoyer();
       }}
     >
       <div className="sia-form-grid" style={grille(columns)}>
@@ -184,6 +240,16 @@ export function Form<TValues extends FormShape = FormShape>({
         )}
       </div>
 
+      {echec && (
+        <Alert
+          tone="danger"
+          className="sia-form-error"
+          onDismiss={() => setEchec(null)}
+        >
+          {echec}
+        </Alert>
+      )}
+
       {actions ?? (
         <div className="sia-form-actions">
           {showClear && (