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

npm install mautourco-components

Utilisation des composants

1. Importer les styles

Option 1 : Import unique (recommandé)

// Dans votre index.tsx ou App.tsx
// 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)

// 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. 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

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)

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: '[email protected]',
        }}
        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

# Dans votre projet
npm update mautourco-components

Développement du package

Scripts disponibles

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