anteriority-ui 1.0.0

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

@@ -0,0 +1,147 @@
+.inputGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+.calendarFrame {
+  width: 330px !important;
+  padding: 1.25rem !important;
+  border-radius: 14px !important;
+}
+
+.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(--cp-accent, #10b981);
+}
+
+.navigation {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.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;
+}
+
+.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(--cp-accent, #10b981);
+  background-color: #ecfdf5;
+}
+
+.selectedDay {
+  background-color: var(--cp-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;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import CalendarPicker from './index';
+
+export default {
+  title: 'Components/CalendarPicker',
+  component: CalendarPicker,
+};
+
+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/utils.js

@@ -0,0 +1,42 @@
+import { startOfMonth, startOfWeek, addDays } from 'date-fns';
+
+export const parseValueToDate = (value) => {
+  if (value instanceof Date && !Number.isNaN(value.getTime())) {
+    return value;
+  }
+  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]);
+      return new Date(year, month - 1, day);
+    }
+    const fallbackDate = new Date(value);
+    if (!Number.isNaN(fallbackDate.getTime())) {
+      return new Date(
+        fallbackDate.getUTCFullYear(),
+        fallbackDate.getUTCMonth(),
+        fallbackDate.getUTCDate()
+      );
+    }
+  }
+  return null;
+};
+
+export const getDaysForMonth = (currentDate) => {
+  const monthStart = startOfMonth(currentDate);
+  const startDate = startOfWeek(monthStart, { weekStartsOn: 1 });
+  
+  const days = [];
+  let dayCursor = startDate;
+  for (let i = 0; i < 42; i++) {
+    days.push(dayCursor);
+    dayCursor = addDays(dayCursor, 1);
+  }
+  
+  return {
+    monthStart,
+    days
+  };
+};

package/screens/components/CardV1/index.jsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import styles from './index.module.css';
+import ModalTooltip from '../ModalTooltip/ModalTooltip';
+
+import Button from '../Button';
+
+/**
+ * Reusable CardV1 component
+ * 
+ * Props:
+ * - badgeIcon: Lucide icon component
+ * - badgeText: string
+ * - badgeBgColor: string (hex or var)
+ * - badgeTextColor: string (hex or var)
+ * - extraBadges: Array of { text, bgColor, textColor }
+ * - actionIcon: Lucide icon component
+ * - onActionClick: function
+ * - actionDisabled: boolean
+ * - actionTooltip: string
+ * - isSpinning: boolean (for refresh icons)
+ * - actionCustomClass: custom className for action button
+ * - isLoading: boolean
+ * - isError: boolean
+ * - isEmpty: boolean
+ * - errorText: string
+ * - emptyText: string
+ * - primaryText: React node (subtitle/label)
+ * - secondaryText: React node (main large value)
+ * - secondaryTextStyle: object (inline styles for main value)
+ * - footerIcon: Lucide icon component
+ * - footerIconColor: string (hex or var)
+ * - footerContent: React node (text or elements)
+ * - children: React node (custom inner content inserted after secondaryText)
+ */
+const CardV1 = ({
+  badgeIcon: BadgeIcon,
+  badgeText,
+  badgeBgColor = '#f1f5f9',
+  badgeTextColor = '#475569',
+  extraBadges = [],
+  actionIcon: ActionIcon,
+  onActionClick,
+  actionDisabled = false,
+  actionTooltip,
+  isSpinning = false,
+  actionCustomClass,
+  isLoading = false,
+  isError = false,
+  isEmpty = false,
+  errorText = 'Error',
+  emptyText = 'Vacío',
+  primaryText,
+  secondaryText,
+  secondaryTextStyle = {},
+  footerIcon: FooterIcon,
+  footerIconColor,
+  footerContent,
+  className = '',
+  variant = 'default', // 'default' or 'glass-pink-green'
+  children
+}) => {
+  const cardClassName = `${styles.card} ${variant === 'glass-pink-green' ? 'glass-pink-green' : ''} ${className}`.trim();
+
+  return (
+    <div className={cardClassName}>
+      {/* TOP SECTION */}
+      <div className={styles.topSection}>
+        <div className={styles.badgeContainer}>
+          {badgeText && (
+            <div
+              className={styles.badge}
+              style={{ backgroundColor: badgeBgColor, color: badgeTextColor }}
+            >
+              {BadgeIcon && <BadgeIcon size={14} />}
+              <span>{badgeText}</span>
+            </div>
+          )}
+
+          {extraBadges.map((badge, idx) => (
+            <div
+              key={idx}
+              className={styles.badge}
+              style={{ backgroundColor: badge.bgColor, color: badge.textColor }}
+            >
+              <span>{badge.text}</span>
+            </div>
+          ))}
+        </div>
+
+        {ActionIcon && (
+          actionTooltip ? (
+            <ModalTooltip text={actionTooltip}>
+              <Button
+                type="button"
+                onClick={onActionClick}
+                disabled={actionDisabled}
+                color={Button.COLORS.TRANSPARENT}
+                icon={ActionIcon}
+                loading={isSpinning}
+                circle
+              />
+            </ModalTooltip>
+          ) : (
+            <Button
+              type="button"
+              onClick={onActionClick}
+              disabled={actionDisabled}
+              color={Button.COLORS.TRANSPARENT}
+              icon={ActionIcon}
+              loading={isSpinning}
+              circle
+            />
+          )
+        )}
+      </div>
+
+      {/* MAIN CONTENT */}
+      <div className={styles.mainContent}>
+        {isLoading ? (
+          <div className={styles.skeleton} />
+        ) : isError ? (
+          <div className={styles.priceContainer}>
+            <span className={`${styles.price} ${styles.errorText}`}>{errorText}</span>
+          </div>
+        ) : isEmpty ? (
+          <div className={styles.priceContainer}>
+            <span className={`${styles.price} ${styles.emptyText}`}>{emptyText}</span>
+          </div>
+        ) : (
+          <div className={styles.priceContainer} style={{ flexDirection: 'column', alignItems: 'flex-start', gap: '4px' }}>
+            {primaryText && (
+              <span className={styles.currencyLabel}>{primaryText}</span>
+            )}
+            {secondaryText && (
+              <div className={styles.messageWrapper}>
+                <span className={styles.price} style={secondaryTextStyle}>
+                  {secondaryText}
+                </span>
+              </div>
+            )}
+            {children}
+          </div>
+        )}
+      </div>
+
+      {/* FOOTER */}
+      {footerContent && (
+        <div className={styles.footer}>
+          {FooterIcon && (
+            <FooterIcon
+              size={12}
+              className={styles.trend}
+              style={footerIconColor ? { color: footerIconColor } : {}}
+            />
+          )}
+          {footerContent}
+        </div>
+      )}
+
+      <hr style={{ border: '0', borderTop: '1px solid #131414', margin: '1.5rem 0' }} />
+    </div>
+  );
+};
+
+export default CardV1;

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

@@ -0,0 +1,232 @@
+.card {
+  background: var(--color-card-bg, #ffffff);
+  border: 1px solid var(--color-border, #e2e8f0);
+  border-radius: 10px;
+  padding: 12px;
+  width: 180px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
+
+  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
+    box-shadow 0.3s ease,
+    border-color 0.3s ease;
+  will-change: transform;
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04),
+    0 2px 6px rgba(0, 0, 0, 0.02);
+  border-color: #cbd5e1;
+}
+
+.topSection {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.badge {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 20px;
+  font-size: 0.65rem;
+  font-weight: 700;
+}
+
+.badgeContainer {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.mainContent {
+  margin-bottom: 8px;
+}
+
+.priceContainer {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.currencyLabel {
+  font-size: 0.8rem;
+  color: #64748b;
+  font-weight: 600;
+}
+
+.price {
+  font-size: 1.4rem;
+  font-weight: 800;
+  color: #1e293b;
+  letter-spacing: -0.5px;
+}
+
+.footer {
+  margin-top: 8px;
+  font-size: 0.6rem;
+  color: #94a3b8;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.trend {
+  color: #22c55e;
+}
+
+.refreshBtn {
+  background: none;
+  border: none;
+  color: #cbd5e1;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.refreshBtn:hover:not(:disabled) {
+  color: #0ea5e9;
+  background-color: #e0f2fe;
+}
+
+.spin {
+  animation: rotate 1s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.skeleton {
+  height: 24px;
+  width: 80%;
+  background: #f1f5f9;
+  border-radius: 4px;
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0.6;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.6;
+  }
+}
+
+/* Extras from Notification */
+.messageWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.titleText {
+  font-size: 0.9rem;
+  font-weight: 700;
+}
+
+.shortMessage {
+  font-size: 0.85rem;
+  color: #475569;
+  font-weight: normal;
+  line-height: 1.3;
+}
+
+.errorText {
+  color: #ef4444;
+  font-size: 1.2rem;
+}
+
+.emptyText {
+  color: #94a3b8;
+  font-size: 1.6rem;
+}
+
+.viewMoreBtn {
+  background: none;
+  border: none;
+  color: #2563eb;
+  font-size: 0.75rem;
+  font-weight: 700;
+  cursor: pointer;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-top: 2px;
+  width: max-content;
+  transition: color 0.2s ease;
+}
+
+.viewMoreBtn:hover {
+  color: #1d4ed8;
+  text-decoration: underline;
+}
+
+.footerContent {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  text-transform: capitalize;
+}
+
+.footerLabel {
+  color: #64748b;
+  font-weight: 500;
+}
+
+.footerDivider {
+  color: #cbd5e1;
+  margin: 0 2px;
+}
+
+.markAsReadBtn {
+  background: none;
+  border: none;
+  color: #94a3b8;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.markAsReadBtn:hover:not(:disabled) {
+  color: #22c55e;
+  background-color: #f0fdf4;
+  transform: scale(1.1) rotate(8deg);
+}
+
+.markAsReadBtn:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.markAsReadBtn svg {
+  transition: transform 0.2s ease;
+}
+
+.markAsReadBtn:active:not(:disabled) svg {
+  transform: scale(0.8);
+}

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { DollarSign, TrendingUp, TrendingDown, RefreshCw } from 'lucide-react';
+import CardV1 from './index';
+
+export default {
+  title: 'Components/CardV1',
+  component: CardV1,
+};
+
+export const Default = {
+  args: {
+    badgeIcon: DollarSign,
+    badgeText: 'Ingresos',
+    badgeBgColor: '#dbeafe',
+    badgeTextColor: '#1e40af',
+    primaryText: 'Total del mes',
+    secondaryText: '$12,450',
+    footerIcon: TrendingUp,
+    footerIconColor: '#22c55e',
+    footerContent: '+12% vs mes anterior',
+    actionIcon: RefreshCw,
+    onActionClick: () => console.log('refresh clicked'),
+    actionTooltip: 'Actualizar',
+  },
+};
+
+export const WithExtraBadges = {
+  args: {
+    badgeIcon: DollarSign,
+    badgeText: 'Ingresos',
+    badgeBgColor: '#dbeafe',
+    badgeTextColor: '#1e40af',
+    extraBadges: [
+      { text: 'Nuevo', bgColor: '#fef3c7', textColor: '#92400e' },
+      { text: 'VIP', bgColor: '#fce7f3', textColor: '#9d174d' },
+    ],
+    primaryText: 'Total del mes',
+    secondaryText: '$8,920',
+    footerIcon: TrendingDown,
+    footerIconColor: '#ef4444',
+    footerContent: '-5% vs mes anterior',
+  },
+};
+
+export const Loading = {
+  args: {
+    badgeText: 'Ingresos',
+    isLoading: true,
+    primaryText: 'Total del mes',
+  },
+};
+
+export const ErrorState = {
+  args: {
+    badgeText: 'Ingresos',
+    isError: true,
+    errorText: 'No se pudo cargar',
+    actionIcon: RefreshCw,
+    onActionClick: () => console.log('retry clicked'),
+    isSpinning: false,
+  },
+};