anima-ds-nucleus 1.0.21 → 1.0.23

package/src/components/Views/NewPassword/NewPassword.jsx

@@ -0,0 +1,389 @@
+import { useTranslation } from 'react-i18next';
+import { PasswordInput } from '../../Inputs/PasswordInput/PasswordInput';
+import { Button } from '../../Atoms/Button/Button';
+import { Typography } from '../../Atoms/Typography/Typography';
+
+export const NewPassword = ({
+  variant = 'default',
+  layout = 'embedded',
+  // Título y subtítulo
+  title,
+  subtitle,
+  // Password field
+  passwordLabel,
+  passwordPlaceholder,
+  passwordValue,
+  onPasswordChange,
+  passwordError,
+  // Confirm field
+  confirmPasswordLabel,
+  confirmPasswordPlaceholder,
+  confirmPasswordValue,
+  onConfirmPasswordChange,
+  confirmPasswordError,
+  // Requirements box
+  requirementsTitle,
+  requirementsItems = [],
+  requirementsPrefix,
+  showRequirements = true,
+  // General error
+  generalError,
+  // Actions
+  cancelLabel,
+  submitLabel,
+  onCancel,
+  onSubmit,
+  disabled = false,
+  submitting = false,
+  // Success
+  success = false,
+  successTitle,
+  successMessage,
+  successExtra,
+  className = '',
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const isHexaLogin = variant === 'hexa-login';
+  const isPageLayout = layout === 'page';
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (onSubmit && !disabled && !submitting) {
+      onSubmit({
+        password: passwordValue,
+        confirmPassword: confirmPasswordValue,
+      });
+    }
+  };
+
+  // Si está en modo success, mostrar solo el mensaje de éxito
+  if (success) {
+    return (
+      <div
+        className={`${isPageLayout ? 'min-h-screen flex flex-col' : ''} ${className}`}
+        style={isPageLayout ? { backgroundColor: '#f5f5f5' } : undefined}
+        {...props}
+      >
+        <div className={isPageLayout ? 'flex-1 flex items-center justify-center p-4' : 'p-4'}>
+          <div className="w-full max-w-md">
+            {/* Título y subtítulo */}
+            {(title || subtitle) && (
+              <div className="mb-8 text-center">
+                {title && (
+                  <Typography
+                    variant="h3"
+                    className="mb-2 font-semibold"
+                    style={
+                      isHexaLogin
+                        ? {
+                            color: '#2D5C63',
+                            fontFamily: 'inherit',
+                            fontWeight: 400,
+                            fontStyle: 'normal',
+                            fontSize: '32px',
+                            lineHeight: '48px',
+                            letterSpacing: '0px',
+                            textAlign: 'center',
+                          }
+                        : undefined
+                    }
+                  >
+                    {title}
+                  </Typography>
+                )}
+                {subtitle && (
+                  <Typography
+                    variant="body2"
+                    className="text-gray-600"
+                    style={
+                      isHexaLogin
+                        ? {
+                            fontFamily: 'inherit',
+                            fontWeight: 400,
+                            fontStyle: 'normal',
+                            fontSize: '16px',
+                            lineHeight: '24px',
+                            letterSpacing: '0px',
+                            textAlign: 'center',
+                          }
+                        : undefined
+                    }
+                  >
+                    {subtitle}
+                  </Typography>
+                )}
+              </div>
+            )}
+
+            {/* Card blanca */}
+            <div className="bg-white border border-gray-200 rounded-lg p-6 shadow-md">
+              {/* Success box */}
+              <div
+                className="rounded-lg p-4 border"
+                style={{
+                  backgroundColor: '#d1fae5',
+                  borderColor: '#10b981',
+                }}
+              >
+                {successTitle && (
+                  <Typography
+                    variant="body2"
+                    className="font-medium"
+                    style={{ color: '#065f46' }}
+                  >
+                    {successTitle}
+                  </Typography>
+                )}
+                {successMessage && (
+                  <Typography
+                    variant="body2"
+                    className={successTitle ? 'mt-2' : ''}
+                    style={{ color: '#047857', fontSize: '14px' }}
+                  >
+                    {successMessage}
+                  </Typography>
+                )}
+                {successExtra && <div className="mt-4">{successExtra}</div>}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`${isPageLayout ? 'min-h-screen flex flex-col' : ''} ${className}`}
+      style={isPageLayout ? { backgroundColor: '#f5f5f5' } : undefined}
+      {...props}
+    >
+      <div className={isPageLayout ? 'flex-1 flex items-center justify-center p-4' : 'p-4'}>
+        <div className="w-full max-w-md">
+          {/* Título y subtítulo */}
+          {(title || subtitle) && (
+            <div className="mb-8 text-center">
+              {title && (
+                <Typography
+                  variant="h3"
+                  className="mb-2 font-semibold"
+                  style={
+                    isHexaLogin
+                      ? {
+                          color: '#2D5C63',
+                          fontFamily: 'inherit',
+                          fontWeight: 400,
+                          fontStyle: 'normal',
+                          fontSize: '32px',
+                          lineHeight: '48px',
+                          letterSpacing: '0px',
+                          textAlign: 'center',
+                        }
+                      : undefined
+                  }
+                >
+                  {title}
+                </Typography>
+              )}
+              {subtitle && (
+                <Typography
+                  variant="body2"
+                  className="text-gray-600"
+                  style={
+                    isHexaLogin
+                      ? {
+                          fontFamily: 'inherit',
+                          fontWeight: 400,
+                          fontStyle: 'normal',
+                          fontSize: '16px',
+                          lineHeight: '24px',
+                          letterSpacing: '0px',
+                          textAlign: 'center',
+                        }
+                      : undefined
+                  }
+                >
+                  {subtitle}
+                </Typography>
+              )}
+            </div>
+          )}
+
+          {/* Card blanca */}
+          <div className="bg-white border border-gray-200 rounded-lg p-6 shadow-md">
+            <form onSubmit={handleSubmit} className="space-y-4">
+              {/* Password field */}
+              <div>
+                <PasswordInput
+                  variant={isHexaLogin ? 'hexa-login' : undefined}
+                  label={passwordLabel}
+                  labelClassName={isHexaLogin ? 'block mb-2 font-medium text-sm' : undefined}
+                  labelStyle={isHexaLogin ? { color: '#2D5C63' } : undefined}
+                  placeholder={passwordPlaceholder}
+                  value={passwordValue || ''}
+                  onChange={onPasswordChange}
+                  error={passwordError}
+                  inputClassName={
+                    isHexaLogin
+                      ? '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 anima-passwordfield__input'
+                      : undefined
+                  }
+                  style={
+                    isHexaLogin
+                      ? {
+                          borderColor: passwordError ? '#ef4444' : '#2D5C63',
+                          borderWidth: '1px',
+                          borderStyle: 'solid',
+                        }
+                      : undefined
+                  }
+                />
+              </div>
+
+              {/* Confirm password field */}
+              <div>
+                <PasswordInput
+                  variant={isHexaLogin ? 'hexa-login' : undefined}
+                  label={confirmPasswordLabel}
+                  labelClassName={isHexaLogin ? 'block mb-2 font-medium text-sm' : undefined}
+                  labelStyle={isHexaLogin ? { color: '#2D5C63' } : undefined}
+                  placeholder={confirmPasswordPlaceholder}
+                  value={confirmPasswordValue || ''}
+                  onChange={onConfirmPasswordChange}
+                  error={confirmPasswordError}
+                  inputClassName={
+                    isHexaLogin
+                      ? '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 anima-passwordfield__input'
+                      : undefined
+                  }
+                  style={
+                    isHexaLogin
+                      ? {
+                          borderColor: confirmPasswordError ? '#ef4444' : '#2D5C63',
+                          borderWidth: '1px',
+                          borderStyle: 'solid',
+                        }
+                      : undefined
+                  }
+                />
+              </div>
+
+              {/* Requirements box */}
+              {showRequirements && requirementsItems.length > 0 && (
+                <div
+                  className="rounded-lg p-4 border"
+                  style={{
+                    background: '#f5f3ff',
+                    borderColor: '#a78bfa',
+                    color: '#0c4a6e',
+                    fontFamily: "'IBM Plex Mono', monospace",
+                  }}
+                >
+                  <Typography
+                    variant="body2"
+                    className="text-sm"
+                    style={{ 
+                      color: '#0c4a6e',
+                      fontFamily: "'IBM Plex Mono', monospace",
+                      whiteSpace: 'pre-line',
+                    }}
+                  >
+                    {requirementsTitle || (() => {
+                      const prefix = requirementsPrefix || t('form.passwordRequirementsPrefix') || 'Recuerda que la contraseña debe tener:';
+                      const defaultItems = requirementsItems.length > 0 ? requirementsItems : [
+                        t('form.passwordRequirementMinChars') || 'Un mínimo de 6 caracteres',
+                        t('form.passwordRequirementOther') || 'Una mayúscula, un número, un carácter especial',
+                      ];
+                      
+                      return `${prefix}\n${defaultItems[0]}\n\n${defaultItems.slice(1).join(', ')}`;
+                    })()}
+                  </Typography>
+                </div>
+              )}
+
+              {/* General error */}
+              {generalError && (
+                <div
+                  className="rounded-lg p-4 border"
+                  style={{
+                    backgroundColor: '#fecaca',
+                    borderColor: '#ef4444',
+                  }}
+                >
+                  <Typography
+                    variant="body2"
+                    className="font-bold"
+                    style={{ color: '#b91c1c' }}
+                  >
+                    {generalError}
+                  </Typography>
+                </div>
+              )}
+
+              {/* Botonera 2 columnas */}
+              <div className="flex gap-4 pt-4">
+                {onCancel && (
+                  <Button
+                    type="button"
+                    tipo="Secondary"
+                    color="Teal"
+                    tamaño="Default"
+                    className="flex-1"
+                    onClick={onCancel}
+                    disabled={disabled || submitting}
+                  >
+                    <span
+                      style={
+                        isHexaLogin
+                          ? {
+                              fontFamily: "'IBM Plex Sans', sans-serif",
+                              fontWeight: 400,
+                              fontStyle: 'normal',
+                              fontSize: '16px',
+                              lineHeight: '24px',
+                              letterSpacing: '0%',
+                            }
+                          : undefined
+                      }
+                    >
+                      {cancelLabel || 'Cancelar'}
+                    </span>
+                  </Button>
+                )}
+                <Button
+                  type="submit"
+                  tipo="Primary"
+                  color="Teal"
+                  tamaño="Default"
+                  className={onCancel ? 'flex-1' : 'w-full'}
+                  disabled={disabled || submitting}
+                >
+                  <span
+                    style={
+                      isHexaLogin
+                        ? {
+                            fontFamily: "'IBM Plex Sans', sans-serif",
+                            fontWeight: 400,
+                            fontStyle: 'normal',
+                            fontSize: '16px',
+                            lineHeight: '24px',
+                            letterSpacing: '0%',
+                          }
+                        : undefined
+                    }
+                  >
+                    {submitting ? 'Guardando...' : submitLabel || 'Guardar'}
+                  </span>
+                </Button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NewPassword;
+

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

@@ -0,0 +1,291 @@
+import { useState } from 'react';
+import { NewPassword } from './NewPassword';
+import { I18nProvider } from '../../../providers/I18nProvider';
+
+export default {
+  title: 'Views/NewPassword',
+  component: NewPassword,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <I18nProvider language="es-AR">
+        <Story />
+      </I18nProvider>
+    ),
+  ],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'hexa-login'],
+      description: 'Variante del componente',
+    },
+    layout: {
+      control: 'select',
+      options: ['embedded', 'page'],
+      description: 'Layout del componente',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Deshabilitar el formulario',
+    },
+    submitting: {
+      control: 'boolean',
+      description: 'Estado de envío',
+    },
+    success: {
+      control: 'boolean',
+      description: 'Mostrar estado de éxito',
+    },
+    showRequirements: {
+      control: 'boolean',
+      description: 'Mostrar caja de requisitos',
+    },
+  },
+};
+
+// Default (form)
+export const Default = {
+  render: () => {
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [passwordError, setPasswordError] = useState('');
+    const [confirmPasswordError, setConfirmPasswordError] = useState('');
+
+    return (
+      <NewPassword
+        title="Nueva contraseña"
+        subtitle="Ingresa tu nueva contraseña y confírmala"
+        passwordLabel="Contraseña"
+        passwordPlaceholder="Ingresa tu contraseña"
+        passwordValue={password}
+        onPasswordChange={(e) => {
+          setPassword(e.target.value);
+          setPasswordError('');
+        }}
+        passwordError={passwordError}
+        confirmPasswordLabel="Confirmar contraseña"
+        confirmPasswordPlaceholder="Confirma tu contraseña"
+        confirmPasswordValue={confirmPassword}
+        onConfirmPasswordChange={(e) => {
+          setConfirmPassword(e.target.value);
+          setConfirmPasswordError('');
+        }}
+        confirmPasswordError={confirmPasswordError}
+        requirementsItems={[
+          'Un mínimo de 6 caracteres',
+          'Una mayúscula, un número, un carácter especial',
+        ]}
+        cancelLabel="Cancelar"
+        submitLabel="Guardar"
+        onCancel={() => {
+          console.log('Cancel clicked');
+          alert('Cancelar');
+        }}
+        onSubmit={(data) => {
+          console.log('Submit data:', data);
+          if (data.password !== data.confirmPassword) {
+            setConfirmPasswordError('Las contraseñas no coinciden');
+            return;
+          }
+          if (data.password.length < 8) {
+            setPasswordError('La contraseña debe tener al menos 8 caracteres');
+            return;
+          }
+          alert('Contraseña guardada exitosamente');
+        }}
+      />
+    );
+  },
+};
+
+// WithErrors
+export const WithErrors = {
+  render: () => {
+    const [password, setPassword] = useState('test');
+    const [confirmPassword, setConfirmPassword] = useState('test2');
+
+    return (
+      <NewPassword
+        title="Nueva contraseña"
+        subtitle="Ingresa tu nueva contraseña y confírmala"
+        passwordLabel="Contraseña"
+        passwordPlaceholder="Ingresa tu contraseña"
+        passwordValue={password}
+        onPasswordChange={(e) => setPassword(e.target.value)}
+        passwordError="La contraseña debe tener al menos 8 caracteres"
+        confirmPasswordLabel="Confirmar contraseña"
+        confirmPasswordPlaceholder="Confirma tu contraseña"
+        confirmPasswordValue={confirmPassword}
+        onConfirmPasswordChange={(e) => setConfirmPassword(e.target.value)}
+        confirmPasswordError="Las contraseñas no coinciden"
+        requirementsItems={[
+          'Un mínimo de 6 caracteres',
+          'Una mayúscula, un número, un carácter especial',
+        ]}
+        generalError="Error al guardar la contraseña. Por favor, intenta nuevamente."
+        cancelLabel="Cancelar"
+        submitLabel="Guardar"
+        onCancel={() => alert('Cancelar')}
+        onSubmit={(data) => {
+          console.log('Submit data:', data);
+        }}
+      />
+    );
+  },
+};
+
+// Submitting
+export const Submitting = {
+  args: {
+    title: 'Nueva contraseña',
+    subtitle: 'Ingresa tu nueva contraseña y confírmala',
+    passwordLabel: 'Contraseña',
+    passwordPlaceholder: 'Ingresa tu contraseña',
+    passwordValue: 'password123',
+    onPasswordChange: () => {},
+    confirmPasswordLabel: 'Confirmar contraseña',
+    confirmPasswordPlaceholder: 'Confirma tu contraseña',
+    confirmPasswordValue: 'password123',
+    onConfirmPasswordChange: () => {},
+    requirementsItems: [
+      'Un mínimo de 6 caracteres',
+      'Una mayúscula, un número, un carácter especial',
+    ],
+    cancelLabel: 'Cancelar',
+    submitLabel: 'Guardar',
+    onCancel: () => alert('Cancelar'),
+    onSubmit: () => {},
+    submitting: true,
+    disabled: true,
+  },
+};
+
+// Success
+export const Success = {
+  args: {
+    title: 'Nueva contraseña',
+    subtitle: 'Ingresa tu nueva contraseña y confírmala',
+    passwordLabel: 'Contraseña',
+    passwordPlaceholder: 'Ingresa tu contraseña',
+    confirmPasswordLabel: 'Confirmar contraseña',
+    confirmPasswordPlaceholder: 'Confirma tu contraseña',
+    cancelLabel: 'Cancelar',
+    submitLabel: 'Guardar',
+    onCancel: () => alert('Cancelar'),
+    onSubmit: () => {},
+    success: true,
+    successTitle: 'Contraseña actualizada',
+    successMessage: 'Tu contraseña ha sido actualizada exitosamente. Ya puedes iniciar sesión con tu nueva contraseña.',
+  },
+};
+
+// Variant hexa-login
+export const HexaLogin = {
+  render: () => {
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+
+    return (
+      <NewPassword
+        variant="hexa-login"
+        title="Nueva contraseña"
+        subtitle="Ingresa tu nueva contraseña y confírmala"
+        passwordLabel="Contraseña"
+        passwordPlaceholder="Ingresa tu contraseña"
+        passwordValue={password}
+        onPasswordChange={(e) => setPassword(e.target.value)}
+        confirmPasswordLabel="Confirmar contraseña"
+        confirmPasswordPlaceholder="Confirma tu contraseña"
+        confirmPasswordValue={confirmPassword}
+        onConfirmPasswordChange={(e) => setConfirmPassword(e.target.value)}
+        requirementsItems={[
+          'Un mínimo de 6 caracteres',
+          'Una mayúscula, un número, un carácter especial',
+        ]}
+        cancelLabel="Cancelar"
+        submitLabel="Guardar"
+        onCancel={() => alert('Cancelar')}
+        onSubmit={(data) => {
+          console.log('Submit data:', data);
+          alert('Contraseña guardada');
+        }}
+      />
+    );
+  },
+};
+
+// Layout embedded vs page
+export const LayoutEmbedded = {
+  args: {
+    variant: 'hexa-login',
+    layout: 'embedded',
+    title: 'Nueva contraseña',
+    subtitle: 'Ingresa tu nueva contraseña y confírmala',
+    passwordLabel: 'Contraseña',
+    passwordPlaceholder: 'Ingresa tu contraseña',
+    passwordValue: '',
+    onPasswordChange: () => {},
+    confirmPasswordLabel: 'Confirmar contraseña',
+    confirmPasswordPlaceholder: 'Confirma tu contraseña',
+    confirmPasswordValue: '',
+    onConfirmPasswordChange: () => {},
+    requirementsItems: [
+      'Un mínimo de 6 caracteres',
+      'Una mayúscula, un número, un carácter especial',
+    ],
+    cancelLabel: 'Cancelar',
+    submitLabel: 'Guardar',
+    onCancel: () => alert('Cancelar'),
+    onSubmit: () => {},
+  },
+};
+
+export const LayoutPage = {
+  args: {
+    variant: 'hexa-login',
+    layout: 'page',
+    title: 'Nueva contraseña',
+    subtitle: 'Ingresa tu nueva contraseña y confírmala',
+    passwordLabel: 'Contraseña',
+    passwordPlaceholder: 'Ingresa tu contraseña',
+    passwordValue: '',
+    onPasswordChange: () => {},
+    confirmPasswordLabel: 'Confirmar contraseña',
+    confirmPasswordPlaceholder: 'Confirma tu contraseña',
+    confirmPasswordValue: '',
+    onConfirmPasswordChange: () => {},
+    requirementsItems: [
+      'Un mínimo de 6 caracteres',
+      'Una mayúscula, un número, un carácter especial',
+    ],
+    cancelLabel: 'Cancelar',
+    submitLabel: 'Guardar',
+    onCancel: () => alert('Cancelar'),
+    onSubmit: () => {},
+  },
+};
+
+// Success con extra content
+export const SuccessWithExtra = {
+  args: {
+    title: 'Nueva contraseña',
+    subtitle: 'Ingresa tu nueva contraseña y confírmala',
+    passwordLabel: 'Contraseña',
+    passwordPlaceholder: 'Ingresa tu contraseña',
+    confirmPasswordLabel: 'Confirmar contraseña',
+    confirmPasswordPlaceholder: 'Confirma tu contraseña',
+    cancelLabel: 'Cancelar',
+    submitLabel: 'Guardar',
+    onCancel: () => alert('Cancelar'),
+    onSubmit: () => {},
+    success: true,
+    successTitle: 'Contraseña actualizada',
+    successMessage: 'Tu contraseña ha sido actualizada exitosamente.',
+    successExtra: (
+      <div className="text-sm text-gray-600 mt-2">
+        Serás redirigido al login en <strong>5 segundos</strong>...
+      </div>
+    ),
+  },
+};
+

package/src/index.js

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