anteriority-ui 1.0.0

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

@@ -0,0 +1,7 @@
+.greenHighlight {
+  color: var(--green-highlight-text, #059669);
+  background-color: var(--green-highlight-bg, #ecfdf5);
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-weight: 700;
+}

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

@@ -0,0 +1,26 @@
+import GreenHighlight from './index.jsx';
+
+export default {
+  title: 'Components/GreenHighlight',
+  component: GreenHighlight,
+};
+
+export const Default = {
+  args: {
+    children: 'texto destacado',
+  },
+};
+
+export const InSentence = {
+  render: () => (
+    <p>
+      El pedido fue <GreenHighlight>aprobado exitosamente</GreenHighlight> y está listo para su envío.
+    </p>
+  ),
+};
+
+export const Number = {
+  args: {
+    children: '$1,250.00',
+  },
+};

package/screens/components/GreenHighlight/utils.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import GreenHighlight from './index';
+import BlueLink from '../BlueLink/index';
+import CopyableText from '../CopyText/index';
+
+export const formatHighlightedText = (content, GreenHighlightComponent = GreenHighlight, textColor, bgColor) => {
+    if (typeof content !== 'string') return content;
+    const parts = content.split(/(\*\*[^*]+\*\*)/g);
+
+    return parts.map((part, index) => {
+        if (part.startsWith('**') && part.endsWith('**')) {
+            return (
+                <GreenHighlightComponent key={index} textColor={textColor} bgColor={bgColor}>
+                    {part.slice(2, -2)}
+                </GreenHighlightComponent>
+            );
+        }
+        return part;
+    });
+};
+
+export const renderFormattedText = (content, navigate) => {
+    if (typeof content !== 'string') return content;
+    const parts = content.split(/(\*\*[^*]+\*\*|\$[^\$]+\$|\([^)]+\))/g);
+    
+    return parts.map((part, index) => {
+      if (part.startsWith('**') && part.endsWith('**')) {
+        return <GreenHighlight key={index}>{part.slice(2, -2)}</GreenHighlight>;
+      }
+      if (part.startsWith('$') && part.endsWith('$')) {
+        const rawContent = part.slice(1, -1).trim();
+        let label = rawContent, url = rawContent;
+        if (rawContent.includes('|')) {
+          const segments = rawContent.split('|');
+          label = segments[0].trim();
+          url = segments[1].trim();
+        }
+        return <BlueLink key={index} label={label} url={url} navigate={navigate} />;
+      }
+      if (part.startsWith('(') && part.endsWith(')')) {
+        return <CopyableText key={index} text={part.slice(1, -1)} />;
+      }
+      return part;
+    });
+};

package/screens/components/HoursPicker/Constants.js

@@ -0,0 +1,26 @@
+export const TEXT_HOURS_PICKER = {
+  TITLE: 'Seleccionar Hora',
+  PLACEHOLDER: '00:00 AM',
+  LABEL_HOUR: 'Hora',
+  LABEL_MINUTE: 'Minuto',
+  LABEL_PERIOD: 'Período',
+  QUICK_PRESETS_TITLE: 'Horarios Frecuentes',
+  BUTTON_CLEAR: 'Borrar',
+  BUTTON_CONFIRM: 'Confirmar',
+  BUTTON_NOW: 'Hora Actual',
+};
+
+export const HOURS_LIST = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+
+export const MINUTES_LIST = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
+
+export const QUICK_TIMES = [
+  { label: '08:00 AM', h24: 8, m: 0 },
+  { label: '09:00 AM', h24: 9, m: 0 },
+  { label: '10:00 AM', h24: 10, m: 0 },
+  { label: '11:00 AM', h24: 11, m: 0 },
+  { label: '02:00 PM', h24: 14, m: 0 },
+  { label: '03:00 PM', h24: 15, m: 0 },
+  { label: '04:00 PM', h24: 16, m: 0 },
+  { label: '05:00 PM', h24: 17, m: 0 },
+];

package/screens/components/HoursPicker/index.jsx

@@ -0,0 +1,350 @@
+import React, { useState, useEffect } from 'react';
+import { Clock, X, ChevronUp, 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 {
+    TEXT_HOURS_PICKER,
+    HOURS_LIST,
+    MINUTES_LIST,
+    QUICK_TIMES
+} from './Constants';
+import {
+    parseTimeTo12h,
+    format12hTo24h,
+    getDisplayTimeText,
+    getCurrentTime12h
+} from './utils';
+
+const HoursPicker = ({
+    label,
+    name,
+    value,
+    onChange,
+    required = false,
+    disabled = false,
+    selectedColor = '#10b981',
+    accentColor = '#0f172a'
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [hours, setHours] = useState(12);
+    const [minutes, setMinutes] = useState(0);
+    const [period, setPeriod] = useState('AM');
+    const [activeTab, setActiveTab] = useState(null); // null, 'hours', 'minutes'
+
+    useEffect(() => {
+        const parsed = parseTimeTo12h(value);
+        setHours(parsed.hours);
+        setMinutes(parsed.minutes);
+        setPeriod(parsed.period);
+    }, [value, isOpen]);
+
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                setIsOpen(false);
+                setActiveTab(null);
+            }
+        };
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+            window.addEventListener('keydown', handleKeyDown);
+        }
+        return () => {
+            document.body.style.overflow = '';
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen]);
+
+    const incrementHours = () => setHours(prev => (prev === 12 ? 1 : prev + 1));
+    const decrementHours = () => setHours(prev => (prev === 1 ? 12 : prev - 1));
+    const incrementMinutes = () => setMinutes(prev => (prev + 5 >= 60 ? 0 : Math.floor(prev / 5) * 5 + 5));
+    const decrementMinutes = () => setMinutes(prev => (prev - 5 < 0 ? 55 : Math.floor(prev / 5) * 5 - 5));
+
+    const handleConfirm = () => {
+        const formatted = format12hTo24h(hours, minutes, period);
+        if (typeof onChange === 'function') {
+            onChange({
+                target: {
+                    name,
+                    value: formatted,
+                    type: 'time'
+                }
+            });
+        }
+        setIsOpen(false);
+        setActiveTab(null);
+    };
+
+    const handleClear = () => {
+        if (typeof onChange === 'function') {
+            onChange({
+                target: {
+                    name,
+                    value: '',
+                    type: 'time'
+                }
+            });
+        }
+        setIsOpen(false);
+        setActiveTab(null);
+    };
+
+    const handleSetNow = () => {
+        const now = getCurrentTime12h();
+        setHours(now.hours);
+        setMinutes(now.minutes);
+        setPeriod(now.period);
+    };
+
+    const handleQuickPreset = (preset) => {
+        let h12 = preset.h24 % 12;
+        if (h12 === 0) h12 = 12;
+        const p = preset.h24 >= 12 ? 'PM' : 'AM';
+        setHours(h12);
+        setMinutes(preset.m);
+        setPeriod(p);
+    };
+
+    const headerContent = (
+        <div className={styles.header}>
+            <span className={styles.modalTitle}>{TEXT_HOURS_PICKER.TITLE}</span>
+            <Button
+                variant="ghost"
+                size="small"
+                circle
+                onClick={() => { setIsOpen(false); setActiveTab(null); }}
+                icon={X}
+                color="var(--cancel-button)"
+            />
+        </div>
+    );
+
+    return (
+        <div className={styles.inputGroup} onClick={(e) => e.stopPropagation()}>
+            <TextField
+                label={label}
+                value={getDisplayTimeText(value, hours, minutes, period)}
+                readOnly
+                placeholder={TEXT_HOURS_PICKER.PLACEHOLDER}
+                onClick={() => !disabled && setIsOpen(true)}
+                disabled={disabled}
+                required={required}
+                slotProps={{
+                    input: {
+                        endAdornment: (
+                            <Clock
+                                size={16}
+                                style={{ cursor: 'pointer', color: '#64748b' }}
+                                onClick={() => !disabled && setIsOpen(true)}
+                            />
+                        )
+                    }
+                }}
+            />
+
+            {isOpen && (
+                <Frame
+                    isModal={true}
+                    onClose={() => { setIsOpen(false); setActiveTab(null); }}
+                    className={styles.hoursFrame}
+                >
+                    {headerContent}
+
+                    {/* MAIN TIME SELECTOR DISPLAY */}
+                    <div className={styles.timeDisplaySection}>
+                        {/* Hours Column */}
+                        <div className={styles.timeColumn}>
+                            <Button
+                                variant="ghost"
+                                size="small"
+                                circle
+                                icon={ChevronUp}
+                                onClick={incrementHours}
+                                color="inherit"
+                                title="Incrementar hora"
+                            />
+                            <Button
+                                variant={activeTab === 'hours' ? 'primary' : 'outline'}
+                                size="large"
+                                onClick={() => setActiveTab(activeTab === 'hours' ? null : 'hours')}
+                                color={activeTab === 'hours' ? selectedColor : accentColor}
+                                style={{
+                                    minWidth: '58px',
+                                    height: '54px',
+                                    fontSize: '1.5rem',
+                                    fontWeight: 800
+                                }}
+                            >
+                                {String(hours).padStart(2, '0')}
+                            </Button>
+                            <Button
+                                variant="ghost"
+                                size="small"
+                                circle
+                                icon={ChevronDown}
+                                onClick={decrementHours}
+                                color="inherit"
+                                title="Decrementar hora"
+                            />
+                        </div>
+
+                        <span className={styles.timeSeparator}>:</span>
+
+                        {/* Minutes Column */}
+                        <div className={styles.timeColumn}>
+                            <Button
+                                variant="ghost"
+                                size="small"
+                                circle
+                                icon={ChevronUp}
+                                onClick={incrementMinutes}
+                                color="inherit"
+                                title="Incrementar minutos"
+                            />
+                            <Button
+                                variant={activeTab === 'minutes' ? 'primary' : 'outline'}
+                                size="large"
+                                onClick={() => setActiveTab(activeTab === 'minutes' ? null : 'minutes')}
+                                color={activeTab === 'minutes' ? selectedColor : accentColor}
+                                style={{
+                                    minWidth: '58px',
+                                    height: '54px',
+                                    fontSize: '1.5rem',
+                                    fontWeight: 800
+                                }}
+                            >
+                                {String(minutes).padStart(2, '0')}
+                            </Button>
+                            <Button
+                                variant="ghost"
+                                size="small"
+                                circle
+                                icon={ChevronDown}
+                                onClick={decrementMinutes}
+                                color="inherit"
+                                title="Decrementar minutos"
+                            />
+                        </div>
+
+                        {/* Period Column (AM / PM) */}
+                        <div className={styles.periodColumn}>
+                            <Button
+                                variant={period === 'AM' ? 'primary' : 'ghost'}
+                                size="small"
+                                onClick={() => setPeriod('AM')}
+                                color={period === 'AM' ? accentColor : 'inherit'}
+                                style={{ minWidth: '48px' }}
+                            >
+                                AM
+                            </Button>
+                            <Button
+                                variant={period === 'PM' ? 'primary' : 'ghost'}
+                                size="small"
+                                onClick={() => setPeriod('PM')}
+                                color={period === 'PM' ? accentColor : 'inherit'}
+                                style={{ minWidth: '48px' }}
+                            >
+                                PM
+                            </Button>
+                        </div>
+                    </div>
+
+                    {/* EXPANDABLE DIRECT NUMBER SELECTION */}
+                    {activeTab === 'hours' && (
+                        <div className={styles.quickSelectGrid}>
+                            {HOURS_LIST.map(h => (
+                                <Button
+                                    key={h}
+                                    variant={hours === h ? 'primary' : 'outline'}
+                                    size="small"
+                                    onClick={() => { setHours(h); setActiveTab(null); }}
+                                    color={hours === h ? accentColor : 'inherit'}
+                                    style={{ minWidth: 'auto', padding: '4px 0' }}
+                                >
+                                    {String(h).padStart(2, '0')}
+                                </Button>
+                            ))}
+                        </div>
+                    )}
+
+                    {activeTab === 'minutes' && (
+                        <div className={styles.quickSelectGrid}>
+                            {MINUTES_LIST.map(m => (
+                                <Button
+                                    key={m}
+                                    variant={minutes === m ? 'primary' : 'outline'}
+                                    size="small"
+                                    onClick={() => { setMinutes(m); setActiveTab(null); }}
+                                    color={minutes === m ? accentColor : 'inherit'}
+                                    style={{ minWidth: 'auto', padding: '4px 0' }}
+                                >
+                                    {String(m).padStart(2, '0')}
+                                </Button>
+                            ))}
+                        </div>
+                    )}
+
+                    {/* QUICK PRESETS */}
+                    {!activeTab && (
+                        <div className={styles.presetsSection}>
+                            <div className={styles.presetsTitle}>{TEXT_HOURS_PICKER.QUICK_PRESETS_TITLE}</div>
+                            <div className={styles.presetsGrid}>
+                                {QUICK_TIMES.map((qt, idx) => {
+                                    let h12 = qt.h24 % 12 || 12;
+                                    let p = qt.h24 >= 12 ? 'PM' : 'AM';
+                                    const isActive = hours === h12 && minutes === qt.m && period === p;
+                                    return (
+                                        <Button
+                                            key={idx}
+                                            variant={isActive ? 'primary' : 'outline'}
+                                            size="small"
+                                            onClick={() => handleQuickPreset(qt)}
+                                            color={isActive ? selectedColor : 'inherit'}
+                                            style={{ fontSize: '0.72rem', padding: '4px 2px', minWidth: 'auto' }}
+                                        >
+                                            {qt.label}
+                                        </Button>
+                                    );
+                                })}
+                            </div>
+                        </div>
+                    )}
+
+                    {/* FOOTER ACTIONS */}
+                    <div className={styles.footer}>
+                        <Button
+                            variant="ghost"
+                            size="small"
+                            onClick={handleClear}
+                            color="inherit"
+                        >
+                            {TEXT_HOURS_PICKER.BUTTON_CLEAR}
+                        </Button>
+                        <div style={{ display: 'flex', gap: '0.5rem' }}>
+                            <Button
+                                variant="ghost"
+                                size="small"
+                                onClick={handleSetNow}
+                                color="green"
+                            >
+                                {TEXT_HOURS_PICKER.BUTTON_NOW}
+                            </Button>
+                            <Button
+                                variant="primary"
+                                size="small"
+                                onClick={handleConfirm}
+                                color={accentColor}
+                            >
+                                {TEXT_HOURS_PICKER.BUTTON_CONFIRM}
+                            </Button>
+                        </div>
+                    </div>
+                </Frame>
+            )}
+        </div>
+    );
+};
+
+export default HoursPicker;

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

@@ -0,0 +1,99 @@
+.inputGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+.hoursFrame {
+  width: 340px !important;
+  padding: 1.25rem !important;
+  border-radius: 16px !important;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  border-bottom: 1px solid #f1f5f9;
+  padding-bottom: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.modalTitle {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.timeDisplaySection {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background-color: #f8fafc;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+  margin-bottom: 1rem;
+}
+
+.timeColumn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.timeSeparator {
+  font-size: 1.75rem;
+  font-weight: 800;
+  color: #94a3b8;
+  margin-top: -4px;
+}
+
+.periodColumn {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  margin-left: 0.25rem;
+}
+
+.presetsSection {
+  margin-bottom: 1rem;
+}
+
+.presetsTitle {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #64748b;
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.presetsGrid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.4rem;
+}
+
+.quickSelectGrid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.4rem;
+  margin-bottom: 1rem;
+  max-height: 140px;
+  overflow-y: auto;
+  padding-right: 0.2rem;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 0.75rem;
+  border-top: 1px solid #f1f5f9;
+}

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

@@ -0,0 +1,44 @@
+import HoursPicker from './index.jsx';
+
+export default {
+  title: 'Components/HoursPicker',
+  component: HoursPicker,
+};
+
+export const Default = {
+  args: {
+    label: 'Hora de inicio',
+    name: 'startTime',
+    value: '',
+    onChange: (e) => console.log('changed', e.target.value),
+  },
+};
+
+export const WithPreselectedValue = {
+  args: {
+    label: 'Hora de la cita',
+    name: 'appointmentTime',
+    value: '14:30',
+    onChange: (e) => console.log('changed', e.target.value),
+  },
+};
+
+export const Required = {
+  args: {
+    label: 'Hora límite',
+    name: 'deadlineTime',
+    value: '09:00',
+    required: true,
+    onChange: (e) => console.log('changed', e.target.value),
+  },
+};
+
+export const Disabled = {
+  args: {
+    label: 'Hora de cierre',
+    name: 'closeTime',
+    value: '18:00',
+    disabled: true,
+    onChange: (e) => console.log('changed', e.target.value),
+  },
+};

package/screens/components/HoursPicker/utils.js

@@ -0,0 +1,48 @@
+export const parseTimeTo12h = (value) => {
+  if (value instanceof Date && !Number.isNaN(value.getTime())) {
+    const h24 = value.getHours();
+    const m = value.getMinutes();
+    const period = h24 >= 12 ? 'PM' : 'AM';
+    let h12 = h24 % 12;
+    if (h12 === 0) h12 = 12;
+    return { hours: h12, minutes: m, period };
+  }
+
+  if (typeof value === 'string' && value.trim() !== '') {
+    const match = value.match(/^(\d{1,2}):(\d{2})/);
+    if (match) {
+      const h24 = Number(match[1]);
+      const m = Number(match[2]);
+      if (!Number.isNaN(h24) && !Number.isNaN(m) && h24 >= 0 && h24 <= 23 && m >= 0 && m <= 59) {
+        const period = h24 >= 12 ? 'PM' : 'AM';
+        let h12 = h24 % 12;
+        if (h12 === 0) h12 = 12;
+        return { hours: h12, minutes: m, period };
+      }
+    }
+  }
+
+  return { hours: 12, minutes: 0, period: 'AM' };
+};
+
+export const format12hTo24h = (hours, minutes, period) => {
+  let h24 = Number(hours);
+  if (period === 'PM' && h24 !== 12) h24 += 12;
+  if (period === 'AM' && h24 === 12) h24 = 0;
+  
+  const formattedHours = String(h24).padStart(2, '0');
+  const formattedMinutes = String(minutes).padStart(2, '0');
+  return `${formattedHours}:${formattedMinutes}`;
+};
+
+export const getDisplayTimeText = (value, hours, minutes, period) => {
+  if (!value) return '';
+  const displayHours = String(hours).padStart(2, '0');
+  const displayMinutes = String(minutes).padStart(2, '0');
+  return `${displayHours}:${displayMinutes} ${period}`;
+};
+
+export const getCurrentTime12h = () => {
+  const now = new Date();
+  return parseTimeTo12h(now);
+};