create-supa-kit 1.0.0

package/README.md

@@ -0,0 +1,100 @@
+# create-supa-kit
+
+> Scaffold a React + Vite + Supabase Auth app in seconds.
+
+```bash
+npx create-supa-kit
+```
+
+---
+
+## What it does
+
+`create-supa-kit` is an interactive CLI that generates a ready-to-use React project with Supabase authentication already wired up — login, sign up, persistent sessions, and a protected dashboard, all out of the box.
+
+## Templates
+
+Four templates are available based on your answers:
+
+| TypeScript | Tailwind CSS | Template used |
+|:---:|:---:|---|
+| No | No | `react-supabase` |
+| Yes | No | `react-supabase-ts` |
+| No | Yes | `react-supabase-tailwind` |
+| Yes | Yes | `react-supabase-ts-tailwind` |
+
+## Usage
+
+```bash
+npx create-supa-kit
+```
+
+The CLI will ask three questions:
+
+```
+? Project name?          my-app
+? Use TypeScript?        No
+? Include Tailwind CSS?  No
+```
+
+Then it scaffolds the project and prints the next steps:
+
+```bash
+cd my-app
+npm install
+cp .env.example .env    # add your Supabase keys
+npm run dev
+```
+
+## Environment variables
+
+Open `.env` and fill in your project credentials from [app.supabase.com](https://app.supabase.com) → **Settings → API**:
+
+```env
+VITE_SUPABASE_URL      = https://your-project.supabase.co
+VITE_SUPABASE_ANON_KEY = eyJ...
+```
+
+## What's included in every template
+
+```
+src/
+├── lib/
+│   └── supabaseClient.js   # single Supabase client instance
+├── components/
+│   ├── Login.jsx            # email/password login + sign up (toggle)
+│   └── Dashboard.jsx        # protected page
+├── App.jsx                  # session control via onAuthStateChange
+└── main.jsx
+.env.example                 # env variable template
+```
+
+### Auth features
+
+| Feature | How |
+|---|---|
+| Login | `supabase.auth.signInWithPassword` |
+| Sign up | `supabase.auth.signUp` |
+| Persistent session | Automatic — stored in `localStorage` |
+| Logout | `supabase.auth.signOut` |
+| Protected route | `App.jsx` renders `Dashboard` only when session exists |
+
+## Requirements
+
+- Node.js >= 18
+
+## Local development
+
+```bash
+git clone https://github.com/your-github-user/create-supa-kit
+cd create-supa-kit
+npm install
+npm link
+
+# now available globally
+create-supa-kit
+```
+
+## License
+
+MIT

package/bin/index.js

@@ -0,0 +1,163 @@
+#!/usr/bin/env node
+
+import inquirer from 'inquirer';
+import chalk from 'chalk';
+import ora from 'ora';
+import { existsSync, mkdirSync, readdirSync, copyFileSync, statSync } from 'fs';
+import { resolve, join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+// Absolute path to the templates/ folder bundled inside this package
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const TEMPLATES_DIR = resolve(__dirname, '../templates');
+
+// ─── Banner ────────────────────────────────────────────────────────────────────
+
+console.log(
+  chalk.cyan.bold(`
+  ╔═══════════════════════════════════╗
+  ║       create-supa-kit  🚀         ║
+  ║  React + Vite + Supabase Auth     ║
+  ╚═══════════════════════════════════╝
+`)
+);
+
+// ─── Template folder names ─────────────────────────────────────────────────────
+
+const TEMPLATES = {
+  js:         'react-supabase',
+  ts:         'react-supabase-ts',
+  jsTailwind: 'react-supabase-tailwind',
+  tsTailwind: 'react-supabase-ts-tailwind',
+};
+
+// ─── Prompts ───────────────────────────────────────────────────────────────────
+
+async function promptUser() {
+  return inquirer.prompt([
+    {
+      type: 'input',
+      name: 'projectName',
+      message: chalk.white('Project name?'),
+      default: 'my-supa-app',
+      validate(value) {
+        const trimmed = value.trim();
+        if (!trimmed) return 'Project name cannot be empty.';
+        if (/[^a-zA-Z0-9-_]/.test(trimmed))
+          return 'Use only letters, numbers, hyphens, or underscores.';
+        return true;
+      },
+      filter: (v) => v.trim(),
+    },
+    {
+      type: 'confirm',
+      name: 'useTypeScript',
+      message: chalk.white('Use TypeScript?'),
+      default: false,
+    },
+    {
+      type: 'confirm',
+      name: 'useTailwind',
+      message: chalk.white('Include Tailwind CSS?'),
+      default: false,
+    },
+  ]);
+}
+
+// ─── Select template ───────────────────────────────────────────────────────────
+
+function selectTemplate({ useTypeScript, useTailwind }) {
+  if (useTypeScript && useTailwind) return TEMPLATES.tsTailwind;
+  if (useTypeScript)               return TEMPLATES.ts;
+  if (useTailwind)                 return TEMPLATES.jsTailwind;
+  return TEMPLATES.js;
+}
+
+// ─── Copy template locally ─────────────────────────────────────────────────────
+
+const IGNORE = new Set(['node_modules', '.git', 'package-lock.json']);
+
+function copyDir(src, dest) {
+  mkdirSync(dest, { recursive: true });
+
+  for (const entry of readdirSync(src)) {
+    if (IGNORE.has(entry)) continue;
+
+    const srcPath  = join(src, entry);
+    const destPath = join(dest, entry);
+
+    if (statSync(srcPath).isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+// ─── Final instructions ────────────────────────────────────────────────────────
+
+function printNextSteps(projectName) {
+  console.log('');
+  console.log(chalk.green.bold('  ✅  Project created successfully!'));
+  console.log('');
+  console.log(chalk.white('  Next steps:'));
+  console.log('');
+  console.log(chalk.cyan(`    cd ${projectName}`));
+  console.log(chalk.cyan('    npm install'));
+  console.log(chalk.cyan('    cp .env.example .env'));
+  console.log('');
+  console.log(chalk.yellow('  Open .env and fill in your Supabase credentials:'));
+  console.log('');
+  console.log(chalk.gray('    VITE_SUPABASE_URL') + chalk.white('      = https://your-project.supabase.co'));
+  console.log(chalk.gray('    VITE_SUPABASE_ANON_KEY') + chalk.white('  = eyJ...'));
+  console.log('');
+  console.log(chalk.gray('  Get these values at ') + chalk.underline('https://app.supabase.com') + chalk.gray(' → Settings → API'));
+  console.log('');
+  console.log(chalk.cyan('    npm run dev'));
+  console.log('');
+}
+
+// ─── Main ─────────────────────────────────────────────────────────────────────
+
+async function main() {
+  try {
+    const { projectName, useTypeScript, useTailwind } = await promptUser();
+
+    // Make sure the target folder does not already exist
+    const targetDir = resolve(process.cwd(), projectName);
+    if (existsSync(targetDir)) {
+      console.log('');
+      console.error(
+        chalk.red(`  ✖  Folder "${projectName}" already exists. Choose a different name or remove it first.`)
+      );
+      process.exit(1);
+    }
+
+    const templateName = selectTemplate({ useTypeScript, useTailwind });
+    const templateDir  = join(TEMPLATES_DIR, templateName);
+
+    // Summary
+    console.log('');
+    console.log(chalk.gray('  Selected configuration:'));
+    console.log(chalk.gray(`    • Project    : ${chalk.white(projectName)}`));
+    console.log(chalk.gray(`    • TypeScript : ${chalk.white(useTypeScript ? 'yes' : 'no')}`));
+    console.log(chalk.gray(`    • Tailwind   : ${chalk.white(useTailwind ? 'yes' : 'no')}`));
+    console.log('');
+
+    const spinner = ora({ text: chalk.cyan('Scaffolding project...'), color: 'cyan' }).start();
+
+    copyDir(templateDir, targetDir);
+
+    spinner.succeed(chalk.green('Done!'));
+
+    printNextSteps(projectName);
+
+  } catch (err) {
+    console.log('');
+    console.error(chalk.red('  ✖  Something went wrong:'));
+    console.error(chalk.red(`     ${err.message}`));
+    process.exit(1);
+  }
+}
+
+main();

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "create-supa-kit",
+  "version": "1.0.0",
+  "description": "CLI para generar proyectos React + Vite + Supabase Auth listos para usar",
+  "type": "module",
+  "bin": {
+    "create-supa-kit": "bin/index.js"
+  },
+  "files": [
+    "bin",
+    "templates"
+  ],
+  "scripts": {
+    "start": "node bin/index.js"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "inquirer": "^9.2.12",
+    "ora": "^8.0.1"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "keywords": [
+    "react",
+    "vite",
+    "supabase",
+    "cli",
+    "create",
+    "starter",
+    "template"
+  ],
+  "author": "",
+  "license": "MIT"
+}

package/templates/react-supabase/.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/README.md

@@ -0,0 +1,64 @@
+# template-react-supabase
+
+Template base generado por **create-supa-kit**.
+
+Stack: React 18 · Vite 5 · Supabase Auth
+
+## Estructura
+
+```
+src/
+├── lib/
+│   └── supabaseClient.js   # cliente único de Supabase
+├── components/
+│   ├── Login.jsx            # formulario login / registro
+│   └── Dashboard.jsx        # ruta protegida
+├── App.jsx                  # control de sesión
+├── main.jsx
+└── index.css
+.env.example                 # variables de entorno requeridas
+```
+
+## Configurar Supabase
+
+1. Crea un proyecto en [supabase.com](https://supabase.com)
+2. Ve a **Settings → API** y copia la URL y la anon key
+3. Crea el archivo `.env`:
+
+```bash
+cp .env.example .env
+```
+
+4. Pega los valores:
+
+```env
+VITE_SUPABASE_URL=https://tu-proyecto.supabase.co
+VITE_SUPABASE_ANON_KEY=eyJ...
+```
+
+## Arrancar en local
+
+```bash
+npm install
+npm run dev
+```
+
+## Autenticación incluida
+
+| Función | Estado |
+|---|---|
+| Login email / password | ✅ |
+| Registro | ✅ |
+| Persistencia de sesión | ✅ (localStorage) |
+| Logout | ✅ |
+| Ruta protegida | ✅ |
+
+> Para habilitar el registro asegúrate de que en tu proyecto Supabase esté activada
+> la opción **Email confirmations** o desactívala en Auth → Settings durante desarrollo.
+
+## Próximos pasos sugeridos
+
+- Añadir React Router para múltiples páginas
+- Conectar tablas de Supabase con `supabase.from('tabla').select()`
+- Añadir OAuth (GitHub, Google) con `supabase.auth.signInWithOAuth`
+- Proteger rutas con un componente `<PrivateRoute>`

package/templates/react-supabase/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/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "template-react-supabase",
+  "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",
+    "vite": "^5.1.4"
+  }
+}

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

@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+import { supabase } from './lib/supabaseClient';
+import Login from './components/Login';
+import Dashboard from './components/Dashboard';
+
+/**
+ * App — controla el estado de sesión global.
+ *
+ * Flujo:
+ *  1. Al montar, recupera la sesión activa (si el usuario ya inició sesión).
+ *  2. Se suscribe a cambios de auth (login / logout) y actualiza `session`.
+ *  3. Renderiza <Login> o <Dashboard> según corresponda.
+ */
+export default function App() {
+  const [session, setSession] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Recuperar sesión persistida en localStorage (gestionada por Supabase)
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
+      setLoading(false);
+    });
+
+    // Suscribirse a cambios de autenticación
+    const { data: { subscription } } = supabase.auth.onAuthStateChange(
+      (_event, session) => {
+        setSession(session);
+      }
+    );
+
+    // Limpiar suscripción al desmontar
+    return () => subscription.unsubscribe();
+  }, []);
+
+  if (loading) {
+    return (
+      <div style={styles.centered}>
+        <p>Cargando...</p>
+      </div>
+    );
+  }
+
+  return session ? <Dashboard session={session} /> : <Login />;
+}
+
+const styles = {
+  centered: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: '100vh',
+  },
+};

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

@@ -0,0 +1,117 @@
+import { supabase } from '../lib/supabaseClient';
+
+/**
+ * Dashboard — ruta protegida.
+ *
+ * Solo se renderiza cuando existe una sesión activa (gestionado por App.jsx).
+ * Muestra información del usuario autenticado y un botón para cerrar sesión.
+ *
+ * Props:
+ *  - session: objeto de sesión de Supabase ({ user, access_token, ... })
+ */
+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);
+    // App.jsx detecta session = null y vuelve a renderizar <Login>
+  }
+
+  return (
+    <div style={styles.wrapper}>
+      <div style={styles.card}>
+        {/* ── Cabecera ─────────────────────────────────────────────────────── */}
+        <header style={styles.header}>
+          <h1 style={styles.title}>Dashboard</h1>
+          <button style={styles.logoutBtn} onClick={handleLogout}>
+            Cerrar sesión
+          </button>
+        </header>
+
+        {/* ── Contenido ────────────────────────────────────────────────────── */}
+        <section style={styles.section}>
+          <p style={styles.welcome}>
+            ¡Hola, <strong>{user.email}</strong>!
+          </p>
+          <p style={styles.hint}>
+            Estás autenticado correctamente. 🎉
+          </p>
+        </section>
+
+        {/* ── Info de sesión (útil en desarrollo) ──────────────────────────── */}
+        <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>
+  );
+}
+
+// ─── Estilos inline mínimos ───────────────────────────────────────────────────
+const styles = {
+  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',
+  },
+};