@lastbrain/app 0.1.8 → 0.1.10

package/src/templates/DefaultDoc.tsx

@@ -0,0 +1,462 @@
+import React from "react";
+import { Card, CardBody, CardHeader, Chip, Snippet } from "@lastbrain/ui";
+import {
+  Rocket,
+  Building2,
+  BookOpen,
+  Database,
+  Palette,
+  Link as LinkIcon,
+} from "lucide-react";
+
+export function DefaultDocumentation() {
+  return (
+    <div className="space-y-6">
+      <Card id="section-welcome" className="scroll-mt-32">
+        <CardHeader>
+          <div className="flex items-center justify-between w-full">
+            <h1 className="text-3xl font-bold">Documentation LastBrain</h1>
+            <Chip color="primary" variant="flat">
+              v1.0.0
+            </Chip>
+          </div>
+        </CardHeader>
+        <CardBody className="space-y-6">
+          <div>
+            <p className="text-slate-600 dark:text-slate-400 text-lg">
+              LastBrain est un framework modulaire pour créer des applications
+              Next.js avec une architecture basée sur des modules réutilisables.
+            </p>
+          </div>
+        </CardBody>
+      </Card>
+
+      <Card id="section-quickstart" className="scroll-mt-32">
+        <CardHeader>
+          <h2 className="text-2xl font-semibold flex items-center gap-2">
+            <Rocket size={24} />
+            Démarrage rapide
+          </h2>
+        </CardHeader>
+        <CardBody className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Installation</h3>
+            <Snippet symbol="" hideSymbol className="text-sm mb-2">
+              pnpm install
+            </Snippet>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">
+              Initialiser la base de données
+            </h3>
+            <Snippet symbol="" hideSymbol className="text-sm mb-2">
+              pnpm db:init
+            </Snippet>
+            <p className="text-sm text-slate-600 dark:text-slate-400">
+              Démarre Supabase en local et applique les migrations
+            </p>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Ajouter des modules</h3>
+            <Snippet symbol="" hideSymbol className="text-sm mb-2">
+              pnpm lastbrain list-modules
+            </Snippet>
+            <Snippet symbol="" hideSymbol className="text-sm mb-2">
+              pnpm lastbrain add-module auth
+            </Snippet>
+            <p className="text-sm text-slate-600 dark:text-slate-400">
+              Modules disponibles : <strong>auth</strong> (authentification),{" "}
+              <strong>ai</strong> (génération IA)
+            </p>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">
+              Construire les modules
+            </h3>
+            <Snippet symbol="" hideSymbol className="text-sm mb-2">
+              pnpm build:modules
+            </Snippet>
+            <p className="text-sm text-slate-600 dark:text-slate-400">
+              Génère les pages et routes à partir des modules installés
+            </p>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">
+              Lancer le serveur de développement
+            </h3>
+            <Snippet symbol="" hideSymbol className="text-sm mb-2">
+              pnpm dev
+            </Snippet>
+            <p className="text-sm text-slate-600 dark:text-slate-400">
+              Ouvre l'application sur{" "}
+              <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                http://localhost:3000
+              </code>
+            </p>
+          </div>
+        </CardBody>
+      </Card>
+
+      <Card id="section-architecture" className="scroll-mt-32">
+        <CardHeader>
+          <h2 className="text-2xl font-semibold flex items-center gap-2">
+            <Building2 size={24} />
+            Architecture
+          </h2>
+        </CardHeader>
+        <CardBody className="space-y-4">
+          <p className="text-slate-600 dark:text-slate-400">
+            Le projet est organisé en monorepo avec pnpm workspaces :
+          </p>
+
+          <div className="space-y-3">
+            <div className="border-l-4 border-blue-500 pl-4">
+              <h3 className="font-semibold text-lg mb-1">
+                <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                  @lastbrain/app
+                </code>
+              </h3>
+              <p className="text-sm text-slate-600 dark:text-slate-400">
+                Framework principal et CLI. Contient les layouts, scripts de
+                build, templates et la logique de génération des pages.
+              </p>
+            </div>
+
+            <div className="border-l-4 border-green-500 pl-4">
+              <h3 className="font-semibold text-lg mb-1">
+                <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                  @lastbrain/core
+                </code>
+              </h3>
+              <p className="text-sm text-slate-600 dark:text-slate-400">
+                Utilitaires et types partagés. Contient les helpers Supabase,
+                fonctions serveur et types TypeScript communs.
+              </p>
+            </div>
+
+            <div className="border-l-4 border-purple-500 pl-4">
+              <h3 className="font-semibold text-lg mb-1">
+                <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                  @lastbrain/ui
+                </code>
+              </h3>
+              <p className="text-sm text-slate-600 dark:text-slate-400">
+                Composants UI réutilisables basés sur NextUI et Tailwind CSS.
+                Fournit les composants Card, Button, Input, etc.
+              </p>
+            </div>
+
+            <div className="border-l-4 border-orange-500 pl-4">
+              <h3 className="font-semibold text-lg mb-1">
+                <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                  @lastbrain/module-*
+                </code>
+              </h3>
+              <p className="text-sm text-slate-600 dark:text-slate-400">
+                Modules fonctionnels (auth, ai, etc.). Chaque module contient
+                ses pages, APIs, composants, migrations et documentation.
+              </p>
+            </div>
+          </div>
+        </CardBody>
+      </Card>
+
+      <Card id="section-create-module" className="scroll-mt-32">
+        <CardHeader>
+          <h2 className="text-2xl font-semibold flex items-center gap-2">
+            <BookOpen size={24} />
+            Documentation des modules
+          </h2>
+        </CardHeader>
+        <CardBody className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Commande CLI</h3>
+            <Snippet symbol="" hideSymbol className="text-sm mb-2">
+              pnpm lastbrain create-module mon-module
+            </Snippet>
+            <p className="text-sm text-slate-600 dark:text-slate-400 mb-4">
+              Crée un nouveau module dans{" "}
+              <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                packages/module-mon-module
+              </code>
+            </p>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">
+              Structure d'un module
+            </h3>
+            <div className="bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono">
+              <div className="space-y-1">
+                <div>📁 module-mon-module/</div>
+                <div className="ml-4">├── 📄 package.json</div>
+                <div className="ml-4">├── 📄 mon-module.build.config.ts</div>
+                <div className="ml-4">└── 📁 src/</div>
+                <div className="ml-8">├── 📄 index.ts</div>
+                <div className="ml-8">├── 📄 server.ts</div>
+                <div className="ml-8">├── 📁 web/</div>
+                <div className="ml-8">├── 📁 api/</div>
+                <div className="ml-8">├── 📁 components/</div>
+                <div className="ml-8">└── 📁 supabase/</div>
+                <div className="ml-12">└── 📁 migrations/</div>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">
+              Configuration du module
+            </h3>
+            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+              Le fichier{" "}
+              <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                {"{slug}"}.build.config.ts
+              </code>{" "}
+              définit les pages et APIs :
+            </p>
+            <div className="bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono overflow-x-auto">
+              <pre>{`export default {
+  name: "Mon Module",
+  description: "Description du module",
+  pages: [
+    {
+      path: "/ma-page",
+      component: "./web/MaPage",
+      layout: "auth"
+    }
+  ],
+  apis: [
+    {
+      path: "/api/mon-api",
+      handler: "./api/mon-api"
+    }
+  ]
+}`}</pre>
+            </div>
+          </div>
+        </CardBody>
+      </Card>
+
+      <Card id="section-database" className="scroll-mt-32">
+        <CardHeader>
+          <h2 className="text-2xl font-semibold flex items-center gap-2">
+            <Database size={24} />
+            Base de données
+          </h2>
+        </CardHeader>
+        <CardBody className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Supabase local</h3>
+            <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">
+              LastBrain utilise Supabase pour la base de données et
+              l'authentification.
+            </p>
+
+            <div className="space-y-3">
+              <div>
+                <p className="text-sm font-medium mb-1">Démarrer Supabase :</p>
+                <Snippet symbol="" hideSymbol className="text-sm">
+                  pnpm db:init
+                </Snippet>
+              </div>
+
+              <div>
+                <p className="text-sm font-medium mb-1">
+                  Synchroniser les migrations :
+                </p>
+                <Snippet symbol="" hideSymbol className="text-sm">
+                  pnpm db:migrations:sync
+                </Snippet>
+              </div>
+
+              <div>
+                <p className="text-sm font-medium mb-1">
+                  Créer une migration :
+                </p>
+                <Snippet symbol="" hideSymbol className="text-sm">
+                  supabase migration new ma_migration
+                </Snippet>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">
+              Migrations des modules
+            </h3>
+            <p className="text-sm text-slate-600 dark:text-slate-400">
+              Les modules peuvent avoir leurs propres migrations dans{" "}
+              <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                supabase/migrations/
+              </code>
+              . Elles sont automatiquement synchronisées lors du build.
+            </p>
+          </div>
+        </CardBody>
+      </Card>
+
+      <Card id="section-ui" className="scroll-mt-32">
+        <CardHeader>
+          <h2 className="text-2xl font-semibold flex items-center gap-2">
+            <Palette size={24} />
+            Interface utilisateur
+          </h2>
+        </CardHeader>
+        <CardBody className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Composants NextUI</h3>
+            <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">
+              Le package{" "}
+              <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                @lastbrain/ui
+              </code>
+              réexporte les composants NextUI avec une configuration Tailwind
+              personnalisée.
+            </p>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Thèmes</h3>
+            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+              Le mode sombre/clair est géré par{" "}
+              <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                next-themes
+              </code>
+              . Le switch est disponible dans le header de l'application.
+            </p>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Tailwind CSS v4</h3>
+            <p className="text-sm text-slate-600 dark:text-slate-400">
+              Le projet utilise Tailwind CSS v4 avec un preset personnalisé
+              partagé via{" "}
+              <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                @lastbrain/ui/tailwind.preset
+              </code>
+              .
+            </p>
+          </div>
+        </CardBody>
+      </Card>
+
+      <Card id="section-module-docs" className="scroll-mt-32">
+        <CardHeader>
+          <h2 className="text-2xl font-semibold flex items-center gap-2">
+            <BookOpen size={24} />
+            Documenter ses modules
+          </h2>
+        </CardHeader>
+        <CardBody className="space-y-4">
+          <p className="text-slate-600 dark:text-slate-400">
+            Chaque module peut exporter un composant de documentation qui sera
+            automatiquement intégré dans cette page.
+          </p>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">
+              Créer une documentation
+            </h3>
+            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+              Dans votre module, créez{" "}
+              <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                src/components/Doc.tsx
+              </code>{" "}
+              :
+            </p>
+            <div className="bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono overflow-x-auto">
+              <pre>{`export function MonModuleDoc() {
+  return (
+    <div>
+      <h1>Mon Module</h1>
+      <p>Description...</p>
+    </div>
+  );
+}`}</pre>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">
+              Exporter la documentation
+            </h3>
+            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+              Dans{" "}
+              <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                src/index.ts
+              </code>{" "}
+              :
+            </p>
+            <div className="bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono">
+              <pre>{`export { MonModuleDoc } from "./components/Doc.js";`}</pre>
+            </div>
+          </div>
+        </CardBody>
+      </Card>
+
+      <Card id="section-links" className="scroll-mt-32">
+        <CardHeader>
+          <h2 className="text-2xl font-semibold flex items-center gap-2">
+            <LinkIcon size={24} />
+            Liens utiles
+          </h2>
+        </CardHeader>
+        <CardBody>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <a
+              href="https://nextjs.org/docs"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-4 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
+            >
+              <h3 className="font-semibold mb-1">Next.js</h3>
+              <p className="text-sm text-slate-600 dark:text-slate-400">
+                Documentation officielle
+              </p>
+            </a>
+
+            <a
+              href="https://supabase.com/docs"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-4 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
+            >
+              <h3 className="font-semibold mb-1">Supabase</h3>
+              <p className="text-sm text-slate-600 dark:text-slate-400">
+                Documentation officielle
+              </p>
+            </a>
+
+            <a
+              href="https://nextui.org/docs"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-4 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
+            >
+              <h3 className="font-semibold mb-1">NextUI</h3>
+              <p className="text-sm text-slate-600 dark:text-slate-400">
+                Composants UI
+              </p>
+            </a>
+
+            <a
+              href="https://tailwindcss.com/docs"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-4 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
+            >
+              <h3 className="font-semibold mb-1">Tailwind CSS</h3>
+              <p className="text-sm text-slate-600 dark:text-slate-400">
+                Framework CSS
+              </p>
+            </a>
+          </div>
+        </CardBody>
+      </Card>
+    </div>
+  );
+}