responsive-system 1.2.8 → 1.3.0

package/package.json

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

package/scripts/postinstall.js

@@ -4,14 +4,18 @@
  * Script postinstall para automatizar la configuración inicial completa
  * - Instala React, TypeScript, Tailwind automáticamente
  * - Inicializa proyecto Vite si está vacío
- * - Configura Tailwind
- * - Crea página de ejemplo con layouts
+ * - Pregunta qué layout quiere (interactivo)
+ * - Copia solo los componentes necesarios
+ * - Copia el hook useResponsive como archivo local
+ * - Crea página de ejemplo en pages/
+ * - Configura App.tsx con el layout seleccionado
  */
 
 import fs from 'fs'
 import path from 'path'
 import { execSync } from 'child_process'
 import { fileURLToPath } from 'url'
+import readline from 'readline'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -19,8 +23,12 @@ const __dirname = path.dirname(__filename)
 const projectRoot = process.cwd()
 const packageJsonPath = path.join(projectRoot, 'package.json')
 
+// Detectar si se ejecuta como postinstall o manualmente
+const isPostinstall = process.env.npm_lifecycle_event === 'postinstall'
+const isManual = process.argv[1].includes('postinstall.js') && !isPostinstall
+
 console.log('')
-console.log('📦 responsive-system: Iniciando postinstall...')
+console.log('📦 responsive-system: Iniciando configuración...')
 console.log(`   Directorio: ${projectRoot}`)
 console.log('')
 
@@ -46,27 +54,186 @@ const isProjectEmpty = !packageJson.dependencies ||
 // Verificar qué está instalado - SOLO en package.json (no en node_modules para evitar conflictos)
 const hasReactInPackageJson = (packageJson.dependencies && packageJson.dependencies.react) || 
                               (packageJson.devDependencies && packageJson.devDependencies.react)
-// NO verificar node_modules porque puede estar como dependencia transitiva y causar conflictos
-const hasReact = hasReactInPackageJson
-
 const hasVite = packageJson.devDependencies && packageJson.devDependencies.vite
-
 const tailwindInDevDeps = packageJson.devDependencies && packageJson.devDependencies.tailwindcss
 const typescriptInDevDeps = packageJson.devDependencies && packageJson.devDependencies.typescript
 
 let needsUpdate = false
 
+// Función para preguntar al usuario qué layout quiere
+async function askLayout() {
+  if (isPostinstall && !isManual) {
+    // Si es postinstall automático, usar 'default' por defecto
+    console.log('   ℹ️  Usando layout "default" por defecto')
+    console.log('   💡 Ejecuta "npx responsive-system-setup" para cambiar el layout')
+    return 'default'
+  }
+
+  // Si es ejecución manual, preguntar interactivamente
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  })
+
+  return new Promise((resolve) => {
+    console.log('')
+    console.log('🎨 Selecciona el layout que quieres usar:')
+    console.log('   1. default    - Navigation + Footer')
+    console.log('   2. sidebar    - Sidebar lateral')
+    console.log('   3. dashboard  - Sidebar + Footer')
+    console.log('   4. minimal    - Sin componentes (solo contenido)')
+    console.log('')
+    
+    rl.question('   Ingresa el número (1-4) o el nombre del layout: ', (answer) => {
+      rl.close()
+      
+      const normalized = answer.trim().toLowerCase()
+      
+      if (normalized === '1' || normalized === 'default') {
+        resolve('default')
+      } else if (normalized === '2' || normalized === 'sidebar') {
+        resolve('sidebar')
+      } else if (normalized === '3' || normalized === 'dashboard') {
+        resolve('dashboard')
+      } else if (normalized === '4' || normalized === 'minimal') {
+        resolve('minimal')
+      } else {
+        console.log('   ⚠️  Opción inválida, usando "default"')
+        resolve('default')
+      }
+    })
+  })
+}
+
+// Función para copiar archivo desde el paquete al proyecto
+function copyFileFromPackage(relativePath, targetPath, isComponent = false) {
+  const sourcePath = path.join(__dirname, '..', relativePath)
+  const destPath = path.join(projectRoot, targetPath)
+  
+  if (!fs.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 })
+  }
+  
+  let content = fs.readFileSync(sourcePath, 'utf8')
+  
+  // Si es un componente, reemplazar importaciones relativas por importaciones del paquete
+  if (isComponent) {
+    // Reemplazar importaciones de hooks
+    content = content.replace(
+      /from ['"]\.\.\/\.\.\/hooks['"]/g,
+      "from 'responsive-system'"
+    )
+    // Reemplazar importaciones de context
+    content = content.replace(
+      /from ['"]\.\.\/\.\.\/context['"]/g,
+      "from 'responsive-system'"
+    )
+    // Reemplazar importaciones de componentes/layout
+    content = content.replace(
+      /from ['"]\.\.\/components\/layout['"]/g,
+      "from 'responsive-system'"
+    )
+  }
+  
+  fs.writeFileSync(destPath, content)
+  return true
+}
+
+// Función para copiar componentes según el layout seleccionado
+function copyLayoutComponents(selectedLayout) {
+  const componentsDir = path.join(projectRoot, 'src', 'components', 'layout')
+  
+  // Crear directorio si no existe
+  if (!fs.existsSync(componentsDir)) {
+    fs.mkdirSync(componentsDir, { recursive: true })
+  }
+  
+  const componentsToCopy = {
+    default: ['Navigation', 'Footer'],
+    sidebar: ['Sidebar'],
+    dashboard: ['Sidebar', 'Footer'],
+    minimal: []
+  }
+  
+  const components = componentsToCopy[selectedLayout] || []
+  
+  if (components.length === 0) {
+    console.log('   ✅ Layout minimal: No se copian componentes')
+    return
+  }
+  
+  console.log(`   📦 Copiando componentes para layout "${selectedLayout}":`)
+  
+  for (const component of components) {
+    const sourceFile = `src/components/layout/${component}.tsx`
+    const targetFile = `src/components/layout/${component}.tsx`
+    
+    if (copyFileFromPackage(sourceFile, targetFile, true)) {
+      console.log(`      ✅ ${component}.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)
+  console.log('      ✅ index.ts')
+}
+
+// Función para copiar el hook useResponsive y sus dependencias
+function copyUseResponsiveHook() {
+  console.log('   📦 Copiando hook useResponsive y dependencias...')
+  
+  // Crear directorio hooks
+  const hooksDir = path.join(projectRoot, 'src', 'hooks')
+  if (!fs.existsSync(hooksDir)) {
+    fs.mkdirSync(hooksDir, { recursive: true })
+  }
+  
+  // Copiar tipos
+  const typesDir = path.join(projectRoot, 'src', 'types')
+  if (!fs.existsSync(typesDir)) {
+    fs.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 })
+  }
+  copyFileFromPackage('src/constants/breakpoints.ts', 'src/constants/breakpoints.ts')
+  console.log('      ✅ constants/breakpoints.ts')
+  
+  // Copiar hook useResponsive
+  copyFileFromPackage('src/hooks/useResponsive.ts', 'src/hooks/useResponsive.ts')
+  console.log('      ✅ hooks/useResponsive.ts')
+  
+  // Crear index.ts para exportar el hook
+  const indexContent = `export { useResponsive } from './useResponsive'
+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)
+  console.log('      ✅ hooks/index.ts')
+}
+
 // ESTRATEGIA: Modificar directamente el package.json primero, luego instalar
 console.log('📦 responsive-system: Verificando dependencias...')
 
 // Agregar React a dependencies SOLO si NO está en package.json
-// NO verificar node_modules para evitar múltiples copias de React
 if (!hasReactInPackageJson) {
   console.log('   ➕ Agregando React a dependencies...')
   if (!packageJson.dependencies) {
     packageJson.dependencies = {}
   }
-  // Usar versión compatible con peerDependencies del paquete
   packageJson.dependencies['react'] = '^19.1.1'
   packageJson.dependencies['react-dom'] = '^19.1.1'
   needsUpdate = true
@@ -85,9 +252,9 @@ if (isProjectEmpty && !hasVite) {
   needsUpdate = true
 }
 
-// Agregar TypeScript y Tailwind a devDependencies
+// Agregar Tailwind y sus dependencias a devDependencies
 if (!tailwindInDevDeps) {
-  console.log('   ➕ Agregando Tailwind a devDependencies...')
+  console.log('   ➕ Agregando Tailwind y PostCSS a devDependencies...')
   if (!packageJson.devDependencies) {
     packageJson.devDependencies = {}
   }
@@ -98,6 +265,7 @@ if (!tailwindInDevDeps) {
   needsUpdate = true
 }
 
+// Agregar TypeScript y sus tipos a devDependencies
 if (!typescriptInDevDeps) {
   console.log('   ➕ Agregando TypeScript a devDependencies...')
   if (!packageJson.devDependencies) {
@@ -144,16 +312,28 @@ if (isProjectEmpty) {
   console.log('')
   console.log('📦 responsive-system: Proyecto vacío detectado, creando estructura base...')
   
+  // Preguntar qué layout quiere
+  const selectedLayout = await askLayout()
+  console.log(`   ✅ Layout seleccionado: "${selectedLayout}"`)
+  console.log('')
+  
   // Crear estructura de directorios
-  const dirs = ['src', 'src/components', 'src/pages', 'public']
+  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 })
-      console.log(`   ✅ Creado: ${dir}/`)
     }
   })
   
+  // Copiar componentes según layout seleccionado
+  copyLayoutComponents(selectedLayout)
+  console.log('')
+  
+  // Copiar hook useResponsive
+  copyUseResponsiveHook()
+  console.log('')
+  
   // Crear vite.config.ts
   const viteConfigPath = path.join(projectRoot, 'vite.config.ts')
   if (!fs.existsSync(viteConfigPath)) {
@@ -303,7 +483,7 @@ import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <ResponsiveLayoutProvider defaultLayout="default">
+    <ResponsiveLayoutProvider defaultLayout="${selectedLayout}">
       <MainLayout>
         <App />
       </MainLayout>
@@ -318,20 +498,21 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   // Crear src/index.css
   const indexCssPath = path.join(projectRoot, 'src', 'index.css')
   if (!fs.existsSync(indexCssPath)) {
-    // Tailwind CSS v4 usa @import en lugar de @tailwind
     const indexCss = `@import "tailwindcss";
 `
     fs.writeFileSync(indexCssPath, indexCss)
     console.log('   ✅ Creado: src/index.css')
   }
   
-  // Crear src/App.tsx con página de ejemplo
-  const appTsxPath = path.join(projectRoot, 'src', 'App.tsx')
-  if (!fs.existsSync(appTsxPath)) {
-    const appTsx = `import { useResponsiveLayout, LayoutSwitcher } from 'responsive-system'
+  // Crear src/pages/HomePage.tsx con página de ejemplo
+  const homePagePath = path.join(projectRoot, 'src', 'pages', 'HomePage.tsx')
+  if (!fs.existsSync(homePagePath)) {
+    const homePage = `import { useResponsiveLayout, LayoutSwitcher } from 'responsive-system'
+import { useResponsive } from '../hooks'
 
-function App() {
+function HomePage() {
   const { breakpoint, isMobile, layout } = useResponsiveLayout()
+  const responsive = useResponsive()
 
   return (
     <div className="min-h-screen bg-gray-50 p-6">
@@ -374,6 +555,32 @@ function App() {
           ))}
         </div>
 
+        {/* Información sobre el hook useResponsive */}
+        <div className="bg-white rounded-lg shadow-lg p-6">
+          <h2 className="text-2xl font-bold mb-4">Hook useResponsive</h2>
+          <p className="text-gray-700 mb-4">
+            El hook <code className="bg-gray-100 px-2 py-1 rounded">useResponsive</code> está disponible localmente en <code className="bg-gray-100 px-2 py-1 rounded">src/hooks/useResponsive.ts</code>
+          </p>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="p-3 bg-gray-50 rounded">
+              <p className="text-xs text-gray-600">Ancho</p>
+              <p className="text-lg font-bold">{responsive.width}px</p>
+            </div>
+            <div className="p-3 bg-gray-50 rounded">
+              <p className="text-xs text-gray-600">Alto</p>
+              <p className="text-lg font-bold">{responsive.height}px</p>
+            </div>
+            <div className="p-3 bg-gray-50 rounded">
+              <p className="text-xs text-gray-600">Orientación</p>
+              <p className="text-lg font-bold capitalize">{responsive.orientation}</p>
+            </div>
+            <div className="p-3 bg-gray-50 rounded">
+              <p className="text-xs text-gray-600">Desktop</p>
+              <p className="text-lg font-bold">{responsive.isDesktop ? 'Sí' : 'No'}</p>
+            </div>
+          </div>
+        </div>
+
         {/* Información */}
         <div className="bg-white rounded-lg shadow-lg p-6">
           <h2 className="text-2xl font-bold mb-4">Cómo funciona</h2>
@@ -381,7 +588,7 @@ function App() {
             <li>✅ <strong>Auto-scaling:</strong> Todo escala automáticamente (texto, espaciado, sombras)</li>
             <li>✅ <strong>Layouts:</strong> Cambia entre default, sidebar, dashboard y minimal</li>
             <li>✅ <strong>Responsive:</strong> Se adapta automáticamente a todos los tamaños de pantalla</li>
-            <li>✅ <strong>Sin media queries:</strong> Usa el hook useResponsive para lógica condicional</li>
+            <li>✅ <strong>Hook useResponsive:</strong> Disponible localmente para configuración manual</li>
           </ul>
         </div>
       </div>
@@ -389,10 +596,25 @@ function App() {
   )
 }
 
+export default HomePage
+`
+    fs.writeFileSync(homePagePath, homePage)
+    console.log('   ✅ Creado: src/pages/HomePage.tsx')
+  }
+  
+  // Crear src/App.tsx que importa la página
+  const appTsxPath = path.join(projectRoot, 'src', 'App.tsx')
+  if (!fs.existsSync(appTsxPath)) {
+    const appTsx = `import HomePage from './pages/HomePage'
+
+function App() {
+  return <HomePage />
+}
+
 export default App
 `
     fs.writeFileSync(appTsxPath, appTsx)
-    console.log('   ✅ Creado: src/App.tsx con página de ejemplo')
+    console.log('   ✅ Creado: src/App.tsx')
   }
   
   // Actualizar package.json con scripts
@@ -419,6 +641,15 @@ export default App
   console.log('  1. npm run dev')
   console.log('  2. Abre http://localhost:5173')
   console.log('')
+  console.log(`Layout seleccionado: "${selectedLayout}"`)
+  console.log('   - Componentes copiados en src/components/layout/')
+  console.log('   - Hook useResponsive disponible en src/hooks/useResponsive.ts')
+  console.log('   - Página de ejemplo en src/pages/HomePage.tsx')
+  console.log('')
+  console.log('💡 Para cambiar el layout, ejecuta: npx responsive-system-setup')
+  console.log('')
+} else {
+  console.log('✅ responsive-system: Proyecto ya inicializado')
 }
 
 console.log('')