npm package: @lastbrain/ui
Description: Composants UI réutilisables basés sur HeroUI et Tailwind CSS
Latest version: 2.0.31

# @lastbrain/ui

Bibliothèque de composants UI modernes basés sur HeroUI pour les applications LastBrain.

## 🎯 Vue d'ensemble

`@lastbrain/ui` fournit une collection complète de composants UI prêts à l'emploi :

- 🎨 **58 composants HeroUI** - Boutons, formulaires, modales, etc.
- 🌙 **Support thème sombre** - Bascule automatique avec next-themes
- ♿ **Accessibilité** - Composants ARIA-compliant par défaut
- 📱 **Responsive** - Design adaptatif mobile-first
- 🎪 **Animations** - Transitions fluides avec Framer Motion

## 🚀 Démarrage rapide

> **Recommandé :** Utilisez le CLI LastBrain pour créer une application complète

```bash
# Créer une nouvelle application avec @lastbrain/ui inclus
pnpx @lastbrain/app@latest init mon-app
cd mon-app
pnpm dev
```

## 📦 Installation manuelle

Si vous intégrez LastBrain dans un projet existant :

```bash
pnpm add @lastbrain/ui @lastbrain/core
# Peer dependencies
pnpm add @heroui/react @heroui/theme framer-motion
```

## 🧩 Composants disponibles

### Layout & Navigation

```tsx
import { Header, Sidebar, Footer, Breadcrumb, AppAside } from "@lastbrain/ui";

<Header
  user={user}
  onLogout={handleLogout}
  brandName="Mon App"
  menuConfig={menuConfig}
/>;
```

### Formulaires & Inputs

```tsx
import {
  Button,
  Input,
  TextArea,
  Select,
  Switch,
  Checkbox,
  RadioGroup
} from "@lastbrain/ui";

<Button
  color="primary"
  size="lg"
  onPress={() => console.log("Clicked!")}
>
  Valider
</Button>

<Input
  label="Email"
  placeholder="votre@email.com"
  type="email"
  required
/>
```

### Affichage de données

```tsx
import { Card, Table, Badge, Avatar, Progress, Spinner } from "@lastbrain/ui";

<Card className="max-w-md">
  <Card.Header>
    <h3>Titre de la carte</h3>
  </Card.Header>
  <Card.Body>
    <p>Contenu de la carte</p>
  </Card.Body>
</Card>;
```

### Feedback & Overlays

```tsx
import {
  Modal,
  Popover,
  Tooltip,
  Alert,
  Toast,
  ConfirmDialog,
} from "@lastbrain/ui";

<Modal isOpen={isOpen} onClose={onClose}>
  <Modal.Header>Confirmation</Modal.Header>
  <Modal.Body>Êtes-vous sûr de vouloir continuer ?</Modal.Body>
  <Modal.Footer>
    <Button onPress={onClose}>Annuler</Button>
    <Button color="primary" onPress={handleConfirm}>
      Confirmer
    </Button>
  </Modal.Footer>
</Modal>;
```

### Thème & Utilités

```tsx
import {
  ThemeSwitcher,
  ColorPicker,
  DatePicker,
  FileUpload,
} from "@lastbrain/ui";

// Bascule automatique thème clair/sombre
<ThemeSwitcher />;
```

## 🌙 Système de thème

LastBrain UI inclut un système de thème complet :

### Configuration automatique

Lors de la création d'une app avec `pnpx @lastbrain/app@latest init`, la configuration du thème est automatique :

```tsx
// app/layout.tsx (généré automatiquement)
import { ThemeProvider } from "next-themes";

export default function RootLayout({ children }) {
  return (
    <html lang="fr" suppressHydrationWarning>
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="dark"
          enableSystem={false}
          storageKey="lastbrain-theme"
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}
```

### Utilisation des couleurs

```tsx
// Classes Tailwind automatiquement disponibles
<div className="bg-background text-foreground">
  <h1 className="text-primary">Titre principal</h1>
  <p className="text-muted-foreground">Texte secondaire</p>
</div>

// Variables CSS personnalisées
<div style={{
  backgroundColor: 'hsl(var(--background))',
  color: 'hsl(var(--foreground))'
}}>
  Contenu
</div>
```

### Personnalisation du thème

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#eff6ff",
          500: "#3b82f6",
          900: "#1e3a8a",
          DEFAULT: "#3b82f6",
          foreground: "#ffffff",
        },
      },
    },
  },
  plugins: [require("@heroui/react")],
};
```

## 📝 Configuration des menus

LastBrain UI utilise un système de configuration de menu typé :

```typescript
import type { MenuConfig } from "@lastbrain/ui";

export const menuConfig: MenuConfig = {
  public: [
    { label: "Accueil", href: "/" },
    { label: "À propos", href: "/about" },
  ],
  auth: [
    { label: "Dashboard", href: "/auth/dashboard" },
    { label: "Profil", href: "/auth/profile" },
  ],
  admin: [
    { label: "Utilisateurs", href: "/admin/users" },
    { label: "Paramètres", href: "/admin/settings" },
  ],
};
```

## 🎪 Animations

Basé sur Framer Motion pour des animations fluides :

```tsx
import { motion } from "framer-motion";
import { Button } from "@lastbrain/ui";

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3 }}
>
  <Button>Bouton animé</Button>
</motion.div>;
```

## 📱 Responsive Design

Tous les composants sont responsive par défaut :

```tsx
import { Card, Button } from "@lastbrain/ui";

<Card className="w-full max-w-sm md:max-w-md lg:max-w-lg">
  <Card.Body className="p-4 md:p-6">
    <Button className="w-full md:w-auto" size="sm md:lg">
      Responsive Button
    </Button>
  </Card.Body>
</Card>;
```

## ♿ Accessibilité

Tous les composants respectent les standards WCAG :

```tsx
import { Button, Modal } from "@lastbrain/ui";

<Button
  aria-label="Fermer la modale"
  aria-describedby="modal-description"
>
  ×
</Button>

<Modal
  isOpen={isOpen}
  role="dialog"
  aria-labelledby="modal-title"
  aria-describedby="modal-description"
>
  {/* Contenu accessible */}
</Modal>
```

## 🏗️ Architecture

```
@lastbrain/ui/
├── src/
│   ├── components/        # Composants UI individuels
│   │   ├── Button/
│   │   ├── Card/
│   │   ├── Modal/
│   │   └── ...
│   ├── layouts/          # Composants de mise en page
│   ├── hooks/            # Hooks UI utilitaires
│   ├── themes/           # Configuration des thèmes
│   ├── types/            # Types TypeScript
│   └── index.ts          # Exports principaux
├── tailwind.config.js    # Config Tailwind réutilisable
└── postcss.config.js     # Config PostCSS
```

## 🎨 Personnalisation avancée

### Créer un composant personnalisé

```tsx
import { forwardRef } from "react";
import { Button } from "@lastbrain/ui";
import type { ButtonProps } from "@lastbrain/ui";

interface CustomButtonProps extends ButtonProps {
  gradient?: boolean;
}

const CustomButton = forwardRef<HTMLButtonElement, CustomButtonProps>(
  ({ gradient, className, ...props }, ref) => {
    return (
      <Button
        ref={ref}
        className={`
          ${gradient ? "bg-linear-to-r from-blue-500 to-purple-600" : ""}
          ${className}
        `}
        {...props}
      />
    );
  }
);

export default CustomButton;
```

### Override des styles par défaut

```css
/* styles/globals.css */
@import "tailwindcss";

/* Personnalisation des composants LastBrain */
.lastbrain-button {
  @apply rounded-lg shadow-lg transition-all duration-200;
}

.lastbrain-card {
  @apply backdrop-blur-sm bg-white/90 dark:bg-slate-800/90;
}
```

## 🔗 Intégration avec d'autres packages

`@lastbrain/ui` fonctionne parfaitement avec l'écosystème LastBrain :

```tsx
import { useAuth } from "@lastbrain/core";
import { Header, Avatar, Button } from "@lastbrain/ui";

function AppHeader() {
  const { user, signOut } = useAuth();

  return (
    <Header
      user={user}
      onLogout={signOut}
      avatar={
        <Avatar
          src={user?.user_metadata?.avatar_url}
          name={user?.user_metadata?.full_name}
        />
      }
    />
  );
}
```

## 🤝 Contribuer

Ce package fait partie du monorepo LastBrain. Voir le [CONTRIBUTING.md](../../CONTRIBUTING.md) principal.

## 📄 Licence

MIT - Voir [LICENSE](../../LICENSE)

## 🔗 Liens utiles

- [HeroUI Documentation](https://heroui.com/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Framer Motion](https://motion.dev/)
- [next-themes](https://github.com/pacocoursey/next-themes)