eny-ai 1.0.0 → 2.0.0

package/examples/nextjs-integration.tsx

@@ -0,0 +1,446 @@
+/**
+ * 🔀 NEXT.JS INTEGRATION COM ENY-AI
+ * 90% Simbólico com App Router
+ * 
+ * Uso:
+ * - Server Components: 🔀 Router, 🌐 API
+ * - Client Components: 📝 Forms, 🎯 UI
+ */
+
+import React from 'react';
+import {
+  useEnyState,
+  useEnyEffect,
+  🃏, 🎯, 🔘, 📝, 📦,
+  🔐Manager,
+  criarSistema,
+  useENY
+} from 'eny-ai';
+import { useRouter, usePathname } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
+
+// ═════════════════════════════════════════════════════════════════════════════════
+// SYMBOLIC ROUTER & NAVIGATION
+// ═════════════════════════════════════════════════════════════════════════════════
+
+/**
+ * 🔀 Router Simbólico
+ * Facilita navegação com API limpa
+ */
+export const 🔀Router = {
+  // Navegar para rota
+  🚀: (rota: string) => {
+    const router = useRouter();
+    router.push(rota);
+  },
+
+  // Navegar com parâmetros
+  🎯: (rota: string, params: Record<string, string>) => {
+    const router = useRouter();
+    const query = new URLSearchParams(params).toString();
+    router.push(`${rota}?${query}`);
+  },
+
+  // Voltar
+  ◀: () => {
+    const router = useRouter();
+    router.back();
+  },
+
+  // Atualizar página
+  🔄: () => {
+    const router = useRouter();
+    router.refresh();
+  },
+
+  // Obter rota atual
+  📍: () => {
+    return usePathname();
+  },
+
+  // Obter query params
+  🔍: () => {
+    return useSearchParams();
+  }
+};
+
+// ═════════════════════════════════════════════════════════════════════════════════
+// SYMBOLIC FORMS & DATA BINDING
+// ═════════════════════════════════════════════════════════════════════════════════
+
+/**
+ * 📋 Formulário Simbólico
+ * Manage form state and validation with symbols
+ */
+export const useEnyForm = <T extends Record<string, any>>(
+  inicial: T,
+  onSubmit?: (data: T) => Promise<void>
+) => {
+  const [📝, set📝] = useEnyState<T>('form', inicial);
+  const [⚠️, set⚠️] = useEnyState<Partial<Record<keyof T, string>>>('errors', {});
+  const [⏳, set⏳] = useEnyState<boolean>('submitting', false);
+
+  const 🎯 = (campo: keyof T) => (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    set📝((atual: T) => ({
+      ...atual,
+      [campo]: e.target.value
+    }));
+    // Limpar erro
+    set⚠️((atual: any) => ({
+      ...atual,
+      [campo]: undefined
+    }));
+  };
+
+  const ⚡ = async (e: React.FormEvent) => {
+    e.preventDefault();
+    set⏳(true);
+    try {
+      if (onSubmit) {
+        await onSubmit(📝);
+      }
+    } catch (erro) {
+      set⚠️((atual: any) => ({
+        ...atual,
+        _submit: String(erro)
+      }));
+    } finally {
+      set⏳(false);
+    }
+  };
+
+  return {
+    📝,    // form data
+    set📝,  // set form data
+    🎯,    // field change handler
+    ⚠️,    // errors
+    set⚠️,  // set errors
+    ⏳,    // is submitting
+    ⚡     // handle submit
+  };
+};
+
+// ═════════════════════════════════════════════════════════════════════════════════
+// SYMBOLIC PAGE COMPONENTS
+// ═════════════════════════════════════════════════════════════════════════════════
+
+/**
+ * 🔐 Login Page with Server-side Validation
+ * 'use client' - Cliente-side component
+ */
+export const 🔐Page: React.FC = () => {
+  const { 📝, 🎯, ⚠️, ⏳, ⚡ } = useEnyForm(
+    { email: '', password: '' },
+    async (data) => {
+      const usuario = await 🔐Manager.🔐(data.email, data.password);
+      if (!usuario) {
+        throw new Error('Credenciais inválidas');
+      }
+      // Navegar para dashboard
+      🔀Router.🚀('/dashboard');
+    }
+  );
+
+  return (
+    <📦 className="min-h-screen flex items-center justify-center">
+      <🃏
+        title="🔐 Login Simbólico"
+        description="Acesso com 90% código simbólico"
+      >
+        <form onSubmit={⚡} className="space-y-4">
+          <div>
+            <📝
+              type="email"
+              placeholder="📧 Email"
+              value={📝.email}
+              onChange={🎯('email')}
+            />
+            {⚠️.email && <span className="text-red-500 text-sm">{⚠️.email}</span>}
+          </div>
+
+          <div>
+            <📝
+              type="password"
+              placeholder="🔒 Senha"
+              value={📝.password}
+              onChange={🎯('password')}
+            />
+            {⚠️.password && <span className="text-red-500 text-sm">{⚠️.password}</span>}
+          </div>
+
+          <🔘
+            label={⏳ ? '⏳ Entrando...' : '🔑 Entrar'}
+            type="submit"
+            disabled={⏳}
+            className="w-full bg-blue-600 hover:bg-blue-700 text-white"
+          />
+
+          {⚠️._submit && (
+            <div className="text-red-500 text-center">❌ {⚠️._submit}</div>
+          )}
+        </form>
+      </🃏>
+    </📦>
+  );
+};
+
+/**
+ * 🏠 Dashboard Page
+ * Com dados carregados do Firestore
+ */
+export const 🏠DashboardPage: React.FC = () => {
+  const { Σ } = useENY();
+  const [📊, set📊] = useEnyState<any[]>('dados', []);
+  const [⏳, set⏳] = useEnyState<boolean>('loading', true);
+
+  useEnyEffect(() => {
+    const carregarDados = async () => {
+      try {
+        const dados = await 🔐Manager.📖('items');
+        set📊(dados || []);
+      } catch (erro) {
+        console.error('Erro ao carregar:', erro);
+      } finally {
+        set⏳(false);
+      }
+    };
+
+    carregarDados();
+  }, []);
+
+  const ⚡_logout = async () => {
+    await 🔐Manager.🚪();
+    🔀Router.🚀('/');
+  };
+
+  return (
+    <📦>
+      <div className="flex justify-between items-center mb-6">
+        <🎯 title="🏠 Dashboard Simbólico" />
+        <🔘 onClick={⚡_logout} label="🚪 Logout" className="bg-red-500" />
+      </div>
+
+      {⏳ && <div className="text-center py-8">⏳ Carregando dados...</div>}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {📊?.map((item: any, idx: number) => (
+          <🃏
+            key={idx}
+            title={item.title}
+            description={item.description}
+            tags={item.tags}
+            image={item.image}
+          />
+        ))}
+      </div>
+    </📦>
+  );
+};
+
+/**
+ * ➕ Create Item Page
+ * Com forma e validação
+ */
+export const ➕CreatItemPage: React.FC = () => {
+  const router = 🔀Router;
+  const { 📝, 🎯, ⚠️, ⏳, ⚡ } = useEnyForm(
+    {
+      title: '',
+      description: '',
+      image: '',
+      tags: ''
+    },
+    async (data) => {
+      const novo = await 🔐Manager.✍️('items', {
+        title: data.title,
+        description: data.description,
+        image: data.image,
+        tags: data.tags.split(',').map((t) => t.trim()),
+        createdAt: new Date().toISOString()
+      });
+
+      if (novo) {
+        router.🚀('/dashboard');
+      }
+    }
+  );
+
+  return (
+    <📦 className="max-w-2xl mx-auto">
+      <🎯 title="➕ Novo Item" />
+
+      <form onSubmit={⚡} className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium mb-2">Título</label>
+          <📝
+            type="text"
+            placeholder="Título do item"
+            value={📝.title}
+            onChange={🎯('title')}
+            className="w-full"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-2">Descrição</label>
+          <textarea
+            placeholder="Descrição"
+            value={📝.description}
+            onChange={🎯('description')}
+            className="w-full border rounded p-2"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-2">Imagem URL</label>
+          <📝
+            type="url"
+            placeholder="https://..."
+            value={📝.image}
+            onChange={🎯('image')}
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-2">Tags (vírgula separado)</label>
+          <📝
+            type="text"
+            placeholder="tag1, tag2, tag3"
+            value={📝.tags}
+            onChange={🎯('tags')}
+          />
+        </div>
+
+        <🔘
+          label={⏳ ? '⏳...' : '💾 Salvar'}
+          type="submit"
+          disabled={⏳}
+          className="w-full bg-green-600 hover:bg-green-700"
+        />
+      </form>
+    </📦>
+  );
+};
+
+/**
+ * 🔍 Search Page
+ * Com query params simbólicos
+ */
+export const 🔍SearchPage: React.FC = () => {
+  const searchParams = 🔀Router.🔍();
+  const q = searchParams?.get('q') || '';
+  const [🔎, set🔎] = useEnyState<string>('query', q);
+  const [📋, set📋] = useEnyState<any[]>('results', []);
+
+  const ⚡_search = async (termo: string) => {
+    if (!termo.trim()) return;
+
+    // Aqui você faria uma busca no Firestore
+    // const results = await 🔐Manager.📖('items');
+    // const filtered = results.filter(item =>
+    //   item.title.includes(termo) ||
+    //   item.description.includes(termo)
+    // );
+    // set📋(filtered);
+  };
+
+  return (
+    <📦>
+      <🎯 title="🔍 Buscar Itens" />
+
+      <div className="mb-6">
+        <📝
+          type="text"
+          placeholder="🔍 Buscar..."
+          value={🔎}
+          onChange={(e) => set🔎(e.target.value)}
+          className="w-full"
+        />
+        <🔘
+          onClick={() => ⚡_search(🔎)}
+          label="🔍 Buscar"
+          className="mt-2 w-full"
+        />
+      </div>
+
+      {📋.map((item, idx) => (
+        <🃏
+          key={idx}
+          title={item.title}
+          description={item.description}
+        />
+      ))}
+    </📦>
+  );
+};
+
+// ═════════════════════════════════════════════════════════════════════════════════
+// LAYOUT ROOT COM PROVIDER
+// ═════════════════════════════════════════════════════════════════════════════════
+
+import { ENYProvider } from 'eny-ai';
+
+export const 🌍Layout: React.FC<{ children: React.ReactNode }> = ({
+  children
+}) => {
+  return (
+    <ENYProvider>
+      <html lang="pt-BR">
+        <head>
+          <title>🧠 ENY-AI Next.js App</title>
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+        </head>
+        <body className="bg-gradient-to-br from-indigo-50 to-blue-100">
+          <nav className="bg-indigo-600 text-white p-4">
+            <div className="max-w-6xl mx-auto flex justify-between items-center">
+              <span className="text-xl font-bold">🧠 ENY-AI</span>
+              <div className="space-x-4">
+                <a href="/dashboard" className="hover:text-indigo-200">
+                  🏠 Dashboard
+                </a>
+                <a href="/create" className="hover:text-indigo-200">
+                  ➕ Novo
+                </a>
+                <a href="/search" className="hover:text-indigo-200">
+                  🔍 Buscar
+                </a>
+              </div>
+            </div>
+          </nav>
+          {children}
+        </body>
+      </html>
+    </ENYProvider>
+  );
+};
+
+// ═════════════════════════════════════════════════════════════════════════════════
+// COMO USAR
+// ═════════════════════════════════════════════════════════════════════════════════
+
+/**
+ * 1. Criar arquivo: app/page.tsx
+ *    export default 🔐Page;
+ * 
+ * 2. Criar arquivo: app/dashboard/page.tsx
+ *    export default 🏠DashboardPage;
+ * 
+ * 3. Criar arquivo: app/create/page.tsx
+ *    'use client'
+ *    export default ➕CreatItemPage;
+ * 
+ * 4. Criar arquivo: app/search/page.tsx
+ *    'use client'
+ *    export default 🔍SearchPage;
+ * 
+ * 5. Atualizar: app/layout.tsx
+ *    export default 🌍Layout;
+ * 
+ * 6. Instalar dependências:
+ *    npm install eny-ai firebase next
+ * 
+ * 7. Rodar:
+ *    npm run dev
+ */