@checkstack/ui 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @checkstack/ui
 
+## 0.5.0
+
+### Minor Changes
+
+- 223081d: Add icon support to PageLayout and improve mobile responsiveness
+
+  **PageLayout Icons:**
+
+  - Added required `icon` prop to `PageLayout` and `PageHeader` components that accepts a Lucide icon component reference
+  - Icons are rendered with consistent `h-6 w-6 text-primary` styling
+  - Updated all page components to include appropriate icons in their headers
+
+  **Mobile Layout Improvements:**
+
+  - Standardized responsive padding in main app shell (`p-3` on mobile, `p-6` on desktop)
+  - Added `CardHeaderRow` component for mobile-safe card headers with proper wrapping
+  - Improved `DateRangeFilter` responsive behavior with vertical stacking on mobile
+  - Migrated pages to use `PageLayout` for consistent responsive behavior
+
+## 0.4.1
+
+### Patch Changes
+
+- 538e45d: Fixed 24-hour date range not returning correct data and improved chart display
+
+  - Fixed missing `endDate` parameter in raw data queries causing data to extend beyond selected time range
+  - Fixed incorrect 24-hour date calculation using `setHours()` - now uses `date-fns` `subHours()` for correct date math
+  - Refactored `DateRangePreset` from string union to enum for improved type safety and IDE support
+  - Exported `getPresetRange` function for reuse across components
+  - Changed chart x-axis domain from `["auto", "auto"]` to `["dataMin", "dataMax"]` to remove padding gaps
+
+- Updated dependencies [db1f56f]
+  - @checkstack/common@0.6.0
+  - @checkstack/frontend-api@0.3.3
+
 ## 0.4.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {

package/src/components/Card.tsx

@@ -8,7 +8,7 @@ export const Card = ({
   <div
     className={cn(
       "rounded-lg border border-border bg-card text-card-foreground shadow-sm",
-      className
+      className,
     )}
     {...props}
   />
@@ -21,6 +21,23 @@ export const CardHeader = ({
   <div className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
 );
 
+/**
+ * A row layout for card headers with title and actions.
+ * Provides mobile-friendly defaults with flex-wrap and gap.
+ */
+export const CardHeaderRow = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-wrap items-center justify-between gap-3",
+      className,
+    )}
+    {...props}
+  />
+);
+
 export const CardTitle = ({
   className,
   ...props
@@ -28,7 +45,7 @@ export const CardTitle = ({
   <h3
     className={cn(
       "text-2xl font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />

package/src/components/DateRangeFilter.tsx

@@ -9,7 +9,12 @@ export interface DateRange {
   endDate: Date;
 }
 
-export type DateRangePreset = "24h" | "7d" | "30d" | "custom";
+export enum DateRangePreset {
+  Last24Hours = "24h",
+  Last7Days = "7d",
+  Last30Days = "30d",
+  Custom = "custom",
+}
 
 export interface DateRangeFilterProps {
   value: DateRange;
@@ -17,26 +22,30 @@ export interface DateRangeFilterProps {
   className?: string;
 }
 
-const PRESETS: Array<{ id: DateRangePreset; label: string }> = [
-  { id: "24h", label: "Last 24h" },
-  { id: "7d", label: "Last 7 days" },
-  { id: "30d", label: "Last 30 days" },
-  { id: "custom", label: "Custom" },
+const PRESETS: Array<{
+  id: DateRangePreset;
+  label: string;
+  shortLabel: string;
+}> = [
+  { id: DateRangePreset.Last24Hours, label: "Last 24h", shortLabel: "24h" },
+  { id: DateRangePreset.Last7Days, label: "Last 7 days", shortLabel: "7d" },
+  { id: DateRangePreset.Last30Days, label: "Last 30 days", shortLabel: "30d" },
+  { id: DateRangePreset.Custom, label: "Custom", shortLabel: "Custom" },
 ];
 
-function getPresetRange(preset: DateRangePreset): DateRange {
+export function getPresetRange(preset: DateRangePreset): DateRange {
   const now = new Date();
   switch (preset) {
-    case "24h": {
+    case DateRangePreset.Last24Hours: {
       return { startDate: subHours(now, 24), endDate: now };
     }
-    case "7d": {
+    case DateRangePreset.Last7Days: {
       return { startDate: startOfDay(subDays(now, 7)), endDate: now };
     }
-    case "30d": {
+    case DateRangePreset.Last30Days: {
       return { startDate: startOfDay(subDays(now, 30)), endDate: now };
     }
-    case "custom": {
+    case DateRangePreset.Custom: {
       return { startDate: startOfDay(subDays(now, 7)), endDate: now };
     }
   }
@@ -48,10 +57,10 @@ function detectPreset(range: DateRange): DateRangePreset {
   const diffHours = diffMs / (1000 * 60 * 60);
   const diffDays = diffHours / 24;
 
-  if (diffHours <= 25 && diffHours >= 23) return "24h";
-  if (diffDays <= 8 && diffDays >= 6) return "7d";
-  if (diffDays <= 31 && diffDays >= 29) return "30d";
-  return "custom";
+  if (diffHours <= 25 && diffHours >= 23) return DateRangePreset.Last24Hours;
+  if (diffDays <= 8 && diffDays >= 6) return DateRangePreset.Last7Days;
+  if (diffDays <= 31 && diffDays >= 29) return DateRangePreset.Last30Days;
+  return DateRangePreset.Custom;
 }
 
 /**
@@ -63,10 +72,12 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
   className,
 }) => {
   const activePreset = useMemo(() => detectPreset(value), [value]);
-  const [showCustom, setShowCustom] = useState(activePreset === "custom");
+  const [showCustom, setShowCustom] = useState(
+    activePreset === DateRangePreset.Custom,
+  );
 
   const handlePresetClick = (preset: DateRangePreset) => {
-    if (preset === "custom") {
+    if (preset === DateRangePreset.Custom) {
       setShowCustom(true);
     } else {
       setShowCustom(false);
@@ -81,21 +92,22 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
         <span className="text-sm font-medium text-muted-foreground">
           Time range:
         </span>
-        <div className="flex gap-1">
+        <div className="flex gap-1 flex-wrap">
           {PRESETS.map((preset) => (
             <Button
               key={preset.id}
               variant={
                 activePreset === preset.id && !showCustom
                   ? "primary"
-                  : preset.id === "custom" && showCustom
+                  : preset.id === DateRangePreset.Custom && showCustom
                     ? "primary"
                     : "outline"
               }
               size="sm"
               onClick={() => handlePresetClick(preset.id)}
             >
-              {preset.label}
+              <span className="sm:hidden">{preset.shortLabel}</span>
+              <span className="hidden sm:inline">{preset.label}</span>
             </Button>
           ))}
         </div>
@@ -132,5 +144,5 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
 
 /** Create a default date range (last 7 days) */
 export function getDefaultDateRange(): DateRange {
-  return getPresetRange("7d");
+  return getPresetRange(DateRangePreset.Last7Days);
 }

package/src/components/Page.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import type { LucideIcon } from "lucide-react";
 import { cn } from "../utils";
 
 interface PageProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -14,33 +15,37 @@ export const Page = React.forwardRef<HTMLDivElement, PageProps>(
     >
       {children}
     </div>
-  )
+  ),
 );
 Page.displayName = "Page";
 
 interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   title: string;
   subtitle?: string;
+  icon: LucideIcon;
   actions?: React.ReactNode;
 }
 
 export const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
-  ({ className, title, subtitle, actions, ...props }, ref) => (
+  ({ className, title, subtitle, icon: Icon, actions, ...props }, ref) => (
     <div
       ref={ref}
       className={cn(
-        "flex flex-col md:flex-row items-center justify-between p-6 pb-2",
-        className
+        "flex flex-col md:flex-row items-center justify-between py-3 pb-2 md:py-6 md:pb-2",
+        className,
       )}
       {...props}
     >
       <div className="space-y-1">
-        <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
+        <div className="flex items-center gap-3">
+          <Icon className="h-6 w-6 text-primary" />
+          <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
+        </div>
         {subtitle && <p className="text-muted-foreground">{subtitle}</p>}
       </div>
       {actions && <div className="flex items-center space-x-2">{actions}</div>}
     </div>
-  )
+  ),
 );
 PageHeader.displayName = "PageHeader";
 
@@ -50,9 +55,13 @@ interface PageContentProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export const PageContent = React.forwardRef<HTMLDivElement, PageContentProps>(
   ({ className, children, ...props }, ref) => (
-    <div ref={ref} className={cn("flex-1 p-6 pt-2", className)} {...props}>
+    <div
+      ref={ref}
+      className={cn("flex-1 py-3 pt-2 md:py-6 md:pt-2", className)}
+      {...props}
+    >
       {children}
     </div>
-  )
+  ),
 );
 PageContent.displayName = "PageContent";

package/src/components/PageLayout.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import type { LucideIcon } from "lucide-react";
 import {
   Page,
   PageHeader,
@@ -10,6 +11,7 @@ import {
 interface PageLayoutProps {
   title: string;
   subtitle?: string;
+  icon: LucideIcon;
   actions?: React.ReactNode;
   loading?: boolean;
   allowed?: boolean;
@@ -31,6 +33,7 @@ interface PageLayoutProps {
 export const PageLayout: React.FC<PageLayoutProps> = ({
   title,
   subtitle,
+  icon,
   actions,
   loading,
   allowed,
@@ -46,7 +49,12 @@ export const PageLayout: React.FC<PageLayoutProps> = ({
   if (isLoading) {
     return (
       <Page>
-        <PageHeader title={title} subtitle={subtitle} actions={actions} />
+        <PageHeader
+          title={title}
+          subtitle={subtitle}
+          icon={icon}
+          actions={actions}
+        />
         <PageContent>
           <div className="flex justify-center py-12">
             <LoadingSpinner />
@@ -60,7 +68,12 @@ export const PageLayout: React.FC<PageLayoutProps> = ({
   if (allowed === false) {
     return (
       <Page>
-        <PageHeader title={title} subtitle={subtitle} actions={actions} />
+        <PageHeader
+          title={title}
+          subtitle={subtitle}
+          icon={icon}
+          actions={actions}
+        />
         <PageContent>
           <AccessDenied />
         </PageContent>
@@ -70,10 +83,17 @@ export const PageLayout: React.FC<PageLayoutProps> = ({
 
   return (
     <Page>
-      <PageHeader title={title} subtitle={subtitle} actions={actions} />
+      <PageHeader
+        title={title}
+        subtitle={subtitle}
+        icon={icon}
+        actions={actions}
+      />
       <PageContent>
         <div
-          className={maxWidth === "full" ? "" : `max-w-${maxWidth} space-y-6`}
+          className={
+            maxWidth === "full" ? "space-y-6" : `max-w-${maxWidth} space-y-6`
+          }
         >
           {children}
         </div>