@lastbrain/app 0.1.30 → 0.1.31

package/src/templates/DefaultDoc.tsx

@@ -666,6 +666,271 @@ const proxyUrl = storagePathToProxyUrl("avatar/user_128_123456.webp");
         </CardBody>
       </Card>
 
+      <Card id="section-realtime" className="scroll-mt-32">
+        <CardHeader>
+          <h2 className="text-2xl font-semibold flex items-center gap-2">
+            <Zap size={24} />
+            Système Realtime
+          </h2>
+        </CardHeader>
+        <CardBody className="space-y-4">
+          <p className="text-slate-600 dark:text-slate-400">
+            LastBrain intègre un système de notifications et de synchronisation
+            en temps réel basé sur Supabase Realtime. Le système est entièrement
+            automatisé et scalable.
+          </p>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">
+              Configuration dans les modules
+            </h3>
+            <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">
+              Ajoutez la configuration realtime dans votre{" "}
+              <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                build.config.ts
+              </code>{" "}
+              pour activer la synchronisation en temps réel :
+            </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: "Module Auth",
+  description: "Gestion de l'authentification",
+  
+  // Configuration realtime
+  realtime: {
+    moduleId: "module-auth",
+    tables: [
+      {
+        schema: "public",
+        table: "user_notifications",
+        event: "*", // INSERT, UPDATE, DELETE ou *
+        filter: "owner_id=eq.\${USER_ID}",
+        broadcast: "user_notifications_updated"
+      },
+      {
+        schema: "public", 
+        table: "user_profiles",
+        event: "*",
+        filter: "owner_id=eq.\${USER_ID}",
+        broadcast: "user_profile_updated"
+      }
+    ]
+  },
+  
+  pages: [
+    // vos pages...
+  ]
+}`}</pre>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">
+              Génération automatique de la configuration
+            </h3>
+            <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+              Lors du build des modules, la configuration realtime est
+              automatiquement générée :
+            </p>
+            <Snippet symbol="" hideSymbol className="text-sm mb-3">
+              pnpm build:modules
+            </Snippet>
+            <p className="text-sm text-slate-600 dark:text-slate-400">
+              Cela génère automatiquement{" "}
+              <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                config/realtime.ts
+              </code>{" "}
+              avec toutes les configurations des modules.
+            </p>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">
+              Utilisation dans les composants
+            </h3>
+            <p className="text-sm text-slate-600 dark:text-slate-400 mb-3">
+              Utilisez les hooks pré-construits pour écouter les changements :
+            </p>
+            <div className="space-y-4">
+              <div>
+                <h4 className="font-medium mb-2">
+                  1. Hook générique pour une table
+                </h4>
+                <div className="bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono overflow-x-auto">
+                  <pre>{`import { useTableRealtime } from "@lastbrain/core";
+
+function MonComposant() {
+  const signal = useTableRealtime("user_notifications");
+  
+  useEffect(() => {
+    if (signal.hasUpdates) {
+      console.log("Nouvelle notification!");
+      // Recharger vos données
+      refetchNotifications();
+    }
+  }, [signal.tick]);
+}`}</pre>
+                </div>
+              </div>
+
+              <div>
+                <h4 className="font-medium mb-2">
+                  2. Hook spécialisé pour les notifications
+                </h4>
+                <div className="bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono overflow-x-auto">
+                  <pre>{`import { useNotifications } from "../hooks/useNotifications";
+
+function NotificationBell() {
+  const { notifications, loading, hasUpdates } = useNotifications();
+  
+  return (
+    <div>
+      🔔 {notifications.length}
+      {hasUpdates && <span>•</span>}
+    </div>
+  );
+}`}</pre>
+                </div>
+              </div>
+
+              <div>
+                <h4 className="font-medium mb-2">
+                  3. Hook bas niveau avec EventBus
+                </h4>
+                <div className="bg-slate-50 dark:bg-slate-900 p-4 rounded-lg text-sm font-mono overflow-x-auto">
+                  <pre>{`import { useRealtimeSignal } from "@lastbrain/core";
+
+function MonComposant() {
+  const signal = useRealtimeSignal("user_notifications_updated");
+  
+  useEffect(() => {
+    if (signal.hasUpdates) {
+      // Événement spécifique reçu
+      const payload = signal.lastPayload;
+      console.log("Données reçues:", payload);
+    }
+  }, [signal.tick]);
+}`}</pre>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">
+              Architecture du système
+            </h3>
+            <div className="space-y-3">
+              <div className="border-l-4 border-blue-500 pl-4">
+                <h4 className="font-semibold text-blue-600 dark:text-blue-400">
+                  🎯 EventBus Global
+                </h4>
+                <p className="text-sm text-slate-600 dark:text-slate-400">
+                  Système central de coordination des événements realtime à
+                  travers toute l'application.
+                </p>
+              </div>
+
+              <div className="border-l-4 border-green-500 pl-4">
+                <h4 className="font-semibold text-green-600 dark:text-green-400">
+                  🔌 RealtimeProvider
+                </h4>
+                <p className="text-sm text-slate-600 dark:text-slate-400">
+                  Provider React qui établit les connexions Supabase Realtime
+                  basées sur la configuration des modules.
+                </p>
+              </div>
+
+              <div className="border-l-4 border-purple-500 pl-4">
+                <h4 className="font-semibold text-purple-600 dark:text-purple-400">
+                  ⚡ Hooks Scalables
+                </h4>
+                <p className="text-sm text-slate-600 dark:text-slate-400">
+                  Collection de hooks React pour écouter des tables ou
+                  événements spécifiques avec auto-refresh.
+                </p>
+              </div>
+
+              <div className="border-l-4 border-orange-500 pl-4">
+                <h4 className="font-semibold text-orange-600 dark:text-orange-400">
+                  🛠️ Build intégré
+                </h4>
+                <p className="text-sm text-slate-600 dark:text-slate-400">
+                  Génération automatique de la configuration TypeScript lors du
+                  build des modules.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Avantages du système</h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+              <div className="flex items-start gap-2">
+                <span className="text-green-600">✅</span>
+                <span>Configuration déclarative dans les modules</span>
+              </div>
+              <div className="flex items-start gap-2">
+                <span className="text-green-600">✅</span>
+                <span>Génération automatique de config</span>
+              </div>
+              <div className="flex items-start gap-2">
+                <span className="text-green-600">✅</span>
+                <span>Hooks React prêts à l'emploi</span>
+              </div>
+              <div className="flex items-start gap-2">
+                <span className="text-green-600">✅</span>
+                <span>Sécurité RLS de Supabase</span>
+              </div>
+              <div className="flex items-start gap-2">
+                <span className="text-green-600">✅</span>
+                <span>Scalable pour n'importe quelle table</span>
+              </div>
+              <div className="flex items-start gap-2">
+                <span className="text-green-600">✅</span>
+                <span>TypeScript avec types générés</span>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-2">
+              Exemples d'utilisation
+            </h3>
+            <div className="space-y-3">
+              <div className="p-3 bg-blue-50 dark:bg-blue-950 rounded-lg">
+                <h4 className="font-medium text-blue-700 dark:text-blue-300 mb-1">
+                  🔔 Notifications
+                </h4>
+                <p className="text-sm text-blue-600 dark:text-blue-400">
+                  Affichage en temps réel des nouvelles notifications avec badge
+                  et auto-refresh
+                </p>
+              </div>
+
+              <div className="p-3 bg-purple-50 dark:bg-purple-950 rounded-lg">
+                <h4 className="font-medium text-purple-700 dark:text-purple-300 mb-1">
+                  👥 Utilisateurs en ligne
+                </h4>
+                <p className="text-sm text-purple-600 dark:text-purple-400">
+                  Suivi des connexions/déconnexions des utilisateurs en direct
+                </p>
+              </div>
+
+              <div className="p-3 bg-green-50 dark:bg-green-950 rounded-lg">
+                <h4 className="font-medium text-green-700 dark:text-green-300 mb-1">
+                  📊 Données collaboratives
+                </h4>
+                <p className="text-sm text-green-600 dark:text-green-400">
+                  Synchronisation automatique des modifications de données entre
+                  utilisateurs
+                </p>
+              </div>
+            </div>
+          </div>
+        </CardBody>
+      </Card>
+
       <Card id="section-module-docs" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">

package/src/templates/DocPage.tsx

@@ -130,6 +130,7 @@ export function DocPage({ modules = [], defaultContent }: DocPageProps) {
         "section-create-module",
         "section-database",
         "section-storage",
+        "section-realtime",
         "section-ui",
         "section-module-docs",
         "section-links",
@@ -233,6 +234,12 @@ export function DocPage({ modules = [], defaultContent }: DocPageProps) {
       description: "Gestion des fichiers",
       icon: HardDrive,
     },
+    {
+      id: "section-realtime",
+      name: "Système Realtime",
+      description: "Synchronisation temps réel",
+      icon: Sparkles,
+    },
     {
       id: "section-ui",
       name: "Interface utilisateur",