matts-dinner-component-library 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +58 -23
  2. package/package.json +3 -2
package/README.md CHANGED
@@ -1,14 +1,14 @@
1
1
  # 🍔 Matt's Diner Component Library
2
2
 
3
- Bibliothèque de composants React pour interface de kiosque de restauration rapide.
3
+ Bibliothèque de composants React pour interface de kiosque de restauration rapide. Publiée sur npm.
4
4
 
5
- ![Preview](./docs/hero.jpeg)
5
+ ![Preview](./docs/hero.PNG)
6
6
 
7
7
  ---
8
8
 
9
9
  ## Le projet
10
10
 
11
- Reproduction de mon design Figma vers Storybook pour une borne de commande tactile type McDonald's/KFC.
11
+ Reproduction de mon design Figma vers Storybook pour une borne de commande tactile type McDonald's/KFC. Cette librairie est consommée par l'application [Matt's Diner](https://github.com/Kamat99302/matts-dinner).
12
12
 
13
13
  ⚠️ **Interface Kiosque (1080×1920)**
14
14
 
@@ -16,34 +16,57 @@ Ce projet simule une borne de commande de restaurant.
16
16
 
17
17
  **Meilleur affichage : Desktop ou tablette en mode portrait.**
18
18
 
19
- Non optimisé pour téléphone
19
+ ---
20
+
21
+ ## Installation
22
+
23
+ ```bash
24
+ npm install matts-dinner-component-library
25
+ ```
26
+
27
+ ```jsx
28
+ import { Button, Header, ProductCard } from 'matts-dinner-component-library'
29
+ import 'matts-dinner-component-library/dist/matts-dinner-component-library.css'
30
+ ```
20
31
 
21
32
  ---
22
33
 
23
34
  ## Liens
24
35
 
36
+ - **npm :** [matts-dinner-component-library](https://www.npmjs.com/package/matts-dinner-component-library)
25
37
  - **Storybook live :** [Netlify](https://component-library-mattsdinner.netlify.app/)
26
38
  - **Code source :** [GitHub](https://github.com/Kamat99302/Matt-s-Dinner-Component-Library)
39
+ - **App qui consomme la librairie :** [Matt's Diner](https://matts-dinner.netlify.app/)
27
40
 
28
41
  ---
29
42
 
30
43
  ## Stack technique
31
44
 
32
- React 19 • Storybook 10 • Vite • CSS
45
+ React 19 • Storybook 10 • Vite (library mode) • CSS • npm
46
+
47
+ ---
48
+
49
+ ## Composants (11)
50
+
51
+ - **Badge** — Indicateurs de statut (Nouveau, Populaire) avec variantes square/pill et couleurs
52
+ - **Button** — Boutons d'action avec variantes (primary-black, primary-white, danger) et tailles multiples
53
+ - **CartFooter** — Footer avec résumé panier (bounce animation) ou boutons de navigation, intègre le LanguageSelector. Accepte des labels traduits via props
54
+ - **CartItemCard** — Article dans le panier avec image, options, prix et suppression
55
+ - **CategoryTab** — Navigation par catégorie avec highlight de l'onglet actif
56
+ - **Checkbox** — Personnalisation produit par type (burger, fries, nuggets, hot-drink, cold-drink, ice-cream). Accepte des labels traduits via props
57
+ - **Header** — En-tête avec logo, bouton retour et icône panier (affichage conditionnel)
58
+ - **LanguageSelector** — Drapeaux FR/EN avec animation au clic, remonte la langue choisie via callback
59
+ - **ProductCard** — Carte produit avec image, badge optionnel, nom et prix
60
+ - **ProductHero** — Image héro pour la page détail produit
61
+ - **QuantitySelector** — Sélecteur +/- avec label personnalisable
33
62
 
34
63
  ---
35
64
 
36
- ## Composants (9)
65
+ ## Architecture
66
+
67
+ La librairie est conçue pour être **indépendante de toute logique métier**. Elle ne gère ni les traductions, ni le state global, ni la navigation. Tout est passé via props et callbacks, ce qui permet à l'application consommatrice de garder le contrôle.
37
68
 
38
- - **Badge** - Indicateurs de statut (Nouveau, Populaire)
39
- - **Button** - Boutons d'action
40
- - **CartItemCard** - Article dans le panier
41
- - **CategoryTab** - Navigation par catégorie
42
- - **Checkbox** - Personnalisation (burger/drink/fries)
43
- - **Header** - En-tête de page
44
- - **LanguageSelector** - Changement de langue
45
- - **ProductCard** - Affichage produit
46
- - **QuantitySelector** - Ajustement quantité
69
+ Exemple : les labels des boutons dans CartFooter sont passés en props (`viewCartLabel`, `menuLabel`, `clearCartLabel`), permettant la traduction sans installer i18n dans la librairie.
47
70
 
48
71
  ---
49
72
 
@@ -52,7 +75,8 @@ React 19 • Storybook 10 • Vite • CSS
52
75
  | Composant | Figma | Storybook |
53
76
  |-----------|-------|-----------|
54
77
  | CartItemCard | ![](./docs/cartitemcard-figma.jpeg) | ![](./docs/cartitemcard-storybook.jpeg) |
55
- | Checkbox | ![](./docs/checkbox-figma.jpeg) | ![](./docs/checkbox-storybook.jpeg)
78
+ | Checkbox | ![](./docs/checkbox-figma.jpeg) | ![](./docs/checkbox-storybook.jpeg) |
79
+
56
80
  ---
57
81
 
58
82
  ## Défis techniques résolus
@@ -65,9 +89,17 @@ React 19 • Storybook 10 • Vite • CSS
65
89
  - Problème : `@import` CSS instable
66
90
  - Solution : `.storybook/preview-head.html`
67
91
 
68
- **3. Composants réutilisables**
69
- - Problème : Code hardcodé
70
- - Solution : Props avec variantes (ex: `type="burger"`)
92
+ **3. Composants réutilisables et traduisibles**
93
+ - Problème : Textes hardcodés empêchaient la traduction
94
+ - Solution : Props avec fallbacks (ex: `{viewCartLabel || 'VIEW CART'}`) pour que l'app passe les textes traduits sans que la librairie dépende d'i18n
95
+
96
+ **4. Publication npm**
97
+ - Problème : `npm link` ne fonctionne pas sur les services de déploiement (Netlify)
98
+ - Solution : Publication sur npm avec React en `peerDependencies` pour éviter les doublons, versioning sémantique
99
+
100
+ **5. Build en mode library avec Vite**
101
+ - Problème : Bundler les composants et les assets pour la distribution
102
+ - Solution : Vite library mode + `cpy-cli` pour copier les assets dans le dist
71
103
 
72
104
  ---
73
105
 
@@ -76,14 +108,17 @@ React 19 • Storybook 10 • Vite • CSS
76
108
  Premier projet de bibliothèque de composants. Basé sur un design réalisé par mes soins.
77
109
 
78
110
  J'ai appris :
79
- - Architecture de composants React
111
+ - Architecture de composants React réutilisables via props et callbacks
80
112
  - Scoping CSS et conventions de nommage
81
- - Configuration Storybook
82
- - Reproduction fidèle de designs
113
+ - Configuration Storybook avec stories par variante
114
+ - Build en mode library avec Vite
115
+ - Publication et versioning npm (semver, peerDependencies)
116
+ - Reproduction fidèle de designs Figma
83
117
 
84
118
  ---
85
119
 
86
120
  ## Démarrage
121
+
87
122
  ```bash
88
123
  npm install
89
124
  npm run storybook
@@ -91,4 +126,4 @@ npm run storybook
91
126
 
92
127
  ---
93
128
 
94
- **Matt** • [Portfolio](https://portfoliomattreact.netlify.app/) • [LinkedIn](https://www.linkedin.com/in/matthieu-juan-55568337a/)
129
+ **Matt** • [Portfolio](https://portfoliomattreact.netlify.app/) • [LinkedIn](https://www.linkedin.com/in/matthieu-juan-55568337a/)
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "matts-dinner-component-library",
3
3
  "private": false,
4
- "version": "1.0.0",
4
+ "version": "1.0.2",
5
5
  "type": "module",
6
6
  "main": "./dist/matts-dinner-library.umd.js",
7
7
  "module": "./dist/matts-dinner-library.es.js",
@@ -13,7 +13,8 @@
13
13
  "./dist/matts-dinner-component-library.css": "./dist/matts-dinner-component-library.css"
14
14
  },
15
15
  "files": [
16
- "dist"
16
+ "dist",
17
+ "README.MD"
17
18
  ],
18
19
  "scripts": {
19
20
  "dev": "vite",