gilles
7aa8cd2a1c
Spec, plan d'implémentation, design system, documentation de déploiement. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
116 lines
5.1 KiB
HTML
116 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Exemple minimal — mon design system</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<!-- 1. Polices -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
|
|
|
|
<!-- 2. Icônes -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
|
|
<!-- 3. Tokens du design system -->
|
|
<link rel="stylesheet" href="../tokens/tokens.css">
|
|
|
|
<style>
|
|
body { padding: 32px; }
|
|
.row { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
|
|
h2 { font-size: 20px; margin: 32px 0 12px; color: var(--ink-1); }
|
|
h2:first-child { margin-top: 0; }
|
|
p { color: var(--ink-3); margin: 0 0 8px; }
|
|
</style>
|
|
|
|
<!-- 4. React + composants -->
|
|
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="root"></div>
|
|
|
|
<script type="text/babel" src="../components/ui-kit.jsx"></script>
|
|
|
|
<script type="text/babel">
|
|
function App() {
|
|
const [theme, setTheme] = React.useState('dark');
|
|
const [popupOpen, setPopupOpen] = React.useState(false);
|
|
const [auto, setAuto] = React.useState(true);
|
|
|
|
React.useEffect(() => { document.documentElement.dataset.theme = theme; }, [theme]);
|
|
|
|
return (
|
|
<div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24 }}>
|
|
<Icon name="grid" size={28} style={{ color: 'var(--accent)' }} />
|
|
<h1 style={{ margin: 0, fontSize: 28 }}>Exemple minimal</h1>
|
|
<span style={{ flex: 1 }}></span>
|
|
<IconButton icon={theme === 'dark' ? 'sun' : 'moon'}
|
|
label={theme === 'dark' ? 'Mode clair' : 'Mode sombre'}
|
|
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} />
|
|
</div>
|
|
|
|
<h2>Boutons</h2>
|
|
<div className="row">
|
|
<Button>défaut</Button>
|
|
<Button variant="primary" icon="play">primaire</Button>
|
|
<Button variant="ghost" icon="filter">ghost</Button>
|
|
<Button variant="danger" icon="power">danger</Button>
|
|
</div>
|
|
|
|
<h2>Boutons icônes (avec tooltip)</h2>
|
|
<div className="row">
|
|
<IconButton icon="refresh" label="Rafraîchir" />
|
|
<IconButton icon="cog" label="Configurer" primary />
|
|
<IconButton icon="bell" label="Notifications" />
|
|
<IconButton icon="power" label="Arrêter" danger />
|
|
</div>
|
|
|
|
<h2>Statuts</h2>
|
|
<div className="row">
|
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><StatusLed status="ok" /> ok</span>
|
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><StatusLed status="warn" pulse /> warn</span>
|
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><StatusLed status="err" pulse /> err</span>
|
|
<Toggle on={auto} onChange={setAuto} label="Auto-refresh" icon="refresh" />
|
|
</div>
|
|
|
|
<h2>Jauges</h2>
|
|
<div className="row" style={{ alignItems: 'flex-end' }}>
|
|
<RadialGauge value={28} label="DISQUE" />
|
|
<RadialGauge value={64} label="CPU" warnAt={70} errAt={85} />
|
|
<RadialGauge value={92} label="RÉSEAU" warnAt={70} errAt={85} />
|
|
</div>
|
|
<div style={{ maxWidth: 520, marginTop: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
<BatteryGauge compact value={88} label="mémoire" icon="memory" />
|
|
<BatteryGauge compact value={64} label="cpu" icon="cpu" warnAt={70} errAt={85} />
|
|
<BatteryGauge compact value={28} label="disque" icon="disk" />
|
|
<BatteryGauge compact value={92} label="réseau" icon="network" warnAt={70} errAt={85} />
|
|
</div>
|
|
|
|
<h2>Popup</h2>
|
|
<Button variant="primary" icon="cog" onClick={() => setPopupOpen(true)}>Ouvrir la popup</Button>
|
|
<Popup open={popupOpen} onClose={() => setPopupOpen(false)}
|
|
title="Confirmer l'action"
|
|
footer={<>
|
|
<Button variant="ghost" onClick={() => setPopupOpen(false)}>Annuler</Button>
|
|
<Button variant="primary" onClick={() => setPopupOpen(false)}>OK</Button>
|
|
</>}>
|
|
<div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.5 }}>
|
|
Une popup glassmorphism centrée. Clic à l'extérieur ou Échap pour fermer.
|
|
</div>
|
|
</Popup>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
|
root.render(<App />);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|