mautourco-components 0.2.31 → 0.2.32

package/README.md

@@ -5,6 +5,7 @@ Ce dépôt contient la bibliothèque de composants utilisée pour la refonte de
 ## Installation
 
 ### Dans B2B_react
+
 ```bash
 npm install mautourco-components
 ```
@@ -12,48 +13,55 @@ npm install mautourco-components
 ## Utilisation des composants
 
 ### 1. Importer les styles
+
+#### Option 1 : Import unique (recommandé)
+
 ```tsx
 // Dans votre index.tsx ou App.tsx
-// Utilisez les fichiers CSS compilés depuis dist/styles (recommandé)
+// Importez tous les styles en une seule ligne
+import 'mautourco-components/dist/styles/mautourco.css';
+```
+
+#### Option 2 : Imports individuels (si vous n'avez besoin que de certains composants)
+
+```tsx
+// Importez uniquement les styles dont vous avez besoin
 import 'mautourco-components/dist/styles/tokens/tokens.css';
 import 'mautourco-components/dist/styles/components/forms.css';
 import 'mautourco-components/dist/styles/components/typography.css';
 import 'mautourco-components/dist/styles/components/organism/topnavigation.css';
 import 'mautourco-components/dist/styles/components/organism/footer.css';
-
-// Note: Les CSS sont précompilés avec Tailwind v3, donc compatibles avec Tailwind v3 et v4
 ```
 
+**Note:** Les CSS sont précompilés avec Tailwind v3, donc compatibles avec Tailwind v3 et v4. Le fichier `mautourco.css` est généré automatiquement et inclut tous les styles de la bibliothèque.
+
 ### 2. Utiliser les composants
 
 #### Exemple avec des atoms et molecules
+
 ```tsx
 import React from 'react';
-import { 
-  Input, 
-  Checkbox, 
-  Text, 
-  Heading, 
+import {
+  Input,
+  Checkbox,
+  Text,
+  Heading,
   Icon,
-  MultiSelectDropdown 
+  MultiSelectDropdown,
 } from 'mautourco-components';
 
 function App() {
   return (
     <div>
       <Heading level="h1">Mon Application</Heading>
-      
-      <Input 
-        placeholder="Votre nom"
-        icon="user"
-        iconPosition="leading"
-      />
-      
-      <Checkbox 
+
+      <Input placeholder="Votre nom" icon="user" iconPosition="leading" />
+
+      <Checkbox
         label="J'accepte les conditions"
         onChange={(checked) => console.log(checked)}
       />
-      
+
       <Icon name="search" size="md" />
     </div>
   );
@@ -61,6 +69,7 @@ function App() {
 ```
 
 #### Exemple avec des organisms (TopNavigation et Footer)
+
 ```tsx
 import React from 'react';
 import { TopNavigation, Footer, Icon } from 'mautourco-components';
@@ -92,10 +101,10 @@ function App() {
         onLogin={() => console.log('Login')}
         onLogout={() => console.log('Logout')}
       />
-      
+
       {/* Votre contenu principal */}
       <main>...</main>
-      
+
       <Footer
         logo={<Logo />}
         columns={[
@@ -103,7 +112,11 @@ function App() {
             id: 'menu-1',
             title: 'Navigation',
             links: [
-              { label: 'Accueil', href: '/', onClick: () => handleLinkClick({ label: 'Accueil', route: '/' }) },
+              {
+                label: 'Accueil',
+                href: '/',
+                onClick: () => handleLinkClick({ label: 'Accueil', route: '/' }),
+              },
               { label: 'Services', href: '/services' },
             ],
           },
@@ -115,8 +128,18 @@ function App() {
           email: 'info@mautourco.com',
         }}
         socials={[
-          { id: 'fb', label: 'Facebook', href: '#', icon: <Icon name="facebook" size="md" /> },
-          { id: 'in', label: 'LinkedIn', href: '#', icon: <Icon name="linkedin" size="md" /> },
+          {
+            id: 'fb',
+            label: 'Facebook',
+            href: '#',
+            icon: <Icon name="facebook" size="md" />,
+          },
+          {
+            id: 'in',
+            label: 'LinkedIn',
+            href: '#',
+            icon: <Icon name="linkedin" size="md" />,
+          },
         ]}
         homeUrl="/"
         onLinkClick={handleLinkClick}
@@ -129,6 +152,7 @@ function App() {
 ## Composants disponibles
 
 ### Atoms (Composants de base)
+
 - `Input` - Champ de saisie avec variantes
 - `Checkbox` - Case à cocher
 - `Text` - Texte avec variantes de style
@@ -140,17 +164,21 @@ function App() {
 - `SelectedValue` - Affichage de valeur sélectionnée
 
 ### Molecules (Composants composés)
+
 - `MultiSelectDropdown` - Dropdown de sélection multiple
 
 ### Organisms (Composants complexes)
+
 - `TopNavigation` - Navigation responsive avec support mobile/desktop, authentification et gestion d'agence
 - `Footer` - Pied de page responsive avec colonnes de menu, contact et réseaux sociaux
 
 ### Variantes de Spinner
+
 - `ButtonSpinner` - Spinner pour boutons
 - `LoadingSpinner` - Spinner de chargement général
 
 ### Icônes individuelles
+
 - `CheckIcon`, `ChevronIcon`, `CloseIcon`
 - `SearchIcon`, `SettingsIcon`, `UserIcon`
 
@@ -164,6 +192,7 @@ npm update mautourco-components
 ## Développement du package
 
 ### Scripts disponibles
+
 ```bash
 npm run build:package    # Build du package pour distribution
 npm run build-tokens     # Génération des design tokens
@@ -172,6 +201,7 @@ npm publish             # Publication sur npm (après login)
 ```
 
 ### Ajout de nouveaux composants
+
 1. Créez votre composant dans `src/components/`
 2. Ajoutez l'export dans `src/index.ts`
 3. `npm run build:package`
@@ -188,4 +218,4 @@ npm publish             # Publication sur npm (après login)
 
 - **Composant non trouvé** : Vérifiez qu'il est exporté dans `src/index.ts`
 - **Styles manquants** : Assurez-vous d'importer les fichiers CSS nécessaires
-- **Erreur de build** : Vérifiez que tous les composants exportés existent réellement
+- **Erreur de build** : Vérifiez que tous les composants exportés existent réellement

package/dist/styles/mautourco.css

@@ -0,0 +1,40 @@
+/* Auto-generated file - imports all component styles */
+/* This file can be imported instead of individual CSS files */
+
+@import "./tokens/tokens.css";
+
+@import "./components/avatar.css";
+@import "./components/calendar.css";
+@import "./components/checkbox.css";
+@import "./components/dropdown.css";
+@import "./components/forms.css";
+@import "./components/illustration.css";
+@import "./components/molecule/accomodation-docket.css";
+@import "./components/molecule/calendarInput.css";
+@import "./components/molecule/dateTime.css";
+@import "./components/molecule/docket-prices.css";
+@import "./components/molecule/excursion-docket.css";
+@import "./components/molecule/location-dropdown.css";
+@import "./components/molecule/other-service-docket.css";
+@import "./components/molecule/service-selector.css";
+@import "./components/molecule/timePicker.css";
+@import "./components/molecule/toast.css";
+@import "./components/molecule/transfer-docket.css";
+@import "./components/multiselect-dropdown.css";
+@import "./components/organism/card-container.css";
+@import "./components/organism/dialog.css";
+@import "./components/organism/docket.css";
+@import "./components/organism/footer.css";
+@import "./components/organism/multiple-quotation-docket.css";
+@import "./components/organism/pax-selector.css";
+@import "./components/organism/round-trip.css";
+@import "./components/organism/search-bar-transfer.css";
+@import "./components/organism/topnavigation.css";
+@import "./components/organism/transfer-line.css";
+@import "./components/rating-star.css";
+@import "./components/rating-tab.css";
+@import "./components/scrollbar.css";
+@import "./components/segmented-button.css";
+@import "./components/selected-value.css";
+@import "./components/slider.css";
+@import "./components/typography.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.31",
+  "version": "0.2.32",
   "private": false,
   "description": "Bibliothèque de composants Motorco pour le redesign",
   "main": "dist/index.js",