siesa-ui-kit 1.0.1 → 1.0.2

package/src/views/SignUpView/SignUpView.tsx

@@ -0,0 +1,503 @@
+import React, { useState } from 'react';
+import type { FormEvent } from 'react';
+import type { SignUpViewProps } from './SignUpView.types';
+import { UserCircleIcon, EnvelopeIcon, LockClosedIcon, EyeIcon } from './icons';
+
+/**
+ * SignUpView - Vista de registro del sistema Siesa
+ *
+ * Vista completa de registro con formulario que incluye:
+ * - Logo de Siesa
+ * - Campos de nombre, email y contraseña
+ * - Botón de registro
+ * - Link para iniciar sesión
+ * - Texto de términos y condiciones
+ * - Fondo decorativo opcional
+ *
+ * Mejores prácticas implementadas:
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Tokens de color consistentes con la documentación
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con ARIA labels y manejo de formulario semántico
+ * - Validación de email básica
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras
+ *
+ * @example
+ * ```tsx
+ * <SignUpView
+ *   onSubmit={(name, email, password) => console.log('Sign up', name, email, password)}
+ *   onSignIn={() => console.log('Go to sign in')}
+ *   onTermsClick={() => console.log('View terms')}
+ *   onPrivacyClick={() => console.log('View privacy')}
+ * />
+ * ```
+ */
+export const SignUpView: React.FC<SignUpViewProps> = ({
+  onSubmit,
+  onSignIn,
+  onTermsClick,
+  onPrivacyClick,
+  isLoading = false,
+  errorMessage,
+  className = '',
+  showBackground = true,
+  variant = 'responsive',
+}) => {
+  // ===== ESTADO LOCAL =====
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [emailError, setEmailError] = useState('');
+
+  // ===== HANDLERS =====
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    // Validación básica de email
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+      setEmailError('Por favor ingresa un email válido');
+      return;
+    }
+
+    setEmailError('');
+    onSubmit?.(name, email, password);
+  };
+
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+    if (emailError) setEmailError('');
+  };
+
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <div
+      className={[
+        'relative',
+        'min-h-screen',
+        'w-full',
+        'flex',
+        'flex-col',
+        'items-center',
+        'justify-center',
+        'box-border',
+        // Mobile: sin padding en el wrapper
+        'p-0',
+        // Desktop: padding para centrar el card
+        'md:p-4',
+        className,
+      ].join(' ')}
+    >
+      {/* ===== FONDO DECORATIVO ===== */}
+      {showBackground && (
+        <div className="absolute inset-0 pointer-events-none" aria-hidden="true">
+          <div className="absolute inset-0 bg-primary-custom-100 dark:bg-[#112d57]" />
+          <img
+            src="/bg_siesa.png"
+            alt=""
+            className="absolute inset-0 w-full h-full object-cover opacity-10"
+          />
+        </div>
+      )}
+
+      {/* ===== CONTENEDOR PRINCIPAL ===== */}
+      <div
+        className={[
+          // Clases base comunes
+          'relative',
+          'box-border',
+          'flex',
+          'flex-col',
+          'items-center',
+          'justify-center',
+          'gap-4',
+          'p-16',
+          'shrink-0',
+          'bg-bg-primary',
+          'dark:bg-dark-bg-primary',
+
+          // Clases específicas según variant
+          ...(variant === 'mobile' ? [
+            // Forzar mobile: sin efectos de card
+            'w-full',
+            'h-full',
+            'shadow-none',
+            'rounded-none',
+            'border-0',
+          ] : variant === 'desktop' ? [
+            // Forzar desktop: con efectos de card
+            'w-[400px]',
+            'h-auto',
+            'rounded-2xl',
+            'shadow-[0px_4px_6px_-4px_rgba(0,0,0,0.1),0px_10px_15px_-3px_rgba(0,0,0,0.1)]',
+            'dark:shadow-2xl',
+            'overflow-clip',
+            'border',
+            'border-transparent',
+            'dark:border-dark-border-primary',
+          ] : [
+            // Responsive: cambia según viewport
+            'w-full',
+            'h-full',
+            'shadow-none',
+            'rounded-none',
+            'border-0',
+            'md:w-[400px]',
+            'md:h-auto',
+            'md:rounded-2xl',
+            'md:shadow-[0px_4px_6px_-4px_rgba(0,0,0,0.1),0px_10px_15px_-3px_rgba(0,0,0,0.1)]',
+            'md:dark:shadow-2xl',
+            'md:overflow-clip',
+            'md:border',
+            'md:border-transparent',
+            'md:dark:border-dark-border-primary',
+          ]),
+        ].join(' ')}
+      >
+        {/* ===== LOGO ===== */}
+        <div className="w-full flex flex-col items-center pb-4">
+          <img
+            src="/.Siesa Logo.png"
+            alt="Siesa"
+            className="w-[200px] h-[50px] object-contain"
+          />
+        </div>
+
+        {/* ===== HEADING ===== */}
+        <div className="w-full text-center">
+          <h1
+            className={[
+              'text-[20px]',
+              'leading-[28px]',
+              'font-bold',
+              'tracking-[-0.5px]',
+              'text-content-primary',
+              'dark:text-dark-content-primary',
+            ].join(' ')}
+          >
+            Crear Cuenta
+          </h1>
+          <p
+            className={[
+              'text-[12px]',
+              'leading-[16px]',
+              'font-normal',
+              'text-content-primary',
+              'dark:text-dark-content-primary',
+            ].join(' ')}
+          >
+            Ingresa todos los datos para crear tu cuenta.
+          </p>
+        </div>
+
+        {/* ===== MENSAJE DE ERROR GENERAL ===== */}
+        {errorMessage && (
+          <div
+            className={[
+              'w-full',
+              'p-3',
+              'bg-error-bg',
+              'dark:bg-error-bg',
+              'border',
+              'border-error-border',
+              'dark:border-error-border',
+              'rounded-md',
+              'text-error-content',
+              'dark:text-error-content',
+              'text-sm',
+            ].join(' ')}
+            role="alert"
+          >
+            {errorMessage}
+          </div>
+        )}
+
+        {/* ===== FORMULARIO ===== */}
+        <form onSubmit={handleSubmit} className="w-full flex flex-col gap-2">
+          {/* Name Input */}
+          <div className="flex flex-col gap-2 w-full">
+            <label
+              htmlFor="name-input"
+              className="font-bold text-sm leading-5 text-content-primary dark:text-dark-content-primary"
+            >
+              Nombre <span className="text-red-600">*</span>
+            </label>
+            <div className="relative">
+              <div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none opacity-50">
+                <UserCircleIcon className="w-4 h-4 text-content-tertiary dark:text-dark-content-tertiary" />
+              </div>
+              <input
+                id="name-input"
+                type="text"
+                placeholder="Juan Pérez"
+                value={name}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
+                disabled={isLoading}
+                required
+                autoComplete="name"
+                className={[
+                  'w-full',
+                  'pl-9',
+                  'pr-3',
+                  'py-1.5',
+                  'text-base',
+                  'leading-6',
+                  'bg-bg-primary',
+                  'dark:bg-dark-bg-primary',
+                  'border',
+                  'border-[#e4e4e7]',
+                  'dark:border-dark-border-primary',
+                  'rounded-lg',
+                  'placeholder:text-content-tertiary',
+                  'dark:placeholder:text-dark-content-tertiary',
+                  'text-content-primary',
+                  'dark:text-dark-content-primary',
+                  'focus:outline-none',
+                  'focus:border-primary-custom-600',
+                  'dark:focus:border-dark-border-custom',
+                  'focus:ring-2',
+                  'focus:ring-primary-custom-400',
+                  'dark:focus:ring-dark-border-custom',
+                  'transition-all',
+                  'duration-150',
+                ].join(' ')}
+              />
+            </div>
+          </div>
+
+          {/* Email Input */}
+          <div className="flex flex-col gap-2 w-full">
+            <label
+              htmlFor="email-input"
+              className="font-bold text-sm leading-5 text-content-primary dark:text-dark-content-primary"
+            >
+              Correo Electrónico <span className="text-red-600">*</span>
+            </label>
+            <div className="relative">
+              <div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none opacity-50">
+                <EnvelopeIcon className="w-4 h-4 text-content-tertiary dark:text-dark-content-tertiary" />
+              </div>
+              <input
+                id="email-input"
+                type="email"
+                placeholder="ejemplo@miempresa.com"
+                value={email}
+                onChange={handleEmailChange}
+                disabled={isLoading}
+                required
+                autoComplete="email"
+                className={[
+                  'w-full',
+                  'pl-9',
+                  'pr-3',
+                  'py-1.5',
+                  'text-base',
+                  'leading-6',
+                  'bg-bg-primary',
+                  'dark:bg-dark-bg-primary',
+                  'border',
+                  'border-[#e4e4e7]',
+                  'dark:border-dark-border-primary',
+                  'rounded-lg',
+                  'placeholder:text-content-tertiary',
+                  'dark:placeholder:text-dark-content-tertiary',
+                  'text-content-primary',
+                  'dark:text-dark-content-primary',
+                  'focus:outline-none',
+                  'focus:border-primary-custom-600',
+                  'dark:focus:border-dark-border-custom',
+                  'focus:ring-2',
+                  'focus:ring-primary-custom-400',
+                  'dark:focus:ring-dark-border-custom',
+                  'transition-all',
+                  'duration-150',
+                  emailError ? '!border-error-border' : '',
+                ].filter(Boolean).join(' ')}
+              />
+            </div>
+            {emailError && (
+              <p className="text-xs text-error-content dark:text-error-content">
+                {emailError}
+              </p>
+            )}
+          </div>
+
+          {/* Password Input */}
+          <div className="flex flex-col gap-2 w-full">
+            <label
+              htmlFor="password-input"
+              className="font-bold text-sm leading-5 text-content-primary dark:text-dark-content-primary"
+            >
+              Contraseña <span className="text-red-600">*</span>
+            </label>
+            <div className="relative">
+              <div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none opacity-50">
+                <LockClosedIcon className="w-4 h-4 text-content-tertiary dark:text-dark-content-tertiary" />
+              </div>
+              <input
+                id="password-input"
+                type={showPassword ? 'text' : 'password'}
+                placeholder="••••••••"
+                value={password}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
+                disabled={isLoading}
+                required
+                autoComplete="new-password"
+                className={[
+                  'w-full',
+                  'pl-9',
+                  'pr-10',
+                  'py-1.5',
+                  'text-base',
+                  'leading-6',
+                  'bg-bg-primary',
+                  'dark:bg-dark-bg-primary',
+                  'border',
+                  'border-[#e4e4e7]',
+                  'dark:border-dark-border-primary',
+                  'rounded-lg',
+                  'placeholder:text-content-tertiary',
+                  'dark:placeholder:text-dark-content-tertiary',
+                  'text-content-primary',
+                  'dark:text-dark-content-primary',
+                  'focus:outline-none',
+                  'focus:border-primary-custom-600',
+                  'dark:focus:border-dark-border-custom',
+                  'focus:ring-2',
+                  'focus:ring-primary-custom-400',
+                  'dark:focus:ring-dark-border-custom',
+                  'transition-all',
+                  'duration-150',
+                ].join(' ')}
+              />
+              <button
+                type="button"
+                onClick={togglePasswordVisibility}
+                className="absolute right-3 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-100 text-content-tertiary dark:text-dark-content-tertiary transition-opacity duration-150 focus:outline-none focus:ring-2 focus:ring-primary-custom-400 dark:focus:ring-dark-border-custom rounded p-1"
+                aria-label={showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
+              >
+                <EyeIcon className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+
+          {/* Submit Button */}
+          <button
+            type="submit"
+            disabled={isLoading || !name || !email || !password}
+            className={[
+              'relative',
+              'w-full',
+              'px-[10px]',
+              'py-[6px]',
+              'flex',
+              'items-center',
+              'justify-center',
+              'gap-2',
+              'font-bold',
+              'text-sm',
+              'leading-5',
+              'text-[#eff8ff]',
+              'dark:text-[#0e79fd]',
+              'bg-[#0e79fd]',
+              'dark:bg-[#bfe2fe]',
+              'border',
+              'border-[#3c9bf6]',
+              'dark:border-[#93d1fd]',
+              'rounded-md',
+              'shadow-[0px_2px_0px_0px_inset_rgba(255,255,255,0.15)]',
+              'hover:bg-primary-custom-500',
+              'dark:hover:bg-[#93d1fd]',
+              'active:scale-95',
+              'transition-all',
+              'duration-150',
+              'focus:outline-none',
+              'focus:ring-2',
+              'focus:ring-primary-custom-400',
+              'dark:focus:ring-[#93d1fd]',
+              'focus:ring-offset-2',
+              'dark:focus:ring-offset-[#3f3f46]',
+              'disabled:opacity-50',
+              'disabled:cursor-not-allowed',
+            ].join(' ')}
+          >
+            {isLoading ? 'Registrando...' : 'Registrarse'}
+          </button>
+        </form>
+
+        {/* ===== SIGN IN LINK ===== */}
+        <button
+          type="button"
+          onClick={onSignIn}
+          className={[
+            'w-full',
+            'px-[10px]',
+            'py-[6px]',
+            'flex',
+            'items-center',
+            'justify-center',
+            'gap-2',
+            'font-bold',
+            'text-sm',
+            'leading-5',
+            'text-[#0e79fd]',
+            'dark:text-[#93d1fd]',
+            'hover:bg-primary-custom-100',
+            'dark:hover:bg-[#93d1fd]/10',
+            'rounded-md',
+            'transition-all',
+            'duration-150',
+            'focus:outline-none',
+            'focus:ring-2',
+            'focus:ring-primary-custom-400',
+            'dark:focus:ring-[#93d1fd]',
+            'focus:ring-offset-2',
+            'dark:focus:ring-offset-[#3f3f46]',
+          ].join(' ')}
+        >
+          Ya tengo una cuenta
+        </button>
+
+        {/* ===== TÉRMINOS Y CONDICIONES ===== */}
+        <div className="w-full text-center">
+          <p
+            className={[
+              'text-[12px]',
+              'leading-[16px]',
+              'font-normal',
+              'text-content-primary',
+              'dark:text-dark-content-primary',
+            ].join(' ')}
+          >
+            Al registrarse, estás aceptando nuestras{' '}
+            <button
+              type="button"
+              onClick={onTermsClick}
+              className="text-[#0e79fd] dark:text-[#93d1fd] underline hover:no-underline focus:outline-none focus:ring-2 focus:ring-primary-custom-400 dark:focus:ring-[#93d1fd] rounded"
+            >
+              Condiciones de Uso
+            </button>
+            {' '}y nuestras{' '}
+            <button
+              type="button"
+              onClick={onPrivacyClick}
+              className="text-[#0e79fd] dark:text-[#93d1fd] underline hover:no-underline focus:outline-none focus:ring-2 focus:ring-primary-custom-400 dark:focus:ring-[#93d1fd] rounded"
+            >
+              Políticas de Privacidad
+            </button>
+            .
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/views/SignUpView/SignUpView.types.ts

@@ -0,0 +1,58 @@
+/**
+ * Props del componente SignUpView
+ */
+export interface SignUpViewProps {
+  /**
+   * Handler para el submit del formulario de registro
+   * @param name - Nombre ingresado por el usuario
+   * @param email - Email ingresado por el usuario
+   * @param password - Contraseña ingresada por el usuario
+   */
+  onSubmit?: (name: string, email: string, password: string) => void;
+
+  /**
+   * Handler para el click en "Ya tengo una cuenta"
+   */
+  onSignIn?: () => void;
+
+  /**
+   * Handler para el click en "Condiciones de Uso"
+   */
+  onTermsClick?: () => void;
+
+  /**
+   * Handler para el click en "Políticas de Privacidad"
+   */
+  onPrivacyClick?: () => void;
+
+  /**
+   * Estado de carga del botón de submit
+   * @default false
+   */
+  isLoading?: boolean;
+
+  /**
+   * Mensaje de error general para mostrar en el formulario
+   */
+  errorMessage?: string;
+
+  /**
+   * Clases CSS adicionales para el contenedor
+   */
+  className?: string;
+
+  /**
+   * Si se muestra el fondo decorativo con imagen
+   * @default true
+   */
+  showBackground?: boolean;
+
+  /**
+   * Variante de visualización
+   * - 'responsive': Se adapta según el viewport (default)
+   * - 'mobile': Siempre se muestra como mobile sin efectos de card
+   * - 'desktop': Siempre se muestra como desktop con card
+   * @default 'responsive'
+   */
+  variant?: 'responsive' | 'mobile' | 'desktop';
+}

package/src/views/SignUpView/icons.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+/**
+ * Icono de círculo de usuario para el input de nombre
+ */
+export const UserCircleIcon: 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="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-5-2a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM8 9c-1.825 0-3.422.977-4.295 2.437A5.49 5.49 0 0 0 8 13.5a5.49 5.49 0 0 0 4.294-2.063A4.997 4.997 0 0 0 8 9Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * 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>
+);

package/src/views/SignUpView/index.ts

@@ -0,0 +1,3 @@
+export { SignUpView } from './SignUpView';
+export type { SignUpViewProps } from './SignUpView.types';
+export { UserCircleIcon, EnvelopeIcon, LockClosedIcon, EyeIcon } from './icons';