From 938c4dadb85d176c86894cc05f132fedf2e91485 Mon Sep 17 00:00:00 2001 From: maximus Date: Wed, 29 Jul 2026 15:32:08 +0200 Subject: [PATCH] ReadMe --- README.md | 199 ++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 140 insertions(+), 59 deletions(-) diff --git a/README.md b/README.md index c300135..dd4be0f 100644 --- a/README.md +++ b/README.md @@ -1,75 +1,156 @@ -# React + TypeScript + Vite +# 🛡️ AEGIS Boilerplate - Neumorphic UI (Vite + React 19 + Tailwind v4) -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +Un point de départ ultra-performant et esthétique pour la création d'applications web modernes et de tableaux de bord B2B complexes. Ce template intègre un **Design System Neumorphique (Soft UI)** complet, taillé sur mesure pour des interfaces de cybersécurité haut de gamme. -Currently, two official plugins are available: +## ✨ Fonctionnalités Principales -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs) -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) +- ⚡️ **Vite & React 19** : Compilation instantanée, HMR ultra-rapide et prise en charge des dernières fonctionnalités React sans `forwardRef`. +- 🎨 **Tailwind CSS v4** : Configuration moderne sans fichier `tailwind.config.js`, stylisation utilitaire et mode sombre manuel. +- 🎛️ **Design System Neumorphique** : Kit UI complet (Boutons, Cartes, Inputs, Sidebar, Toggles) basé sur l'extrusion et le creusage de la matière. +- 🌓 **Thème Sombre / Clair Synchronisé** : Hook `useTheme` gérant les préférences système et la persistance via `localStorage` avec des transitions fluides à 300ms. +- 🧩 **Architecture Clean** : Organisation modulaire, composants agnostiques, et alias absolus (`@/`). +- 🗄️ **Backend Ready** : Structure préparée pour l'intégration de PocketBase (Auth, DB, Storage). -## React Compiler +--- -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). +## 🛠️ Stack Technique -## Expanding the ESLint configuration +- **Framework** : [React 19](https://react.dev/) +- **Bundler** : [Vite](https://vitejs.dev/) +- **Styling** : [Tailwind CSS v4](https://tailwindcss.com/) +- **Routing** : [React Router v6](https://reactrouter.com/) +- **Icônes** : [Lucide React](https://lucide.dev/) +- **Utilitaires UI** : `clsx` & `tailwind-merge` (Fonction `cn()`) -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: +--- -```js -export default defineConfig([ - globalIgnores(['dist']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... +## 🚀 Démarrage Rapide - // Remove tseslint.configs.recommended and replace with this - tseslint.configs.recommendedTypeChecked, - // Alternatively, use this for stricter rules - tseslint.configs.strictTypeChecked, - // Optionally, add this for stylistic rules - tseslint.configs.stylisticTypeChecked, +### 1. Prérequis +Assurez-vous d'avoir [Node.js](https://nodejs.org/) (version 18+) et [pnpm](https://pnpm.io/) installés sur votre machine. - // Other configs... - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]) +### 2. Installation + +Clonez ce template ou copiez les fichiers, puis installez les dépendances avec pnpm : + +```bash +pnpm install ``` -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: +### 3. Lancer le serveur de développement -```js -// eslint.config.js -import reactX from 'eslint-plugin-react-x' -import reactDom from 'eslint-plugin-react-dom' - -export default defineConfig([ - globalIgnores(['dist']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... - // Enable lint rules for React - reactX.configs['recommended-typescript'], - // Enable lint rules for React DOM - reactDom.configs.recommended, - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]) +```bash +pnpm dev ``` + +L'application sera accessible sur `http://localhost:5173`. Visitez `http://localhost:5173/ui` pour consulter la vitrine interactive des composants (UI Showcase). + +--- + +## 📐 Règle d'Or du Neumorphism + +Pour que l'illusion d'optique Neumorphique (3D souple) fonctionne, **les composants et le fond de la page DOIVENT avoir exactement la même couleur**. + +Ce template utilise deux couleurs maîtresses strictes codées en dur dans les composants : + +* ☀️ **Mode Light** : `#e8e8e8` +* 🌙 **Mode Dark** : `#1e293b` + +⚠️ **Le conteneur racine de toutes vos pages (ex: dans `App.tsx` ou votre Layout) doit impérativement porter ces classes :** + +```tsx +
+ {/* Vos composants ici */} +
+ +``` + +*(Note : La classe `transition-all duration-300 ease-in-out` est indispensable pour que les ombres (box-shadow) s'animent en parfaite synchronisation avec le fond).* + +--- + +## 📂 Architecture des Dossiers + +```text +src/ +├── components/ +│ └── ui/ # UI Kit Neumorphique (Button, Card, Input, Sidebar...) +├── features/ # Logique métier spécifique (ex: auth, serveurs, metrics) +├── hooks/ # Hooks personnalisés (ex: useTheme.ts) +├── pages/ # Écrans de l'application (UiShowcase, Dashboard...) +├── services/ # Appels API, configuration PocketBase +├── utils/ # Fonctions utilitaires (utils.ts avec la fonction cn) +├── App.tsx # Point d'entrée et Routeur (react-router-dom) +├── index.css # Styles globaux et configuration Tailwind v4 (@theme) +└── main.tsx # Rendu React racine + +``` + +--- + +## 🎨 Utilisation du UI Kit + +Tous les composants de base sont situés dans `src/components/ui/` et utilisent la fonction `cn()` pour fusionner intelligemment les classes Tailwind. + +### Bouton (Extrude / Creusé au clic) + +```tsx +import { Button } from "@/components/ui/Button"; + + + +``` + +### Champ de saisie (Inset / Creusé) + +```tsx +import { Input } from "@/components/ui/Input"; + + + +``` + +### Carte (Plateau surélevé) + +```tsx +import { Card } from "@/components/ui/Card"; + + +

Informations Serveur

+

Node-01 est opérationnel.

+ + +``` + +--- + +## 🔒 Variables d'Environnement + +Créez un fichier `.env.local` à la racine du projet pour stocker vos clés secrètes. Toutes les variables exposées au Frontend React doivent commencer par `VITE_`. + +```env +# .env.local (ignoré par Git) +VITE_PB_URL=[http://127.0.0.1:8090](http://127.0.0.1:8090) +VITE_WEB3FORMS_KEY=votre_cle_api_secrete + +``` + +## 📜 Scripts PNPM Disponibles + +* `pnpm dev` : Lance le serveur de développement Vite. +* `pnpm build` : Compile le projet avec TypeScript et génère les fichiers de production dans `dist/`. +* `pnpm preview` : Lance un serveur local pour tester la version de production compilée. +* `pnpm add ` : Pour installer une nouvelle dépendance (équivalent de npm install). +* `pnpm add -D ` : Pour installer une dépendance de développement (équivalent de npm install -D). + +--- + +*Conçu avec rigueur par l'équipe GISE pour le projet AEGIS.* \ No newline at end of file