responsive-system 1.1.5 → 1.2.1

package/src/components/layout/Navigation.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react'
+import { useResponsiveLayout } from '../../hooks'
+import { useNavigation } from '../../context'
+
+const Navigation = () => {
+  const { isMobile, breakpoint } = useResponsiveLayout()
+  const { currentPage, setCurrentPage } = useNavigation()
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+
+  const pages = [
+    { id: 'demo', name: 'Demo' },
+    { id: 'test', name: 'Suite de Test' }
+  ]
+
+  return (
+    <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">
+              <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">
+                {breakpoint.toUpperCase()}
+              </div>
+            </div>
+            
+            <div className="flex items-center space-x-2">
+              {/* Botones visibles solo en desktop */}
+              {!isMobile && pages.map(page => (
+                <button
+                  key={page.id}
+                  onClick={() => setCurrentPage(page.id as 'demo' | 'test')}
+                  className={`px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${
+                    currentPage === page.id 
+                      ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50' 
+                      : 'bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600'
+                  }`}
+                >
+                  {page.name}
+                </button>
+              ))}
+              
+              {/* Menú hamburguesa para móvil - A LA DERECHA */}
+              {isMobile && (
+                <button
+                  onClick={() => setSidebarOpen(!sidebarOpen)}
+                  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>
+          </div>
+        </div>
+      </div>
+      
+      {/* Menú móvil desplegable - TRADICIONAL */}
+      {isMobile && sidebarOpen && (
+        <div className="absolute top-full left-0 right-0 bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl z-50">
+          <div className="p-4">
+            {/* Navigation - VERTICAL como menú tradicional */}
+            <nav className="space-y-2">
+              {pages.map((page) => (
+                <button
+                  key={page.id}
+                  onClick={() => {
+                    setCurrentPage(page.id as 'demo' | 'test')
+                    setSidebarOpen(false)
+                  }}
+                  className={`w-full text-left px-4 py-3 rounded-lg transition-all font-bold text-sm tracking-wide border ${
+                    currentPage === page.id 
+                      ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50' 
+                      : 'bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600'
+                  }`}
+                >
+                  {page.name}
+                </button>
+              ))}
+            </nav>
+          </div>
+        </div>
+      )}
+      </nav>
+    </div>
+  )
+}
+
+export default Navigation

package/src/components/layout/Sidebar.tsx

@@ -0,0 +1,108 @@
+import { useResponsiveLayout } from '../../hooks'
+import { useNavigation, useSidebar } from '../../context'
+
+const Sidebar = () => {
+  const { isMobile, isTablet, breakpoint } = useResponsiveLayout()
+  const { currentPage, setCurrentPage } = useNavigation()
+  const { sidebarOpen, setSidebarOpen } = useSidebar()
+  
+  const menuItems = [
+    { id: 'test', label: 'Suite de Test' },
+    { id: 'demo', label: 'Demo' },
+  ]
+  
+  return (
+    <>
+      {/* Hamburger button para móvil */}
+      {isMobile && (
+        <button
+          onClick={() => setSidebarOpen(true)}
+          className="fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors bg-black/50 border border-gray-700"
+        >
+          <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>
+      )}
+
+      {/* Sidebar desktop */}
+      <aside className={`
+        bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20
+        ${isMobile ? 'hidden' : 'w-64 flex-shrink-0'}
+        ${isTablet ? 'w-56' : 'w-64'}
+      `}>
+      <div className="p-6 flex flex-col h-full">
+        {/* Logo y Breakpoint */}
+        <div className="flex items-center space-x-3 mb-8">
+          <div className="w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center">
+            <span className="text-white font-bold text-sm">RS</span>
+          </div>
+          <div>
+            <span className="text-white font-bold text-lg">Sistema Responsivo</span>
+            <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 mt-1">
+              {breakpoint.toUpperCase()}
+            </div>
+          </div>
+        </div>
+        
+        {/* Navigation */}
+        <nav className="space-y-2">
+          {menuItems.map((item) => (
+            <button
+              key={item.id}
+              onClick={() => setCurrentPage(item.id as 'demo' | 'test')}
+              className={`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${
+                currentPage === item.id 
+                  ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50' 
+                  : 'text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10'
+              }`}
+            >
+              <span className="font-medium">{item.label}</span>
+            </button>
+          ))}
+        </nav>
+        
+      </div>
+      </aside>
+
+      {/* Sidebar móvil desplegable */}
+      {isMobile && sidebarOpen && (
+        <div className="fixed inset-0 z-40 bg-black/50" onClick={() => setSidebarOpen(false)}>
+          <div className="fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20">
+            <div className="p-6 flex flex-col h-full pt-20">
+              {/* Logo */}
+              <div className="flex items-center space-x-3 mb-8">
+                <div className="w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center">
+                  <span className="text-white font-bold text-sm">RS</span>
+                </div>
+                <span className="text-white font-bold text-lg">Sistema Responsivo</span>
+              </div>
+              
+              {/* Navigation */}
+              <nav className="space-y-2">
+                {menuItems.map((item) => (
+                  <button
+                    key={item.id}
+                    onClick={() => {
+                      setCurrentPage(item.id as 'demo' | 'test')
+                      setSidebarOpen(false)
+                    }}
+                    className={`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${
+                      currentPage === item.id 
+                        ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50' 
+                        : 'text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10'
+                    }`}
+                  >
+                    <span className="font-medium">{item.label}</span>
+                  </button>
+                ))}
+              </nav>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default Sidebar

package/src/components/layout/index.ts

@@ -0,0 +1,4 @@
+export { default as Header } from './Header'
+export { default as Sidebar } from './Sidebar'
+export { default as Footer } from './Footer'
+export { default as Navigation } from './Navigation'

package/src/config/layout.ts

@@ -0,0 +1,61 @@
+export interface LayoutConfig {
+  name: string
+  description: string
+  components: string[]
+  spacing: string
+  responsive: {
+    mobile: string
+    tablet: string
+    desktop: string
+  }
+}
+
+export const LAYOUT_CONFIG: Record<string, LayoutConfig> = {
+  default: {
+    name: 'Default',
+    description: 'Navbar arriba, body central, footer abajo',
+    components: ['Navigation', 'Footer'],
+    spacing: 'p-4 md:p-6 lg:p-8',
+    responsive: {
+      mobile: 'p-4',
+      tablet: 'p-6',
+      desktop: 'p-8'
+    }
+  },
+  sidebar: {
+    name: 'Sidebar',
+    description: 'Sidebar izquierda, contenido principal',
+    components: ['Sidebar'],
+    spacing: 'p-4 md:p-6',
+    responsive: {
+      mobile: 'p-4',
+      tablet: 'p-6',
+      desktop: 'p-6'
+    }
+  },
+  dashboard: {
+    name: 'Dashboard',
+    description: 'Header + Sidebar + Main + Footer',
+    components: ['Header', 'Sidebar', 'Footer'],
+    spacing: 'p-4 md:p-6 lg:p-8',
+    responsive: {
+      mobile: 'p-4',
+      tablet: 'p-6',
+      desktop: 'p-8'
+    }
+  },
+  minimal: {
+    name: 'Minimal',
+    description: 'Solo contenido, sin navegación',
+    components: [],
+    spacing: 'p-4 md:p-6',
+    responsive: {
+      mobile: 'p-4',
+      tablet: 'p-6',
+      desktop: 'p-6'
+    }
+  }
+}
+
+export const DEFAULT_LAYOUT = 'default'
+export const AVAILABLE_LAYOUTS = Object.keys(LAYOUT_CONFIG)

package/src/constants/breakpoints.ts

@@ -0,0 +1,48 @@
+import type { Breakpoint } from '../types/responsive'
+
+/**
+ * Default breakpoint values
+ * Deben coincidir con tailwind.config.js
+ */
+export const DEFAULT_BREAKPOINTS: Record<Breakpoint, number> = {
+  xs: 475,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+  '3xl': 1920,
+  '4xl': 2560,
+  '5xl': 3840
+}
+
+/**
+ * Get current breakpoint based on window width
+ */
+export const getCurrentBreakpoint = (width: number): Breakpoint => {
+  if (width >= DEFAULT_BREAKPOINTS['5xl']) return '5xl'
+  if (width >= DEFAULT_BREAKPOINTS['4xl']) return '4xl'
+  if (width >= DEFAULT_BREAKPOINTS['3xl']) return '3xl'
+  if (width >= DEFAULT_BREAKPOINTS['2xl']) return '2xl'
+  if (width >= DEFAULT_BREAKPOINTS.xl) return 'xl'
+  if (width >= DEFAULT_BREAKPOINTS.lg) return 'lg'
+  if (width >= DEFAULT_BREAKPOINTS.md) return 'md'
+  if (width >= DEFAULT_BREAKPOINTS.sm) return 'sm'
+  return 'xs'
+}
+
+/**
+ * Get breakpoint index (for comparisons)
+ */
+export const getBreakpointIndex = (breakpoint: Breakpoint): number => {
+  const breakpoints: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl']
+  return breakpoints.indexOf(breakpoint)
+}
+
+/**
+ * Get breakpoint value in pixels
+ */
+export const getBreakpointValue = (breakpoint: Breakpoint): number => {
+  return DEFAULT_BREAKPOINTS[breakpoint]
+}
+

package/src/context/NavigationContext.tsx

@@ -0,0 +1,32 @@
+import React, { createContext, useContext, useState } from 'react'
+
+interface NavigationContextType {
+  currentPage: 'demo' | 'test'
+  setCurrentPage: (page: 'demo' | 'test') => void
+}
+
+const NavigationContext = createContext<NavigationContextType>({
+  currentPage: 'test',
+  setCurrentPage: () => {}
+})
+
+export const useNavigation = () => useContext(NavigationContext)
+
+interface NavigationProviderProps {
+  children: React.ReactNode
+  defaultPage?: 'demo' | 'test'
+}
+
+export const NavigationProvider: React.FC<NavigationProviderProps> = ({ 
+  children, 
+  defaultPage = 'test' 
+}) => {
+  const [currentPage, setCurrentPage] = useState<'demo' | 'test'>(defaultPage)
+
+  return (
+    <NavigationContext.Provider value={{ currentPage, setCurrentPage }}>
+      {children}
+    </NavigationContext.Provider>
+  )
+}
+

package/src/context/ResponsiveLayoutContext.tsx

@@ -0,0 +1,37 @@
+import { createContext, useContext } from 'react'
+import type { ResponsiveState } from '../types/responsive'
+import type { LayoutConfig } from '../config/layout'
+
+export interface ResponsiveLayoutState {
+  // Estado del sistema responsivo
+  responsive: ResponsiveState
+  
+  // Estado del layout
+  layout: {
+    current: string
+    config: LayoutConfig
+    setLayout: (layout: string) => void
+  }
+  
+  // Utilidades de layout
+  layoutUtils: {
+    getContainerClass: () => string
+    getMainClass: () => string
+    hasSidebar: () => boolean
+    hasHeader: () => boolean
+    hasFooter: () => boolean
+    hasNavigation: () => boolean
+  }
+}
+
+const ResponsiveLayoutContext = createContext<ResponsiveLayoutState | undefined>(undefined)
+
+export const useResponsiveLayoutContext = () => {
+  const context = useContext(ResponsiveLayoutContext)
+  if (!context) {
+    throw new Error('useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider')
+  }
+  return context
+}
+
+export { ResponsiveLayoutContext }

package/src/context/SidebarContext.tsx

@@ -0,0 +1,26 @@
+import React, { createContext, useContext, useState } from 'react'
+
+interface SidebarContextType {
+  sidebarOpen: boolean
+  setSidebarOpen: (open: boolean) => void
+}
+
+const SidebarContext = createContext<SidebarContextType | undefined>(undefined)
+
+export const SidebarProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+
+  return (
+    <SidebarContext.Provider value={{ sidebarOpen, setSidebarOpen }}>
+      {children}
+    </SidebarContext.Provider>
+  )
+}
+
+export const useSidebar = () => {
+  const context = useContext(SidebarContext)
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider')
+  }
+  return context
+}

package/src/context/index.ts

@@ -0,0 +1,4 @@
+export { ResponsiveLayoutContext, useResponsiveLayoutContext } from './ResponsiveLayoutContext'
+export { SidebarProvider, useSidebar } from './SidebarContext'
+export { NavigationProvider, useNavigation } from './NavigationContext'
+

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useResponsive } from './useResponsive'
+export { useResponsiveLayout } from './useResponsiveLayout'
+export { useLayout } from './useLayout'
+

package/src/hooks/useLayout.ts

@@ -0,0 +1,27 @@
+import { useResponsiveLayout } from './index'
+
+export const useLayout = () => {
+  const responsiveLayout = useResponsiveLayout()
+  
+  return {
+    // Layout actual
+    current: responsiveLayout.layout.current,
+    config: responsiveLayout.layout.config,
+    setLayout: responsiveLayout.layout.setLayout,
+    
+    // Utilidades
+    ...responsiveLayout.layoutUtils,
+    
+    // Helpers específicos
+    isDefaultLayout: responsiveLayout.isDefaultLayout(),
+    isSidebarLayout: responsiveLayout.isSidebarLayout(),
+    isDashboardLayout: responsiveLayout.isDashboardLayout(),
+    isMinimalLayout: responsiveLayout.isMinimalLayout(),
+    
+    // Grid helpers
+    grid: responsiveLayout.grid,
+    
+    // Spacing helpers
+    spacing: responsiveLayout.spacing,
+  }
+}

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
+  }
+}