roi-theme/_planificacion/01-design-system/01-ESPECIFICACIONES-DEL-SISTEMA.md

⚙️ ESPECIFICACIONES DEL SISTEMA

Requerimientos Generales

• Persistencia de Datos: Archivos JSON (NO localStorage, NO base de datos)
• Vista Previa: TODAS las pestañas DEBEN tener vista previa en tiempo real
• Panel Principal: Existe un panel de administración que lista todas las pestañas disponibles
• Arquitectura: Componentes independientes pero con diseño consistente
• Navegación: Sistema de pestañas/tabs para alternar entre componentes

---

Stack Tecnológico

CDN y Librerías

<!-- Bootstrap 5.3.2 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/Css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap Icons 1.11.3 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/Font/bootstrap-icons.min.css">

<!-- Google Fonts: Poppins -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- CSS del proyecto -->
<link rel="stylesheet" href="../../Css/style.css">

JavaScript

<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/Js/bootstrap.bundle.min.js"></script>

---

Estructura de Archivos

Arquitectura modular: Cada componente tiene sus propios archivos separados (PHP, CSS, JS).

wp-content/themes/apus-theme/
└── admin-panel/
    └── Admin/
        ├── Components/
        │   ├── component-[name].php
        │   ├── component-[name]-2.php
        │   └── component-[name]-3.php
        ├── Assets/
        │   ├── Css/
        │   │   ├── component-[name].css
        │   │   ├── component-[name]-2.css
        │   │   └── component-[name]-3.css
        │   └── Js/
        │       ├── component-[name].js
        │       ├── component-[name]-2.js
        │       └── component-[name]-3.js
        └── Config/
            ├── [name]-config.json
            ├── [name]-2-config.json
            └── [name]-3-config.json

Ejemplo con un componente específico:

admin-panel/Admin/
├── Components/
│   └── component-notification-bar.php
├── Assets/
│   ├── Css/
│   │   └── component-notification-bar.css
│   └── Js/
│       └── component-notification-bar.js
└── Config/
    └── notification-bar-config.json

---

Convenciones de Nombrado

Archivos PHP (Componentes)

• Patrón: component-[nombre].php
• Ubicación: admin-panel/Admin/Components/
• Ejemplo: component-notification-bar.php, component-site-footer.php

Archivos CSS

• Patrón: component-[nombre].css
• Ubicación: admin-panel/Admin/Assets/Css/
• Mismo nombre base que el componente PHP correspondiente

Archivos JavaScript

• Patrón: component-[nombre].js
• Ubicación: admin-panel/Admin/Assets/Js/
• Mismo nombre base que el componente PHP correspondiente

Archivos de Configuración JSON

• Patrón: [nombre]-config.json
• Ubicación: admin-panel/Admin/Config/
• Ejemplo: notification-bar-config.json

---

Dependencias del Proyecto

Dependencia	Versión	Propósito
Bootstrap	5.3.2	Framework CSS y componentes UI
Bootstrap Icons	1.11.3	Sistema de iconos
Poppins Font	Google Fonts	Tipografía principal
style.css	Custom	Estilos específicos del proyecto

---

Requerimientos del Navegador

• Navegadores modernos: Chrome, Firefox, Safari, Edge (últimas 2 versiones)
• JavaScript: Habilitado
• CSS Grid: Soporte requerido
• Flexbox: Soporte requerido
• CSS Custom Properties: Soporte requerido

---

Estructura de un Componente

Cada componente debe tener:

1. ✅ Archivo PHP (component-[name].php)

   • Formulario de configuración
   • Vista previa en tiempo real
   • Integración con WordPress

2. ✅ Archivo CSS (component-[name].css)

   • Estilos específicos del componente admin
   • Estilos para vista previa

3. ✅ Archivo JavaScript (component-[name].js)

   • Funcionalidad del componente
   • Event listeners
   • Funciones de actualización de preview
   • Persistencia de configuración

4. ✅ Configuración JSON ([name]-config.json)

   • Valores por defecto
   • Metadata del componente
   • Timestamp de última modificación

---

Reglas de Integración

❌ NO Permitido

• localStorage para persistencia (usar config.json)
• Base de datos directa
• Inline styles que sobreescriban CSS del front-end
• Modificar HTML del front-end desde admin

✅ Permitido

• Archivos JSON para configuración
• Inline styles SOLO en el admin panel (si no afecta preview)
• CSS con !important SOLO si es necesario para override de WordPress

---

Volver al Índice

← Volver al README