@checkstack/ui 0.5.0 → 0.5.2

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # @checkstack/ui
 
+## 0.5.2
+
+### Patch Changes
+
+- 0b9fc58: Fix workspace:\* protocol resolution in published packages
+
+  Published packages now correctly have resolved dependency versions instead of `workspace:*` references. This is achieved by using `bun publish` which properly resolves workspace protocol references.
+
+- Updated dependencies [0b9fc58]
+  - @checkstack/common@0.6.1
+  - @checkstack/frontend-api@0.3.4
+
+## 0.5.1
+
+### Patch Changes
+
+- 090143b: ### Health Check Aggregation & UI Fixes
+
+  **Backend (`healthcheck-backend`):**
+
+  - Fixed tail-end bucket truncation where the last aggregated bucket was cut off at the interval boundary instead of extending to the query end date
+  - Added `rangeEnd` parameter to `reaggregateBuckets()` to properly extend the last bucket
+  - Fixed cross-tier merge logic (`mergeTieredBuckets`) to prevent hourly aggregates from blocking fresh raw data
+
+  **Schema (`healthcheck-common`):**
+
+  - Added `bucketEnd` field to `AggregatedBucketBaseSchema` so frontends know the actual end time of each bucket
+
+  **Frontend (`healthcheck-frontend`):**
+
+  - Updated all components to use `bucket.bucketEnd` instead of calculating from `bucketIntervalSeconds`
+  - Fixed aggregation mode detection: changed `>` to `>=` so 7-day queries use aggregated data when `rawRetentionDays` is 7
+  - Added ref-based memoization in `useHealthCheckData` to prevent layout shift during signal-triggered refetches
+  - Exposed `isFetching` state to show loading spinner during background refetches
+  - Added debounced custom date range with Apply button to prevent fetching on every field change
+  - Added validation preventing start date >= end date in custom ranges
+  - Added sparkline downsampling: when there are 60+ data points, they are aggregated into buckets with informative tooltips
+
+  **UI (`ui`):**
+
+  - Fixed `DateRangeFilter` presets to use true sliding windows (removed `startOfDay` from 7-day and 30-day ranges)
+  - Added `disabled` prop to `DateRangeFilter` and `DateTimePicker` components
+  - Added `onCustomChange` prop to `DateRangeFilter` for debounced custom date handling
+  - Improved layout: custom date pickers now inline with preset buttons on desktop
+  - Added responsive mobile layout: date pickers stack vertically with down arrow
+  - Added validation error display for invalid date ranges
+
 ## 0.5.0
 
 ### Minor Changes

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@checkstack/ui",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {
-    "@checkstack/common": "workspace:*",
-    "@checkstack/frontend-api": "workspace:*",
+    "@checkstack/common": "0.6.0",
+    "@checkstack/frontend-api": "0.3.3",
     "@codemirror/autocomplete": "^6.20.0",
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lang-markdown": "^6.5.0",
@@ -36,9 +36,9 @@
   "devDependencies": {
     "typescript": "^5.0.0",
     "@types/react": "^18.2.0",
-    "@checkstack/test-utils-frontend": "workspace:*",
-    "@checkstack/tsconfig": "workspace:*",
-    "@checkstack/scripts": "workspace:*"
+    "@checkstack/test-utils-frontend": "0.0.2",
+    "@checkstack/tsconfig": "0.0.2",
+    "@checkstack/scripts": "0.1.0"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",

package/src/components/DateRangeFilter.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from "react";
-import { subDays, subHours, startOfDay } from "date-fns";
+import { subDays, subHours } from "date-fns";
 import { DateTimePicker } from "./DateTimePicker";
 import { Button } from "./Button";
 import { Calendar } from "lucide-react";
@@ -18,7 +18,12 @@ export enum DateRangePreset {
 
 export interface DateRangeFilterProps {
   value: DateRange;
+  /** Called when a preset is clicked (immediate) */
   onChange: (range: DateRange) => void;
+  /** Optional: Called when custom date picker values change (for debounced Apply pattern) */
+  onCustomChange?: (range: DateRange) => void;
+  /** Disable all interactions (buttons and date pickers) */
+  disabled?: boolean;
   className?: string;
 }
 
@@ -40,13 +45,13 @@ export function getPresetRange(preset: DateRangePreset): DateRange {
       return { startDate: subHours(now, 24), endDate: now };
     }
     case DateRangePreset.Last7Days: {
-      return { startDate: startOfDay(subDays(now, 7)), endDate: now };
+      return { startDate: subDays(now, 7), endDate: now };
     }
     case DateRangePreset.Last30Days: {
-      return { startDate: startOfDay(subDays(now, 30)), endDate: now };
+      return { startDate: subDays(now, 30), endDate: now };
     }
     case DateRangePreset.Custom: {
-      return { startDate: startOfDay(subDays(now, 7)), endDate: now };
+      return { startDate: subDays(now, 7), endDate: now };
     }
   }
 }
@@ -69,6 +74,8 @@ function detectPreset(range: DateRange): DateRangePreset {
 export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
   value,
   onChange,
+  onCustomChange,
+  disabled = false,
   className,
 }) => {
   const activePreset = useMemo(() => detectPreset(value), [value]);
@@ -77,6 +84,7 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
   );
 
   const handlePresetClick = (preset: DateRangePreset) => {
+    if (disabled) return;
     if (preset === DateRangePreset.Custom) {
       setShowCustom(true);
     } else {
@@ -85,11 +93,17 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
     }
   };
 
+  // Use onCustomChange if provided, otherwise fall back to onChange
+  const handleCustomDateChange = onCustomChange ?? onChange;
+
+  // Validate date range
+  const isInvalidRange = showCustom && value.startDate >= value.endDate;
+
   return (
-    <div className={`space-y-3 ${className ?? ""}`}>
+    <div className={className}>
       <div className="flex items-center gap-2 flex-wrap">
-        <Calendar className="h-4 w-4 text-muted-foreground" />
-        <span className="text-sm font-medium text-muted-foreground">
+        <Calendar className="h-4 w-4 text-muted-foreground shrink-0" />
+        <span className="text-sm font-medium text-muted-foreground shrink-0">
           Time range:
         </span>
         <div className="flex gap-1 flex-wrap">
@@ -105,38 +119,73 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
               }
               size="sm"
               onClick={() => handlePresetClick(preset.id)}
+              disabled={disabled}
             >
               <span className="sm:hidden">{preset.shortLabel}</span>
               <span className="hidden sm:inline">{preset.label}</span>
             </Button>
           ))}
         </div>
+        {showCustom && (
+          <>
+            <div className="w-px h-5 bg-border hidden sm:block" />
+            {/* Desktop: inline with right arrow */}
+            <div className="hidden sm:flex items-center gap-2">
+              <DateTimePicker
+                value={value.startDate}
+                onChange={(startDate) => {
+                  if (startDate && !disabled) {
+                    handleCustomDateChange({ ...value, startDate });
+                  }
+                }}
+                maxDate={value.endDate}
+                disabled={disabled}
+              />
+              <span className="text-sm text-muted-foreground">→</span>
+              <DateTimePicker
+                value={value.endDate}
+                onChange={(endDate) => {
+                  if (endDate && !disabled) {
+                    handleCustomDateChange({ ...value, endDate });
+                  }
+                }}
+                minDate={value.startDate}
+                maxDate={new Date()}
+                disabled={disabled}
+              />
+            </div>
+            {/* Mobile: stacked vertically with down arrow, centered */}
+            <div className="flex sm:hidden flex-col items-center gap-1 w-full">
+              <DateTimePicker
+                value={value.startDate}
+                onChange={(startDate) => {
+                  if (startDate && !disabled) {
+                    handleCustomDateChange({ ...value, startDate });
+                  }
+                }}
+                maxDate={value.endDate}
+                disabled={disabled}
+              />
+              <span className="text-sm text-muted-foreground">↓</span>
+              <DateTimePicker
+                value={value.endDate}
+                onChange={(endDate) => {
+                  if (endDate && !disabled) {
+                    handleCustomDateChange({ ...value, endDate });
+                  }
+                }}
+                minDate={value.startDate}
+                maxDate={new Date()}
+                disabled={disabled}
+              />
+            </div>
+          </>
+        )}
       </div>
-
-      {showCustom && (
-        <div className="flex items-center gap-2 flex-wrap">
-          <span className="text-sm text-muted-foreground">From:</span>
-          <DateTimePicker
-            value={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) => {
-              if (endDate) {
-                onChange({ ...value, endDate });
-              }
-            }}
-            minDate={value.startDate}
-            maxDate={new Date()}
-          />
-        </div>
+      {isInvalidRange && (
+        <p className="text-sm text-destructive mt-2">
+          Start date must be before end date
+        </p>
       )}
     </div>
   );

package/src/components/DateTimePicker.tsx

@@ -10,6 +10,8 @@ export interface DateTimePickerProps {
   onChange: (date: Date | undefined) => void;
   minDate?: Date;
   maxDate?: Date;
+  /** Disable all interactions */
+  disabled?: boolean;
   className?: string;
 }
 
@@ -37,6 +39,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
   onChange,
   minDate,
   maxDate,
+  disabled = false,
   className,
 }) => {
   const isValidDate = value instanceof Date && !Number.isNaN(value.getTime());
@@ -258,6 +261,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
               size="icon"
               className="h-9 w-9 rounded-none border-r"
               type="button"
+              disabled={disabled}
             >
               <Calendar className="h-4 w-4" />
             </Button>
@@ -271,8 +275,9 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
               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"
+              className="w-7 text-center bg-transparent border-none outline-none text-sm font-mono disabled:opacity-50"
               maxLength={2}
+              disabled={disabled}
             />
             <span className="text-muted-foreground">/</span>
             <input
@@ -282,8 +287,9 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
               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"
+              className="w-7 text-center bg-transparent border-none outline-none text-sm font-mono disabled:opacity-50"
               maxLength={2}
+              disabled={disabled}
             />
             <span className="text-muted-foreground">/</span>
             <input
@@ -293,8 +299,9 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
               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"
+              className="w-11 text-center bg-transparent border-none outline-none text-sm font-mono disabled:opacity-50"
               maxLength={4}
+              disabled={disabled}
             />
           </div>
 
@@ -337,8 +344,9 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
             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"
+            className="w-6 text-center bg-transparent border-none outline-none text-sm font-mono disabled:opacity-50"
             maxLength={2}
+            disabled={disabled}
           />
           <span className="text-muted-foreground">:</span>
           <input
@@ -348,8 +356,9 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
             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"
+            className="w-6 text-center bg-transparent border-none outline-none text-sm font-mono disabled:opacity-50"
             maxLength={2}
+            disabled={disabled}
           />
         </div>
       </div>

package/bunfig.toml

@@ -1,2 +0,0 @@
-[test]
-preload = ["@checkstack/test-utils-frontend/setup"]