Composants
La partie web importe les composants de Hodi depuis hodi:sdk. Ce sont ceux de l'app, avec leurs tailles, leurs couleurs et leurs trois thèmes : le plugin a l'air d'être de Hodi.
BoutonsAvec un libellé ou une icône, celui de l'IA et celui du lecteur.Réglages et pagesUne page de réglages, ses cartes, ses lignes, la fin d'une longue liste et les cartes de Vue d'ensemble.Pages d'étapesLes pages de l'installation et de J'ai un code : une étape, des tuiles, les boutons.ChampsLe texte, le mot de passe, les codes, les interrupteurs et les choix.Dialogues et messagesLes fenêtres, les messages dans la page et les listes vides.Petits élémentsLes puces, les filtres, l'avatar d'une source et celui d'un foyer.
web/index.tsx
import { Button, SettingRow, SettingsCard } from 'hodi:sdk'Chaque page montre le rendu réel du composant, le code qui le dessine, puis toutes ses props. Les icônes viennent de lucide-react, que le plugin ajoute à ses propres dépendances.
Les règles
- Pas de style en ligne : la page de Hodi refuse les styles en ligne. Le CSS du plugin va dans un fichier, avec des classes préfixées par son id.
- Les couleurs de Hodi : les tokens, jamais une couleur écrite en dur.
- Un composant de Hodi d'abord : le plugin ne dessine son propre composant que pour ce qu'aucun composant de Hodi ne fait.