anima-ds-nucleus 1.0.17 → 1.0.18

package/src/components/Layout/Sidebar/SidebarCore.jsx

@@ -308,7 +308,7 @@ const SidebarCoreMobile = ({
                 </div>
 
                 {/* Items de la sección */}
-                <div className="space-y-1">
+                <div>
                   {section.items.map((item) => (
                     <div key={item.id} className="px-4">
                       <button
@@ -524,6 +524,7 @@ export const SidebarCore = ({
   footerCollapsedContent, // Contenido a mostrar en el footer cuando está colapsado (puede ser string, ReactNode, o objeto con icon y text)
   coreContainerStyle, // Estilos personalizados para el contenedor de LogoHexa y "Core" (solo mobile)
   coreTextStyle, // Estilos personalizados para el texto "Core" (solo mobile)
+  fluidWidth = false, // Si es true, el root respeta el ancho del contenedor (grid/flex) en lugar de usar anchos fijos
   className = '',
   ...props
 }) => {
@@ -609,15 +610,31 @@ export const SidebarCore = ({
     );
   }
 
+  // Determinar estilos del root según fluidWidth
+  const rootWidthStyles = fluidWidth
+    ? {
+        width: '100%',
+        maxWidth: '100%',
+        minWidth: 0,
+        boxSizing: 'border-box',
+      }
+    : isCollapsed
+      ? { width: desktopCollapsedWidth }
+      : {};
+
+  const rootClassName = fluidWidth
+    ? `bg-white transition-all duration-300 ease-in-out h-full ${className}`
+    : `bg-white transition-all duration-300 ease-in-out h-full ${
+        isCollapsed ? '' : 'w-64'
+      } ${className}`;
+
   return (
     <aside
-      className={`bg-white transition-all duration-300 ease-in-out h-full ${
-        isCollapsed ? '' : 'w-64'
-      } ${className}`}
+      className={rootClassName}
       style={{
         border: '1px solid #C4C4C4',
         borderRadius: '16px',
-        ...(isCollapsed ? { width: desktopCollapsedWidth } : {}),
+        ...rootWidthStyles,
       }}
       {...props}
     >
@@ -631,21 +648,21 @@ export const SidebarCore = ({
                        flex items-center justify-between hover:bg-gray-50 transition-colors ${desktopCompanyButtonClassName}`}
               style={desktopCompanyButtonStyle}
             >
-              <div className="flex items-center space-x-3">
+              <div className="flex items-center space-x-3 min-w-0 flex-1">
                 {/* Logo hexagonal */}
                 {companyLogo ? (
                   <img
                     src={companyLogo}
                     alt={companyName}
-                    className="w-8 h-8 rounded"
+                    className="w-8 h-8 rounded flex-shrink-0"
                   />
                 ) : (
-                  <LogoHexa width={36} height={40} />
+                  <LogoHexa width={36} height={40} className="flex-shrink-0" />
                 )}
                 {/* Nombre de la empresa */}
                 <Typography
                   variant="body-md"
-                  className={desktopCompanyNameClassName}
+                  className={`${desktopCompanyNameClassName} min-w-0`}
                   style={{
                     color: '#223B40',
                     fontFamily: 'IBM Plex Sans',
@@ -656,6 +673,9 @@ export const SidebarCore = ({
                     letterSpacing: '0px',
                     opacity: 1,
                     transform: 'rotate(0deg)',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
                     ...(desktopCompanyNameStyle || {}),
                   }}
                 >
@@ -784,9 +804,9 @@ export const SidebarCore = ({
             >
               <button
                 onClick={() => onItemClick && onItemClick('inicio')}
-                className={`w-full flex items-center ${
-                  isCollapsed ? 'justify-center' : 'px-4 justify-between'
-                } ${isCollapsed ? '' : 'py-2.5 rounded-lg'} transition-all duration-200 ${
+                className={`flex items-center ${
+                  isCollapsed ? 'justify-center' : 'justify-between'
+                } ${isCollapsed ? '' : 'rounded-lg'} transition-all duration-200 ${
                   activeItem === 'inicio'
                     ? ''
                     : 'color-gray-700 hover:bg-gray-100'
@@ -799,13 +819,22 @@ export const SidebarCore = ({
                         backgroundColor: 'transparent',
                         borderRadius: '8px',
                       }
-                    : activeItem === 'inicio'
-                      ? { backgroundColor: '#2D5C63' }
-                      : {}
+                    : {
+                        width: '228px',
+                        height: '40px',
+                        paddingTop: '8px',
+                        paddingRight: '12px',
+                        paddingBottom: '8px',
+                        paddingLeft: '12px',
+                        gap: '12px',
+                        borderRadius: '8px',
+                        opacity: 1,
+                        backgroundColor: activeItem === 'inicio' ? '#2D5C63' : 'transparent',
+                      }
                 }
               >
                 <div
-                  className={`flex items-center ${isCollapsed ? '' : ''}`}
+                  className={`flex items-center ${isCollapsed ? '' : 'min-w-0 flex-1'}`}
                   style={
                     isCollapsed
                       ? {
@@ -813,7 +842,9 @@ export const SidebarCore = ({
                           columnGap: `${desktopCollapsedOverlapColumnGapPx}px`,
                           width: '100%',
                         }
-                      : {}
+                      : {
+                          minWidth: 0,
+                        }
                   }
                 >
                   {isCollapsed ? (
@@ -883,8 +914,13 @@ export const SidebarCore = ({
                     <Typography
                       variant="body-lg"
                       weight={activeItem === 'inicio' ? desktopItemLabelWeightActive : desktopItemLabelWeightInactive}
-                      className={activeItem === 'inicio' ? 'color-white' : 'color-gray-700'}
-                      style={{ fontSize: desktopItemLabelFontSize }}
+                      className={`${activeItem === 'inicio' ? 'color-white' : 'color-gray-700'} min-w-0`}
+                      style={{
+                        fontSize: desktopItemLabelFontSize,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }}
                     >
                       Inicio
                     </Typography>
@@ -992,7 +1028,7 @@ export const SidebarCore = ({
               )}
 
               {/* Items de la sección */}
-              <div className="space-y-1">
+              <div>
                 {section.items.map((item) => (
                   <div key={item.id} className="px-4">
                     <div
@@ -1011,9 +1047,9 @@ export const SidebarCore = ({
                     >
                       <button
                         onClick={() => onItemClick && onItemClick(item.id)}
-                        className={`w-full flex items-center ${
-                          isCollapsed ? 'justify-center' : 'px-4 justify-between'
-                        } ${isCollapsed ? '' : 'py-2.5 rounded-lg'} transition-all duration-200 ${
+                        className={`flex items-center ${
+                          isCollapsed ? 'justify-center' : 'justify-between'
+                        } ${isCollapsed ? '' : 'rounded-lg'} transition-all duration-200 ${
                           activeItem === item.id
                             ? ''
                             : 'color-gray-700 hover:bg-gray-100'
@@ -1026,14 +1062,23 @@ export const SidebarCore = ({
                                 backgroundColor: 'transparent',
                                 borderRadius: '8px',
                               }
-                            : activeItem === item.id
-                              ? { backgroundColor: '#2D5C63' }
-                              : {}
+                            : {
+                                width: '228px',
+                                height: '40px',
+                                paddingTop: '8px',
+                                paddingRight: '12px',
+                                paddingBottom: '8px',
+                                paddingLeft: '12px',
+                                gap: '12px',
+                                borderRadius: '8px',
+                                opacity: 1,
+                                backgroundColor: activeItem === item.id ? '#2D5C63' : 'transparent',
+                              }
                         }
                         title={isCollapsed ? item.label : ''}
                       >
                         <div
-                          className="flex items-center"
+                          className={`flex items-center ${isCollapsed ? '' : 'min-w-0 flex-1'}`}
                           style={
                             isCollapsed
                               ? {
@@ -1041,7 +1086,9 @@ export const SidebarCore = ({
                                   columnGap: `${desktopCollapsedOverlapColumnGapPx}px`,
                                   width: '100%',
                                 }
-                              : {}
+                              : {
+                                  minWidth: 0,
+                                }
                           }
                         >
                           {isCollapsed ? (
@@ -1111,8 +1158,13 @@ export const SidebarCore = ({
                             <Typography
                               variant="body-lg"
                               weight={activeItem === item.id ? desktopItemLabelWeightActive : desktopItemLabelWeightInactive}
-                              className={activeItem === item.id ? 'color-white' : 'color-gray-700'}
-                              style={{ fontSize: desktopItemLabelFontSize }}
+                              className={`${activeItem === item.id ? 'color-white' : 'color-gray-700'} min-w-0`}
+                              style={{
+                                fontSize: desktopItemLabelFontSize,
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                              }}
                             >
                               {item.label}
                             </Typography>

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

@@ -0,0 +1,341 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../../Atoms/Button/Button';
+import { Typography } from '../../Atoms/Typography/Typography';
+import { Icon } from '../../Atoms/Icon/Icon';
+
+export const ForgotPassword = ({
+  onBackToLogin,
+  onSubmit,
+  loading: externalLoading,
+  error: externalError,
+  className = '',
+  variant = 'default',
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const isHexaLogin = variant === 'hexa-login';
+
+  // Estados internos (si no se pasan como props)
+  const [email, setEmail] = useState('');
+  const [errors, setErrors] = useState({});
+  const [internalLoading, setInternalLoading] = useState(false);
+  const [resetLink, setResetLink] = useState(null);
+  const [internalError, setInternalError] = useState(null);
+
+  // Usar loading externo o interno
+  const loading = externalLoading !== undefined ? externalLoading : internalLoading;
+  // Usar error externo o interno
+  const error = externalError !== undefined ? externalError : internalError;
+
+  // Funciones de validación
+  const hasAtSymbol = (email) => {
+    return email && email.includes('@');
+  };
+
+  const isValidEmail = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const validateForm = () => {
+    const newErrors = {};
+
+    if (!email) {
+      newErrors.email = t('errors.required') ?? 'Este campo es obligatorio';
+    } else if (!isValidEmail(email)) {
+      newErrors.email = t('errors.invalidEmail') ?? 'El mail ingresado no es válido';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleEmailChange = (e) => {
+    const value = e.target.value;
+    setEmail(value);
+
+    // Limpiar errores al cambiar
+    if (errors.email) {
+      setErrors((prev) => ({ ...prev, email: null }));
+    }
+    // Si hay error interno, limpiarlo
+    if (internalError) {
+      setInternalError(null);
+    }
+    // Si hay error externo, no lo manejamos aquí (el componente padre debe manejarlo)
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    if (!onSubmit) {
+      console.warn('ForgotPassword: onSubmit prop is required');
+      return;
+    }
+
+    // Usar loading interno si no se pasa como prop
+    if (externalLoading === undefined) {
+      setInternalLoading(true);
+    }
+    setErrors({});
+    setInternalError(null);
+
+    try {
+      const result = await onSubmit({ email, countryCode: null });
+      
+      if (result?.resetLink) {
+        setResetLink(result.resetLink);
+      } else {
+        // Si no hay resetLink pero no hay error, asumir éxito
+        setResetLink('success');
+      }
+    } catch (err) {
+      let errorMessage = t('forgotPassword.errors.sendFailed') ?? 'Error al enviar el link. Intenta nuevamente.';
+
+      if (err?.response?.status === 404) {
+        errorMessage = err?.response?.data?.message || 
+          err?.message || 
+          'No se encontró una cuenta asociada a este correo electrónico. Por favor, verifica que el correo esté correcto.';
+      } else if (err?.response?.status === 400) {
+        errorMessage = err?.response?.data?.message || 
+          err?.message || 
+          'El correo electrónico ingresado no es válido.';
+      } else if (err?.response?.status >= 500) {
+        errorMessage = 'Error del servidor. Por favor, intenta más tarde.';
+      } else if (err?.message) {
+        errorMessage = err.message;
+      }
+
+      if (externalError === undefined) {
+        setInternalError(errorMessage);
+      }
+      // Si el error viene como prop, el componente padre lo maneja
+    } finally {
+      if (externalLoading === undefined) {
+        setInternalLoading(false);
+      }
+    }
+  };
+
+  return (
+    <div
+      className={`min-h-screen flex flex-col ${className}`}
+      style={{ backgroundColor: '#f5f5f5' }}
+      {...props}
+    >
+      <div className="flex-1 flex items-center justify-center p-4">
+        <div className="w-full max-w-md">
+          {/* Título y subtítulo */}
+          <div className="mb-8 text-center">
+            <Typography
+              variant="h3"
+              className="mb-2 font-semibold"
+              style={{
+                color: '#2D5C63',
+                fontFamily: 'inherit',
+                fontWeight: 400,
+                fontStyle: 'normal',
+                fontSize: '32px',
+                lineHeight: '48px',
+                letterSpacing: '0px',
+                textAlign: 'center',
+              }}
+            >
+              {t('forgotPassword.title') ?? 'Recuperar contraseña'}
+            </Typography>
+            <Typography
+              variant="body2"
+              className="text-gray-600"
+              style={{
+                fontFamily: 'inherit',
+                fontWeight: 400,
+                fontStyle: 'normal',
+                fontSize: '16px',
+                lineHeight: '24px',
+                letterSpacing: '0px',
+                textAlign: 'center',
+              }}
+            >
+              {t('forgotPassword.subtitle') ?? 'Ingresa tu correo electrónico y te enviaremos un link para restablecer tu contraseña.'}
+            </Typography>
+          </div>
+
+          {/* Card blanca */}
+          <div className="bg-white border border-gray-200 rounded-lg p-6 shadow-md">
+            {/* Estado de éxito */}
+            {resetLink && !loading && (
+              <div className="text-center space-y-4">
+                <div
+                  className="rounded-lg p-4 border"
+                  style={{
+                    backgroundColor: '#d1fae5',
+                    borderColor: '#10b981',
+                  }}
+                >
+                  <Typography
+                    variant="body2"
+                    className="font-medium"
+                    style={{ color: '#065f46' }}
+                  >
+                    {t('forgotPassword.success.title') ?? 'Link generado'}
+                  </Typography>
+                  <Typography
+                    variant="body2"
+                    className="mt-2"
+                    style={{ color: '#047857', fontSize: '14px' }}
+                  >
+                    {t('forgotPassword.success.message') ?? 'Se ha generado un link de recuperación. Haz click en el enlace a continuación para restablecer tu contraseña.'}
+                  </Typography>
+                </div>
+                {resetLink !== 'success' && (
+                  <a
+                    href={resetLink}
+                    className="inline-block px-4 py-2 rounded-lg font-medium text-white hover:opacity-90 transition-opacity"
+                    style={{ backgroundColor: '#2D5C63' }}
+                  >
+                    {t('forgotPassword.success.linkLabel') ?? 'Ir a restablecer contraseña'}
+                  </a>
+                )}
+              </div>
+            )}
+
+            {/* Estado de carga */}
+            {loading && (
+              <div className="text-center space-y-4">
+                <div
+                  className="rounded-lg p-4 border"
+                  style={{
+                    backgroundColor: '#dbeafe',
+                    borderColor: '#3b82f6',
+                  }}
+                >
+                  <Typography
+                    variant="body2"
+                    className="font-medium"
+                    style={{ color: '#1e40af' }}
+                  >
+                    {t('forgotPassword.sending') ?? 'Enviando...'}
+                  </Typography>
+                  <Typography
+                    variant="body2"
+                    className="mt-2"
+                    style={{ color: '#1e3a8a', fontSize: '14px' }}
+                  >
+                    {t('forgotPassword.waitingMessage') ?? 'Espera, estamos procesando tu solicitud...'}
+                  </Typography>
+                  <Typography
+                    variant="body2"
+                    className="mt-2"
+                    style={{ color: '#1e3a8a', fontSize: '13px' }}
+                  >
+                    {t('forgotPassword.waitingSubmessage') ?? 'Hemos enviado un link de recuperación a tu correo. Esto puede tardar unos momentos.'}
+                  </Typography>
+                </div>
+              </div>
+            )}
+
+            {/* Estado de formulario */}
+            {!resetLink && !loading && (
+              <>
+                {/* Botón volver */}
+                {onBackToLogin && (
+                  <button
+                    type="button"
+                    onClick={onBackToLogin}
+                    className="flex items-center gap-2 mb-6 text-body-md hover:underline font-medium cursor-pointer"
+                    style={{ color: '#2D5C63' }}
+                  >
+                    <Icon name="ArrowLeftIcon" variant="24-outline" size={18} />
+                    <span>{t('forgotPassword.backToLogin') ?? 'Volver al inicio de sesión'}</span>
+                  </button>
+                )}
+
+                {/* Formulario */}
+                <form onSubmit={handleSubmit} className="space-y-4">
+                  {/* Input de email */}
+                  <div>
+                    <label
+                      className="block mb-2 font-medium text-sm"
+                      style={{ color: '#2D5C63' }}
+                    >
+                      {t('login.email') ?? t('form.email') ?? 'Correo electrónico'}
+                    </label>
+                    <input
+                      type="email"
+                      placeholder={t('login.emailPlaceholder') ?? t('placeholder.email') ?? 'Ingresa tu correo electrónico'}
+                      value={email}
+                      onChange={handleEmailChange}
+                      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',
+                        borderWidth: '1px',
+                        borderStyle: 'solid',
+                      }}
+                    />
+                    {errors.email && (
+                      <p className="mt-1 text-sm text-red-600">{errors.email}</p>
+                    )}
+                  </div>
+
+                  {/* Error general */}
+                  {error && (
+                    <div
+                      className="rounded-lg p-4 border"
+                      style={{
+                        backgroundColor: '#fecaca',
+                        borderColor: '#ef4444',
+                      }}
+                    >
+                      <Typography
+                        variant="body2"
+                        className="font-bold"
+                        style={{ color: '#b91c1c' }}
+                      >
+                        {error}
+                      </Typography>
+                    </div>
+                  )}
+
+                  {/* Botón de envío */}
+                  <div className="pt-4">
+                    <Button
+                      tipo="Primary"
+                      color="Teal"
+                      tamaño="Default"
+                      type="submit"
+                      className="w-full"
+                      disabled={loading || !hasAtSymbol(email)}
+                    >
+                      <span
+                        style={{
+                          fontFamily: "'IBM Plex Sans', sans-serif",
+                          fontWeight: 400,
+                          fontStyle: 'normal',
+                          fontSize: '16px',
+                          lineHeight: '24px',
+                          letterSpacing: '0%',
+                        }}
+                      >
+                        {loading
+                          ? t('forgotPassword.sending') ?? 'Enviando...'
+                          : t('forgotPassword.button') ?? 'Enviar link'}
+                      </span>
+                    </Button>
+                  </div>
+                </form>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ForgotPassword;
+