@clauzier/admin-kit (0.6.0)
Installation
@clauzier:registry=npm install @clauzier/admin-kit@0.6.0"@clauzier/admin-kit": "0.6.0"About this package
@clauzier/admin-kit
Back-office React Admin généré depuis les schémas servis par cms-core.
Une coquille cliente ne décrit que son identité : titre, palette, URL d'API.
Les ressources, les formulaires, les libellés et les options viennent du
contrat /api/content-schemas — un type de contenu déclaré côté socle
apparaît dans l'admin sans qu'une ligne y soit écrite.
Installation
bun add @clauzier/admin-kit
Les paquets react-admin, @mui/material, @mui/icons-material,
@api-platform/admin, @tanstack/react-query, react, react-dom et
react-router-dom sont des peerDependencies : deux instances de
react-admin dans un même bundle donnent deux contextes et plus rien ne
fonctionne. La coquille les déclare donc explicitement.
Utilisation
import { createRoot } from 'react-dom/client';
import { AdminKitApp } from '@clauzier/admin-kit/app';
import '@clauzier/admin-kit/styles/admin.css';
import './palette.css';
createRoot(document.getElementById('root')!).render(
<AdminKitApp
apiUrl="https://api.exemple.tld/api"
title="Mon Club"
subtitle="Espace d'administration"
tokenKey="monclub_admin_token"
palette={{
background: '#0b0b10',
paper: '#14141c',
primary: '#4f7cff',
secondary: '#e63946',
text: '#f2f2f5',
textMuted: '#8a8a99',
border: '#24242e',
}}
/>,
);
Thème
Le socle ne fournit aucune palette par défaut : une valeur de repli ferait
hériter l'identité d'un client à tous les autres. createAdminTheme construit
le thème MUI et émet les mêmes valeurs en custom properties --admin-*, pour
que la feuille de style et les composants partent d'une source unique.
tests/socle.test.ts échoue si une couleur littérale, un var(--x, repli) ou
le nom d'un client apparaît dans src/.
Traductions
L'interface est en français (ra-language-french + les chaînes du kit). Une
coquille surcharge n'importe quelle chaîne, y compris celles de react-admin,
en passant un arbre partiel :
<AdminKitApp messages={{ ra: { action: { create: 'Ajouter' } } }} … />
Contrat de schémas
Toutes les clés au-delà du socle publié sont optionnelles et lues défensivement : un type de champ inconnu se replie sur une saisie texte plutôt que de casser l'écran. Le kit reste donc utilisable face à une API plus ancienne que lui.
| Clé | Effet |
|---|---|
label_plural |
libellé du menu — un pluriel français ne se dérive pas en ajoutant un s |
help |
texte d'aide sous le champ |
ui |
force un éditeur dédié (menu…) |
in_list |
affiche le champ en colonne de liste |
reference_type |
type cible d'un champ reference, alimente la liste déroulante |
capabilities.search |
affiche la boîte de recherche ; sans le paramètre q côté API elle ne ferait rien |
Développement
bun install
bun run lint && bun run format:check && bun run typecheck && bun run test
Dependencies
Dependencies
| ID | Version |
|---|---|
| ra-i18n-polyglot | ^5.15.0 |
| ra-input-rich-text | ^5.15.1 |
| ra-language-french | ^5.15.0 |
Development dependencies
| ID | Version |
|---|---|
| @eslint/js | ^10.0.0 |
| @testing-library/react | ^16.3.0 |
| @types/node | ^26.0.0 |
| @types/react | ^19.0.0 |
| @types/react-dom | ^19.0.0 |
| eslint | ^10.0.0 |
| eslint-plugin-react-hooks | ^7.0.0 |
| jsdom | ^28.0.0 |
| prettier | ^3.9.0 |
| typescript | ~5.9.0 |
| typescript-eslint | ^8.40.0 |
| vitest | ^4.0.0 |
Peer dependencies
| ID | Version |
|---|---|
| @api-platform/admin | ^4.0.0 |
| @mui/icons-material | ^9.0.0 |
| @mui/material | ^9.0.0 |
| @tanstack/react-query | ^5.83.0 |
| react | ^19.0.0 |
| react-admin | ^5.15.0 |
| react-dom | ^19.0.0 |
| react-router-dom | ^7.0.0 |