jgest-react-vite 1.1.2

package/README.md

@@ -0,0 +1,116 @@
+# React + TypeScript + Vite Template (JGest)
+
+Este es un template personalizado de React optimizado para el desarrollo rápido con Material UI, gestión de estado y servicios de API preconfigurados.
+
+## 🚀 Configuración del Proyecto
+
+### 1. Configurar la API
+Para que el proyecto se comunique con tu backend, debes configurar la URL base en el archivo `.env`.
+
+Crea o edita el archivo `.env` en la raíz del proyecto:
+```env
+VITE_APP_API_URL='https://tu-api.com/api'
+```
+
+### 2. Instalación y Ejecución
+```bash
+npm install
+npm run dev
+```
+
+---
+
+## 🛠️ Servicios y Utilidades
+
+### `ApiService`
+Ubicación: `src/services/ApiService.ts`
+
+Un servicio basado en **Axios** para realizar peticiones HTTP de forma sencilla. Ya maneja la captura de errores y los devuelve en un formato consistente.
+
+**Uso:**
+```typescript
+import { api } from './services/ApiService';
+
+// Ejemplo GET
+const data = await api.get<MiTipo>('/endpoint');
+
+// Ejemplo POST
+const result = await api.post('/endpoint', { nombre: 'Ejemplo' });
+```
+
+### `useNotification` (Hook)
+Ubicación: `src/hooks/shared/useNotification.ts`
+
+Permite mostrar alertas (notificaciones) en la interfaz de usuario. Debe usarse dentro del `NotificationProvider`.
+
+**Uso:**
+```typescript
+import { useNotification } from './hooks/shared/useNotification';
+
+const { showNotification } = useNotification();
+
+// Mostrar mensaje de éxito
+showNotification('Operación exitosa', 'success');
+
+// Manejar errores de la API automáticamente
+try {
+    await api.post(...);
+} catch (error) {
+    showNotification(error); // Muestra el error formateado por el ApiService
+}
+```
+
+### `useSetTimezone` (Hook)
+Ubicación: `src/hooks/shared/useSetTimezone.ts`
+
+Utilidad para formatear fechas recibidas de la API a la zona horaria local (`Europe/Madrid`).
+
+**Uso:**
+```typescript
+import useSetTimezone from './hooks/shared/useSetTimezone';
+
+const { setTimezone } = useSetTimezone();
+const fechaFormateada = setTimezone('2024-03-12T10:00:00Z');
+// Salida: "12/3/2024, 11:00:00" (ajustado a Madrid)
+```
+
+---
+
+## 🧩 Componentes Destacados
+
+### `ThemeToggle`
+Ubicación: `src/components/main/ThemeSwitch.tsx`
+
+Un componente de interruptor (Switch) estilizado para alternar entre el modo claro y oscuro. Utiliza un store global para persistir la preferencia.
+
+**Uso:**
+Simplemente importa y coloca el componente en tu barra de navegación o sidebar:
+```tsx
+import ThemeToggle from './components/main/ThemeSwitch';
+
+<ThemeToggle />
+```
+
+### `MyModal`
+Ubicación: `src/components/shared/MyModal.tsx`
+
+Un componente base para crear modales consistentes, con fondo desenfocado y scroll interno.
+
+**Propiedades:**
+- `children`: Contenido del modal.
+- `minWidth`: Ancho mínimo (por defecto 800px).
+- `onClose`: Función que se ejecuta al cerrar o hacer clic fuera.
+
+### `MyPopover`
+Ubicación: `src/components/shared/MyPopover.tsx`
+
+Componente para mostrar menús contextuales o popovers flexibles con posicionamiento automático.
+
+---
+
+## 🏗️ Estructura de Carpetas
+- `src/components`: Componentes visuales (shared/main).
+- `src/hooks`: Lógica reutilizable y hooks personalizados.
+- `src/providers`: Proveedores de contexto (Notificaciones, Auth, etc.).
+- `src/services`: Llamadas a APIs y servicios externos.
+- `src/store`: Gestión de estado global (Zustand/Context).

package/index.js

@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const cwd = process.cwd();
+const targetDir = process.argv[2] || "mi-app";
+
+// Ruta correcta a la carpeta template
+const templateDir = path.join(__dirname, "template");
+
+// Copiar plantilla
+fs.cpSync(templateDir, path.join(cwd, targetDir), { recursive: true });
+
+console.log(`\nProyecto creado en ./${targetDir}`);
+console.log("Ejecuta:");
+console.log(`  cd ${targetDir}`);
+console.log("  pnpm install\n");

package/package.json

@@ -0,0 +1,17 @@
+
+{
+  "name": "jgest-react-vite",
+  "version": "1.1.2",
+  "description": "Una template de React con Vite",
+  "main": "index.js",
+  "keywords": [
+    "react",
+    "vite",
+    "template"
+  ],
+  "author": "Jaime Gómez-Estrada",
+  "license": "MIT",
+  "files": [
+    "template"
+  ]
+}

package/template/.env

@@ -0,0 +1 @@
+VITE_APP_API_URL=''

package/template/README.md

@@ -0,0 +1,116 @@
+# React + TypeScript + Vite Template (JGest)
+
+Este es un template personalizado de React optimizado para el desarrollo rápido con Material UI, gestión de estado y servicios de API preconfigurados.
+
+## 🚀 Configuración del Proyecto
+
+### 1. Configurar la API
+Para que el proyecto se comunique con tu backend, debes configurar la URL base en el archivo `.env`.
+
+Crea o edita el archivo `.env` en la raíz del proyecto:
+```env
+VITE_APP_API_URL='https://tu-api.com/api'
+```
+
+### 2. Instalación y Ejecución
+```bash
+npm install
+npm run dev
+```
+
+---
+
+## 🛠️ Servicios y Utilidades
+
+### `ApiService`
+Ubicación: `src/services/ApiService.ts`
+
+Un servicio basado en **Axios** para realizar peticiones HTTP de forma sencilla. Ya maneja la captura de errores y los devuelve en un formato consistente.
+
+**Uso:**
+```typescript
+import { api } from './services/ApiService';
+
+// Ejemplo GET
+const data = await api.get<MiTipo>('/endpoint');
+
+// Ejemplo POST
+const result = await api.post('/endpoint', { nombre: 'Ejemplo' });
+```
+
+### `useNotification` (Hook)
+Ubicación: `src/hooks/shared/useNotification.ts`
+
+Permite mostrar alertas (notificaciones) en la interfaz de usuario. Debe usarse dentro del `NotificationProvider`.
+
+**Uso:**
+```typescript
+import { useNotification } from './hooks/shared/useNotification';
+
+const { showNotification } = useNotification();
+
+// Mostrar mensaje de éxito
+showNotification('Operación exitosa', 'success');
+
+// Manejar errores de la API automáticamente
+try {
+    await api.post(...);
+} catch (error) {
+    showNotification(error); // Muestra el error formateado por el ApiService
+}
+```
+
+### `useSetTimezone` (Hook)
+Ubicación: `src/hooks/shared/useSetTimezone.ts`
+
+Utilidad para formatear fechas recibidas de la API a la zona horaria local (`Europe/Madrid`).
+
+**Uso:**
+```typescript
+import useSetTimezone from './hooks/shared/useSetTimezone';
+
+const { setTimezone } = useSetTimezone();
+const fechaFormateada = setTimezone('2024-03-12T10:00:00Z');
+// Salida: "12/3/2024, 11:00:00" (ajustado a Madrid)
+```
+
+---
+
+## 🧩 Componentes Destacados
+
+### `ThemeToggle`
+Ubicación: `src/components/main/ThemeSwitch.tsx`
+
+Un componente de interruptor (Switch) estilizado para alternar entre el modo claro y oscuro. Utiliza un store global para persistir la preferencia.
+
+**Uso:**
+Simplemente importa y coloca el componente en tu barra de navegación o sidebar:
+```tsx
+import ThemeToggle from './components/main/ThemeSwitch';
+
+<ThemeToggle />
+```
+
+### `MyModal`
+Ubicación: `src/components/shared/MyModal.tsx`
+
+Un componente base para crear modales consistentes, con fondo desenfocado y scroll interno.
+
+**Propiedades:**
+- `children`: Contenido del modal.
+- `minWidth`: Ancho mínimo (por defecto 800px).
+- `onClose`: Función que se ejecuta al cerrar o hacer clic fuera.
+
+### `MyPopover`
+Ubicación: `src/components/shared/MyPopover.tsx`
+
+Componente para mostrar menús contextuales o popovers flexibles con posicionamiento automático.
+
+---
+
+## 🏗️ Estructura de Carpetas
+- `src/components`: Componentes visuales (shared/main).
+- `src/hooks`: Lógica reutilizable y hooks personalizados.
+- `src/providers`: Proveedores de contexto (Notificaciones, Auth, etc.).
+- `src/services`: Llamadas a APIs y servicios externos.
+- `src/store`: Gestión de estado global (Zustand/Context).

package/template/eslint.config.js

@@ -0,0 +1,26 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    // rules: {
+    //   "@typescript-eslint/no-explicit-any": ["off"]
+    // },
+  },
+])

package/template/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JGEST-Template</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "prueba-lis-remake",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^7.3.9",
+    "@tailwindcss/vite": "^4.2.1",
+    "@tanstack/react-query": "^5.90.21",
+    "axios": "^1.13.6",
+    "formik": "^2.4.9",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.13.1",
+    "tailwindcss": "^4.2.1",
+    "zustand": "^5.0.11"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react-swc": "^4.2.3",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1"
+  }
+}