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

style: format recurrence helpers

Browse Source
This commit is contained in:
Dmytro Stanchiev
2026-04-10 15:40:56 -04:00
parent f3350e0124
commit 42989b1437
5 changed files with 106 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/recurrence-picker.tsx
View File

@@ -15,11 +15,11 @@ import {
getRecurrencePreview,
getWeekdayOptions,
parseRecurrenceRule,
type RecurrenceFormValue,
recurrenceFrequencyLabels,
type SupportedRecurrenceFrequency,
serializeRecurrenceRule,
validateRecurrence,
type RecurrenceFormValue,
type SupportedRecurrenceFrequency,
type Weekday,
} from "@/lib/recurrence";
@@ -39,10 +39,7 @@ const getStartWeekday = (start?: string): Weekday => {
return weekdays[jsDay] ?? "MO";
};
const updateWeekdays = (
current: Weekday[],
day: Weekday,
): Weekday[] => {
const updateWeekdays = (current: Weekday[], day: Weekday): Weekday[] => {
return current.includes(day)
? current.filter((existingDay) => existingDay !== day)
: [...current, day];
@@ -95,11 +92,13 @@ export function RecurrencePicker({ value, start, onChange }: Props) {
<SelectValue />
</SelectTrigger>
<SelectContent>
{Object.entries(recurrenceFrequencyLabels).map(([optionValue, label]) => (
<SelectItem key={optionValue} value={optionValue}>
{label}
</SelectItem>
))}
{Object.entries(recurrenceFrequencyLabels).map(
([optionValue, label]) => (
<SelectItem key={optionValue} value={optionValue}>
{label}
</SelectItem>
),
)}
</SelectContent>
</Select>
</div>
@@ -108,7 +107,12 @@ export function RecurrencePicker({ value, start, onChange }: Props) {
<>
<div>
<Label htmlFor="interval" className="text-xs text-muted-foreground">
Interval (every {recurrence.interval} {recurrence.freq === "DAILY" ? "day" : recurrence.freq === "WEEKLY" ? "week" : "month"}
Interval (every {recurrence.interval}{" "}
{recurrence.freq === "DAILY"
? "day"
: recurrence.freq === "WEEKLY"
? "week"
: "month"}
{recurrence.interval > 1 ? "s" : ""})
</Label>
<Input
@@ -117,7 +121,9 @@ export function RecurrencePicker({ value, start, onChange }: Props) {
min={1}
value={recurrence.interval}
onChange={(event) =>
update({ interval: Number.parseInt(event.target.value, 10) || 1 })
update({
interval: Number.parseInt(event.target.value, 10) || 1,
})
}
className="mt-1.5 w-24"
/>
@@ -125,7 +131,9 @@ export function RecurrencePicker({ value, start, onChange }: Props) {
{recurrence.freq === "WEEKLY" && (
<div>
<Label className="text-xs text-muted-foreground">Days of the week</Label>
<Label className="text-xs text-muted-foreground">
Days of the week
</Label>
<div className="mt-1.5 flex flex-wrap gap-3">
{weekdayOptions.map(({ value: day, label }) => (
<div key={day} className="flex items-center gap-1.5">
@@ -136,7 +144,10 @@ export function RecurrencePicker({ value, start, onChange }: Props) {
update({ byDay: updateWeekdays(recurrence.byDay, day) })
}
/>
<Label htmlFor={day} className="cursor-pointer text-xs font-normal">
<Label
htmlFor={day}
className="cursor-pointer text-xs font-normal"
>
{label}
</Label>
</div>
@@ -186,10 +197,14 @@ export function RecurrencePicker({ value, start, onChange }: Props) {
</div>
{validation.errors.count && (
<p className="text-xs text-destructive">{validation.errors.count}</p>
<p className="text-xs text-destructive">
{validation.errors.count}
</p>
)}
{validation.errors.until && (
<p className="text-xs text-destructive">{validation.errors.until}</p>
<p className="text-xs text-destructive">
{validation.errors.until}
</p>
)}
{validation.errors.rule && (
<p className="text-xs text-destructive">{validation.errors.rule}</p>

20
src/components/rrule-display.tsx
View File

@@ -1,6 +1,10 @@
import { format, parseISO } from "date-fns";
import { Badge } from "@/components/ui/badge";
import { formatRecurrenceText, getRecurrencePreview, parseRecurrenceRule } from "@/lib/recurrence";
import {
formatRecurrenceText,
getRecurrencePreview,
parseRecurrenceRule,
} from "@/lib/recurrence";
interface RRuleDisplayProps {
rrule?: string;
@@ -12,17 +16,25 @@ export function RRuleDisplay({ rrule, className, start }: RRuleDisplayProps) {
if (!rrule) return null;
const humanText = formatRecurrenceText(rrule);
const preview = start ? getRecurrencePreview(parseRecurrenceRule(rrule), start, 3) : [];
const preview = start
? getRecurrencePreview(parseRecurrenceRule(rrule), start, 3)
: [];
return (
<div className={className}>
<div className="flex flex-wrap items-center gap-1.5">
<Badge variant="secondary" className="h-5 text-[10px] font-normal capitalize">
<Badge
variant="secondary"
className="h-5 text-[10px] font-normal capitalize"
>
{humanText ?? rrule}
</Badge>
{preview.length > 0 && (
<Badge variant="outline" className="h-5 text-[10px] font-normal">
Next: {preview.map((value) => format(parseISO(value), "MMM d")).join(", ")}
Next:{" "}
{preview
.map((value) => format(parseISO(value), "MMM d"))
.join(", ")}
</Badge>
)}
</div>

21
src/lib/event-date-format.ts
View File

@@ -1,10 +1,4 @@
import {
format,
isSameDay,
isToday,
isTomorrow,
parseISO,
} from "date-fns";
import { format, isSameDay, isToday, isTomorrow, parseISO } from "date-fns";
import type { CalendarEvent } from "@/lib/types";
const getFriendlyDayLabel = (value: Date): string => {
@@ -13,7 +7,10 @@ const getFriendlyDayLabel = (value: Date): string => {
return format(value, "MMM d, yyyy");
};
export const formatEventStartLabel = (start: string, allDay?: boolean): string => {
export const formatEventStartLabel = (
start: string,
allDay?: boolean,
): string => {
const parsed = parseISO(start);
const dayLabel = getFriendlyDayLabel(parsed);
@@ -21,12 +18,16 @@ export const formatEventStartLabel = (start: string, allDay?: boolean): string =
return `${dayLabel} · ${format(parsed, "HH:mm")}`;
};
export const formatEventRangeLabel = (event: Pick<CalendarEvent, "start" | "end" | "allDay">): string => {
export const formatEventRangeLabel = (
event: Pick<CalendarEvent, "start" | "end" | "allDay">,
): string => {
const startDate = parseISO(event.start);
const startLabel = getFriendlyDayLabel(startDate);
if (event.allDay || !event.end) {
return event.allDay ? startLabel : `${startLabel} · ${format(startDate, "HH:mm")}`;
return event.allDay
? startLabel
: `${startLabel} · ${format(startDate, "HH:mm")}`;
}
const endDate = parseISO(event.end);

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

@@ -39,7 +39,10 @@ const eventFormSchema = z
if (value.end) {
const startDate = parseISO(value.start);
const endDate = parseISO(value.end);
if (Number.isNaN(startDate.getTime()) || Number.isNaN(endDate.getTime())) {
if (
Number.isNaN(startDate.getTime()) ||
Number.isNaN(endDate.getTime())
) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
path: ["end"],

54
src/lib/recurrence.ts
View File

@@ -2,7 +2,11 @@ import { format, parseISO } from "date-fns";
import { RRule, rrulestr } from "rrule";
import type { Frequency, Weekday } from "@/lib/rfc5545-types";
export type SupportedRecurrenceFrequency = "NONE" | "DAILY" | "WEEKLY" | "MONTHLY";
export type SupportedRecurrenceFrequency =
| "NONE"
| "DAILY"
| "WEEKLY"
| "MONTHLY";
export interface RecurrenceFormValue {
freq: SupportedRecurrenceFrequency;
@@ -23,7 +27,10 @@ const EMPTY_RECURRENCE: RecurrenceFormValue = {
byDay: [],
};
const RULE_FREQUENCIES: Record<Exclude<SupportedRecurrenceFrequency, "NONE">, number> = {
const RULE_FREQUENCIES: Record<
Exclude<SupportedRecurrenceFrequency, "NONE">,
number
> = {
DAILY: RRule.DAILY,
WEEKLY: RRule.WEEKLY,
MONTHLY: RRule.MONTHLY,
@@ -58,7 +65,10 @@ const sortWeekdays = (days: string[] | undefined): Weekday[] => {
if (!days?.length) return [];
return [...days]
.filter((day): day is Weekday => WEEKDAY_ORDER.includes(day as Weekday))
.sort((left, right) => WEEKDAY_ORDER.indexOf(left) - WEEKDAY_ORDER.indexOf(right));
.sort(
(left, right) =>
WEEKDAY_ORDER.indexOf(left) - WEEKDAY_ORDER.indexOf(right),
);
};
const toUntilDate = (until: string): Date => {
@@ -105,7 +115,10 @@ export const validateRecurrence = (
errors.rule = "Interval must be at least 1.";
}
if (value.count !== undefined && (!Number.isInteger(value.count) || value.count < 1)) {
if (
value.count !== undefined &&
(!Number.isInteger(value.count) || value.count < 1)
) {
errors.count = "Count must be a whole number greater than 0.";
}
@@ -164,14 +177,22 @@ export const serializeRecurrenceRule = (
const validation = validateRecurrence(value);
if (!validation.isValid) {
throw new Error(validation.errors.rule || validation.errors.count || validation.errors.until || "Invalid recurrence.");
throw new Error(
validation.errors.rule ||
validation.errors.count ||
validation.errors.until ||
"Invalid recurrence.",
);
}
const options = toRRuleOptions(value, dtstart);
if (!options) return undefined;
const rule = new RRule(options);
const ruleLine = rule.toString().split("\n").find((line) => line.startsWith("RRULE:"));
const ruleLine = rule
.toString()
.split("\n")
.find((line) => line.startsWith("RRULE:"));
if (!ruleLine) return undefined;
const entries = ruleLine.replace(/^RRULE:/, "").split(";");
@@ -181,9 +202,14 @@ export const serializeRecurrenceRule = (
const rightKey = right.split("=")[0] ?? "";
const leftIndex = orderedKeys.indexOf(leftKey);
const rightIndex = orderedKeys.indexOf(rightKey);
const normalizedLeftIndex = leftIndex === -1 ? Number.MAX_SAFE_INTEGER : leftIndex;
const normalizedRightIndex = rightIndex === -1 ? Number.MAX_SAFE_INTEGER : rightIndex;
return normalizedLeftIndex - normalizedRightIndex || leftKey.localeCompare(rightKey);
const normalizedLeftIndex =
leftIndex === -1 ? Number.MAX_SAFE_INTEGER : leftIndex;
const normalizedRightIndex =
rightIndex === -1 ? Number.MAX_SAFE_INTEGER : rightIndex;
return (
normalizedLeftIndex - normalizedRightIndex ||
leftKey.localeCompare(rightKey)
);
});
return sorted.join(";");
@@ -213,7 +239,10 @@ export const formatRecurrenceText = (rule?: string): string | null => {
return rrulestr(`RRULE:${rule}`).toText();
};
export const getWeekdayOptions = (): Array<{ value: Weekday; label: string }> => [
export const getWeekdayOptions = (): Array<{
value: Weekday;
label: string;
}> => [
{ value: "MO", label: "Mon" },
{ value: "TU", label: "Tue" },
{ value: "WE", label: "Wed" },
@@ -228,7 +257,10 @@ export const isWeekdayPreset = (value: RecurrenceFormValue): boolean =>
value.interval === 1 &&
value.byDay.join(",") === ["MO", "TU", "WE", "TH", "FR"].join(",");
export const recurrenceFrequencyLabels: Record<SupportedRecurrenceFrequency, string> = {
export const recurrenceFrequencyLabels: Record<
SupportedRecurrenceFrequency,
string
> = {
NONE: "Does not repeat",
DAILY: "Daily",
WEEKLY: "Weekly",