anteriority-ui 1.0.0

package/screens/components/Button/index.jsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import MuiButton from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+import { VARIANTS, SIZES, COLORS } from './utils';
+import styles from './index.module.css';
+import ModalTooltip from '../ModalTooltip/ModalTooltip';
+
+const Button = React.forwardRef(({ 
+  children, 
+  variant = 'primary', 
+  size = 'medium', 
+  active = false,
+  fullWidth = false,
+  icon: Icon,
+  onClick,
+  disabled = false,
+  type = 'button',
+  className = '',
+  color,
+  border,
+  borderColor,
+  style = {},
+  loading = false,
+  success = undefined,
+  circle = false,
+  ToolTip = false,
+  title,
+  ...props
+}, ref) => {
+
+  // Map custom variant to MUI variant
+  let muiVariant = 'contained';
+  if (variant === 'outline') muiVariant = 'outlined';
+  if (variant === 'ghost' || variant === 'tab' || variant === 'list-item' || color === 'transparent') muiVariant = 'text';
+
+  // Map custom size to MUI size
+  const muiSize = size === 'large' ? 'large' : size === 'small' ? 'small' : 'medium';
+
+  // Map standard colors to MUI color prop if possible
+  let muiColor = 'primary';
+  if (variant === 'danger' || color === 'var(--color-danger)' || color === 'var(--cancel-button)' || color === 'red') muiColor = 'error';
+  if (variant === 'secondary' || color === 'var(--color-secondary)') muiColor = 'secondary';
+  if (color === 'var(--button-green)' || color === 'green') muiColor = 'success';
+  if (color === 'transparent' || variant === 'list-item') muiColor = 'inherit';
+  if (border || borderColor) { muiVariant = 'outlined'; }
+
+  // "list-item": fila seleccionable de ancho completo, alineada a la izquierda (pickers,
+  // listas dentro de un DrawPanel/popover). Los colores quedan pensados para paneles oscuros
+  // por default, pero se pueden pisar con el prop "style" como cualquier otro variant.
+  const listItemStyle = variant === 'list-item' ? {
+    width: '100%',
+    justifyContent: 'flex-start',
+    textAlign: 'left',
+    padding: '0.65rem 0.85rem',
+    borderRadius: '8px',
+    border: '1px solid rgba(255, 255, 255, 0.06)',
+    backgroundColor: 'rgba(255, 255, 255, 0.02)',
+    color: '#e6e8ec',
+    fontWeight: 500,
+    fontSize: '0.85rem',
+    '&:hover': {
+      backgroundColor: 'rgba(255, 255, 255, 0.05)',
+    },
+  } : {};
+  
+  // Check if we need to apply custom color overrides via sx
+  const standardMuiColors = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
+  const isCustomColor = color && color !== 'transparent' && !standardMuiColors.includes(muiColor) && !standardMuiColors.includes(color);
+
+  // Active state styling
+  const activeStyle = active ? { backgroundColor: 'rgba(0, 0, 0, 0.08)' } : {};
+
+  // Circle styling
+  const circleStyle = circle ? { 
+    borderRadius: '50%', 
+    minWidth: 0, 
+    padding: size === 'small' ? '6px' : (size === 'large' ? '12px' : '8px') 
+  } : {};
+
+  // Custom colors processing
+  const customColors = {};
+  if (isCustomColor) {
+      if (muiVariant === 'contained') {
+          customColors.backgroundColor = color;
+          customColors.color = '#fff';
+          customColors['&:hover'] = { backgroundColor: color, filter: 'brightness(0.9)' };
+      } else if (muiVariant === 'outlined') {
+          customColors.borderColor = color;
+          customColors.color = color;
+          customColors['&:hover'] = { borderColor: color, backgroundColor: 'rgba(0, 0, 0, 0.04)' };
+      } else {
+          customColors.color = color;
+          customColors['&:hover'] = { backgroundColor: 'rgba(0, 0, 0, 0.04)' };
+      }
+  }
+
+  // Handle explicit border and borderColor
+  if (border || borderColor) {
+      const bColor = borderColor || border || 'black';
+      customColors.border = `1px solid ${bColor} !important`;
+      if (!isCustomColor) {
+        customColors.borderColor = `${bColor} !important`;
+        customColors.color = `${bColor} !important`;
+      }
+  }
+
+  // Handle icon size
+  const iconSize = size === 'small' ? 16 : size === 'large' ? 22 : 18;
+
+  const isButtonDisabled = disabled || loading || (success === false);
+
+  const handleClick = (e) => {
+    if (isButtonDisabled) {
+      e.preventDefault();
+      return;
+    }
+    if (onClick) onClick(e);
+  };
+
+  const buttonElement = (
+    <MuiButton
+      ref={ref}
+      type={type}
+      variant={muiVariant}
+      size={muiSize}
+      color={isCustomColor ? undefined : (standardMuiColors.includes(color) ? color : muiColor)}
+      fullWidth={fullWidth}
+      disabled={isButtonDisabled}
+      onClick={handleClick}
+      className={className}
+      startIcon={!circle && !loading && Icon ? <span style={{ display: 'inline-flex' }}><Icon size={iconSize} /></span> : undefined}
+      sx={{
+        textTransform: 'none',
+        borderRadius: '8px',
+        fontWeight: 600,
+        boxShadow: (variant === 'primary' && color !== 'transparent' && !isButtonDisabled) ? '0 4px 6px -1px rgba(14, 165, 233, 0.2)' : 'none',
+        ...listItemStyle,
+        ...circleStyle,
+        ...activeStyle,
+        ...customColors,
+        ...style
+      }}
+      {...props}
+    >
+      {/* If it's a circle button with an icon, we render the icon inside as children, without startIcon spacing */}
+      {loading ? (
+        <CircularProgress size={iconSize} color="inherit" />
+      ) : circle && Icon ? (
+        <span style={{ display: 'inline-flex' }}><Icon size={iconSize} /></span>
+      ) : (
+        children
+      )}
+    </MuiButton>
+  );
+
+  const tooltipText = typeof ToolTip === 'string' ? ToolTip : title;
+  if (ToolTip && tooltipText) {
+    return <ModalTooltip text={tooltipText}>{buttonElement}</ModalTooltip>;
+  }
+
+  return buttonElement;
+});
+
+Button.VARIANTS = VARIANTS;
+Button.SIZES = SIZES;
+Button.COLORS = COLORS;
+
+export { VARIANTS, SIZES, COLORS };
+export default Button;

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

@@ -0,0 +1,168 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-family: 'Inter', 'Segoe UI', sans-serif;
+  font-weight: 500;
+  border-radius: 5px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+}
+
+.button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.iconWrapper {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* SIZES */
+.small {
+  padding: 6px 12px;
+  font-size: 0.875rem;
+}
+.medium {
+  padding: 8px 16px;
+  font-size: 0.95rem;
+}
+.large {
+  padding: 12px 24px;
+  font-size: 1.1rem;
+}
+.fullWidth {
+  width: 100%;
+}
+
+/* VARIANTS */
+.primary {
+  background-color: #0ea5e9;
+  color: white;
+}
+.primary:hover:not(:disabled) {
+  background-color: #0284c7;
+}
+
+.secondary {
+  background-color: #f1f5f9;
+  color: #334155;
+  border-color: #e2e8f0;
+}
+.secondary:hover:not(:disabled) {
+  background-color: #e2e8f0;
+  color: #0f172a;
+}
+
+.ghost {
+  background-color: transparent;
+  color: #64748b;
+}
+.ghost:hover:not(:disabled) {
+  background-color: #f1f5f9;
+  color: #334155;
+}
+
+.outline {
+  background-color: transparent;
+  border-color: #0ea5e9;
+  color: #0ea5e9;
+}
+.outline:hover:not(:disabled) {
+  background-color: #f0f9ff;
+}
+
+.danger {
+  background-color: #ef4444;
+  color: white;
+}
+.danger:hover:not(:disabled) {
+  background-color: #dc2626;
+}
+
+/* TAB Variant */
+.tab {
+  background-color: transparent;
+  color: #64748b;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  padding: 8px 12px;
+}
+.tab:hover:not(:disabled) {
+  color: #0ea5e9;
+  background-color: #f8fafc;
+}
+.tab.active {
+  color: #0ea5e9;
+  border-bottom-color: #0ea5e9;
+  background-color: #f0f9ff;
+}
+
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple 0.6s linear;
+  background-color: rgba(255, 255, 255, 0.4);
+  pointer-events: none;
+}
+
+.secondary .ripple,
+.ghost .ripple,
+.outline .ripple,
+.tab .ripple {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Transparent color override */
+.transparentColor {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  color: inherit !important;
+}
+.transparentColor:hover:not(:disabled) {
+  background-color: #e2e8f0 !important;
+}
+.transparentColor .ripple {
+  background-color: rgba(0, 0, 0, 0.25) !important;
+}
+
+/* Circle Button */
+.circle {
+  border-radius: 50% !important;
+  padding: 8px !important;
+  width: 36px;
+  height: 36px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.circle .iconWrapper {
+  margin: 0;
+}

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Star, Trash2, Plus } from 'lucide-react';
+import Button, { VARIANTS, SIZES, COLORS } from './index';
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+};
+
+export const Primary = {
+  args: {
+    variant: VARIANTS.PRIMARY,
+    size: SIZES.MEDIUM,
+    children: 'Guardar',
+    onClick: () => console.log('clicked'),
+  },
+};
+
+export const Secondary = {
+  args: {
+    variant: VARIANTS.SECONDARY,
+    children: 'Cancelar',
+    onClick: () => console.log('clicked'),
+  },
+};
+
+export const Danger = {
+  args: {
+    variant: VARIANTS.DANGER,
+    icon: Trash2,
+    children: 'Eliminar',
+    onClick: () => console.log('clicked'),
+  },
+};
+
+export const WithIcon = {
+  args: {
+    variant: VARIANTS.OUTLINE,
+    icon: Plus,
+    children: 'Agregar',
+    onClick: () => console.log('clicked'),
+  },
+};
+
+export const Loading = {
+  args: {
+    variant: VARIANTS.PRIMARY,
+    loading: true,
+    children: 'Guardando...',
+  },
+};
+
+export const Disabled = {
+  args: {
+    variant: VARIANTS.PRIMARY,
+    disabled: true,
+    children: 'No disponible',
+  },
+};
+
+export const CircleWithTooltip = {
+  args: {
+    variant: VARIANTS.GHOST,
+    circle: true,
+    icon: Star,
+    color: COLORS.GREEN,
+    ToolTip: true,
+    title: 'Marcar como favorito',
+    onClick: () => console.log('clicked'),
+  },
+};

package/screens/components/Button/utils.js

@@ -0,0 +1,28 @@
+export const VARIANTS = {
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary',
+    GHOST: 'ghost',
+    DANGER: 'danger',
+    OUTLINE: 'outline',
+    TAB: 'tab',
+    LIST_ITEM: 'list-item'
+};
+
+export const SIZES = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large'
+};
+
+export const COLORS = {
+    PRIMARY: 'var(--color-primary)',
+    SECONDARY: 'var(--color-secondary)',
+    DANGER: 'var(--color-danger)',
+    LOGIN: 'var(--btn-login)',
+    GREEN: 'var(--button-green)',
+    BLUE: 'var(--btn-blue)',
+    RED: 'var(--cancel-button)',
+    BLACK: 'var(--color-black)',
+    WHITE: 'var(--color-white)',
+    TRANSPARENT: 'transparent',
+};

package/screens/components/CalendarComponent/CustomDatePicker.jsx

@@ -0,0 +1,248 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { format, addMonths, subMonths, startOfMonth, endOfMonth, eachDayOfInterval, isSameDay, isSameMonth, startOfWeek, setMonth, setYear } from 'date-fns';
+import { es } from 'date-fns/locale';
+import { ChevronLeft, ChevronRight, CalendarDays, X, ChevronDown } from 'lucide-react';
+import styles from './CustomDatePicker.module.css';
+import TextField from '../Material-UI/Components/TextField/index';
+
+const CustomDatePicker = ({ label, name, value, onChange, required = false, disabled = false, selectedColor, accentColor }) => {
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const [isOpen, setIsOpen] = useState(false);
+  const [showSelectors, setShowSelectors] = useState(false);
+  const modalRef = useRef(null);
+ 
+ let selectedDate = null;
+  if (value instanceof Date && !Number.isNaN(value.getTime())) {
+    selectedDate = value; 
+  } else if (typeof value === 'string' && value.trim() !== '') {
+    const match = value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+    if (match) {
+      const year = Number(match[1]);
+      const month = Number(match[2]);
+      const day = Number(match[3]);
+      selectedDate = new Date(year, month - 1, day);
+    } else {
+      const fallbackDate = new Date(value);
+      if (!Number.isNaN(fallbackDate.getTime())) {
+        selectedDate = new Date(
+          fallbackDate.getUTCFullYear(),
+          fallbackDate.getUTCMonth(),
+          fallbackDate.getUTCDate()
+        );
+      }
+    }
+  }
+
+  const monthStart = startOfMonth(currentDate);
+  const monthEnd = endOfMonth(monthStart);
+  const startDate = startOfWeek(monthStart, { weekStartsOn: 1 });
+
+  const daysInterval = eachDayOfInterval({
+    start: startDate,
+    end: monthEnd,
+  });
+
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape') {
+        setIsOpen(false);
+        setShowSelectors(false);
+      }
+    };
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+      window.addEventListener('keydown', handleKeyDown);
+    }
+    return () => {
+      document.body.style.overflow = '';
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen]);
+
+  const handleNextMonth = () => setCurrentDate(addMonths(currentDate, 1));
+  const handlePrevMonth = () => setCurrentDate(subMonths(currentDate, 1));
+
+  const handleDateClick = (day) => {
+    if (isSameMonth(day, monthStart)) {
+      const yyyy = day.getFullYear();
+      const mm = String(day.getMonth() + 1).padStart(2, '0');
+      const dd = String(day.getDate()).padStart(2, '0');
+      const formattedDate = `${yyyy}-${mm}-${dd}`;
+
+      const event = {
+        target: {
+          name: name,
+          value: formattedDate,
+          type: 'date',
+        },
+      };
+      if (typeof onChange === 'function') {
+        onChange(event);
+      }
+      setIsOpen(false);
+    }
+  };
+
+  const handleSetToday = () => {
+    const today = new Date();
+    setCurrentDate(today);
+    handleDateClick(today);
+  };
+
+  const handleClear = () => {
+    const event = {
+      target: { name, value: '', type: 'date' },
+    };
+    if (typeof onChange === 'function') {
+      onChange(event);
+    }
+    setIsOpen(false);
+  };
+ 
+  const handleMonthChange = (e) => {
+    setCurrentDate(setMonth(currentDate, parseInt(e.target.value)));
+  };
+
+  const handleYearChange = (e) => {
+    setCurrentDate(setYear(currentDate, parseInt(e.target.value)));
+  };
+
+  const dayNames = ['L', 'M', 'X', 'J', 'V', 'S', 'D'];
+   
+  const currentYear = new Date().getFullYear();
+  const years = Array.from({ length: 110 }, (_, i) => currentYear + 5 - i);
+  const months = [
+    'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 
+    'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
+  ];
+
+  return (
+    <div
+      className={styles.inputGroup}
+      onClick={(e) => e.stopPropagation()}
+      style={{
+        ...(selectedColor ? { '--cdp-selected': selectedColor } : {}),
+        ...(accentColor ? { '--cdp-accent': accentColor } : {}),
+      }}
+    >
+      <TextField
+        label={label}
+        value={selectedDate ? format(selectedDate, 'dd/MM/yyyy') : ''}
+        readOnly
+        placeholder="dd/mm/aaaa"
+        onClick={() => !disabled && setIsOpen(true)}
+        disabled={disabled}
+        required={required}
+        slotProps={{
+          input: {
+            endAdornment: (
+              <CalendarDays 
+                size={16} 
+                style={{ cursor: 'pointer', color: '#64748b' }}
+                onClick={() => !disabled && setIsOpen(true)}
+              />
+            )
+          }
+        }}
+      />
+
+      {isOpen && (
+        <div className={styles.modalBackdrop} onClick={() => { setIsOpen(false); setShowSelectors(false); }}>
+          <div className={styles.calendarModal} ref={modalRef} onClick={(e) => e.stopPropagation()}>
+            
+            <div className={styles.header}>
+              <div className={styles.headerTitleContainer} onClick={() => setShowSelectors(!showSelectors)}>
+                <span className={styles.monthName}>
+                  {format(currentDate, 'MMMM yyyy', { locale: es })}
+                </span>
+                <ChevronDown size={14} className={`${styles.dropdownChevron} ${showSelectors ? styles.chevronChevronOpen : ''}`} />
+              </div>
+
+              <div className={styles.navigation}>
+                {!showSelectors && (
+                  <>
+                    <button type="button" onClick={handlePrevMonth} className={styles.navButton}>
+                      <ChevronLeft size={18} />
+                    </button>
+                    <button type="button" onClick={handleNextMonth} className={styles.navButton}>
+                      <ChevronRight size={18} />
+                    </button>
+                  </>
+                )}
+                <button type="button" onClick={() => { setIsOpen(false); setShowSelectors(false); }} className={styles.closeModalBtn}>
+                  <X size={18} />
+                </button>
+              </div>
+            </div>
+
+            {showSelectors ? (
+              <div className={styles.selectorsPanel}>
+                <div className={styles.selectorGroup}>
+                  <label>Mes</label>
+                  <select value={currentDate.getMonth()} onChange={handleMonthChange} className={styles.elegantSelect}>
+                    {months.map((m, index) => (
+                      <option key={m} value={index}>{m}</option>
+                    ))}
+                  </select>
+                </div>
+                <div className={styles.selectorGroup}>
+                  <label>Año</label>
+                  <select value={currentDate.getFullYear()} onChange={handleYearChange} className={styles.elegantSelect}>
+                    {years.map(y => (
+                      <option key={y} value={y}>{y}</option>
+                    ))}
+                  </select>
+                </div>
+                <button type="button" className={styles.applySelectorsBtn} onClick={() => setShowSelectors(false)}>
+                  Confirmar Selección
+                </button>
+              </div>
+            ) : (
+              <>
+                <div className={styles.weekDaysGrid}>
+                  {dayNames.map(day => (
+                    <div key={day} className={styles.weekDayName}>{day}</div>
+                  ))}
+                </div>
+
+                <div className={styles.daysGrid}>
+                  {daysInterval.map((day, index) => {
+                    const isCurrentMonth = isSameMonth(day, monthStart);
+                    const isSelected = selectedDate && isSameDay(day, selectedDate);
+                    const isToday = isSameDay(day, new Date());
+
+                    let dayClassName = styles.dayCell;
+                    if (!isCurrentMonth) dayClassName += ` ${styles.otherMonth}`;
+                    if (isSelected) dayClassName += ` ${styles.selectedDay}`;
+                    if (isToday && !isSelected) dayClassName += ` ${styles.todayDay}`;
+
+                    return (
+                      <div 
+                        key={index} 
+                        className={dayClassName}
+                        onClick={() => isCurrentMonth && handleDateClick(day)}
+                      >
+                        {format(day, 'd')}
+                      </div>
+                    );
+                  })}
+                </div>
+              </>
+            )}
+
+            <div className={styles.footer}>
+              <button type="button" className={styles.clearButton} onClick={handleClear}>
+                Borrar
+              </button>
+              <button type="button" className={styles.todayButton} onClick={handleSetToday}>
+                Hoy
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CustomDatePicker;