@sia-ui/cli 0.7.1 → 0.8.0

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

@@ -1,13 +1,14 @@
 import { useMemo, useState, type Key, type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
-import type {
-  FormSubmitResult,
-  FormValidator,
-  PermissionRule,
+import {
+  useSiaLocale,
+  type FormSubmitResult,
+  type FormValidator,
+  type PermissionRule,
 } from "@sia-ui/headless";
-import { PageHeader } from "../PageHeader";
-import { Button } from "../Button";
-import { Pagination } from "../Pagination";
+import { PageHeader, type PageHeaderProps } from "../PageHeader";
+import { Button, type ButtonProps } from "../Button";
+import { Pagination, type PaginationProps } from "../Pagination";
 import { DataTable } from "../DataTable";
 import { EyeIcon, PencilIcon, PlusIcon, TrashIcon } from "../Icons";
 import type {
@@ -29,15 +30,21 @@ import {
 } from "../Resource";
 import {
   CrudDialogs,
+  type CrudDescriptionsProps,
   type CrudDialogOptions,
   type CrudDialogState,
+  type CrudFormProps,
+  type CrudModalProps,
 } from "./dialogs";
 import "./styles.css";
 
 export {
   CrudDialogs,
+  type CrudDescriptionsProps,
   type CrudDialogOptions,
   type CrudDialogState,
+  type CrudFormProps,
+  type CrudModalProps,
 } from "./dialogs";
 
 /**
@@ -217,6 +224,40 @@ interface CrudPageBase<T> {
  * ni ressource ne montrerait rien, et le dirait à l'exécution.
  */
 export type CrudPageProps<T> = CrudPageBase<T> &
+  /*
+    Les props des composants que la page assemble, transmises telles quelles.
+    Chacune omet ce que la page calcule elle-même, et qu'une surcharge
+    casserait — une pagination qui ne suit plus la page, une boîte qui ne se
+    ferme plus.
+  */
+  {
+    /**
+     * Les props du `PageHeader`. Sans `actions`, composées de
+     * `headerActions` et du bouton de création. `className` s'ajoute.
+     */
+    pageHeaderProps?: Partial<Omit<PageHeaderProps, "actions">>;
+    /**
+     * Les props du bouton de création. Sans `onClick`, qui ouvre le
+     * formulaire, ni `children` : le libellé passe par
+     * `operations.create.label`.
+     */
+    createButtonProps?: Partial<Omit<ButtonProps, "onClick" | "children">>;
+    /** Les props du bouton de suppression groupée. Sans `onClick`. */
+    bulkDeleteButtonProps?: Partial<Omit<ButtonProps, "onClick">>;
+    /**
+     * Les props de la `Pagination` — `jumpTo`, `compact`, `siblingCount`.
+     * Sans `page`, `totalPages` ni `onPageChange`, qui ont leurs props ici.
+     */
+    paginationProps?: Partial<
+      Omit<PaginationProps, "page" | "totalPages" | "onPageChange">
+    >;
+    /** Les props des `Modal` de formulaire et de détail — voir `CrudModalProps`. */
+    modalProps?: CrudModalProps;
+    /** Les props du `Form` des boîtes — voir `CrudFormProps`. */
+    formProps?: CrudFormProps;
+    /** Les props de la vue de détail par défaut — voir `CrudDescriptionsProps`. */
+    descriptionsProps?: CrudDescriptionsProps;
+  } &
   (
     | {
         /**
@@ -235,6 +276,24 @@ export type CrudPageProps<T> = CrudPageBase<T> &
       }
   );
 
+/**
+ * Glisse un nom — texte ou élément — à la place de `{name}` dans un message
+ * de la locale. `formatMessage` ne sait placer que du texte ; le nom d'une
+ * ressource peut être un élément.
+ */
+function avecNom(modele: string, nom: ReactNode): ReactNode {
+  const [avant, ...apres] = modele.split("{name}");
+  return apres.length === 0 ? (
+    modele
+  ) : (
+    <>
+      {avant}
+      {nom}
+      {apres.join("{name}")}
+    </>
+  );
+}
+
 /**
  * Une page de liste, avec ses quatre opérations.
  *
@@ -288,7 +347,15 @@ export function CrudPage<T>({
   table,
   children,
   className,
+  pageHeaderProps,
+  createButtonProps,
+  bulkDeleteButtonProps,
+  paginationProps,
+  modalProps,
+  formProps,
+  descriptionsProps,
 }: CrudPageProps<T>) {
+  const locale = useSiaLocale();
   const [boite, setBoite] = useState<CrudDialogState<T> | null>(null);
 
   /**
@@ -306,9 +373,9 @@ export function CrudPage<T>({
             columns: resourceColumns(resource),
             detailColumns: resourceDetailColumns(resource),
             fields: resourceFormFields(resource, "create"),
-            validate: resourceValidator(resource, "create"),
+            validate: resourceValidator(resource, "create", locale.resource),
             editFields: resourceFormFields(resource, "edit"),
-            editValidate: resourceValidator(resource, "edit"),
+            editValidate: resourceValidator(resource, "edit", locale.resource),
             searchKeys: resourceSearchKeys(resource),
             defaults: resourceDefaults(resource),
             getRowKey: resourceRowKey(resource),
@@ -317,7 +384,7 @@ export function CrudPage<T>({
             label: resource.label,
           }
         : undefined,
-    [resource],
+    [resource, locale.resource],
   );
 
   const columns = colonnesFournies ?? derive?.columns ?? [];
@@ -406,24 +473,24 @@ export function CrudPage<T>({
       });
     };
 
-    ajouter("view", consulter, { label: "Consulter", icon: <EyeIcon /> });
-    ajouter("edit", modifier, { label: "Modifier", icon: <PencilIcon /> });
+    ajouter("view", consulter, { label: locale.crudPage.view, icon: <EyeIcon /> });
+    ajouter("edit", modifier, { label: locale.edit, icon: <PencilIcon /> });
     ajouter("delete", onDelete, {
-      label: "Supprimer",
+      label: locale.delete,
       icon: <TrashIcon />,
       tone: "danger",
       // Détruire sans demander est une faute. On peut la retirer — encore
       // faut-il l'avoir écrit.
       confirm: {
-        title: "Supprimer cet élément ?",
-        description: "Cette action est définitive.",
-        confirmLabel: "Supprimer",
+        title: locale.crudPage.deleteTitle,
+        description: locale.crudPage.deleteDescription,
+        confirmLabel: locale.delete,
         destructive: true,
       },
     });
 
     return liste;
-  }, [operations, onDelete, modifier, consulter, derive]);
+  }, [operations, onDelete, modifier, consulter, derive, locale]);
 
   const toutesLesActions = useMemo(() => {
     if (!extraRowActions) {
@@ -459,11 +526,12 @@ export function CrudPage<T>({
   const boutonCreer =
     creer && creation && creationAutorisee ? (
       <Button
-        onClick={creer}
         disabled={creation.disabled ?? false}
         leftIcon={creation.icon ?? <PlusIcon />}
+        {...createButtonProps}
+        onClick={creer}
       >
-        {creation.label ?? derive?.label?.create ?? "Créer"}
+        {creation.label ?? derive?.label?.create ?? locale.create}
       </Button>
     ) : null;
   const enTeteActions =
@@ -483,6 +551,7 @@ export function CrudPage<T>({
           : {})}
         {...(eyebrow ? { eyebrow } : {})}
         {...(headingLevel ? { level: headingLevel } : {})}
+        {...pageHeaderProps}
         {...(enTeteActions ? { actions: enTeteActions } : {})}
       />
 
@@ -511,12 +580,13 @@ export function CrudPage<T>({
                     variant="outline"
                     tone="danger"
                     leftIcon={<TrashIcon />}
+                    {...bulkDeleteButtonProps}
                     onClick={async () => {
                       await onBulkDelete(keys, rows);
                       clear();
                     }}
                   >
-                    Supprimer
+                    {bulkDeleteButtonProps?.children ?? locale.delete}
                   </Button>
                 ),
               }
@@ -547,6 +617,9 @@ export function CrudPage<T>({
         toFormValues={toFormValues}
         renderDetail={typeof detail === "function" ? detail : undefined}
         getRowKey={getRowKey}
+        modalProps={modalProps}
+        formProps={formProps}
+        descriptionsProps={descriptionsProps}
         /*
           Les titres des boîtes reprennent le nom de la ressource, faute de
           mieux : « Modifier la facture » se lit mieux que « Modifier », et
@@ -556,8 +629,8 @@ export function CrudPage<T>({
         dialog={{
           ...(derive?.label?.singular
             ? {
-                createTitle: derive.label.create ?? "Créer",
-                editTitle: <>Modifier — {derive.label.singular}</>,
+                createTitle: derive.label.create ?? locale.create,
+                editTitle: avecNom(locale.crudPage.editTitle, derive.label.singular),
                 viewTitle: derive.label.singular,
               }
             : {}),
@@ -568,13 +641,14 @@ export function CrudPage<T>({
 
       {page !== undefined && totalPages !== undefined && onPageChange && (
         <Pagination
-          page={page}
-          totalPages={totalPages}
-          onPageChange={onPageChange}
           showTotal
           {...(pageSize !== undefined ? { pageSize } : {})}
           {...(onPageSizeChange ? { onPageSizeChange } : {})}
           {...(pageSizeOptions ? { pageSizeOptions } : {})}
+          {...paginationProps}
+          page={page}
+          totalPages={totalPages}
+          onPageChange={onPageChange}
         />
       )}
     </section>

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

@@ -1,8 +1,9 @@
 import { forwardRef, useState, type InputHTMLAttributes } from "react";
 import { cn, formatCurrency, parseCurrency } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
 
-export interface CurrencyInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "inputMode"> { value?: number | null; defaultValue?: number | null; currency?: string; locale?: string; onValueChange?: (value: number | null) => void; invalid?: boolean; }
+export interface CurrencyInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "inputMode"> { value?: number | null; defaultValue?: number | null; currency?: string; /** La langue du format et de la saisie. Par défaut, celle de la locale SIA. */ locale?: string; onValueChange?: (value: number | null) => void; invalid?: boolean; }
 
 /**
  * La saisie d'un montant.
@@ -11,7 +12,9 @@ export interface CurrencyInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
  * de milliers et le symbole appartiennent à l'affichage, et un serveur qui
  * reçoit « 1 250 000 F CFA » ne peut rien en faire.
  */
-export const CurrencyInput = forwardRef<HTMLInputElement, CurrencyInputProps>(({ value, defaultValue = null, currency = "XAF", locale = "fr-FR", onValueChange, invalid, className, onBlur, onFocus, ...props }, ref) => {
+export const CurrencyInput = forwardRef<HTMLInputElement, CurrencyInputProps>(({ value, defaultValue = null, currency = "XAF", locale: localeProp, onValueChange, invalid, className, onBlur, onFocus, ...props }, ref) => {
+  const messages = useSiaLocale();
+  const locale = localeProp ?? messages.language;
   const [focused, setFocused] = useState(false);
   const [internal, setInternal] = useState<number | null>(defaultValue);
   const current = value === undefined ? internal : value;

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

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState, type Key, type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
-import { useSiaLocale } from "@sia-ui/headless";
+import { plural, useSiaLocale } from "@sia-ui/headless";
 import { useMediaQuery } from "@sia-ui/react";
 import { Checkbox } from "../Checkbox";
 import { SearchInput } from "../SearchInput";
@@ -14,6 +14,7 @@ import type {
   DataTableProps,
   DataTableView,
   RowAction,
+  RowActionsSlots,
 } from "./types";
 import { renduCellule, valeurDe } from "./values";
 import "./styles.css";
@@ -57,6 +58,7 @@ export function DataTable<T>({
   searchPlaceholder,
   onSearch,
   searchDelay = 0,
+  searchInputProps,
   layout = "auto",
   maxHeight,
   stickyHeader = false,
@@ -67,6 +69,10 @@ export function DataTable<T>({
   inlineActionsLimit = 2,
   actionsHeader,
   actionsDisplay = "icon",
+  rowActionButtonProps,
+  rowActionIconButtonProps,
+  rowActionsMenuProps,
+  confirmDialogProps,
   can,
   view: viewProp,
   defaultView = "table",
@@ -77,14 +83,18 @@ export function DataTable<T>({
   renderCard,
   loading = false,
   skeletonRows = 5,
+  skeletonProps,
   error,
   onRetry,
+  errorStateProps,
   empty,
+  emptyStateProps,
   selectable = false,
   selectedKeys: selectedProp,
   defaultSelectedKeys,
   onSelectionChange,
   isRowSelectable,
+  checkboxProps,
   selectionActions,
   sort,
   onSortChange,
@@ -181,6 +191,12 @@ export function DataTable<T>({
     typeof rowActions === "function" ? rowActions(row, index) : (rowActions ?? []);
 
   const aDesActions = rowActions !== undefined;
+  const slotsActions: RowActionsSlots = {
+    button: rowActionButtonProps,
+    iconButton: rowActionIconButtonProps,
+    menu: rowActionsMenuProps,
+    confirmDialog: confirmDialogProps,
+  };
   const vide = !loading && !error && lignes.length === 0;
 
   const enTete =
@@ -211,8 +227,9 @@ export function DataTable<T>({
           <div className="sia-table__tools">
             {searchKeys && (
               <SearchInput
-                value={recherche}
                 placeholder={searchPlaceholder ?? locale.search}
+                {...searchInputProps}
+                value={recherche}
                 // 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 } : {})}
@@ -225,7 +242,7 @@ export function DataTable<T>({
             {toolbar}
 
             {showViewToggle && !(responsive && etroit) && (
-              <div className="sia-table__views" role="group" aria-label="Affichage">
+              <div className="sia-table__views" role="group" aria-label={locale.dataTable.viewToggle}>
                 {(["table", "cards"] as const).map((mode) => (
                   <button
                     key={mode}
@@ -239,7 +256,7 @@ export function DataTable<T>({
                   >
                     {mode === "table" ? <IconeListe /> : <IconeGrille />}
                     <span className="sia-visually-hidden">
-                      {mode === "table" ? "Liste" : "Cartes"}
+                      {mode === "table" ? locale.dataTable.tableView : locale.dataTable.cardsView}
                     </span>
                   </button>
                 ))}
@@ -256,7 +273,7 @@ export function DataTable<T>({
       {selectable && selection.length > 0 && selectionActions && (
         <div className="sia-table__selection">
           <span className="sia-table__selection-count">
-            {selection.length} sélectionné{selection.length > 1 ? "s" : ""}
+            {plural(locale.dataTable, "selected", selection.length, locale.language)}
           </span>
           {selectionActions({
             keys: selection,
@@ -267,12 +284,20 @@ export function DataTable<T>({
       )}
 
       {error ? (
-        <ErrorState description={error} {...(onRetry ? { onRetry } : {})} />
+        <ErrorState
+          {...errorStateProps}
+          description={error}
+          {...(onRetry ? { onRetry } : {})}
+        />
       ) : vide ? (
         <EmptyState
-          title={empty?.title ?? locale.empty}
+          {...emptyStateProps}
+          // `empty` est la voie courte : là où il déclare une clé, il
+          // l'emporte sur le réglage complet.
+          title={empty?.title ?? emptyStateProps?.title ?? locale.empty}
           {...(empty?.description ? { description: empty.description } : {})}
           {...(empty?.action ? { action: empty.action } : {})}
+          {...(empty?.icon ? { icon: empty.icon } : {})}
         />
       ) : vue === "cards" ? (
         <CartesVue
@@ -280,6 +305,8 @@ export function DataTable<T>({
           colonnes={colonnes}
           loading={loading}
           skeletonRows={skeletonRows}
+          skeletonProps={skeletonProps}
+          slotsActions={slotsActions}
           cle={cle}
           {...(renderCard ? { renderCard } : {})}
           {...(onRowClick ? { onRowClick } : {})}
@@ -307,11 +334,12 @@ export function DataTable<T>({
                 {selectable && (
                   <th className="sia-table__cell--select" scope="col">
                     <Checkbox
+                      label=""
+                      aria-label={locale.dataTable.selectAll}
+                      {...checkboxProps}
                       checked={toutesCochees}
                       indeterminate={partiellement}
                       onValueChange={basculerTout}
-                      label=""
-                      aria-label="Tout sélectionner"
                     />
                   </th>
                 )}
@@ -361,7 +389,7 @@ export function DataTable<T>({
                 {aDesActions && (
                   <th className="sia-table__cell--actions" scope="col">
                     {actionsHeader ?? (
-                      <span className="sia-visually-hidden">Actions</span>
+                      <span className="sia-visually-hidden">{locale.dataTable.actions}</span>
                     )}
                   </th>
                 )}
@@ -374,17 +402,17 @@ export function DataTable<T>({
                     <tr key={`fantome-${i}`} className="sia-table__row--skeleton">
                       {selectable && (
                         <td>
-                          <Skeleton width="1.1rem" height="1.1rem" />
+                          <Skeleton width="1.1rem" height="1.1rem" {...skeletonProps} />
                         </td>
                       )}
                       {colonnes.map((c) => (
                         <td key={c.key}>
-                          <Skeleton height=".8rem" />
+                          <Skeleton height=".8rem" {...skeletonProps} />
                         </td>
                       ))}
                       {aDesActions && (
                         <td>
-                          <Skeleton width="3rem" height=".8rem" />
+                          <Skeleton width="3rem" height=".8rem" {...skeletonProps} />
                         </td>
                       )}
                     </tr>
@@ -411,11 +439,12 @@ export function DataTable<T>({
                         {selectable && (
                           <td className="sia-table__cell--select">
                             <Checkbox
+                              label=""
+                              aria-label={locale.dataTable.selectRow}
+                              {...checkboxProps}
                               checked={cochee}
                               disabled={!cochable}
                               onValueChange={() => basculerLigne(k)}
-                              label=""
-                              aria-label="Sélectionner la ligne"
                               onClick={(e) => e.stopPropagation()}
                             />
                           </td>
@@ -443,6 +472,7 @@ export function DataTable<T>({
                               inlineLimit={inlineActionsLimit}
                               display={actionsDisplay}
                               can={can}
+                              slots={slotsActions}
                             />
                           </td>
                         )}
@@ -462,6 +492,8 @@ interface CartesVueProps<T> {
   colonnes: Array<DataTableColumn<T>>;
   loading: boolean;
   skeletonRows: number;
+  skeletonProps: DataTableProps<T>["skeletonProps"];
+  slotsActions: RowActionsSlots;
   cle: (row: T, index: number) => Key;
   renderCard?: (row: T, index: number) => ReactNode;
   onRowClick?: (row: T, index: number) => void;
@@ -484,6 +516,8 @@ function CartesVue<T>({
   colonnes,
   loading,
   skeletonRows,
+  skeletonProps,
+  slotsActions,
   cle,
   renderCard,
   onRowClick,
@@ -505,9 +539,9 @@ function CartesVue<T>({
       <div className="sia-table__cards">
         {Array.from({ length: skeletonRows }, (_, i) => (
           <div key={i} className="sia-table-card sia-table-card--skeleton">
-            <Skeleton height="1rem" width="60%" />
-            <Skeleton height=".75rem" />
-            <Skeleton height=".75rem" width="80%" />
+            <Skeleton height="1rem" width="60%" {...skeletonProps} />
+            <Skeleton height=".75rem" {...skeletonProps} />
+            <Skeleton height=".75rem" width="80%" {...skeletonProps} />
           </div>
         ))}
       </div>
@@ -556,6 +590,7 @@ function CartesVue<T>({
                   inlineLimit={inlineActionsLimit}
                   display={actionsDisplay}
                   can={can}
+                  slots={slotsActions}
                 />
               </footer>
             )}

package/dist/registry/package/components/DataTable/row-actions.tsx

@@ -1,12 +1,12 @@
 import { useState, type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
-import type { PermissionRule } from "@sia-ui/headless";
+import { useSiaLocale, type PermissionRule } from "@sia-ui/headless";
 import { Button } from "../Button";
 import { IconButton } from "../IconButton";
 import { DropdownMenu } from "../DropdownMenu";
 import { ConfirmDialog } from "../ConfirmDialog";
 import { MoreHorizontalIcon } from "../Icons";
-import type { RowAction } from "./types";
+import type { RowAction, RowActionsSlots } from "./types";
 
 interface RowActionsProps<T> {
   row: T;
@@ -15,6 +15,7 @@ interface RowActionsProps<T> {
   inlineLimit: number;
   display: "icon" | "label";
   can: ((rule: PermissionRule) => boolean) | undefined;
+  slots: RowActionsSlots;
 }
 
 /**
@@ -31,7 +32,9 @@ export function RowActions<T>({
   inlineLimit,
   display,
   can,
+  slots,
 }: RowActionsProps<T>) {
+  const locale = useSiaLocale();
   // Une confirmation en attente. Une seule à la fois : deux dialogues
   // superposés sur la même ligne n'ont aucun sens.
   const [enAttente, setEnAttente] = useState<RowAction<T> | null>(null);
@@ -68,12 +71,15 @@ export function RowActions<T>({
         return display === "icon" && action.icon ? (
           <IconButton
             key={action.key}
-            label={nom}
-            icon={action.icon}
             variant="ghost"
             size="sm"
+            {...slots.iconButton}
+            // L'infobulle réglée pour tout le tableau garde le libellé de
+            // l'action : sans lui, elle n'aurait plus rien à dire.
+            tooltip={{ ...slots.iconButton?.tooltip, content: action.label }}
+            label={nom}
+            icon={action.icon}
             disabled={desactivee}
-            tooltip={{ content: action.label }}
             onClick={() => declencher(action)}
           />
         ) : (
@@ -81,9 +87,12 @@ export function RowActions<T>({
             key={action.key}
             variant="ghost"
             size="sm"
+            {...slots.button}
+            // Le ton et l'icône déclarés sur l'action sont plus précis que le
+            // réglage commun à tout le tableau.
             {...(action.tone ? { tone: action.tone } : {})}
-            disabled={desactivee}
             {...(action.icon ? { leftIcon: action.icon } : {})}
+            disabled={desactivee}
             onClick={() => declencher(action)}
           >
             {action.label}
@@ -94,6 +103,7 @@ export function RowActions<T>({
       {dansLeMenu.length > 0 && (
         <DropdownMenu
           placement="bottom-end"
+          {...slots.menu}
           items={dansLeMenu.map((action) => ({
             key: action.key,
             label: action.label,
@@ -104,16 +114,18 @@ export function RowActions<T>({
           }))}
         >
           <IconButton
-            label="Autres actions"
-            icon={<MoreHorizontalIcon />}
             variant="ghost"
             size="sm"
+            {...slots.iconButton}
+            label={locale.dataTable.moreActions}
+            icon={<MoreHorizontalIcon />}
           />
         </DropdownMenu>
       )}
 
       {enAttente?.confirm && (
         <ConfirmDialog
+          {...slots.confirmDialog}
           open
           onOpenChange={(ouvert) => {
             if (!ouvert) setEnAttente(null);