anteriority-ui 1.0.0

package/screens/components/DesplegablePanel/index.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import styles from './index.module.css';
+
+const DesplegablePanel = ({
+  title,
+  description,
+  icon: Icon,
+  iconColorVariant,
+  iconColor,
+  iconBgColor,
+  isOpen = false,
+  onToggle,
+  action,
+  children
+}) => {
+  const handleRowClick = () => {
+    if (onToggle) onToggle();
+  };
+
+  return (
+    <div className={styles.panelContainer}>
+      <div 
+        className={styles.settingRow} 
+        onClick={handleRowClick}
+      >
+        <div className={styles.settingInfo}>
+          {Icon && (
+            <div
+              className={`${styles.iconWrapper} ${styles[iconColorVariant] || ''}`}
+              style={{
+                ...(iconColor ? { '--dp-icon-color': iconColor } : {}),
+                ...(iconBgColor ? { '--dp-icon-bg': iconBgColor } : {}),
+              }}
+            >
+              <Icon size={20} />
+            </div>
+          )}
+          <div className={styles.textContainer}>
+            <h3>{title}</h3>
+            {description && <p>{description}</p>}
+          </div>
+        </div>
+        
+        <div className={styles.rightSection}>
+           {action ? action : (
+              isOpen ? <ChevronDown size={20} className={styles.arrow} /> : <ChevronRight size={20} className={styles.arrow} />
+           )}
+        </div>
+      </div>
+
+      {isOpen && children && (
+        <div className={styles.reportExpandableContent}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DesplegablePanel;

package/screens/components/DesplegablePanel/index.module.css

@@ -0,0 +1,120 @@
+/* Container for the whole panel (expandable variant) */
+.panelContainer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.settingRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background-color: transparent;
+  border-bottom: 1px solid var(--border-gray-low)
+}
+
+.panelContainer:last-child .settingRow {
+  border-bottom: none;
+}
+
+.settingRow:hover {
+  background-color: #adabab7b;
+}
+
+.settingInfo {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.textContainer h3 {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+.textContainer p {
+  margin: 0.25rem 0 0;
+  font-size: 0.875rem;
+  color: #6b7280;
+  line-height: 1.4;
+}
+
+.reportExpandableContent {
+  padding: 2rem 1.5rem;
+  background-color: #fafafa;
+  border-top: 1px solid #f1f5f9;
+  border-bottom: 1px solid #f1f5f9;
+  animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-5px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.iconWrapper {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* Icon Colors */
+.blue { background-color: var(--dp-icon-bg, #eff6ff); color: var(--dp-icon-color, #2563eb); }
+.green { background-color: var(--dp-icon-bg, #f0fdf4); color: var(--dp-icon-color, #16a34a); }
+.purple { background-color: var(--dp-icon-bg, #faf5ff); color: var(--dp-icon-color, #9333ea); }
+.red { background-color: var(--dp-icon-bg, #fef2f2); color: var(--dp-icon-color, #dc2626); }
+.green2 { background-color: var(--dp-icon-bg, #ecfdf5); color: var(--dp-icon-color, #008a1c); }
+
+.arrow {
+  color: #9ca3af;
+  transition: all 0.2s ease;
+}
+
+.settingRow:hover .arrow {
+  transform: translateX(4px);
+  color: #6b7280;
+}
+
+.rightSection {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  .settingRow {
+    padding: 1rem;
+  }
+
+  .settingInfo {
+    gap: 1rem;
+  }
+
+  .textContainer h3 {
+    font-size: 0.95rem;
+  }
+
+  .textContainer p {
+    font-size: 0.8rem;
+  }
+
+  .iconWrapper {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+  }
+
+  .reportExpandableContent {
+    padding: 1.25rem 1rem;
+  }
+}

package/screens/components/DesplegablePanel/index.stories.jsx

@@ -0,0 +1,44 @@
+import { Bell, Shield, User } from 'lucide-react';
+import DesplegablePanel from './index.jsx';
+
+export default {
+  title: 'Components/DesplegablePanel',
+  component: DesplegablePanel,
+};
+
+export const Default = {
+  args: {
+    title: 'Notificaciones',
+    description: 'Administra cómo recibes las alertas del sistema',
+    icon: Bell,
+    isOpen: false,
+    onToggle: () => console.log('toggled'),
+  },
+};
+
+export const OpenWithContent = {
+  args: {
+    title: 'Seguridad',
+    description: 'Configura las opciones de seguridad de tu cuenta',
+    icon: Shield,
+    iconColorVariant: 'green',
+    isOpen: true,
+    onToggle: () => console.log('toggled'),
+    children: (
+      <p style={{ margin: 0 }}>
+        Aquí puedes activar la autenticación en dos pasos y revisar tus sesiones activas.
+      </p>
+    ),
+  },
+};
+
+export const WithCustomAction = {
+  args: {
+    title: 'Perfil',
+    description: 'Información pública de tu cuenta',
+    icon: User,
+    isOpen: false,
+    action: <span style={{ fontSize: '0.8rem', color: '#64748b' }}>Editar</span>,
+    onToggle: () => console.log('toggled'),
+  },
+};

package/screens/components/DrawPanel/index.jsx

@@ -0,0 +1,217 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronRight, ChevronUp } from 'lucide-react'; // <-- Cambiado de X a ChevronRight y ChevronUp
+import styles from './index.module.css';
+
+import Button from '../Button/index';
+import CountdownBar from '../CountdownBar/index';
+
+const DrawPanel = ({ 
+  isOpen, 
+  onClose, 
+  title, 
+  description,
+  descriptionPosition = 'top',
+  children,
+  width = '400px',
+  showActions = false,
+  onConfirm,
+  confirmText = 'Confirmar',
+  cancelText = 'Cancelar',
+  formId,
+  loading = false,
+  success = undefined,
+  className = '',
+  showCountdown = false,
+  countdownActive = true,
+  countdownDuration,
+  countdownOnComplete,
+  countdownExpiresAt,
+  countdownTotalDuration,
+  countdownValue,
+  countdownHeight,
+  countdownColors,
+  countdownIncrement = true,
+  progressMode = 'count',
+  totalFields = 0,
+  filledFields = 0,
+  totalItems = [],
+  selectedItems = [],
+  formData,
+  requiredFields = [],
+  panelColor = '#ffffff',
+  textColor = '#0f172a',
+  mutedTextColor = '#64748b',
+  borderColor = '#e2e8f0',
+  hasUnsavedChanges,
+  closeConfirmMessage = 'Vuelve a hacer clic fuera para cerrar sin guardar',
+  anchor = 'right'
+}) => {
+  const [render, setRender] = useState(isOpen);
+  const [pendingClose, setPendingClose] = useState(false);
+  const pendingCloseTimeoutRef = useRef(null);
+
+  useEffect(() => {
+    if (isOpen) setRender(true);
+  }, [isOpen]);
+
+  useEffect(() => {
+    return () => {
+      if (pendingCloseTimeoutRef.current) clearTimeout(pendingCloseTimeoutRef.current);
+    };
+  }, []);
+
+  const onAnimationEnd = () => {
+    if (!isOpen) {
+      setRender(false);
+      setPendingClose(false);
+      if (pendingCloseTimeoutRef.current) {
+        clearTimeout(pendingCloseTimeoutRef.current);
+        pendingCloseTimeoutRef.current = null;
+      }
+    }
+  };
+
+  if (!render) return null;
+
+  // Contenido "sucio": si hay datos cargados en el formulario, un solo clic (fuera
+  // o en el botón de cerrar) no cierra el panel, para no perder lo que el usuario
+  // escribió; requiere un segundo clic. Sin datos, el panel se cierra normalmente.
+  const formHasValues = formData
+    ? Object.values(formData).some((val) => val !== undefined && val !== null && String(val).trim() !== '')
+    : false;
+  const isDirty = hasUnsavedChanges ?? formHasValues;
+
+  const handleCloseClick = () => {
+    if (!isDirty) {
+      onClose();
+      return;
+    }
+    if (pendingClose) {
+      if (pendingCloseTimeoutRef.current) clearTimeout(pendingCloseTimeoutRef.current);
+      setPendingClose(false);
+      onClose();
+      return;
+    }
+    setPendingClose(true);
+    pendingCloseTimeoutRef.current = setTimeout(() => setPendingClose(false), 2500);
+  };
+
+  // Lógica Genérica de Cálculo de Progreso
+  let calculatedProgress = countdownValue ?? 0;
+
+  if (progressMode === 'selection') {
+    const total = Array.isArray(totalItems) ? totalItems.length : Number(totalItems) || 0;
+    const selected = Array.isArray(selectedItems) ? selectedItems.length : Number(selectedItems) || 0;
+    calculatedProgress = total > 0 ? (selected / total) * 100 : 0;
+  } else if (progressMode === 'form' && formData && Array.isArray(requiredFields) && requiredFields.length > 0) {
+    const filledCount = requiredFields.filter(field => {
+      const val = formData[field];
+      return val !== undefined && val !== null && String(val).trim() !== '';
+    }).length;
+    calculatedProgress = (filledCount / requiredFields.length) * 100;
+  } else if (progressMode === 'count' && totalFields > 0) {
+    calculatedProgress = Math.min(100, Math.max(0, (filledFields / totalFields) * 100));
+  }
+
+  const overlayClass = anchor === 'top' ? styles.overlayTop : styles.overlay;
+  const panelClass = anchor === 'top' ? styles.panelTop : styles.panel;
+  const animClass = isOpen
+    ? (anchor === 'top' ? styles.slideInTop : styles.slideIn)
+    : (anchor === 'top' ? styles.slideOutTop : styles.slideOut);
+  const CloseIcon = anchor === 'top' ? ChevronUp : ChevronRight;
+
+  return createPortal(
+    <div
+      className={`${overlayClass} ${isOpen ? styles.fadeIn : styles.fadeOut}`}
+      onClick={handleCloseClick}
+      onAnimationEnd={onAnimationEnd}
+    >
+      <div
+        className={`${panelClass} ${animClass} ${className}`}
+        style={{ maxWidth: width, backgroundColor: panelColor }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {pendingClose && (
+          <div className={styles.closeHint}>{closeConfirmMessage}</div>
+        )}
+
+        <div className={styles.header} style={{ backgroundColor: panelColor, borderBottomColor: borderColor }}>
+          <div className={styles.headerTitleContainer}>
+            <h3 className={styles.title} style={{ color: textColor }}>{title}</h3>
+            {description && descriptionPosition === 'top' && (
+              <p className={styles.description} style={{ color: mutedTextColor }}>{description}</p>
+            )}
+          </div>
+          <div className={styles.closeButtonWrapper}>
+            <Button
+              variant={Button.VARIANTS.DANGER}
+              color={Button.COLORS.TRANSPARENT}
+              onClick={handleCloseClick}
+              circle
+              aria-label="Cerrar panel"
+            >
+              <CloseIcon size={24} color={mutedTextColor} />
+            </Button>
+          </div>
+        </div>
+
+        {showCountdown && (
+          <div style={{ padding: '0 1.5rem', width: '100%', boxSizing: 'border-box' }}>
+            <CountdownBar
+              active={countdownActive}
+              duration={countdownDuration}
+              onComplete={countdownOnComplete}
+              expiresAt={countdownExpiresAt}
+              totalDuration={countdownTotalDuration}
+              value={calculatedProgress}
+              height={countdownHeight}
+              colors={countdownColors}
+              width="100%"
+              increment={countdownIncrement}
+            />
+          </div>
+        )}
+
+        <div className={styles.content}>
+          {children}
+          {description && descriptionPosition === 'bottom' && (
+            <div className={styles.descriptionBottom} style={{ borderTopColor: borderColor }}>
+              <h4 className={styles.descriptionBottomTitle} style={{ color: textColor }}>Descripción de Tarea</h4>
+              <p className={styles.descriptionBottomText} style={{ color: mutedTextColor }}>{description}</p>
+            </div>
+          )}
+        </div>
+
+        {showActions && (
+          <div className={styles.footer} style={{ backgroundColor: panelColor, borderTopColor: borderColor }}>
+            <Button 
+              variant="" 
+              onClick={onClose} 
+              border={Button.COLORS.RED}
+              disabled={loading} 
+              fullWidth
+            >
+              {cancelText}
+            </Button>
+            <Button 
+              type={formId ? 'submit' : 'button'} 
+              form={formId} 
+              variant="primary" 
+              color={Button.COLORS.PRIMARY} 
+              onClick={onConfirm} 
+              loading={loading}
+              success={success}
+              fullWidth
+            >
+              {confirmText}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export default DrawPanel;

package/screens/components/DrawPanel/index.module.css

@@ -0,0 +1,252 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(15, 23, 42, 0.4);
+  backdrop-filter: blur(4px);
+  z-index: 1000;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.fadeIn {
+  animation: fadeIn 0.3s ease-out forwards;
+}
+
+.fadeOut {
+  animation: fadeOut 0.3s ease-in forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.panel {
+  background-color: #ffffff;
+  height: 100%;
+  width: 100%;
+  box-shadow: -10px 0 25px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.slideIn {
+  animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.slideOut {
+  animation: slideOut 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOut {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+.closeHint {
+  position: absolute;
+  top: 14px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #0f172a;
+  color: #ffffff;
+  font-size: 0.78rem;
+  font-weight: 600;
+  padding: 8px 16px;
+  border-radius: 999px;
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
+  z-index: 5;
+  pointer-events: none;
+  white-space: nowrap;
+  animation: closeHintFade 2.5s ease forwards;
+}
+
+@keyframes closeHintFade {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -6px);
+  }
+  10% {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem;
+  gap: 1rem;
+  border-bottom: 1px solid #e2e8f0;
+  background-color: #f8fafc;
+}
+
+.headerTitleContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.title {
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.description {
+  margin: 0;
+  font-size: 0.85rem;
+  color: #64748b;
+  line-height: 1.4;
+}
+
+.closeButtonWrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.closeBtn {
+  background: transparent;
+  border: none;
+  color: #64748b;
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.closeBtn:hover {
+  background-color: #e2e8f0;
+  color: #0f172a;
+}
+
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.content::-webkit-scrollbar {
+  display: none; /* Chrome, Safari and Opera */
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid #e2e8f0;
+  background-color: #f8fafc;
+}
+
+.descriptionBottom {
+  margin-top: 1.5rem;
+  border-top: 1px solid #e2e8f0;
+  padding-top: 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.descriptionBottomTitle {
+  font-weight: 600;
+  color: #1e293b;
+  font-size: 0.85rem;
+  margin: 0;
+}
+
+.descriptionBottomText {
+  font-size: 0.8rem;
+  color: #64748b;
+  margin-top: 6px;
+  line-height: 1.45;
+}
+
+/* Top anchor styles */
+.overlayTop {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(15, 23, 42, 0.4);
+  backdrop-filter: blur(4px);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.panelTop {
+  background-color: #ffffff;
+  width: 100%;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.slideInTop {
+  animation: slideInTop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.slideOutTop {
+  animation: slideOutTop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes slideInTop {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOutTop {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}