matts-dinner-component-library 1.0.0

package/README.md

@@ -0,0 +1,94 @@
+# 🍔 Matt's Diner Component Library
+
+Bibliothèque de composants React pour interface de kiosque de restauration rapide.
+
+![Preview](./docs/hero.jpeg)
+
+---
+
+## Le projet
+
+Reproduction de mon design Figma vers Storybook pour une borne de commande tactile type McDonald's/KFC.
+
+⚠️ **Interface Kiosque (1080×1920)** 
+
+Ce projet simule une borne de commande de restaurant. 
+
+**Meilleur affichage : Desktop ou tablette en mode portrait.**
+
+Non optimisé pour téléphone
+
+---
+
+## Liens
+
+- **Storybook live :** [Netlify](https://component-library-mattsdinner.netlify.app/)
+- **Code source :** [GitHub](https://github.com/Kamat99302/Matt-s-Dinner-Component-Library)
+
+---
+
+## Stack technique
+
+React 19 • Storybook 10 • Vite • CSS
+
+---
+
+## Composants (9)
+
+- **Badge** - Indicateurs de statut (Nouveau, Populaire)
+- **Button** - Boutons d'action
+- **CartItemCard** - Article dans le panier
+- **CategoryTab** - Navigation par catégorie
+- **Checkbox** - Personnalisation (burger/drink/fries)
+- **Header** - En-tête de page
+- **LanguageSelector** - Changement de langue
+- **ProductCard** - Affichage produit
+- **QuantitySelector** - Ajustement quantité
+
+---
+
+## 📸 Figma → Storybook
+
+| Composant | Figma | Storybook |
+|-----------|-------|-----------|
+| CartItemCard | ![](./docs/cartitemcard-figma.jpeg) | ![](./docs/cartitemcard-storybook.jpeg) |
+| Checkbox | ![](./docs/checkbox-figma.jpeg) | ![](./docs/checkbox-storybook.jpeg)
+---
+
+## Défis techniques résolus
+
+**1. Conflits CSS entre composants**
+- Problème : Classes génériques (`.card-container`) créaient des conflits
+- Solution : Nommage scopé par composant (`.cart-item-card`)
+
+**2. Chargement Google Fonts dans Storybook**
+- Problème : `@import` CSS instable
+- Solution : `.storybook/preview-head.html`
+
+**3. Composants réutilisables**
+- Problème : Code hardcodé
+- Solution : Props avec variantes (ex: `type="burger"`)
+
+---
+
+## Apprentissages
+
+Premier projet de bibliothèque de composants. Basé sur un design réalisé par mes soins.
+
+J'ai appris :
+- Architecture de composants React
+- Scoping CSS et conventions de nommage
+- Configuration Storybook
+- Reproduction fidèle de designs
+
+---
+
+## Démarrage
+```bash
+npm install
+npm run storybook
+```
+
+---
+
+**Matt** • [Portfolio](https://portfoliomattreact.netlify.app/) • [LinkedIn](https://www.linkedin.com/in/matthieu-juan-55568337a/)

package/dist/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/dist/matts-dinner-component-library.css

@@ -0,0 +1 @@
+.badge{display:inline-block;padding:.2rem .625rem .125rem;font-size:1.5rem;font-weight:regular;font-family:Bebas Neue;text-transform:uppercase}.badge-pill{border-radius:1.25rem}.badge-yellow{background-color:#ffc700;color:#000}.badge-green{background-color:#29b929;color:#fff}.badge-icon{margin-left:3px;font-size:.9em}.button{border:none;cursor:pointer;transition:transform .1s ease}.button:active{transform:scale(.9)}.button-primary-black{background-color:#ffc700;color:#000}.button-primary-white{background-color:#ffc700;color:#fff}.button-danger{background-color:#e63946;color:#fff}.button-xl{width:32.4375rem;height:8.5rem;border-radius:.75rem;font-size:4.6875rem;font-family:Bebas Neue,sans-serif;font-weight:400;display:flex;align-items:center;justify-content:center}.button-large{max-width:47.688rem;height:6.813rem;font-size:3.438rem;font-weight:700;width:100%;border-radius:6.62rem}.button-medium-inter{width:27.56rem;height:6.56rem;border-radius:.75rem;font-size:2.375rem;letter-spacing:-.27px;font-family:Inter,sans-serif;font-weight:600;display:flex;align-items:center;justify-content:center}.button-medium-bebas{width:27.56rem;height:6.56rem;border-radius:.75rem;font-size:3.125rem;letter-spacing:-.27px;font-family:Bebas Neue,sans-serif;font-weight:400;display:flex;align-items:center;justify-content:center}.button-small{width:13rem;height:4.5rem;border-radius:.5rem;font-size:1.6875rem;font-family:Inter,sans-serif;font-weight:500;display:flex;align-items:center;justify-content:center}.button:disabled{opacity:.5;cursor:not-allowed}.quantity-selector-container{color:#000;display:flex;flex-direction:column;align-items:center;font-family:Inter,sans-serif}.quantity-selector-container p{font-size:2.68rem;font-weight:700;margin-bottom:.4rem}.selector{display:flex;align-items:center;gap:1.4rem}.selector .quantity{font-size:2.3125rem}.selector .remove-btn{width:2.0625rem;height:2.0625rem}.selector .add-btn{width:2.375rem;height:2.375rem}.cart-item-card{display:flex;align-items:flex-start;width:43.125rem;height:15rem;border:2px solid #000;background-color:#f5f5f5;border-radius:.625rem;gap:1.5rem;padding:2.7rem 4rem 2.7rem 1.5rem}.card-left{display:flex;justify-content:center;width:11.25rem;height:8rem;flex-shrink:0}.card-left .product-image{width:100%;height:100%;object-fit:cover;border-radius:5px}.card-center{display:flex;flex:1;flex-direction:column;justify-content:space-between;height:8rem}.product-name{font-family:Bebas Neue,sans-serif;font-weight:550;font-size:2.625rem;margin:0}.product-options{font-family:Inter,sans-serif;color:#666;font-size:1.375rem;margin:0 0 .5rem}.product-info-group{display:flex;flex-direction:column;gap:.2rem}.card-center .quantity-selector-container{flex-direction:row;align-items:center;gap:1.2em}.card-center .quantity-selector-container p{font-family:Inter,sans-serif;font-size:1.5rem;margin:0}.card-center .selector{gap:.8rem}.card-center .selector .quantity{font-family:Inter,sans-serif;font-size:1.5rem}.card-center .selector .remove-btn{width:1.313rem;height:1.313rem}.card-center .selector .add-btn{width:1.6rem;height:1.6rem}.card-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;height:8rem}.card-product-price{font-family:Bebas Neue,sans-serif;font-size:2.625rem}.delete-icon{width:1.68rem;height:1.68rem;cursor:pointer;margin-left:5}.product-name,.card-product-price{line-height:.8}nav{display:flex;justify-content:center;font-family:Inter,sans-serif;width:100%}ul{display:inline-flex;gap:6.2rem;list-style-type:none;margin:0;padding:0}li{transition:transform .1s ease;font-size:2.5rem;font-weight:700;color:#999;cursor:pointer}li:active{transform:scale(.9)}li.highlighted{color:#000;text-decoration:underline;text-decoration-color:#ffc700;text-decoration-thickness:.3125rem;text-underline-offset:.5rem}.customization-section,.customization-section *{box-sizing:border-box}.customization-form{display:flex;flex-direction:column;gap:16px}.customization-section{border:2px solid #000;border-radius:0;padding-left:1.2rem;width:29rem;background-color:#f5f5f5;margin-inline:0;min-inline-size:0}.customization-section legend{text-align:left;line-height:normal;font-family:Inter,sans-serif;font-size:2.1875rem;font-weight:700;padding:0 .5rem}.customization-section .options{display:flex;margin-left:3px;gap:6px;justify-content:center;align-items:center;text-align:left}.customization-section input{border:1px solid black;margin-right:.5rem;height:1.25rem;width:1.25rem;appearance:none;-webkit-appearance:none;background-color:#fff}.customization-section input:checked{background-color:#000;position:relative;flex-shrink:0}.customization-section input:checked:after{content:"✓";color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.9rem;flex-shrink:0}.customization-section label{font-family:Inter,sans-serif;font-size:1.6rem;margin-right:.3rem;font-weight:600}.header{box-sizing:border-box;margin:0;width:67.5rem;height:25rem;background-color:#ffc700;overflow:hidden;flex-shrink:0;align-items:flex-start;display:flex;justify-content:space-between;padding:2rem}.header-left,.header-right{width:7rem;flex-shrink:0;display:flex;align-items:flex-start}.header-logo{position:absolute;height:29.56rem;width:54.313rem;align-self:center;left:10%;margin-top:1em}.icon-back{width:5.25rem;height:5.25rem;cursor:pointer;transition:transform .1s ease}.icon-back:active,.icon-cart:active{transform:scale(.9)}.icon-cart{width:8rem;height:4.875rem;cursor:pointer;transition:transform .1s ease}.header{position:relative}.flag-container{display:flex;justify-content:center;gap:3rem}img[alt=French]{width:4.875rem;height:4.875rem}img[alt=English]{width:4.6875rem;height:4.6875rem}img[alt=English],img[alt=French]{transition:transform .1s ease}img[alt=English]:active,img[alt=French]:active{transform:scale(.9)}.card-container{width:22.563rem;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:transform .1s ease}.card-container:active{transform:scale(.9)}.image-wrapper{position:relative;width:21.063rem;height:15rem;margin-bottom:1rem}.image-wrapper .badge{position:absolute;z-index:10}.image-wrapper img{width:100%;height:100%}.card-container p,.product-price{font-family:Bebas Neue,sans-serif;font-size:2.875rem;text-align:center;margin:0 0 .5rem}.product-hero-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.product-hero-container img{width:35.5rem;height:24.5rem;border-radius:16px}.product-hero-container p{margin:0;font-family:Bebas Neue,sans-serif;font-size:5rem;text-align:center}.cart-footer-container{display:flex;align-items:center;gap:5em;height:13.1rem;width:100%;background-color:#ffc107;margin-top:auto}.cart-footer-container .cart-footer-section{display:flex;align-items:center;height:8rem;width:45rem;background-color:#fff;border-radius:20px;margin-left:2.1em;justify-content:space-between}.view-cart-btn{margin-right:4.2rem;margin-top:.4rem}.footer-cart-btn{display:flex;margin-left:5rem;align-items:center;justify-content:center;gap:8em}.cart-footer-info{display:flex;align-items:center;margin-left:1.3em}.cart-footer-icon{width:6rem;height:3.62rem}.cart-footer-price{margin-left:.6rem}.cart-footer-nb-items,.cart-footer-price{font-family:Inter,sans-serif;font-size:1.87rem;font-weight:700}.cart-footer-price,.cart-footer-nb-item-number{color:#4d9c07}.language-selector-container{display:flex;align-items:center}@keyframes cartBounce{0%{transform:scale(1)}30%{transform:scale(1.3) rotate(-10deg)}60%{transform:scale(1.1) rotate(10deg)}to{transform:scale(1)}}.cart-footer-icon.bounce{animation:cartBounce .4s ease}