responsive-system 1.1.5 → 1.2.1

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>,
+)