create-supa-kit 1.0.0

package/templates/react-supabase/src/components/Login.jsx

@@ -0,0 +1,181 @@
+import { useState } from 'react';
+import { supabase } from '../lib/supabaseClient';
+
+/**
+ * Login — formulario de autenticación con email y contraseña.
+ *
+ * Permite:
+ *  - Iniciar sesión (sign in)
+ *  - Registrarse (sign up) con el mismo formulario (toggle)
+ *
+ * Supabase gestiona la sesión automáticamente tras el login correcto.
+ * App.jsx reacciona al cambio de sesión y monta <Dashboard>.
+ */
+export default function Login() {
+  const [email,    setEmail]    = useState('');
+  const [password, setPassword] = useState('');
+  const [isSignUp, setIsSignUp] = useState(false);
+  const [loading,  setLoading]  = useState(false);
+  const [error,    setError]    = useState('');
+  const [message,  setMessage]  = useState('');
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    setMessage('');
+
+    try {
+      if (isSignUp) {
+        // ── Registro ───────────────────────────────────────────────────────────
+        const { error } = await supabase.auth.signUp({ email, password });
+        if (error) throw error;
+        setMessage('✅ Revisa tu email para confirmar tu cuenta.');
+      } else {
+        // ── Login ──────────────────────────────────────────────────────────────
+        const { error } = await supabase.auth.signInWithPassword({ email, password });
+        if (error) throw error;
+        // App.jsx detecta el cambio de sesión y renderiza Dashboard
+      }
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div style={styles.wrapper}>
+      <div style={styles.card}>
+        <h1 style={styles.title}>
+          {isSignUp ? 'Crear cuenta' : 'Iniciar sesión'}
+        </h1>
+
+        <form onSubmit={handleSubmit} style={styles.form}>
+          <label style={styles.label}>
+            Email
+            <input
+              style={styles.input}
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="tu@email.com"
+              required
+              autoComplete="email"
+            />
+          </label>
+
+          <label style={styles.label}>
+            Contraseña
+            <input
+              style={styles.input}
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              required
+              autoComplete={isSignUp ? 'new-password' : 'current-password'}
+              minLength={6}
+            />
+          </label>
+
+          {error   && <p style={styles.error}>{error}</p>}
+          {message && <p style={styles.success}>{message}</p>}
+
+          <button style={styles.button} type="submit" disabled={loading}>
+            {loading
+              ? 'Procesando...'
+              : isSignUp ? 'Registrarse' : 'Entrar'}
+          </button>
+        </form>
+
+        <p style={styles.toggle}>
+          {isSignUp ? '¿Ya tienes cuenta?' : '¿No tienes cuenta?'}{' '}
+          <button
+            style={styles.link}
+            type="button"
+            onClick={() => { setIsSignUp(!isSignUp); setError(''); setMessage(''); }}
+          >
+            {isSignUp ? 'Inicia sesión' : 'Regístrate'}
+          </button>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ─── Estilos inline mínimos (reemplaza con tu sistema de diseño) ───────────────
+const styles = {
+  wrapper: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: '100vh',
+    padding: '1rem',
+  },
+  card: {
+    background: '#fff',
+    borderRadius: '12px',
+    padding: '2rem',
+    width: '100%',
+    maxWidth: '400px',
+    boxShadow: '0 4px 24px rgba(0,0,0,0.08)',
+  },
+  title: {
+    fontSize: '1.5rem',
+    fontWeight: 700,
+    marginBottom: '1.5rem',
+    textAlign: 'center',
+  },
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+  },
+  label: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+    fontSize: '0.875rem',
+    fontWeight: 500,
+  },
+  input: {
+    padding: '0.625rem 0.75rem',
+    borderRadius: '8px',
+    border: '1px solid #cbd5e1',
+    fontSize: '1rem',
+    outline: 'none',
+  },
+  button: {
+    marginTop: '0.5rem',
+    padding: '0.75rem',
+    borderRadius: '8px',
+    background: '#3ecf8e',
+    color: '#fff',
+    fontWeight: 600,
+    fontSize: '1rem',
+    border: 'none',
+  },
+  error: {
+    color: '#ef4444',
+    fontSize: '0.875rem',
+  },
+  success: {
+    color: '#22c55e',
+    fontSize: '0.875rem',
+  },
+  toggle: {
+    marginTop: '1.25rem',
+    textAlign: 'center',
+    fontSize: '0.875rem',
+    color: '#64748b',
+  },
+  link: {
+    background: 'none',
+    border: 'none',
+    color: '#3ecf8e',
+    fontWeight: 600,
+    fontSize: '0.875rem',
+    textDecoration: 'underline',
+  },
+};

package/templates/react-supabase/src/index.css

@@ -0,0 +1,17 @@
+/* Reset y base mínima — reemplaza con tu sistema de diseño */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: #f8fafc;
+  color: #1e293b;
+  min-height: 100vh;
+}
+
+button {
+  cursor: pointer;
+}

package/templates/react-supabase/src/lib/supabaseClient.js

@@ -0,0 +1,19 @@
+import { createClient } from '@supabase/supabase-js';
+
+/**
+ * Cliente único de Supabase para toda la app.
+ *
+ * Las variables de entorno se leen desde el archivo .env (copia de .env.example).
+ * Vite expone sólo las variables que empiezan con VITE_.
+ */
+const supabaseUrl  = import.meta.env.VITE_SUPABASE_URL;
+const supabaseKey  = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+if (!supabaseUrl || !supabaseKey) {
+  throw new Error(
+    '❌ Faltan variables de entorno de Supabase.\n' +
+    'Copia .env.example a .env y completa VITE_SUPABASE_URL y VITE_SUPABASE_ANON_KEY.'
+  );
+}
+
+export const supabase = createClient(supabaseUrl, supabaseKey);

package/templates/react-supabase/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './index.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/templates/react-supabase/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});

package/templates/react-supabase-tailwind/.env.example

@@ -0,0 +1,5 @@
+# ─── Supabase ──────────────────────────────────────────────────────────────────
+# Obtén estos valores en: https://app.supabase.com → Settings → API
+
+VITE_SUPABASE_URL=https://xxxxxxxxxxxxxxxxxxx.supabase.co
+VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

package/templates/react-supabase-tailwind/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mi App Supabase</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/templates/react-supabase-tailwind/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "template-react-supabase-tailwind",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@supabase/supabase-js": "^2.39.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "tailwindcss": "^3.4.1",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.35",
+    "vite": "^5.1.4"
+  }
+}

package/templates/react-supabase-tailwind/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/templates/react-supabase-tailwind/src/App.jsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import { supabase } from './lib/supabaseClient';
+import Login from './components/Login';
+import Dashboard from './components/Dashboard';
+
+export default function App() {
+  const [session, setSession] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
+      setLoading(false);
+    });
+
+    const { data: { subscription } } = supabase.auth.onAuthStateChange(
+      (_event, session) => setSession(session)
+    );
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <p className="text-slate-500">Cargando...</p>
+      </div>
+    );
+  }
+
+  return session ? <Dashboard session={session} /> : <Login />;
+}

package/templates/react-supabase-tailwind/src/components/Dashboard.jsx

@@ -0,0 +1,45 @@
+import { supabase } from '../lib/supabaseClient';
+
+export default function Dashboard({ session }) {
+  const { user } = session;
+
+  async function handleLogout() {
+    const { error } = await supabase.auth.signOut();
+    if (error) console.error('Error al cerrar sesión:', error.message);
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-50 flex justify-center items-start py-8 px-4">
+      <div className="bg-white rounded-2xl shadow-lg p-8 w-full max-w-2xl">
+        {/* Cabecera */}
+        <header className="flex items-center justify-between mb-6">
+          <h1 className="text-2xl font-bold text-slate-800">Dashboard</h1>
+          <button
+            onClick={handleLogout}
+            className="px-4 py-2 text-sm font-medium rounded-lg border border-slate-200 bg-slate-100 hover:bg-slate-200 transition-colors"
+          >
+            Cerrar sesión
+          </button>
+        </header>
+
+        {/* Contenido */}
+        <section className="mb-6">
+          <p className="text-lg text-slate-700 mb-1">
+            ¡Hola, <span className="font-semibold">{user.email}</span>!
+          </p>
+          <p className="text-slate-500 text-sm">Estás autenticado correctamente. 🎉</p>
+        </section>
+
+        {/* Debug */}
+        <details className="mt-4">
+          <summary className="text-xs text-slate-400 cursor-pointer select-none">
+            Ver datos de sesión (debug)
+          </summary>
+          <pre className="mt-3 bg-slate-100 rounded-lg p-4 text-xs overflow-x-auto text-slate-600">
+            {JSON.stringify({ id: user.id, email: user.email, role: user.role }, null, 2)}
+          </pre>
+        </details>
+      </div>
+    </div>
+  );
+}

package/templates/react-supabase-tailwind/src/components/Login.jsx

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import { supabase } from '../lib/supabaseClient';
+
+export default function Login() {
+  const [email,    setEmail]    = useState('');
+  const [password, setPassword] = useState('');
+  const [isSignUp, setIsSignUp] = useState(false);
+  const [loading,  setLoading]  = useState(false);
+  const [error,    setError]    = useState('');
+  const [message,  setMessage]  = useState('');
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    setMessage('');
+
+    try {
+      if (isSignUp) {
+        const { error } = await supabase.auth.signUp({ email, password });
+        if (error) throw error;
+        setMessage('✅ Revisa tu email para confirmar tu cuenta.');
+      } else {
+        const { error } = await supabase.auth.signInWithPassword({ email, password });
+        if (error) throw error;
+      }
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-slate-50 px-4">
+      <div className="bg-white rounded-2xl shadow-lg p-8 w-full max-w-md">
+        <h1 className="text-2xl font-bold text-center mb-6 text-slate-800">
+          {isSignUp ? 'Crear cuenta' : 'Iniciar sesión'}
+        </h1>
+
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+          <label className="flex flex-col gap-1 text-sm font-medium text-slate-700">
+            Email
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="tu@email.com"
+              required
+              autoComplete="email"
+              className="px-3 py-2.5 rounded-lg border border-slate-300 text-base focus:outline-none focus:ring-2 focus:ring-emerald-400"
+            />
+          </label>
+
+          <label className="flex flex-col gap-1 text-sm font-medium text-slate-700">
+            Contraseña
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              required
+              minLength={6}
+              autoComplete={isSignUp ? 'new-password' : 'current-password'}
+              className="px-3 py-2.5 rounded-lg border border-slate-300 text-base focus:outline-none focus:ring-2 focus:ring-emerald-400"
+            />
+          </label>
+
+          {error   && <p className="text-red-500 text-sm">{error}</p>}
+          {message && <p className="text-emerald-600 text-sm">{message}</p>}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="mt-1 py-3 rounded-lg bg-emerald-500 hover:bg-emerald-600 text-white font-semibold text-base transition-colors disabled:opacity-60"
+          >
+            {loading ? 'Procesando...' : isSignUp ? 'Registrarse' : 'Entrar'}
+          </button>
+        </form>
+
+        <p className="mt-5 text-center text-sm text-slate-500">
+          {isSignUp ? '¿Ya tienes cuenta?' : '¿No tienes cuenta?'}{' '}
+          <button
+            type="button"
+            onClick={() => { setIsSignUp(!isSignUp); setError(''); setMessage(''); }}
+            className="text-emerald-600 font-semibold underline"
+          >
+            {isSignUp ? 'Inicia sesión' : 'Regístrate'}
+          </button>
+        </p>
+      </div>
+    </div>
+  );
+}

package/templates/react-supabase-tailwind/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/templates/react-supabase-tailwind/src/lib/supabaseClient.js

@@ -0,0 +1,13 @@
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+if (!supabaseUrl || !supabaseKey) {
+  throw new Error(
+    '❌ Faltan variables de entorno de Supabase.\n' +
+    'Copia .env.example a .env y completa VITE_SUPABASE_URL y VITE_SUPABASE_ANON_KEY.'
+  );
+}
+
+export const supabase = createClient(supabaseUrl, supabaseKey);

package/templates/react-supabase-tailwind/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './index.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/templates/react-supabase-tailwind/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,jsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/templates/react-supabase-tailwind/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});

package/templates/react-supabase-ts/.env.example

@@ -0,0 +1,5 @@
+# ─── Supabase ──────────────────────────────────────────────────────────────────
+# Obtén estos valores en: https://app.supabase.com → Settings → API
+
+VITE_SUPABASE_URL=https://xxxxxxxxxxxxxxxxxxx.supabase.co
+VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

package/templates/react-supabase-ts/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mi App Supabase</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/react-supabase-ts/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "template-react-supabase-ts",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@supabase/supabase-js": "^2.39.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4"
+  }
+}

package/templates/react-supabase-ts/src/App.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import type { Session } from '@supabase/supabase-js';
+import { supabase } from './lib/supabaseClient';
+import Login from './components/Login';
+import Dashboard from './components/Dashboard';
+
+export default function App() {
+  const [session, setSession] = useState<Session | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
+      setLoading(false);
+    });
+
+    const { data: { subscription } } = supabase.auth.onAuthStateChange(
+      (_event, session) => setSession(session)
+    );
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  if (loading) {
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
+        <p>Cargando...</p>
+      </div>
+    );
+  }
+
+  return session ? <Dashboard session={session} /> : <Login />;
+}

package/templates/react-supabase-ts/src/components/Dashboard.tsx

@@ -0,0 +1,56 @@
+import type { Session } from '@supabase/supabase-js';
+import { supabase } from '../lib/supabaseClient';
+
+interface Props {
+  session: Session;
+}
+
+export default function Dashboard({ session }: Props) {
+  const { user } = session;
+
+  async function handleLogout() {
+    const { error } = await supabase.auth.signOut();
+    if (error) console.error('Error al cerrar sesión:', error.message);
+  }
+
+  return (
+    <div style={styles.wrapper}>
+      <div style={styles.card}>
+        <header style={styles.header}>
+          <h1 style={styles.title}>Dashboard</h1>
+          <button style={styles.logoutBtn} onClick={handleLogout}>
+            Cerrar sesión
+          </button>
+        </header>
+
+        <section style={styles.section}>
+          <p style={styles.welcome}>
+            ¡Hola, <strong>{user.email}</strong>!
+          </p>
+          <p style={styles.hint}>Estás autenticado correctamente. 🎉</p>
+        </section>
+
+        <details style={styles.details}>
+          <summary style={styles.summary}>Ver datos de sesión (debug)</summary>
+          <pre style={styles.pre}>
+            {JSON.stringify({ id: user.id, email: user.email, role: user.role }, null, 2)}
+          </pre>
+        </details>
+      </div>
+    </div>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  wrapper:   { display: 'flex', justifyContent: 'center', alignItems: 'flex-start', minHeight: '100vh', padding: '2rem 1rem', background: '#f8fafc' },
+  card:      { background: '#fff', borderRadius: '12px', padding: '2rem', width: '100%', maxWidth: '640px', boxShadow: '0 4px 24px rgba(0,0,0,0.08)' },
+  header:    { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' },
+  title:     { fontSize: '1.5rem', fontWeight: 700 },
+  logoutBtn: { padding: '0.5rem 1rem', borderRadius: '8px', background: '#f1f5f9', border: '1px solid #e2e8f0', fontWeight: 500, fontSize: '0.875rem' },
+  section:   { marginBottom: '1.5rem' },
+  welcome:   { fontSize: '1.125rem', marginBottom: '0.5rem' },
+  hint:      { color: '#64748b', fontSize: '0.9rem' },
+  details:   { marginTop: '1rem' },
+  summary:   { cursor: 'pointer', fontSize: '0.875rem', color: '#94a3b8' },
+  pre:       { marginTop: '0.75rem', background: '#f1f5f9', borderRadius: '8px', padding: '1rem', fontSize: '0.8rem', overflowX: 'auto' },
+};