@sia-ui/cli 0.2.1 → 0.3.0

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

@@ -4,4 +4,11 @@ import "./styles.css";
 
 export interface CommandItem { id: string; label: string; description?: string; keywords?: string[]; icon?: ReactNode; disabled?: boolean; onSelect: () => void; }
 export interface CommandPaletteProps { open: boolean; onOpenChange: (open: boolean) => void; items: CommandItem[]; placeholder?: string; emptyLabel?: string; className?: string; }
+/**
+ * Tout ce que l'application sait faire, au clavier.
+ *
+ * La recherche porte aussi sur des mots-clés invisibles : quelqu'un qui tape
+ * « facture » doit trouver « Nouvelle vente » sans avoir appris comment
+ * l'action s'appelle ici.
+ */
 export function CommandPalette({ open, onOpenChange, items, placeholder = "Rechercher une commande...", emptyLabel = "Aucune commande", className }: CommandPaletteProps) { const [query, setQuery] = useState(""); const [active, setActive] = useState(0); const inputRef = useRef<HTMLInputElement>(null); const filtered = useMemo(() => { const needle = query.trim().toLowerCase(); return items.filter((item) => !needle || [item.label, item.description, ...(item.keywords ?? [])].filter(Boolean).join(" ").toLowerCase().includes(needle)); }, [items, query]); useEffect(() => { if (!open) return; setQuery(""); setActive(0); requestAnimationFrame(() => inputRef.current?.focus()); }, [open]); if (!open) return null; const select = (item: CommandItem | undefined) => { if (!item || item.disabled) return; item.onSelect(); onOpenChange(false); }; return <div className="sia-command-palette__backdrop" onMouseDown={(event) => event.target === event.currentTarget && onOpenChange(false)}><section className={cn("sia-command-palette", className)} role="dialog" aria-modal="true" aria-label="Palette de commandes"><input ref={inputRef} value={query} placeholder={placeholder} aria-label={placeholder} onChange={(event) => { setQuery(event.target.value); setActive(0); }} onKeyDown={(event) => { if (event.key === "Escape") onOpenChange(false); if (event.key === "ArrowDown") { event.preventDefault(); setActive((value) => Math.min(value + 1, filtered.length - 1)); } if (event.key === "ArrowUp") { event.preventDefault(); setActive((value) => Math.max(value - 1, 0)); } if (event.key === "Enter") select(filtered[active]); }} /><div role="listbox">{filtered.length === 0 ? <p>{emptyLabel}</p> : filtered.map((item, index) => <button type="button" role="option" aria-selected={index === active} key={item.id} disabled={item.disabled} onMouseEnter={() => setActive(index)} onClick={() => select(item)}>{item.icon}<span><strong>{item.label}</strong>{item.description && <small>{item.description}</small>}</span></button>)}</div></section></div>; }

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

@@ -16,6 +16,13 @@ export interface ConfirmDialogProps {
   onConfirm: () => void | Promise<void>;
 }
 
+/**
+ * La question qu'on pose avant de détruire.
+ *
+ * `onConfirm` peut rendre une promesse : le bouton reste occupé tant qu'elle
+ * n'a pas abouti. Sans cela, la boîte se referme sur un appel encore en
+ * vol, et l'on ignore si la suppression a eu lieu.
+ */
 export function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel: confirmLabelProp, cancelLabel: cancelLabelProp, tone = "primary", loading = false, onConfirm }: ConfirmDialogProps) {
     const locale = useSiaLocale();
     const cancelLabel = cancelLabelProp ?? locale.cancel;

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

@@ -2,6 +2,13 @@ import { type HTMLAttributes } from "react";
 import { cn } from "@sia-ui/utils";
 import "./styles.css";
 
+/**
+ * La largeur de lecture, et l'espacement vertical.
+ *
+ * Deux réglages posés une fois pour toutes plutôt qu'une marge inventée
+ * écran par écran : des largeurs décidées page après page finissent par
+ * diverger, et personne ne sait plus laquelle fait foi.
+ */
 export function Container({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
   return <div className={cn("sia-container", className)} {...props} />;
 }

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

@@ -1,3 +1,10 @@
 import { Timer, type TimerProps } from "../Timer";
 export type CountdownProps = Omit<TimerProps, "direction">;
+/**
+ * Un `Timer` qui descend.
+ *
+ * Le compte à rebours est assez fréquent — une session qui expire, un code
+ * à usage unique — pour mériter son nom plutôt qu'une prop à ne pas
+ * oublier.
+ */
 export function Countdown(props: CountdownProps) { return <Timer {...props} direction="down" />; }

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

@@ -0,0 +1,230 @@
+import { type Key, type ReactNode } from "react";
+import type { FormValidator } from "@sia-ui/headless";
+import { Modal } from "../Modal";
+import { Form, type FormEntry, type FormShape } from "../Form";
+import { Descriptions } from "../Descriptions";
+import type { DataTableColumn } from "../DataTable/types";
+import { renduCellule } from "../DataTable/values";
+
+/** Laquelle des trois boîtes est ouverte, et sur quelle ligne. */
+export interface CrudDialogState<T> {
+  mode: "create" | "edit" | "view";
+  row?: T;
+  index?: number;
+}
+
+/** Les titres et la forme des boîtes. Tout est facultatif. */
+export interface CrudDialogOptions {
+  createTitle?: ReactNode;
+  createDescription?: ReactNode;
+  editTitle?: ReactNode;
+  editDescription?: ReactNode;
+  viewTitle?: ReactNode;
+  viewDescription?: ReactNode;
+  submitText?: ReactNode;
+  /** Colonnes du formulaire. Deux, au-delà de quatre ou cinq champs. */
+  columns?: number;
+  /** Colonnes de la vue de détail. */
+  detailColumns?: 1 | 2 | 3;
+}
+
+/**
+ * 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.
+ */
+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] = "";
+  return valeurs;
+}
+
+/**
+ * Ne garder d'une ligne que ce que le formulaire sait montrer.
+ *
+ * Une ligne porte souvent plus que ses champs — un identifiant, des dates de
+ * suivi, un objet imbriqué. Les passer au formulaire les renverrait tels
+ * quels à l'envoi, et `isDirty` les compterait comme modifiés.
+ */
+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)) {
+    const valeur = source[nom];
+    valeurs[nom] =
+      typeof valeur === "string" ||
+      typeof valeur === "number" ||
+      typeof valeur === "boolean" ||
+      Array.isArray(valeur)
+        ? (valeur as FormShape[string])
+        : "";
+  }
+  return valeurs;
+}
+
+export interface CrudDialogsProps<T> {
+  state: CrudDialogState<T> | null;
+  onClose: () => void;
+
+  columns: Array<DataTableColumn<T>>;
+  fields?: FormEntry[] | undefined;
+  validate?: FormValidator<FormShape> | undefined;
+  onSubmit?:
+    | ((
+        values: FormShape,
+        context: { mode: "create" | "edit"; row?: T; index?: number },
+      ) => void | Promise<void>)
+    | undefined;
+
+  createDefaults?: FormShape | undefined;
+  toFormValues?: ((row: T) => FormShape) | undefined;
+  renderDetail?: ((row: T, index: number) => ReactNode) | undefined;
+
+  getRowKey?: ((row: T, index: number) => Key) | undefined;
+  dialog?: CrudDialogOptions | undefined;
+}
+
+/**
+ * Les boîtes du CRUD : créer, modifier, consulter.
+ *
+ * Elles n'inventent rien — `Modal` pour la boîte, `Form` pour la saisie,
+ * `Descriptions` pour la lecture. Ce qu'elles apportent est de savoir
+ * laquelle ouvrir, avec quelles valeurs, et de refermer une fois l'envoi
+ * passé.
+ */
+export function CrudDialogs<T>({
+  state,
+  onClose,
+  columns,
+  fields,
+  validate,
+  onSubmit,
+  createDefaults,
+  toFormValues,
+  renderDetail,
+  getRowKey,
+  dialog,
+}: CrudDialogsProps<T>) {
+  const creation = state?.mode === "create";
+  const modification = state?.mode === "edit";
+  const consultation = state?.mode === "view";
+
+  /*
+    Une clé qui change d'une ouverture à l'autre.
+
+    `useLocalForm` fige ses valeurs initiales à la première passe — c'est ce
+    qui rend `isDirty` fiable. Sans remonter le formulaire, la deuxième
+    modification rouvrirait sur la première ligne.
+  */
+  const cle =
+    state === undefined || state === null
+      ? "vide"
+      : `${state.mode}-${
+          state.row !== undefined && state.index !== undefined && getRowKey
+            ? String(getRowKey(state.row, state.index))
+            : String(state.index ?? "")
+        }`;
+
+  const valeurs =
+    modification && state?.row !== undefined && fields
+      ? (toFormValues?.(state.row) ?? valeursDeLigne(state.row, fields))
+      : (createDefaults ?? (fields ? valeursVides(fields) : {}));
+
+  return (
+    <>
+      {fields && (creation || modification) && (
+        <Modal
+          open
+          onOpenChange={(ouvert) => {
+            if (!ouvert) onClose();
+          }}
+          title={
+            creation
+              ? (dialog?.createTitle ?? "Créer")
+              : (dialog?.editTitle ?? "Modifier")
+          }
+          {...(creation
+            ? dialog?.createDescription
+              ? { description: dialog.createDescription }
+              : {}
+            : dialog?.editDescription
+              ? { description: dialog.editDescription }
+              : {})}
+          className="sia-crud-dialog"
+        >
+          <Form
+            key={cle}
+            fields={fields}
+            defaultValues={valeurs}
+            {...(validate ? { validate } : {})}
+            columns={dialog?.columns ?? 1}
+            submitText={
+              dialog?.submitText ?? (creation ? "Créer" : "Enregistrer")
+            }
+            // Une création part de champs vides : exiger une modification
+            // bloquerait l'envoi d'un formulaire dont tous les défauts
+            // conviennent.
+            requireDirty={modification}
+            onSubmit={async (values) => {
+              await onSubmit?.(values, {
+                mode: creation ? "create" : "edit",
+                ...(state?.row !== undefined ? { row: state.row } : {}),
+                ...(state?.index !== undefined ? { index: state.index } : {}),
+              });
+              onClose();
+            }}
+          />
+        </Modal>
+      )}
+
+      {consultation && state?.row !== undefined && (
+        <Modal
+          open
+          onOpenChange={(ouvert) => {
+            if (!ouvert) onClose();
+          }}
+          title={dialog?.viewTitle ?? "Détail"}
+          {...(dialog?.viewDescription
+            ? { description: dialog.viewDescription }
+            : {})}
+          className="sia-crud-dialog"
+        >
+          {renderDetail?.(state.row, state.index ?? 0) ?? (
+            /*
+              À défaut de rendu à soi, les colonnes du tableau.
+
+              Elles disent déjà quoi montrer et comment : un montant y est
+              formaté, un statut y est une pastille. Redemander la même chose
+              sous une autre forme ferait deux descriptions du même objet.
+            */
+            <Descriptions
+              columns={dialog?.detailColumns ?? 2}
+              items={columns
+                .filter((colonne) => colonne.card !== "hidden")
+                .map((colonne) => ({
+                  key: colonne.key,
+                  label: colonne.header,
+                  value: renduCellule(
+                    state.row as T,
+                    state.index ?? 0,
+                    colonne,
+                  ),
+                }))}
+            />
+          )}
+        </Modal>
+      )}
+    </>
+  );
+}