@checkstack/ui 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @checkstack/ui
 
+## 1.1.0
+
+### Minor Changes
+
+- c842373: ## Animated Numbers & Availability Stats Live Updates
+
+  ### Features
+
+  - **AnimatedNumber component** (`@checkstack/ui`): New reusable component that displays numbers with a smooth "rolling" animation when values change. Uses `requestAnimationFrame` with eased interpolation for a polished effect.
+  - **useAnimatedNumber hook** (`@checkstack/ui`): Underlying hook for the animation logic, can be used directly for custom implementations.
+  - **Live availability updates**: Availability stats (31-day and 365-day) now automatically refresh when new health check runs are received via signals.
+
+  ### Usage
+
+  ```tsx
+  import { AnimatedNumber } from "@checkstack/ui";
+
+  <AnimatedNumber
+    value={99.95}
+    suffix="%"
+    decimals={2}
+    duration={500}
+    className="text-2xl font-bold text-green-500"
+  />;
+  ```
+
 ## 1.0.0
 
 ### Major Changes

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@checkstack/ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {
-    "@checkstack/common": "0.6.1",
-    "@checkstack/frontend-api": "0.3.4",
+    "@checkstack/common": "0.6.2",
+    "@checkstack/frontend-api": "0.3.5",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dialog": "^1.1.15",

package/src/components/AnimatedNumber.tsx

@@ -0,0 +1,48 @@
+import { useAnimatedNumber } from "../hooks/useAnimatedNumber";
+
+interface AnimatedNumberProps {
+  /** The number value to display (undefined for N/A) */
+  value: number | undefined;
+  /** Animation duration in milliseconds (default: 500ms) */
+  duration?: number;
+  /** Number of decimal places (default: 2) */
+  decimals?: number;
+  /** Suffix to append after the number (e.g., "%", "ms") */
+  suffix?: string;
+  /** CSS classes for the number span */
+  className?: string;
+  /** CSS classes for the suffix span */
+  suffixClassName?: string;
+}
+
+/**
+ * Component that displays an animated number with smooth rolling effect.
+ * Numbers smoothly interpolate from their previous value to the new value.
+ *
+ * @example
+ * ```tsx
+ * <AnimatedNumber
+ *   value={99.95}
+ *   suffix="%"
+ *   className="text-2xl font-bold text-green-500"
+ * />
+ * ```
+ */
+export function AnimatedNumber({
+  value,
+  duration = 500,
+  decimals = 2,
+  suffix,
+  className = "",
+  suffixClassName = "",
+}: AnimatedNumberProps) {
+  const displayValue = useAnimatedNumber(value, duration, decimals);
+  const isNA = value === undefined;
+
+  return (
+    <span className={`tabular-nums ${className}`}>
+      {displayValue}
+      {!isNA && suffix && <span className={suffixClassName}>{suffix}</span>}
+    </span>
+  );
+}

package/src/hooks/useAnimatedNumber.ts

@@ -0,0 +1,83 @@
+import { useState, useEffect, useRef } from "react";
+
+/**
+ * Hook that animates a number from its previous value to the new value.
+ * Creates a smooth "rolling numbers" effect.
+ *
+ * @param targetValue - The value to animate towards (undefined for N/A)
+ * @param duration - Animation duration in milliseconds (default: 500ms)
+ * @param decimals - Number of decimal places to display (default: 2)
+ */
+export function useAnimatedNumber(
+  targetValue: number | undefined,
+  duration = 500,
+  decimals = 2,
+): string {
+  const [displayValue, setDisplayValue] = useState(targetValue);
+  const animationRef = useRef<number>();
+  const startTimeRef = useRef<number>();
+  const startValueRef = useRef<number | undefined>(undefined);
+
+  useEffect(() => {
+    if (targetValue === undefined) {
+      setDisplayValue(undefined);
+      return;
+    }
+
+    // If this is the first value, just set it immediately
+    if (startValueRef.current === undefined) {
+      startValueRef.current = targetValue;
+      setDisplayValue(targetValue);
+      return;
+    }
+
+    const startValue = startValueRef.current;
+
+    // If target is the same, no animation needed
+    if (startValue === targetValue) {
+      return;
+    }
+
+    // Cancel any existing animation
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+    }
+
+    const animate = (timestamp: number) => {
+      if (!startTimeRef.current) {
+        startTimeRef.current = timestamp;
+      }
+
+      const elapsed = timestamp - startTimeRef.current;
+      const progress = Math.min(elapsed / duration, 1);
+
+      // Ease out cubic for smooth deceleration
+      const eased = 1 - Math.pow(1 - progress, 3);
+
+      const current = startValue + (targetValue - startValue) * eased;
+      setDisplayValue(current);
+
+      if (progress < 1) {
+        animationRef.current = requestAnimationFrame(animate);
+      } else {
+        // Animation complete - update the start value for next animation
+        startValueRef.current = targetValue;
+        startTimeRef.current = undefined;
+      }
+    };
+
+    animationRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, [targetValue, duration]);
+
+  if (displayValue === undefined) {
+    return "N/A";
+  }
+
+  return displayValue.toFixed(decimals);
+}

package/src/index.ts

@@ -51,3 +51,5 @@ export * from "./components/CommandPalette";
 export * from "./components/TerminalFeed";
 export * from "./components/AmbientBackground";
 export * from "./components/CodeEditor";
+export * from "./components/AnimatedNumber";
+export * from "./hooks/useAnimatedNumber";