Maintenu

Nova Design System

Bibliothèque de composants Astro - tokens, accessibilité, distribution npm.

Nova Design System est né d'un besoin simple : arrêter de réécrire les mêmes boutons, champs et modales d'un projet à l'autre. Chaque composant est développé avec son interface TypeScript, ses états (hover, focus, disabled) et ses styles isolés en SCSS.

La distribution se fait via npm (paquet public `@unkn0wndo3s/nova-design-system`), avec une pipeline qui vérifie, versionne et publie chaque release en 10 à 20 secondes. Le paquet livre ses sources `.astro`/`.scss` brutes, compilées côté utilisateur.

La suite : adapter progressivement NDS à mes autres projets, y compris hors de l'écosystème Astro - un binding GPUI/Rust est prévu pour File Organizer.

Points clés

29 composants exportés sur npm
Tokens couleur / typo / espacement / rayons, thème clair-sombre
publication npm en ~15 s
Licence maison : usage libre, monétisation du DS interdite

Exploration interactive

Les composants, un à un.

Acte I - Tout part des tokens.

--nds-primary--nds-accent--nds-success-high--nds-warning-high--nds-error-high--nds-surface--nds-text--nds-neutral--nds-radius-md--nds-radius-full--nds-spacing-md--nds-spacing-xlAa--nds-font-monoAa--nds-font-sans

Actions

Quatre intentions, une API.

primary, secondary, ghost, danger - trois tailles, états focus/disabled gérés, rendu <a> ou <button> selon la prop href.

--nds-primary
--nds-on-primary
--nds-radius-md

usage.astro

<Button type="primary" size="md">Déployer</Button>

PrimarySuccessWarningErrorInfo

Feedback

Un statut lisible en un regard.

Cinq types sémantiques × deux variantes (soft/solid). Les couleurs viennent des paires de tokens statut, jamais de valeurs en dur.

--nds-success-high
--nds-warning-high
--nds-error-high

usage.astro

<Badge type="success">En production</Badge>

Formulaires

Un vrai Web Component.

Encapsulé en custom element : état interne, événements, accessibilité clavier - utilisable même hors d'Astro.

--nds-primary
--nds-surface-2
--nds-radius-full

usage.astro

<Toggle id="notifications" data-checked="true" />

E-mail

Formulaires

Label, aide, compteur, erreurs.

Compteur de caractères optionnel, messages liés en aria-describedby, styles de focus et d’erreur issus des tokens.

--nds-border
--nds-text
--nds-error-high

usage.astro

<TextField id="email" label="E-mail" type="email" />

Formulaires

Un select stylable, enfin.

Listbox custom : navigation clavier, fermeture extérieure, valeur synchronisée dans un input caché pour les formulaires natifs.

--nds-surface
--nds-primary
--nds-shadow-md

usage.astro

<Select default="TypeScript">…</Select>

Formulaires

Coche native, peau custom.

L'input natif reste dans le DOM (accessibilité et formulaires gratuits) ; seul le visuel est redessiné avec les tokens.

--nds-primary
--nds-border
--nds-radius-sm

usage.astro

<Checkbox id="cgu" checked />

Data display

Photo, sinon initiales.

Fallback automatique : si l'image manque ou casse, les initiales prennent le relais - le layout ne bouge pas d'un pixel.

--nds-surface-2
--nds-text
--nds-radius-full

usage.astro

<Avatar type="initials" name="Louis Potevin" />

Navigation

Composable, pas configurable.

Pas de prop géante : des sous-composants (PaginationNumber…) à assembler - le pattern de composition utilisé partout dans NDS.

--nds-primary
--nds-neutral
--nds-radius-md

usage.astro

<Pagination><PaginationNumber>1</PaginationNumber>…</Pagination>

Avatar
Badge
Breadcrumb
BreadcrumbItem
Button
Card
Checkbox
Link
ListItem
ListItemSubtitle
ListItemTitle
LoadingBar
Modal
Navbar
Notification
NumericStepper
Pagination
PaginationNumber
Radio
Select
SelectOption
Sidebar
SidebarItem
Tab
TabContent
TabItem
TextField
Toggle
Tooltip

0composants

v1.2.1dernière version npm

npm install @unkn0wndo3s/nova-design-system