siesa-ui-kit 1.0.5 → 1.0.7

package/src/components/SignUpView/SignUpView.stories.tsx

@@ -1,129 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SignUpView } from './SignUpView';
-
-const meta = {
-  title: 'Siesa UI Kit/SignUpView',
-  component: SignUpView,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: 'Vista completa de registro con formulario para crear una nueva cuenta. Incluye campos de nombre, email y contraseña, botón de registro, enlace para iniciar sesión, y aceptación de términos y condiciones.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    onSubmit: {
-      action: 'submitted',
-      description: 'Handler para el submit del formulario de registro',
-    },
-    onSignIn: {
-      action: 'signInClicked',
-      description: 'Handler para el click en "Ya tengo una cuenta"',
-    },
-    onTermsClick: {
-      action: 'termsClicked',
-      description: 'Handler para el click en "Condiciones de Uso"',
-    },
-    onPrivacyClick: {
-      action: 'privacyClicked',
-      description: 'Handler para el click en "Políticas de Privacidad"',
-    },
-    isLoading: {
-      control: 'boolean',
-      description: 'Estado de carga del botón de submit',
-    },
-    errorMessage: {
-      control: 'text',
-      description: 'Mensaje de error general para mostrar en el formulario',
-    },
-    showBackground: {
-      control: 'boolean',
-      description: 'Si se muestra el fondo decorativo con imagen',
-    },
-    variant: {
-      control: 'select',
-      options: ['responsive', 'mobile', 'desktop'],
-      description: 'Variante de visualización',
-    },
-  },
-} satisfies Meta<typeof SignUpView>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. DESKTOP (DEFAULT)
-// ============================================
-export const Desktop: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <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')}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 2. LOADING STATE
-// ============================================
-export const Loading: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <SignUpView
-        isLoading={true}
-        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')}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 3. WITH ERROR
-// ============================================
-export const WithError: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <SignUpView
-        errorMessage="El email ya está registrado. Por favor usa otro email o inicia sesión."
-        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')}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 4. WITHOUT BACKGROUND
-// ============================================
-export const WithoutBackground: Story = {
-  render: () => (
-    <div className="min-h-screen w-full bg-gray-100 dark:bg-gray-900">
-      <SignUpView
-        showBackground={false}
-        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')}
-      />
-    </div>
-  ),
-};

package/src/components/SignUpView/SignUpView.tsx

@@ -1,503 +0,0 @@
-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/components/SignUpView/SignUpView.types.ts

@@ -1,58 +0,0 @@
-/**
- * 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';
-}