create-supa-kit 1.0.0

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

@@ -0,0 +1,104 @@
+import { useState, FormEvent } 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: FormEvent<HTMLFormElement>) {
+    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: unknown) {
+      setError(err instanceof Error ? err.message : 'Error desconocido');
+    } 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
+              minLength={6}
+              autoComplete={isSignUp ? 'new-password' : 'current-password'}
+            />
+          </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>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  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-ts/src/index.css

@@ -0,0 +1,8 @@
+*, *::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-ts/src/lib/supabaseClient.ts

@@ -0,0 +1,13 @@
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL as string;
+const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY as string;
+
+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-ts/src/main.tsx

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

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

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

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

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

package/templates/react-supabase-ts-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-ts-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.tsx"></script>
+  </body>
+</html>

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

@@ -0,0 +1,26 @@
+{
+  "name": "template-react-supabase-ts-tailwind",
+  "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",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4"
+  }
+}

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

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

package/templates/react-supabase-ts-tailwind/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 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-ts-tailwind/src/components/Dashboard.tsx

@@ -0,0 +1,50 @@
+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 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-ts-tailwind/src/components/Login.tsx

@@ -0,0 +1,94 @@
+import { useState, FormEvent } 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: FormEvent<HTMLFormElement>) {
+    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: unknown) {
+      setError(err instanceof Error ? err.message : 'Error desconocido');
+    } 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-ts-tailwind/src/index.css

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

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

@@ -0,0 +1,13 @@
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL as string;
+const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY as string;
+
+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-ts-tailwind/src/main.tsx

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

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

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

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

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

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

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