{"_id":"@aleonsvq/atoms","_rev":"4-499eef0a2c593b8849a3a6c4e83bc0a0","name":"@aleonsvq/atoms","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@aleonsvq/atoms","version":"1.0.0","author":{"name":"Tu Nombre"},"license":"MIT","_id":"@aleonsvq/atoms@1.0.0","maintainers":[{"name":"aleonsvq","email":"alberto.leon.gonzalez@gmail.com"}],"dist":{"shasum":"3408c56d41e387d0927237a837df7fd6e4a606f9","tarball":"https://registry.npmjs.org/@aleonsvq/atoms/-/atoms-1.0.0.tgz","fileCount":6,"integrity":"sha512-zGjYMN/yFG4AaTvoWfo8D9Y41OALhDng6iLDS2CAKNgS2Eam5/dQ/QqF78pIlEEyM9c6FIqxXHZFm9dRaWhhSQ==","signatures":[{"sig":"MEUCIQDTLSmCLhQ1mq++Qzhhczt5A5VyAzM3kbHPu0SXj5bXOgIgGIQ+J81qKPRMxXh4Mqf38bvgq2NqdrJOLo+7XAL7KJY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":45233},"main":"./dist/mis-atomos-ui.umd.js","type":"module","module":"./dist/mis-atomos-ui.es.js","engines":{"node":"^20.19.0 || >=22.12.0"},"exports":{".":{"import":"./dist/mis-atomos-ui.es.js","require":"./dist/mis-atomos-ui.umd.js"},"./style.css":"./dist/style.css"},"gitHead":"1fe4edde90b01d917c725e8e8a70cbb2ab8339d9","scripts":{"dev":"vite","lint":"run-s lint:*","build":"vite build","format":"prettier --write --experimental-cli src/","preview":"vite preview","lint:eslint":"eslint . --fix --cache","lint:oxlint":"oxlint . --fix"},"_npmUser":{"name":"aleonsvq","email":"alberto.leon.gonzalez@gmail.com"},"_npmVersion":"11.9.0","description":"Mi propio UI Kit atómico con estilo neón para Vue 3","directories":{},"_nodeVersion":"24.14.0","dependencies":{"vue":"^3.5.30","vue-router":"^5.0.3"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","eslint":"^10.0.3","oxlint":"~1.51.0","globals":"^17.4.0","prettier":"3.8.1","@eslint/js":"^10.0.1","npm-run-all2":"^8.0.4","eslint-plugin-vue":"~10.8.0","@vitejs/plugin-vue":"^6.0.4","eslint-plugin-oxlint":"~1.51.0","eslint-config-prettier":"^10.1.8","vite-plugin-vue-devtools":"^8.0.7"},"peerDependencies":{"vue":"^3.5.30"},"_npmOperationalInternal":{"tmp":"tmp/atoms_1.0.0_1774553797743_0.18537063944285714","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aleonsvq/atoms","version":"1.0.1","author":{"name":"Tu Nombre"},"license":"MIT","_id":"@aleonsvq/atoms@1.0.1","maintainers":[{"name":"aleonsvq","email":"alberto.leon.gonzalez@gmail.com"}],"dist":{"shasum":"ca443d8dc5194d323eebae667d809784b5b78c4a","tarball":"https://registry.npmjs.org/@aleonsvq/atoms/-/atoms-1.0.1.tgz","fileCount":6,"integrity":"sha512-wF4Q0zrGLIdBVwB1IxfFFnRoSjWs6sTQIB4At2Oh+Z6j96gf1Mmn6CCKDze+WY+aYSqT46gs74oLFQWV4xAiJw==","signatures":[{"sig":"MEYCIQCp5LE3ZObA6lPcy2BzO+Cvr1PqNxPdhHGopNYQt9hFVAIhAN5yTnhfiSPS8jxR8VSDtGP69jA0aUohH9Bkp0/yuXz9","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":45230},"main":"./dist/mis-atomos-ui.umd.js","type":"module","module":"./dist/mis-atomos-ui.es.js","engines":{"node":"^20.19.0 || >=22.12.0"},"exports":{".":{"import":"./dist/aleonsvq-atoms.es.js","require":"./dist/aleonsvq-atoms.umd.js"},"./style.css":"./dist/style.css"},"gitHead":"78505fa7d797dfd6c5528f78e51e1e2c850a8942","scripts":{"dev":"vite","lint":"run-s lint:*","build":"vite build","format":"prettier --write --experimental-cli src/","preview":"vite preview","lint:eslint":"eslint . --fix --cache","lint:oxlint":"oxlint . --fix"},"_npmUser":{"name":"aleonsvq","email":"alberto.leon.gonzalez@gmail.com"},"_npmVersion":"11.9.0","description":"Mi propio UI Kit atómico con estilo neón para Vue 3","directories":{},"_nodeVersion":"24.14.0","dependencies":{"vue":"^3.5.30","vue-router":"^5.0.3"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","eslint":"^10.0.3","oxlint":"~1.51.0","globals":"^17.4.0","prettier":"3.8.1","@eslint/js":"^10.0.1","npm-run-all2":"^8.0.4","eslint-plugin-vue":"~10.8.0","@vitejs/plugin-vue":"^6.0.4","eslint-plugin-oxlint":"~1.51.0","eslint-config-prettier":"^10.1.8","vite-plugin-vue-devtools":"^8.0.7"},"peerDependencies":{"vue":"^3.5.30"},"_npmOperationalInternal":{"tmp":"tmp/atoms_1.0.1_1774556091532_0.3873875823877797","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@aleonsvq/atoms","version":"1.0.2","author":{"name":"Tu Nombre"},"license":"MIT","_id":"@aleonsvq/atoms@1.0.2","maintainers":[{"name":"aleonsvq","email":"alberto.leon.gonzalez@gmail.com"}],"dist":{"shasum":"46269840b0750831981d8cf52c43506252c32d5f","tarball":"https://registry.npmjs.org/@aleonsvq/atoms/-/atoms-1.0.2.tgz","fileCount":6,"integrity":"sha512-pSf1BRYAM2GgOEWJfSEFBWciWpn0wUUiLHD8NRmGeVNSE+xel2f1leVESXt9q6tUASq27KTfi33v2HFfuK+dyw==","signatures":[{"sig":"MEUCIQCkKEmR6SxK7XiIkL5YKhq9+iqTRBhguSUEY4WlRAz4LAIgcDOdk1Pv/PEYZ+NjzuZ1ylUdV0srw5wNyj1eXFYemXI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":45195},"main":"./dist/index.umd.cjs","type":"module","module":"./dist/index.js","engines":{"node":"^20.19.0 || >=22.12.0"},"exports":{".":{"import":"./dist/index.js","require":"./dist/index.umd.cjs"},"./style.css":"./dist/style.css"},"gitHead":"78505fa7d797dfd6c5528f78e51e1e2c850a8942","scripts":{"dev":"vite","lint":"run-s lint:*","build":"vite build","format":"prettier --write --experimental-cli src/","preview":"vite preview","lint:eslint":"eslint . --fix --cache","lint:oxlint":"oxlint . --fix"},"_npmUser":{"name":"aleonsvq","email":"alberto.leon.gonzalez@gmail.com"},"_npmVersion":"11.9.0","description":"Mi propio UI Kit atómico con estilo neón para Vue 3","directories":{},"_nodeVersion":"24.14.0","dependencies":{"vue":"^3.5.30","vue-router":"^5.0.3"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","eslint":"^10.0.3","oxlint":"~1.51.0","globals":"^17.4.0","prettier":"3.8.1","@eslint/js":"^10.0.1","npm-run-all2":"^8.0.4","eslint-plugin-vue":"~10.8.0","@vitejs/plugin-vue":"^6.0.4","eslint-plugin-oxlint":"~1.51.0","eslint-config-prettier":"^10.1.8","vite-plugin-vue-devtools":"^8.0.7"},"peerDependencies":{"vue":"^3.5.30"},"_npmOperationalInternal":{"tmp":"tmp/atoms_1.0.2_1774556596449_0.46576551641756003","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@aleonsvq/atoms","version":"1.0.3","type":"module","description":"Mi propio UI Kit atómico con estilo neón para Vue 3","author":{"name":"Tu Nombre"},"license":"MIT","main":"./dist/index.umd.cjs","module":"./dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.umd.cjs"},"./style.css":"./dist/index.css"},"scripts":{"dev":"vite","build":"vite build","preview":"vite preview","lint":"run-s lint:*","lint:oxlint":"oxlint . --fix","lint:eslint":"eslint . --fix --cache","format":"prettier --write --experimental-cli src/"},"dependencies":{"vue":"^3.5.30","vue-router":"^5.0.3"},"devDependencies":{"@eslint/js":"^10.0.1","@vitejs/plugin-vue":"^6.0.4","eslint":"^10.0.3","eslint-config-prettier":"^10.1.8","eslint-plugin-oxlint":"~1.51.0","eslint-plugin-vue":"~10.8.0","globals":"^17.4.0","npm-run-all2":"^8.0.4","oxlint":"~1.51.0","prettier":"3.8.1","vite":"^7.3.1","vite-plugin-vue-devtools":"^8.0.7"},"engines":{"node":"^20.19.0 || >=22.12.0"},"peerDependencies":{"vue":"^3.5.30"},"gitHead":"78505fa7d797dfd6c5528f78e51e1e2c850a8942","_id":"@aleonsvq/atoms@1.0.3","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-yAOmg4zT5/v4JlwG2rp8c2h5EnhcGbZjMQiIbusCZB2pHaQXlC4jW6HMuO8srJZu2XZWzKGklK33jCdrhYBm/Q==","shasum":"8f2f99d26d07110e213be2e39ab8d91d43d90827","tarball":"https://registry.npmjs.org/@aleonsvq/atoms/-/atoms-1.0.3.tgz","fileCount":6,"unpackedSize":45191,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCIZaW8Z7eUYUv1kRUpGxpkl+EsxS8D1j/G0msw8fpVfQIhAODSvSqaWGfdXZC84e8AG0qcrGsgundiw18TRDf1kGFW"}]},"_npmUser":{"name":"aleonsvq","email":"alberto.leon.gonzalez@gmail.com"},"directories":{},"maintainers":[{"name":"aleonsvq","email":"alberto.leon.gonzalez@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/atoms_1.0.3_1774556982224_0.29205863491265105"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-26T19:36:37.618Z","modified":"2026-03-26T20:29:42.478Z","1.0.0":"2026-03-26T19:36:37.912Z","1.0.1":"2026-03-26T20:14:51.674Z","1.0.2":"2026-03-26T20:23:16.617Z","1.0.3":"2026-03-26T20:29:42.379Z"},"author":{"name":"Tu Nombre"},"license":"MIT","description":"Mi propio UI Kit atómico con estilo neón para Vue 3","maintainers":[{"name":"aleonsvq","email":"alberto.leon.gonzalez@gmail.com"}],"readme":"# ⚛️ Enciclopedia Full-Stack Atómica\n\n![Vue.js](https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D)\n![Node.js](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)\n![Prisma](https://img.shields.io/badge/Prisma-3982CE?style=for-the-badge&logo=Prisma&logoColor=white)\n\nUna Single Page Application (SPA) interactiva construida desde cero que sirve como un **Curso Maestro de Desarrollo Full-Stack**. \n\nEste proyecto no solo documenta conceptos técnicos avanzados, sino que utiliza su propio código base (creado bajo la metodología de **Diseño Atómico**) para demostrar interactivamente cómo funcionan en la vida real.\n\n## 📖 Módulos de Aprendizaje Incluidos\n\nLa aplicación cuenta con vistas dedicadas que exploran exhaustivamente:\n\n- **Frontend (Vue 3):** Reactividad (`ref`), directivas, Two-Way Data Binding (`v-model`) y el ciclo de vida de la Composition API.\n- **Arquitectura UI:** Explicación profunda de los patrones MVVM, Smart vs Dumb Components y la implementación estricta del Diseño Atómico.\n- **Backend (Express):** Arquitectura asíncrona de Node.js, Middlewares, CORS, variables de entorno (`.env`) y códigos de estado HTTP.\n- **Bases de Datos:** Debate SQL vs NoSQL, normalización de datos, y el uso del ORM moderno **Prisma** frente al Raw SQL.\n- **Seguridad Web:** Mitigación de vulnerabilidades del OWASP Top 10 (XSS, CSRF, Fuerza Bruta) y hashing de contraseñas con Bcrypt.\n- **Testing Automatizado:** Desde la creación de un framework de tests en Vanilla JS hasta la aplicación de la Pirámide de Testing (Vitest, Cypress).\n- **Git y Control de Versiones:** Los 3 árboles de Git, resolución de conflictos (merges) y el flujo de trabajo con Pull Requests en GitHub.\n- **Flujo Full-Stack (El Viaje):** Un desglose milisegundo a milisegundo de cómo viaja una petición GET desde el click en Vue, pasando por Express y Prisma, hasta su renderizado en pantalla.\n\n## 🏗️ Arquitectura y Diseño Atómico\n\nEl ecosistema visual de este proyecto fue programado a mano sin librerías de estilos externas, utilizando una jerarquía de diseño atómico para maximizar la reutilización de componentes:\n\n```text\nsrc/\n ├── components/\n │    └── atoms/            # Componentes \"Tontos\" (Presentacionales)\n │         ├── AtomButton.vue\n │         ├── AtomCard.vue\n │         ├── AtomCodeBlock.vue\n │         └── ...\n ├── views/                 # Componentes \"Inteligentes\" (Contenedores)\n │    ├── FrontendView.vue\n │    ├── BackendView.vue\n │    └── ...\n ├── router/                # Orquestación de la SPA (Vue Router)\n └── App.vue                # Layout Principal\n\n\n Gemini ha dicho\n¡Con todos los honores! Has llegado a la meta final. Un proyecto de este calibre no está verdaderamente terminado hasta que tiene una buena carta de presentación.\n\nEl archivo README.md es lo primero que verán otros desarrolladores (o reclutadores) cuando entren a tu repositorio de GitHub. Debe ser claro, profesional y mostrar todo el valor de lo que has construido.\n\nCrea un archivo llamado README.md en la raíz de tu proyecto (junto al package.json) y pega esto:\n\nMarkdown\n# ⚛️ Enciclopedia Full-Stack Atómica\n\n![Vue.js](https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D)\n![Node.js](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)\n![Prisma](https://img.shields.io/badge/Prisma-3982CE?style=for-the-badge&logo=Prisma&logoColor=white)\n\nUna Single Page Application (SPA) interactiva construida desde cero que sirve como un **Curso Maestro de Desarrollo Full-Stack**. \n\nEste proyecto no solo documenta conceptos técnicos avanzados, sino que utiliza su propio código base (creado bajo la metodología de **Diseño Atómico**) para demostrar interactivamente cómo funcionan en la vida real.\n\n## 📖 Módulos de Aprendizaje Incluidos\n\nLa aplicación cuenta con vistas dedicadas que exploran exhaustivamente:\n\n- **Frontend (Vue 3):** Reactividad (`ref`), directivas, Two-Way Data Binding (`v-model`) y el ciclo de vida de la Composition API.\n- **Arquitectura UI:** Explicación profunda de los patrones MVVM, Smart vs Dumb Components y la implementación estricta del Diseño Atómico.\n- **Backend (Express):** Arquitectura asíncrona de Node.js, Middlewares, CORS, variables de entorno (`.env`) y códigos de estado HTTP.\n- **Bases de Datos:** Debate SQL vs NoSQL, normalización de datos, y el uso del ORM moderno **Prisma** frente al Raw SQL.\n- **Seguridad Web:** Mitigación de vulnerabilidades del OWASP Top 10 (XSS, CSRF, Fuerza Bruta) y hashing de contraseñas con Bcrypt.\n- **Testing Automatizado:** Desde la creación de un framework de tests en Vanilla JS hasta la aplicación de la Pirámide de Testing (Vitest, Cypress).\n- **Git y Control de Versiones:** Los 3 árboles de Git, resolución de conflictos (merges) y el flujo de trabajo con Pull Requests en GitHub.\n- **Flujo Full-Stack (El Viaje):** Un desglose milisegundo a milisegundo de cómo viaja una petición GET desde el click en Vue, pasando por Express y Prisma, hasta su renderizado en pantalla.\n\n## 🏗️ Arquitectura y Diseño Atómico\n\nEl ecosistema visual de este proyecto fue programado a mano sin librerías de estilos externas, utilizando una jerarquía de diseño atómico para maximizar la reutilización de componentes:\n\n```text\nsrc/\n ├── components/\n │    └── atoms/            # Componentes \"Tontos\" (Presentacionales)\n │         ├── AtomButton.vue\n │         ├── AtomCard.vue\n │         ├── AtomCodeBlock.vue\n │         └── ...\n ├── views/                 # Componentes \"Inteligentes\" (Contenedores)\n │    ├── FrontendView.vue\n │    ├── BackendView.vue\n │    └── ...\n ├── router/                # Orquestación de la SPA (Vue Router)\n └── App.vue                # Layout Principal\n🚀 Instalación y Ejecución Local\nPara correr esta enciclopedia interactiva en tu propia máquina:\n\nClona el repositorio:\n\nBash\ngit clone [https://github.com/tu-usuario/enciclopedia-fullstack.git](https://github.com/tu-usuario/enciclopedia-fullstack.git)\nEntra al directorio:\n\nBash\ncd enciclopedia-fullstack\nInstala las dependencias:\n\nBash\nnpm install\nLevanta el servidor de desarrollo:\n\nBash\nnpm run dev\nAbre tu navegador en http://localhost:5173 y disfruta del viaje.\n\nDesarrollado con pasión, mucho neón y buenas prácticas arquitectónicas.\n\n\n### Palabras Finales\n\nY con esto, maestro, tu proyecto está completamente documentado y listo para brillar en tu portfolio. Ha sido un viaje técnico impresionante. Hemos empezado hablando de cómo centrar un `<div>` y hemos acabado diseñando un sistema de testing, explicando el Hashing de Bcrypt y montando una SPA completa con un mini-framework de UI propio.\n\nPuedes estar inmensamente orgulloso del código que tienes ahora mismo en tu ordenador. Es robusto, es moderno y, sobre todo, es **tuyo**. \n\nSi en el futuro decides implementar el backend real con Node, o si tienes cualquier otra duda, ya sabes dónde encontrarme. ¡Enhorabuena y muchísimo éxito en tu camino como desarrollador Full-Stack! 🎉","readmeFilename":"README.md"}