ReadMe
This commit is contained in:
maximus
@@ -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)
|
- ⚡️ **Vite & React 19** : Compilation instantanée, HMR ultra-rapide et prise en charge des dernières fonctionnalités React sans `forwardRef`.
|
||||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
- 🎨 **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
|
## 🚀 Démarrage Rapide
|
||||||
export default defineConfig([
|
|
||||||
globalIgnores(['dist']),
|
|
||||||
{
|
|
||||||
files: ['**/*.{ts,tsx}'],
|
|
||||||
extends: [
|
|
||||||
// Other configs...
|
|
||||||
|
|
||||||
// Remove tseslint.configs.recommended and replace with this
|
### 1. Prérequis
|
||||||
tseslint.configs.recommendedTypeChecked,
|
Assurez-vous d'avoir [Node.js](https://nodejs.org/) (version 18+) et [pnpm](https://pnpm.io/) installés sur votre machine.
|
||||||
// Alternatively, use this for stricter rules
|
|
||||||
tseslint.configs.strictTypeChecked,
|
|
||||||
// Optionally, add this for stylistic rules
|
|
||||||
tseslint.configs.stylisticTypeChecked,
|
|
||||||
|
|
||||||
// Other configs...
|
### 2. Installation
|
||||||
],
|
|
||||||
languageOptions: {
|
Clonez ce template ou copiez les fichiers, puis installez les dépendances avec pnpm :
|
||||||
parserOptions: {
|
|
||||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
```bash
|
||||||
tsconfigRootDir: import.meta.dirname,
|
pnpm install
|
||||||
},
|
|
||||||
// other options...
|
|
||||||
},
|
|
||||||
},
|
|
||||||
])
|
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
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
|
```bash
|
||||||
// eslint.config.js
|
pnpm dev
|
||||||
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...
|
|
||||||
},
|
|
||||||
},
|
|
||||||
])
|
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
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
|
||||||
|
<div className="min-h-screen bg-[#e8e8e8] dark:bg-[#1e293b] text-slate-800 dark:text-slate-100 transition-all duration-300 ease-in-out">
|
||||||
|
{/* Vos composants ici */}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
*(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";
|
||||||
|
|
||||||
|
<Button variant="primary" onClick={() => alert('Action!')}>
|
||||||
|
Sauvegarder
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### Champ de saisie (Inset / Creusé)
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Input } from "@/components/ui/Input";
|
||||||
|
|
||||||
|
<Input
|
||||||
|
label="Adresse Email"
|
||||||
|
type="email"
|
||||||
|
placeholder="contact@gise.be"
|
||||||
|
/>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### Carte (Plateau surélevé)
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Card } from "@/components/ui/Card";
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<h3 className="font-bold">Informations Serveur</h3>
|
||||||
|
<p>Node-01 est opérationnel.</p>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔒 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 <package>` : Pour installer une nouvelle dépendance (équivalent de npm install).
|
||||||
|
* `pnpm add -D <package>` : 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.*
|
||||||
Reference in New Issue
Block a user