); const LoadingSkeleton = ({ type = 'cards', count = 3 }) => { // inject shimmer CSS once if (!document.getElementById('ybp-shimmer-style')) { const st = document.createElement('style'); st.id = 'ybp-shimmer-style'; st.textContent = shimmerStyle; document.head.appendChild(st); } const s = { card: { background: 'var(--ybp-panel,#fff)', border: '1px solid var(--ybp-border,#e5e7eb)', borderRadius: 10, padding: 16, marginBottom: 12, display: 'flex', flexDirection: 'column', gap: 10, }, row: { display: 'flex', gap: 12, alignItems: 'center', marginBottom: 8 }, }; if (type === 'cards') { return (

{Array.from({ length: count }).map((_, i) => (

))}

); } if (type === 'rows') { return (

{Array.from({ length: count }).map((_, i) => (

))}

); } if (type === 'gantt') { return (

{Array.from({ length: count }).map((_, i) => (

))}

); } if (type === 'detail') { return (

{[1,2,3].map(i => )}

{[80, 65, 75].map((w, i) => (

))}

); } // default: single block return (

); }; // ───────────────────────────────────────────────────────────────────────────── // Toast System // ───────────────────────────────────────────────────────────────────────────── let _toastContainer = null; let _toastSetState = null; let _toastIdCounter = 0; const TOAST_ICONS = { success: { icon: 'check_circle', color: DS.green, bg: '#f0fdf4', border: '#bbf7d0' }, error: { icon: 'x_circle', color: DS.red, bg: '#fef2f2', border: '#fecaca' }, warning: { icon: 'alert', color: DS.yellow, bg: '#fffbeb', border: '#fde68a' }, info: { icon: 'info', color: DS.blue, bg: '#eff6ff', border: '#bfdbfe' }, loading: { icon: null, color: DS.gray, bg: '#f9fafb', border: '#e5e7eb' }, }; function _showToast(type, message, duration) { if (!_toastSetState) { _ensureToastMount(); setTimeout(() => _showToast(type, message, duration), 100); return; } const id = ++_toastIdCounter; const ms = duration !== undefined ? duration : (type === 'error' ? 5000 : type === 'loading' ? 0 : 3000); _toastSetState(prev => [...prev, { id, type, message, ms }]); if (ms > 0) setTimeout(() => _dismissToast(id), ms); return id; } function _dismissToast(id) { if (_toastSetState) _toastSetState(prev => prev.filter(t => t.id !== id)); } function _ensureToastMount() { if (_toastContainer) return; _toastContainer = document.createElement('div'); _toastContainer.id = 'ybp-toast-root'; document.body.appendChild(_toastContainer); const { createRoot } = ReactDOM; const root = createRoot(_toastContainer); root.render(React.createElement(ToastContainer)); } const ToastContainer = () => { const [toasts, setToasts] = React.useState([]); _toastSetState = setToasts; const isMobile = window.innerWidth < 600; const s = { wrap: { position: 'fixed', ...(isMobile ? { bottom: 80, left: '50%', transform: 'translateX(-50%)', width: 'calc(100vw - 32px)' } : { top: 20, left: 20 }), // RTL: left = visual right in rtl context zIndex: 99999, display: 'flex', flexDirection: 'column', gap: 8, fontFamily: DS.font, direction: 'rtl', pointerEvents: 'none', }, }; return (

{toasts.slice(-3).map(t => { const cfg = TOAST_ICONS[t.type] || TOAST_ICONS.info; return (

{t.type === 'loading' ?

: } {t.message}

); })}

); }; // inject toast animation CSS (function() { if (document.getElementById('ybp-toast-style')) return; const st = document.createElement('style'); st.id = 'ybp-toast-style'; st.textContent = ` @keyframes ybp-toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } @keyframes ybp-spin { to { transform: rotate(360deg); } } `; document.head.appendChild(st); })(); // Public API const toastSuccess = (msg, ms) => _showToast('success', msg, ms); const toastError = (msg, ms) => _showToast('error', msg, ms); const toastWarning = (msg, ms) => _showToast('warning', msg, ms); const toastInfo = (msg, ms) => _showToast('info', msg, ms); const toastLoading = (msg) => _showToast('loading', msg, 0); const toastDismiss = (id) => _dismissToast(id); // ───────────────────────────────────────────────────────────────────────────── // ConfirmDialog // ───────────────────────────────────────────────────────────────────────────── const ConfirmDialog = ({ isOpen, title, description, confirmLabel = 'אשר', cancelLabel = 'ביטול', confirmVariant = 'primary', // 'primary' | 'danger' onConfirm, onCancel, requireInput, // string — user must type this to confirm children, }) => { const [inputVal, setInputVal] = React.useState(''); React.useEffect(() => { if (!isOpen) setInputVal(''); }, [isOpen]); if (!isOpen) return null; const canConfirm = !requireInput || inputVal.trim() === requireInput; const s = { overlay: { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.45)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 99990, padding: 16, fontFamily: DS.font, direction: 'rtl', }, dialog: { background: 'var(--ybp-panel,#fff)', borderRadius: 12, padding: '24px', width: '100%', maxWidth: 380, boxShadow: '0 20px 60px rgba(0,0,0,0.2)', }, title: { margin: '0 0 8px', fontSize: 17, fontWeight: 700, color: 'var(--ybp-ink,#111827)' }, desc: { margin: '0 0 16px', fontSize: 14, color: 'var(--ybp-ink-faint,#6b7280)', lineHeight: 1.5 }, input: { width: '100%', padding: '10px 12px', borderRadius: 8, border: `1.5px solid var(--ybp-border,#e5e7eb)`, fontSize: 14, fontFamily: DS.font, marginBottom: 16, boxSizing: 'border-box', background: 'var(--ybp-input-bg,#fff)', color: 'var(--ybp-ink,#111827)', direction: 'rtl', outline: 'none', }, row: { display: 'flex', gap: 10, justifyContent: 'flex-end' }, cancelBtn: { padding: '10px 18px', borderRadius: 8, background: 'var(--ybp-row-hover,#f3f4f6)', border: '1px solid var(--ybp-border,#e5e7eb)', color: 'var(--ybp-ink,#111827)', fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: DS.font, }, confirmBtn: { padding: '10px 18px', borderRadius: 8, background: confirmVariant === 'danger' ? DS.red : DS.navy, color: '#fff', border: 'none', fontSize: 14, fontWeight: 600, cursor: canConfirm ? 'pointer' : 'not-allowed', fontFamily: DS.font, opacity: canConfirm ? 1 : 0.5, }, }; return (

{ if (e.target === e.currentTarget) onCancel && onCancel(); }}>

{title &&

{title}

} {description &&

{description}

} {children} {requireInput && (

הקלד "{requireInput}" כדי לאשר:

setInputVal(e.target.value)} placeholder={requireInput} autoFocus />

)}

{/* RTL: cancel on left (visual right), confirm on right (visual left) */}

); }; // ───────────────────────────────────────────────────────────────────────────── // FormField — wrapper אחיד לשדות טופס עם validation // ───────────────────────────────────────────────────────────────────────────── const FormField = ({ label, required, error, helper, children }) => (

{label && ( {label}{required && *} )} {children} {error && ( {error} )} {helper && !error && ( {helper} )}

); // ───────────────────────────────────────────────────────────────────────────── // ReminderStatusBadge — badge צבעוני לפי תאריך יעד // ───────────────────────────────────────────────────────────────────────────── const ReminderStatusBadge = ({ dueDate, status }) => { if (status === 'done') return null; const now = Date.now(); const due = new Date(dueDate).getTime(); const daysLeft = Math.ceil((due - now) / 86400000); let color, bg, label; if (daysLeft < 0) { color = DS.red; bg = '#fef2f2'; label = `איחור ${Math.abs(daysLeft)} ימים`; } else if (daysLeft < 3) { color = DS.red; bg = '#fef2f2'; label = daysLeft === 0 ? 'היום' : `${daysLeft} ימים`; } else if (daysLeft < 7) { color = DS.yellow; bg = '#fffbeb'; label = `${daysLeft} ימים`; } else { color = DS.green; bg = '#f0fdf4'; label = `${daysLeft} ימים`; } return ( {label} ); }; // ───────────────────────────────────────────────────────────────────────────── // StatusBadge — badge סטטוס אחיד // ───────────────────────────────────────────────────────────────────────────── const StatusBadge = ({ status, label, size = 'sm' }) => { const configs = { done: { color: DS.green, bg: '#f0fdf4', text: 'בוצע' }, open: { color: DS.red, bg: '#fef2f2', text: 'פתוח' }, pending: { color: DS.yellow, bg: '#fffbeb', text: 'בהמתנה' }, progress: { color: DS.blue, bg: '#eff6ff', text: 'בתהליך' }, draft: { color: DS.gray, bg: '#f9fafb', text: 'טיוטה' }, winner: { color: DS.green, bg: '#f0fdf4', text: 'זוכה' }, lost: { color: DS.gray, bg: '#f9fafb', text: 'לא נבחר' }, }; const cfg = configs[status] || { color: DS.gray, bg: '#f9fafb', text: status }; const sz = size === 'sm' ? { fontSize:11, padding:'2px 8px' } : { fontSize:13, padding:'4px 12px' }; return ( {label || cfg.text} ); }; // ───────────────────────────────────────────────────────────────────────────── // Export to window // ───────────────────────────────────────────────────────────────────────────── Object.assign(window, { // Components EmptyState, ErrorState, LoadingSkeleton, ToastContainer, ConfirmDialog, FormField, ReminderStatusBadge, StatusBadge, DSIcon, // Toast functions toastSuccess, toastError, toastWarning, toastInfo, toastLoading, toastDismiss, // Design tokens DS, }); // mount ToastContainer immediately _ensureToastMount();

{title}

{title || cfg.title}

{title}