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

$3

``bash
npm install mautourco-components
`

Utilisation des composants

$3

#### Option 1 : Import unique (recommandé)

`tsx
// In your index.tsx or App.tsx
// Import all styles in a single line
import 'mautourco-components/dist/styles/mautourco.css';
`

#### Option 2 : Imports individuels (si vous n'avez besoin que de certains composants)

`tsx
// Import only the styles you need
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.

$3

#### Exemple avec des atoms et molecules

`tsx
import React from 'react';
import {
Input,
Checkbox,
Text,
Heading,
Icon,
MultiSelectDropdown,
} from 'mautourco-components';

function App() {
return (



);
}
`

#### 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 = () => ;

function App() {
const handleLinkClick = (link: { label: string; route: string }) => {
// Handle navigation (e.g., with React Router)
console.log('Navigation vers:', link.route);
};

return (



);
}
`

Composants disponibles

$3

- 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

$3

- MultiSelectDropdown - Dropdown de sélection multiple

$3

- 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

$3

- ButtonSpinner - Spinner pour boutons
- LoadingSpinner - Spinner de chargement général

$3

- CheckIcon, ChevronIcon, CloseIcon
- SearchIcon, SettingsIcon, UserIcon

Mise à jour du package

`bash


In your project


npm update mautourco-components
`

Développement du package

$3

`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 en mode développement
npm run storybook:dev # Démarre Storybook avec watch des tokens
npm run build-storybook # Build Storybook pour production
npm publish # Publication sur npm (après login)
`

$3

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