anteriority-ui 1.0.0

package/hooks/useAdminPasswordReset.js

@@ -0,0 +1,133 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import api from '../features/password-reset/api';
+
+export default function useAdminPasswordReset() {
+  const [requestLoading, setRequestLoading] = useState(false);
+  const [pwdLoading, setPwdLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(false);
+  const [status, setStatus] = useState('Idle'); // Idle, Pending, Accepted, Completed
+  const [pendingList, setPendingList] = useState([]);
+  const [fetchLoading, setFetchLoading] = useState(false);
+  const [activeTicket, setActiveTicket] = useState(null);
+
+  const pollingInterval = useRef(null);
+
+  const clearError = () => setError(null);
+
+  const fetchPendingList = useCallback(async () => {
+    setFetchLoading(true);
+    try {
+      const data = await api.getPendingResets();
+      setPendingList(Array.isArray(data) ? data : []);
+    } catch (err) {
+      console.error("Error al obtener reseteos pendientes:", err);
+    } finally {
+      setFetchLoading(false);
+    }
+  }, []);
+
+  // Paso 1: Solicitar el reseteo
+  const requestPasswordReset = async (email) => {
+    setRequestLoading(true);
+    setError(null);
+    setSuccess(false);
+    try {
+      await api.requestPasswordReset(email);
+      setStatus('Pending');
+      startPolling(email);
+      return true;
+    } catch (err) {
+      setError(err?.message || 'Error al solicitar el reseteo de contraseña');
+      return false;
+    } finally {
+      setRequestLoading(false);
+    }
+  };
+
+  const stopPolling = useCallback(() => {
+    if (pollingInterval.current) {
+      clearInterval(pollingInterval.current);
+      pollingInterval.current = null;
+    }
+  }, []);
+
+  // Paso 2: Polling
+  const checkStatus = useCallback(async (email) => {
+    try {
+      const res = await api.getResetStatus(email);
+      const data = res?.data ?? res;
+      if (data) {
+        setActiveTicket(data);
+        const currentStatus = data.status;
+        if (currentStatus === 'Accepted') {
+          setStatus('Accepted');
+          stopPolling();
+        } else if (currentStatus === 'None') {
+          setStatus('Idle');
+          stopPolling();
+        }
+      }
+    } catch (err) {
+      console.error("Error al consultar el estado del ticket:", err);
+    }
+  }, [stopPolling]);
+
+  const startPolling = useCallback((email) => {
+    stopPolling();
+    checkStatus(email);
+    // Iniciar polling cada 5 segundos
+    pollingInterval.current = setInterval(() => {
+      checkStatus(email);
+    }, 5000);
+  }, [stopPolling, checkStatus]);
+
+  // Paso 3: Asignar nueva clave
+  const assignNewPassword = async (email, newPassword) => {
+    setPwdLoading(true);
+    setError(null);
+    try {
+      await api.assignNewPassword(email, newPassword);
+      setSuccess(true);
+      setStatus('Completed');
+      return true;
+    } catch (err) {
+      setError(err?.message || 'Error al asignar la nueva contraseña');
+      return false;
+    } finally {
+      setPwdLoading(false);
+    }
+  };
+
+  // Limpiar polling al desmontar
+  useEffect(() => {
+    return () => stopPolling();
+  }, []);
+
+  const resetResetState = useCallback(() => {
+    setSuccess(false);
+    setStatus('Idle');
+    setError(null);
+    setActiveTicket(null);
+  }, []);
+
+  return {
+    requestPasswordReset,
+    assignNewPassword,
+    requestLoading,
+    pwdLoading,
+    error,
+    success,
+    status,
+    pendingList,
+    fetchLoading,
+    clearError,
+    setStatus,
+    stopPolling,
+    fetchPendingList,
+    startPolling,
+    activeTicket,
+    setActiveTicket,
+    resetResetState
+  };
+}

package/index.js

@@ -0,0 +1,57 @@
+// Barrel de la librería: permite `import { Button, Sidebar } from 'anteriority-ui'`
+// en vez de conocer el subpath exacto de cada componente. Los subpaths
+// (`anteriority-ui/screens/components/Button`) siguen funcionando igual para quien
+// los prefiera o para acceder a exports nombrados extra (ej. Button.VARIANTS).
+//
+// Al agregar un componente nuevo en screens/components/, agregarlo también acá.
+
+export { default as AlertModal } from './screens/components/AlertModal/AlertModal.js';
+export { default as Badge } from './screens/components/Badge/index.js';
+export { default as Barnner } from './screens/components/Barnner/index.js';
+export { default as BlueLink } from './screens/components/BlueLink/index.js';
+export { default as Breadcrumbs } from './screens/components/Breadcrumbs/index.js';
+export { default as Button } from './screens/components/Button/index.js';
+export { default as CalendarComponent } from './screens/components/CalendarComponent/CustomDatePicker.js';
+export { default as CalendarPicker } from './screens/components/CalendarPicker/index.js';
+export { default as CardV1 } from './screens/components/CardV1/index.js';
+export { default as ChatWindow } from './screens/components/ChatWindow/index.js';
+export { default as Checks } from './screens/components/Checks/index.js';
+export { default as Container } from './screens/components/Container/index.js';
+export { default as CopyText } from './screens/components/CopyText/index.js';
+export { default as CountdownBar } from './screens/components/CountdownBar/index.js';
+export { default as DateTag } from './screens/components/DateTag/index.js';
+export { default as DesplegablePanel } from './screens/components/DesplegablePanel/index.js';
+export { default as DrawPanel } from './screens/components/DrawPanel/index.js';
+export { default as Filter } from './screens/components/Filter/index.js';
+export { FormCard, FormInput, FormTextArea } from './screens/components/FormControls/index.js';
+export { default as Frame } from './screens/components/Frame/index.js';
+export { default as GreenHighlight } from './screens/components/GreenHighlight/index.js';
+export { default as HoursPicker } from './screens/components/HoursPicker/index.js';
+export { default as InfoTooltip } from './screens/components/InfoTooltip/index.js';
+export { default as Input } from './screens/components/Input/index.js';
+export { default as Loading } from './screens/components/Loading/index.js';
+export { default as MarkdownContent } from './screens/components/MarkdownContent/index.js';
+export { default as MarkdownEditor } from './screens/components/MarkdownEditor/index.js';
+export { default as InputWithIcon } from './screens/components/Material-UI/Components/InputWithIcon/index.js';
+export { default as MenuPopover } from './screens/components/Material-UI/Components/MenuPopover/index.js';
+export { default as MultilinePlaceholder } from './screens/components/Material-UI/Components/MultilinePlaceholder/index.js';
+export { default as Paginador } from './screens/components/Material-UI/Components/Paginador/index.js';
+export { default as Search } from './screens/components/Material-UI/Components/Search/index.js';
+export { default as Selector } from './screens/components/Material-UI/Components/Selector/index.js';
+export { default as TextField } from './screens/components/Material-UI/Components/TextField/index.js';
+export { default as ModalTooltip } from './screens/components/ModalTooltip/ModalTooltip.js';
+export { default as ErrorMessage } from './screens/components/Notification/Error/ErrorMessage.js';
+export { default as PasswordResetPanel } from './screens/components/PasswordResetPanel/index.js';
+export { default as PlaceholderButton } from './screens/components/PlaceholderButton/index.js';
+export { default as Profile } from './screens/components/Profile/index.js';
+export { default as ProfileAvatar } from './screens/components/Profile/Avatar/index.js';
+export { default as ScrollBar } from './screens/components/ScrollBar/index.js';
+export { default as Sidebar } from './screens/components/Sidebar/index.js';
+export { default as Skeleton } from './screens/components/Skeleton/index.js';
+export { default as SubSidebarLayout } from './screens/components/SubSidebarLayout/index.js';
+export { default as SummaryCard } from './screens/components/SummaryCard/index.js';
+export { default as Swich } from './screens/components/Swich/index.js';
+export { default as TableA } from './screens/components/TableA/index.js';
+export { default as TableB } from './screens/components/TableB/index.js';
+export { default as ToggleCard } from './screens/components/ToggleCard/index.js';
+export { default as UserEditPopover } from './screens/components/UserEditPopover/index.js';

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "anteriority-ui",
+  "version": "1.0.0",
+  "description": "Librería interna de componentes React (UI) construida sobre MUI, lucide-react y CSS Modules.",
+  "packageManager": "pnpm@11.1.2",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "check-case": "node scripts/check-case.mjs",
+    "build": "node scripts/check-case.mjs && node scripts/build.mjs && node scripts/verify-dist.mjs"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AndresPrograma-desing/AnteriorityUI.git"
+  },
+  "bugs": {
+    "url": "https://github.com/AndresPrograma-desing/AnteriorityUI/issues"
+  },
+  "homepage": "https://github.com/AndresPrograma-desing/AnteriorityUI#readme",
+  "publishConfig": {
+    "directory": "dist",
+    "linkDirectory": true,
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^9.4.0",
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
+    "esbuild": "^0.28.2",
+    "eslint-plugin-storybook": "^10.6.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "storybook": "^10.6.0"
+  },
+  "dependencies": {
+    "date-fns": "^4.4.0",
+    "lucide-react": "^1.26.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@mui/material": "^5.0.0 || ^6.0.0 || ^9.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  }
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages: []
+allowBuilds:
+  esbuild: true

package/screens/components/AlertModal/AlertModal.jsx

@@ -0,0 +1,259 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { TriangleAlert } from 'lucide-react';
+import styles from './AlertModal.module.css';
+import Button from '../Button/index';
+import TextField from '../Material-UI/Components/TextField/index';
+import Selector from '../Material-UI/Components/Selector/index';
+
+
+const FIELD_LABELS = {
+  nombre: 'Nombre',
+  apellido: 'Apellido',
+  email: 'Correo electronico',
+  telefono: 'Telefono',
+  direccion: 'Direccion',
+  identificacion: 'Identificacion',
+  mascota_nombre: 'Nombre de la mascota',
+  especie: 'Especie',
+  raza: 'Raza',
+  color: 'Color',
+  sexo: 'Sexo',
+  fecha_nacimiento: 'Fecha de nacimiento',
+  peso: 'Peso',
+  identeficacion_mascota: 'Identificacion de mascota',
+  alergias: 'Alergias',
+  condiciones_medicas: 'Condiciones medicas',
+  esterilizado: 'Esterilizado',
+  id_cliente: 'Cliente',
+  cliente_id: 'Cliente',
+};
+
+function humanizeField(field) {
+  const key = String(field || '').trim();
+  if (!key) return '';
+  if (FIELD_LABELS[key]) return FIELD_LABELS[key];
+  const normalized = key
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .replace(/_/g, ' ')
+    .toLowerCase();
+  return normalized.charAt(0).toUpperCase() + normalized.slice(1);
+}
+
+function translateText(input) {
+  const text = String(input || '').trim();
+  if (!text) return '';
+
+  return text
+    .replace(/\bvalidation error\b/gi, 'Error de validacion')
+    .replace(/\bfailed validation\b/gi, 'fallo de validacion')
+    .replace(/\bis required\b/gi, 'es obligatorio')
+    .replace(/\bmust not be empty\b/gi, 'no puede estar vacio')
+    .replace(/\bcannot be empty\b/gi, 'no puede estar vacio')
+    .replace(/\bmust be a valid email\b/gi, 'debe ser un correo electronico valido')
+    .replace(/\binvalid email\b/gi, 'correo electronico invalido')
+    .replace(/\binvalid\b/gi, 'invalido')
+    .replace(/\balready exists\b/gi, 'ya existe')
+    .replace(/\balready registered\b/gi, 'ya esta registrado')
+    .replace(/\btoo short\b/gi, 'es demasiado corto')
+    .replace(/\btoo long\b/gi, 'es demasiado largo')
+    .replace(/\bmust be\b/gi, 'debe ser')
+    .replace(/\bmust contain\b/gi, 'debe contener')
+    .replace(/\bnot found\b/gi, 'no fue encontrado')
+    .replace(/\bbad request\b/gi, 'solicitud invalida')
+    .replace(/\bserver error\b/gi, 'error del servidor');
+}
+
+function extractErrorLines(raw) {
+  if (raw == null || raw === false) return [];
+
+  if (typeof raw === 'string' || typeof raw === 'number') {
+    const line = translateText(raw);
+    return line ? [line] : [];
+  }
+
+  if (Array.isArray(raw)) {
+    return raw.flatMap((item) => extractErrorLines(item));
+  }
+
+  if (typeof raw !== 'object') return [];
+
+  const objectLines = [];
+  const listSources = [raw?.errors, raw?.details, raw?.body?.errors, raw?.body?.details].filter(Boolean);
+
+  listSources.forEach((list) => {
+    if (!Array.isArray(list)) return;
+    list.forEach((item) => {
+      if (typeof item === 'string') {
+        const translated = translateText(item);
+        if (translated) objectLines.push(translated);
+        return;
+      }
+
+      const field =
+        item?.field ??
+        item?.path ??
+        item?.param ??
+        item?.property ??
+        (Array.isArray(item?.instancePath) ? item.instancePath.join('.') : item?.instancePath) ??
+        (Array.isArray(item?.path) ? item.path.join('.') : item?.path) ??
+        '';
+      const fieldLabel = humanizeField(field);
+
+      const detailMsg =
+        item?.message ??
+        item?.msg ??
+        item?.error ??
+        item?.description ??
+        (item?.constraints && Object.values(item.constraints).join(', '));
+
+      const translatedDetail = translateText(detailMsg || 'Dato invalido');
+      objectLines.push(fieldLabel ? `${fieldLabel}: ${translatedDetail}` : translatedDetail);
+    });
+  });
+
+  if (objectLines.length) return objectLines;
+
+  const topLevel = [raw?.body?.message, raw?.message, raw?.error, raw?.body?.error].filter(Boolean);
+  if (topLevel.length) return topLevel.map((line) => translateText(line));
+
+  return [];
+}
+
+function formatModalMessage(message) {
+  const lines = extractErrorLines(message).filter(Boolean);
+  if (!lines.length) {
+    return {
+      text: typeof message === 'string' ? message : '',
+      list: [],
+    };
+  }
+
+  const deduped = Array.from(new Set(lines));
+  return {
+    text: deduped.length === 1 ? deduped[0] : '',
+    list: deduped.length > 1 ? deduped : [],
+  };
+}
+
+export default function AlertModal({
+  open,
+  title = 'Alerta',
+  message = '',
+  onClose,
+  onConfirm,
+  confirmText = 'Ok',
+  cancelText = 'Cancelar',
+  hideActions = false,
+  children,
+  showInput = false,
+  inputType = 'text',
+  inputLabel = '',
+  inputPlaceholder = '',
+  inputValue = '',
+  onInputChange,
+  inputOptions = [],
+  inputError = '',
+  imageUrl = '',
+  showWarningIcon = true,
+  bgColor,
+  titleBorderColor,
+  errorTextColor,
+  errorBgColor,
+}) {
+  if (!open) return null;
+
+  const parsed = formatModalMessage(message);
+
+  const themeVars = {
+    ...(bgColor ? { '--alertmodal-bg': bgColor } : {}),
+    ...(titleBorderColor ? { '--alertmodal-title-border': titleBorderColor } : {}),
+    ...(errorTextColor ? { '--alertmodal-error-text': errorTextColor } : {}),
+    ...(errorBgColor ? { '--alertmodal-error-bg': errorBgColor, '--alertmodal-error-border': errorBgColor } : {}),
+  };
+
+  const content = (
+    <div data-test="alert-modal" className={styles.modalOverlay} onClick={onClose || (() => { })}>
+      <div className={styles.modalBox} style={themeVars} onClick={(e) => e.stopPropagation()}>
+        <h3 className={styles.modalTitle}>
+          {showWarningIcon && <TriangleAlert className={styles.warningIcon} />}
+          {title}</h3>
+        <div className={styles.modalBody}>
+          {imageUrl && (
+            <div style={{ display: 'flex', justifyContent: 'center', marginTop: '8px', marginBottom: '16px' }}>
+              <img 
+                src={imageUrl} 
+                alt="preview" 
+                style={{ maxWidth: '100%', maxHeight: '400px', borderRadius: '6px', objectFit: 'contain' }} 
+              />
+            </div>
+          )}
+          {parsed.text && <p className={styles.modalText}>{parsed.text}</p>}
+          {parsed.list.length > 0 && (
+            <ul className={styles.modalErrorList}>
+              {parsed.list.map((line, index) => (
+                <li key={`${line}-${index}`} className={styles.modalErrorItem}>{line}</li>
+              ))}
+            </ul>
+          )}
+
+          {/* Render native inputs if requested via props */}
+          {showInput && inputType === 'select' && (
+            <div style={{ marginTop: '16px', marginBottom: '8px' }}>
+              <Selector
+                label={inputLabel}
+                value={inputValue}
+                onChange={onInputChange}
+                options={inputOptions}
+                placeholder={inputPlaceholder}
+              />
+            </div>
+          )}
+
+          {showInput && inputType !== 'select' && (
+            <div style={{ marginTop: '16px', marginBottom: '8px' }}>
+              <TextField
+                type={inputType}
+                label={inputLabel}
+                placeholder={inputPlaceholder}
+                value={inputValue}
+                onChange={onInputChange}
+                error={!!inputError}
+                helperText={inputError}
+                fullWidth
+              />
+            </div>
+          )}
+
+          {/* Render passed children (e.g., a form) or nothing by default */}
+          {children}
+        </div>
+
+        {!hideActions && (
+          <div className={styles.modalActions} style={{ marginTop: 12 }}>
+            {typeof onClose === 'function' && (
+              <Button 
+                fullWidth
+                borderColor="var(--border-gray-low)"
+                onClick={onClose}>{cancelText}
+              </Button>
+            )}
+
+            {typeof onConfirm === 'function' ? (
+              <Button
+                fullWidth  
+                // borderColor="var(--border-gray-low)"
+                onClick={onConfirm}>{confirmText}</Button>
+            ) : (
+              <Button variant="primary" 
+                fullWidth 
+                onClick={onClose || (() => { })}>{confirmText}</Button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  return createPortal(content, document.body);
+}

package/screens/components/AlertModal/AlertModal.module.css

@@ -0,0 +1,185 @@
+
+.modalOverlay {
+  position: fixed;
+  inset: 0;
+  background: var(--modal-overlay-bg);
+  backdrop-filter: blur(2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1299;
+  animation: fadeIn 0.2s ease-out;
+}
+
+.modalBox {
+  background: var(--alertmodal-bg, white);
+  backdrop-filter: var(--blur);
+  padding: 1.5rem;
+  border-radius: var(--border-radius-lg);
+  width: min(820px, calc(100% - 2rem));
+  box-shadow: var(--modal-shadow);
+  border: var(--modal-border);
+  animation: slideUp 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 3rem);
+}
+
+.modalBody {
+  overflow: auto;
+  flex: 1 1 auto;
+  padding-right: 0.25rem;
+}
+
+.modalTitle {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--modal-title-color);
+  text-align: center;
+  background-color: transparent;
+  border: 1px solid var(--alertmodal-title-border, black);
+  padding: 5px;
+  border-radius: 20px;
+}
+
+.modalText {
+  margin: 0 0 1.25rem 0;
+  color: rgb(0, 0, 0);
+  font-size: 0.95rem;
+  line-height: 1.5;
+  text-align: center;
+  margin-top: 20px;
+}
+
+.modalErrorList {
+  margin: 0 0 1.25rem 0;
+  padding: 0.75rem 1rem;
+  border-radius: 0.6rem;
+  border: 1px solid var(--alertmodal-error-border, #fecaca);
+  background: var(--alertmodal-error-bg, #fff1f2);
+}
+
+.modalErrorItem {
+  color: var(--alertmodal-error-text, #9f1239);
+  font-size: 0.92rem;
+  line-height: 1.45;
+  margin-left: 1rem;
+}
+.warningIcon {
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+
+.modalActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+  /* Evitar que los botones se oculten al hacer scroll */
+  flex-shrink: 0;
+}
+
+.modalPrimary {
+  background: var(--primary-color);
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: var(--border-radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+.modalPrimary:hover {
+  background: var(--primary-hover);
+  transform: translateY(-1px);
+}
+
+.modalPrimary:active {
+  transform: translateY(0);
+}
+
+.modalSecondary {
+  background: var(--secondary-color);
+  color: black;
+  border: 1px solid #e2e8f0;
+  padding: 0.5rem 1rem;
+  border-radius: var(--border-radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition);
+  text-shadow: none;
+}
+
+.modalSecondary:hover {
+  background: var(--secondary-hover);
+  border-color: #cbd5e1;
+  transform: translateY(-1px);
+}
+
+.modalSecondary:active {
+  transform: translateY(0);
+}
+
+/* Foco visible para accesibilidad */
+.modalPrimary:focus-visible,
+.modalSecondary:focus-visible {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+}
+
+/* Animaciones */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Responsive: ajustes en móvil */
+@media (max-width: 640px) {
+  .modalBox {
+    padding: 1.25rem;
+  }
+
+  .modalTitle {
+    font-size: 1.125rem;
+  }
+
+  .modalActions {
+    gap: 0.5rem;
+  }
+
+  .modalPrimary,
+  .modalSecondary {
+    padding: 0.5rem 0.875rem;
+    font-size: 0.8125rem;
+  }
+}
+
+/* Preferencia reducción de movimiento */
+@media (prefers-reduced-motion: reduce) {
+  .modalOverlay,
+  .modalBox {
+    animation: none;
+  }
+}