sds-simple-webapp

Plantilla con scripts, estilos base y recursos visuales optimizados para el desarrollo e integración de aplicaciones web dentro del ecosistema Simple Erp.

📦 Instalación

Para instalar este paquete en tu proyecto web, ejecuta el siguiente comando desde tu terminal:

npm install sds-simple-webapp

🎨 Temas Disponibles y Uso

El paquete incluye dos variantes de diseño precompiladas y listas para producción (admin y nifty). Los archivos se encuentran distribuidos dentro de la carpeta dist/.

1. Tema Admin

Ideal para paneles de control tradicionales y vistas de administración internas.

• CSS: sds-simple-webapp/dist/admin/css/simple-webapp.min.css (Incluye variables, componentes vendor y estilos base unificados).
• JS: sds-simple-webapp/dist/admin/js/simple-webapp.min.js

2. Tema Nifty

Variante estilizada basada en Bootstrap con componentes interactivos y dinámicos para vistas avanzadas.

• CSS: sds-simple-webapp/dist/nifty/css/simple-webapp.min.css
• JS Principal: sds-simple-webapp/dist/nifty/js/simple-webapp.min.js
• JS Configuración: sds-simple-webapp/dist/nifty/js/nav-settings.min.js (Script complementario de navegación).

Ejemplo de Integración (HTML)

<!-- Cargar estilos del tema elegido (ej. Nifty) -->
<link rel="stylesheet" href="node_modules/sds-simple-webapp/dist/nifty/css/simple-webapp.min.css">

<!-- Cargar scripts al final del body -->
<script src="node_modules/sds-simple-webapp/dist/nifty/js/simple-webapp.min.js"></script>

🛠️ Guía de Desarrollo (Para Colaboradores)

Si vas a realizar modificaciones en los estilos, scripts o recursos del paquete, sigue estas instrucciones.

Comandos Disponibles

• Compilación Global (Todos los temas):

  npm run build

  Procesa, concatena, minifica y genera los mapas de origen (.map) de todos los temas registrados.

• Compilación por Tema:

  npm run admin-theme  # Compila únicamente el tema Admin
  npm run nifty-theme  # Compila únicamente el tema Nifty

• Desarrollo en Tiempo Real (Watch):

  npm run watch        # Escucha cambios en todos los temas simultáneamente
  npm run watch:admin  # Escucha cambios exclusivos de la carpeta src/admin
  npm run watch:nifty  # Escucha cambios exclusivos de la carpeta src/nifty

Cómo Agregar un Nuevo Tema en el Futuro

1. Crea la estructura de carpetas correspondiente en el código fuente: src/tu-nuevo-tema/css/ y src/tu-nuevo-tema/js/.
2. Abre el archivo de automatización build-theme.cjs.
3. Registra el nuevo tema en el objeto THEMES_CONFIG detallando el orden de los archivos CSS y JS que se deben concatenar.
4. (Opcional) Agrega los comandos de acceso rápido y watch correspondientes en la sección scripts de tu package.json.

📄 Licencia

Este proyecto está bajo la licencia ISC. Desarrollado por Adrian García.