Resource

Déclarer une ressource.

La fonction ne transforme rien : elle sert à ce que TypeScript vérifie la déclaration au moment où on l'écrit, plutôt qu'au moment où on la passe à CrudPage. Le message d'erreur y gagne dix lignes de lisibilité.

Installation

sia-ui add resource

Ou par le paquet, sans rien copier :

import { defineResource, resourceColumns, resourceDetailColumns, resourceFormFields, resourceValidator, resourceSearchKeys, resourceDefaults, resourceRowKey, resourcePermissions } from "@sia-ui/react-web";

Utilisation

const factures = defineResource<Facture>({
  name: "facture",
  label: { singular: "Facture", plural: "Factures" },
  fields: {
    reference: { label: "Référence", required: true },
    client: { label: "Client", required: true },
    montant: { type: "currency", currency: "XOF", align: "end" },
    statut: {
      type: "select",
      options: [{ value: "payee", label: "Payée" }],
      tones: { payee: "success" },
    },
  },
});

Props de defineResource

Prop	Type	Défaut	Description
* fields	Record<string, ResourceField<T>>	—	Les propriétés, dans l'ordre où elles s'affichent.
* name	string	—	L'identifiant technique — sert aux droits et aux clés de cache.
description	ReactNode	—
formColumns	number	—	Colonnes de la grille du formulaire.
key	string | ((row: T, index: number) => Key)	—	La propriété qui identifie une ligne. id par défaut.
label	{ singular?: ReactNode; plural?: ReactNode; create?: ReactNode; }	—	Comment la ressource se nomme à l'écran. create est déclaré plutôt que fabriqué : « Nouvelle facture » et « Nouveau client » ne se déduisent pas du singulier sans connaître le genre, et se tromper une fois sur deux est pire que d'écrire « Créer ».
permissions	"auto" | { create?: PermissionRule; view?: PermissionRule; edit?: PermissionRule; delete?: PermissionRule; }	—	Les droits des quatre opérations. "auto" les dérive du nom : facture.creer, facture.modifier, facture.supprimer, facture.lire. C'est une convention, pas une obligation — chaque règle se déclare aussi à la main.

Props de resourceColumns

Les colonnes du tableau, dans l'ordre de déclaration.

Prop	Type	Défaut	Description
* fields	Record<string, ResourceField<T>>	—	Les propriétés, dans l'ordre où elles s'affichent.
* name	string	—	L'identifiant technique — sert aux droits et aux clés de cache.
description	ReactNode	—
formColumns	number	—	Colonnes de la grille du formulaire.
key	string | ((row: T, index: number) => Key)	—	La propriété qui identifie une ligne. id par défaut.
label	{ singular?: ReactNode; plural?: ReactNode; create?: ReactNode; }	—	Comment la ressource se nomme à l'écran. create est déclaré plutôt que fabriqué : « Nouvelle facture » et « Nouveau client » ne se déduisent pas du singulier sans connaître le genre, et se tromper une fois sur deux est pire que d'écrire « Créer ».
permissions	"auto" | { create?: PermissionRule; view?: PermissionRule; edit?: PermissionRule; delete?: PermissionRule; }	—	Les droits des quatre opérations. "auto" les dérive du nom : facture.creer, facture.modifier, facture.supprimer, facture.lire. C'est une convention, pas une obligation — chaque règle se déclare aussi à la main.

Props de resourceDetailColumns

Les lignes de la vue de détail.

Tenues à part des colonnes : une note de trois phrases n'a pas sa place dans une cellule, mais c'est précisément au détail qu'on va la lire. Les dériver du tableau priverait la vue de détail de tout ce qui est long, ce qui est exactement ce qu'elle existe pour montrer.

Prop	Type	Défaut	Description
* fields	Record<string, ResourceField<T>>	—	Les propriétés, dans l'ordre où elles s'affichent.
* name	string	—	L'identifiant technique — sert aux droits et aux clés de cache.
description	ReactNode	—
formColumns	number	—	Colonnes de la grille du formulaire.
key	string | ((row: T, index: number) => Key)	—	La propriété qui identifie une ligne. id par défaut.
label	{ singular?: ReactNode; plural?: ReactNode; create?: ReactNode; }	—	Comment la ressource se nomme à l'écran. create est déclaré plutôt que fabriqué : « Nouvelle facture » et « Nouveau client » ne se déduisent pas du singulier sans connaître le genre, et se tromper une fois sur deux est pire que d'écrire « Créer ».
permissions	"auto" | { create?: PermissionRule; view?: PermissionRule; edit?: PermissionRule; delete?: PermissionRule; }	—	Les droits des quatre opérations. "auto" les dérive du nom : facture.creer, facture.modifier, facture.supprimer, facture.lire. C'est une convention, pas une obligation — chaque règle se déclare aussi à la main.

Props de resourceSearchKeys

Les clés que la recherche locale parcourt.

Prop	Type	Défaut	Description
* fields	Record<string, ResourceField<T>>	—	Les propriétés, dans l'ordre où elles s'affichent.
* name	string	—	L'identifiant technique — sert aux droits et aux clés de cache.
description	ReactNode	—
formColumns	number	—	Colonnes de la grille du formulaire.
key	string | ((row: T, index: number) => Key)	—	La propriété qui identifie une ligne. id par défaut.
label	{ singular?: ReactNode; plural?: ReactNode; create?: ReactNode; }	—	Comment la ressource se nomme à l'écran. create est déclaré plutôt que fabriqué : « Nouvelle facture » et « Nouveau client » ne se déduisent pas du singulier sans connaître le genre, et se tromper une fois sur deux est pire que d'écrire « Créer ».
permissions	"auto" | { create?: PermissionRule; view?: PermissionRule; edit?: PermissionRule; delete?: PermissionRule; }	—	Les droits des quatre opérations. "auto" les dérive du nom : facture.creer, facture.modifier, facture.supprimer, facture.lire. C'est une convention, pas une obligation — chaque règle se déclare aussi à la main.

Props de resourceDefaults

Les valeurs de départ d'une création : les champs du mode create.

Prop	Type	Défaut	Description
* fields	Record<string, ResourceField<T>>	—	Les propriétés, dans l'ordre où elles s'affichent.
* name	string	—	L'identifiant technique — sert aux droits et aux clés de cache.
description	ReactNode	—
formColumns	number	—	Colonnes de la grille du formulaire.
key	string | ((row: T, index: number) => Key)	—	La propriété qui identifie une ligne. id par défaut.
label	{ singular?: ReactNode; plural?: ReactNode; create?: ReactNode; }	—	Comment la ressource se nomme à l'écran. create est déclaré plutôt que fabriqué : « Nouvelle facture » et « Nouveau client » ne se déduisent pas du singulier sans connaître le genre, et se tromper une fois sur deux est pire que d'écrire « Créer ».
permissions	"auto" | { create?: PermissionRule; view?: PermissionRule; edit?: PermissionRule; delete?: PermissionRule; }	—	Les droits des quatre opérations. "auto" les dérive du nom : facture.creer, facture.modifier, facture.supprimer, facture.lire. C'est une convention, pas une obligation — chaque règle se déclare aussi à la main.

Props de resourceRowKey

Comment lire la clé d'une ligne.

Prop	Type	Défaut	Description
* fields	Record<string, ResourceField<T>>	—	Les propriétés, dans l'ordre où elles s'affichent.
* name	string	—	L'identifiant technique — sert aux droits et aux clés de cache.
description	ReactNode	—
formColumns	number	—	Colonnes de la grille du formulaire.
key	string | ((row: T, index: number) => Key)	—	La propriété qui identifie une ligne. id par défaut.
label	{ singular?: ReactNode; plural?: ReactNode; create?: ReactNode; }	—	Comment la ressource se nomme à l'écran. create est déclaré plutôt que fabriqué : « Nouvelle facture » et « Nouveau client » ne se déduisent pas du singulier sans connaître le genre, et se tromper une fois sur deux est pire que d'écrire « Créer ».
permissions	"auto" | { create?: PermissionRule; view?: PermissionRule; edit?: PermissionRule; delete?: PermissionRule; }	—	Les droits des quatre opérations. "auto" les dérive du nom : facture.creer, facture.modifier, facture.supprimer, facture.lire. C'est une convention, pas une obligation — chaque règle se déclare aussi à la main.

Props de resourcePermissions

Les droits des quatre opérations.

"auto" applique la convention <ressource>.<verbe> — la seule chose qu'une convention doit faire : éviter d'écrire quatre fois ce qui se déduit une fois.

Prop	Type	Défaut	Description
* fields	Record<string, ResourceField<T>>	—	Les propriétés, dans l'ordre où elles s'affichent.
* name	string	—	L'identifiant technique — sert aux droits et aux clés de cache.
description	ReactNode	—
formColumns	number	—	Colonnes de la grille du formulaire.
key	string | ((row: T, index: number) => Key)	—	La propriété qui identifie une ligne. id par défaut.
label	{ singular?: ReactNode; plural?: ReactNode; create?: ReactNode; }	—	Comment la ressource se nomme à l'écran. create est déclaré plutôt que fabriqué : « Nouvelle facture » et « Nouveau client » ne se déduisent pas du singulier sans connaître le genre, et se tromper une fois sur deux est pire que d'écrire « Créer ».
permissions	"auto" | { create?: PermissionRule; view?: PermissionRule; edit?: PermissionRule; delete?: PermissionRule; }	—	Les droits des quatre opérations. "auto" les dérive du nom : facture.creer, facture.modifier, facture.supprimer, facture.lire. C'est une convention, pas une obligation — chaque règle se déclare aussi à la main.

* obligatoire.

Voir aussi

• Le composant dans le catalogue — états, variantes, et bac à sable.
• La référence complète — tous les composants.