@lastbrain/app 0.1.8 → 0.1.10

package/src/templates/DocPage.tsx

@@ -0,0 +1,381 @@
+// GENERATED BY LASTBRAIN TEMPLATE (Documentation Page)
+"use client";
+import React, { useState, useEffect } from "react";
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  Listbox,
+  ListboxItem,
+  Chip,
+  Button,
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  Snippet,
+} from "@lastbrain/ui";
+import {
+  Menu,
+  Home,
+  Sparkles,
+  Rocket,
+  Building2,
+  Package,
+  Database,
+  Palette,
+  BookOpen,
+  Link,
+  Blocks,
+} from "lucide-react";
+import { DefaultDocumentation } from "./DefaultDoc.js";
+
+interface ModuleDocConfig {
+  id: string;
+  name: string;
+  description: string;
+  content: React.ReactNode;
+  available: boolean;
+  color?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "danger"
+    | "warning"
+    | "default"
+    | undefined;
+  number?: number;
+}
+
+interface DocPageProps {
+  modules?: ModuleDocConfig[];
+  defaultContent?: React.ReactNode;
+}
+
+export function DocPage({ modules = [], defaultContent }: DocPageProps) {
+  const [selectedModule, setSelectedModule] = useState<string>("default");
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+  // Détecter la section visible lors du scroll
+  useEffect(() => {
+    const handleScroll = () => {
+      const sections = [
+        "default",
+        "section-welcome",
+        "section-quickstart",
+        "section-architecture",
+        "section-create-module",
+        "section-database",
+        "section-ui",
+        "section-module-docs",
+        "section-links",
+        ...(modules.length > 0 ? ["section-modules"] : []),
+        ...modules.map((m) => `module-${m.id}`),
+      ];
+
+      // Trouver la section actuellement visible
+      let currentSection = "default";
+
+      // Si on est tout en haut de la page
+      if (window.scrollY < 100) {
+        currentSection = "default";
+      } else {
+        // Parcourir les sections pour trouver celle qui est visible
+        for (const sectionId of sections) {
+          if (sectionId === "default") continue;
+
+          const element = document.getElementById(sectionId);
+          if (element) {
+            const rect = element.getBoundingClientRect();
+            // Section est visible si son top est dans la moitié supérieure de l'écran
+            if (rect.top <= window.innerHeight / 3 && rect.bottom >= 0) {
+              currentSection = sectionId.startsWith("module-")
+                ? sectionId.replace("module-", "")
+                : sectionId;
+              break;
+            }
+          }
+        }
+      }
+
+      setSelectedModule(currentSection);
+    };
+
+    // Écouter le scroll
+    window.addEventListener("scroll", handleScroll);
+    // Appeler une fois au chargement
+    handleScroll();
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [modules]);
+
+  const scrollToSection = (sectionId: string) => {
+    setIsDrawerOpen(false); // Fermer le drawer après sélection
+    if (sectionId === "default") {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+      return;
+    }
+
+    const elementId = sectionId.startsWith("section-")
+      ? sectionId
+      : `module-${sectionId}`;
+    const element = document.getElementById(elementId);
+    if (element) {
+      const yOffset = -70;
+      const y =
+        element.getBoundingClientRect().top + window.pageYOffset + yOffset;
+      window.scrollTo({ top: y, behavior: "smooth" });
+    }
+  };
+
+  const navigationItems = [
+    {
+      id: "default",
+      name: "Documentation",
+      description: "Accueil",
+      icon: Home,
+    },
+    {
+      id: "section-welcome",
+      name: "Bienvenue",
+      description: "",
+      icon: Sparkles,
+    },
+    {
+      id: "section-quickstart",
+      name: "Démarrage rapide",
+      description: "",
+      icon: Rocket,
+    },
+    {
+      id: "section-architecture",
+      name: "Architecture",
+      description: "",
+      icon: Building2,
+    },
+    {
+      id: "section-create-module",
+      name: "Créer un module",
+      description: "",
+      icon: Package,
+    },
+    {
+      id: "section-database",
+      name: "Base de données",
+      description: "",
+      icon: Database,
+    },
+    {
+      id: "section-ui",
+      name: "Interface utilisateur",
+      description: "",
+      icon: Palette,
+    },
+    {
+      id: "section-module-docs",
+      name: "Doc des modules",
+      description: "",
+      icon: BookOpen,
+    },
+    { id: "section-links", name: "Liens utiles", description: "", icon: Link },
+    ...(modules.length > 0
+      ? [
+          {
+            id: "section-modules",
+            name: "Modules disponibles",
+            description: "",
+            icon: Blocks,
+            number: modules.length,
+          },
+        ]
+      : []),
+    // Afficher seulement les modules actifs dans la navigation
+    ...modules
+      .filter((m) => m.available)
+      .map((m) => ({
+        id: m.id,
+        name: m.name,
+        description: m.description,
+        icon: Package,
+        color: "primary",
+      })),
+  ];
+
+  const NavigationListbox = () => (
+    <Listbox
+      aria-label="Navigation"
+      selectionMode="single"
+      selectedKeys={selectedModule ? [selectedModule] : []}
+      onSelectionChange={(keys) => {
+        const key = Array.from(keys)[0] as string;
+        if (key) {
+          scrollToSection(key);
+        } else {
+          setSelectedModule("");
+          window.scrollTo({ top: 0, behavior: "smooth" });
+        }
+      }}
+      items={navigationItems}
+    >
+      {(item: any) => {
+        const IconComponent = item.icon;
+        return (
+          <ListboxItem
+            key={item.id}
+            textValue={item.name}
+            description={item.description}
+            color={item.color}
+            variant="solid"
+            endContent={
+              item.number && (
+                <Chip size="sm" color="primary">
+                  {item.number ?? 0}
+                </Chip>
+              )
+            }
+            className={`${
+              selectedModule === item.id ? "bg-default-200/40" : ""
+            }`}
+            startContent={<IconComponent size={18} className="shrink-0" />}
+          >
+            {item.name}
+          </ListboxItem>
+        );
+      }}
+    </Listbox>
+  );
+
+  return (
+    <div className="w-full pt-8 md:pt-12 pb-24 lg:pb-8">
+      <div className="container mx-auto md:px-4 py-8">
+        {/* Mobile menu button */}
+        <div className="fixed w-full h-16 left-0 bottom-0 bg-background/20 backdrop-blur-lg z-50 lg:hidden p-2">
+          <div className="flex justify-center">
+            <Button
+              isIconOnly
+              variant="solid"
+              onPress={() => setIsDrawerOpen(true)}
+            >
+              <Menu size={24} />
+            </Button>
+          </div>
+        </div>
+
+        {/* Mobile Drawer */}
+        <Drawer
+          isOpen={isDrawerOpen}
+          onOpenChange={setIsDrawerOpen}
+          placement="left"
+        >
+          <DrawerContent>
+            <DrawerHeader>
+              <h2 className="text-xl font-semibold">Navigation</h2>
+            </DrawerHeader>
+            <DrawerBody>
+              <NavigationListbox />
+            </DrawerBody>
+          </DrawerContent>
+        </Drawer>
+
+        <div className="flex gap-8">
+          {/* Desktop Navigation sidebar */}
+          <aside className="hidden lg:block w-64 shrink-0 sticky top-18 self-start">
+            <Card>
+              <CardHeader className="pb-2">
+                <h2 className="text-xl font-semibold">Navigation</h2>
+              </CardHeader>
+              <CardBody>
+                <NavigationListbox />
+              </CardBody>
+            </Card>
+          </aside>
+
+          {/* Main content */}
+          <main className="flex-1 w-full min-w-0 space-y-8">
+            {/* Default documentation */}
+            {defaultContent ? (
+              <div>{defaultContent}</div>
+            ) : (
+              <DefaultDocumentation />
+            )}
+
+            {/* Modules section */}
+            {modules.length > 0 && (
+              <div className="space-y-6">
+                <Card id="section-modules" className="scroll-mt-32">
+                  <CardHeader>
+                    <h2 className="text-2xl font-semibold">
+                      Modules disponibles
+                    </h2>
+                  </CardHeader>
+                  <CardBody>
+                    <p className="text-slate-600 dark:text-slate-400 mb-4">
+                      Voici la liste de tous les modules disponibles dans
+                      LastBrain. Les modules actifs sont utilisés dans votre
+                      application.
+                    </p>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                      {modules.map((module) => (
+                        <Card
+                          key={module.id}
+                          isPressable={module.available}
+                          onPress={() =>
+                            module.available && scrollToSection(module.id)
+                          }
+                          className={`${
+                            module.available
+                              ? "cursor-pointer hover:shadow-lg"
+                              : "opacity-70"
+                          } transition-shadow`}
+                        >
+                          <CardBody>
+                            <div className="flex items-start justify-between mb-2">
+                              <h3 className="text-lg font-semibold">
+                                {module.name}
+                              </h3>
+                              <Chip
+                                size="sm"
+                                color={module.available ? "success" : "warning"}
+                                variant="flat"
+                              >
+                                {module.available ? "Actif" : "Inactif"}
+                              </Chip>
+                            </div>
+                            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+                              {module.description}
+                            </p>
+                            {!module.available && (
+                              <div className="flex justify-between items-center text-xs text-default-700 mt-2">
+                                <span>Pour activer : </span>
+                                <Snippet hideSymbol color="primary">
+                                  {`pnpm lastbrain add-module ${module.id}`}
+                                </Snippet>
+                              </div>
+                            )}
+                          </CardBody>
+                        </Card>
+                      ))}
+                    </div>
+                  </CardBody>
+                </Card>
+
+                {/* Module documentation - seulement pour les modules actifs */}
+                {modules
+                  .filter((m) => m.available)
+                  .map((module) => (
+                    <div
+                      key={module.id}
+                      id={`module-${module.id}`}
+                      className="scroll-mt-32"
+                    >
+                      {module.content}
+                    </div>
+                  ))}
+              </div>
+            )}
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/templates/DocsPageWithModules.tsx

@@ -0,0 +1,22 @@
+// Template for docs page with dynamic module loading
+import React from "react";
+import { DocPage } from "./DocPage.js";
+
+// This will be replaced by module-build script with actual imports
+// MODULES_IMPORTS_PLACEHOLDER
+
+interface ModuleDocConfig {
+  id: string;
+  name: string;
+  description: string;
+  content: React.ReactNode;
+  available: boolean;
+}
+
+export function DocsPageWithModules() {
+  // This will be replaced by module-build script with actual module configs
+  // MODULES_CONFIG_PLACEHOLDER
+  const modules: ModuleDocConfig[] = [];
+
+  return <DocPage modules={modules} />;
+}

package/src/templates/MigrationsGuidePage.tsx

@@ -0,0 +1,61 @@
+// GENERATED BY LASTBRAIN TEMPLATE (Migrations Guide)
+import React from "react";
+import { Card, Code, Divider, Chip } from "@lastbrain/ui";
+
+export function MigrationsGuidePage() {
+  return (
+    <div className="max-w-5xl mx-auto px-6 py-10 space-y-10">
+      <header className="space-y-3">
+        <h1 className="text-3xl font-bold">Guide Migrations</h1>
+        <p className="text-slate-600 dark:text-slate-300 text-sm">
+          Gestion séparée des scripts UP et DOWN par module.
+        </p>
+        <div className="flex gap-2 flex-wrap">
+          <Chip color="primary">UP</Chip>
+          <Chip color="secondary">DOWN</Chip>
+          <Chip color="success">Reset</Chip>
+          <Chip color="warning">Push</Chip>
+        </div>
+      </header>
+      <Divider />
+      <Card className="p-6 space-y-3">
+        <h2 className="text-lg font-semibold">Emplacement</h2>
+        <Code className="text-xs block">supabase/migrations/ (UP)</Code>
+        <Code className="text-xs block">supabase/migrations-down/ (DOWN)</Code>
+      </Card>
+      <Card className="p-6 space-y-3">
+        <h2 className="text-lg font-semibold">Cycle</h2>
+        <ol className="list-decimal pl-5 text-sm space-y-1 text-slate-600 dark:text-slate-400">
+          <li>Ajouter fichier SQL (ex: 002_add_profiles.sql)</li>
+          <li>Rebuild module si nouveaux scripts copiés</li>
+          <li>
+            <Code className="text-xs inline">supabase db push</Code> pour
+            appliquer
+          </li>
+          <li>
+            <Code className="text-xs inline">supabase db reset</Code> en dev
+            complet
+          </li>
+          <li>DOWNs exécutés via remove-module (option down)</li>
+        </ol>
+      </Card>
+      <Card className="p-6 space-y-2">
+        <h2 className="text-lg font-semibold">Exemple fichier UP</h2>
+        <Code className="text-xs whitespace-pre-wrap">{`-- 002_add_profiles.sql
+CREATE TABLE profiles (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  email text NOT NULL UNIQUE,
+  created_at timestamptz DEFAULT now()
+);`}</Code>
+      </Card>
+      <Card className="p-6 space-y-2">
+        <h2 className="text-lg font-semibold">Exemple fichier DOWN</h2>
+        <Code className="text-xs whitespace-pre-wrap">{`-- 002_add_profiles.down.sql
+DROP TABLE IF EXISTS profiles CASCADE;`}</Code>
+      </Card>
+      <footer className="text-center text-xs text-slate-500 dark:text-slate-500">
+        Évitez reset en production; privilégiez push contrôlé.
+      </footer>
+    </div>
+  );
+}

package/src/templates/ModuleGuidePage.tsx

@@ -0,0 +1,71 @@
+// GENERATED BY LASTBRAIN TEMPLATE (Module Guide)
+import React from "react";
+import { Card, Code, Divider, Chip } from "@lastbrain/ui";
+
+export function ModuleGuidePage() {
+  return (
+    <div className="max-w-5xl mx-auto px-6 py-10 space-y-10">
+      <header className="space-y-3">
+        <h1 className="text-3xl font-bold">Guide Modules</h1>
+        <p className="text-slate-600 dark:text-slate-300 text-sm">
+          Créez, enregistrez et déployez des modules LastBrain réutilisables.
+        </p>
+        <div className="flex gap-2 flex-wrap">
+          <Chip color="primary">Pages</Chip>
+          <Chip color="secondary">APIs</Chip>
+          <Chip color="success">Migrations</Chip>
+        </div>
+      </header>
+      <Divider />
+      <Card className="p-6 space-y-4">
+        <h2 className="text-lg font-semibold">Structure d'un module</h2>
+        <Code className="text-xs block">packages/module-xyz/</Code>
+        <Code className="text-xs block">├─ src/</Code>
+        <Code className="text-xs block">│ ├─ index.ts</Code>
+        <Code className="text-xs block">│ ├─ xyz.build.config.ts</Code>
+        <Code className="text-xs block">│ ├─ web/public/XyzPage.tsx</Code>
+        <Code className="text-xs block">│ └─ api/public/info.ts</Code>
+        <Code className="text-xs block">
+          └─ supabase/migrations/001_xyz_init.sql
+        </Code>
+      </Card>
+      <Card className="p-6 space-y-3">
+        <h2 className="text-lg font-semibold">Config de build</h2>
+        <Code className="text-xs whitespace-pre-wrap">{`const xyzBuildConfig = {
+  moduleName: "@lastbrain/module-xyz",
+  pages: [
+    { section: "public", path: "/xyz", componentExport: "XyzPage" }
+  ],
+  apis: [
+    { method: "GET", path: "/api/xyz/info", handlerExport: "GET", entryPoint: "api/public/info", authRequired: false }
+  ],
+  migrations: { enabled: true, priority: 30, path: "supabase/migrations", files: ["001_xyz_init.sql"] }
+};`}</Code>
+      </Card>
+      <Card className="p-6 space-y-2">
+        <h2 className="text-lg font-semibold">Cycle</h2>
+        <ol className="list-decimal pl-5 text-sm space-y-1 text-slate-600 dark:text-slate-400">
+          <li>Créer dossier module + config</li>
+          <li>
+            Exporter composants/API dans <code>index.ts</code>
+          </li>
+          <li>
+            <Code className="text-xs inline">pnpm build</Code> dans le module
+          </li>
+          <li>
+            <Code className="text-xs inline">
+              pnpm lastbrain add-module xyz
+            </Code>
+          </li>
+          <li>
+            <Code className="text-xs inline">pnpm build:modules</Code>
+          </li>
+          <li>
+            Appliquer migrations si besoin (
+            <Code className="text-xs inline">supabase db push</Code>)
+          </li>
+        </ol>
+      </Card>
+    </div>
+  );
+}