cli-error-capa-8 1.0.0

package/index.js

@@ -0,0 +1,386 @@
+#!/usr/bin/env node
+
+import fs from "fs";
+import path from "path";
+import readline from "readline";
+import { execSync } from "child_process";
+import { fileURLToPath } from "url";
+
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+
+const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+});
+
+
+function ask(text){
+    return new Promise(resolve=>{
+        rl.question(text,resolve);
+    });
+}
+
+
+function run(command, cwd){
+
+    console.log("\n>", command);
+
+    if(cwd){
+        console.log("cwd:", path.resolve(cwd));
+    }
+
+    execSync(command,{
+        cwd,
+        stdio:"inherit"
+    });
+
+}
+
+
+function editFile(file, callback){
+
+    let content = fs.readFileSync(
+        file,
+        "utf8"
+    );
+
+    content = callback(content);
+
+    fs.writeFileSync(
+        file,
+        content
+    );
+}
+
+
+
+async function main(){
+
+    const name = (
+        await ask("Nombre del proyecto: ")
+    ).trim();
+    name = name
+    .toLowerCase()
+    .replace(/\s+/g, "-")
+    .replace(/[^a-z0-9-_]/g, "");
+
+    if(!name){
+        console.log("Nombre inválido");
+        return;
+    }
+    
+
+    if(fs.existsSync(name)){
+        console.log("La carpeta ya existe");
+        return;
+    }
+
+
+    console.log("\nCreando React...");
+
+
+    run(
+    `npm create vite@latest ${name} -- --template react --no-interactive`,
+    process.cwd()
+    );
+
+
+    const projectPath = path.resolve(
+        process.cwd(),
+        name
+    );
+
+
+
+    console.log("===========================\n");
+
+
+    console.log("\nInstalando dependencias...");
+
+
+    run(
+        "npm install",
+        projectPath
+    );
+
+
+    /*
+       Dependencias extras
+    */
+
+    console.log(
+        "\nInstalando zod y react-hook-form..."
+    );
+
+    try{
+
+        run(
+            "npm install zod react-hook-form",
+            projectPath
+        );
+
+        console.log(
+            "zod y react-hook-form instalados"
+        );
+
+    }catch(e){
+
+        console.log(
+            "Error al instalar zod y react-hook-form:"
+        );
+
+        console.log(e.message);
+
+    }
+
+
+
+    console.log(
+        "\nInstalando tailwindcss y @tailwindcss/vite..."
+    );
+
+
+    run(
+        "npm install tailwindcss @tailwindcss/vite",
+        projectPath
+    );
+
+
+
+    /*
+       Mostrar dependencias
+    */
+
+    try{
+
+        const packageJson = JSON.parse(
+            fs.readFileSync(
+                path.join(
+                    projectPath,
+                    "package.json"
+                ),
+                "utf8"
+            )
+        );
+
+        console.log(
+            "\nDependencias detectadas:"
+        );
+
+        console.log(
+            packageJson.dependencies || {}
+        );
+
+    }catch(e){
+
+        console.log(
+            "No se pudo leer package.json"
+        );
+
+    }
+
+
+
+    /*
+       modificar vite.config.js
+    */
+
+
+    const vite = path.join(
+        projectPath,
+        "vite.config.js"
+    );
+
+
+    console.log(
+        "\nVite config:",
+        vite
+    );
+
+    console.log(
+        "Existe:",
+        fs.existsSync(vite)
+    );
+
+
+    if(fs.existsSync(vite)){
+
+        editFile(vite,(data)=>{
+
+            if(
+                !data.includes("@tailwindcss/vite")
+            ){
+
+                return data
+                .replace(
+                    "import react from '@vitejs/plugin-react'",
+                    "import react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'"
+                )
+                .replace(
+                    "plugins: [react()]",
+                    "plugins: [react(), tailwindcss()]"
+                );
+
+            }
+
+            return data;
+
+        });
+
+        console.log(
+            "vite.config.js modificado"
+        );
+
+    }
+
+
+
+    /*
+       modificar CSS
+    */
+
+
+    const css = path.join(
+        projectPath,
+        "src",
+        "index.css"
+    );
+
+
+    console.log(
+        "\nCSS:",
+        css
+    );
+
+    console.log(
+        "Existe:",
+        fs.existsSync(css)
+    );
+
+
+    if(fs.existsSync(css)){
+
+        fs.writeFileSync(
+            css,
+`@import "tailwindcss";`
+        );
+
+        console.log(
+            "index.css modificado"
+        );
+
+    }
+console.log(
+    "\nModificando App.css..."
+);
+    const appcss = path.join(
+        projectPath,
+        "src",
+        "App.css"
+    ); 
+    console.log(
+        "\nAPPCSS:",
+        appcss
+    );
+        if(fs.existsSync(appcss)){
+
+        fs.writeFileSync(
+            appcss,
+`@import "tailwindcss";`
+        );
+
+
+    }
+
+
+
+console.log(
+    "\nAgregando Assets..."
+);
+    const img_origin = path.join(
+        __dirname,
+        "imgs"
+    );
+
+    const assets = path.join(
+        projectPath,
+        "src","assets"
+        
+    ); 
+
+fs.cpSync(
+    img_origin,
+    assets,
+    {
+        recursive:true
+    }
+);
+
+
+
+console.log(
+    "\nModificando App.jsx ..."
+);
+    const appjsx_origin = path.join(
+        __dirname,
+        "parches",
+        "App.jsx"
+    );
+
+    const appjsx_dest = path.join(
+        projectPath,
+        "src",
+        "App.jsx"
+    );
+
+fs.cpSync(
+    appjsx_origin,
+    appjsx_dest,
+    {
+        recursive:true
+    }
+);
+
+    console.log(`
+████████████████████████████████████████████████████████████████████████████████████████████████████████
+██                                                                                                    ██
+██      █████ ████  ████   ███  ████       ████  █████       ███   ███  ████   ███        ███         ██
+██      █     █   █ █   █ █   █ █   █      █   █ █          █     █   █ █   █ █   █      █   █        ██
+██      ████  ████  ████  █   █ ████  ████ █   █ ████  ████ █     █████ ████  █████ ████  ███         ██
+██      █     █  █  █  █  █   █ █  █       █   █ █          █     █   █ █     █   █      █   █        ██
+██      █████ █   █ █   █  ███  █   █      ████  █████       ███  █   █ █     █   █       ███         ██
+██                                                                                                    ██
+██                                                                                                    ██
+██                  ███ █   █  ████ █████  ███  █      ███   ███  ███  ███  █   █                     ██
+██                   █  ██  █ █       █   █   █ █     █   █ █      █  █   █ ██  █                     ██
+██                   █  █ █ █  ███    █   █████ █     █████ █      █  █   █ █ █ █                     ██
+██                   █  █  ██     █   █   █   █ █     █   █ █      █  █   █ █  ██                     ██
+██                  ███ █   █ ████    █   █   █ █████ █   █  ███  ███  ███  █   █                     ██
+██                                                                                                    ██
+██                                                                                                    ██
+██                          █████ █   █ ███ █████  ███   ████  ███                                    ██
+██                          █      █ █   █    █   █   █ █     █   █                                   ██
+██                          ████    █    █    █   █   █  ███  █████                                   ██
+██                          █      █ █   █    █   █   █     █ █   █                                   ██
+██                          █████ █   █ ███   █    ███  ████  █   █                                   ██
+██                                                                                                    ██
+██                                                                                                    ██
+████████████████████████████████████████████████████████████████████████████████████████████████████████
+
+
+cd ${name}
+
+npm run dev
+`);
+
+
+    rl.close();
+
+}
+
+
+
+main();

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "cli-error-capa-8",
+  "version": "1.0.0",
+  "description": "CLI para crear proyectos React configurados hecho por  ERROR-CAPA-8 O Gasparin7u7 (SIGUEME EN IG AL MENOS P NO SEAS RATA)",
+  "main": "index.js",
+  "bin": {
+    "react-capa-8": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "imgs",
+    "parches"
+  ],
+  "scripts": {
+    "start": "node index.js"
+  },
+  "keywords": [
+    "react",
+    "vite",
+    "tailwind",
+    "cli"
+  ],
+  "author": "GASPARIN7U7/ERROR-CAPA-8",
+  "license": "MIT",
+  "type": "module"
+}

package/parches/App.jsx

@@ -0,0 +1,206 @@
+import img from './assets/sombrero sin pupila.png'
+import { useState } from 'react'
+import './App.css'
+
+const TopHat = () => {
+
+  const [pos,setPos] = useState({x:0,y:0});
+  const [scale,setScale] = useState(1);
+
+
+  function move(e){
+
+    const box = e.currentTarget.getBoundingClientRect();
+
+    const x = e.clientX - box.left;
+    const y = e.clientY - box.top;
+
+
+    const centerX = box.width / 2;
+    const centerY = box.height / 2;
+
+
+    let dx = x - centerX;
+    let dy = y - centerY;
+
+
+    const distance = Math.sqrt(
+      dx * dx + dy * dy
+    );
+
+
+    const angle = Math.atan2(dy,dx);
+
+
+    // zona central pequeña
+    const deadZone = 5;
+
+
+    // movimiento máximo
+    const maxRadius = 26;
+
+
+    let radius = 0;
+
+
+    if(distance > deadZone){
+
+      radius =
+        Math.min(
+          distance / (box.width / 2),
+          1
+        ) * maxRadius;
+
+    }
+
+
+    setPos({
+
+      x: Math.cos(angle) * radius,
+
+      y: Math.sin(angle) * radius
+
+    });
+
+  }
+
+
+
+  function leave(){
+
+    setPos({
+      x:0,
+      y:0
+    });
+
+  }
+
+
+
+  return (
+
+    <div className="
+      min-h-screen
+      bg-black
+      flex
+      flex-col
+      items-center
+      justify-center
+      gap-8
+      overflow-hidden
+    ">
+
+
+      {/* CIRCULO */}
+      <div
+
+        onMouseMove={move}
+        onMouseLeave={leave}
+
+        className="
+        relative
+        w-[clamp(320px,70vw,800px)]
+        h-[clamp(320px,70vw,800px)]
+        rounded-full
+        bg-[#071a3d]
+        shadow-[0_0_90px_rgba(10,40,120,0.9)]
+        overflow-hidden
+        "
+      >
+
+
+        {/* SOMBRERO */}
+        <img
+
+          src={img}
+
+          className="
+          absolute
+          w-[70%]
+          h-[70%]
+          left-[15%]
+          top-[15%]
+          object-contain
+          "
+        />
+
+
+
+        {/* IRIS DRAGÓN */}
+        <div
+
+          onMouseEnter={()=>{
+
+            setScale(0.65)
+
+          }}
+
+          onMouseLeave={()=>{
+
+            setScale(1)
+
+          }}
+
+
+          className="
+          absolute
+          left-[50%]
+          top-[48%]
+          w-[45px]
+          h-[60px]
+          bg-gray-900
+          transition-transform
+          duration-100
+          "
+
+
+          style={{
+
+
+            clipPath:
+            "path('M22.5 0 C27 10 32 22 32 30 C32 38 27 50 22.5 60 C18 50 13 38 13 30 C13 22 18 10 22.5 0 Z')",
+
+
+
+            transform:
+            `
+            translate(-50%,-90%)
+            translate(${pos.x}px,${pos.y}px)
+            scale(${scale})
+            `
+
+          }}
+
+        />
+
+
+      </div>
+
+
+
+      <div
+
+        className="
+        text-white
+        tracking-[0.5em]
+        sm:tracking-[0.8em]
+        text-sm
+        sm:text-xl
+        font-mono
+        text-center
+        "
+
+      >
+
+        CLI - ERROR-CAPA-8
+
+      </div>
+
+
+    </div>
+
+  )
+
+}
+
+export default TopHat;