responsive-system 1.7.4 → 1.7.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "responsive-system",
-  "version": "1.7.4",
+  "version": "1.7.6",
   "description": "Sistema de layout responsivo con auto-scaling para Tailwind CSS",
   "type": "module",
   "main": "./dist/responsive-system.cjs",

package/scripts/postinstall.js

@@ -11,7 +11,7 @@
  * - Configura App.tsx con el layout seleccionado
  */
 
-import * as fs from 'fs'
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'fs'
 import path from 'path'
 import { execSync } from 'child_process'
 import { fileURLToPath } from 'url'
@@ -20,7 +20,23 @@ import readline from 'readline'
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
 
-const projectRoot = process.cwd()
+// Obtener el directorio del proyecto consumidor
+// Cuando npm ejecuta postinstall, process.cwd() debería ser el proyecto consumidor
+// Pero si estamos en node_modules, necesitamos subir hasta el proyecto raíz
+let projectRoot = process.cwd()
+// Si process.cwd() está en node_modules, subir hasta encontrar el proyecto raíz
+if (projectRoot.includes('node_modules')) {
+  // Subir hasta encontrar un directorio que no sea node_modules
+  let currentDir = projectRoot
+  while (currentDir !== path.dirname(currentDir)) {
+    const parentDir = path.dirname(currentDir)
+    if (!parentDir.includes('node_modules') || parentDir.endsWith('node_modules')) {
+      projectRoot = parentDir
+      break
+    }
+    currentDir = parentDir
+  }
+}
 const packageJsonPath = path.join(projectRoot, 'package.json')
 
 // Detectar si se ejecuta como postinstall o manualmente
@@ -50,14 +66,14 @@ console.log(`   Directorio: ${projectRoot}`)
 console.log('')
 
 // Verificar si package.json existe
-if (!fs.fs.existsSync(packageJsonPath)) {
+if (!existsSync(packageJsonPath)) {
   console.log('⚠️  No se encontró package.json, saltando configuración')
   process.exit(0)
 }
 
 let packageJson
 try {
-  packageJson = JSON.parse(fs.fs.readFileSync(packageJsonPath, 'utf8'))
+  packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'))
 } catch (error) {
   console.error('❌ Error al leer package.json:', error.message)
   process.exit(1)
@@ -126,18 +142,18 @@ function copyFileFromPackage(relativePath, targetPath, isComponent = false) {
   const sourcePath = path.join(__dirname, '..', relativePath)
   const destPath = path.join(projectRoot, targetPath)
   
-  if (!fs.fs.existsSync(sourcePath)) {
+  if (!existsSync(sourcePath)) {
     console.error(`   ❌ No se encontró: ${relativePath}`)
     return false
   }
   
   // Crear directorio destino si no existe
   const destDir = path.dirname(destPath)
-  if (!fs.fs.existsSync(destDir)) {
-    fs.fs.mkdirSync(destDir, { recursive: true })
+  if (!existsSync(destDir)) {
+    mkdirSync(destDir, { recursive: true })
   }
   
-  let content = fs.fs.readFileSync(sourcePath, 'utf8')
+  let content = readFileSync(sourcePath, 'utf8')
   
   // Si es un componente, reemplazar importaciones relativas por importaciones del paquete
   if (isComponent) {
@@ -158,7 +174,7 @@ function copyFileFromPackage(relativePath, targetPath, isComponent = false) {
     )
   }
   
-  fs.fs.writeFileSync(destPath, content)
+  writeFileSync(destPath, content)
   return true
 }
 
@@ -167,8 +183,8 @@ function generateLayoutComponents(selectedLayout) {
   const componentsDir = path.join(projectRoot, 'src', 'components', 'layout')
   
   // Crear directorio si no existe
-  if (!fs.existsSync(componentsDir)) {
-    fs.mkdirSync(componentsDir, { recursive: true })
+  if (!existsSync(componentsDir)) {
+    mkdirSync(componentsDir, { recursive: true })
   }
   
   const componentsToGenerate = {
@@ -224,7 +240,7 @@ const Navigation = () => {
 
 export default Navigation
 `
-    fs.writeFileSync(path.join(componentsDir, 'Navigation.tsx'), navigationContent)
+    writeFileSync(path.join(componentsDir, 'Navigation.tsx'), navigationContent)
     console.log('      ✅ Navigation.tsx')
   }
   
@@ -246,7 +262,7 @@ export default Navigation
 
 export default Footer
 `
-    fs.writeFileSync(path.join(componentsDir, 'Footer.tsx'), footerContent)
+    writeFileSync(path.join(componentsDir, 'Footer.tsx'), footerContent)
     console.log('      ✅ Footer.tsx')
   }
   
@@ -359,13 +375,13 @@ const Sidebar = ({ showLogo = true }: SidebarProps) => {
 
 export default Sidebar
 `
-    fs.writeFileSync(path.join(componentsDir, 'Sidebar.tsx'), sidebarContent)
+    writeFileSync(path.join(componentsDir, 'Sidebar.tsx'), sidebarContent)
     console.log('      ✅ Sidebar.tsx')
   }
   
   // Crear index.ts para exportar los componentes
   const indexContent = components.map(c => `export { default as ${c} } from './${c}'`).join('\n')
-  fs.writeFileSync(path.join(componentsDir, 'index.ts'), indexContent)
+  writeFileSync(path.join(componentsDir, 'index.ts'), indexContent)
   console.log('      ✅ index.ts')
 }
 
@@ -375,22 +391,22 @@ function copyUseResponsiveHook() {
   
   // Crear directorio hooks
   const hooksDir = path.join(projectRoot, 'src', 'hooks')
-  if (!fs.existsSync(hooksDir)) {
-    fs.mkdirSync(hooksDir, { recursive: true })
+  if (!existsSync(hooksDir)) {
+    mkdirSync(hooksDir, { recursive: true })
   }
   
   // Copiar tipos
   const typesDir = path.join(projectRoot, 'src', 'types')
-  if (!fs.existsSync(typesDir)) {
-    fs.mkdirSync(typesDir, { recursive: true })
+  if (!existsSync(typesDir)) {
+    mkdirSync(typesDir, { recursive: true })
   }
   copyFileFromPackage('src/types/responsive.ts', 'src/types/responsive.ts')
   console.log('      ✅ types/responsive.ts')
   
   // Copiar constantes
   const constantsDir = path.join(projectRoot, 'src', 'constants')
-  if (!fs.existsSync(constantsDir)) {
-    fs.mkdirSync(constantsDir, { recursive: true })
+  if (!existsSync(constantsDir)) {
+    mkdirSync(constantsDir, { recursive: true })
   }
   copyFileFromPackage('src/constants/breakpoints.ts', 'src/constants/breakpoints.ts')
   console.log('      ✅ constants/breakpoints.ts')
@@ -404,7 +420,7 @@ function copyUseResponsiveHook() {
 export type { ResponsiveState, Breakpoint, Orientation } from '../types/responsive'
 export { DEFAULT_BREAKPOINTS, getCurrentBreakpoint, getBreakpointIndex, getBreakpointValue } from '../constants/breakpoints'
 `
-  fs.writeFileSync(path.join(hooksDir, 'index.ts'), indexContent)
+  writeFileSync(path.join(hooksDir, 'index.ts'), indexContent)
   console.log('      ✅ hooks/index.ts')
 }
 
@@ -469,7 +485,7 @@ if (!packageJson.type) {
 if (needsUpdate) {
   console.log('')
   console.log('📝 Actualizando package.json...')
-  fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
+  writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
   console.log('✅ package.json actualizado')
   console.log('')
   console.log('⚠️  Ejecuta "npm install" para instalar las dependencias')
@@ -480,7 +496,7 @@ if (needsUpdate) {
 // Verificar si el proyecto ya está configurado
 const mainTsxPath = path.join(projectRoot, 'src', 'main.tsx')
 const layoutsDir = path.join(projectRoot, 'src', 'layouts')
-const isAlreadyConfigured = fs.existsSync(mainTsxPath) && fs.existsSync(layoutsDir) && fs.existsSync(path.join(projectRoot, 'vite.config.ts'))
+const isAlreadyConfigured = existsSync(mainTsxPath) && existsSync(layoutsDir) && existsSync(path.join(projectRoot, 'vite.config.ts'))
 
 // Función async para manejar la configuración del proyecto
 (async () => {
@@ -531,8 +547,8 @@ const isAlreadyConfigured = fs.existsSync(mainTsxPath) && fs.existsSync(layoutsD
   const dirs = ['src', 'src/components', 'src/components/layout', 'src/pages', 'src/hooks', 'src/types', 'src/constants', 'public']
   dirs.forEach(dir => {
     const dirPath = path.join(projectRoot, dir)
-    if (!fs.existsSync(dirPath)) {
-      fs.mkdirSync(dirPath, { recursive: true })
+    if (!existsSync(dirPath)) {
+      mkdirSync(dirPath, { recursive: true })
     }
   })
   
@@ -546,7 +562,7 @@ const isAlreadyConfigured = fs.existsSync(mainTsxPath) && fs.existsSync(layoutsD
   
   // Crear vite.config.ts
   const viteConfigPath = path.join(projectRoot, 'vite.config.ts')
-  if (!fs.existsSync(viteConfigPath)) {
+  if (!existsSync(viteConfigPath)) {
     const viteConfig = `import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
@@ -554,13 +570,13 @@ export default defineConfig({
   plugins: [react()],
 })
 `
-    fs.writeFileSync(viteConfigPath, viteConfig)
+    writeFileSync(viteConfigPath, viteConfig)
     console.log('   ✅ Creado: vite.config.ts')
   }
   
   // Crear tailwind.config.js
   const tailwindConfigPath = path.join(projectRoot, 'tailwind.config.js')
-  if (!fs.existsSync(tailwindConfigPath)) {
+  if (!existsSync(tailwindConfigPath)) {
     const tailwindConfig = `import responsiveScalePlugin from 'responsive-system/plugin'
 
 export default {
@@ -596,13 +612,13 @@ export default {
   ],
 }
 `
-    fs.writeFileSync(tailwindConfigPath, tailwindConfig)
+    writeFileSync(tailwindConfigPath, tailwindConfig)
     console.log('   ✅ Creado: tailwind.config.js')
   }
   
   // Crear postcss.config.js
   const postcssConfigPath = path.join(projectRoot, 'postcss.config.js')
-  if (!fs.existsSync(postcssConfigPath)) {
+  if (!existsSync(postcssConfigPath)) {
     const postcssConfig = `export default {
   plugins: {
     '@tailwindcss/postcss': {},
@@ -610,13 +626,13 @@ export default {
   },
 }
 `
-    fs.writeFileSync(postcssConfigPath, postcssConfig)
+    writeFileSync(postcssConfigPath, postcssConfig)
     console.log('   ✅ Creado: postcss.config.js')
   }
   
   // Crear tsconfig.json
   const tsconfigPath = path.join(projectRoot, 'tsconfig.json')
-  if (!fs.existsSync(tsconfigPath)) {
+  if (!existsSync(tsconfigPath)) {
     const tsconfig = `{
   "compilerOptions": {
     "target": "ES2020",
@@ -639,13 +655,13 @@ export default {
   "references": [{ "path": "./tsconfig.node.json" }]
 }
 `
-    fs.writeFileSync(tsconfigPath, tsconfig)
+    writeFileSync(tsconfigPath, tsconfig)
     console.log('   ✅ Creado: tsconfig.json')
   }
   
   // Crear tsconfig.node.json
   const tsconfigNodePath = path.join(projectRoot, 'tsconfig.node.json')
-  if (!fs.existsSync(tsconfigNodePath)) {
+  if (!existsSync(tsconfigNodePath)) {
     const tsconfigNode = `{
   "compilerOptions": {
     "composite": true,
@@ -657,13 +673,13 @@ export default {
   "include": ["vite.config.ts"]
 }
 `
-    fs.writeFileSync(tsconfigNodePath, tsconfigNode)
+    writeFileSync(tsconfigNodePath, tsconfigNode)
     console.log('   ✅ Creado: tsconfig.node.json')
   }
   
   // Crear index.html
   const indexHtmlPath = path.join(projectRoot, 'index.html')
-  if (!fs.existsSync(indexHtmlPath)) {
+  if (!existsSync(indexHtmlPath)) {
     const indexHtml = `<!doctype html>
 <html lang="es">
   <head>
@@ -678,14 +694,14 @@ export default {
   </body>
 </html>
 `
-    fs.writeFileSync(indexHtmlPath, indexHtml)
+    writeFileSync(indexHtmlPath, indexHtml)
     console.log('   ✅ Creado: index.html')
   }
   
   // Crear layout local según el seleccionado
   const layoutsDir = path.join(projectRoot, 'src', 'layouts')
-  if (!fs.existsSync(layoutsDir)) {
-    fs.mkdirSync(layoutsDir, { recursive: true })
+  if (!existsSync(layoutsDir)) {
+    mkdirSync(layoutsDir, { recursive: true })
   }
   
   // Generar layout local que use los componentes locales
@@ -800,12 +816,12 @@ export default MinimalLayout
   }
   
   const layoutPath = path.join(layoutsDir, `${selectedLayout.charAt(0).toUpperCase() + selectedLayout.slice(1)}Layout.tsx`)
-  fs.writeFileSync(layoutPath, layoutContent)
+  writeFileSync(layoutPath, layoutContent)
   console.log(`   ✅ Creado: src/layouts/${path.basename(layoutPath)}`)
   
   // Crear src/main.tsx que use el layout local
   const mainTsxPath = path.join(projectRoot, 'src', 'main.tsx')
-  if (!fs.existsSync(mainTsxPath)) {
+  if (!existsSync(mainTsxPath)) {
     const layoutName = selectedLayout.charAt(0).toUpperCase() + selectedLayout.slice(1) + 'Layout'
     const mainTsx = `import React from 'react'
 import ReactDOM from 'react-dom/client'
@@ -824,22 +840,22 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   </React.StrictMode>,
 )
 `
-    fs.writeFileSync(mainTsxPath, mainTsx)
+    writeFileSync(mainTsxPath, mainTsx)
     console.log('   ✅ Creado: src/main.tsx')
   }
   
   // Crear src/index.css
   const indexCssPath = path.join(projectRoot, 'src', 'index.css')
-  if (!fs.existsSync(indexCssPath)) {
+  if (!existsSync(indexCssPath)) {
     const indexCss = `@import "tailwindcss";
 `
-    fs.writeFileSync(indexCssPath, indexCss)
+    writeFileSync(indexCssPath, indexCss)
     console.log('   ✅ Creado: src/index.css')
   }
   
   // Crear src/pages/HomePage.tsx con página de ejemplo simple
   const homePagePath = path.join(projectRoot, 'src', 'pages', 'HomePage.tsx')
-  if (!fs.existsSync(homePagePath)) {
+  if (!existsSync(homePagePath)) {
     const homePage = `import { useResponsiveLayout } from 'responsive-system'
 import { useResponsive } from '../hooks'
 
@@ -919,13 +935,13 @@ function HomePage() {
 
 export default HomePage
 `
-    fs.writeFileSync(homePagePath, homePage)
+    writeFileSync(homePagePath, homePage)
     console.log('   ✅ Creado: src/pages/HomePage.tsx (página de ejemplo simple)')
   }
   
   // Crear src/App.tsx que importa la página
   const appTsxPath = path.join(projectRoot, 'src', 'App.tsx')
-  if (!fs.existsSync(appTsxPath)) {
+  if (!existsSync(appTsxPath)) {
     const appTsx = `import HomePage from './pages/HomePage'
 
 function App() {
@@ -934,7 +950,7 @@ function App() {
 
 export default App
 `
-    fs.writeFileSync(appTsxPath, appTsx)
+    writeFileSync(appTsxPath, appTsx)
     console.log('   ✅ Creado: src/App.tsx')
   }
   
@@ -952,7 +968,7 @@ export default App
     packageJson.scripts.preview = 'vite preview'
   }
   
-  fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
+  writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
   console.log('   ✅ Actualizado: package.json con scripts')
   
   console.log('')