anima-ds-nucleus 1.0.16 → 1.0.18

package/src/components/Views/ForgotPassword/ForgotPassword.stories.jsx

@@ -0,0 +1,186 @@
+import { ForgotPassword } from './ForgotPassword';
+import { I18nProvider } from '../../../providers/I18nProvider';
+
+export default {
+  title: 'Views/ForgotPassword',
+  component: ForgotPassword,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <I18nProvider language="es-AR">
+        <Story />
+      </I18nProvider>
+    ),
+  ],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'hexa-login'],
+      description: 'Variante del componente',
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Estado de carga',
+    },
+    error: {
+      control: 'text',
+      description: 'Error general del servidor',
+    },
+  },
+};
+
+// Estado por defecto
+export const Default = {
+  args: {
+    onBackToLogin: () => {
+      console.log('Back to login clicked');
+      alert('Volver al login');
+    },
+    onSubmit: async ({ email, countryCode }) => {
+      console.log('Forgot password data:', { email, countryCode });
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      return { resetLink: 'https://example.com/reset-password' };
+    },
+  },
+};
+
+// Estado de carga
+export const Loading = {
+  args: {
+    loading: true,
+    onBackToLogin: () => {
+      alert('Volver al login');
+    },
+    onSubmit: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 5000));
+    },
+  },
+};
+
+// Estado de éxito
+export const Success = {
+  args: {
+    onBackToLogin: () => {
+      alert('Volver al login');
+    },
+    onSubmit: async ({ email }) => {
+      console.log('Email:', email);
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      return { resetLink: 'https://example.com/reset-password?token=abc123' };
+    },
+  },
+};
+
+// Con error del servidor
+export const WithError = {
+  args: {
+    error: 'No se encontró una cuenta asociada a este correo electrónico.',
+    onBackToLogin: () => {
+      alert('Volver al login');
+    },
+    onSubmit: async () => {
+      throw new Error('Usuario no encontrado');
+    },
+  },
+};
+
+// Error 404
+export const Error404 = {
+  args: {
+    onBackToLogin: () => {
+      alert('Volver al login');
+    },
+    onSubmit: async () => {
+      const error = new Error('Not found');
+      error.response = { status: 404, data: { message: 'Usuario no encontrado' } };
+      throw error;
+    },
+  },
+};
+
+// Error 400
+export const Error400 = {
+  args: {
+    onBackToLogin: () => {
+      alert('Volver al login');
+    },
+    onSubmit: async () => {
+      const error = new Error('Bad request');
+      error.response = { status: 400, data: { message: 'Email inválido' } };
+      throw error;
+    },
+  },
+};
+
+// Error 500
+export const Error500 = {
+  args: {
+    onBackToLogin: () => {
+      alert('Volver al login');
+    },
+    onSubmit: async () => {
+      const error = new Error('Server error');
+      error.response = { status: 500 };
+      throw error;
+    },
+  },
+};
+
+// Variante hexa-login
+export const HexaLogin = {
+  args: {
+    variant: 'hexa-login',
+    onBackToLogin: () => {
+      alert('Volver al login');
+    },
+    onSubmit: async ({ email }) => {
+      console.log('Email:', email);
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      return { resetLink: 'https://example.com/reset-password' };
+    },
+  },
+};
+
+// Versión en español
+export const Spanish = {
+  decorators: [
+    (Story) => (
+      <I18nProvider language="es-AR">
+        <Story />
+      </I18nProvider>
+    ),
+  ],
+  args: {
+    onBackToLogin: () => {
+      alert('Volver al login');
+    },
+    onSubmit: async ({ email }) => {
+      console.log('Email:', email);
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      return { resetLink: 'https://example.com/reset-password' };
+    },
+  },
+};
+
+// Versión en portugués
+export const Portuguese = {
+  decorators: [
+    (Story) => (
+      <I18nProvider language="pt-BR">
+        <Story />
+      </I18nProvider>
+    ),
+  ],
+  args: {
+    onBackToLogin: () => {
+      alert('Volver ao login');
+    },
+    onSubmit: async ({ email }) => {
+      console.log('Email:', email);
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      return { resetLink: 'https://example.com/reset-password' };
+    },
+  },
+};
+
+

package/src/components/Views/LoginForm/LoginForm.jsx

@@ -1,15 +1,30 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Button } from '../../Atoms/Button/Button';
+import { Typography } from '../../Atoms/Typography/Typography';
 import { Input } from '../../Inputs/Input/Input';
 import { Checkbox } from '../../Inputs/Checkbox/Checkbox';
-import { Button } from '../../Atoms/Button/Button';
+import { PasswordInput } from '../../Inputs/PasswordInput/PasswordInput';
 
 export const LoginForm = ({
+  variant,
   onSubmit,
+  loading = false,
+  onForgotPassword,
+  onGoogleLogin,
+  onMicrosoftLogin,
+  showSocialLogin = true,
+  showDivider = true,
+  showPasswordRequirementsOnError = true,
+  labels,
+  generalError,
+  generalErrorTitle,
+  generalErrorSubtitle,
   className = '',
   ...props
 }) => {
   const { t } = useTranslation();
+  const isHexaLogin = variant === 'hexa-login';
   const [formData, setFormData] = useState({
     email: '',
     password: '',
@@ -45,52 +60,326 @@ export const LoginForm = ({
     }
   };
 
+  const resolvedLabels = {
+    emailLabel: labels?.emailLabel ?? t('form.email') ?? 'Email',
+    passwordLabel: labels?.passwordLabel ?? t('form.password') ?? 'Contraseña',
+    rememberMeLabel: labels?.rememberMeLabel ?? t('form.rememberMe') ?? 'Recordarme',
+    forgotPasswordLabel: labels?.forgotPasswordLabel ?? t('form.forgotPassword') ?? 'Olvidé mi contraseña',
+    continueWithLabel: labels?.continueWithLabel ?? 'Continuar con',
+    googleLabel: labels?.googleLabel ?? 'Google',
+    microsoftLabel: labels?.microsoftLabel ?? 'Microsoft',
+  };
+
+  const loginButtonText = loading ? (t('form.loggingIn') ?? 'Ingresando...') : (t('form.login') ?? 'Ingresar');
+
   return (
-    <form
-      onSubmit={handleSubmit}
-      className={`max-w-md mx-auto bg-white p-6 rounded-lg shadow-md ${className}`}
-      {...props}
-    >
-      <h2 className="text-2xl font-bold mb-6 text-center">{t('form.login')}</h2>
-
-      <div className="space-y-4">
-        <Input
-          label={t('form.email')}
-          type="email"
-          placeholder={t('placeholder.email')}
-          value={formData.email}
-          onChange={(e) => handleChange('email', e.target.value)}
-          error={errors.email}
-          required
-        />
-
-        <Input
-          label={t('form.password')}
-          type="password"
-          placeholder={t('placeholder.password')}
-          value={formData.password}
-          onChange={(e) => handleChange('password', e.target.value)}
-          error={errors.password}
-          required
-        />
-
-        <Checkbox
-          label={t('form.rememberMe')}
-          checked={formData.rememberMe}
-          onChange={(e) => handleChange('rememberMe', e.target.checked)}
-        />
-
-        <Button type="submit" variant="primary" className="w-full">
-          {t('form.login')}
-        </Button>
-
-        <div className="text-center">
-          <a href="#" className="text-sm text-blue-600 hover:underline">
-            {t('form.forgotPassword')}
+    isHexaLogin ? (
+      <div
+        style={{
+          width: '427px',
+          minHeight: '409px',
+          borderRadius: '14px',
+          border: '1px solid #0000001A',
+          padding: '24px',
+          background: '#FFFFFF',
+          boxShadow: '0px 4px 6px -4px #0000001A, 0px 10px 15px -3px #0000001A',
+        }}
+      >
+        <form onSubmit={handleSubmit} className={className} {...props}>
+          {/* 1) Email */}
+          <div className="w-full">
+            <label
+              className="block mb-2 font-medium text-sm"
+              style={{ color: '#2D5C63' }}
+            >
+              {resolvedLabels.emailLabel}
+            </label>
+            <input
+              type="email"
+              value={formData.email}
+              onChange={(e) => handleChange('email', e.target.value)}
+              placeholder="Ingresa tu correo electronico"
+              className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm text-gray-900"
+              style={{ borderColor: errors.email ? '#ef4444' : '#2D5C63' }}
+            />
+          </div>
+
+        {/* 2) Password */}
+        <div className="w-full mt-4">
+          <PasswordInput
+            variant="hexa-login"
+            label={resolvedLabels.passwordLabel}
+            labelClassName="block mb-2 font-medium text-sm"
+            labelStyle={{ color: '#2D5C63' }}
+            placeholder={t('placeholder.password')}
+            value={formData.password}
+            onChange={(e) => handleChange('password', e.target.value)}
+            inputClassName="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm text-gray-900"
+            style={{
+              paddingRight: '2.75rem',
+              borderColor: errors.password ? '#ef4444' : '#2D5C63',
+            }}
+          />
+        </div>
+
+        {/* 3) Password requirements box (solo si hay error de password) */}
+        {showPasswordRequirementsOnError && !!errors.password && (
+          <div
+            className="rounded-lg p-4 border mt-4"
+            style={{
+              background: '#f5f3ff',
+              borderColor: '#a78bfa',
+              color: '#0c4a6e',
+              fontFamily: 'IBM Plex Mono',
+            }}
+          >
+            <ul className="list-disc list-inside text-sm space-y-1" style={{ color: '#0c4a6e' }}>
+              <li>Al menos 8 caracteres</li>
+              <li>Al menos una letra mayúscula</li>
+              <li>Al menos un número</li>
+              <li>Al menos un caracter especial</li>
+            </ul>
+          </div>
+        )}
+
+        {/* 4) Row remember/forgot */}
+        <div className="flex items-center justify-between mt-4">
+          <label className="flex items-center">
+            <input
+              type="checkbox"
+              checked={formData.rememberMe}
+              onChange={(e) => handleChange('rememberMe', e.target.checked)}
+              className="w-4 h-4 border-gray-300 rounded focus:outline-none focus:ring-0"
+              style={{
+                accentColor: '#2D5C63',
+                borderColor: formData.rememberMe ? '#2D5C63' : '#d1d5db',
+              }}
+            />
+            <span className="ml-2 text-sm font-medium" style={{ color: '#2D5C63' }}>
+              {resolvedLabels.rememberMeLabel}
+            </span>
+          </label>
+
+          <a
+            href="#"
+            className="text-body-md hover:underline font-medium"
+            style={{ color: '#2D5C63' }}
+            onClick={(e) => {
+              e.preventDefault();
+              if (onForgotPassword) onForgotPassword();
+            }}
+          >
+            {resolvedLabels.forgotPasswordLabel}
           </a>
         </div>
+
+        {/* 5) Error general box rojo (si existe) */}
+        {(generalError || errors.general) && (
+          <div
+            className="mt-4"
+            style={{
+              width: '377px',
+              height: '68px',
+              paddingTop: '12px',
+              paddingRight: '16px',
+              paddingBottom: '12px',
+              paddingLeft: '16px',
+              gap: '4px',
+              borderRadius: '8px',
+              borderWidth: '1px',
+              border: '1px solid #B30808',
+              backgroundColor: '#F8DBDB',
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            <Typography
+              variant="body2"
+              style={{
+                fontFamily: "'IBM Plex Mono', monospace",
+                fontWeight: 400,
+                fontStyle: 'normal',
+                fontSize: '14px',
+                lineHeight: '21px',
+                letterSpacing: '0.02em',
+                color: '#B30808',
+                margin: 0,
+              }}
+            >
+              {generalErrorTitle ?? 
+               (typeof generalError === 'string' ? generalError : null) ?? 
+               (errors.general && typeof errors.general === 'string' ? errors.general : null) ??
+               (t('errors.invalidCredentials') ?? 'Correo o contraseña incorrectos.')}
+            </Typography>
+            <Typography
+              variant="body2"
+              style={{
+                fontFamily: "'IBM Plex Mono', monospace",
+                fontWeight: 400,
+                fontStyle: 'normal',
+                fontSize: '14px',
+                lineHeight: '21px',
+                letterSpacing: '0.02em',
+                color: '#B30808',
+                margin: 0,
+              }}
+            >
+              {generalErrorSubtitle ?? 
+               (t('errors.tryAgain') ?? 'Intentá nuevamente.')}
+            </Typography>
+          </div>
+        )}
+
+        {/* 6) Botón login */}
+        <div className="mt-4">
+          <Button
+            type="submit"
+            tipo="Primary"
+            color="Teal"
+            tamaño="Default"
+            className="w-full"
+            disabled={loading}
+          >
+            <span
+              style={{
+                fontFamily: "'IBM Plex Sans', sans-serif",
+                fontWeight: 400,
+                fontStyle: 'normal',
+                fontSize: '16px',
+                lineHeight: '24px',
+                letterSpacing: '0%',
+              }}
+            >
+              {loginButtonText}
+            </span>
+          </Button>
+        </div>
+
+        {/* 7) Divider */}
+        {showDivider && (
+          <div className="flex items-center gap-3 my-6">
+            <div className="flex-1" style={{ borderTop: '1px solid #2D5C63' }} />
+            <Typography
+              variant="body2"
+              className="text-body-md font-medium"
+              style={{ color: '#2D5C63', whiteSpace: 'nowrap' }}
+            >
+              {resolvedLabels.continueWithLabel}
+            </Typography>
+            <div className="flex-1" style={{ borderTop: '1px solid #2D5C63' }} />
+          </div>
+        )}
+
+        {/* 8) Social buttons */}
+        {showSocialLogin && (
+          <div
+            style={{
+              width: '377px',
+              height: '36px',
+              gap: '20px',
+              marginLeft: 'auto',
+              marginRight: 'auto',
+              display: 'flex',
+            }}
+          >
+            <button
+              type="button"
+              onClick={onGoogleLogin}
+              className="flex-1 flex items-center justify-center bg-white hover:bg-gray-50 transition-colors"
+              style={{
+                width: '178.5px',
+                height: '36px',
+                padding: '8px 43px',
+                gap: '16px',
+                borderRadius: '8px',
+                border: '1px solid #38656D',
+              }}
+            >
+              <svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true">
+                <path fill="#FFC107" d="M43.611 20.083H42V20H24v8h11.303C33.651 32.659 29.227 36 24 36c-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.047 6.053 29.272 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z" />
+                <path fill="#FF3D00" d="M6.306 14.691l6.571 4.819C14.655 16.108 19.002 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.047 6.053 29.272 4 24 4 16.318 4 9.656 8.337 6.306 14.691z" />
+                <path fill="#4CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.197l-6.19-5.238C29.211 35.091 26.715 36 24 36c-5.205 0-9.616-3.318-11.281-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z" />
+                <path fill="#1976D2" d="M43.611 20.083H42V20H24v8h11.303c-.793 2.116-2.318 3.91-4.284 5.238l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z" />
+              </svg>
+              <Typography variant="body2" className="text-gray-900 font-medium">
+                {resolvedLabels.googleLabel}
+              </Typography>
+            </button>
+
+            <button
+              type="button"
+              onClick={onMicrosoftLogin}
+              className="flex-1 flex items-center justify-center bg-white hover:bg-gray-50 transition-colors"
+              style={{
+                width: '178.5px',
+                height: '36px',
+                padding: '8px 43px',
+                gap: '16px',
+                borderRadius: '8px',
+                border: '1px solid #38656D',
+              }}
+            >
+              <svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true">
+                <path fill="#F25022" d="M6 6h17v17H6z" />
+                <path fill="#7FBA00" d="M25 6h17v17H25z" />
+                <path fill="#00A4EF" d="M6 25h17v17H6z" />
+                <path fill="#FFB900" d="M25 25h17v17H25z" />
+              </svg>
+              <Typography variant="body2" className="text-gray-900 font-medium">
+                {resolvedLabels.microsoftLabel}
+              </Typography>
+            </button>
+          </div>
+        )}
+        </form>
       </div>
-    </form>
+    ) : (
+      <form
+        onSubmit={handleSubmit}
+        className={`max-w-md mx-auto bg-white p-6 rounded-lg shadow-md ${className}`}
+        {...props}
+      >
+        <h2 className="text-2xl font-bold mb-6 text-center">{t('form.login')}</h2>
+
+        <div className="space-y-4">
+          <Input
+            label={t('form.email')}
+            type="email"
+            placeholder={t('placeholder.email')}
+            value={formData.email}
+            onChange={(e) => handleChange('email', e.target.value)}
+            error={errors.email}
+            required
+          />
+
+          <Input
+            label={t('form.password')}
+            type="password"
+            placeholder={t('placeholder.password')}
+            value={formData.password}
+            onChange={(e) => handleChange('password', e.target.value)}
+            error={errors.password}
+            required
+          />
+
+          <Checkbox
+            label={t('form.rememberMe')}
+            checked={formData.rememberMe}
+            onChange={(e) => handleChange('rememberMe', e.target.checked)}
+          />
+
+          <Button type="submit" variant="primary" className="w-full">
+            {t('form.login')}
+          </Button>
+
+          <div className="text-center">
+            <a href="#" className="text-sm text-blue-600 hover:underline">
+              {t('form.forgotPassword')}
+            </a>
+          </div>
+        </div>
+      </form>
+    )
   );
 };