old4ever/local-cal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: old4ever:565974b19fca9cd760241ab30532188c5b2f8a98
Branches Tags
old4ever:main
...
compare: old4ever:main
Branches Tags
old4ever:main

6 Commits
565974b19f ... main

Author SHA1 Message Date
Dmytro Stanchiev
1af9ee02df fix: isolate EventCard tests and clean compose refs hook 2026-05-25 11:01:01 -04:00
Dmytro Stanchiev
3c3ba7cb33 fix: reset mobile event drawer step after save 2026-05-25 09:37:07 -04:00
Dmytro Stanchiev
eea63b0c71 fix: validate mobile event drawer steps with schema 2026-05-25 09:33:25 -04:00
Dmytro Stanchiev
4ddcc44f84 chore: apply Biome formatting after mobile drawer implementation 2026-05-25 09:28:01 -04:00
Dmytro Stanchiev
2088aa0c4d test: stop requiring dialog.tsx to use mobile hook 2026-05-25 09:25:55 -04:00
Dmytro Stanchiev
3958b24307 refactor: remove isMobile forks from DialogContent and DialogFooter 2026-05-25 09:24:24 -04:00
9 changed files with 742 additions and 597 deletions
Expand all files Collapse all files

826
src/components/event-dialog.tsx
View File

@@ -9,437 +9,503 @@ import { RecurrencePicker } from "@/components/recurrence-picker";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
DialogDescription, DialogDescription,
DialogFooter, DialogFooter,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { cn } from "@/lib/utils";
import { import {
Drawer, Drawer,
DrawerContent, DrawerContent,
DrawerDescription, DrawerDescription,
DrawerFooter, DrawerFooter,
DrawerHeader, DrawerHeader,
DrawerTitle, DrawerTitle,
} from "@/components/ui/drawer"; } from "@/components/ui/drawer";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { useIsMobile } from "@/hooks/use-mobile"; import { useIsMobile } from "@/hooks/use-mobile";
import { import {
type EventFormValues, type EventFormValues,
getDefaultEventFormValues, getDefaultEventFormValues,
validateEventFormValues, validateEventFormStep,
validateEventFormValues,
} from "@/lib/event-form"; } from "@/lib/event-form";
import { parseRecurrenceRule, validateRecurrence } from "@/lib/recurrence"; import { parseRecurrenceRule, validateRecurrence } from "@/lib/recurrence";
import { cn } from "@/lib/utils";
const STEP_FIELDS: Record<1 | 2 | 3, (keyof EventFormValues)[]> = { const STEP_FIELDS: Record<1 | 2 | 3, (keyof EventFormValues)[]> = {
1: ["title", "url"], 1: ["title", "url"],
2: ["start", "end"], 2: ["start", "end"],
3: ["recurrenceRule"], 3: ["recurrenceRule"],
}; };
interface EventDialogProps { interface EventDialogProps {
open: boolean; open: boolean;
onOpenChange: (open: boolean) => void; onOpenChange: (open: boolean) => void;
editingId: string | null; editingId: string | null;
dialogSource: "manual" | "ai"; dialogSource: "manual" | "ai";
initialValues: EventFormValues; initialValues: EventFormValues;
onSave: (values: EventFormValues) => void; onSave: (values: EventFormValues) => void;
onReset: () => void; onReset: () => void;
} }
export const EventDialog = ({ export const EventDialog = ({
open, open,
onOpenChange, onOpenChange,
editingId, editingId,
dialogSource, dialogSource,
initialValues, initialValues,
onSave, onSave,
onReset, onReset,
}: EventDialogProps) => { }: EventDialogProps) => {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const isAiDraft = dialogSource === "ai" && !editingId; const isAiDraft = dialogSource === "ai" && !editingId;
const titleText = editingId ? "Edit Event" : isAiDraft ? "Review AI Draft" : "New Event"; const titleText = editingId
const descriptionText = editingId ? "Edit Event"
? "Update the event details below. Title and start date are required." : isAiDraft
: isAiDraft ? "Review AI Draft"
? "AI filled in this event from your prompt. Review each field, then save when it looks right." : "New Event";
: "Create an event manually. Title and start date are required."; const descriptionText = editingId
const saveLabel = editingId ? "Update Event" : "Save Event"; ? "Update the event details below. Title and start date are required."
: isAiDraft
? "AI filled in this event from your prompt. Review each field, then save when it looks right."
: "Create an event manually. Title and start date are required.";
const saveLabel = editingId ? "Update Event" : "Save Event";
const { const {
control, clearErrors,
handleSubmit, control,
register, getValues,
reset, handleSubmit,
setError, register,
setValue, reset,
trigger, setError,
watch, setValue,
formState: { errors }, watch,
} = useForm<EventFormValues>({ formState: { errors },
defaultValues: getDefaultEventFormValues(), } = useForm<EventFormValues>({
}); defaultValues: getDefaultEventFormValues(),
});
const [step, setStep] = useState<1 | 2 | 3>(1); const [step, setStep] = useState<1 | 2 | 3>(1);
const advanceStep = () => setStep((s) => Math.min(s + 1, 3) as 1 | 2 | 3); const advanceStep = () => setStep((s) => Math.min(s + 1, 3) as 1 | 2 | 3);
const retreatStep = () => setStep((s) => Math.max(s - 1, 1) as 1 | 2 | 3); const retreatStep = () => setStep((s) => Math.max(s - 1, 1) as 1 | 2 | 3);
useEffect(() => { useEffect(() => {
reset(initialValues); reset(initialValues);
}, [initialValues, reset]); }, [initialValues, reset]);
const handleOpenChange = (nextOpen: boolean) => { const handleOpenChange = (nextOpen: boolean) => {
if (!nextOpen) { if (!nextOpen) {
reset(getDefaultEventFormValues()); reset(getDefaultEventFormValues());
setStep(1); setStep(1);
onReset(); onReset();
} }
onOpenChange(nextOpen); onOpenChange(nextOpen);
}; };
const handleNext = async () => { const handleNext = () => {
const valid = await trigger(STEP_FIELDS[step]); const stepFields = STEP_FIELDS[step];
if (valid) advanceStep(); clearErrors(stepFields);
}; const stepValidation = validateEventFormStep(getValues(), stepFields);
if (stepValidation.success) {
advanceStep();
return;
}
const handleSave = handleSubmit((values) => { for (const [fieldName, messages] of Object.entries(
const result = validateEventFormValues(values); stepValidation.fieldErrors,
if (!result.success) { )) {
const fieldErrors = result.error.flatten().fieldErrors; const firstMessage = messages?.[0];
let firstErrorStep: 1 | 2 | 3 | null = null; if (firstMessage) {
for (const [fieldName, messages] of Object.entries(fieldErrors)) { setError(fieldName as keyof EventFormValues, { message: firstMessage });
const firstMessage = messages?.[0]; }
if (firstMessage) { }
setError(fieldName as keyof EventFormValues, { message: firstMessage }); };
const ownerStep = (
Object.entries(STEP_FIELDS) as [string, (keyof EventFormValues)[]][]
).find(([, fields]) => fields.includes(fieldName as keyof EventFormValues))?.[0];
const ownerStepNum = ownerStep ? (Number(ownerStep) as 1 | 2 | 3) : null;
if (ownerStepNum !== null && (firstErrorStep === null || ownerStepNum < firstErrorStep)) {
firstErrorStep = ownerStepNum;
}
}
}
if (firstErrorStep !== null) setStep(firstErrorStep);
return;
}
if (values.recurrenceRule) { const handleSave = handleSubmit((values) => {
const recurrenceValidation = validateRecurrence(parseRecurrenceRule(values.recurrenceRule)); const result = validateEventFormValues(values);
if (!recurrenceValidation.isValid) { if (!result.success) {
setError("recurrenceRule", { const fieldErrors = result.error.flatten().fieldErrors;
message: let firstErrorStep: 1 | 2 | 3 | null = null;
recurrenceValidation.errors.rule || for (const [fieldName, messages] of Object.entries(fieldErrors)) {
recurrenceValidation.errors.count || const firstMessage = messages?.[0];
recurrenceValidation.errors.until || if (firstMessage) {
"Invalid recurrence.", setError(fieldName as keyof EventFormValues, {
}); message: firstMessage,
setStep(3); });
return; const ownerStep = (
} Object.entries(STEP_FIELDS) as [string, (keyof EventFormValues)[]][]
} ).find(([, fields]) =>
fields.includes(fieldName as keyof EventFormValues),
)?.[0];
const ownerStepNum = ownerStep
? (Number(ownerStep) as 1 | 2 | 3)
: null;
if (
ownerStepNum !== null &&
(firstErrorStep === null || ownerStepNum < firstErrorStep)
) {
firstErrorStep = ownerStepNum;
}
}
}
if (firstErrorStep !== null) setStep(firstErrorStep);
return;
}
onSave(result.data); if (values.recurrenceRule) {
reset(getDefaultEventFormValues()); const recurrenceValidation = validateRecurrence(
}); parseRecurrenceRule(values.recurrenceRule),
);
if (!recurrenceValidation.isValid) {
setError("recurrenceRule", {
message:
recurrenceValidation.errors.rule ||
recurrenceValidation.errors.count ||
recurrenceValidation.errors.until ||
"Invalid recurrence.",
});
setStep(3);
return;
}
}
const stepProps = { control, register, errors, watch, setValue, isAiDraft }; onSave(result.data);
setStep(1);
reset(getDefaultEventFormValues());
});
if (!isMobile) { const stepProps = { control, register, errors, watch, setValue, isAiDraft };
return (
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogContent className="max-w-2xl rounded-[10px] bg-card p-0 shadow-xl">
<DialogHeader className="px-6 py-5 shadow-[inset_0_-1px_0_0_var(--color-border)]">
<DialogTitle className="text-[28px] tracking-[-0.06em]">{titleText}</DialogTitle>
<DialogDescription>{descriptionText}</DialogDescription>
</DialogHeader>
<form className="grid gap-6 px-6 py-5" onSubmit={handleSave}>
{isAiDraft && <AiDraftBanner />}
<section className="grid gap-3">
<p className="font-mono text-[11px] uppercase text-muted-foreground">Event details</p>
<DetailsStep {...stepProps} isAiDraft={false} />
</section>
<section className="grid gap-3">
<p className="font-mono text-[11px] uppercase text-muted-foreground">Schedule</p>
<ScheduleStep {...stepProps} isAiDraft={false} />
</section>
<section className="grid gap-3">
<p className="font-mono text-[11px] uppercase text-muted-foreground">Recurrence</p>
<RecurrenceStep {...stepProps} isAiDraft={false} />
</section>
<DialogFooter>
<Button type="button" variant="ghost" onClick={() => handleOpenChange(false)}>
Cancel
</Button>
<Button type="submit">{saveLabel}</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
}
const progressBars = ( if (!isMobile) {
<div className="grid grid-cols-3 gap-1.5 px-4 pt-2 pb-3"> return (
{([1, 2, 3] as const).map((n) => ( <Dialog open={open} onOpenChange={handleOpenChange}>
<div <DialogContent className="max-w-2xl rounded-[10px] bg-card p-0 shadow-xl">
key={n} <DialogHeader className="px-6 py-5 shadow-[inset_0_-1px_0_0_var(--color-border)]">
className={cn( <DialogTitle className="text-[28px] tracking-[-0.06em]">
"h-[3px] rounded-full transition-colors duration-200", {titleText}
n <= step ? "bg-foreground" : "bg-muted", </DialogTitle>
)} <DialogDescription>{descriptionText}</DialogDescription>
/> </DialogHeader>
))} <form className="grid gap-6 px-6 py-5" onSubmit={handleSave}>
</div> {isAiDraft && <AiDraftBanner />}
); <section className="grid gap-3">
<p className="font-mono text-[11px] uppercase text-muted-foreground">
Event details
</p>
<DetailsStep {...stepProps} isAiDraft={false} />
</section>
<section className="grid gap-3">
<p className="font-mono text-[11px] uppercase text-muted-foreground">
Schedule
</p>
<ScheduleStep {...stepProps} isAiDraft={false} />
</section>
<section className="grid gap-3">
<p className="font-mono text-[11px] uppercase text-muted-foreground">
Recurrence
</p>
<RecurrenceStep {...stepProps} isAiDraft={false} />
</section>
<DialogFooter>
<Button
type="button"
variant="ghost"
onClick={() => handleOpenChange(false)}
>
Cancel
</Button>
<Button type="submit">{saveLabel}</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
}
const stepTitles: Record<1 | 2 | 3, string> = { const progressBars = (
1: "Event Details", <div className="grid grid-cols-3 gap-1.5 px-4 pt-2 pb-3">
2: "Schedule", {([1, 2, 3] as const).map((n) => (
3: "Recurrence", <div
}; key={n}
className={cn(
"h-[3px] rounded-full transition-colors duration-200",
n <= step ? "bg-foreground" : "bg-muted",
)}
/>
))}
</div>
);
return ( const stepTitles: Record<1 | 2 | 3, string> = {
<Drawer open={open} onOpenChange={handleOpenChange}> 1: "Event Details",
<DrawerContent> 2: "Schedule",
<DrawerHeader> 3: "Recurrence",
<div className="flex items-start justify-between gap-3"> };
<div>
<DrawerTitle>{stepTitles[step]}</DrawerTitle> return (
<DrawerDescription className="mt-1"> <Drawer open={open} onOpenChange={handleOpenChange}>
{step === 1 && "Title and start date are required."} <DrawerContent>
{step === 2 && "Set your event's date and time."} <DrawerHeader>
{step === 3 && "Optionally repeat this event."} <div className="flex items-start justify-between gap-3">
</DrawerDescription> <div>
</div> <DrawerTitle>{stepTitles[step]}</DrawerTitle>
<span className="shrink-0 rounded-full bg-muted px-2.5 py-1 text-xs text-muted-foreground"> <DrawerDescription className="mt-1">
{step} / 3 {step === 1 && "Title and start date are required."}
</span> {step === 2 && "Set your event's date and time."}
</div> {step === 3 && "Optionally repeat this event."}
</DrawerHeader> </DrawerDescription>
{progressBars} </div>
<form onSubmit={handleSave}> <span className="shrink-0 rounded-full bg-muted px-2.5 py-1 text-xs text-muted-foreground">
<div className="overflow-y-auto px-4 pb-4 max-h-[55dvh]"> {step} / 3
{step === 1 && <DetailsStep {...stepProps} />} </span>
{step === 2 && <ScheduleStep {...stepProps} />} </div>
{step === 3 && <RecurrenceStep {...stepProps} />} </DrawerHeader>
</div> {progressBars}
<DrawerFooter> <form onSubmit={handleSave}>
<Button <div className="overflow-y-auto px-4 pb-4 max-h-[55dvh]">
type="button" {step === 1 && <DetailsStep {...stepProps} />}
variant="outline" {step === 2 && <ScheduleStep {...stepProps} />}
onClick={step === 1 ? () => handleOpenChange(false) : retreatStep} {step === 3 && <RecurrenceStep {...stepProps} />}
> </div>
{step === 1 ? "Cancel" : "Back"} <DrawerFooter>
</Button> <Button
{step < 3 ? ( type="button"
<Button type="button" onClick={handleNext}> variant="outline"
Next onClick={step === 1 ? () => handleOpenChange(false) : retreatStep}
</Button> >
) : ( {step === 1 ? "Cancel" : "Back"}
<Button type="submit">{saveLabel}</Button> </Button>
)} {step < 3 ? (
</DrawerFooter> <Button type="button" onClick={handleNext}>
</form> Next
</DrawerContent> </Button>
</Drawer> ) : (
); <Button type="submit">{saveLabel}</Button>
)}
</DrawerFooter>
</form>
</DrawerContent>
</Drawer>
);
}; };
interface StepProps { interface StepProps {
control: ReturnType<typeof useForm<EventFormValues>>["control"]; control: ReturnType<typeof useForm<EventFormValues>>["control"];
register: ReturnType<typeof useForm<EventFormValues>>["register"]; register: ReturnType<typeof useForm<EventFormValues>>["register"];
errors: ReturnType<typeof useForm<EventFormValues>>["formState"]["errors"]; errors: ReturnType<typeof useForm<EventFormValues>>["formState"]["errors"];
watch: ReturnType<typeof useForm<EventFormValues>>["watch"]; watch: ReturnType<typeof useForm<EventFormValues>>["watch"];
setValue: ReturnType<typeof useForm<EventFormValues>>["setValue"]; setValue: ReturnType<typeof useForm<EventFormValues>>["setValue"];
isAiDraft: boolean; isAiDraft: boolean;
} }
function AiDraftBanner() { function AiDraftBanner() {
return ( return (
<div className="rounded-md border border-primary/20 bg-primary/5 px-3 py-2 text-xs leading-relaxed text-primary"> <div className="rounded-md border border-primary/20 bg-primary/5 px-3 py-2 text-xs leading-relaxed text-primary">
This draft was generated from natural language. Double-check dates, times, location, This draft was generated from natural language. Double-check dates, times,
recurrence, and links before saving. location, recurrence, and links before saving.
</div> </div>
); );
} }
function DetailsStep({ function DetailsStep({
control, control,
register, register,
errors, errors,
isAiDraft, isAiDraft,
}: Omit<StepProps, "watch" | "setValue">) { }: Omit<StepProps, "watch" | "setValue">) {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
return ( return (
<div className="grid gap-4"> <div className="grid gap-4">
{isAiDraft && <AiDraftBanner />} {isAiDraft && <AiDraftBanner />}
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label htmlFor="event-title">Title</Label> <Label htmlFor="event-title">Title</Label>
<Input <Input
id="event-title" id="event-title"
placeholder="Event title" placeholder="Event title"
className="font-medium" className="font-medium"
{...register("title")} {...register("title")}
/> />
{errors.title && <p className="text-xs text-destructive">{errors.title.message}</p>} {errors.title && (
</div> <p className="text-xs text-destructive">{errors.title.message}</p>
<div className="space-y-1.5"> )}
<Label htmlFor="event-description">Description / notes</Label> </div>
<Textarea <div className="space-y-1.5">
id="event-description" <Label htmlFor="event-description">Description / notes</Label>
className="field-sizing-content min-h-[60px] max-h-40 resize-none placeholder:text-muted-foreground/50" <Textarea
placeholder="Add a description..." id="event-description"
{...register("description")} className="field-sizing-content min-h-[60px] max-h-40 resize-none placeholder:text-muted-foreground/50"
/> placeholder="Add a description..."
</div> {...register("description")}
<div className={isMobile ? "grid grid-cols-1 gap-3" : "grid grid-cols-2 gap-3"}> />
<div className="space-y-1.5"> </div>
<Label htmlFor="event-location">Location</Label> <div
<Controller className={
name="location" isMobile ? "grid grid-cols-1 gap-3" : "grid grid-cols-2 gap-3"
control={control} }
render={({ field }) => ( >
<LocationAutocomplete <div className="space-y-1.5">
id="event-location" <Label htmlFor="event-location">Location</Label>
onChange={field.onChange} <Controller
value={field.value} name="location"
/> control={control}
)} render={({ field }) => (
/> <LocationAutocomplete
</div> id="event-location"
<div className="space-y-1.5"> onChange={field.onChange}
<Label htmlFor="event-url">URL</Label> value={field.value}
<Input id="event-url" placeholder="URL" {...register("url")} /> />
{errors.url && <p className="text-xs text-destructive">{errors.url.message}</p>} )}
</div> />
</div> </div>
</div> <div className="space-y-1.5">
); <Label htmlFor="event-url">URL</Label>
<Input id="event-url" placeholder="URL" {...register("url")} />
{errors.url && (
<p className="text-xs text-destructive">{errors.url.message}</p>
)}
</div>
</div>
</div>
);
} }
function ScheduleStep({ function ScheduleStep({
control, control,
errors, errors,
watch, watch,
setValue, setValue,
isAiDraft, isAiDraft,
}: Omit<StepProps, "register">) { }: Omit<StepProps, "register">) {
const allDay = watch("allDay"); const allDay = watch("allDay");
const start = watch("start"); const start = watch("start");
const DURATIONS = [ const DURATIONS = [
{ label: "+15 min", minutes: 15 }, { label: "+15 min", minutes: 15 },
{ label: "+30 min", minutes: 30 }, { label: "+30 min", minutes: 30 },
{ label: "+1 hour", minutes: 60 }, { label: "+1 hour", minutes: 60 },
{ label: "+3 hours", minutes: 180 }, { label: "+3 hours", minutes: 180 },
]; ];
const handleApplyDuration = (minutes: number) => { const handleApplyDuration = (minutes: number) => {
if (!start) return; if (!start) return;
const base = parseISO(start); const base = parseISO(start);
if (!isValid(base)) return; if (!isValid(base)) return;
const next = minutes < 60 ? addMinutes(base, minutes) : addHours(base, minutes / 60); const next =
const pad = (v: number) => String(v).padStart(2, "0"); minutes < 60 ? addMinutes(base, minutes) : addHours(base, minutes / 60);
const result = allDay const pad = (v: number) => String(v).padStart(2, "0");
? `${next.getFullYear()}-${pad(next.getMonth() + 1)}-${pad(next.getDate())}` const result = allDay
: `${next.getFullYear()}-${pad(next.getMonth() + 1)}-${pad(next.getDate())}T${pad(next.getHours())}:${pad(next.getMinutes())}:00`; ? `${next.getFullYear()}-${pad(next.getMonth() + 1)}-${pad(next.getDate())}`
setValue("end", result, { shouldDirty: true }); : `${next.getFullYear()}-${pad(next.getMonth() + 1)}-${pad(next.getDate())}T${pad(next.getHours())}:${pad(next.getMinutes())}:00`;
}; setValue("end", result, { shouldDirty: true });
};
return ( return (
<div className="grid gap-4"> <div className="grid gap-4">
{isAiDraft && <AiDraftBanner />} {isAiDraft && <AiDraftBanner />}
<div className="flex items-center gap-2 py-1"> <div className="flex items-center gap-2 py-1">
<Controller <Controller
name="allDay" name="allDay"
control={control} control={control}
render={({ field }) => ( render={({ field }) => (
<Checkbox <Checkbox
id="event-all-day" id="event-all-day"
checked={field.value} checked={field.value}
onCheckedChange={(checked) => field.onChange(checked === true)} onCheckedChange={(checked) => field.onChange(checked === true)}
/> />
)} )}
/> />
<Label htmlFor="event-all-day" className="cursor-pointer text-sm font-normal"> <Label
All day htmlFor="event-all-day"
</Label> className="cursor-pointer text-sm font-normal"
</div> >
<div className="space-y-2"> All day
<Controller </Label>
name="start" </div>
control={control} <div className="space-y-2">
render={({ field }) => ( <Controller
<DateTimePicker name="start"
value={field.value} control={control}
onChange={field.onChange} render={({ field }) => (
allDay={allDay} <DateTimePicker
placeholder="Start date" value={field.value}
/> onChange={field.onChange}
)} allDay={allDay}
/> placeholder="Start date"
{!allDay && ( />
<div className="flex gap-1 pl-0.5"> )}
{DURATIONS.map(({ label, minutes }) => ( />
<Button {!allDay && (
key={label} <div className="flex gap-1 pl-0.5">
type="button" {DURATIONS.map(({ label, minutes }) => (
variant="ghost" <Button
size="sm" key={label}
disabled={!start} type="button"
onClick={() => handleApplyDuration(minutes)} variant="ghost"
className="px-2 py-1 text-xs text-muted-foreground" size="sm"
> disabled={!start}
{label} onClick={() => handleApplyDuration(minutes)}
</Button> className="px-2 py-1 text-xs text-muted-foreground"
))} >
</div> {label}
)} </Button>
<Controller ))}
name="end" </div>
control={control} )}
render={({ field }) => ( <Controller
<DateTimePicker name="end"
value={field.value} control={control}
onChange={field.onChange} render={({ field }) => (
allDay={allDay} <DateTimePicker
placeholder="End date" value={field.value}
/> onChange={field.onChange}
)} allDay={allDay}
/> placeholder="End date"
{errors.start && <p className="text-xs text-destructive">{errors.start.message}</p>} />
{errors.end && <p className="text-xs text-destructive">{errors.end.message}</p>} )}
</div> />
</div> {errors.start && (
); <p className="text-xs text-destructive">{errors.start.message}</p>
)}
{errors.end && (
<p className="text-xs text-destructive">{errors.end.message}</p>
)}
</div>
</div>
);
} }
function RecurrenceStep({ function RecurrenceStep({
control, control,
errors, errors,
watch, watch,
isAiDraft, isAiDraft,
}: Omit<StepProps, "register" | "setValue">) { }: Omit<StepProps, "register" | "setValue">) {
const start = watch("start"); const start = watch("start");
return ( return (
<div className="grid gap-4"> <div className="grid gap-4">
{isAiDraft && <AiDraftBanner />} {isAiDraft && <AiDraftBanner />}
<Controller <Controller
name="recurrenceRule" name="recurrenceRule"
control={control} control={control}
render={({ field }) => ( render={({ field }) => (
<RecurrencePicker value={field.value} onChange={field.onChange} start={start} /> <RecurrencePicker
)} value={field.value}
/> onChange={field.onChange}
{errors.recurrenceRule && ( start={start}
<p className="text-xs text-destructive">{errors.recurrenceRule.message}</p> />
)} )}
</div> />
); {errors.recurrenceRule && (
<p className="text-xs text-destructive">
{errors.recurrenceRule.message}
</p>
)}
</div>
);
} }

15
src/components/ui/dialog.tsx
View File

@@ -4,7 +4,6 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
import { XIcon } from "lucide-react"; import { XIcon } from "lucide-react";
import type * as React from "react"; import type * as React from "react";
import { useIsMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
function Dialog({ function Dialog({
@@ -55,16 +54,13 @@ function DialogContent({
}: React.ComponentProps<typeof DialogPrimitive.Content> & { }: React.ComponentProps<typeof DialogPrimitive.Content> & {
showCloseButton?: boolean; showCloseButton?: boolean;
}) { }) {
const isMobile = useIsMobile();
return ( return (
<DialogPortal data-slot="dialog-portal"> <DialogPortal data-slot="dialog-portal">
<DialogOverlay /> <DialogOverlay />
<DialogPrimitive.Content <DialogPrimitive.Content
data-slot="dialog-content" data-slot="dialog-content"
className={cn( className={cn(
"bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-5 rounded-[10px] p-6 shadow-xl duration-200", "bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-5 rounded-[10px] p-6 shadow-xl duration-200 max-w-lg",
isMobile ? undefined : "max-w-lg",
className, className,
)} )}
{...props} {...props}
@@ -95,17 +91,10 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
} }
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) { function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
const isMobile = useIsMobile();
return ( return (
<div <div
data-slot="dialog-footer" data-slot="dialog-footer"
className={cn( className={cn("flex flex-row justify-end gap-2", className)}
isMobile
? "flex flex-col-reverse gap-2"
: "flex flex-row justify-end gap-2",
className,
)}
{...props} {...props}
/> />
); );

191
src/components/ui/drawer.tsx
View File

@@ -5,123 +5,134 @@ import { Drawer as DrawerPrimitive } from "vaul";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) { function Drawer({
return <DrawerPrimitive.Root data-slot="drawer" {...props} />; ...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
} }
function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) { function DrawerTrigger({
return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />; ...props
}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
} }
function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) { function DrawerPortal({
return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />; ...props
}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
} }
function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) { function DrawerClose({
return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />; ...props
}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
} }
function DrawerOverlay({ function DrawerOverlay({
className, className,
...props ...props
}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) { }: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
return ( return (
<DrawerPrimitive.Overlay <DrawerPrimitive.Overlay
data-slot="drawer-overlay" data-slot="drawer-overlay"
className={cn( className={cn(
"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
className, className,
)} )}
{...props} {...props}
/> />
); );
} }
function DrawerContent({ function DrawerContent({
className, className,
children, children,
...props ...props
}: React.ComponentProps<typeof DrawerPrimitive.Content>) { }: React.ComponentProps<typeof DrawerPrimitive.Content>) {
return ( return (
<DrawerPortal data-slot="drawer-portal"> <DrawerPortal data-slot="drawer-portal">
<DrawerOverlay /> <DrawerOverlay />
<DrawerPrimitive.Content <DrawerPrimitive.Content
data-slot="drawer-content" data-slot="drawer-content"
className={cn( className={cn(
"group/drawer-content fixed z-50 flex h-auto flex-col bg-background", "group/drawer-content fixed z-50 flex h-auto flex-col bg-background",
"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:max-w-sm", "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:max-w-sm",
"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:max-w-sm", "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:max-w-sm",
className, className,
)} )}
{...props} {...props}
> >
<div className="mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" /> <div className="mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
{children} {children}
</DrawerPrimitive.Content> </DrawerPrimitive.Content>
</DrawerPortal> </DrawerPortal>
); );
} }
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) { function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="drawer-header" data-slot="drawer-header"
className={cn( className={cn(
"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center", "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center",
className, className,
)} )}
{...props} {...props}
/> />
); );
} }
function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) { function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="drawer-footer" data-slot="drawer-footer"
className={cn( className={cn(
"sticky bottom-0 grid grid-cols-[0.8fr_1.2fr] gap-3 bg-gradient-to-t from-card via-card/95 to-transparent px-4 pb-6 pt-4", "sticky bottom-0 grid grid-cols-[0.8fr_1.2fr] gap-3 bg-gradient-to-t from-card via-card/95 to-transparent px-4 pb-6 pt-4",
className, className,
)} )}
{...props} {...props}
/> />
); );
} }
function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) { function DrawerTitle({
return ( className,
<DrawerPrimitive.Title ...props
data-slot="drawer-title" }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
className={cn("font-semibold text-foreground", className)} return (
{...props} <DrawerPrimitive.Title
/> data-slot="drawer-title"
); className={cn("font-semibold text-foreground", className)}
{...props}
/>
);
} }
function DrawerDescription({ function DrawerDescription({
className, className,
...props ...props
}: React.ComponentProps<typeof DrawerPrimitive.Description>) { }: React.ComponentProps<typeof DrawerPrimitive.Description>) {
return ( return (
<DrawerPrimitive.Description <DrawerPrimitive.Description
data-slot="drawer-description" data-slot="drawer-description"
className={cn("text-sm text-muted-foreground", className)} className={cn("text-sm text-muted-foreground", className)}
{...props} {...props}
/> />
); );
} }
export { export {
Drawer, Drawer,
DrawerClose, DrawerClose,
DrawerContent, DrawerContent,
DrawerDescription, DrawerDescription,
DrawerFooter, DrawerFooter,
DrawerHeader, DrawerHeader,
DrawerOverlay, DrawerOverlay,
DrawerPortal, DrawerPortal,
DrawerTitle, DrawerTitle,
DrawerTrigger, DrawerTrigger,
}; };

9
src/lib/compose-refs.ts
View File

@@ -54,9 +54,12 @@ function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
* A custom hook that composes multiple refs * A custom hook that composes multiple refs
* Accepts callback refs and RefObject(s) * Accepts callback refs and RefObject(s)
*/ */
function useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> { function useComposedRefs<T>(
// biome-ignore lint/correctness/useExhaustiveDependencies: we want to memoize by all values ref1: PossibleRef<T>,
return React.useCallback(composeRefs(...refs), refs); ref2: PossibleRef<T>,
ref3?: PossibleRef<T>,
): React.RefCallback<T> {
return React.useMemo(() => composeRefs(ref1, ref2, ref3), [ref1, ref2, ref3]);
} }
export { composeRefs, useComposedRefs }; export { composeRefs, useComposedRefs };

24
src/lib/event-form.ts
View File

@@ -110,3 +110,27 @@ export const getEventValidationIssues = (
export const validateEventFormValues = (values: EventFormValues) => export const validateEventFormValues = (values: EventFormValues) =>
eventFormSchema.safeParse(values); eventFormSchema.safeParse(values);
export const validateEventFormStep = (
values: EventFormValues,
fields: Array<keyof EventFormValues>,
) => {
const result = validateEventFormValues(values);
if (result.success) {
return { success: true as const, fieldErrors: {} };
}
const allFieldErrors = result.error.flatten().fieldErrors;
const fieldErrors: Partial<Record<keyof EventFormValues, string[]>> = {};
for (const field of fields) {
const messages = allFieldErrors[field];
if (messages?.length) {
fieldErrors[field] = messages;
}
}
return {
success: Object.keys(fieldErrors).length === 0,
fieldErrors,
};
};

113
tests/event-card.test.ts
View File

@@ -1,65 +1,76 @@
import { describe, expect, test } from "bun:test"; import { afterEach, beforeEach, describe, expect, test } from "bun:test";
import { renderToStaticMarkup } from "react-dom/server"; import { renderToStaticMarkup } from "react-dom/server";
import { EventCard } from "@/components/event-card"; import { EventCard } from "@/components/event-card";
import type { CalendarEvent } from "@/lib/types"; import type { CalendarEvent } from "@/lib/types";
const sampleEvent: CalendarEvent = { const sampleEvent: CalendarEvent = {
id: "evt_1", id: "evt_1",
title: "Design Review", title: "Design Review",
start: "2026-04-09T10:00:00+00:00", start: "2026-04-09T10:00:00+00:00",
end: "2026-04-09T11:00:00+00:00", end: "2026-04-09T11:00:00+00:00",
description: "Review the updated event list UI.", description: "Review the updated event list UI.",
location: "Studio A", location: "Studio A",
url: "https://example.com/event", url: "https://example.com/event",
allDay: false, allDay: false,
}; };
describe("EventCard actions trigger", () => { describe("EventCard actions trigger", () => {
test("shows the triple-dots trigger without requiring hover and exposes an aria-label for the icon-only button", () => { beforeEach(() => {
const markup = renderToStaticMarkup( globalThis.document = {
EventCard({ addEventListener: () => {},
event: sampleEvent, removeEventListener: () => {},
onEdit: () => {}, } as unknown as Document;
onDelete: () => {}, });
}),
);
expect(markup).toContain('aria-label="Event actions"'); afterEach(() => {
expect(markup).not.toContain("opacity-0"); delete (globalThis as { document?: Document }).document;
expect(markup).not.toContain("group-hover:opacity-100"); });
});
test("renders friendly shared date formatting instead of native locale strings", () => { test("shows the triple-dots trigger without requiring hover and exposes an aria-label for the icon-only button", () => {
const markup = renderToStaticMarkup( const markup = renderToStaticMarkup(
EventCard({ EventCard({
event: sampleEvent, event: sampleEvent,
onEdit: () => {}, onEdit: () => {},
onDelete: () => {}, onDelete: () => {},
}), }),
); );
expect(markup).toContain("10:00–11:00"); expect(markup).toContain('aria-label="Event actions"');
expect(markup).not.toContain("AM"); expect(markup).not.toContain("opacity-0");
}); expect(markup).not.toContain("group-hover:opacity-100");
});
test("renders inline warning copy for invalid event ranges", () => { test("renders friendly shared date formatting instead of native locale strings", () => {
const markup = renderToStaticMarkup( const markup = renderToStaticMarkup(
EventCard({ EventCard({
event: { event: sampleEvent,
id: "evt_invalid", onEdit: () => {},
title: "Broken Event", onDelete: () => {},
start: "2026-04-09T11:00:00+00:00", }),
end: "2026-04-09T10:00:00+00:00", );
allDay: false,
},
onEdit: () => {},
onDelete: () => {},
}),
);
expect(markup).toContain("Warning:"); expect(markup).toContain("10:00–11:00");
expect(markup).toContain("end time is before start time"); expect(markup).not.toContain("AM");
expect(markup).not.toContain("Preview"); });
expect(markup).not.toContain("Ship");
}); test("renders inline warning copy for invalid event ranges", () => {
const markup = renderToStaticMarkup(
EventCard({
event: {
id: "evt_invalid",
title: "Broken Event",
start: "2026-04-09T11:00:00+00:00",
end: "2026-04-09T10:00:00+00:00",
allDay: false,
},
onEdit: () => {},
onDelete: () => {},
}),
);
expect(markup).toContain("Warning:");
expect(markup).toContain("end time is before start time");
expect(markup).not.toContain("Preview");
expect(markup).not.toContain("Ship");
});
}); });

14
tests/event-dialog.test.tsx
View File

@@ -77,6 +77,20 @@ describe("EventDialog public modes", () => {
expect(source).toContain("setStep(1)"); expect(source).toContain("setStep(1)");
}); });
test("event-dialog resets step to 1 after successful save", () => {
const source = readFileSync("src/components/event-dialog.tsx", "utf8");
expect(source).toMatch(/onSave\(result\.data\);\s*setStep\(1\);\s*reset/);
});
test("event-dialog validates mobile drawer steps with schema-backed step validation", () => {
const source = readFileSync("src/components/event-dialog.tsx", "utf8");
expect(source).toContain("validateEventFormStep");
expect(source).toContain("getValues()");
expect(source).toContain("fieldErrors");
});
test("dialog.tsx no longer forks on isMobile in DialogContent", () => { test("dialog.tsx no longer forks on isMobile in DialogContent", () => {
const source = readFileSync("src/components/ui/dialog.tsx", "utf8"); const source = readFileSync("src/components/ui/dialog.tsx", "utf8");

146
tests/event-form.test.ts
View File

@@ -1,73 +1,101 @@
import { describe, expect, test } from "bun:test"; import { describe, expect, test } from "bun:test";
import { import {
getDefaultEventFormValues, getDefaultEventFormValues,
getEventFormValuesFromEvent, getEventFormValuesFromEvent,
validateEventFormValues, validateEventFormStep,
validateEventFormValues,
} from "@/lib/event-form"; } from "@/lib/event-form";
describe("event form defaults and validation", () => { describe("event form defaults and validation", () => {
test("returns manual-create defaults with blank values", () => { test("returns manual-create defaults with blank values", () => {
expect(getDefaultEventFormValues()).toEqual({ expect(getDefaultEventFormValues()).toEqual({
title: "", title: "",
description: "", description: "",
location: "", location: "",
url: "", url: "",
start: "", start: "",
end: "", end: "",
allDay: false, allDay: false,
recurrenceRule: undefined, recurrenceRule: undefined,
}); });
}); });
test("maps edit and AI-prefilled events into form values", () => { test("maps edit and AI-prefilled events into form values", () => {
const values = getEventFormValuesFromEvent({ const values = getEventFormValuesFromEvent({
title: "AI Draft", title: "AI Draft",
location: "Studio A", location: "Studio A",
start: "2026-04-09T10:00:00.000Z", start: "2026-04-09T10:00:00.000Z",
recurrenceRule: "FREQ=WEEKLY;INTERVAL=1;BYDAY=TH", recurrenceRule: "FREQ=WEEKLY;INTERVAL=1;BYDAY=TH",
}); });
expect(values.title).toBe("AI Draft"); expect(values.title).toBe("AI Draft");
expect(values.location).toBe("Studio A"); expect(values.location).toBe("Studio A");
expect(values.start).toBe("2026-04-09T10:00:00.000Z"); expect(values.start).toBe("2026-04-09T10:00:00.000Z");
expect(values.recurrenceRule).toBe("FREQ=WEEKLY;INTERVAL=1;BYDAY=TH"); expect(values.recurrenceRule).toBe("FREQ=WEEKLY;INTERVAL=1;BYDAY=TH");
}); });
test("requires title and start values", () => { test("requires title and start values", () => {
const result = validateEventFormValues(getDefaultEventFormValues()); const result = validateEventFormValues(getDefaultEventFormValues());
expect(result.success).toBe(false); expect(result.success).toBe(false);
if (!result.success) { if (!result.success) {
expect(result.error.flatten().fieldErrors.title?.[0]).toContain("Title is required"); expect(result.error.flatten().fieldErrors.title?.[0]).toContain("Title is required");
expect(result.error.flatten().fieldErrors.start?.[0]).toContain("Start date is required"); expect(result.error.flatten().fieldErrors.start?.[0]).toContain("Start date is required");
} }
}); });
test("requires end to be after start when present", () => { test("requires end to be after start when present", () => {
const result = validateEventFormValues({ const result = validateEventFormValues({
...getDefaultEventFormValues(), ...getDefaultEventFormValues(),
title: "Planning", title: "Planning",
start: "2026-04-09T10:00:00.000Z", start: "2026-04-09T10:00:00.000Z",
end: "2026-04-09T09:30:00.000Z", end: "2026-04-09T09:30:00.000Z",
}); });
expect(result.success).toBe(false); expect(result.success).toBe(false);
if (!result.success) { if (!result.success) {
expect(result.error.flatten().fieldErrors.end?.[0]).toContain("after the start date"); expect(result.error.flatten().fieldErrors.end?.[0]).toContain("after the start date");
} }
}); });
test("requires an optional URL to be valid when provided", () => { test("requires an optional URL to be valid when provided", () => {
const result = validateEventFormValues({ const result = validateEventFormValues({
...getDefaultEventFormValues(), ...getDefaultEventFormValues(),
title: "Planning", title: "Planning",
start: "2026-04-09T10:00:00.000Z", start: "2026-04-09T10:00:00.000Z",
url: "not-a-url", url: "not-a-url",
}); });
expect(result.success).toBe(false); expect(result.success).toBe(false);
if (!result.success) { if (!result.success) {
expect(result.error.flatten().fieldErrors.url?.[0]).toContain("valid URL"); expect(result.error.flatten().fieldErrors.url?.[0]).toContain("valid URL");
} }
}); });
test("validates only the requested mobile drawer step", () => {
const values = {
...getDefaultEventFormValues(),
url: "not-a-url",
end: "2026-04-09T09:30:00.000Z",
};
const detailsResult = validateEventFormStep(values, ["title", "url"]);
const scheduleResult = validateEventFormStep(values, ["start", "end"]);
expect(detailsResult.success).toBe(false);
if (!detailsResult.success) {
expect(detailsResult.fieldErrors.title?.[0]).toContain("Title is required");
expect(detailsResult.fieldErrors.url?.[0]).toContain("valid URL");
expect(detailsResult.fieldErrors.start).toBeUndefined();
expect(detailsResult.fieldErrors.end).toBeUndefined();
}
expect(scheduleResult.success).toBe(false);
if (!scheduleResult.success) {
expect(scheduleResult.fieldErrors.start?.[0]).toContain("Start date is required");
expect(scheduleResult.fieldErrors.end?.[0]).toContain("valid");
expect(scheduleResult.fieldErrors.title).toBeUndefined();
expect(scheduleResult.fieldErrors.url).toBeUndefined();
}
});
}); });

1
tests/mobile-hook-adoption.test.ts
View File

@@ -26,7 +26,6 @@ const DIRECT_HOOK_FILES = [
"src/components/settings-panel.tsx", "src/components/settings-panel.tsx",
"src/components/ui/calendar.tsx", "src/components/ui/calendar.tsx",
"src/components/ui/date-picker.tsx", "src/components/ui/date-picker.tsx",
"src/components/ui/dialog.tsx",
"src/components/ui/input-group.tsx", "src/components/ui/input-group.tsx",
"src/components/ui/textarea.tsx", "src/components/ui/textarea.tsx",
]; ];