4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T3e16,"use client" import * as React from "react" import { cva } from "class-variance-authority" import { Clock, Code2, RefreshCw } from "lucide-react" import { cn } from "@/lib/utils" import { Skeleton } from "@/components/ui/skeleton" import { Button } from "@/components/ui/ds-button" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/ds-input" import { Badge } from "@/components/ui/ds-badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/ds-select" import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group" import type { UILocale } from "@/lib/ui-i18n" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/ds-tabs" // ── Types ────────────────────────────────────────────────────────────────── export type CronBuilderMode = "simple" | "advanced" export interface CronBuilderProps extends Omit< React.HTMLAttributes, "onChange" > { value?: string onChange?: (value: string) => void mode?: CronBuilderMode disabled?: boolean loading?: boolean locale?: UILocale } // ── Variants ─────────────────────────────────────────────────────────────── export const cronBuilderContainerVariants = cva( "w-full rounded-xl border border-border bg-card p-4", { variants: {}, } ) // ── Cron parsing ────────────────────────────────────────────────────────── function parseCron(cron: string): { minute: string hour: string day: string month: string weekday: string } { const parts = cron.trim().split(/\s+/) return { minute: parts[0] ?? "*", hour: parts[1] ?? "*", day: parts[2] ?? "*", month: parts[3] ?? "*", weekday: parts[4] ?? "*", } } function buildCron( minute: string, hour: string, day: string, month: string, weekday: string ) { return `${minute} ${hour} ${day} ${month} ${weekday}` } /** Approximate human-readable description of a cron expression (en-US only for now) */ function describeCron(cron: string): string { const { minute, hour, day, weekday } = parseCron(cron) if (cron === "* * * * *") return "Every minute" if (minute !== "*" && hour !== "*" && day === "*" && weekday === "*") { return `Daily at ${hour.padStart(2, "0")}:${minute.padStart(2, "0")}` } if (minute !== "*" && hour !== "*" && weekday !== "*" && day === "*") { const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] const dayNames = weekday .split(",") .map((d) => days[parseInt(d)] ?? d) .join(", ") return `${dayNames} at ${hour.padStart(2, "0")}:${minute.padStart(2, "0")}` } if (minute !== "*" && hour === "*") return `At :${minute.padStart(2, "0")} every hour` if (minute === "0" && hour !== "*") return `Hourly on the hour (${hour}:00)` return cron } /** Compute approximate next N execution times */ function getNextRuns(cron: string, count = 3): Date[] { const { minute, hour, weekday } = parseCron(cron) const results: Date[] = [] const now = new Date() const cursor = new Date(now) cursor.setSeconds(0, 0) cursor.setMinutes(cursor.getMinutes() + 1) let safety = 0 while (results.length < count && safety < 10000) { safety++ const m = parseInt(minute) const h = parseInt(hour) const w = weekday !== "*" ? weekday.split(",").map(Number) : null const minuteOk = minute === "*" || cursor.getMinutes() === m const hourOk = hour === "*" || cursor.getHours() === h const weekdayOk = !w || w.includes(cursor.getDay()) if (minuteOk && hourOk && weekdayOk) { results.push(new Date(cursor)) } cursor.setMinutes(cursor.getMinutes() + 1) } return results } // ── Preset schedules ────────────────────────────────────────────────────── const PRESETS = [ { label: "Every minute", value: "* * * * *" }, { label: "Every hour", value: "0 * * * *" }, { label: "Daily at midnight", value: "0 0 * * *" }, { label: "Daily at noon", value: "0 12 * * *" }, { label: "Weekdays at 9 AM", value: "0 9 * * 1-5" }, { label: "Every Monday", value: "0 8 * * 1" }, { label: "Weekly (Sunday)", value: "0 0 * * 0" }, { label: "Monthly (1st)", value: "0 0 1 * *" }, ] // ── CronBuilder ──────────────────────────────────────────────────────────── export function CronBuilder({ value = "0 * * * *", onChange, mode: modeProp = "simple", disabled = false, loading = false, locale = "en-US", className, ...props }: CronBuilderProps) { const [mode, setMode] = React.useState(modeProp) const [cron, setCron] = React.useState(value) const [rawInput, setRawInput] = React.useState(value) const [rawError, setRawError] = React.useState(false) const parsed = React.useMemo(() => parseCron(cron), [cron]) const update = React.useCallback( (newCron: string) => { setCron(newCron) setRawInput(newCron) onChange?.(newCron) }, [onChange] ) const nextRuns = React.useMemo(() => { try { return getNextRuns(cron) } catch { return [] } }, [cron]) // ── Loading ───────────────────────────────────────────────────────────── if (loading) { return (

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

) } const description = describeCron(cron) const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] return (

{/* Mode tabs */} setMode(v as CronBuilderMode)}>

Schedule Simple Advanced

{/* ── Simple Mode ───────────────────────────────────────── */} {/* Presets */}

Quick presets

{/* Day of week picker */}

Day of week { const wd = selected.length === 0 ? "*" : selected.join(",") update( buildCron( parsed.minute, parsed.hour, parsed.day, parsed.month, wd ) ) }} > {WEEKDAYS.map((day, i) => ( {day} ))}

{/* Hour & Minute */}

Hour

Minute

{/* ── Advanced Mode ─────────────────────────────────────── */}

Cron expression

{ setRawInput(e.target.value) const parts = e.target.value.trim().split(/\s+/) if (parts.length === 5) { setRawError(false) update(e.target.value.trim()) } else { setRawError(true) } }} className={cn( "h-9 font-mono text-sm", rawError && "border-destructive focus-visible:ring-destructive" )} placeholder="* * * * *" disabled={disabled} aria-label="Cron expression" aria-describedby="cron-format-hint" />

Format:{" "} minute hour day month weekday

{/* Field labels */}

{["Min", "Hour", "Day", "Month", "Weekday"].map((f, i) => { const v = [ parsed.minute, parsed.hour, parsed.day, parsed.month, parsed.weekday, ][i]! return (

{f}

{v}

) })}

{/* ── Output ─────────────────────────────────────────────────── */}

{/* Current expression */}

{cron} {description}

{/* Next runs */} {nextRuns.length > 0 && (

Next executions: {nextRuns.map((d, i) => ( {d.toLocaleString(locale, { weekday: "short", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", })} ))}

)}

) } 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4d",null,{"namespace":"@lema-ds","registryDependencies":["skeleton","button","label","input","badge","select","toggle-group","tabs","ui-i18n"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ds/cron-builder.tsx","content":"$4f","type":"registry:ui","target":"components/ui/ds-cron-builder.tsx"}],"className":"h-[70svh] min-h-80"}]]}]