mautourco-components 0.2.5 → 0.2.7

package/README.md

@@ -1,191 +1,191 @@
-# Motorco - Bibliothèque de composants
-
-Ce dépôt contient la bibliothèque de composants utilisée pour la refonte de B2B_react. Le package est publié sur npm afin de faciliter son intégration continue dans le projet.
-
-## Installation
-
-### Dans B2B_react
-```bash
-npm install mautourco-components
-```
-
-## Utilisation des composants
-
-### 1. Importer les styles
-```tsx
-// Dans votre index.tsx ou App.tsx
-// Utilisez les fichiers CSS compilés depuis dist/styles (recommandé)
-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
-```
-
-### 2. Utiliser les composants
-
-#### Exemple avec des atoms et molecules
-```tsx
-import React from 'react';
-import { 
-  Input, 
-  Checkbox, 
-  Text, 
-  Heading, 
-  Icon,
-  MultiSelectDropdown 
-} from 'mautourco-components';
-
-function App() {
-  return (
-    <div>
-      <Heading level="h1">Mon Application</Heading>
-      
-      <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>
-  );
-}
-```
-
-#### Exemple avec des organisms (TopNavigation et Footer)
-```tsx
-import React from 'react';
-import { TopNavigation, Footer, Icon } from 'mautourco-components';
-import type { TopNavigationProps, FooterProps } from 'mautourco-components';
-
-// Exemple avec TopNavigation
-const navigationLinks = [
-  { label: 'Accueil', route: '/', isButton: false },
-  { label: 'Services', route: '/services', isButton: false },
-  { label: 'Contact', route: '/contact', isButton: true },
-];
-
-const Logo = () => <Icon name="mautourcoLogo" size="md" />;
-
-function App() {
-  const handleLinkClick = (link: { label: string; route: string }) => {
-    // Gérer la navigation (ex: avec React Router)
-    console.log('Navigation vers:', link.route);
-  };
-
-  return (
-    <div>
-      <TopNavigation
-        links={navigationLinks}
-        logoUrl={Logo}
-        homeUrl="/"
-        active="Accueil"
-        onLinkClick={handleLinkClick}
-        onLogin={() => console.log('Login')}
-        onLogout={() => console.log('Logout')}
-      />
-      
-      {/* Votre contenu principal */}
-      <main>...</main>
-      
-      <Footer
-        logo={<Logo />}
-        columns={[
-          {
-            id: 'menu-1',
-            title: 'Navigation',
-            links: [
-              { label: 'Accueil', href: '/', onClick: () => handleLinkClick({ label: 'Accueil', route: '/' }) },
-              { label: 'Services', href: '/services' },
-            ],
-          },
-        ]}
-        contact={{
-          title: 'Contact',
-          addressLines: ['84, Gustave Colin Street', 'Forest Side 74414, Mauritius'],
-          phone: '+ (230) 604 3000',
-          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" /> },
-        ]}
-        homeUrl="/"
-        onLinkClick={handleLinkClick}
-      />
-    </div>
-  );
-}
-```
-
-## Composants disponibles
-
-### Atoms (Composants de base)
-- `Input` - Champ de saisie avec variantes
-- `Checkbox` - Case à cocher
-- `Text` - Texte avec variantes de style
-- `Heading` - Titres (h1, h2, h3, etc.)
-- `Icon` - Icônes avec différentes tailles
-- `Spinner` - Indicateur de chargement
-- `Textarea` - Zone de texte multi-lignes
-- `DropdownInput` - Champ de saisie avec dropdown
-- `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`
-
-## Mise à jour du package
-
-```bash
-# Dans votre projet
-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
-npm run storybook        # Démarre Storybook
-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`
-4. `npm publish`
-
-## Notes importantes
-
-- **Styles** : Les composants nécessitent l'import des fichiers CSS correspondants depuis `dist/styles/`
-- **CSS compilés** : Les CSS sont précompilés avec Tailwind v3 lors du build, donc compatibles avec Tailwind v3 et v4
-- **TypeScript** : Tous les composants sont typés
-- **Design tokens** : Générés automatiquement depuis le dossier `tokens/`
-
-## Dépannage
-
-- **Composant non trouvé** : Vérifiez qu'il est exporté dans `src/index.ts`
-- **Styles manquants** : Assurez-vous d'importer les fichiers CSS nécessaires
+# Motorco - Bibliothèque de composants
+
+Ce dépôt contient la bibliothèque de composants utilisée pour la refonte de B2B_react. Le package est publié sur npm afin de faciliter son intégration continue dans le projet.
+
+## Installation
+
+### Dans B2B_react
+```bash
+npm install mautourco-components
+```
+
+## Utilisation des composants
+
+### 1. Importer les styles
+```tsx
+// Dans votre index.tsx ou App.tsx
+// Utilisez les fichiers CSS compilés depuis dist/styles (recommandé)
+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
+```
+
+### 2. Utiliser les composants
+
+#### Exemple avec des atoms et molecules
+```tsx
+import React from 'react';
+import { 
+  Input, 
+  Checkbox, 
+  Text, 
+  Heading, 
+  Icon,
+  MultiSelectDropdown 
+} from 'mautourco-components';
+
+function App() {
+  return (
+    <div>
+      <Heading level="h1">Mon Application</Heading>
+      
+      <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>
+  );
+}
+```
+
+#### Exemple avec des organisms (TopNavigation et Footer)
+```tsx
+import React from 'react';
+import { TopNavigation, Footer, Icon } from 'mautourco-components';
+import type { TopNavigationProps, FooterProps } from 'mautourco-components';
+
+// Exemple avec TopNavigation
+const navigationLinks = [
+  { label: 'Accueil', route: '/', isButton: false },
+  { label: 'Services', route: '/services', isButton: false },
+  { label: 'Contact', route: '/contact', isButton: true },
+];
+
+const Logo = () => <Icon name="mautourcoLogo" size="md" />;
+
+function App() {
+  const handleLinkClick = (link: { label: string; route: string }) => {
+    // Gérer la navigation (ex: avec React Router)
+    console.log('Navigation vers:', link.route);
+  };
+
+  return (
+    <div>
+      <TopNavigation
+        links={navigationLinks}
+        logoUrl={Logo}
+        homeUrl="/"
+        active="Accueil"
+        onLinkClick={handleLinkClick}
+        onLogin={() => console.log('Login')}
+        onLogout={() => console.log('Logout')}
+      />
+      
+      {/* Votre contenu principal */}
+      <main>...</main>
+      
+      <Footer
+        logo={<Logo />}
+        columns={[
+          {
+            id: 'menu-1',
+            title: 'Navigation',
+            links: [
+              { label: 'Accueil', href: '/', onClick: () => handleLinkClick({ label: 'Accueil', route: '/' }) },
+              { label: 'Services', href: '/services' },
+            ],
+          },
+        ]}
+        contact={{
+          title: 'Contact',
+          addressLines: ['84, Gustave Colin Street', 'Forest Side 74414, Mauritius'],
+          phone: '+ (230) 604 3000',
+          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" /> },
+        ]}
+        homeUrl="/"
+        onLinkClick={handleLinkClick}
+      />
+    </div>
+  );
+}
+```
+
+## Composants disponibles
+
+### Atoms (Composants de base)
+- `Input` - Champ de saisie avec variantes
+- `Checkbox` - Case à cocher
+- `Text` - Texte avec variantes de style
+- `Heading` - Titres (h1, h2, h3, etc.)
+- `Icon` - Icônes avec différentes tailles
+- `Spinner` - Indicateur de chargement
+- `Textarea` - Zone de texte multi-lignes
+- `DropdownInput` - Champ de saisie avec dropdown
+- `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`
+
+## Mise à jour du package
+
+```bash
+# Dans votre projet
+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
+npm run storybook        # Démarre Storybook
+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`
+4. `npm publish`
+
+## Notes importantes
+
+- **Styles** : Les composants nécessitent l'import des fichiers CSS correspondants depuis `dist/styles/`
+- **CSS compilés** : Les CSS sont précompilés avec Tailwind v3 lors du build, donc compatibles avec Tailwind v3 et v4
+- **TypeScript** : Tous les composants sont typés
+- **Design tokens** : Générés automatiquement depuis le dossier `tokens/`
+
+## Dépannage
+
+- **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

package/dist/components/atoms/Avatar/Avatar.d.ts

@@ -1,14 +1,14 @@
-import React from "react";
-export type AvatarSize = "sm" | "md" | "lg" | "xl";
-export type AvatarShape = "circle" | "rounded";
-export type AvatarColor = "gray" | "blue" | "pink" | "orange" | "green";
-export interface AvatarProps {
-    src?: string;
-    alt?: string;
-    name?: string;
-    size?: AvatarSize;
-    shape?: AvatarShape;
-    color?: AvatarColor;
-    className?: string;
-}
-export declare const Avatar: React.FC<AvatarProps>;
+import React from "react";
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+export type AvatarShape = "circle" | "rounded";
+export type AvatarColor = "gray" | "blue" | "pink" | "orange" | "green";
+export interface AvatarProps {
+    src?: string;
+    alt?: string;
+    name?: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    color?: AvatarColor;
+    className?: string;
+}
+export declare const Avatar: React.FC<AvatarProps>;

package/dist/components/atoms/Avatar/Avatar.js

@@ -1,31 +1,31 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-// src/components/Avatar.tsx
-import React from "react";
-// styling is driven by semantic classnames defined in `src/styles/components/avatar.css`
-export var Avatar = function (_a) {
-    var _b, _c, _d, _e;
-    var src = _a.src, alt = _a.alt, name = _a.name, _f = _a.size, size = _f === void 0 ? "md" : _f, _g = _a.shape, shape = _g === void 0 ? "circle" : _g, _h = _a.color, color = _h === void 0 ? "blue" : _h, _j = _a.className, className = _j === void 0 ? "" : _j;
-    var _k = React.useState(false), error = _k[0], setError = _k[1];
-    var initial = (_e = (_c = (_b = name === null || name === void 0 ? void 0 : name.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : (_d = alt === null || alt === void 0 ? void 0 : alt.charAt(0)) === null || _d === void 0 ? void 0 : _d.toUpperCase()) !== null && _e !== void 0 ? _e : "A";
-    var classes = [
-        'avatar',
-        "avatar--".concat(size),
-        "avatar--".concat(shape),
-        !src || error ? "avatar--".concat(color) : '',
-        className,
-    ]
-        .filter(Boolean)
-        .join(' ');
-    return (_jsx("div", __assign({ className: classes, "aria-label": alt || name }, { children: src && !error ? (_jsx("img", { src: src, alt: alt || name, className: "avatar__img", onError: function () { return setError(true); } })) : (_jsx("span", __assign({ className: "avatar__initial" }, { children: initial }))) })));
-};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+// src/components/Avatar.tsx
+import React from "react";
+// styling is driven by semantic classnames defined in `src/styles/components/avatar.css`
+export var Avatar = function (_a) {
+    var _b, _c, _d, _e;
+    var src = _a.src, alt = _a.alt, name = _a.name, _f = _a.size, size = _f === void 0 ? "md" : _f, _g = _a.shape, shape = _g === void 0 ? "circle" : _g, _h = _a.color, color = _h === void 0 ? "blue" : _h, _j = _a.className, className = _j === void 0 ? "" : _j;
+    var _k = React.useState(false), error = _k[0], setError = _k[1];
+    var initial = (_e = (_c = (_b = name === null || name === void 0 ? void 0 : name.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : (_d = alt === null || alt === void 0 ? void 0 : alt.charAt(0)) === null || _d === void 0 ? void 0 : _d.toUpperCase()) !== null && _e !== void 0 ? _e : "A";
+    var classes = [
+        'avatar',
+        "avatar--".concat(size),
+        "avatar--".concat(shape),
+        !src || error ? "avatar--".concat(color) : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("div", __assign({ className: classes, "aria-label": alt || name }, { children: src && !error ? (_jsx("img", { src: src, alt: alt || name, className: "avatar__img", onError: function () { return setError(true); } })) : (_jsx("span", __assign({ className: "avatar__initial" }, { children: initial }))) })));
+};