chore: apply Biome formatting after mobile drawer implementation
This commit is contained in:
@@ -9,437 +9,486 @@ 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,
|
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,
|
control,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
register,
|
register,
|
||||||
reset,
|
reset,
|
||||||
setError,
|
setError,
|
||||||
setValue,
|
setValue,
|
||||||
trigger,
|
trigger,
|
||||||
watch,
|
watch,
|
||||||
formState: { errors },
|
formState: { errors },
|
||||||
} = useForm<EventFormValues>({
|
} = useForm<EventFormValues>({
|
||||||
defaultValues: getDefaultEventFormValues(),
|
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 = async () => {
|
||||||
const valid = await trigger(STEP_FIELDS[step]);
|
const valid = await trigger(STEP_FIELDS[step]);
|
||||||
if (valid) advanceStep();
|
if (valid) advanceStep();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSave = handleSubmit((values) => {
|
const handleSave = handleSubmit((values) => {
|
||||||
const result = validateEventFormValues(values);
|
const result = validateEventFormValues(values);
|
||||||
if (!result.success) {
|
if (!result.success) {
|
||||||
const fieldErrors = result.error.flatten().fieldErrors;
|
const fieldErrors = result.error.flatten().fieldErrors;
|
||||||
let firstErrorStep: 1 | 2 | 3 | null = null;
|
let firstErrorStep: 1 | 2 | 3 | null = null;
|
||||||
for (const [fieldName, messages] of Object.entries(fieldErrors)) {
|
for (const [fieldName, messages] of Object.entries(fieldErrors)) {
|
||||||
const firstMessage = messages?.[0];
|
const firstMessage = messages?.[0];
|
||||||
if (firstMessage) {
|
if (firstMessage) {
|
||||||
setError(fieldName as keyof EventFormValues, { message: firstMessage });
|
setError(fieldName as keyof EventFormValues, {
|
||||||
const ownerStep = (
|
message: firstMessage,
|
||||||
Object.entries(STEP_FIELDS) as [string, (keyof EventFormValues)[]][]
|
});
|
||||||
).find(([, fields]) => fields.includes(fieldName as keyof EventFormValues))?.[0];
|
const ownerStep = (
|
||||||
const ownerStepNum = ownerStep ? (Number(ownerStep) as 1 | 2 | 3) : null;
|
Object.entries(STEP_FIELDS) as [string, (keyof EventFormValues)[]][]
|
||||||
if (ownerStepNum !== null && (firstErrorStep === null || ownerStepNum < firstErrorStep)) {
|
).find(([, fields]) =>
|
||||||
firstErrorStep = ownerStepNum;
|
fields.includes(fieldName as keyof EventFormValues),
|
||||||
}
|
)?.[0];
|
||||||
}
|
const ownerStepNum = ownerStep
|
||||||
}
|
? (Number(ownerStep) as 1 | 2 | 3)
|
||||||
if (firstErrorStep !== null) setStep(firstErrorStep);
|
: null;
|
||||||
return;
|
if (
|
||||||
}
|
ownerStepNum !== null &&
|
||||||
|
(firstErrorStep === null || ownerStepNum < firstErrorStep)
|
||||||
|
) {
|
||||||
|
firstErrorStep = ownerStepNum;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (firstErrorStep !== null) setStep(firstErrorStep);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (values.recurrenceRule) {
|
if (values.recurrenceRule) {
|
||||||
const recurrenceValidation = validateRecurrence(parseRecurrenceRule(values.recurrenceRule));
|
const recurrenceValidation = validateRecurrence(
|
||||||
if (!recurrenceValidation.isValid) {
|
parseRecurrenceRule(values.recurrenceRule),
|
||||||
setError("recurrenceRule", {
|
);
|
||||||
message:
|
if (!recurrenceValidation.isValid) {
|
||||||
recurrenceValidation.errors.rule ||
|
setError("recurrenceRule", {
|
||||||
recurrenceValidation.errors.count ||
|
message:
|
||||||
recurrenceValidation.errors.until ||
|
recurrenceValidation.errors.rule ||
|
||||||
"Invalid recurrence.",
|
recurrenceValidation.errors.count ||
|
||||||
});
|
recurrenceValidation.errors.until ||
|
||||||
setStep(3);
|
"Invalid recurrence.",
|
||||||
return;
|
});
|
||||||
}
|
setStep(3);
|
||||||
}
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
onSave(result.data);
|
onSave(result.data);
|
||||||
reset(getDefaultEventFormValues());
|
reset(getDefaultEventFormValues());
|
||||||
});
|
});
|
||||||
|
|
||||||
const stepProps = { control, register, errors, watch, setValue, isAiDraft };
|
const stepProps = { control, register, errors, watch, setValue, isAiDraft };
|
||||||
|
|
||||||
if (!isMobile) {
|
if (!isMobile) {
|
||||||
return (
|
return (
|
||||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||||
<DialogContent className="max-w-2xl rounded-[10px] bg-card p-0 shadow-xl">
|
<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)]">
|
<DialogHeader className="px-6 py-5 shadow-[inset_0_-1px_0_0_var(--color-border)]">
|
||||||
<DialogTitle className="text-[28px] tracking-[-0.06em]">{titleText}</DialogTitle>
|
<DialogTitle className="text-[28px] tracking-[-0.06em]">
|
||||||
<DialogDescription>{descriptionText}</DialogDescription>
|
{titleText}
|
||||||
</DialogHeader>
|
</DialogTitle>
|
||||||
<form className="grid gap-6 px-6 py-5" onSubmit={handleSave}>
|
<DialogDescription>{descriptionText}</DialogDescription>
|
||||||
{isAiDraft && <AiDraftBanner />}
|
</DialogHeader>
|
||||||
<section className="grid gap-3">
|
<form className="grid gap-6 px-6 py-5" onSubmit={handleSave}>
|
||||||
<p className="font-mono text-[11px] uppercase text-muted-foreground">Event details</p>
|
{isAiDraft && <AiDraftBanner />}
|
||||||
<DetailsStep {...stepProps} isAiDraft={false} />
|
<section className="grid gap-3">
|
||||||
</section>
|
<p className="font-mono text-[11px] uppercase text-muted-foreground">
|
||||||
<section className="grid gap-3">
|
Event details
|
||||||
<p className="font-mono text-[11px] uppercase text-muted-foreground">Schedule</p>
|
</p>
|
||||||
<ScheduleStep {...stepProps} isAiDraft={false} />
|
<DetailsStep {...stepProps} isAiDraft={false} />
|
||||||
</section>
|
</section>
|
||||||
<section className="grid gap-3">
|
<section className="grid gap-3">
|
||||||
<p className="font-mono text-[11px] uppercase text-muted-foreground">Recurrence</p>
|
<p className="font-mono text-[11px] uppercase text-muted-foreground">
|
||||||
<RecurrenceStep {...stepProps} isAiDraft={false} />
|
Schedule
|
||||||
</section>
|
</p>
|
||||||
<DialogFooter>
|
<ScheduleStep {...stepProps} isAiDraft={false} />
|
||||||
<Button type="button" variant="ghost" onClick={() => handleOpenChange(false)}>
|
</section>
|
||||||
Cancel
|
<section className="grid gap-3">
|
||||||
</Button>
|
<p className="font-mono text-[11px] uppercase text-muted-foreground">
|
||||||
<Button type="submit">{saveLabel}</Button>
|
Recurrence
|
||||||
</DialogFooter>
|
</p>
|
||||||
</form>
|
<RecurrenceStep {...stepProps} isAiDraft={false} />
|
||||||
</DialogContent>
|
</section>
|
||||||
</Dialog>
|
<DialogFooter>
|
||||||
);
|
<Button
|
||||||
}
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => handleOpenChange(false)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button type="submit">{saveLabel}</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const progressBars = (
|
const progressBars = (
|
||||||
<div className="grid grid-cols-3 gap-1.5 px-4 pt-2 pb-3">
|
<div className="grid grid-cols-3 gap-1.5 px-4 pt-2 pb-3">
|
||||||
{([1, 2, 3] as const).map((n) => (
|
{([1, 2, 3] as const).map((n) => (
|
||||||
<div
|
<div
|
||||||
key={n}
|
key={n}
|
||||||
className={cn(
|
className={cn(
|
||||||
"h-[3px] rounded-full transition-colors duration-200",
|
"h-[3px] rounded-full transition-colors duration-200",
|
||||||
n <= step ? "bg-foreground" : "bg-muted",
|
n <= step ? "bg-foreground" : "bg-muted",
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const stepTitles: Record<1 | 2 | 3, string> = {
|
const stepTitles: Record<1 | 2 | 3, string> = {
|
||||||
1: "Event Details",
|
1: "Event Details",
|
||||||
2: "Schedule",
|
2: "Schedule",
|
||||||
3: "Recurrence",
|
3: "Recurrence",
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Drawer open={open} onOpenChange={handleOpenChange}>
|
<Drawer open={open} onOpenChange={handleOpenChange}>
|
||||||
<DrawerContent>
|
<DrawerContent>
|
||||||
<DrawerHeader>
|
<DrawerHeader>
|
||||||
<div className="flex items-start justify-between gap-3">
|
<div className="flex items-start justify-between gap-3">
|
||||||
<div>
|
<div>
|
||||||
<DrawerTitle>{stepTitles[step]}</DrawerTitle>
|
<DrawerTitle>{stepTitles[step]}</DrawerTitle>
|
||||||
<DrawerDescription className="mt-1">
|
<DrawerDescription className="mt-1">
|
||||||
{step === 1 && "Title and start date are required."}
|
{step === 1 && "Title and start date are required."}
|
||||||
{step === 2 && "Set your event's date and time."}
|
{step === 2 && "Set your event's date and time."}
|
||||||
{step === 3 && "Optionally repeat this event."}
|
{step === 3 && "Optionally repeat this event."}
|
||||||
</DrawerDescription>
|
</DrawerDescription>
|
||||||
</div>
|
</div>
|
||||||
<span className="shrink-0 rounded-full bg-muted px-2.5 py-1 text-xs text-muted-foreground">
|
<span className="shrink-0 rounded-full bg-muted px-2.5 py-1 text-xs text-muted-foreground">
|
||||||
{step} / 3
|
{step} / 3
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</DrawerHeader>
|
</DrawerHeader>
|
||||||
{progressBars}
|
{progressBars}
|
||||||
<form onSubmit={handleSave}>
|
<form onSubmit={handleSave}>
|
||||||
<div className="overflow-y-auto px-4 pb-4 max-h-[55dvh]">
|
<div className="overflow-y-auto px-4 pb-4 max-h-[55dvh]">
|
||||||
{step === 1 && <DetailsStep {...stepProps} />}
|
{step === 1 && <DetailsStep {...stepProps} />}
|
||||||
{step === 2 && <ScheduleStep {...stepProps} />}
|
{step === 2 && <ScheduleStep {...stepProps} />}
|
||||||
{step === 3 && <RecurrenceStep {...stepProps} />}
|
{step === 3 && <RecurrenceStep {...stepProps} />}
|
||||||
</div>
|
</div>
|
||||||
<DrawerFooter>
|
<DrawerFooter>
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
onClick={step === 1 ? () => handleOpenChange(false) : retreatStep}
|
onClick={step === 1 ? () => handleOpenChange(false) : retreatStep}
|
||||||
>
|
>
|
||||||
{step === 1 ? "Cancel" : "Back"}
|
{step === 1 ? "Cancel" : "Back"}
|
||||||
</Button>
|
</Button>
|
||||||
{step < 3 ? (
|
{step < 3 ? (
|
||||||
<Button type="button" onClick={handleNext}>
|
<Button type="button" onClick={handleNext}>
|
||||||
Next
|
Next
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
) : (
|
||||||
<Button type="submit">{saveLabel}</Button>
|
<Button type="submit">{saveLabel}</Button>
|
||||||
)}
|
)}
|
||||||
</DrawerFooter>
|
</DrawerFooter>
|
||||||
</form>
|
</form>
|
||||||
</DrawerContent>
|
</DrawerContent>
|
||||||
</Drawer>
|
</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>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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,
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user