qpismont
4242851f9c
- Deleted test files for NavLink, Navbar, NavbarBrand, Progress, Row, SearchBar, Select, Spinner, Textarea, and a basic test for Button. - Introduced a new EmptyLayout component for consistent layout structure. - Added a new login page with a layout that includes a login form and an ASCII art header. - Updated CSS variables for improved styling consistency across components. - Removed Vitest configuration file as it is no longer needed.
218 lines
6.6 KiB
Markdown
218 lines
6.6 KiB
Markdown
# 🎬 Nixi - Plateforme de Streaming
|
|
|
|
Une plateforme de streaming moderne pour films et séries, construite avec **Astro** et un système de composants UI réutilisables auto-contenus.
|
|
|
|
## ✨ Fonctionnalités
|
|
|
|
- 🎨 **Design System complet** avec thème sombre et couleurs violet pastel
|
|
- 📱 **Responsive** avec système de grille flexbox (Bootstrap-like)
|
|
- 🧩 **Composants UI auto-contenus** avec styles scoped
|
|
- ⚡ **Performance optimisée** avec styles scoped par composant
|
|
- 🎭 **Composants spécialisés** pour le streaming (MovieCard, SearchBar)
|
|
- 🔄 **Architecture modulaire** avec réutilisation et composition
|
|
- 🛠️ **Classes utilitaires** Bootstrap-like pour styling rapide
|
|
|
|
## 🏗️ Architecture du Projet
|
|
|
|
```
|
|
/
|
|
├── public/
|
|
│ └── favicon.svg
|
|
├── src/
|
|
│ ├── components/
|
|
│ │ └── ui/ # Composants UI auto-contenus
|
|
│ │ ├── Button.astro # Avec styles intégrés
|
|
│ │ ├── Card.astro # Avec styles intégrés
|
|
│ │ ├── Input.astro # Avec styles intégrés
|
|
│ │ ├── Modal.astro # Avec styles + JS intégrés
|
|
│ │ ├── MovieCard.astro # Compose avec Card.astro
|
|
│ │ ├── SearchBar.astro # Compose avec Input.astro
|
|
│ │ ├── Row.astro # Avec support style prop
|
|
│ │ ├── Col.astro # Responsive breakpoints
|
|
│ │ └── ...
|
|
│ ├── layouts/
|
|
│ │ └── Layout.astro # Variables + Grid seulement
|
|
│ ├── pages/
|
|
│ │ └── index.astro # Page de démo complète
|
|
│ └── styles/
|
|
│ ├── variables.css # Variables + Form base + Utilitaires globales
|
|
│ └── grid.css # Grille + Classes utilitaires responsive
|
|
└── package.json
|
|
```
|
|
|
|
## 🎨 Design System
|
|
|
|
### Couleurs
|
|
|
|
- **Couleur principale** : Violet pastel (`--primary-*`)
|
|
- **Thème sombre** avec nuances de gris
|
|
- **Couleurs sémantiques** : success, warning, error, info
|
|
|
|
### Composants disponibles
|
|
|
|
#### Composants de base
|
|
|
|
- **Button** - Boutons avec variantes (primary, secondary, outline, ghost)
|
|
- **Badge** - Badges colorés
|
|
- **Alert** - Alertes contextuelles
|
|
- **Spinner** - Indicateurs de chargement
|
|
- **Progress** - Barres de progression
|
|
|
|
#### Composants de formulaire
|
|
|
|
- **Input** - Champs de saisie
|
|
- **Textarea** - Zones de texte
|
|
- **Select** - Listes déroulantes
|
|
- **FormGroup/FormLabel/FormError** - Éléments de formulaire
|
|
|
|
#### Composants de mise en page
|
|
|
|
- **Container** - Conteneur responsive
|
|
- **Row/Col** - Système de grille avec breakpoints (xs, sm, md, lg, xl, xxl)
|
|
- **Card** - Cartes avec header/body/footer
|
|
|
|
#### Composants de navigation
|
|
|
|
- **Navbar** - Barre de navigation
|
|
- **Modal** - Modales avec backdrop
|
|
- **Dropdown** - Menus déroulants
|
|
|
|
#### Composants spécialisés streaming
|
|
|
|
- **MovieCard** - Cartes pour films/séries avec poster, titre, rating
|
|
- **SearchBar** - Barre de recherche avec icône
|
|
|
|
## 🏗️ Architecture des Composants
|
|
|
|
### Composition et réutilisation
|
|
|
|
Les composants sont conçus pour être composés ensemble :
|
|
|
|
- **SearchBar** utilise le composant **Input** avec des styles personnalisés
|
|
- **MovieCard** compose avec le composant **Card** de base
|
|
- **ModalHeader** utilise le composant **Button** pour la fermeture
|
|
- Classes `.form-control-base` partagées entre Input, Select et Textarea
|
|
|
|
### Styles scoped
|
|
|
|
Chaque composant contient ses propres styles avec `<style>` scoped :
|
|
|
|
- Isolation CSS automatique par Astro
|
|
- Utilisation de `:global()` pour styler les composants importés
|
|
- Variables CSS globales disponibles dans tous les composants
|
|
|
|
## 🚀 Utilisation des Composants
|
|
|
|
### Exemple basique
|
|
|
|
```astro
|
|
---
|
|
import Button from '../components/ui/Button.astro';
|
|
import Card from '../components/ui/Card.astro';
|
|
import CardBody from '../components/ui/CardBody.astro';
|
|
---
|
|
|
|
<Card>
|
|
<CardBody>
|
|
<h3>Titre du film</h3>
|
|
<p>Description du film...</p>
|
|
<Button variant="primary">Regarder</Button>
|
|
</CardBody>
|
|
</Card>
|
|
```
|
|
|
|
### Système de grille
|
|
|
|
```astro
|
|
---
|
|
import Container from '../components/ui/Container.astro';
|
|
import Row from '../components/ui/Row.astro';
|
|
import Col from '../components/ui/Col.astro';
|
|
---
|
|
|
|
<Container>
|
|
<Row>
|
|
<Col md={6} lg={4}>
|
|
<!-- Contenu colonne 1 -->
|
|
</Col>
|
|
<Col md={6} lg={8}>
|
|
<!-- Contenu colonne 2 -->
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
```
|
|
|
|
### MovieCard pour le streaming
|
|
|
|
```astro
|
|
---
|
|
import MovieCard from '../components/ui/MovieCard.astro';
|
|
---
|
|
|
|
<MovieCard
|
|
title="Titre du Film"
|
|
poster="/path/to/poster.jpg"
|
|
year={2024}
|
|
genre="Action"
|
|
rating={8.5}
|
|
href="/film/titre-du-film"
|
|
/>
|
|
```
|
|
|
|
## 🧞 Commandes
|
|
|
|
Toutes les commandes sont exécutées depuis la racine du projet :
|
|
|
|
| Commande | Action |
|
|
| :------------------------ | :---------------------------------------------- |
|
|
| `npm install` | Installe les dépendances |
|
|
| `npm run dev` | Démarre le serveur de dev sur `localhost:4321` |
|
|
| `npm run build` | Build le site pour la production dans `./dist/` |
|
|
| `npm run preview` | Prévisualise le build en local |
|
|
| `npm run astro ...` | Exécute des commandes CLI Astro |
|
|
| `npm run astro -- --help` | Aide pour la CLI Astro |
|
|
|
|
## 🎯 Développement
|
|
|
|
### Ajouter un nouveau composant
|
|
|
|
1. Créer le composant Astro dans `src/components/ui/`
|
|
2. Intégrer les styles directement dans le composant avec `<style>`
|
|
3. Utiliser les variables CSS globales et classes utilitaires disponibles
|
|
4. Composer avec les composants existants quand possible
|
|
|
|
### Variables CSS disponibles
|
|
|
|
- `--primary-*` : Couleurs principales (violet pastel)
|
|
- `--bg-*` : Couleurs de fond (thème sombre)
|
|
- `--text-*` : Couleurs de texte
|
|
- `--spacing-*` : Espacements (1 à 32)
|
|
- `--radius-*` : Rayons de bordure
|
|
- `--shadow-*` : Ombres
|
|
|
|
### Breakpoints responsive
|
|
|
|
- `xs` : < 576px
|
|
- `sm` : ≥ 576px
|
|
- `md` : ≥ 768px
|
|
- `lg` : ≥ 992px
|
|
- `xl` : ≥ 1200px
|
|
- `xxl` : ≥ 1400px
|
|
|
|
## 📚 Ressources
|
|
|
|
- [Documentation Astro](https://docs.astro.build)
|
|
- [Guide des composants Astro](https://docs.astro.build/en/core-concepts/astro-components/)
|
|
- [CSS Variables MDN](https://developer.mozilla.org/fr/docs/Web/CSS/Using_CSS_custom_properties)
|
|
|
|
## 🚀 Déploiement
|
|
|
|
Ce projet peut être déployé sur n'importe quelle plateforme supportant les sites statiques :
|
|
|
|
- Vercel
|
|
- Netlify
|
|
- GitHub Pages
|
|
- Cloudflare Pages
|
|
|
|
Voir la [documentation de déploiement Astro](https://docs.astro.build/en/guides/deploy/) pour plus de détails.
|