@checkmate-monitor/ui 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,77 @@
+# @checkmate-monitor/ui
+
+## 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 `@checkmate-monitor/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 `@checkmate-monitor/maintenance-common` package with Zod schemas, permissions, oRPC contract, and extension slots
+  - New `@checkmate-monitor/maintenance-backend` package with Drizzle schema, service, and oRPC router
+  - New `@checkmate-monitor/maintenance-frontend` package with admin page and system detail panel
+  - Shared `DateTimePicker` component added to `@checkmate-monitor/ui`
+  - Database migrations for maintenances, maintenance_systems, and maintenance_updates tables
+  - @checkmate-monitor/frontend-api@0.0.2

package/bunfig.toml

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

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@checkmate-monitor/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "src/index.ts",
+  "dependencies": {
+    "@checkmate-monitor/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.344.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",
+    "@checkmate-monitor/test-utils-frontend": "workspace:*",
+    "@checkmate-monitor/tsconfig": "workspace:*",
+    "@checkmate-monitor/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,91 @@
+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-foreground",
+      warning: "bg-warning/10 border-warning/30 text-warning-foreground",
+      error:
+        "bg-destructive/10 border-destructive/30 text-destructive-foreground",
+      info: "bg-info/10 border-info/30 text-info-foreground",
+    },
+  },
+  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-foreground hover:bg-success/20",
+        warning:
+          "border-transparent bg-warning/10 text-warning-foreground hover:bg-warning/20",
+        info: "border-transparent bg-info/10 text-info-foreground 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 };

package/src/components/Card.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { cn } from "../utils";
+
+export const Card = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "rounded-lg border border-border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+);
+
+export const CardHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+);
+
+export const CardTitle = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) => (
+  <h3
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+);
+
+export const CardDescription = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) => (
+  <p className={cn("text-sm text-muted-foreground", className)} {...props} />
+);
+
+export const CardContent = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("p-6 pt-0", className)} {...props} />
+);
+
+export const CardFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex items-center p-6 pt-0", className)} {...props} />
+);

package/src/components/Checkbox.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Check } from "lucide-react";
+import { cn } from "../utils";
+
+interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+export const Checkbox: React.FC<CheckboxProps> = ({
+  className,
+  checked,
+  onCheckedChange,
+  ...props
+}) => {
+  // Compute styles to avoid nested ternary
+  const getBackgroundStyles = () => {
+    if (props.disabled) {
+      return "bg-muted border-border cursor-not-allowed";
+    }
+    if (checked) {
+      return "bg-primary border-primary cursor-pointer";
+    }
+    return "bg-background border-input cursor-pointer";
+  };
+
+  return (
+    <div
+      className={cn(
+        "peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 flex items-center justify-center transition-colors",
+        getBackgroundStyles(),
+        className
+      )}
+      onClick={() => !props.disabled && onCheckedChange?.(!checked)}
+    >
+      {checked && (
+        <Check
+          className={cn(
+            "h-3 w-3",
+            props.disabled ? "text-muted-foreground" : "text-primary-foreground"
+          )}
+          strokeWidth={3}
+        />
+      )}
+    </div>
+  );
+};