responsive-system 1.0.6 → 1.1.0

package/package.json

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

package/scripts/postinstall.js

@@ -1,8 +1,11 @@
 #!/usr/bin/env node
 
 /**
- * Script postinstall para automatizar la configuración inicial
- * Instala React y Tailwind si no están presentes
+ * 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
  */
 
 import fs from 'fs'
@@ -23,51 +26,24 @@ if (!fs.existsSync(packageJsonPath)) {
 }
 
 const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
-const deps = { ...packageJson.dependencies, ...packageJson.devDependencies }
 
-// Verificar si React está instalado (solo en proyecto raíz, no en subdirectorios)
+// Verificar si el proyecto está vacío (solo tiene responsive-system)
+const isProjectEmpty = !packageJson.dependencies || 
+                       Object.keys(packageJson.dependencies).length === 0 ||
+                       (Object.keys(packageJson.dependencies).length === 1 && packageJson.dependencies['responsive-system'])
+
+// Verificar qué está instalado
 const hasReact = (packageJson.dependencies && packageJson.dependencies.react) || 
                  (packageJson.devDependencies && packageJson.devDependencies.react) ||
                  fs.existsSync(path.join(projectRoot, 'node_modules', 'react'))
-                 
-const hasTailwind = (packageJson.dependencies && packageJson.dependencies.tailwindcss) || 
-                    (packageJson.devDependencies && packageJson.devDependencies.tailwindcss) ||
-                    fs.existsSync(path.join(projectRoot, 'node_modules', 'tailwindcss'))
-                    
-const hasTypeScript = (packageJson.dependencies && packageJson.dependencies.typescript) || 
-                      (packageJson.devDependencies && packageJson.devDependencies.typescript) ||
-                      fs.existsSync(path.join(projectRoot, 'node_modules', 'typescript'))
-
-let needsInstall = false
-const packagesToInstall = []
 
-if (!hasReact) {
-  packagesToInstall.push('react@^19.1.1', 'react-dom@^19.1.1')
-  needsInstall = true
-}
+const hasVite = (packageJson.devDependencies && packageJson.devDependencies.vite) ||
+                fs.existsSync(path.join(projectRoot, 'node_modules', 'vite'))
 
-// Siempre instalar Tailwind en el proyecto raíz (aunque esté en responsive-system)
-// Verificar específicamente en node_modules del proyecto raíz y en devDependencies
-const tailwindInRoot = fs.existsSync(path.join(projectRoot, 'node_modules', 'tailwindcss'))
 const tailwindInDevDeps = packageJson.devDependencies && packageJson.devDependencies.tailwindcss
-
-if (!tailwindInRoot || !tailwindInDevDeps) {
-  // Instalar como devDependencies para que npx funcione
-  packagesToInstall.push('tailwindcss@^4.1.14', 'postcss@^8.5.6', 'autoprefixer@^10.4.21')
-  needsInstall = true
-}
-
-// Verificar si TypeScript está en devDependencies
 const typescriptInDevDeps = packageJson.devDependencies && packageJson.devDependencies.typescript
-if (!typescriptInDevDeps) {
-  packagesToInstall.push('typescript@~5.9.3')
-  needsInstall = true
-}
-
-// SIEMPRE verificar e instalar si falta algo
-console.log('📦 responsive-system: Verificando dependencias...')
 
-// Separar paquetes: React (dependencies) vs TypeScript/Tailwind (devDependencies)
+// Separar paquetes: React (dependencies) vs TypeScript/Tailwind/Vite (devDependencies)
 const reactPackages = []
 const devPackages = []
 
@@ -76,20 +52,23 @@ if (!hasReact) {
   reactPackages.push('react@^19.1.1', 'react-dom@^19.1.1')
 }
 
+// Vite (si el proyecto está vacío)
+if (isProjectEmpty && !hasVite) {
+  devPackages.push('vite@^7.1.7', '@vitejs/plugin-react@^5.0.4')
+}
+
 // TypeScript y Tailwind
-const tailwindInDevDeps = packageJson.devDependencies && packageJson.devDependencies.tailwindcss
 if (!tailwindInDevDeps) {
   devPackages.push('tailwindcss@^4.1.14', 'postcss@^8.5.6', 'autoprefixer@^10.4.21')
 }
 
-const typescriptInDevDeps = packageJson.devDependencies && packageJson.devDependencies.typescript
 if (!typescriptInDevDeps) {
-  devPackages.push('typescript@~5.9.3')
+  devPackages.push('typescript@~5.9.3', '@types/react@^19.1.16', '@types/react-dom@^19.1.9')
 }
 
 // Instalar React como dependencies (se necesita en runtime)
 if (reactPackages.length > 0) {
-  console.log(`📦 responsive-system: Instalando React...`)
+  console.log('📦 responsive-system: Instalando React...')
   console.log(`   Instalando: ${reactPackages.join(', ')}`)
   try {
     execSync(`npm install ${reactPackages.join(' ')}`, {
@@ -102,29 +81,311 @@ if (reactPackages.length > 0) {
   }
 }
 
-// Instalar TypeScript y Tailwind como devDependencies (para que npx funcione)
+// Instalar TypeScript, Tailwind y Vite como devDependencies
 if (devPackages.length > 0) {
-  console.log(`📦 responsive-system: Instalando TypeScript y Tailwind...`)
+  console.log('📦 responsive-system: Instalando TypeScript, Tailwind y Vite...')
   console.log(`   Instalando: ${devPackages.join(', ')}`)
   try {
     execSync(`npm install ${devPackages.join(' ')} --save-dev`, {
       stdio: 'inherit',
       cwd: projectRoot
     })
-    console.log('✅ responsive-system: TypeScript y Tailwind instalados correctamente')
+    console.log('✅ responsive-system: Dependencias de desarrollo instaladas correctamente')
   } catch (error) {
-    console.warn('⚠️  responsive-system: Error al instalar TypeScript/Tailwind')
+    console.warn('⚠️  responsive-system: Error al instalar dependencias de desarrollo')
   }
 }
 
-if (reactPackages.length === 0 && devPackages.length === 0) {
-  console.log('✅ responsive-system: Todas las dependencias están instaladas')
+// Si el proyecto está vacío, crear estructura base
+if (isProjectEmpty) {
+  console.log('📦 responsive-system: Proyecto vacío detectado, creando estructura base...')
+  
+  // Crear estructura de directorios
+  const dirs = ['src', 'src/components', 'src/pages', 'public']
+  dirs.forEach(dir => {
+    const dirPath = path.join(projectRoot, dir)
+    if (!fs.existsSync(dirPath)) {
+      fs.mkdirSync(dirPath, { recursive: true })
+    }
+  })
+  
+  // Crear vite.config.ts
+  const viteConfigPath = path.join(projectRoot, 'vite.config.ts')
+  if (!fs.existsSync(viteConfigPath)) {
+    const viteConfig = `import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import responsiveScalePlugin from 'responsive-system/plugin'
+
+export default defineConfig({
+  plugins: [react()],
+})
+`
+    fs.writeFileSync(viteConfigPath, viteConfig)
+    console.log('✅ responsive-system: vite.config.ts creado')
+  }
+  
+  // Crear tailwind.config.js
+  const tailwindConfigPath = path.join(projectRoot, 'tailwind.config.js')
+  if (!fs.existsSync(tailwindConfigPath)) {
+    const tailwindConfig = `import responsiveScalePlugin from 'responsive-system/plugin'
+
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      screens: {
+        'xs': '475px', 'sm': '640px', 'md': '768px', 'lg': '1024px',
+        'xl': '1280px', '2xl': '1536px', '3xl': '1920px', '4xl': '2560px', '5xl': '3840px'
+      }
+    },
+  },
+  plugins: [
+    responsiveScalePlugin({
+      scaleProperties: {
+        typography: true,
+        spacing: true,
+        lineHeight: true,
+        letterSpacing: true,
+        shadows: true,
+        borderWidth: false,
+        sizing: false,
+        borderRadius: false
+      },
+      scales: {
+        xs: 1.0, sm: 1.0, md: 1.0, lg: 1.0, xl: 1.0,
+        '2xl': 1.05, '3xl': 1.15, '4xl': 1.25, '5xl': 1.35
+      }
+    })
+  ],
+}
+`
+    fs.writeFileSync(tailwindConfigPath, tailwindConfig)
+    console.log('✅ responsive-system: tailwind.config.js creado')
+  }
+  
+  // Crear postcss.config.js
+  const postcssConfigPath = path.join(projectRoot, 'postcss.config.js')
+  if (!fs.existsSync(postcssConfigPath)) {
+    const postcssConfig = `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+`
+    fs.writeFileSync(postcssConfigPath, postcssConfig)
+    console.log('✅ responsive-system: postcss.config.js creado')
+  }
+  
+  // Crear tsconfig.json
+  const tsconfigPath = path.join(projectRoot, 'tsconfig.json')
+  if (!fs.existsSync(tsconfigPath)) {
+    const tsconfig = `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
+`
+    fs.writeFileSync(tsconfigPath, tsconfig)
+    console.log('✅ responsive-system: tsconfig.json creado')
+  }
+  
+  // Crear tsconfig.node.json
+  const tsconfigNodePath = path.join(projectRoot, 'tsconfig.node.json')
+  if (!fs.existsSync(tsconfigNodePath)) {
+    const tsconfigNode = `{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
+`
+    fs.writeFileSync(tsconfigNodePath, tsconfigNode)
+  }
+  
+  // Crear index.html
+  const indexHtmlPath = path.join(projectRoot, 'index.html')
+  if (!fs.existsSync(indexHtmlPath)) {
+    const indexHtml = `<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Responsive System Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`
+    fs.writeFileSync(indexHtmlPath, indexHtml)
+    console.log('✅ responsive-system: index.html creado')
+  }
+  
+  // Crear src/main.tsx
+  const mainTsxPath = path.join(projectRoot, 'src', 'main.tsx')
+  if (!fs.existsSync(mainTsxPath)) {
+    const mainTsx = `import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { ResponsiveLayoutProvider, MainLayout } from 'responsive-system'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <ResponsiveLayoutProvider defaultLayout="default">
+      <MainLayout>
+        <App />
+      </MainLayout>
+    </ResponsiveLayoutProvider>
+  </React.StrictMode>,
+)
+`
+    fs.writeFileSync(mainTsxPath, mainTsx)
+    console.log('✅ responsive-system: src/main.tsx creado')
+  }
+  
+  // Crear src/index.css
+  const indexCssPath = path.join(projectRoot, 'src', 'index.css')
+  if (!fs.existsSync(indexCssPath)) {
+    const indexCss = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`
+    fs.writeFileSync(indexCssPath, indexCss)
+    console.log('✅ responsive-system: src/index.css creado')
+  }
+  
+  // 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'
+
+function App() {
+  const { breakpoint, isMobile, layout } = useResponsiveLayout()
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-6">
+      <div className="max-w-7xl mx-auto space-y-6">
+        {/* Header con información del sistema */}
+        <div className="bg-white rounded-lg shadow-lg p-6">
+          <h1 className="text-4xl font-bold mb-4">Responsive System Demo</h1>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="p-4 bg-blue-50 rounded">
+              <p className="text-sm text-gray-600">Breakpoint actual</p>
+              <p className="text-2xl font-bold">{breakpoint}</p>
+            </div>
+            <div className="p-4 bg-green-50 rounded">
+              <p className="text-sm text-gray-600">Layout actual</p>
+              <p className="text-2xl font-bold capitalize">{layout.current}</p>
+            </div>
+            <div className="p-4 bg-purple-50 rounded">
+              <p className="text-sm text-gray-600">Dispositivo</p>
+              <p className="text-2xl font-bold">{isMobile ? 'Móvil' : 'Desktop'}</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Selector de layouts */}
+        <div className="bg-white rounded-lg shadow-lg p-6">
+          <h2 className="text-2xl font-bold mb-4">Cambiar Layout</h2>
+          <LayoutSwitcher />
+        </div>
+
+        {/* Cards de ejemplo */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {[1, 2, 3, 4, 5, 6].map((i) => (
+            <div key={i} className="bg-white rounded-lg shadow-lg p-6">
+              <h3 className="text-xl font-bold mb-2">Card {i}</h3>
+              <p className="text-gray-600">
+                Este es un ejemplo de card que escala automáticamente según el tamaño de pantalla.
+                Todo el texto, espaciado y sombras se ajustan automáticamente.
+              </p>
+            </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>
+          <ul className="space-y-2 text-gray-700">
+            <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>
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
 }
 
-// Verificar si tailwind.config.js existe
-const tailwindConfigPath = path.join(projectRoot, 'tailwind.config.js')
-if (!fs.existsSync(tailwindConfigPath)) {
-  console.log('💡 responsive-system: No se encontró tailwind.config.js')
-  console.log('   Ejecuta: npx tailwindcss init -p')
+export default App
+`
+    fs.writeFileSync(appTsxPath, appTsx)
+    console.log('✅ responsive-system: src/App.tsx creado con página de ejemplo')
+  }
+  
+  // Actualizar package.json con scripts
+  if (!packageJson.scripts) {
+    packageJson.scripts = {}
+  }
+  if (!packageJson.scripts.dev) {
+    packageJson.scripts.dev = 'vite'
+  }
+  if (!packageJson.scripts.build) {
+    packageJson.scripts.build = 'tsc && vite build'
+  }
+  if (!packageJson.scripts.preview) {
+    packageJson.scripts.preview = 'vite preview'
+  }
+  
+  fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
+  console.log('✅ responsive-system: package.json actualizado con scripts')
+  
+  console.log('')
+  console.log('🎉 responsive-system: Proyecto inicializado correctamente!')
+  console.log('')
+  console.log('Para empezar:')
+  console.log('  1. npm run dev')
+  console.log('  2. Abre http://localhost:5173')
+  console.log('')
 }
 
+if (reactPackages.length === 0 && devPackages.length === 0 && !isProjectEmpty) {
+  console.log('✅ responsive-system: Todas las dependencias están instaladas')
+}
+
+// Verificar si tailwind.config.js existe (solo si no es proyecto vacío)
+if (!isProjectEmpty) {
+  const tailwindConfigPath = path.join(projectRoot, 'tailwind.config.js')
+  if (!fs.existsSync(tailwindConfigPath)) {
+    console.log('💡 responsive-system: No se encontró tailwind.config.js')
+    console.log('   Ejecuta: npx tailwindcss init -p')
+  }
+}