anima-ds-nucleus 1.0.21 → 1.0.22

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

package/src/style.css

@@ -755,4 +755,110 @@
   background-position: center;
   mix-blend-mode: soft-light;
   opacity: 0.85;
+}
+
+/* ============================================
+   LOGIN FORM - Clases estables del Design System
+   ============================================ */
+
+/* Contenedor principal del LoginForm */
+.anima-loginform__container {
+  width: 100%;
+  max-width: 28rem; /* 448px - equivalente aproximado a 427px pero responsive */
+}
+
+/* Card del formulario */
+.anima-loginform__card {
+  min-height: 25.5625rem; /* 409px */
+  border-radius: 0.875rem; /* 14px */
+  border: 1px solid #0000001A;
+  padding: 1.5rem; /* 24px */
+  background: #FFFFFF;
+  box-shadow: 0px 4px 6px -4px #0000001A, 0px 10px 15px -3px #0000001A;
+}
+
+/* Fila de botones sociales */
+.anima-loginform__socialRow {
+  display: flex;
+  gap: 1.25rem; /* 20px */
+  width: 100%;
+  height: 2.25rem; /* 36px */
+}
+
+/* Botones sociales individuales */
+.anima-loginform__socialButton {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.25rem; /* 36px */
+  padding: 0.5rem 2.6875rem; /* 8px 43px */
+  gap: 1rem; /* 16px */
+  border-radius: 0.5rem; /* 8px */
+  border: 1px solid #38656D;
+  background-color: white;
+  transition: background-color 0.2s;
+  cursor: pointer;
+}
+
+.anima-loginform__socialButton:hover {
+  background-color: #f9fafb; /* hover:bg-gray-50 */
+}
+
+/* Caja de error general */
+.anima-loginform__errorBox {
+  width: 100%;
+  min-height: 4.25rem; /* 68px */
+}
+
+/* Responsive: mantener botones sociales horizontales en mobile */
+@media (max-width: 768px) {
+  .anima-loginform__socialRow {
+    flex-wrap: wrap;
+  }
+  
+  .anima-loginform__socialButton {
+    min-width: calc(50% - 0.625rem); /* 50% menos la mitad del gap */
+  }
+}
+
+/* ============================================
+   PASSWORD INPUT - Clases estables del Design System
+   ============================================ */
+
+/* Contenedor del campo de contraseña */
+.anima-passwordfield {
+  width: 100%;
+  position: relative;
+}
+
+/* Input de contraseña con padding para el toggle */
+.anima-passwordfield__input {
+  padding-right: 2.75rem !important; /* Espacio para el botón de toggle */
+}
+
+/* Botón de toggle de visibilidad */
+.anima-passwordfield__toggle {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0.75rem;
+  color: #6b7280;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.anima-passwordfield__toggle:hover {
+  color: #374151;
+}
+
+.anima-passwordfield__toggle:focus {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+  border-radius: 0.25rem;
 }