@sia-ui/react-web

Les composants SIA UI pour le DOM.

pnpm add @sia-ui/react-web

import { Button, DataTable, DatePicker } from "@sia-ui/react-web";
import "@sia-ui/react-web/styles.css";

113 composants, pensés pour les applications de gestion : une page CRUD dérivée d'une seule déclaration (defineResource + CrudPage), un tableau synchronisé avec l'URL, des champs métier (montants, téléphone, référence), la session et ses droits (RequireSession, Can), un calendrier d'événements, le suivi d'opérations longues (JobProgress, LogStream) et la coquille d'écran (AppShell, AccountMenu).

Langues et valeurs par défaut

import { ENGLISH } from "@sia-ui/headless";
import { SiaProvider } from "@sia-ui/react";

<SiaProvider locale={ENGLISH} defaults={{ button: { variant: "outline" } }}>
  <App />
</SiaProvider>

Français par défaut, anglais livré, et aucun texte en dur : une application qui a sa propre i18n remplit le même format SiaLocale. Une prop passée à l'appel gagne toujours.

Ou copier le code

npx sia-ui add data-table

Le fichier installé est exactement celui de ce paquet.

Place dans SIA UI

@sia-ui/tokens      valeurs : couleurs, espacements, mouvement, vocabulaire
@sia-ui/utils       fonctions sans dépendance
@sia-ui/api         client HTTP — indépendant de l'interface
@sia-ui/headless    comportement, avec React, sans plateforme
@sia-ui/react       primitives de runtime DOM
@sia-ui/react-web   composants DOM
@sia-ui/react-native  composants natifs, à venir

Une chose s'écrit au niveau le plus bas où elle a du sens, et une seule fois. Voir la documentation.

Contribuer

Le code source principal de SIA UI est privé pour le moment. Les retours publics passent par le dépôt BeatJo/sia-ui-site : bugs, demandes de composants, corrections de documentation et questions d'usage.

• Signaler un bug : https://github.com/BeatJo/sia-ui-site/issues
• Lire la documentation : https://beatjo.github.io/sia-ui-site/
• Voir la démonstration : https://beatjo.github.io/sia-ui-site/preview/

Les contributions directes au code des packages se font sur invitation dans le dépôt source privé.

Journal des changements

Le contenu ci-dessous reprend intégralement CHANGELOG.md pour rester visible sur npm.

@sia-ui/react-web

0.8.0

Minor Changes

• Français et anglais livrés, temps réel, calendrier réécrit, suivi d'opérations.
  • Deux langues — FRENCH et ENGLISH (@sia-ui/headless), au format SiaLocale : la langue de formatage (language), le vocabulaire commun et un groupe typé par composant. Plus aucun texte en dur dans les composants, aria-label compris ; dates, nombres et pluriels suivent language. Une application qui a sa propre i18n remplit le même format. formatMessage et plural ({count}, clés _one / _other). ENGLISH_STATUS_MESSAGES (@sia-ui/api) à côté de FRENCH_STATUS_MESSAGES. Seul changement de forme : EventCalendarLabels.more, qui était une fonction, devient more_one / more_other avec {count}.
  • SiaProvider seul fournisseur — il prend locale et defaults, et s'imbrique pour une section. SiaConfigProvider est obsolète.
  • Temps réel — createRealtimeBinding, socketIoSource, eventSourceSource (@sia-ui/api), useRealtimeStatus, LiveIndicator.
  • EventCalendar réécrit — vues mois, semaine, jour, agenda ; variantes ; mode étroit. EventManager : créer, consulter, modifier, supprimer.
  • Nouveaux composants — AccountMenu, ColorModeToggle, LogStream, JsonView, JobProgress, BrandIcon ; SunIcon, MoonIcon.
  • Formulaires — validateAsync par champ, submitProps.disabled respecté ; controlProps sur une propriété de ressource.
  • Tons lisibles en mode sombre — --sia-<ton>-foreground, calculés pour le contraste ; noms de variables CSS en kebab-case.
  • Couches en portail — menus, calendriers, boîtes et toasts, rendus hors de [data-sia-root], reprennent la police et la couleur de texte du système au lieu de celles du navigateur.
  • Drawer et Modal — la fermeture est signalée tout de suite ; un double clic à l'ouverture ne referme plus.
  • Documentation — la présentation décrit chaque brique métier (session, greffons d'API, ressources, formulaires, temps réel, langues, utilitaires) avec son scénario et un exemple.
  • Props des sous-composants — chaque composant composé expose celles de ce qu'il utilise (…Props) ; pnpm check:slot-props le vérifie.

Patch Changes

• Updated dependencies
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]

0.7.1

Patch Changes

• Select : la liste des options défile de nouveau.

  Le panneau était une grille ; la liste y gardait la hauteur de tout son contenu, débordait au lieu de défiler, et l'overlay la coupait. Au-delà d'une dizaine d'options, les dernières étaient inatteignables — y compris dans PhoneInput, la taille de page de Pagination et les filtres d'ActivityLog. L'option active suit aussi le clavier, et le défilement de la liste ne se propage plus à la page.

• Updated dependencies

  • @sia-ui/[email protected]
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]

0.7.0

Minor Changes

• Adaptateur TanStack Router, mises à jour en PATCH, et secretChanges.
  • useDataTableQuery({ router }) — adaptateur TanStack Router livré et testé (createTanStackRouterStorage). La recette de la documentation mettait page=2 entre guillemets (page=%222%22) et la page retombait à 1 ; les nombres passent désormais comme nombres, sans perte pour les filtres.
  • Un tableau n'écrit plus que ses propres clés (mergeTableQuery dans @sia-ui/headless) : deux tableaux préfixés sur une page, ou un onglet dans l'URL, ne s'effacent plus l'un l'autre — avec l'URL du navigateur comme avec un routeur.
  • createQueryResource(service, { updateMethod: "PATCH" }) — pour une API qui n'accepte que des mises à jour partielles.
  • secretChanges(entries, storedKeys) — ce qu'il faut envoyer après une saisie dans SecretFields : { set, remove, missing }.

Patch Changes

• Updated dependencies
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]

0.6.0

Minor Changes

• Rôles, requêtes serveur, ressources par mode, et deux blocs de console.
  • Rôles — la couche d'accès lit les rôles de la session sous la forme role:<nom> (role("admin")), avec les trois évaluateurs.
  • Tableaux servis par le serveur — useDataTableQuery accepte un storage (TanStack Router, React Router) et serverParams pour les noms attendus (limit, sort + order, ASC/DESC). toServerParams dans @sia-ui/headless.
  • TanStack Query — createQueryResource(service) : clés emboîtées, options de requête avec annulation, mutations qui invalident ce qu'elles rendent périmé. Aucune dépendance à TanStack.
  • Ressources — inForm et required par mode ("create", "edit"), value pour une colonne calculée.
  • En-têtes — PageHeader level, CrudPage headingLevel. Le repli suit la place disponible ; les actions ne s'écrasent plus.
  • Nouveaux — SecretFields (secrets en écriture seule), ActivityLog (journal filtré par le serveur), StatusBadge et toneOf, dix icônes de console.
  • Les icônes des boutons de CrudPage et DataTable passent par leftIcon : elles ne se collent plus au libellé.

Patch Changes

• Updated dependencies
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]

0.5.0

Minor 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 ».

• Pagination, téléphone et recherche du Select.

  • Pagination propose le nombre de lignes par page : pageSize, onPageSizeChange, pageSizeOptions, pageSizeLabel, et renderPageSize pour remplacer le contrôle. CrudPage transmet les trois premières. Nouvelle clé de libellé perPage (« Par page »).
  • La page courante de Pagination n'est plus blanche sur blanc au survol.
  • PhoneInput choisit l'indicatif dans le Select du système, avec recherche, à la place du <select> natif.
  • Select : variant="embedded" et renderValue ; recherche insensible aux accents ; Entrée choisit le premier résultat après un filtrage.

Patch Changes

• Updated dependencies
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]

0.4.0

Minor Changes

• Améliore la navigation et les réglages responsives : le Drawer conserve ses classes internes avec une className personnalisée, anime correctement ses quatre positions et expose une fermeture explicite dans AppShell. Uniformise les scrollbars globales, allège les sous-menus du Sidebar, renforce le contraste du ToggleGroup, ajoute SettingsIcon et fournit AppShellBrand ainsi qu'AppShellRailItem pour adapter automatiquement icônes et libellés au rail réduit.

0.3.2

Patch Changes

• Ajoute l’identité visuelle officielle de SIA UI et améliore la documentation publique, les changelogs et les ressources de contribution.
• Updated dependencies
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]

0.3.1

Patch Changes

• Expose public contribution flow on npm
• Updated dependencies
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]

0.3.0

Minor Changes

• Une ressource se déclare une fois, cinq composants refondus, et une documentation qui décrit le produit plutôt que son développement.

  Déclarer une ressource

  defineResource décrit un objet métier une seule fois. Les colonnes du tableau, les champs du formulaire, les lignes de la vue de détail, la validation, les clés de recherche et les quatre règles de droits en sont dérivés — et chaque dérivation reste remplaçable par la prop correspondante.

  <CrudPage resource={FACTURE} data={factures} can={can}
            onSubmit={…} onDelete={…} />

  Le rendu se déduit du type : un currency s'affiche formaté et aligné à droite, un select avec ses tones devient une pastille, une date passe par le format local. permissions: "auto" applique la convention <nom>.<verbe>.

  Les quatre opérations ouvrent leurs propres boîtes

  CrudPage n'appelle plus seulement un gestionnaire : déclarer fields et onSubmit suffit à obtenir un formulaire vide en création, le même prérempli en modification, et une vue de détail. onCreate, onEdit et onView restent la porte de sortie vers une page dédiée — fournis, ils passent devant la boîte.

  Les boîtes n'inventent rien : Modal pour la boîte, Form pour la saisie, Descriptions pour la lecture.

  Cinq composants refondus

  • Sidebar — le rail réduit n'enferme plus ses sous-menus : ils sortent en volet. Profondeur illimitée, droits en cascade, trois variantes.
  • AppShell — se branche sur n'importe quel routeur par une seule chaîne, l'adresse courante. Trois états de barre, tiroir ou onglets bas sur mobile, filtrage des droits fait une seule fois.
  • Avatar — teinte dérivée du nom, repli peint sous l'image, quatre états de présence, et des piles qui résument leur surplus.
  • DataTable — actions de ligne avec droits et confirmation, sélection et barre groupée, vue en cartes, trois densités, états de chargement, d'erreur et de vide.
  • CrudPage — réécrit : il tenait en neuf lignes et n'offrait aucune des quatre opérations qui lui donnent son nom.

  Ruptures

  • CrudPage : actions portait des nœuds d'en-tête, ils vont dans headerActions. data est requis, et columns l'est aussi à moins qu'une resource ne les fournisse.
  • Sidebar et AppShell : les props ont changé. Voir La navigation latérale et La coquille d'application.

  Documentation

  Les cent trois composants ont désormais une page de référence — ce qu'ils font, comment les installer, et toutes leurs props avec type et valeur par défaut. Ces pages sont écrites par le code : les props viennent des types, les descriptions de leurs commentaires, la commande d'installation du registre.

  Le catalogue est passé de seize sections en deux langues à neuf, ordonnées du plus général au plus assemblé. Les comptes rendus de développement ont été retirés de la documentation : ils décrivaient un chemin parcouru, pas un produit.

Patch Changes

• Updated dependencies
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]

0.2.0

Minor Changes

• e4e4a72: Annonces, session et droits, formulaires sans dépendance, et vingt entrées de registre de plus.

  Composants

  • Annonces — toast() s'appelle hors de React, variante loading, boutons d'action, six coins réglables par annonce, balayage pour écarter, suivi de promesse.
  • Session et droits — createSessionStore avec sa machine à quatre états, createAccessLayer à évaluateur injecté, RequireSession sans routeur.
  • Formulaires — le contrat FormAdapter et useLocalForm, sans dépendance. Form est écrit sur le contrat : il n'importe ni react-hook-form ni zod, et se câble à l'un ou l'autre par un adaptateur.
  • Vingt entrées de registre de plus — progress, dropdown-menu, accordion, sidebar, breadcrumb, steps, toggle, scroll-area, hover-card, aspect-ratio, input-number, password-input, phone-input, chart, require-session, form…
  • Thème — mode system, persistance et script anti-clignotement dans SiaProvider, en remplacement de next-themes.

  @sia-ui/api

  Le client HTTP typé est un paquet à part : ni React, ni DOM, ni tokens. Il s'installe seul, et copier un Badge depuis le registre ne l'entraîne pas.

  Utilitaires

  @sia-ui/utils passe de six à quatorze modules : query, async, collection, object, validation, file, clipboard, locale.

  Archives

  • Plus de sourcemaps : elles pesaient environ soixante pour cent de chaque archive — @sia-ui/react-web passe de 2,1 Mo à 759 Ko.
  • Chaque paquet porte enfin la licence MIT qu'il annonce.

  Vitrine en ligne

  Trois surfaces publiées sur GitHub Pages à chaque poussée sur main : la documentation à la racine, le catalogue Storybook sous /storybook/, la démonstration sous /preview/. Le site de documentation est construit depuis les fichiers de docs/ eux-mêmes, qui restent du Markdown ordinaire.

  Le registre n'est plus une voie sans retour

  Installer était jusqu'ici définitif : plus rien ne disait ce qu'on avait, ce qu'on avait retouché, ni ce qui avait bougé en amont — donc rien ne permettait de corriger ni de déprécier une entrée après coup.

  • sia-ui.lock.json, écrit à chaque add : version, date et empreinte de chaque fichier copié.
  • Quatre commandes : diff, remove, doctor, list --outdated. remove refuse de casser un voisin ou d'effacer un fichier retouché.
  • Cycle de vie des entrées — experimental, stable, deprecated, removed — avec replacedBy. add refuse ce qui est retiré, doctor signale ce qui est déprécié chez qui l'a déjà installé.
  • Journal du registre, entrée par entrée, dont pnpm check:changelog refuse qu'il mente.
  • Registre servi en HTTP, versionné par l'URL : …/r/v1/. Corriger une entrée n'oblige plus à republier la CLI.

  Corrections

  • La case à cocher et le bouton radio masquaient leur contrôle natif en opacity:0. Le navigateur le peignait encore sous le visuel personnalisé, et ce dessin clignotait au clic. Les deux utilisent désormais la recette partagée .sia-visually-hidden, qui le découpe hors du rendu sans le retirer du clavier.
  • Une case à cocher non contrôlée ne se peignait jamais cochée : l'<input> basculait, mais la classe qui dessine la case ne suivait pas.
  • Le curseur de survol des graphes était ovale, et le tracé de la courbe haché : les marqueurs sont sortis du SVG, qui est étiré sans conserver ses proportions.
  • L'entrée drawer du registre était impossible à installer — elle importait deux dossiers que la CLI ne copie pas.

Patch Changes

• Updated dependencies [e4e4a72]
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]
  • @sia-ui/[email protected]

Licence

MIT