From bd87e84742729ed10836f308b046127f201ea112 Mon Sep 17 00:00:00 2001 From: Gilles Soulier Date: Fri, 5 Jun 2026 04:18:33 +0200 Subject: [PATCH] feat: scaffolding client Vite/React + design system Gruvbox Co-Authored-By: Claude Opus 4.8 --- client/index.html | 12 + client/src/components/ui-kit.tsx | 658 +++++++++++++++++++++++++++++++ client/src/main.tsx | 10 + client/src/styles/app.css | 14 + client/src/styles/tokens.css | 204 ++++++++++ vite.config.ts | 10 + 6 files changed, 908 insertions(+) create mode 100644 client/index.html create mode 100644 client/src/components/ui-kit.tsx create mode 100644 client/src/main.tsx create mode 100644 client/src/styles/app.css create mode 100644 client/src/styles/tokens.css create mode 100644 vite.config.ts diff --git a/client/index.html b/client/index.html new file mode 100644 index 0000000..cb4f111 --- /dev/null +++ b/client/index.html @@ -0,0 +1,12 @@ + + + + + + System Update + + +
+ + + diff --git a/client/src/components/ui-kit.tsx b/client/src/components/ui-kit.tsx new file mode 100644 index 0000000..9ef52b5 --- /dev/null +++ b/client/src/components/ui-kit.tsx @@ -0,0 +1,658 @@ +// @ts-nocheck +import React from "react"; +/* ============================================================ + ui-kit.jsx + Composants haute-fid Gruvbox Seventies. + Tout est purement décoratif/interactif côté composant. + Effets : transparence (glass), hover glow, click 3D, tooltips. + ============================================================ */ + +const { useState, useRef, useEffect } = React; + +/* ============================================================ + Icônes — Font Awesome 6 Free. + Mapping nom logique → classe FA. Le CSS de FA est chargé en CDN + dans le . Le composant garde la MÊME API qu'avant (name, + size, style) pour ne rien casser ailleurs. + ============================================================ */ +const ICON_MAP = { + cpu: 'microchip', + memory: 'memory', + disk: 'hard-drive', + network: 'network-wired', + clock: 'clock', + grid: 'table-cells', + list: 'list', + cog: 'gear', + alert: 'triangle-exclamation', + bell: 'bell', + server: 'server', + chart: 'chart-line', + bars: 'chart-simple', + terminal: 'terminal', + refresh: 'arrows-rotate', + play: 'play', + pause: 'pause', + power: 'power-off', + sun: 'sun', + moon: 'moon', + search: 'magnifying-glass', + close: 'xmark', + chevR: 'chevron-right', + chevL: 'chevron-left', + chevD: 'chevron-down', + chevU: 'chevron-up', + plus: 'plus', + filter: 'filter', + download: 'download', + folder: 'folder', + node: 'circle-nodes', + user: 'user', +}; + +const Icon = ({ name, size = 16, style }) => { + const fa = ICON_MAP[name] || 'circle-question'; + return ( +