@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

# 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 :

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

🚀 Ce que fait la commande init

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

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 - Toutes les commandes et options
• Architecture - Comment fonctionne @lastbrain/app
• Créer un module - Développer vos propres modules

🧩 Composants exportés

Layouts

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

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

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

Hooks

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 :

# 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 :

/* styles/globals.css */
@import "tailwindcss";
@config "../tailwind.config.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 :

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

// Ajouter dans votre header
<ThemeSwitcher />;

Les classes Tailwind dark: fonctionnent automatiquement :

<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é :

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 :

# Build de production
pnpm build

# Démarrer en production
pnpm start

Pour déployer sur Vercel :

vercel

🤝 Contribuer

Ce package fait partie du monorepo LastBrain. Voir le CONTRIBUTING.md principal.

📄 Licence

MIT - Voir LICENSE

🔗 Liens utiles

• Documentation Next.js
• Tailwind CSS v4
• Supabase
• next-themes