@checkstack/ui 0.4.1 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/ui",
-  "version": "0.4.1",
+  "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

@@ -22,11 +22,15 @@ export interface DateRangeFilterProps {
   className?: string;
 }
 
-const PRESETS: Array<{ id: DateRangePreset; label: string }> = [
-  { id: DateRangePreset.Last24Hours, label: "Last 24h" },
-  { id: DateRangePreset.Last7Days, label: "Last 7 days" },
-  { id: DateRangePreset.Last30Days, label: "Last 30 days" },
-  { id: DateRangePreset.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" },
 ];
 
 export function getPresetRange(preset: DateRangePreset): DateRange {
@@ -88,7 +92,7 @@ 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}
@@ -102,7 +106,8 @@ export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
               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>

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>