npm package: @lastbrain/app
Description: Framework modulaire Next.js avec CLI et système de modules
Latest version: 2.0.35

# @lastbrain/app

Package principal pour créer et gérer des applications Next.js LastBrain.

## 🎯 Vue d'ensemble

`@lastbrain/app` est le cœur de l'écosystème LastBrain. Il fournit :

- 🚀 **CLI `lastbrain`** - Créer une app Next.js complète en une commande
- 🧱 **Layouts & Providers** - Composants prêts à l'emploi pour structurer votre app
- 🔧 **Scripts utilitaires** - Gestion modules, migrations DB, génération docs
- 🎨 **Intégration Tailwind v4** - Configuration optimale out-of-the-box

## 📦 Installation & Démarrage rapide

> **Recommandé :** Utilisez directement le CLI pour créer une nouvelle application

```bash
# Créer une nouvelle application LastBrain
pnpx @lastbrain/app@latest init mon-app

# Accéder au dossier
cd mon-app

# Initialiser Supabase (optionnel)
pnpm db:init

# Démarrer le serveur
pnpm dev
```

### Installation manuelle

Si vous souhaitez intégrer LastBrain dans un projet existant :

```bash
pnpm add @lastbrain/app @lastbrain/core @lastbrain/ui
```

## 🚀 Ce que fait la commande init

```bash
pnpx @lastbrain/app@latest init mon-app
```

Cette commande génère une application Next.js complète avec :

- Structure de routes (`(public)`, `(auth)`, `(admin)`)
- Layouts et providers configurés
- Tailwind CSS v4 + next-themes
- Configuration TypeScript
- Scripts NPM utilitaires

### 2. Installer et démarrer

```bash
pnpm install
pnpm db:init        # Initialiser Supabase local (optionnel)
pnpm build:modules  # Générer les routes des modules
pnpm dev           # Lancer le serveur
```

🎉 Votre app est prête sur `http://localhost:3000`

## 📚 Documentation

- **[Guide CLI complet](./CLI.md)** - Toutes les commandes et options
- **[Architecture](./ARCHITECTURE.md)** - Comment fonctionne @lastbrain/app
- **[Créer un module](./MODULE_GUIDE.md)** - Développer vos propres modules

## 🧩 Composants exportés

### Layouts

```tsx
import {
  RootLayout, // Layout racine avec ThemeProvider
  PublicLayout, // Layout pour pages publiques
  AuthLayout, // Layout pour pages d'authentification
  AdminLayout, // Layout pour pages d'administration
} from "@lastbrain/app";
```

### Providers

```tsx
import { AppProviders } from "@lastbrain/app";

// Inclut :
// - AuthProvider (Supabase)
// - ModulesProvider
// - NotificationsProvider
```

### Hooks

```tsx
import {
  useAuth, // Accès au contexte d'authentification
  useModules, // Accès aux modules installés
  useNotifications, // Système de notifications
} from "@lastbrain/app";
```

## 🔧 Scripts disponibles

Ces scripts sont exécutés via `@lastbrain/app` :

### `pnpm build:modules`

Analyse tous les modules installés et génère :

- Routes API automatiques
- Pages de navigation
- Fichiers de types TypeScript

### `pnpm db:init`

Initialise Supabase local :

- Lance `supabase start`
- Génère `.env.local` avec les clés
- Affiche le statut

### `pnpm db:migrations:sync`

Synchronise les migrations de tous les modules vers Supabase local.

### `pnpm readme:create`

Génère automatiquement la documentation du projet basée sur les modules installés.

## 🎨 Structure d'une application générée

```
votre-app/
├── app/
│   ├── layout.tsx              # RootLayout + ThemeProvider
│   ├── (public)/
│   │   ├── layout.tsx          # PublicLayout
│   │   └── page.tsx
│   ├── (auth)/
│   │   ├── layout.tsx          # AuthLayout
│   │   └── page.tsx
│   └── (admin)/
│       ├── layout.tsx          # AdminLayout
│       └── page.tsx
├── styles/
│   └── globals.css
├── next.config.mjs
├── tailwind.config.js
├── postcss.config.mjs
├── tsconfig.json
└── package.json
```

## 🔌 Intégration avec les modules

Les modules LastBrain (comme `@lastbrain/module-auth`) s'intègrent automatiquement :

```bash
# 1. Installer un module
pnpm add @lastbrain/module-auth

# 2. Générer les routes
pnpm build:modules

# 3. Les pages sont créées automatiquement !
# → /signin, /signup, etc.
```

## 🌐 Configuration Tailwind v4

L'app générée utilise Tailwind CSS v4 avec la nouvelle syntaxe :

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

```js
// tailwind.config.js
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@lastbrain/ui/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          /* ... */
        },
      },
    },
  },
};
```

## 🎭 Thème sombre

Le thème sombre est activé par défaut via `next-themes` :

```tsx
import { ThemeSwitcher } from "@lastbrain/ui";

// Ajouter dans votre header
<ThemeSwitcher />;
```

Les classes Tailwind `dark:` fonctionnent automatiquement :

```tsx
<div className="bg-white dark:bg-slate-900">
  <h1 className="text-slate-900 dark:text-white">Hello LastBrain</h1>
</div>
```

## 🔐 Authentification

Avec `@lastbrain/module-auth` installé :

```tsx
import { useAuth } from "@lastbrain/app";

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

  if (!user) {
    return <div>Non connecté</div>;
  }

  return (
    <div>
      <p>Bonjour {user.email}</p>
      <button onClick={signOut}>Déconnexion</button>
    </div>
  );
}
```

## 📦 Publier votre application

Une fois votre app prête :

```bash
# Build de production
pnpm build

# Démarrer en production
pnpm start
```

Pour déployer sur Vercel :

```bash
vercel
```

## 🤝 Contribuer

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

## 📄 Licence

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

## 🔗 Liens utiles

- [Documentation Next.js](https://nextjs.org/docs)
- [Tailwind CSS v4](https://tailwindcss.com/docs)
- [Supabase](https://supabase.com/docs)
- [next-themes](https://github.com/pacocoursey/next-themes)