{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "status-events", "title": "Status Events", "description": "Event timeline components for displaying status reports and maintenance updates", "dependencies": [ "@radix-ui/react-slot", "date-fns", "lucide-react" ], "registryDependencies": [ "https://openstatus.dev/r/status-types.json", "https://openstatus.dev/r/status-utils.json", "https://openstatus.dev/r/status-timestamp.json", "https://openstatus.dev/r/status-i18n.json", "badge", "hover-card", "separator", "tooltip" ], "files": [ { "path": "src/components/blocks/status-events.tsx", "content": "\"use client\";\n\nimport { useStatusBlocksLabels } from \"@/components/blocks/status-i18n\";\nimport { StatusTimestamp } from \"@/components/blocks/status-timestamp\";\nimport type {\n StatusReportImpact,\n StatusReportUpdate,\n} from \"@/components/blocks/status.types\";\nimport { worstStatusReportImpact } from \"@/components/blocks/status.utils\";\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n HoverCard,\n HoverCardContent,\n HoverCardTrigger,\n} from \"@/components/ui/hover-card\";\nimport { Separator } from \"@/components/ui/separator\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { formatDistanceStrict } from \"date-fns\";\nimport { Check } from \"lucide-react\";\n\n// ============================================================================\n// Container Components\n// ============================================================================\n\n/**\n * StatusEventGroup - Root container for status events and incident reports\n *\n * Provides a vertical flex container with consistent spacing (gap-4) for\n * displaying a feed of status events, incident reports, and maintenance notices.\n * The component includes ARIA role=\"feed\" for accessibility.\n *\n * @example\n * ```tsx\n * \n * \n * // First incident...\n * \n * \n * // Second incident...\n * \n * \n * ```\n *\n * @see StatusEvent - For individual event items\n */\nexport function StatusEventGroup({\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n {children}\n \n );\n}\n\n/**\n * StatusEvent - Individual event container within StatusEventGroup\n *\n * Container for a single event (incident, report, or maintenance) with relative\n * positioning to support absolutely positioned date aside elements.\n *\n * @example\n * ```tsx\n * \n * \n * \n * \n * \n * API Outage\n * // Event details...\n * \n * \n * ```\n */\nexport function StatusEvent({\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n {children}\n \n );\n}\n\n// ============================================================================\n// Content Components\n// ============================================================================\n\n/**\n * StatusEventContent - Main content container for event details\n *\n * Provides a hoverable container with rounded borders and muted background on hover.\n * The hoverable behavior can be disabled for non-interactive events.\n *\n * @param hoverable - Whether to show hover effects (default: true)\n *\n * @example\n * ```tsx\n * \n * Database Maintenance\n *

Scheduled maintenance from 2-4 AM UTC

\n * \n * ```\n */\nexport function StatusEventContent({\n className,\n hoverable = true,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n hoverable?: boolean;\n}) {\n return (\n \n {children}\n \n );\n}\n\n/**\n * StatusEventTitle - Title for status events\n *\n * Displays the event title in medium-weight font, typically used for incident\n * names or maintenance titles.\n *\n * @example\n * ```tsx\n * API Gateway Outage\n * ```\n */\nexport function StatusEventTitle({\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n {children}\n \n );\n}\n\n/**\n * StatusEventTitleCheck - Resolved status indicator with tooltip\n *\n * Displays a green check icon in a circular badge with a tooltip explaining\n * that the report has been resolved. Typically displayed next to event titles.\n *\n * @example\n * ```tsx\n *
\n * API Outage\n * \n *
\n * ```\n */\nexport function StatusEventTitleCheck({\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\">) {\n const labels = useStatusBlocksLabels();\n return (\n \n \n \n \n
\n \n
\n \n \n

{labels.reportResolved}

\n \n \n \n \n );\n}\n\n// ============================================================================\n// Affected Services Components\n// ============================================================================\n\n/**\n * StatusEventAffected - Container for affected service badges\n *\n * Displays a wrapping flex container for StatusEventAffectedBadge components,\n * showing which services were impacted by an incident.\n *\n * @example\n * ```tsx\n * \n * API\n * Database\n * CDN\n * \n * ```\n */\nexport function StatusEventAffected({\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n {children}\n \n );\n}\n\n/**\n * StatusEventAffectedBadge - Badge for individual affected service\n *\n * Displays a small secondary-style badge representing a single affected service.\n * Uses a smaller font size (text-[10px]) for compact display.\n *\n * @example\n * ```tsx\n * REST API\n * ```\n */\nexport function StatusEventAffectedBadge({\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n {children}\n \n );\n}\n\n// ============================================================================\n// Date/Time Components\n// ============================================================================\n\n/**\n * StatusEventDate - Date display with relative time badge\n *\n * Displays a formatted date with a relative time badge (e.g., \"2 days ago\").\n * For future dates, the badge is highlighted in info color. The layout is\n * responsive: horizontal on mobile (gap-2), vertical on desktop (flex-col).\n *\n * @param date - The event date to display\n *\n * @example\n * ```tsx\n * \n * // Displays: \"Jan 15, 2024\" with \"2 days ago\" badge\n * ```\n */\nexport function StatusEventDate({\n className,\n date,\n ...props\n}: React.ComponentProps<\"div\"> & {\n date: Date;\n}) {\n const labels = useStatusBlocksLabels();\n const isFuture = date > new Date();\n const distance = formatDistanceStrict(date, new Date(), { addSuffix: true });\n return (\n \n
\n {labels.formatDateShort(date)}\n
{\" \"}\n \n {distance}\n \n \n );\n}\n\n/**\n * StatusEventAside - Sidebar date container (desktop only)\n *\n * Positions the date to the left of event content on desktop screens (lg breakpoint).\n * On mobile, it appears inline. Uses sticky positioning on desktop to keep dates\n * visible while scrolling through long events.\n *\n * @example\n * ```tsx\n * \n * \n * \n * \n * \n * // Event content...\n * \n * \n * ```\n */\nexport function StatusEventAside({\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n
\n {children}\n
\n \n );\n}\n\nconst impactTextClasses: Record = {\n operational: \"text-success\",\n degraded_performance: \"text-warning\",\n partial_outage: \"text-warning\",\n major_outage: \"text-destructive\",\n};\n\n/**\n * StatusEventTimelineImpact - Worst impact label for a timeline update\n *\n * Shows the most severe impact among the update's component changes. The label\n * is a hover card trigger listing each component's explicit impact.\n */\nexport function StatusEventTimelineImpact({\n changes,\n className,\n ...props\n}: React.ComponentProps<\"button\"> & {\n changes: { name: string; impact: StatusReportImpact }[];\n}) {\n const labels = useStatusBlocksLabels();\n const worst = worstStatusReportImpact(changes.map((c) => c.impact));\n return (\n \n \n \n {labels.componentImpact[worst]}\n \n \n \n
\n {changes.map((change, i) => (\n \n {change.name}\n \n {labels.componentImpact[change.impact]}\n \n
\n ))}\n \n \n \n );\n}\n\n// ============================================================================\n// Timeline Components\n// ============================================================================\n\n/**\n * StatusEventTimelineReport - Timeline of incident report updates\n *\n * Displays a chronological timeline of incident updates, sorted from newest to\n * oldest. Each update shows the status (investigating → identified → monitoring → resolved),\n * timestamp, message, and time elapsed between updates.\n *\n * **Automatic Duration Calculation**:\n * - First update (most recent): Shows total time from start to resolution (if resolved)\n * - Other updates: Shows time elapsed since the previous update\n *\n * @param updates - Array of report updates to display\n * @param withDot - Whether to show colored status dots (default: true)\n * @param maxUpdates - Maximum number of updates to display (optional, shows all if not specified)\n *\n * @example\n * ```tsx\n * \n * // Displays timeline with: \"Resolved (in 1 hour)\" → \"Monitoring (15 minutes earlier)\" → etc.\n * ```\n *\n * @see StatusEventTimelineReportUpdate - For individual update rendering\n */\nexport function StatusEventTimelineReport({\n className,\n updates,\n withDot = true,\n maxUpdates,\n renderMessage,\n ...props\n}: React.ComponentProps<\"div\"> & {\n updates: StatusReportUpdate[];\n withDot?: boolean;\n maxUpdates?: number;\n renderMessage?: (message: string) => React.ReactNode;\n}) {\n const labels = useStatusBlocksLabels();\n const sortedUpdates = [...updates].sort(\n (a, b) => b.date.getTime() - a.date.getTime(),\n );\n const displayedUpdates = maxUpdates\n ? sortedUpdates.slice(0, maxUpdates)\n : sortedUpdates;\n\n return (\n \n {/* NOTE: make sure they are sorted by date */}\n {displayedUpdates.map((update, index) => {\n const updateDate = new Date(update.date);\n let durationText: string | undefined;\n\n if (index === 0) {\n const startedAt = new Date(\n sortedUpdates[sortedUpdates.length - 1].date,\n );\n const duration = formatDistanceStrict(startedAt, updateDate);\n\n if (duration !== \"0 seconds\" && update.status === \"resolved\") {\n durationText = labels.durationIn(duration);\n }\n } else {\n const lastUpdateDate = new Date(displayedUpdates[index - 1].date);\n const timeFromLast = formatDistanceStrict(updateDate, lastUpdateDate);\n durationText = labels.durationEarlier(timeFromLast);\n }\n\n return (\n \n );\n })}\n \n );\n}\n\n/**\n * StatusEventTimelineReportUpdate - Single update entry in incident timeline\n *\n * Displays one update in the incident timeline with:\n * - Colored dot indicator (red=investigating, yellow=identified, blue=monitoring, green=resolved)\n * - Status label and timestamp (with StatusTimestamp for rich hover details)\n * - Duration text (e.g., \"in 1 hour\" or \"15 minutes earlier\")\n * - Update message\n * - Optional vertical separator line connecting to next update\n *\n * @param report - The update data (status, message, date)\n * @param duration - Optional duration text to display\n * @param withSeparator - Whether to show separator line to next update (default: true)\n * @param withDot - Whether to show colored status dot (default: true)\n * @param isLast - Whether this is the last update (affects bottom margin)\n *\n * @example\n * ```tsx\n * \n * ```\n *\n * @see StatusEventTimelineDot - For the colored dot indicator\n * @see StatusEventTimelineSeparator - For the connecting line\n */\nexport function StatusEventTimelineReportUpdate({\n report,\n duration,\n withSeparator = true,\n withDot = true,\n isLast = false,\n renderMessage,\n}: {\n report: StatusReportUpdate;\n withSeparator?: boolean;\n duration?: string;\n withDot?: boolean;\n isLast?: boolean;\n renderMessage?: (message: string) => React.ReactNode;\n}) {\n const labels = useStatusBlocksLabels();\n return (\n \n
\n
\n {withDot ? (\n
\n
\n \n
\n {withSeparator ? : null}\n
\n ) : null}\n
\n \n {labels.incidentStatus[report.status]}{\" \"}\n {report.impactChanges?.length ? (\n <>\n ·{\" \"}\n {\" \"}\n \n ) : null}\n ·{\" \"}\n \n \n {labels.formatDateTime(report.date)}\n \n {\" \"}\n {duration ? (\n \n {duration}\n \n ) : null}\n \n \n {report.message.trim() === \"\" ? (\n -\n ) : renderMessage ? (\n renderMessage(report.message)\n ) : (\n {report.message}\n )}\n \n
\n
\n
\n \n );\n}\n\ninterface StatusMaintenanceUpdate {\n title: string;\n message: string;\n from: Date;\n to: Date;\n}\n\n/**\n * StatusEventTimelineMaintenance - Timeline entry for maintenance windows\n *\n * Displays a maintenance window with title, date range, duration, and message.\n * Uses a blue dot indicator to distinguish from incident updates.\n *\n * The date range is formatted and split to allow individual StatusTimestamp\n * components for each date, providing rich hover details.\n *\n * @param maintenance - The maintenance data (title, message, from, to dates)\n * @param withDot - Whether to show the blue maintenance dot (default: true)\n *\n * @example\n * ```tsx\n * \n * // Displays: [●] Database Upgrade · Jan 20, 2:00 AM - 4:00 AM (for 2 hours)\n * // Upgrading to PostgreSQL 15\n * ```\n *\n * @see StatusEventTimelineDot - For the colored indicator\n * @see StatusTimestamp - For rich timestamp hover cards\n */\nexport function StatusEventTimelineMaintenance({\n maintenance,\n withDot = true,\n renderMessage,\n}: {\n maintenance: StatusMaintenanceUpdate;\n withDot?: boolean;\n renderMessage?: (message: string) => React.ReactNode;\n}) {\n const labels = useStatusBlocksLabels();\n const duration = formatDistanceStrict(maintenance.from, maintenance.to);\n const { from, to } = labels.formatDateRangeParts(\n maintenance.from,\n maintenance.to,\n );\n return (\n \n
\n
\n {withDot ? (\n
\n
\n \n
\n
\n ) : null}\n {/* NOTE: is always last, no need for className=\"mb-2\" */}\n
\n \n {maintenance.title}{\" \"}\n ·{\" \"}\n \n \n {from}\n \n {\" - \"}\n \n {to}\n \n {\" \"}\n {duration ? (\n \n {labels.durationFor(duration)}\n \n ) : null}\n \n \n {maintenance.message.trim() === \"\" ? (\n -\n ) : renderMessage ? (\n renderMessage(maintenance.message)\n ) : (\n maintenance.message\n )}\n \n
\n
\n
\n \n );\n}\n\n/**\n * StatusEventTimelineTitle - Title line for timeline entries\n *\n * Displays the title line of timeline entries with medium font weight,\n * typically containing status label, timestamp, and duration.\n *\n * @example\n * ```tsx\n * \n * Resolved · Jan 15, 10:30 AM\n * \n * ```\n */\nexport function StatusEventTimelineTitle({\n className,\n children,\n asChild,\n ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : \"div\";\n return (\n \n {children}\n \n );\n}\n\n/**\n * StatusEventTimelineMessage - Message content for timeline entries\n *\n * Displays the update message in monospace font with muted color and\n * consistent padding.\n *\n * @example\n * ```tsx\n * \n * We have identified the root cause and deployed a fix\n * \n * ```\n */\nexport function StatusEventTimelineMessage({\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n {children}\n \n );\n}\n\n/**\n * StatusEventTimelineDot - Colored status indicator dot\n *\n * Displays a small circular dot with color based on the parent's data-variant:\n * - investigating: Red (destructive)\n * - identified: Yellow (warning)\n * - monitoring: Blue (info)\n * - resolved: Green (success)\n * - maintenance: Blue (info)\n *\n * @example\n * ```tsx\n *
\n * \n * // Displays green dot\n *
\n * ```\n */\nexport function StatusEventTimelineDot({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n );\n}\n\n/**\n * StatusEventTimelineSeparator - Vertical line connecting timeline entries\n *\n * Displays a vertical separator line between timeline updates, colored to match\n * the status of the update it's connected to. Uses the same color scheme as\n * StatusEventTimelineDot.\n *\n * @example\n * ```tsx\n *
\n * \n * \n * // Displays blue connecting line\n *
\n * ```\n */\nexport function StatusEventTimelineSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n", "type": "registry:ui", "target": "components/blocks/status-events.tsx" } ], "type": "registry:block" }