responsive-system 1.1.4 → 1.2.0

package/src/hooks/useResponsive.ts

@@ -0,0 +1,189 @@
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import type { 
+  ResponsiveState, 
+  Breakpoint
+} from '../types/responsive'
+import { 
+  getCurrentBreakpoint,
+  getBreakpointIndex
+} from '../constants/breakpoints'
+
+/**
+ * Debounce utility
+ */
+function debounce<T extends (...args: unknown[]) => void>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout> | null = null
+  return (...args: Parameters<T>) => {
+    if (timeout) clearTimeout(timeout)
+    timeout = setTimeout(() => func(...args), wait)
+  }
+}
+
+/**
+ * Get orientation based on dimensions
+ */
+function getOrientation(width: number, height: number): 'landscape' | 'portrait' {
+  return width >= height ? 'landscape' : 'portrait'
+}
+
+/**
+ * Hook principal useResponsive
+ * Provee información sobre el breakpoint actual y helpers para responsive
+ */
+export const useResponsive = (): ResponsiveState => {
+  const [dimensions, setDimensions] = useState({
+    width: typeof window !== 'undefined' ? window.innerWidth : 1024,
+    height: typeof window !== 'undefined' ? window.innerHeight : 768
+  })
+
+  // Función para actualizar dimensiones
+  const updateDimensions = useCallback(() => {
+    setDimensions({
+      width: window.innerWidth,
+      height: window.innerHeight
+    })
+  }, [])
+
+  // Debounced update para optimizar performance
+  const debouncedUpdateDimensions = useMemo(
+    () => debounce(updateDimensions, 100),
+    [updateDimensions]
+  )
+
+  // Effect para escuchar cambios de tamaño
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    window.addEventListener('resize', debouncedUpdateDimensions)
+    
+    return () => {
+      window.removeEventListener('resize', debouncedUpdateDimensions)
+    }
+  }, [debouncedUpdateDimensions])
+
+  const { width, height } = dimensions
+
+  // Calcular breakpoint actual
+  const breakpoint = useMemo(() => getCurrentBreakpoint(width), [width])
+  
+  // Calcular orientación
+  const orientation = useMemo(() => getOrientation(width, height), [width, height])
+
+  // Helpers booleanos por breakpoint específico
+  const isXs = breakpoint === 'xs'
+  const isSm = breakpoint === 'sm'
+  const isMd = breakpoint === 'md'
+  const isLg = breakpoint === 'lg'
+  const isXl = breakpoint === 'xl'
+  const is2Xl = breakpoint === '2xl'
+  const is3Xl = breakpoint === '3xl'
+  const is4Xl = breakpoint === '4xl'
+  const is5Xl = breakpoint === '5xl'
+
+  // Helpers booleanos agrupados
+  const isMobile = isXs || isSm
+  const isTablet = isMd
+  const isDesktop = isLg || isXl || is2Xl || is3Xl || is4Xl || is5Xl
+  const isSmall = isXs || isSm || isMd
+  const isLarge = isLg || isXl || is2Xl || is3Xl || is4Xl || is5Xl
+  const isUltraWide = is3Xl || is4Xl || is5Xl
+  const is4K = is4Xl || is5Xl
+  const is5K = is5Xl
+
+  // Helpers de orientación
+  const isPortrait = orientation === 'portrait'
+  const isLandscape = orientation === 'landscape'
+
+  // Funciones de comparación de breakpoints
+  const isBreakpointUp = useCallback((bp: Breakpoint): boolean => {
+    return getBreakpointIndex(breakpoint) >= getBreakpointIndex(bp)
+  }, [breakpoint])
+
+  const isBreakpointDown = useCallback((bp: Breakpoint): boolean => {
+    return getBreakpointIndex(breakpoint) <= getBreakpointIndex(bp)
+  }, [breakpoint])
+
+  const isBreakpointBetween = useCallback((min: Breakpoint, max: Breakpoint): boolean => {
+    const current = getBreakpointIndex(breakpoint)
+    return current >= getBreakpointIndex(min) && current <= getBreakpointIndex(max)
+  }, [breakpoint])
+
+  // Funciones de comparación de ancho
+  const isWidthUp = useCallback((minWidth: number): boolean => {
+    return width >= minWidth
+  }, [width])
+
+  const isWidthDown = useCallback((maxWidth: number): boolean => {
+    return width <= maxWidth
+  }, [width])
+
+  const isWidthBetween = useCallback((minWidth: number, maxWidth: number): boolean => {
+    return width >= minWidth && width <= maxWidth
+  }, [width])
+
+  // Funciones de comparación de altura
+  const isHeightUp = useCallback((minHeight: number): boolean => {
+    return height >= minHeight
+  }, [height])
+
+  const isHeightDown = useCallback((maxHeight: number): boolean => {
+    return height <= maxHeight
+  }, [height])
+
+  const isHeightBetween = useCallback((minHeight: number, maxHeight: number): boolean => {
+    return height >= minHeight && height <= maxHeight
+  }, [height])
+
+  // Debug mode
+  const debug = false
+
+  return {
+    // Estado básico
+    breakpoint,
+    width,
+    height,
+    orientation,
+    
+    // Helpers booleanos específicos
+    isXs,
+    isSm,
+    isMd,
+    isLg,
+    isXl,
+    is2Xl,
+    is3Xl,
+    is4Xl,
+    is5Xl,
+    
+    // Helpers booleanos agrupados
+    isMobile,
+    isTablet,
+    isDesktop,
+    isSmall,
+    isLarge,
+    isUltraWide,
+    is4K,
+    is5K,
+    
+    // Helpers de orientación
+    isPortrait,
+    isLandscape,
+    
+    // Funciones de comparación
+    isBreakpointUp,
+    isBreakpointDown,
+    isBreakpointBetween,
+    isWidthUp,
+    isWidthDown,
+    isWidthBetween,
+    isHeightUp,
+    isHeightDown,
+    isHeightBetween,
+    
+    // Debug
+    debug
+  }
+}

package/src/hooks/useResponsiveLayout.ts

@@ -0,0 +1,51 @@
+import { useResponsiveLayoutContext } from '../context'
+
+export const useResponsiveLayout = () => {
+  const context = useResponsiveLayoutContext()
+  
+  return {
+    // Todo el sistema responsivo original
+    ...context.responsive,
+    
+    // Sistema de layout
+    layout: {
+      current: context.layout.current,
+      config: context.layout.config,
+      setLayout: context.layout.setLayout,
+    },
+    
+    // Utilidades de layout
+    layoutUtils: context.layoutUtils,
+    
+    // Helpers específicos del layout
+    isDefaultLayout: () => context.layout.current === 'default',
+    isSidebarLayout: () => context.layout.current === 'sidebar',
+    isDashboardLayout: () => context.layout.current === 'dashboard',
+    isMinimalLayout: () => context.layout.current === 'minimal',
+    
+    // Grid helpers que usan el sistema auto-escalable
+    grid: {
+      auto: (minWidth = 'md') => `grid-cols-auto-${minWidth}`,
+      responsive: (breakpoints: Record<string, number>) => {
+        const classes: string[] = []
+        Object.entries(breakpoints).forEach(([breakpoint, cols]) => {
+          if (breakpoint === 'base') {
+            classes.push(`grid-cols-${cols}`)
+          } else {
+            classes.push(`${breakpoint}:grid-cols-${cols}`)
+          }
+        })
+        return classes.join(' ')
+      },
+      fixed: (cols: number) => `grid-cols-${cols}`,
+    },
+    
+    // Spacing helpers que escalan automáticamente
+    spacing: {
+      container: context.layoutUtils.getContainerClass(),
+      section: 'mb-6',
+      card: 'p-6',
+      gap: 'gap-4',
+    },
+  }
+}

package/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/src/index.ts

@@ -0,0 +1,100 @@
+// ========================================
+// SISTEMA RESPONSIVE AUTO-SCALING + LAYOUTS
+// ========================================
+
+/**
+ * CÓMO USAR ESTE SISTEMA:
+ * 
+ * 1. Instala el plugin en tailwind.config.js:
+ *    import responsiveScalePlugin from './src/plugin/responsiveScalePlugin.js'
+ *    plugins: [responsiveScalePlugin()]
+ * 
+ * 2. Usa el ResponsiveLayoutProvider + MainLayout:
+ *    <ResponsiveLayoutProvider defaultLayout="default">
+ *      <MainLayout>
+ *        <App />
+ *      </MainLayout>
+ *    </ResponsiveLayoutProvider>
+ * 
+ * 3. Selección de layout (múltiples opciones):
+ *    - Por prop: <MainLayout layout="dashboard">...</MainLayout>
+ *    - Por contexto: const { setLayout } = useResponsiveLayout(); setLayout('sidebar')
+ *    - Por defaultLayout: <ResponsiveLayoutProvider defaultLayout="dashboard">
+ * 
+ * 4. Hook responsivo personalizado (opcional):
+ *    <ResponsiveLayoutProvider useResponsiveHook={tuHookPersonalizado}>
+ *      ...
+ *    </ResponsiveLayoutProvider>
+ * 
+ * 5. Usa Tailwind NORMAL en tus páginas:
+ *    <div className="p-6 text-base">
+ *      TODO escala automáticamente + layout consistente
+ *    </div>
+ * 
+ * 6. (Opcional) Usa hooks para casos avanzados:
+ *    const { layout, responsive } = useResponsiveLayout()
+ */
+
+// ========================================
+// EXPORTS PRINCIPALES
+// ========================================
+
+// Providers
+export { ResponsiveLayoutProvider, ResponsiveProvider } from './providers'
+
+// Layouts
+export { 
+  MainLayout,
+  DefaultLayout, 
+  SidebarLayout, 
+  DashboardLayout, 
+  MinimalLayout 
+} from './layouts'
+
+// Hooks
+export { useResponsiveLayout, useLayout, useResponsive } from './hooks'
+
+// Componentes de layout
+export { Header, Sidebar, Footer, Navigation } from './components/layout'
+
+// LayoutSwitcher
+export { default as LayoutSwitcher } from './components/LayoutSwitcher'
+
+// Context (para casos avanzados)
+export { 
+  useResponsiveLayoutContext, 
+  SidebarProvider, 
+  useSidebar,
+  NavigationProvider,
+  useNavigation
+} from './context'
+
+// Tipos TypeScript
+export type { 
+  Breakpoint,
+  Orientation,
+  ResponsiveState,
+  ResponsiveProviderProps
+} from './types/responsive'
+
+// Constantes (para casos avanzados)
+export { 
+  DEFAULT_BREAKPOINTS,
+  getCurrentBreakpoint,
+  getBreakpointIndex,
+  getBreakpointValue
+} from './constants/breakpoints'
+
+// Configuración de layouts
+export { LAYOUT_CONFIG, DEFAULT_LAYOUT, AVAILABLE_LAYOUTS } from './config/layout'
+export type { LayoutConfig } from './config/layout'
+
+// Plugin de Tailwind (importar directamente en tailwind.config.js)
+// import responsiveScalePlugin from './src/plugin/responsiveScalePlugin.js'
+
+// ========================================
+// EJEMPLOS (Solo para testing en este proyecto - NO exportados en npm)
+// ========================================
+
+// Los ejemplos no se exportan en el paquete npm
+// Solo están disponibles durante el desarrollo local

package/src/layouts/DashboardLayout.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { useResponsiveLayout } from '../hooks'
+import { Sidebar, Footer } from '../components/layout'
+import { SidebarProvider, useSidebar } from '../context'
+
+interface DashboardLayoutProps {
+  children: React.ReactNode
+}
+
+const DashboardLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { layoutUtils } = useResponsiveLayout()
+  const { setSidebarOpen } = useSidebar()
+  
+  return (
+    <div className="min-h-screen bg-black flex flex-col">
+      {/* Navbar para móvil (igual que SidebarLayout) */}
+      <div className="sticky top-0 z-50">
+        <nav className="bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative">
+          <div className="w-full">
+            <div className="px-4 py-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-2">
+                  {/* Hamburger button para móvil - A LA IZQUIERDA */}
+                  <button
+                    onClick={() => setSidebarOpen(true)}
+                    className="p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors"
+                  >
+                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                    </svg>
+                  </button>
+                  
+                  <div className="flex items-center space-x-2">
+                    <div className="w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse"></div>
+                    <h3 className="text-base font-black text-white tracking-tight">
+                      Sistema Responsivo
+                    </h3>
+                  </div>
+                  <div className="px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest">
+                    DASHBOARD
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </nav>
+      </div>
+      
+      {/* Content area con sidebar */}
+      <div className="flex flex-1">
+        {/* Sidebar */}
+        <Sidebar />
+        
+        {/* Main content */}
+        <main className="flex-1 overflow-auto">
+          <div className={layoutUtils.getContainerClass()}>
+            {children}
+          </div>
+        </main>
+      </div>
+      
+      {/* Footer */}
+      <Footer />
+    </div>
+  )
+}
+
+const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
+  return (
+    <SidebarProvider>
+      <DashboardLayoutContent>{children}</DashboardLayoutContent>
+    </SidebarProvider>
+  )
+}
+
+export default DashboardLayout

package/src/layouts/DefaultLayout.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Navigation, Footer } from '../components/layout'
+import { useResponsiveLayout } from '../hooks'
+
+interface DefaultLayoutProps {
+  children: React.ReactNode
+}
+
+const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
+  const { layoutUtils } = useResponsiveLayout()
+  
+  return (
+    <div className="min-h-screen bg-black flex flex-col">
+      {/* Navigation fijo arriba */}
+      <Navigation />
+      
+      {/* Main content con padding-top para la navigation */}
+      <main className="flex-1">
+        <div className={layoutUtils.getContainerClass()}>
+          {children}
+        </div>
+      </main>
+      
+      {/* Footer fijo abajo */}
+      <Footer />
+    </div>
+  )
+}
+
+export default DefaultLayout

package/src/layouts/MainLayout.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { useResponsiveLayout } from '../hooks'
+import { 
+  DefaultLayout, 
+  SidebarLayout, 
+  DashboardLayout, 
+  MinimalLayout 
+} from './index'
+
+interface MainLayoutProps {
+  children: React.ReactNode
+  /**
+   * Layout específico a usar. Si se proporciona, sobrescribe el layout del contexto.
+   * Valores posibles: 'default', 'sidebar', 'dashboard', 'minimal'
+   */
+  layout?: 'default' | 'sidebar' | 'dashboard' | 'minimal'
+}
+
+const MainLayout: React.FC<MainLayoutProps> = ({ children, layout: layoutProp }) => {
+  const { layout } = useResponsiveLayout()
+  
+  // Usar el layout del prop si se proporciona, sino usar el del contexto
+  const currentLayout = layoutProp || layout.current
+  
+  // Seleccionar el layout apropiado basado en el estado del contexto o prop
+  const layouts = {
+    default: DefaultLayout,
+    sidebar: SidebarLayout,
+    dashboard: DashboardLayout,
+    minimal: MinimalLayout,
+  }
+  
+  const LayoutComponent = layouts[currentLayout as keyof typeof layouts] || DefaultLayout
+  
+  return <LayoutComponent>{children}</LayoutComponent>
+}
+
+export default MainLayout

package/src/layouts/MinimalLayout.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { useResponsiveLayout } from '../hooks'
+
+interface MinimalLayoutProps {
+  children: React.ReactNode
+}
+
+const MinimalLayout: React.FC<MinimalLayoutProps> = ({ children }) => {
+  const { layoutUtils } = useResponsiveLayout()
+  
+  return (
+    <div className="min-h-screen bg-black">
+      <main className={layoutUtils.getContainerClass()}>
+        {children}
+      </main>
+    </div>
+  )
+}
+
+export default MinimalLayout

package/src/layouts/SidebarLayout.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { useResponsiveLayout } from '../hooks'
+import { Sidebar } from '../components/layout'
+import { SidebarProvider } from '../context'
+
+interface SidebarLayoutProps {
+  children: React.ReactNode
+}
+
+const SidebarLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { layoutUtils } = useResponsiveLayout()
+  
+  return (
+    <div className="min-h-screen bg-black flex">
+      {/* Sidebar */}
+      <Sidebar />
+      
+      {/* Main content */}
+      <main className="flex-1 overflow-auto">
+        <div className={layoutUtils.getContainerClass()}>
+          {children}
+        </div>
+      </main>
+    </div>
+  )
+}
+
+const SidebarLayout: React.FC<SidebarLayoutProps> = ({ children }) => {
+  return (
+    <SidebarProvider>
+      <SidebarLayoutContent>{children}</SidebarLayoutContent>
+    </SidebarProvider>
+  )
+}
+
+export default SidebarLayout

package/src/layouts/index.ts

@@ -0,0 +1,5 @@
+export { default as MainLayout } from './MainLayout'
+export { default as DefaultLayout } from './DefaultLayout'
+export { default as SidebarLayout } from './SidebarLayout'
+export { default as DashboardLayout } from './DashboardLayout'
+export { default as MinimalLayout } from './MinimalLayout'

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)