@checkstack/ui 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @checkstack/ui
 
+## 0.4.0
+
+### Minor Changes
+
+- d1324e6: Enhanced DateTimePicker with calendar popup and independent field editing
+
+  - Added calendar popup using `react-day-picker` and Radix Popover for date selection
+  - Implemented independent input fields for day, month, year, hour, and minute
+  - Added input validation with proper clamping on blur (respects leap years)
+  - Updated `onChange` signature to `Date | undefined` to handle invalid states
+  - Fixed Dialog focus ring clipping by adding wrapper with negative margin/padding
+
+### Patch Changes
+
+- 2c0822d: ### Queue System
+
+  - Added cron pattern support to `scheduleRecurring()` - accepts either `intervalSeconds` or `cronPattern`
+  - BullMQ backend uses native cron scheduling via `pattern` option
+  - InMemoryQueue implements wall-clock cron scheduling with `cron-parser`
+
+  ### Maintenance Backend
+
+  - Auto status transitions now use cron pattern `* * * * *` for precise second-0 scheduling
+  - User notifications are now sent for auto-started and auto-completed maintenances
+  - Refactored to call `addUpdate` RPC for status changes, centralizing hook/signal/notification logic
+
+  ### UI
+
+  - DateTimePicker now resets seconds and milliseconds to 0 when time is changed
+
 ## 0.3.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/ui",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {
@@ -16,6 +16,7 @@
     "@codemirror/view": "^6.39.11",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
     "@uiw/react-codemirror": "^4.25.4",
@@ -26,6 +27,7 @@
     "date-fns": "^4.1.0",
     "lucide-react": "0.562.0",
     "react": "^18.2.0",
+    "react-day-picker": "^9.13.0",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^6.20.0",
     "recharts": "^3.6.0",

package/src/components/DateRangeFilter.tsx

@@ -89,8 +89,8 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
                 activePreset === preset.id && !showCustom
                   ? "primary"
                   : preset.id === "custom" && showCustom
-                  ? "primary"
-                  : "outline"
+                    ? "primary"
+                    : "outline"
               }
               size="sm"
               onClick={() => handlePresetClick(preset.id)}
@@ -106,13 +106,21 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
           <span className="text-sm text-muted-foreground">From:</span>
           <DateTimePicker
             value={value.startDate}
-            onChange={(startDate) => onChange({ ...value, startDate })}
+            onChange={(startDate) => {
+              if (startDate) {
+                onChange({ ...value, startDate });
+              }
+            }}
             maxDate={value.endDate}
           />
           <span className="text-sm text-muted-foreground">To:</span>
           <DateTimePicker
             value={value.endDate}
-            onChange={(endDate) => onChange({ ...value, endDate })}
+            onChange={(endDate) => {
+              if (endDate) {
+                onChange({ ...value, endDate });
+              }
+            }}
             minDate={value.startDate}
             maxDate={new Date()}
           />

package/src/components/DateTimePicker.tsx

@@ -1,18 +1,36 @@
-import React from "react";
-import { format } from "date-fns";
-import { Input } from "./Input";
+import React, { useState, useEffect, useCallback } from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { DayPicker } from "react-day-picker";
+import { Button } from "./Button";
 import { Calendar, Clock } from "lucide-react";
+import "react-day-picker/style.css";
 
 export interface DateTimePickerProps {
-  value: Date;
-  onChange: (date: Date) => void;
+  value: Date | undefined;
+  onChange: (date: Date | undefined) => void;
   minDate?: Date;
   maxDate?: Date;
   className?: string;
 }
 
+interface FieldState {
+  day: string;
+  month: string;
+  year: string;
+  hour: string;
+  minute: string;
+}
+
+const padZero = (value: number, length: number = 2): string =>
+  String(value).padStart(length, "0");
+
+// Only allow numeric characters
+const filterNumeric = (value: string): string => {
+  return value.replaceAll(/[^0-9]/g, "");
+};
+
 /**
- * Combined date and time picker component
+ * Combined date and time picker component with independent fields and calendar popup
  */
 export const DateTimePicker: React.FC<DateTimePickerProps> = ({
   value,
@@ -21,44 +39,319 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
   maxDate,
   className,
 }) => {
-  const dateString = format(value, "yyyy-MM-dd");
-  const timeString = format(value, "HH:mm");
-
-  const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const [year, month, day] = e.target.value.split("-").map(Number);
-    const newDate = new Date(value);
-    newDate.setFullYear(year, month - 1, day);
-    onChange(newDate);
+  const isValidDate = value instanceof Date && !Number.isNaN(value.getTime());
+
+  // Track if the change came from internal editing
+  const isInternalChange = React.useRef(false);
+
+  // Initialize state from value
+  const [fields, setFields] = useState<FieldState>(() => ({
+    day: isValidDate ? padZero(value.getDate()) : "",
+    month: isValidDate ? padZero(value.getMonth() + 1) : "",
+    year: isValidDate ? String(value.getFullYear()) : "",
+    hour: isValidDate ? padZero(value.getHours()) : "",
+    minute: isValidDate ? padZero(value.getMinutes()) : "",
+  }));
+
+  const [calendarOpen, setCalendarOpen] = useState(false);
+
+  // Sync state when value prop changes from outside (not from internal editing)
+  useEffect(() => {
+    if (isInternalChange.current) {
+      isInternalChange.current = false;
+      return;
+    }
+    if (isValidDate) {
+      setFields({
+        day: padZero(value.getDate()),
+        month: padZero(value.getMonth() + 1),
+        year: String(value.getFullYear()),
+        hour: padZero(value.getHours()),
+        minute: padZero(value.getMinutes()),
+      });
+    }
+  }, [value, isValidDate]);
+
+  // Build date from fields or return undefined if any field is invalid
+  const buildDate = useCallback((f: FieldState): Date | undefined => {
+    const day = Number.parseInt(f.day, 10);
+    const month = Number.parseInt(f.month, 10);
+    const year = Number.parseInt(f.year, 10);
+    const hour = Number.parseInt(f.hour, 10);
+    const minute = Number.parseInt(f.minute, 10);
+
+    if (
+      Number.isNaN(day) ||
+      Number.isNaN(month) ||
+      Number.isNaN(year) ||
+      Number.isNaN(hour) ||
+      Number.isNaN(minute)
+    ) {
+      return undefined;
+    }
+
+    // Validate ranges
+    if (
+      day < 1 ||
+      day > 31 ||
+      month < 1 ||
+      month > 12 ||
+      year < 1 ||
+      hour < 0 ||
+      hour > 23 ||
+      minute < 0 ||
+      minute > 59
+    ) {
+      return undefined;
+    }
+
+    // Create date and check if it's valid (handles Feb 30, etc.)
+    const date = new Date(year, month - 1, day, hour, minute, 0, 0);
+    // If the date rolled over to the next month, it was invalid
+    if (date.getMonth() !== month - 1 || date.getDate() !== day) {
+      return undefined;
+    }
+
+    return date;
+  }, []);
+
+  const handleFieldChange = (field: keyof FieldState, inputValue: string) => {
+    const filtered = filterNumeric(inputValue);
+    const newFields = { ...fields, [field]: filtered };
+    setFields(newFields);
+    isInternalChange.current = true;
+    onChange(buildDate(newFields));
   };
 
-  const handleTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const [hours, minutes] = e.target.value.split(":").map(Number);
-    const newDate = new Date(value);
-    newDate.setHours(hours, minutes);
-    onChange(newDate);
+  // Helper to get days in a month (respects leap years)
+  const getDaysInMonth = (month: number, year: number): number => {
+    // Use Date to calculate (day 0 of next month = last day of current month)
+    return new Date(year, month, 0).getDate();
+  };
+
+  // Validate and clamp value on blur
+  const handleFieldBlur = (field: keyof FieldState) => {
+    const value = Number.parseInt(fields[field], 10);
+    if (Number.isNaN(value)) return;
+
+    let clamped: number;
+    let formatted: string;
+
+    switch (field) {
+      case "day": {
+        const month = Number.parseInt(fields.month, 10);
+        const year = Number.parseInt(fields.year, 10);
+        // Use 31 as fallback if month/year aren't valid yet
+        const maxDay =
+          !Number.isNaN(month) && !Number.isNaN(year)
+            ? getDaysInMonth(month, year)
+            : 31;
+        clamped = Math.min(Math.max(value, 1), maxDay);
+        formatted = padZero(clamped);
+        break;
+      }
+      case "month": {
+        clamped = Math.min(Math.max(value, 1), 12);
+        formatted = padZero(clamped);
+        // Also re-clamp day if month changes and day is now out of range
+        {
+          const day = Number.parseInt(fields.day, 10);
+          const year = Number.parseInt(fields.year, 10);
+          if (!Number.isNaN(day) && !Number.isNaN(year)) {
+            const maxDay = getDaysInMonth(clamped, year);
+            if (day > maxDay) {
+              const newFields = {
+                ...fields,
+                month: padZero(clamped),
+                day: padZero(maxDay),
+              };
+              setFields(newFields);
+              isInternalChange.current = true;
+              onChange(buildDate(newFields));
+              return;
+            }
+          }
+        }
+        break;
+      }
+      case "year": {
+        clamped = Math.max(value, 1);
+        formatted = String(clamped);
+        // Also re-clamp day if year changes (for leap year Feb 29 -> 28)
+        {
+          const day = Number.parseInt(fields.day, 10);
+          const month = Number.parseInt(fields.month, 10);
+          if (!Number.isNaN(day) && !Number.isNaN(month)) {
+            const maxDay = getDaysInMonth(month, clamped);
+            if (day > maxDay) {
+              const newFields = {
+                ...fields,
+                year: String(clamped),
+                day: padZero(maxDay),
+              };
+              setFields(newFields);
+              isInternalChange.current = true;
+              onChange(buildDate(newFields));
+              return;
+            }
+          }
+        }
+        break;
+      }
+      case "hour": {
+        clamped = Math.min(Math.max(value, 0), 23);
+        formatted = padZero(clamped);
+        break;
+      }
+      case "minute": {
+        clamped = Math.min(Math.max(value, 0), 59);
+        formatted = padZero(clamped);
+        break;
+      }
+      default: {
+        return;
+      }
+    }
+
+    if (fields[field] !== formatted) {
+      const newFields = { ...fields, [field]: formatted };
+      setFields(newFields);
+      isInternalChange.current = true;
+      onChange(buildDate(newFields));
+    }
+  };
+
+  const handleCalendarSelect = (date: Date | undefined) => {
+    if (date) {
+      const newFields = {
+        ...fields,
+        day: padZero(date.getDate()),
+        month: padZero(date.getMonth() + 1),
+        year: String(date.getFullYear()),
+      };
+      setFields(newFields);
+      onChange(buildDate(newFields));
+      setCalendarOpen(false);
+    }
+  };
+
+  // Get selected date for calendar (only if date fields are valid)
+  const getSelectedDate = (): Date | undefined => {
+    const day = Number.parseInt(fields.day, 10);
+    const month = Number.parseInt(fields.month, 10);
+    const year = Number.parseInt(fields.year, 10);
+    if (Number.isNaN(day) || Number.isNaN(month) || Number.isNaN(year)) {
+      return undefined;
+    }
+    return new Date(year, month - 1, day);
   };
 
   return (
-    <div className={`flex gap-2 ${className ?? ""}`}>
-      <div className="relative flex-1">
-        <Input
-          type="date"
-          value={dateString}
-          onChange={handleDateChange}
-          min={minDate ? format(minDate, "yyyy-MM-dd") : undefined}
-          max={maxDate ? format(maxDate, "yyyy-MM-dd") : undefined}
-          className="pl-9"
-        />
-        <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
-      </div>
-      <div className="relative w-28">
-        <Input
-          type="time"
-          value={timeString}
-          onChange={handleTimeChange}
-          className="pl-9"
-        />
-        <Clock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+    <div className={`flex items-center ${className ?? ""}`}>
+      {/* Combined date and time container */}
+      <div className="flex items-center border rounded-lg bg-background overflow-hidden">
+        {/* Date section with calendar popup */}
+        <Popover.Root open={calendarOpen} onOpenChange={setCalendarOpen}>
+          <Popover.Trigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-9 w-9 rounded-none border-r"
+              type="button"
+            >
+              <Calendar className="h-4 w-4" />
+            </Button>
+          </Popover.Trigger>
+
+          <div className="flex items-center px-2">
+            <input
+              type="text"
+              inputMode="numeric"
+              value={fields.day}
+              onChange={(e) => handleFieldChange("day", e.target.value)}
+              onBlur={() => handleFieldBlur("day")}
+              placeholder="DD"
+              className="w-7 text-center bg-transparent border-none outline-none text-sm font-mono"
+              maxLength={2}
+            />
+            <span className="text-muted-foreground">/</span>
+            <input
+              type="text"
+              inputMode="numeric"
+              value={fields.month}
+              onChange={(e) => handleFieldChange("month", e.target.value)}
+              onBlur={() => handleFieldBlur("month")}
+              placeholder="MM"
+              className="w-7 text-center bg-transparent border-none outline-none text-sm font-mono"
+              maxLength={2}
+            />
+            <span className="text-muted-foreground">/</span>
+            <input
+              type="text"
+              inputMode="numeric"
+              value={fields.year}
+              onChange={(e) => handleFieldChange("year", e.target.value)}
+              onBlur={() => handleFieldBlur("year")}
+              placeholder="YYYY"
+              className="w-11 text-center bg-transparent border-none outline-none text-sm font-mono"
+              maxLength={4}
+            />
+          </div>
+
+          <Popover.Portal>
+            <Popover.Content
+              className="z-50 rounded-md border bg-popover p-3 shadow-md"
+              sideOffset={5}
+              align="start"
+            >
+              <DayPicker
+                mode="single"
+                selected={getSelectedDate()}
+                onSelect={handleCalendarSelect}
+                fromDate={minDate}
+                toDate={maxDate}
+                classNames={{
+                  root: "rdp-root",
+                  day: "rdp-day hover:bg-accent rounded-md",
+                  selected: "bg-primary text-primary-foreground",
+                  today: "font-bold text-primary",
+                  chevron: "fill-foreground",
+                  button_previous: "hover:bg-accent rounded-md p-1",
+                  button_next: "hover:bg-accent rounded-md p-1",
+                }}
+              />
+            </Popover.Content>
+          </Popover.Portal>
+        </Popover.Root>
+
+        {/* Separator */}
+        <div className="w-px h-6 bg-border" />
+
+        {/* Time section */}
+        <div className="flex items-center px-2">
+          <Clock className="h-4 w-4 text-muted-foreground mr-2" />
+          <input
+            type="text"
+            inputMode="numeric"
+            value={fields.hour}
+            onChange={(e) => handleFieldChange("hour", e.target.value)}
+            onBlur={() => handleFieldBlur("hour")}
+            placeholder="HH"
+            className="w-6 text-center bg-transparent border-none outline-none text-sm font-mono"
+            maxLength={2}
+          />
+          <span className="text-muted-foreground">:</span>
+          <input
+            type="text"
+            inputMode="numeric"
+            value={fields.minute}
+            onChange={(e) => handleFieldChange("minute", e.target.value)}
+            onBlur={() => handleFieldBlur("minute")}
+            placeholder="MM"
+            className="w-6 text-center bg-transparent border-none outline-none text-sm font-mono"
+            maxLength={2}
+          />
+        </div>
       </div>
     </div>
   );

package/src/components/Dialog.tsx

@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
   />
@@ -27,7 +27,7 @@ const DialogOverlay = React.forwardRef<
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const dialogContentVariants = cva(
-  "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background text-foreground p-6 shadow-lg duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-h-[85vh] overflow-y-auto",
+  "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background text-foreground p-6 shadow-lg duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-h-[85vh] overflow-y-auto overflow-x-visible",
   {
     variants: {
       size: {
@@ -41,11 +41,12 @@ const dialogContentVariants = cva(
     defaultVariants: {
       size: "default",
     },
-  }
+  },
 );
 
 interface DialogContentProps
-  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
+  extends
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
     VariantProps<typeof dialogContentVariants> {}
 
 const DialogContent = React.forwardRef<
@@ -59,7 +60,8 @@ const DialogContent = React.forwardRef<
       className={cn(dialogContentVariants({ size }), className)}
       {...props}
     >
-      {children}
+      {/* Wrapper with negative margin and positive padding to allow focus rings to extend */}
+      <div className="-mx-2 px-2">{children}</div>
     </DialogPrimitive.Content>
   </DialogPortal>
 ));
@@ -72,7 +74,7 @@ const DialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
@@ -86,7 +88,7 @@ const DialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
@@ -101,7 +103,7 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />