Les nouveautés d'Akira UI 3.2.0

Un solde mensuel tantôt positif, tantôt négatif se lit mal quand le zéro n’est pas au milieu de l’axe. La version 3.2.0 d’Akira UI, que je viens de publier, règle ce cas en quelques props, et ajoute ce qui manquait aux formulaires : choisir une heure.

Akira UI est une bibliothèque de composants React construite sur les primitives de shadcn. En plus des boutons, des boîtes de dialogue et des tableaux, elle fournit des shells d’application, des blocs prêts à l’emploi, des libellés traduits et un adaptateur Inertia. La 3.2.0 est une version mineure : si vous êtes en 3.1.0, il suffit de mettre à jour le paquet. Les captures reprennent les exemples en anglais de ui.akira-io.com, rendus avec la 3.2.0. Celui du tableau est réduit à une seule ligne.

Un axe centré sur zéro

Un solde se lit mieux avec le zéro au centre, une ligne qui le marque et les pertes d’une autre couleur :

<BarChart
    data={balanceByMonth}
    series={['balance']}
    xKey="month"
    yDomain="symmetric"
    referenceLines={[{ y: 0 }]}
    colorBy={(datum) =>
        Number(datum.balance) < 0 ? 'var(--destructive)' : 'var(--chart-1)'
    }
    yFormat={{ style: 'currency', currency: 'EUR', notation: 'compact' }}
/>

yDomain="symmetric" prend la plus grande valeur absolue, l’arrondit vers le haut et la reporte de l’autre côté. Avec le pic d’avril à 25 296, l’axe va de -30 000 à 30 000. Le rouge vient de colorBy, qui accepte une fonction appelée pour chaque ligne de données ou 'category', qui donne à chaque ligne sa propre couleur de la palette.

L’axe compact avance par paliers de 10 000, mais l’infobulle affiche désormais la valeur exacte par défaut, comme le montre l’infobulle d’avril (€25,296). Pour un classement, il y a variant="lollipop", et valueLabels inscrit la valeur sur chaque marque. Les courbes acceptent yScale="log", et un graphique en aires peut s’estomper en dégradé avec fill="gradient".

Choisir une heure

La bibliothèque avait un DatePicker, mais rien pour l’heure. TimePicker comble ce manque. Dans cet exemple, un entrepôt accepte les retraits de 08:00 à 18:00, toutes les 15 minutes :

<TimePicker
    value={pickup}
    onChange={setPickup}
    minuteStep={15}
    minTime="08:00"
    maxTime="18:00"
/>

On peut taper l’heure dans le champ ou la choisir dans les colonnes, et la valeur revient sous forme de texte HH:mm. Sans hourCycle, le composant demande à Intl.DateTimeFormat le cycle horaire de la locale de dates du UiLocaleProvider : une application en français affiche donc l’heure sur 24 heures sans rien configurer, et une application américaine affiche AM et PM.

Si le formulaire attend un moment précis plutôt qu’une heure de la journée, DateTimePicker associe le calendrier aux mêmes colonnes et renvoie un objet Date. Ici, la fenêtre de maintenance ne peut commencer qu’un jour ouvré de septembre, par pas de 30 minutes :

<DateTimePicker
    value={start}
    onChange={setStart}
    minDate={opensAt}
    maxDate={closesAt}
    disabledDays={isWeekend}
    minuteStep={30}
/>

minDate et maxDate bornent aussi l’heure : le jour même de la limite, les colonnes s’arrêtent à l’heure de cette limite. Les deux sélecteurs ont leurs libellés en français, en portugais et en espagnol.

Un total réparti en parts, au format de la locale

StatBreakdownCard affiche le total à gauche et, à droite, une barre avec un segment par part et une légende en dessous. Chaque segment peut recevoir le focus et affiche dans une infobulle son libellé, sa part et sa valeur exacte. CompositionBar dessine la même barre et sa légende sans la carte, pour l’intégrer dans une carte existante.

Ces pourcentages, comme la tendance de StatCard, suivent maintenant une locale définie sur le provider. Sans elle, ils restent en en-US :

<UiLocaleProvider labels={ptLabels} dateLocale={pt} locale="pt-PT">
    <App />
</UiLocaleProvider>

Les 62.4% de la capture deviennent 62,4% en pt-PT. Une étiquette de langue mal formée comme pt_PT ne fait pas planter le composant, qui repasse en en-US.

Le total du tableau de données

Le total sous le tableau choisit désormais entre singulier et pluriel avec Intl.PluralRules. Un tableau d’une seule ligne affiche « 1 enregistrement » en français, et non plus « 1 enregistrements ».

Autres changements

• NotificationBell affiche un compteur de notifications non lues et un popover, et InertiaNotificationBell interroge le serveur tant que la page est active.
• useFortifyTwoFactor relie les blocs de double authentification à Laravel Fortify.
• Les groupes de navigation peuvent s’imbriquer, et AppSidebar retrouve l’état replié ou déplié qu’il avait enregistré.
• Combobox accepte une fonction de filtre, et CommandDialog transmet ses props au Command interne.
• Une visite guidée ignore les étapes dont la cible est absente de la page, et sa progression ne compte que les étapes affichées.

Pour finir

Chaque composant de cet article a un exemple interactif sur ui.akira-io.com, où vous pouvez essayer les sélecteurs et les graphiques avant de mettre à jour. La liste complète se trouve dans les notes de version, et le paquet est sur npm.