anteriority-ui 1.0.0

package/screens/components/CalendarComponent/CustomDatePicker.module.css

@@ -0,0 +1,323 @@
+.inputGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+.label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #64748b;
+}
+
+.inputWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background-color: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.inputWrapper:focus-within {
+  border-color: var(--cdp-accent, #10b981);
+  background-color: #fff;
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+}
+
+.inputIcon {
+  position: absolute;
+  left: 0.6rem;
+  color: #94a3b8;
+  pointer-events: none;
+}
+
+.inputWrapper:focus-within .inputIcon {
+  color: var(--cdp-accent, #10b981);
+}
+
+.dateInput {
+  width: 100%;
+  padding: 0.45rem 0.6rem 0.45rem 2rem;
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: 0.85rem;
+  color: #1e293b;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.modalBackdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(15, 23, 42, 0.4);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  animation: fadeIn 0.2s ease-out;
+}
+
+.calendarModal {
+  background-color: #ffffff;
+  border-radius: 14px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  border: 1px solid #e2e8f0;
+  width: 330px;
+  padding: 1.25rem;
+  font-family: inherit;
+  animation: scaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.25rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #f8fafc;
+}
+
+.headerTitleContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  transition: background-color 0.15s ease;
+}
+
+.headerTitleContainer:hover {
+  background-color: #f1f5f9;
+}
+
+.monthName {
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: #0f172a;
+  text-transform: capitalize;
+}
+
+.dropdownChevron {
+  color: #64748b;
+  transition: transform 0.2s ease;
+}
+
+.chevronChevronOpen {
+  transform: rotate(180deg);
+  color: var(--cdp-accent, #10b981);
+}
+
+.navigation {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.navButton, .closeModalBtn {
+  background: none;
+  border: none;
+  color: #475569;
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.navButton:hover {
+  background-color: #f1f5f9;
+  color: #1e293b;
+}
+
+.closeModalBtn {
+  color: #94a3b8;
+}
+
+.closeModalBtn:hover {
+  background-color: #fef2f2;
+  color: #ef4444;
+}
+
+.selectorsPanel {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 0.5rem 0;
+  animation: fadeIn 0.2s ease;
+}
+
+.selectorGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.selectorGroup label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: #94a3b8;
+  text-transform: uppercase;
+}
+
+.elegantSelect {
+  width: 100%;
+  padding: 0.6rem 0.75rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background-color: #f8fafc;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #1e293b;
+  outline: none;
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.elegantSelect:focus {
+  border-color: var(--cdp-accent, #10b981);
+}
+
+.applySelectorsBtn {
+  margin-top: 0.5rem;
+  background-color: var(--cdp-selected, #0f172a);
+  color: white;
+  border: none;
+  padding: 0.65rem;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.applySelectorsBtn:hover {
+  background-color: #1e293b;
+}
+
+.weekDaysGrid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+  margin-bottom: 0.5rem;
+  text-align: center;
+}
+
+.weekDayName {
+  font-size: 0.80rem;
+  font-weight: 700;
+  color: #94a3b8;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+}
+
+.daysGrid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+  text-align: center;
+}
+
+.dayCell {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #334155;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+  border-radius: 50%;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.15s ease;
+}
+
+.dayCell:hover:not(.otherMonth) {
+  background-color: #f1f5f9;
+  color: #0f172a;
+}
+
+.todayDay {
+  font-weight: 700;
+  color: var(--cdp-accent, #10b981);
+  background-color: #ecfdf5;
+}
+
+.selectedDay {
+  background-color: var(--cdp-selected, #0f172a);
+  color: #ffffff;
+  font-weight: 700;
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
+}
+
+.selectedDay:hover {
+  background-color: #1e293b;
+}
+
+.otherMonth {
+  color: #cbd5e1;
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1.25rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid #f1f5f9;
+}
+
+.todayButton, .clearButton {
+  background: none;
+  border: none;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.todayButton {
+  color: var(--cdp-accent, #10b981);
+}
+
+.todayButton:hover {
+  background-color: #ecfdf5;
+}
+
+.clearButton {
+  color: #64748b;
+}
+
+.clearButton:hover {
+  background-color: #f8fafc;
+  color: #334155;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes scaleIn {
+  from { transform: scale(0.96); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}

package/screens/components/CalendarComponent/CustomDatePicker.stories.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import CustomDatePicker from './CustomDatePicker';
+
+export default {
+  title: 'Components/CalendarComponent',
+  component: CustomDatePicker,
+};
+
+export const Default = {
+  args: {
+    label: 'Fecha de nacimiento',
+    name: 'birthDate',
+    value: '',
+    onChange: (e) => console.log('changed', e.target.value),
+  },
+};
+
+export const WithValue = {
+  args: {
+    label: 'Fecha de la cita',
+    name: 'appointmentDate',
+    value: '2024-06-15',
+    onChange: (e) => console.log('changed', e.target.value),
+  },
+};
+
+export const Required = {
+  args: {
+    label: 'Fecha requerida',
+    name: 'requiredDate',
+    value: '',
+    required: true,
+    onChange: (e) => console.log('changed', e.target.value),
+  },
+};
+
+export const Disabled = {
+  args: {
+    label: 'Fecha bloqueada',
+    name: 'disabledDate',
+    value: '2024-01-01',
+    disabled: true,
+    onChange: (e) => console.log('changed', e.target.value),
+  },
+};

package/screens/components/CalendarPicker/Constants.js

@@ -0,0 +1,12 @@
+export const MONTHS = [
+  'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 
+  'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
+];
+
+export const WEEKDAYS = ['L', 'M', 'X', 'J', 'V', 'S', 'D'];
+
+export const BUTTONS = {
+  CLEAR: 'Borrar',
+  TODAY: 'Hoy',
+  CONFIRM: 'Confirmar Selección'
+};

package/screens/components/CalendarPicker/index.jsx

@@ -0,0 +1,263 @@
+import React, { useState, useEffect } from 'react';
+import { format, addMonths, subMonths, isSameDay, isSameMonth, setMonth, setYear } from 'date-fns';
+import { es } from 'date-fns/locale';
+import { ChevronLeft, ChevronRight, CalendarDays, X, ChevronDown } from 'lucide-react';
+import styles from './index.module.css';
+import TextField from '../Material-UI/Components/TextField/index';
+import Frame from '../Frame/index';
+import Button from '../Button/index';
+import Selector from '../Material-UI/Components/Selector/index';
+import { MONTHS, WEEKDAYS, BUTTONS } from './Constants';
+import { parseValueToDate, getDaysForMonth } from './utils';
+
+const CalendarPicker = ({ label, name, value, onChange, required = false, disabled = false, inputSx, selectedColor, accentColor }) => {
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const [isOpen, setIsOpen] = useState(false);
+  const [showSelectors, setShowSelectors] = useState(false);
+
+  let selectedDate = parseValueToDate(value);
+
+  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) => {
+    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) => {
+    const val = parseInt(e.target.value);
+    if (!isNaN(val)) {
+      setCurrentDate(prev => setMonth(prev, val));
+    }
+  };
+
+  const handleYearChange = (e) => {
+    const val = parseInt(e.target.value);
+    if (!isNaN(val)) {
+      setCurrentDate(prev => setYear(prev, val));
+    }
+  };
+
+  const safeDate = currentDate instanceof Date && !isNaN(currentDate.getTime()) ? currentDate : new Date();
+
+  const currentYear = safeDate.getFullYear();
+  const years = Array.from({ length: 110 }, (_, i) => currentYear + 5 - i);
+
+  const { monthStart, days } = getDaysForMonth(safeDate);
+
+  const headerContent = (
+    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', borderBottom: '1px solid #f8fafc', paddingBottom: '0.5rem', marginBottom: '1rem' }}>
+      <div className={styles.headerTitleContainer} onClick={() => setShowSelectors(!showSelectors)}>
+        <span className={styles.monthName}>
+          {format(safeDate, 'MMMM yyyy', { locale: es })}
+        </span>
+        <ChevronDown size={14} className={`${styles.dropdownChevron} ${showSelectors ? styles.chevronChevronOpen : ''}`} />
+      </div>
+
+      <div className={styles.navigation}>
+        {!showSelectors && (
+          <>
+            <Button
+              variant="ghost"
+              size="small"
+              circle
+              onClick={handlePrevMonth}
+              icon={ChevronLeft}
+              color="inherit"
+            />
+            <Button
+              variant="ghost"
+              size="small"
+              circle
+              onClick={handleNextMonth}
+              icon={ChevronRight}
+              color="inherit"
+            />
+          </>
+        )}
+        <Button
+          variant="ghost"
+          size="small"
+          circle
+          onClick={() => { setIsOpen(false); setShowSelectors(false); }}
+          icon={X}
+          color="var(--cancel-button)"
+        />
+      </div>
+    </div>
+  );
+
+  return (
+    <div className={styles.inputGroup} onClick={(e) => e.stopPropagation()}>
+      <TextField
+        label={label}
+        value={selectedDate ? format(selectedDate, 'dd/MM/yyyy') : ''}
+        readOnly
+        placeholder="dd/mm/aaaa"
+        onClick={() => !disabled && setIsOpen(true)}
+        disabled={disabled}
+        required={required}
+        {...(inputSx ? { sx: inputSx } : {})}
+        slotProps={{
+          input: {
+            endAdornment: (
+              <CalendarDays 
+                size={16} 
+                style={{ cursor: 'pointer', color: '#64748b' }}
+                onClick={() => !disabled && setIsOpen(true)}
+              />
+            )
+          }
+        }}
+      />
+
+      {isOpen && (
+        <Frame
+          isModal={true}
+          onClose={() => { setIsOpen(false); setShowSelectors(false); }}
+          className={styles.calendarFrame}
+        >
+          <div
+            style={{
+              display: 'contents',
+              ...(selectedColor ? { '--cp-selected': selectedColor } : {}),
+              ...(accentColor ? { '--cp-accent': accentColor } : {}),
+            }}
+          >
+          {headerContent}
+
+          {showSelectors ? (
+            <div className={styles.selectorsPanel}>
+              <div className={styles.selectorGroup}>
+                <Selector
+                  label="Mes"
+                  value={currentDate.getMonth()}
+                  onChange={handleMonthChange}
+                  options={MONTHS.map((m, index) => ({ value: index, label: m }))}
+                />
+              </div>
+              <div className={styles.selectorGroup}>
+                <Selector
+                  label="Año"
+                  value={currentDate.getFullYear()}
+                  onChange={handleYearChange}
+                  options={years.map(y => ({ value: y, label: String(y) }))}
+                />
+              </div>
+              <Button
+                variant="primary"
+                fullWidth
+                onClick={() => setShowSelectors(false)}
+                color={selectedColor || '#0f172a'}
+                style={{ marginTop: '0.5rem' }}
+              >
+                {BUTTONS.CONFIRM}
+              </Button>
+            </div>
+          ) : (
+            <>
+              <div className={styles.weekDaysGrid}>
+                {WEEKDAYS.map(day => (
+                  <div key={day} className={styles.weekDayName}>{day}</div>
+                ))}
+              </div>
+
+              <div className={styles.daysGrid}>
+                {days.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
+              variant="ghost"
+              size="small"
+              onClick={handleClear}
+              color="inherit"
+            >
+              {BUTTONS.CLEAR}
+            </Button>
+            <Button
+              variant="ghost"
+              size="small"
+              onClick={handleSetToday}
+              color={accentColor || 'green'}
+            >
+              {BUTTONS.TODAY}
+            </Button>
+          </div>
+          </div>
+        </Frame>
+      )}
+    </div>
+  );
+};
+
+export default CalendarPicker;