@checkstack/ui 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,153 @@
+# @checkstack/ui
+
+## 0.0.2
+
+### Patch Changes
+
+- d20d274: Initial release of all @checkstack packages. Rebranded from Checkmate to Checkstack with new npm organization @checkstack and domain checkstack.dev.
+- Updated dependencies [d20d274]
+  - @checkstack/common@0.0.2
+  - @checkstack/frontend-api@0.0.2
+
+## 0.1.2
+
+### Patch Changes
+
+- 52231ef: # Auth Settings Page Refactoring
+
+  ## Auth Frontend
+
+  Refactored the `AuthSettingsPage` into modular, self-contained tab components:
+
+  - **New Components**: Created `UsersTab`, `RolesTab`, `StrategiesTab`, and `ApplicationsTab` components
+  - **Dynamic Tab Visibility**: Tabs are now conditionally shown based on user permissions
+  - **Auto-Select Logic**: Automatically selects the first available tab if the current tab becomes inaccessible
+  - **Self-Contained State**: Each tab component manages its own state, handlers, and dialogs, reducing prop drilling
+
+  ## UI Package
+
+  - **Responsive Tabs**: Tabs now use column layout on small screens and row layout on medium+ screens
+
+- b0124ef: Fix light mode contrast for semantic color tokens
+
+  Updated the theme system to use a two-tier pattern for semantic colors:
+
+  - Base tokens (`text-destructive`, `text-success`, etc.) are used for text on light backgrounds (`bg-{color}/10`)
+  - Foreground tokens (`text-destructive-foreground`, etc.) are now white/contrasting and used for text on solid backgrounds
+
+  This fixes poor contrast issues with components like the "Incident" badge which had dark red text on a bright red background in light mode.
+
+  Components updated: Alert, InfoBanner, HealthBadge, Badge, PermissionDenied, SystemDetailPage
+
+- 54cc787: ### Fix Access Denied Flash on Page Load
+
+  Fixed the "Access Denied" screen briefly flashing when loading permission-protected pages.
+
+  **Root cause:** The `usePermissions` hook was setting `loading: false` when the session was still pending, causing a brief moment where permissions appeared to be denied.
+
+  **Changes:**
+
+  - `usePermissions` hook now waits for session to finish loading (`isPending`) before determining permission state
+  - `PageLayout` component now treats `loading=undefined` with `allowed=false` as a loading state
+  - `AuthSettingsPage` now explicitly waits for permission hooks to finish loading before checking access
+
+  **Result:** Pages show a loading spinner until permissions are fully resolved, eliminating the flash.
+
+- a65e002: Add compile-time type safety for Lucide icon names
+
+  - Add `LucideIconName` type and `lucideIconSchema` Zod schema to `@checkstack/common`
+  - Update backend interfaces (`AuthStrategy`, `NotificationStrategy`, `IntegrationProvider`, `CommandDefinition`) to use `LucideIconName`
+  - Update RPC contracts to use `lucideIconSchema` for proper type inference across RPC boundaries
+  - Simplify `SocialProviderButton` to use `DynamicIcon` directly (removes 30+ lines of pascalCase conversion)
+  - Replace static `iconMap` in `SearchDialog` with `DynamicIcon` for dynamic icon rendering
+  - Add fallback handling in `DynamicIcon` when icon name isn't found
+  - Fix legacy kebab-case icon names to PascalCase: `mail`→`Mail`, `send`→`Send`, `github`→`Github`, `key-round`→`KeyRound`, `network`→`Network`, `AlertCircle`→`CircleAlert`
+
+- Updated dependencies [a65e002]
+- Updated dependencies [ae33df2]
+- Updated dependencies [32ea706]
+  - @checkstack/common@0.2.0
+  - @checkstack/frontend-api@0.1.0
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies [0f8cc7d]
+  - @checkstack/frontend-api@0.0.3
+
+## 0.1.0
+
+### Minor Changes
+
+- ffc28f6: ### Anonymous Role and Public Access
+
+  Introduces a configurable "anonymous" role for managing permissions available to unauthenticated users.
+
+  **Core Changes:**
+
+  - Added `userType: "public"` - endpoints accessible by both authenticated users (with their permissions) and anonymous users (with anonymous role permissions)
+  - Renamed `userType: "both"` to `"authenticated"` for clarity
+  - Renamed `isDefault` to `isAuthenticatedDefault` on Permission interface
+  - Added `isPublicDefault` flag for permissions that should be granted to the anonymous role by default
+
+  **Backend Infrastructure:**
+
+  - New `anonymous` system role created during auth-backend initialization
+  - New `disabled_public_default_permission` table tracks admin-disabled public defaults
+  - `autoAuthMiddleware` now checks anonymous role permissions for unauthenticated public endpoint access
+  - `AuthService.getAnonymousPermissions()` with 1-minute caching for performance
+  - Anonymous role filtered from `getRoles` endpoint (not assignable to users)
+  - Validation prevents assigning anonymous role to users
+
+  **Catalog Integration:**
+
+  - `catalog.read` permission now has both `isAuthenticatedDefault` and `isPublicDefault`
+  - Read endpoints (`getSystems`, `getGroups`, `getEntities`) now use `userType: "public"`
+
+  **UI:**
+
+  - New `PermissionGate` component for conditionally rendering content based on permissions
+
+- b354ab3: # Strategy Instructions Support & Telegram Notification Plugin
+
+  ## Strategy Instructions Interface
+
+  Added `adminInstructions` and `userInstructions` optional fields to the `NotificationStrategy` interface. These allow strategies to export markdown-formatted setup guides that are displayed in the configuration UI:
+
+  - **`adminInstructions`**: Shown when admins configure platform-wide strategy settings (e.g., how to create API keys)
+  - **`userInstructions`**: Shown when users configure their personal settings (e.g., how to link their account)
+
+  ### Updated Components
+
+  - `StrategyConfigCard` now accepts an `instructions` prop and renders it before config sections
+  - `StrategyCard` passes `adminInstructions` to `StrategyConfigCard`
+  - `UserChannelCard` renders `userInstructions` when users need to connect
+
+  ## New Telegram Notification Plugin
+
+  Added `@checkstack/notification-telegram-backend` plugin for sending notifications via Telegram:
+
+  - Uses [grammY](https://grammy.dev/) framework for Telegram Bot API integration
+  - Sends messages with MarkdownV2 formatting and inline keyboard buttons for actions
+  - Includes comprehensive admin instructions for bot setup via @BotFather
+  - Includes user instructions for account linking
+
+  ### Configuration
+
+  Admins need to configure a Telegram Bot Token obtained from @BotFather.
+
+  ### User Linking
+
+  The strategy uses `contactResolution: { type: "custom" }` for Telegram Login Widget integration. Full frontend integration for the Login Widget is pending future work.
+
+### Patch Changes
+
+- eff5b4e: Add standalone maintenance scheduling plugin
+
+  - New `@checkstack/maintenance-common` package with Zod schemas, permissions, oRPC contract, and extension slots
+  - New `@checkstack/maintenance-backend` package with Drizzle schema, service, and oRPC router
+  - New `@checkstack/maintenance-frontend` package with admin page and system detail panel
+  - Shared `DateTimePicker` component added to `@checkstack/ui`
+  - Database migrations for maintenances, maintenance_systems, and maintenance_updates tables
+  - @checkstack/frontend-api@0.0.2

package/bunfig.toml

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

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@checkstack/ui",
+  "version": "0.0.2",
+  "type": "module",
+  "main": "src/index.ts",
+  "dependencies": {
+    "@checkstack/common": "workspace:*",
+    "@checkstack/frontend-api": "workspace:*",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "ajv": "^8.17.1",
+    "ajv-formats": "^3.0.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.0",
+    "date-fns": "^4.1.0",
+    "lucide-react": "0.562.0",
+    "prismjs": "^1.29.0",
+    "react": "^18.2.0",
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^6.20.0",
+    "react-simple-code-editor": "^0.14.1",
+    "recharts": "^3.6.0",
+    "tailwind-merge": "^2.2.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/react": "^18.2.0",
+    "@checkstack/test-utils-frontend": "workspace:*",
+    "@checkstack/tsconfig": "workspace:*",
+    "@checkstack/scripts": "workspace:*"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "bun run lint:code",
+    "lint:code": "eslint . --max-warnings 0",
+    "test": "bun test"
+  }
+}

package/src/components/Accordion.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/Alert.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const alertVariants = cva("relative w-full rounded-md border p-4", {
+  variants: {
+    variant: {
+      default: "bg-muted/50 border-border text-foreground",
+      success: "bg-success/10 border-success/30 text-success",
+      warning: "bg-warning/10 border-warning/30 text-warning",
+      error: "bg-destructive/10 border-destructive/30 text-destructive",
+      info: "bg-info/10 border-info/30 text-info",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export interface AlertProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {
+  children: React.ReactNode;
+}
+
+export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={alertVariants({ variant, className })}
+        {...props}
+      >
+        <div className="flex gap-3 items-center">{children}</div>
+      </div>
+    );
+  }
+);
+
+Alert.displayName = "Alert";
+
+export const AlertIcon = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={`flex-shrink-0 opacity-70 ${className || ""}`}
+    {...props}
+  >
+    {children}
+  </div>
+));
+
+AlertIcon.displayName = "AlertIcon";
+
+export const AlertContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={`flex-1 space-y-1 ${className || ""}`} {...props} />
+));
+
+AlertContent.displayName = "AlertContent";
+
+export const AlertTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={`font-semibold text-sm leading-tight ${className || ""}`}
+    {...props}
+  />
+));
+
+AlertTitle.displayName = "AlertTitle";
+
+export const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={`text-sm leading-relaxed opacity-90 ${className || ""}`}
+    {...props}
+  />
+));
+
+AlertDescription.displayName = "AlertDescription";

package/src/components/AmbientBackground.tsx

@@ -0,0 +1,105 @@
+import React, { useMemo, useEffect, useState } from "react";
+import { cn } from "../utils";
+
+interface AmbientBackgroundProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const TILE_SIZE = 48;
+
+/**
+ * AmbientBackground - Animated checkerboard pattern
+ * Features a chess-inspired grid where random tiles glow with the primary color.
+ * Dynamically adapts to screen size.
+ */
+export const AmbientBackground: React.FC<AmbientBackgroundProps> = ({
+  children,
+  className,
+}) => {
+  const [dimensions, setDimensions] = useState({ cols: 40, rows: 25 });
+
+  // Calculate grid size based on viewport
+  useEffect(() => {
+    const updateDimensions = () => {
+      const cols = Math.ceil(globalThis.innerWidth / TILE_SIZE) + 2;
+      const rows = Math.ceil(globalThis.innerHeight / TILE_SIZE) + 2;
+      setDimensions({ cols, rows });
+    };
+
+    updateDimensions();
+    globalThis.addEventListener("resize", updateDimensions);
+    return () => globalThis.removeEventListener("resize", updateDimensions);
+  }, []);
+
+  // Generate tile grid with staggered animation delays
+  const tiles = useMemo(() => {
+    const { cols, rows } = dimensions;
+    const result: Array<{ key: string; delay: number; isLight: boolean }> = [];
+
+    for (let row = 0; row < rows; row++) {
+      for (let col = 0; col < cols; col++) {
+        const isLight = (row + col) % 2 === 0;
+        // Negative delay so tiles start at different points in their 12s cycle
+        // This creates a gentle, staggered breathing effect across the grid
+        const delay = -((row * 7 + col * 13 + row * col) % 24) * 0.5;
+        result.push({
+          key: `${row}-${col}`,
+          delay,
+          isLight,
+        });
+      }
+    }
+    return result;
+  }, [dimensions]);
+
+  return (
+    <div
+      className={cn(
+        "relative min-h-screen bg-background overflow-hidden",
+        className
+      )}
+    >
+      {/* Checkerboard grid - covers full viewport */}
+      <div
+        className="pointer-events-none fixed inset-0 overflow-hidden"
+        style={{
+          display: "grid",
+          gridTemplateColumns: `repeat(${dimensions.cols}, ${TILE_SIZE}px)`,
+          gridTemplateRows: `repeat(${dimensions.rows}, ${TILE_SIZE}px)`,
+        }}
+      >
+        {tiles.map(({ key, delay, isLight }) => (
+          <div
+            key={key}
+            className="tile-glow"
+            style={
+              {
+                width: TILE_SIZE,
+                height: TILE_SIZE,
+                backgroundColor: isLight
+                  ? "hsl(var(--muted-foreground) / 0.12)"
+                  : "hsl(var(--muted-foreground) / 0.04)",
+                "--glow-delay": `${delay}s`,
+              } as React.CSSProperties
+            }
+          />
+        ))}
+      </div>
+
+      {/* Edge vignette to fade out the grid smoothly */}
+      <div
+        className="pointer-events-none fixed inset-0"
+        style={{
+          background: `
+            linear-gradient(to right, hsl(var(--background)) 0%, transparent 5%, transparent 95%, hsl(var(--background)) 100%),
+            linear-gradient(to bottom, hsl(var(--background)) 0%, transparent 8%, transparent 92%, hsl(var(--background)) 100%)
+          `,
+        }}
+      />
+
+      {/* Content */}
+      <div className="relative z-10">{children}</div>
+    </div>
+  );
+};

package/src/components/AnimatedCounter.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState, useRef } from "react";
+
+interface AnimatedCounterProps {
+  value: number;
+  duration?: number;
+  formatter?: (n: number) => string;
+  className?: string;
+}
+
+/**
+ * AnimatedCounter - Animates a number from 0 to target value
+ * Uses requestAnimationFrame for smooth 60fps animation
+ */
+export const AnimatedCounter: React.FC<AnimatedCounterProps> = ({
+  value,
+  duration = 500,
+  formatter = (n) => Math.round(n).toString(),
+  className,
+}) => {
+  const [displayValue, setDisplayValue] = useState(0);
+  const displayValueRef = useRef(displayValue);
+  displayValueRef.current = displayValue;
+
+  useEffect(() => {
+    // Skip animation if value is 0 or duration is 0
+    if (value === 0 || duration === 0) {
+      setDisplayValue(value);
+      return;
+    }
+
+    const startTime = performance.now();
+    const startValue = displayValueRef.current;
+    const diff = value - startValue;
+
+    const animate = (currentTime: number) => {
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+
+      // Ease-out cubic for smooth deceleration
+      const easeOut = 1 - Math.pow(1 - progress, 3);
+      const current = startValue + diff * easeOut;
+
+      setDisplayValue(current);
+
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      }
+    };
+
+    requestAnimationFrame(animate);
+  }, [value, duration]);
+
+  return <span className={className}>{formatter(displayValue)}</span>;
+};

package/src/components/BackLink.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { ArrowLeft } from "lucide-react";
+
+interface BackLinkProps {
+  /** The destination to navigate to. Can be a path string or onClick handler. */
+  to?: string;
+  /** Click handler for navigation. If not provided with 'to', component will render a button. */
+  onClick?: () => void;
+  /** The text to display. Defaults to "Back" */
+  children?: React.ReactNode;
+  /** Optional className for custom styling */
+  className?: string;
+}
+
+/**
+ * A standardized back navigation link component.
+ * Use with react-router's Link by wrapping it in your own Link component
+ * or pass an onClick handler for programmatic navigation.
+ */
+export const BackLink: React.FC<BackLinkProps> = ({
+  to,
+  onClick,
+  children = "Back",
+  className = "",
+}) => {
+  const baseClasses =
+    "flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors";
+
+  // If 'to' is provided, render an anchor-like element that can be wrapped by Link
+  // Otherwise render a button with onClick
+  if (to) {
+    return (
+      <a
+        href={to}
+        onClick={(e) => {
+          // Let react-router handle actual navigation if this is wrapped in Link
+          if (onClick) {
+            e.preventDefault();
+            onClick();
+          }
+        }}
+        className={`${baseClasses} ${className}`}
+      >
+        <ArrowLeft className="h-4 w-4" />
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <button onClick={onClick} className={`${baseClasses} ${className}`}>
+      <ArrowLeft className="h-4 w-4" />
+      {children}
+    </button>
+  );
+};

package/src/components/Badge.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+        success:
+          "border-transparent bg-success/10 text-success hover:bg-success/20",
+        warning:
+          "border-transparent bg-warning/10 text-warning hover:bg-warning/20",
+        info: "border-transparent bg-info/10 text-info hover:bg-info/20",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+export function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}

package/src/components/Button.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };