siesa-ui-kit 1.0.3 → 1.0.5

package/src/components/LoginView/README.md

@@ -0,0 +1,396 @@
+# LoginView
+
+Vista completa de inicio de sesión del sistema de diseño Siesa.
+
+## 📋 Descripción
+
+LoginView es una vista lista para usar que implementa una pantalla de autenticación completa con todos los elementos necesarios para login de usuarios: logo, campos de entrada (email y contraseña), validación de formulario, estados de carga y error, y enlaces secundarios.
+
+## ✨ Características
+
+- ✅ **Dark mode completo** - Adaptación automática a modo claro/oscuro
+- ✅ **Validación de formulario** - Validación de email con feedback visual
+- ✅ **Estados múltiples** - Normal, loading, error
+- ✅ **TypeScript strict** - Type safety completo
+- ✅ **Accesibilidad** - ARIA labels y manejo semántico de formulario
+- ✅ **Responsive design** - Mobile-first approach
+- ✅ **Toggle password** - Mostrar/ocultar contraseña
+- ✅ **Links secundarios** - Recuperar contraseña y registro
+
+## 🎨 Diseño
+
+Basado en las especificaciones de Figma:
+- **Node ID**: `2015-19772`
+- **Frame**: Desktop / Login (1440x1024)
+- **Archivo**: [Siesa UI Kit en Figma](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=2015-19772)
+
+## 📦 Composición
+
+Esta vista está compuesta por los siguientes elementos del sistema de diseño:
+
+### Componentes
+- **Inputs personalizados** con iconos integrados
+- **Botones** con variantes primary y ghost
+- **Iconos** (EnvelopeIcon, LockClosedIcon, EyeIcon)
+
+### Tokens del sistema
+- **Typography**:
+  - Heading/Tiny (20px, bold) para título
+  - Paragraph/Tiny (12px) para subtítulo
+  - Label/Small (14px, bold) para labels
+  - Paragraph/Base (16px) para inputs
+
+- **Colors**:
+  - `bg-primary` / `dark:bg-dark-bg-primary` (fondos)
+  - `text-content-primary` / `dark:text-dark-content-primary` (textos)
+  - `border-border-primary` / `dark:border-dark-border-primary` (bordes)
+  - `bg-[#dbeefe]` / `dark:bg-gray-900` (fondo decorativo)
+
+- **Spacing**:
+  - Padding interno card: `64px` (p-16)
+  - Gap entre elementos: `16px` (gap-4)
+
+- **Shadows**:
+  - Card: `shadow-[0px_4px_6px_-4px_rgba(0,0,0,0.1),0px_10px_15px_-3px_rgba(0,0,0,0.1)]`
+
+- **Border radius**:
+  - Card: `16px` (rounded-2xl)
+  - Inputs/Botones: `8px` (rounded-lg) / `6px` (rounded-md)
+
+## 🚀 Uso
+
+### Importación
+
+```tsx
+import { LoginView } from '@/components/LoginView';
+```
+
+### Ejemplo básico
+
+```tsx
+import { LoginView } from '@/components/LoginView';
+
+function App() {
+  const handleLogin = async (email: string, password: string) => {
+    try {
+      const response = await fetch('/api/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+
+      if (response.ok) {
+        // Redirigir al dashboard
+        window.location.href = '/dashboard';
+      } else {
+        // Mostrar error
+        console.error('Login failed');
+      }
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+
+  const handleForgotPassword = () => {
+    window.location.href = '/forgot-password';
+  };
+
+  const handleSignUp = () => {
+    window.location.href = '/register';
+  };
+
+  return (
+    <LoginView
+      onSubmit={handleLogin}
+      onForgotPassword={handleForgotPassword}
+      onSignUp={handleSignUp}
+    />
+  );
+}
+```
+
+### Con estados de carga y error
+
+```tsx
+import { useState } from 'react';
+import { LoginView } from '@/components/LoginView';
+
+function LoginPage() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleLogin = async (email: string, password: string) => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        // Guardar token y redirigir
+        localStorage.setItem('token', data.token);
+        window.location.href = '/dashboard';
+      } else {
+        setError(data.message || 'Credenciales incorrectas');
+      }
+    } catch (err) {
+      setError('Error de conexión. Intenta nuevamente.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <LoginView
+      onSubmit={handleLogin}
+      onForgotPassword={() => window.location.href = '/forgot-password'}
+      onSignUp={() => window.location.href = '/register'}
+      isLoading={isLoading}
+      errorMessage={error || undefined}
+    />
+  );
+}
+```
+
+### Sin fondo decorativo
+
+```tsx
+<LoginView
+  onSubmit={handleLogin}
+  onForgotPassword={handleForgotPassword}
+  onSignUp={handleSignUp}
+  showBackground={false}
+/>
+```
+
+## 🎯 Props
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `onSubmit` | `(email: string, password: string) => void` | - | **Opcional**. Handler cuando se envía el formulario |
+| `onForgotPassword` | `() => void` | - | **Opcional**. Handler cuando se hace clic en "Olvidé mi Contraseña" |
+| `onSignUp` | `() => void` | - | **Opcional**. Handler cuando se hace clic en "¿No tienes una cuenta?" |
+| `isLoading` | `boolean` | `false` | Si el formulario está en estado de carga |
+| `errorMessage` | `string` | - | **Opcional**. Mensaje de error general a mostrar |
+| `showBackground` | `boolean` | `true` | Si se muestra el fondo decorativo con imagen |
+| `className` | `string` | `''` | Clases CSS adicionales para el contenedor principal |
+
+## 📱 Responsive (Pixel-Perfect vs Figma)
+
+La vista implementa responsive design según las especificaciones de Figma con comportamiento diferenciado:
+
+### Mobile (< 768px)
+- ❌ **SIN card/contenedor** - Contenido directamente sobre fondo
+- ❌ **SIN fondo decorativo** - Solo fondo blanco/oscuro
+- ❌ **SIN sombras ni border-radius**
+- ✅ **Padding lateral**: `64px` (px-16)
+- ✅ **Width**: `100%` (ocupa todo el ancho disponible)
+- ✅ Layout: Contenido centrado verticalmente
+
+### Desktop (≥ 768px)
+- ✅ **CON card/contenedor** - Card de `400px` de ancho
+- ✅ **CON fondo decorativo** - Imagen + color de fondo
+- ✅ **CON sombras y border-radius** - `16px` (rounded-2xl)
+- ✅ **Padding**: `64px` (p-16) en todas direcciones
+- ✅ Layout: Card centrado en viewport
+
+**Breakpoint**: `md` (768px) - Tailwind CSS
+
+Esta implementación asegura que:
+- En mobile la vista ocupe toda la pantalla sin distracciones visuales
+- En desktop tenga el look & feel de una modal/card flotante
+- Sea pixel-perfect con ambos diseños de Figma
+
+## 🎨 Dark Mode
+
+La vista tiene soporte completo para dark mode según especificaciones de Figma:
+
+### Light Mode
+- **Fondo**: `#dbeefe` (azul claro) con imagen al 10% de opacidad
+- **Card**: `#ffffff` (blanco) con sombra suave
+- **Textos**: `#18181b` (negro zinc)
+- **Inputs**: Fondo blanco con borde `#e4e4e7` (gris claro)
+- **Botón Primary**: `#0e79fd` (azul) con texto blanco `#eff8ff`
+- **Links**: `#0e79fd` (azul)
+
+### Dark Mode (Pixel-Perfect vs Figma)
+- **Fondo**: `#112d57` (azul oscuro marino) con imagen al 10% de opacidad
+- **Card**: `#3f3f46` (zinc-700) con borde `#71717a` y sombra intensa
+- **Textos**: `#f4f4f5` (zinc-100, casi blanco)
+- **Inputs**:
+  - Fondo: `#3f3f46` (mismo que card)
+  - Borde: `#71717a` (zinc-500)
+  - Placeholder: `#a1a1aa` (zinc-400)
+- **Botón Primary**:
+  - Fondo: `#bfe2fe` (azul claro)
+  - Texto: `#0e79fd` (azul)
+  - Borde: `#93d1fd` (azul claro)
+- **Links**: `#93d1fd` (azul claro)
+
+## ✅ Validación
+
+La vista incluye validación básica de email:
+
+1. **Validación de formato**: Verifica que el email tenga formato válido (`email@domain.com`)
+2. **Feedback visual**: Borde rojo y mensaje de error cuando el formato es inválido
+3. **Validación en tiempo real**: El error desaparece cuando el usuario corrige el input
+
+**Nota**: La vista solo valida el formato. La autenticación real debe implementarse en el backend.
+
+## 🔒 Seguridad
+
+### Mejores prácticas implementadas
+
+✅ **Tipo de input correcto**:
+- Email: `type="email"` con autoComplete="email"
+- Password: `type="password"` con autoComplete="current-password"
+
+✅ **No guarda credenciales**: La vista no almacena email ni contraseña
+
+✅ **Validación client-side**: Solo para UX, no reemplaza validación server-side
+
+### Recomendaciones adicionales
+
+⚠️ **Implementa en el backend**:
+- Rate limiting para prevenir ataques de fuerza bruta
+- Hashing seguro de contraseñas (bcrypt, argon2)
+- Tokens de sesión seguros (JWT con expiración)
+- HTTPS para todas las comunicaciones
+- Protección CSRF
+- Logs de intentos fallidos
+
+⚠️ **No confíes solo en validación client-side**: Siempre valida en el servidor
+
+## 🎭 Estados
+
+La vista maneja los siguientes estados:
+
+### 1. Normal
+Estado inicial con formulario listo para entrada de datos.
+
+### 2. Loading
+- Formulario deshabilitado
+- Botón muestra "Iniciando sesión..."
+- Previene múltiples envíos
+
+### 3. Error
+- Muestra banner de error arriba del formulario
+- Color rojo con borde y fondo de error
+- Mensaje personalizable vía prop `errorMessage`
+
+### 4. Validación de email
+- Borde rojo en input de email
+- Mensaje de error debajo del input
+- Se activa al enviar formulario con email inválido
+
+## 📖 Storybook
+
+La vista incluye las siguientes stories en Storybook:
+
+1. **Desktop**: Vista completa en pantalla de escritorio
+2. **Loading**: Estado de carga durante autenticación
+3. **WithError**: Con mensaje de error visible
+4. **WithoutBackground**: Sin fondo decorativo
+5. **Mobile**: Vista responsive en viewport móvil
+
+Para ver las stories:
+
+```bash
+npm run storybook
+```
+
+Navega a: **Siesa UI Kit → LoginView**
+
+## 🏗️ Estructura de archivos
+
+```
+src/components/LoginView/
+├── LoginView.tsx           # Componente principal (393 líneas)
+├── LoginView.types.ts      # TypeScript types
+├── LoginView.stories.tsx   # Storybook stories (5 stories)
+├── icons.tsx               # Iconos SVG (EnvelopeIcon, LockClosedIcon, EyeIcon)
+├── index.ts                # Exports públicos
+└── README.md               # Este archivo
+```
+
+## 🔗 Archivos relacionados
+
+- **Sistema de colores**: `/docs/colors.md`
+- **Tipografía**: `/docs/typography.md`
+- **Espaciado**: `/docs/spacing.md`
+- **Sombras**: `/docs/shadows.md`
+- **Configuración Tailwind**: `/tailwind.config.js`
+
+## 🐛 Troubleshooting
+
+### El logo no se muestra
+Verifica que el archivo `/public/.Siesa Logo.png` existe. Si usas Vite, asegúrate de que la ruta sea correcta.
+
+### La imagen de fondo no aparece
+Verifica que el archivo `/public/bg_siesa.jpg` existe. Puedes cambiar el path en `LoginView.tsx:97` o deshabilitar el fondo con `showBackground={false}`.
+
+### Dark mode no funciona
+Asegúrate de que:
+1. Storybook tiene el addon de dark mode instalado
+2. Tu aplicación tiene el toggle de dark mode que agrega/remueve la clase `dark` del HTML
+
+### Errores de TypeScript
+Ejecuta `npm run build` para verificar errores de tipos. Todos los props están correctamente tipados en `LoginView.types.ts`.
+
+## 🎓 Mejores prácticas
+
+### ✅ DO (Hacer)
+- Implementa autenticación segura en el backend
+- Usa HTTPS en producción
+- Muestra mensajes de error claros y específicos
+- Implementa rate limiting
+- Usa estados de loading durante peticiones async
+- Valida en cliente Y servidor
+- Implementa manejo de errores robusto
+- Usa tokens seguros para sesiones
+
+### ❌ DON'T (No hacer)
+- No guardes contraseñas en texto plano
+- No confíes solo en validación client-side
+- No muestres mensajes de error que revelen información sensible
+- No almacenes credenciales en localStorage sin encriptar
+- No uses HTTP en producción
+- No implementes tu propio hashing de contraseñas
+
+## 📝 Changelog
+
+### v1.1.0 (2025-11-12)
+- ✅ **Responsive design pixel-perfect** según Figma
+  - Mobile (< 768px): Sin card, sin fondo decorativo, padding 64px
+  - Desktop (≥ 768px): Con card 400px, fondo decorativo, sombras
+- ✅ **Dark mode corregido** según diseño de Figma
+  - Fondo: `#112d57` (azul marino)
+  - Botón Primary: `#bfe2fe` con texto `#0e79fd`
+  - Links: `#93d1fd` (azul claro)
+- ✅ Logo actualizado a `.Siesa Logo.png`
+
+### v1.0.0 (2025-11-12)
+- ✅ Implementación inicial basada en diseño de Figma
+- ✅ Dark mode completo
+- ✅ Validación de email
+- ✅ Estados: normal, loading, error
+- ✅ Toggle mostrar/ocultar contraseña
+- ✅ Responsive design
+- ✅ 5 stories en Storybook
+- ✅ Documentación completa
+
+## 📄 Licencia
+
+Este componente es parte del Siesa UI Kit.
+
+---
+
+**Mantenido por**: Equipo Siesa UI Kit
+**Última actualización**: 2025-11-12
+**Versión**: 1.0.0

package/src/components/LoginView/icons.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+
+/**
+ * Icono de sobre (envelope) para el input de email
+ */
+export const EnvelopeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
+    <path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
+  </svg>
+);
+
+/**
+ * Icono de candado cerrado (lock) para el input de contraseña
+ */
+export const LockClosedIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7A1.5 1.5 0 0 0 3 8.5v5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 11.5 7V4.5A3.5 3.5 0 0 0 8 1Zm2 6V4.5a2 2 0 1 0-4 0V7h4Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Icono de ojo (eye) para mostrar/ocultar contraseña
+ */
+export const EyeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+    <path
+      fillRule="evenodd"
+      d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .56A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Logo de Siesa
+ */
+export const SiesaLogo: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="200"
+    height="50"
+    viewBox="0 0 200 50"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    {/* Símbolo de Siesa (cuadrados azules) */}
+    <rect x="0" y="0" width="15" height="20" fill="#0e79fd" />
+    <rect x="0" y="30" width="10" height="20" fill="#0e79fd" />
+    <rect x="20" y="0" width="15" height="20" fill="#0e79fd" />
+    <rect x="30" y="30" width="10" height="20" fill="#0e79fd" />
+
+    {/* Texto "Siesa" */}
+    <text
+      x="68"
+      y="35"
+      fontFamily="SiesaBT, sans-serif"
+      fontSize="32"
+      fontWeight="400"
+      fill="#0e79fd"
+    >
+      Siesa
+    </text>
+  </svg>
+);

package/{dist/components/LoginView/index.d.ts → src/components/LoginView/index.ts}

@@ -1,4 +1,3 @@
-export { LoginView } from './LoginView';
-export type { LoginViewProps } from './LoginView.types';
-export { EnvelopeIcon, LockClosedIcon, EyeIcon, SiesaLogo } from './icons';
-//# sourceMappingURL=index.d.ts.map
+export { LoginView } from './LoginView';
+export type { LoginViewProps } from './LoginView.types';
+export { EnvelopeIcon, LockClosedIcon, EyeIcon, SiesaLogo } from './icons';