@lastbrain/ui
v2.0.19
Published
Composants UI réutilisables basés sur HeroUI et Tailwind CSS
Maintainers
lastbrainReadme
@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
# 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 :
pnpm add @lastbrain/ui @lastbrain/core
# Peer dependencies
pnpm add @heroui/react @heroui/theme framer-motion🧩 Composants disponibles
Layout & Navigation
import { Header, Sidebar, Footer, Breadcrumb, AppAside } from "@lastbrain/ui";
<Header
user={user}
onLogout={handleLogout}
brandName="Mon App"
menuConfig={menuConfig}
/>;Formulaires & Inputs
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="[email protected]"
type="email"
required
/>Affichage de données
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
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
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 :
// 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
// 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
// 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é :
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 :
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 :
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 :
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é
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-gradient-to-r from-blue-500 to-purple-600" : ""}
${className}
`}
{...props}
/>
);
}
);
export default CustomButton;Override des styles par défaut
/* 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 :
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 principal.
📄 Licence
MIT - Voir LICENSE