siesa-ui-kit 1.0.5 → 1.0.7

package/src/components/LoginView/README.md

@@ -1,396 +0,0 @@
-# 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

@@ -1,85 +0,0 @@
-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>
-);