anima-ds-nucleus 1.0.17 → 1.0.19

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>
+    )
   );
 };
 

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

@@ -7,13 +7,59 @@ export default {
   tags: ['autodocs'],
   decorators: [
     (Story) => (
-      <I18nProvider>
-        <Story />
+      <I18nProvider language="es-AR">
+        <div style={{ padding: '2rem', maxWidth: '500px', margin: '0 auto' }}>
+          <Story />
+        </div>
       </I18nProvider>
     ),
   ],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['hexa-login', undefined],
+      description: 'Variante del formulario de login',
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Estado de carga del formulario',
+    },
+    showSocialLogin: {
+      control: 'boolean',
+      description: 'Mostrar botones de login social',
+    },
+    showDivider: {
+      control: 'boolean',
+      description: 'Mostrar divisor antes de los botones sociales',
+    },
+    generalError: {
+      control: 'text',
+      description: 'Mensaje de error general',
+    },
+  },
+};
+
+// Variante Hexa Login (principal)
+export const HexaLogin = {
+  args: {
+    variant: 'hexa-login',
+    onSubmit: (data) => {
+      console.log('Login data:', data);
+      alert('Login submitted!');
+    },
+    onForgotPassword: () => {
+      alert('Forgot password clicked');
+    },
+    onGoogleLogin: () => {
+      alert('Google login clicked');
+    },
+    onMicrosoftLogin: () => {
+      alert('Microsoft login clicked');
+    },
+  },
 };
 
+// Variante por defecto
 export const Default = {
   args: {
     onSubmit: (data) => {
@@ -23,33 +69,165 @@ export const Default = {
   },
 };
 
+// Con estado de carga
+export const Loading = {
+  args: {
+    variant: 'hexa-login',
+    loading: true,
+    onSubmit: (data) => {
+      console.log('Login data:', data);
+    },
+    onGoogleLogin: () => {
+      alert('Google login clicked');
+    },
+    onMicrosoftLogin: () => {
+      alert('Microsoft login clicked');
+    },
+  },
+};
+
+// Con error general (string)
+export const WithError = {
+  args: {
+    variant: 'hexa-login',
+    generalError: 'Credenciales incorrectas',
+    onSubmit: (data) => {
+      console.log('Login data:', data);
+    },
+    onGoogleLogin: () => {
+      alert('Google login clicked');
+    },
+    onMicrosoftLogin: () => {
+      alert('Microsoft login clicked');
+    },
+  },
+};
+
+// Con error general (boolean - muestra textos i18n)
+export const WithErrorBoolean = {
+  args: {
+    variant: 'hexa-login',
+    generalError: true,
+    onSubmit: (data) => {
+      console.log('Login data:', data);
+    },
+    onGoogleLogin: () => {
+      alert('Google login clicked');
+    },
+    onMicrosoftLogin: () => {
+      alert('Microsoft login clicked');
+    },
+  },
+};
+
+// Con error general personalizado
+export const WithCustomError = {
+  args: {
+    variant: 'hexa-login',
+    generalError: true,
+    generalErrorTitle: 'Error de autenticación',
+    generalErrorSubtitle: 'Verifica tus credenciales e intenta nuevamente.',
+    onSubmit: (data) => {
+      console.log('Login data:', data);
+    },
+    onGoogleLogin: () => {
+      alert('Google login clicked');
+    },
+    onMicrosoftLogin: () => {
+      alert('Microsoft login clicked');
+    },
+  },
+};
+
+// Sin login social
+export const WithoutSocialLogin = {
+  args: {
+    variant: 'hexa-login',
+    showSocialLogin: false,
+    showDivider: false,
+    onSubmit: (data) => {
+      console.log('Login data:', data);
+      alert('Login submitted!');
+    },
+    onForgotPassword: () => {
+      alert('Forgot password clicked');
+    },
+  },
+};
+
+// Con labels personalizados
+export const CustomLabels = {
+  args: {
+    variant: 'hexa-login',
+    labels: {
+      emailLabel: 'Correo electrónico',
+      passwordLabel: 'Contraseña',
+      rememberMeLabel: 'Recordar sesión',
+      forgotPasswordLabel: '¿Olvidaste tu contraseña?',
+      continueWithLabel: 'O continúa con',
+      googleLabel: 'Google',
+      microsoftLabel: 'Microsoft',
+    },
+    onSubmit: (data) => {
+      console.log('Login data:', data);
+      alert('Login submitted!');
+    },
+    onGoogleLogin: () => {
+      alert('Google login clicked');
+    },
+    onMicrosoftLogin: () => {
+      alert('Microsoft login clicked');
+    },
+  },
+};
+
+// Versión en español
 export const Spanish = {
   decorators: [
     (Story) => (
       <I18nProvider language="es-AR">
-        <Story />
+        <div style={{ padding: '2rem', maxWidth: '500px', margin: '0 auto' }}>
+          <Story />
+        </div>
       </I18nProvider>
     ),
   ],
   args: {
+    variant: 'hexa-login',
     onSubmit: (data) => {
       console.log('Login data:', data);
     },
+    onGoogleLogin: () => {
+      alert('Google login clicked');
+    },
+    onMicrosoftLogin: () => {
+      alert('Microsoft login clicked');
+    },
   },
 };
 
+// Versión en portugués
 export const Portuguese = {
   decorators: [
     (Story) => (
       <I18nProvider language="pt-BR">
-        <Story />
+        <div style={{ padding: '2rem', maxWidth: '500px', margin: '0 auto' }}>
+          <Story />
+        </div>
       </I18nProvider>
     ),
   ],
   args: {
+    variant: 'hexa-login',
     onSubmit: (data) => {
       console.log('Login data:', data);
     },
+    onGoogleLogin: () => {
+      alert('Google login clicked');
+    },
+    onMicrosoftLogin: () => {
+      alert('Microsoft login clicked');
+    },
   },
 };
 

package/src/i18n/config.js

@@ -95,6 +95,12 @@ const resources = {
       'alert.error': 'Error',
       'alert.warning': 'Advertencia',
       'alert.info': 'Información',
+      
+      // Errors
+      'errors.invalidCredentials': 'Correo o contraseña incorrectos.',
+      'errors.tryAgain': 'Intentá nuevamente.',
+      'form.tryAgain': 'Por favor, intentá nuevamente.',
+      'form.loggingIn': 'Ingresando...',
     },
   },
   'pt-BR': {
@@ -190,6 +196,12 @@ const resources = {
       'alert.error': 'Erro',
       'alert.warning': 'Aviso',
       'alert.info': 'Informação',
+      
+      // Errors
+      'errors.invalidCredentials': 'E-mail ou senha incorretos.',
+      'errors.tryAgain': 'Tente novamente.',
+      'form.tryAgain': 'Por favor, tente novamente.',
+      'form.loggingIn': 'Entrando...',
     },
   },
 };

package/src/index.js

@@ -71,6 +71,7 @@ export { TagList } from './components/DataDisplay/TagList/TagList';
 // Views
 export { LoginForm } from './components/Views/LoginForm/LoginForm';
 export { ChangePasswordForm } from './components/Views/ChangePasswordForm/ChangePasswordForm';
+export { ForgotPassword } from './components/Views/ForgotPassword/ForgotPassword';
 export { Chat } from './components/Views/Chat/Chat';
 
 // Providers