ind-ds
Design system pour interfaces industrielles HMI / SCADA
Les design systems grand public ignorent les besoins du contrôle industriel. ind-ds comble ce vide.
Le contexte
Les design systems mainstream ne prévoient ni état « fault », ni priorités d’alarme ISA-18.2, ni chiffres tabulaires par défaut, ni espacements denses au pas de 2 px, ni mode haute visibilité activable en salle de contrôle. J’ai conçu ind-ds pour couvrir exactement ce terrain : des composants pensés pour la supervision et le pilotage industriels, pas pour une page d’accueil marketing.
Ce que contient la bibliothèque
- 114 web components organisés en atomes, molécules et organismes : indicateurs, symboles d’équipement, cartes, panneaux de contrôle, tableaux de bord et interfaces de maintenance.
- Priorités d’alarme conformes à la norme ISA-18.2.
- Tokens de design générés avec Style Dictionary 4, exportés en variables CSS, modules ES, JSON et Dart.
- Wrappers React et Vue générés automatiquement à partir des composants Stencil.
- Binding de données temps réel via MQTT.js, avec des helpers DOM.
- Mode haute visibilité activable à l’exécution, pensé pour les salles de contrôle.
- Trois stratégies de déploiement : web components dans le navigateur, WebView embarquée dans une application native, ou export des tokens seuls pour une implémentation 100 % native.
- Playground Storybook 9 avec outillage d’accessibilité et viewports HMI.
Mon rôle
Projet personnel : conception, architecture et développement intégral. Monorepo pnpm et Turborepo, packages publiés sous le scope npm @ind-ds, accessibilité traitée dès la conception plutôt qu’ajoutée après coup.
Technologies
- Stencil 4
- Web Components
- Style Dictionary 4
- Storybook 9
- MQTT.js
- Turborepo
- pnpm