/* global React, PageShell, AGGIE_CATALOG, LucideIcon, TextField, FieldLabel, HelpText, fieldShellStyle, FieldGrid, FCBox, FCSectionLabel, FCSpecRow, FCSpec, FCIntro, FIELD_HEIGHT */ /* * AggieFormAdvanced.jsx — Batch 21 part 2: * Date & time · File upload · Inline validation * * Builds on the primitives exported by AggieFormCore.jsx. * * Helper prefix: FA. */ const { useState: _faUseState, useEffect: _faUseEffect, useRef: _faUseRef } = React; // ════════════════════════════════════════════════════════════════════════ // 1 — Date & time // ════════════════════════════════════════════════════════════════════════ function DateInput({ id, label, value, onChange, required, hint, helpText, error }) { const [focused, setFocused] = _faUseState(false); return (
{label && {label}}
setFocused(true)} onBlur={() => setFocused(false)} style={{ ...fieldShellStyle({ size: "md", state: error ? "error" : "default", focused }), paddingRight: 36 }} />
{error ?
{error}
: helpText && {helpText}}
); } // Inline calendar — used inside the date-range demo function MonthCalendar({ year, month, selected = [], rangeStart, rangeEnd, onPick, today }) { const first = new Date(year, month, 1); const startDow = first.getDay(); const daysInMonth = new Date(year, month + 1, 0).getDate(); const cells = []; for (let i = 0; i < startDow; i++) cells.push(null); for (let d = 1; d <= daysInMonth; d++) cells.push(d); while (cells.length % 7 !== 0) cells.push(null); const isInRange = (d) => { if (!rangeStart || !rangeEnd) return false; const t = new Date(year, month, d).getTime(); return t >= rangeStart.getTime() && t <= rangeEnd.getTime(); }; const isEdge = (d) => { if (!d) return false; const t = new Date(year, month, d).getTime(); return (rangeStart && t === rangeStart.getTime()) || (rangeEnd && t === rangeEnd.getTime()); }; const monthName = new Date(year, month, 1).toLocaleString("en", { month: "long" }); const dows = ["S", "M", "T", "W", "T", "F", "S"]; return (
{monthName} {year}
{dows.map((d, i) => (
{d}
))} {cells.map((d, i) => { if (d === null) return
; const inRange = isInRange(d); const edge = isEdge(d); const isToday = today && today.getFullYear() === year && today.getMonth() === month && today.getDate() === d; return ( ); })}
); } function FormDatePage() { const item = AGGIE_CATALOG.find(c => c.id === "form-date"); const [d1, setD1] = _faUseState("2026-04-15"); const [d2, setD2] = _faUseState(""); const [time, setTime] = _faUseState("14:30"); const today = new Date(2026, 3, 28); // Apr 28 2026 // Range demo state const [rs, setRs] = _faUseState(new Date(2026, 3, 14)); const [re, setRe] = _faUseState(new Date(2026, 3, 22)); const [pickStep, setPickStep] = _faUseState("end"); // "start" | "end" const onPick = (d) => { if (pickStep === "start") { setRs(d); setRe(null); setPickStep("end"); } else if (!rs || d < rs) { setRs(d); setRe(null); } else { setRe(d); setPickStep("start"); } }; return ( Date and time inputs. Native <input type="date"> handles single-day selection well — keep it for forms. The custom calendar appears for date-range pickers and event scheduling, where the visual context of a month grid is worth the cost. All formatting is locale-aware. Native date & time inputs setD1(e.target.value)} required helpText="Submission must arrive by 11:59 PM CT." /> setD2(e.target.value)} hint="optional" />
Meeting time setTime(e.target.value)} style={fieldShellStyle({ size: "md" })} /> America/Chicago (Texas A&M System default).
Date range — dual-month custom calendar
Start date
{rs ? rs.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }) : "Select start…"}
End date
{re ? re.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }) : "Select end…"}
Single-month picker — for event scheduling
{}} today={today} />
); } // ════════════════════════════════════════════════════════════════════════ // 2 — File upload // ════════════════════════════════════════════════════════════════════════ function FilePicker({ label, helpText, accept = "PDF, DOCX up to 25MB" }) { const [filename, setFilename] = _faUseState(""); return (
{label && {label}}
{filename || "No file selected"}
{filename && ( )}
{helpText || `Accepted: ${accept}`}
); } function DropZone({ accept = "PDF, DOCX, TIFF up to 50MB" }) { const [hover, setHover] = _faUseState(false); return (
{ e.preventDefault(); setHover(true); }} onDragLeave={() => setHover(false)} onDrop={(e) => { e.preventDefault(); setHover(false); }} style={{ border: `2px dashed ${hover ? "var(--brand-primary)" : "var(--surface-border)"}`, borderRadius: "var(--radius-md)", padding: "36px 20px", background: hover ? "color-mix(in srgb, var(--brand-primary) 5%, transparent)" : "var(--surface-raised)", textAlign: "center", transition: "all 0.15s ease", cursor: "pointer", }}>
Drag files here, or browse
{accept}
); } function FileRow({ name, size, status, progress }) { const statusMap = { uploading: { color: "var(--brand-primary)", icon: null, label: "Uploading" }, success: { color: "var(--color-success)", icon: "check-circle", label: "Uploaded" }, error: { color: "var(--color-danger)", icon: "alert-circle", label: "Failed" }, }[status]; return (
{name} {size}
{status === "uploading" ? (
) : (
{statusMap.icon && } {statusMap.label}
)}
); } function FormFilePage() { const item = AGGIE_CATALOG.find(c => c.id === "form-file"); const [progress, setProgress] = _faUseState(64); _faUseEffect(() => { const t = setInterval(() => setProgress(p => p >= 100 ? 0 : p + 4), 220); return () => clearInterval(t); }, []); return ( Three patterns. The basic file picker for a single attachment. The drop zone for the primary upload surface. The multi-file list shows progress, success, and error states per row. Always advertise mime-type and size limits upfront — never surface a 50MB error after the user waited 90 seconds. File picker — basic single-file Drop zone — drag-and-drop primary surface Multi-file list — progress + per-row status
3 files · 14.8 MB total
); } // ════════════════════════════════════════════════════════════════════════ // 3 — Inline validation // ════════════════════════════════════════════════════════════════════════ function PasswordMeter({ password }) { // Simple heuristic — never use this in production. const lengthOk = password.length >= 12; const upperOk = /[A-Z]/.test(password); const numOk = /[0-9]/.test(password); const symOk = /[^A-Za-z0-9]/.test(password); const score = [lengthOk, upperOk, numOk, symOk].filter(Boolean).length; const tones = ["#C9C9C9", "var(--color-danger)", "var(--color-warning)", "var(--brand-accent)", "var(--color-success)"]; const labels = ["Empty", "Weak", "Fair", "Strong", "Excellent"]; return (
{[1, 2, 3, 4].map(i => (
))}
Strength: {labels[score]} {password.length} chars
12+ characters Uppercase letter Number Symbol
); } function Rule({ ok, children }) { return ( {children} ); } function AsyncEmailField() { const [email, setEmail] = _faUseState(""); const [state, setState] = _faUseState("idle"); // idle | checking | available | taken | invalid _faUseEffect(() => { if (!email) { setState("idle"); return; } if (!/.+@.+\..+/.test(email)) { setState("invalid"); return; } setState("checking"); const t = setTimeout(() => { // Simulate "park.junseo@tamu.edu" being taken setState(email.toLowerCase().includes("park.junseo") ? "taken" : "available"); }, 700); return () => clearTimeout(t); }, [email]); const trailing = { idle: null, checking: , available: , taken: , invalid: , }[state]; const helpText = state === "available" ? "This handle is available." : state === "checking" ? "Checking availability…" : null; const error = state === "taken" ? "Already taken — try a variant or sign in instead." : state === "invalid" ? "Enter a valid email address." : null; return (
Username (your TAMU email)
setEmail(e.target.value)} placeholder="park.junseo@tamu.edu" style={{ ...fieldShellStyle({ size: "md", state: error ? "error" : state === "available" ? "success" : "default" }), paddingRight: 36 }} /> {trailing}
{error ? (
{error}
) : helpText ? {helpText} : We'll check availability as you type.}
); } function ServerErrorBanner() { return (
We couldn't save your changes
The server returned 422 — funding source not authorized for this division. Update the funding field below or contact your division admin.
); } function InlineValidationPage() { const item = AGGIE_CATALOG.find(c => c.id === "inline-validation"); const [pwd, setPwd] = _faUseState("Password!1"); return ( Validation should help, not punish. Show help text by default. Show error only after the user has interacted (or on submit). Show success sparingly — only when the user might genuinely doubt the result, not as a participation trophy on every field. Help vs error — replacing pattern {}} /> {}} /> Field-level states — error · success · warning {}} /> {}} />
API token
tk_••••••32a9
Token expires in 5 days. Rotate before April 30.
Async validation — debounced, with spinner Password strength meter
setPwd(e.target.value)} />
Server-side error — page-level banner above form {}} /> ); } function NativeSelectStub() { return (
Division
Mobility Division
Match the funding source's authorized division.
); } // ════════════════════════════════════════════════════════════════════════ // Export // ════════════════════════════════════════════════════════════════════════ Object.assign(window, { FormDatePage, FormFilePage, InlineValidationPage, });