responsive-system 1.7.1 → 1.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "responsive-system",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "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 fs from 'fs'
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'fs'
 import path from 'path'
 import { execSync } from 'child_process'
 import { fileURLToPath } from 'url'
@@ -50,14 +50,14 @@ console.log(`   Directorio: ${projectRoot}`)
 console.log('')
 
 // Verificar si package.json existe
-if (!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.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 +126,18 @@ function copyFileFromPackage(relativePath, targetPath, isComponent = false) {
   const sourcePath = path.join(__dirname, '..', relativePath)
   const destPath = path.join(projectRoot, targetPath)
   
-  if (!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.existsSync(destDir)) {
-    fs.mkdirSync(destDir, { recursive: true })
+  if (!existsSync(destDir)) {
+    mkdirSync(destDir, { recursive: true })
   }
   
-  let content = fs.readFileSync(sourcePath, 'utf8')
+  let content = readFileSync(sourcePath, 'utf8')
   
   // Si es un componente, reemplazar importaciones relativas por importaciones del paquete
   if (isComponent) {
@@ -158,7 +158,7 @@ function copyFileFromPackage(relativePath, targetPath, isComponent = false) {
     )
   }
   
-  fs.writeFileSync(destPath, content)
+  writeFileSync(destPath, content)
   return true
 }
 
@@ -167,8 +167,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 +224,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 +246,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 +359,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 +375,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 +404,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 +469,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,10 +480,12 @@ 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'))
 
-// Si el proyecto está vacío, crear estructura base
-if (isProjectEmpty) {
+// Función async para manejar la configuración del proyecto
+(async () => {
+  // Si el proyecto está vacío, crear estructura base
+  if (isProjectEmpty) {
   // Si ya está configurado, preguntar si quiere sobrescribir
   if (isAlreadyConfigured) {
     console.log('')
@@ -529,8 +531,8 @@ if (isProjectEmpty) {
   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 })
     }
   })
   
@@ -544,7 +546,7 @@ if (isProjectEmpty) {
   
   // 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'
 
@@ -552,13 +554,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 {
@@ -594,13 +596,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': {},
@@ -608,13 +610,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",
@@ -637,13 +639,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,
@@ -655,13 +657,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>
@@ -676,14 +678,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
@@ -798,12 +800,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'
@@ -822,22 +824,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'
 
@@ -917,13 +919,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() {
@@ -932,7 +934,7 @@ function App() {
 
 export default App
 `
-    fs.writeFileSync(appTsxPath, appTsx)
+    writeFileSync(appTsxPath, appTsx)
     console.log('   ✅ Creado: src/App.tsx')
   }
   
@@ -950,7 +952,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('')
@@ -967,10 +969,14 @@ export default App
   console.log('')
   console.log('💡 Para cambiar el layout: npx responsive-system-setup')
   console.log('')
-} else {
-  console.log('✅ Proyecto ya inicializado')
-}
+  } else {
+    console.log('✅ Proyecto ya inicializado')
+  }
 
-console.log('')
-console.log('✅ Configuración completada')
-console.log('')
+  console.log('')
+  console.log('✅ Configuración completada')
+  console.log('')
+})().catch((error) => {
+  console.error('❌ Error durante la configuración:', error)
+  process.exit(1)
+})