npm package: @mkwebdev/ui-components
Description: Une bibliothèque de composants réutilisables
Latest version: 0.0.10

# Components Library

Une bibliothèque de composants React modernes et réutilisables.

## Installation

```bash
npm install @mkwebdev/components-library-02
# ou
yarn add @mkwebdev/components-library-02
```

## Utilisation

### Composants

```tsx
import { Button, DataFetcher, Provider } from "@mkwebdev/components-library-02";

function App() {
  return (
    <Provider>
      <Button variant="primary" onClick={() => console.log("Cliqué!")}>
        Cliquez-moi
      </Button>

      <DataFetcher postId={1} />
    </Provider>
  );
}
```

### Hooks personnalisés

```tsx
import { useData } from "@mkwebdev/components-library-02";

function MyComponent() {
  const { data, isLoading, error } = useData({
    queryKey: "my-data",
    fetchFn: async () => {
      const response = await fetch("https://api.example.com/data");
      return response.json();
    },
  });

  if (isLoading) return <div>Chargement...</div>;
  if (error) return <div>Erreur</div>;

  return <div>{JSON.stringify(data)}</div>;
}
```

### Chargement de données avec DataLoader

```tsx
import { DataLoader } from "@mkwebdev/components-library-02";

interface User {
  id: number;
  name: string;
  email: string;
}

function UserProfile({ userId }: { userId: number }) {
  return (
    <DataLoader<User>
      queryKey={`user-${userId}`}
      fetchFn={async () => {
        const response = await fetch(`/api/users/${userId}`);
        return response.json();
      }}
      loadingComponent={<div>Chargement du profil...</div>}
      errorComponent={(error) => (
        <div className="error">Erreur de chargement: {error.message}</div>
      )}
    >
      {(user) => (
        <div>
          <h1>{user.name}</h1>
          <p>{user.email}</p>
        </div>
      )}
    </DataLoader>
  );
}

// Exemple avec une liste
function UsersList() {
  return (
    <DataLoader<User[]>
      queryKey="users-list"
      fetchFn={async () => {
        const response = await fetch("/api/users");
        return response.json();
      }}
    >
      {(users) => (
        <ul>
          {users.map((user) => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      )}
    </DataLoader>
  );
}
```

## Composants disponibles

### Button

Un composant bouton personnalisable avec différentes variantes.

Props:

- `children`: Le contenu du bouton
- `variant`: 'primary' | 'secondary' (défaut: 'primary')
- `disabled`: boolean (défaut: false)
- `onClick`: () => void (optionnel)

### DataFetcher

Un composant exemple qui utilise le hook useData pour récupérer et afficher des données.

Props:

- `postId`: number - L'ID du post à récupérer

### DataLoader<T>

Un composant générique pour charger et afficher des données avec gestion des états de chargement et d'erreur.

Props:

- `queryKey`: string - Clé unique pour la requête
- `fetchFn`: () => Promise<T> - Fonction de récupération des données
- `children`: (data: T) => React.ReactNode - Fonction de rendu des données
- `loadingComponent?`: React.ReactNode - Composant à afficher pendant le chargement
- `errorComponent?`: (error: Error) => React.ReactNode - Composant à afficher en cas d'erreur
- `enabled?`: boolean - Active ou désactive la requête

## Hooks disponibles

### useData<T>

Un hook personnalisé pour la récupération de données avec react-query.

Options:

- `queryKey`: string - Clé unique pour la requête
- `fetchFn`: () => Promise<T> - Fonction de récupération des données
- `enabled`: boolean (optionnel) - Active ou désactive la requête

## Scripts disponibles

- `npm run build`: Compile la librairie
- `npm run test`: Lance les tests
- `npm run lint`: Vérifie le code avec ESLint

## Licence

MIT