@uptime.link/statuspage 1.0.73 → 1.1.0

package/dist_watch/index.html

@@ -10,16 +10,9 @@
     />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
-    <link rel="preconnect" href="https://rsms.me/">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
-    <link
-      crossorigin="anonymous"
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      rel="stylesheet"
-    />
-    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+    <!--Lets load standard fonts-->
+    <link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
+    <link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
 
     <style>
       body {

package/npmextra.json

@@ -1,5 +1,5 @@
 {
-  "gitzone": {
+  "@git.zone/cli": {
     "projectType": "wcc",
     "module": {
       "githost": "code.foss.global",
@@ -23,11 +23,17 @@
         "UI",
         "catalog"
       ]
+    },
+    "release": {
+      "registries": [
+        "https://verdaccio.lossless.digital",
+        "https://registry.npmjs.org"
+      ],
+      "accessLevel": "public"
     }
   },
-  "npmci": {
+  "@ship.zone/szci": {
     "npmGlobalTools": [],
-    "npmAccessLevel": "private",
     "npmRegistryUrl": "verdaccio.lossless.one"
   }
 }

package/package.json

@@ -1,27 +1,33 @@
 {
   "name": "@uptime.link/statuspage",
-  "version": "1.0.73",
+  "version": "1.1.0",
   "private": false,
   "description": "A catalog of web components for the UptimeLink dashboard.",
   "main": "dist_ts_web/index.js",
   "typings": "dist_ts_web/index.d.ts",
   "type": "module",
+  "scripts": {
+    "test": "npm run build",
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
+    "watch": "tswatch element",
+    "buildDocs": "tsdoc"
+  },
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.0.1",
-    "@design.estate/dees-element": "^2.0.4",
-    "@design.estate/dees-wcctools": "^1.0.73",
+    "@design.estate/dees-domtools": "^2.3.6",
+    "@design.estate/dees-element": "^2.1.3",
+    "@design.estate/dees-wcctools": "^3.2.0",
     "@uptime.link/interfaces": "^2.0.21"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^2.1.61",
-    "@git.zone/tsbundle": "^2.0.7",
-    "@git.zone/tsrun": "^1.2.39",
-    "@git.zone/tswatch": "^2.0.5",
-    "@push.rocks/projectinfo": "^5.0.1",
-    "@push.rocks/smartenv": "^5.0.0",
-    "@types/node": "^18.11.18"
+    "@git.zone/tsbuild": "^4.0.2",
+    "@git.zone/tsbundle": "^2.6.3",
+    "@git.zone/tsrun": "^2.0.1",
+    "@git.zone/tswatch": "^2.3.13",
+    "@push.rocks/projectinfo": "^5.0.2",
+    "@push.rocks/smartenv": "^6.0.0",
+    "@types/node": "^25.0.3"
   },
   "files": [
     "ts/**/*",
@@ -51,11 +57,5 @@
     "frontend",
     "UI",
     "catalog"
-  ],
-  "scripts": {
-    "test": "npm run build",
-    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
-    "watch": "tswatch element",
-    "buildDocs": "tsdoc"
-  }
-}
+  ]
+}

package/readme.hints.md

@@ -0,0 +1,292 @@
+# Project Hints and Analysis
+
+## Project Overview
+The @uptime.link/statuspage (v1.0.74) is a web components catalog specifically designed for building status pages for UptimeLink - an uptime monitoring platform. This catalog provides pre-built, customizable UI components that can be assembled to create complete status pages.
+
+## Core Purpose
+- **Primary Function**: Provide a comprehensive set of web components for building status monitoring dashboards
+- **Target Audience**: Developers building status pages for services using UptimeLink monitoring
+- **Key Features**: Real-time status display, incident management, historical data visualization
+
+## Architecture
+- **Package Name**: @uptime.link/statuspage (v1.0.74) 
+- **Project Type**: Web Component Catalog (wcc)
+- **Module Type**: ESM (ECMAScript Modules)
+- **Distribution**: Private npm package on verdaccio.lossless.one registry
+- **License**: UNLICENSED (proprietary to Lossless GmbH)
+
+## Technology Stack
+- **Framework**: @design.estate/dees-element - A web components framework with:
+  - TypeScript decorators for component registration
+  - Built-in CSS-in-JS with theme support
+  - Shadow DOM encapsulation
+  - Property binding system
+- **DOM Utilities**: @design.estate/dees-domtools for DOM manipulation
+- **Interfaces**: @uptime.link/interfaces for shared data structures
+- **Build Tools**:
+  - tsbuild: TypeScript compilation with --allowimplicitany flag
+  - tsbundle: Creates production bundles for web components
+  - tswatch: Development file watching
+  - TypeScript target: ES2022 with NodeNext module resolution
+
+## Component Library
+The catalog provides 7 main components + 1 internal component:
+
+### Main Components:
+1. **upl-statuspage-header**: 
+   - Page header with customizable title
+   - Action buttons for "Report Incident" and "Subscribe to Updates"
+   - Emits custom events: 'reportNewIncident' and 'statusSubscribe'
+
+2. **upl-statuspage-statusbar**:
+   - Main status indicator showing overall system health
+   - Visual status representation (likely green/yellow/red indicators)
+
+3. **upl-statuspage-assetsselector**:
+   - Component for selecting/filtering which assets to view
+   - Useful for multi-service status pages
+
+4. **upl-statuspage-statusdetails**:
+   - Detailed status information display
+   - Shows granular status data for selected services
+
+5. **upl-statuspage-statusmonth**:
+   - Monthly calendar view of status history
+   - Visual representation of uptime/downtime over time
+
+6. **upl-statuspage-incidents**:
+   - Incident management display
+   - Properties: currentIncidences and pastIncidences (arrays of IIncident)
+   - Supports whitelabel mode
+   - Shows active and historical incidents
+
+7. **upl-statuspage-footer**:
+   - Page footer with legal information link
+   - Customizable legal URL
+
+### Internal Components:
+- **uplinternal-miniheading**: Internal component for consistent heading styling
+
+## Data Flow & Integration
+- Components receive data through properties (using @property decorator)
+- Incident data follows the IIncident interface from @uptime.link/interfaces
+- Components are designed to work standalone or together
+- Event-driven communication between components
+
+## Styling & Theming
+- CSS-in-JS approach using cssManager
+- Built-in light/dark theme support via bdTheme() helper
+- Font: Inter (loaded via assetbroker)
+- Responsive design with max-width constraints (900px)
+- Background colors: Light (#eeeeeb) / Dark (#222222)
+- Text colors: Light (#333333) / Dark (#ffffff)
+
+## Build Output Structure
+- Source: ts_web/ directory
+- Compiled output: dist_ts_web/ (ES modules with TypeScript definitions)
+- Bundle output: dist_bundle/ (production-ready bundle with source maps)
+- Development server: dist_watch/ with index.html for testing
+
+## Usage Pattern
+1. Import components from the package
+2. Create elements using document.createElement()
+3. Set properties programmatically
+4. Append to DOM
+5. Handle custom events for user interactions
+
+## Recent Updates (from changelog)
+- v1.0.74: Improved font loading strategy using single assetbroker link
+- v1.0.73: Enhanced documentation and aligned project descriptions
+- v1.0.72: Fixed import paths and updated package configurations
+
+## Development Workflow
+- `pnpm build`: Compile TypeScript and create production bundle
+- `pnpm watch`: Start development server with hot reload
+- `pnpm test`: Currently just runs build (no actual tests implemented)
+- Demo page available at html/index.html using page1 template
+
+## Key Observations
+1. The project follows a consistent pattern for all components
+2. Each component is self-contained with its own styling
+3. Theme support is built-in for all components
+4. The project is part of a larger UptimeLink ecosystem
+5. Components are designed for composition into complete status pages
+6. No test files are currently implemented despite test infrastructure being set up
+
+## Production Readiness Analysis (v1.0.74)
+
+### Current State
+The components are essentially **UI shells** - they have styling and structure but lack actual functionality. They display static/hardcoded content with no real data integration.
+
+### Major Missing Functionality
+
+#### 1. Data Integration
+- **No API client or data fetching logic** - components can't retrieve real status data
+- **No authentication/authorization** - no secure API communication
+- **No real-time updates** - no WebSocket/SSE implementation
+- **Static content only** - statusbar always shows "Everything is working normally!"
+- **Empty data properties** - currentIncidences/pastIncidences arrays are never populated
+
+#### 2. Component Implementation Gaps
+- **upl-statuspage-assetsselector**: Only shows "Hello!" - missing entire asset selection UI
+- **upl-statuspage-statusbar**: Hardcoded green status - no dynamic status calculation
+- **upl-statuspage-statusdetails**: Shows 48 static green bars - no actual hourly data
+- **upl-statuspage-statusmonth**: Shows 150 static green days - no real uptime data
+- **upl-statuspage-incidents**: Only shows "No incidents" - missing incident card rendering
+- **upl-statuspage-footer**: Placeholder "Hi there" - missing actual footer content
+
+#### 3. Error Handling & States
+- No loading indicators during data fetch
+- No error states for failed requests
+- No offline detection or handling
+- No retry mechanisms
+- No skeleton screens
+
+#### 4. Accessibility Issues
+- No ARIA labels on interactive elements
+- No keyboard navigation support
+- No focus management
+- No screen reader announcements
+- Missing semantic HTML (divs instead of buttons/nav)
+- No skip navigation links
+
+#### 5. Responsive Design Issues
+- Fixed 900px max-width with no proper mobile breakpoints
+- Grid layouts won't adapt to small screens
+- No touch-friendly tap targets
+- Font sizes not responsive
+
+#### 6. Internationalization
+- All text hardcoded in English
+- No i18n framework or translation system
+- No locale-aware date/time formatting
+- No RTL language support
+
+#### 7. Missing Infrastructure
+- No configuration system for API endpoints
+- No analytics integration
+- No performance monitoring
+- No PWA capabilities
+- No export functionality
+- No proper TypeScript interfaces for data models
+- **No tests whatsoever** despite test infrastructure
+
+### Production Requirements Summary
+To make these components production-ready requires implementing:
+1. Complete data layer with API client
+2. State management system
+3. All missing UI functionality
+4. Comprehensive error handling
+5. Full accessibility compliance
+6. Proper responsive design
+7. Internationalization support
+8. Authentication/authorization
+9. Real-time update capabilities
+10. Comprehensive test suite
+
+## Recent Updates (Post v1.0.74)
+
+### Component Order (Top to Bottom)
+1. `upl-statuspage-header` - Navigation header
+2. `upl-statuspage-statusbar` - Overall system status
+3. `upl-statuspage-statsgrid` - Key metrics grid (uptime, response time, incidents)
+4. `upl-statuspage-assetsselector` - Service selection
+5. `upl-statuspage-statusdetails` - 48-hour status visualization
+6. `upl-statuspage-statusmonth` - Monthly calendar view
+7. `upl-statuspage-incidents` - Current and past incidents
+8. `upl-statuspage-footer` - Page footer
+
+### Components Made Production-Ready
+All components have been significantly enhanced with the following improvements:
+
+1. **upl-statuspage-header**
+   - Added properties: showReportButton, showSubscribeButton, brandColor, logoUrl, customStyles, loading
+   - Supports custom branding with dynamic colors
+   - Loading state with skeleton animation
+   - Configurable button visibility
+
+2. **upl-statuspage-statusbar**
+   - Already production-ready with full functionality
+   - Supports all status states (operational, degraded, partial_outage, major_outage, maintenance)
+   - Loading state and expandable behavior
+
+3. **upl-statuspage-assetsselector**
+   - Complete implementation with service selection grid
+   - Full filtering capabilities (text, category, selected-only)
+   - Select all/none functionality
+   - Real-time status updates
+   - Event emissions for selection changes
+   - Loading states and empty states
+
+4. **upl-statuspage-statusdetails**
+   - Hourly status bars with tooltips
+   - Skeleton loading states
+   - Real-time data updates
+   - Important: Expects hourly-aligned timestamps in data
+
+5. **upl-statuspage-statusmonth**
+   - Calendar grid display with status colors
+   - Weekday labels and proper month alignment
+   - Hover tooltips with detailed information
+   - Day click events
+
+6. **upl-statuspage-incidents**
+   - Full incident management with current/past incidents
+   - Multiple incident statuses (investigating, identified, monitoring, resolved, postmortem)
+   - Incident updates timeline
+   - Affected services display
+   - Root cause and resolution information
+
+7. **upl-statuspage-footer** (Completely rebuilt)
+   - Comprehensive footer implementation with all expected properties
+   - Social media links with SVG icons (Twitter, GitHub, LinkedIn, Facebook, YouTube, Instagram, Slack, Discord)
+   - Subscribe/Report issue functionality
+   - Language selector and theme toggle
+   - Whitelabel support
+   - Custom branding options
+   - Loading and error states
+   - RSS feed and API status links
+   - Last updated timestamp with relative formatting
+
+8. **upl-statuspage-statsgrid** (NEW)
+   - Displays key performance metrics in a responsive grid
+   - Shows current status with color indicator
+   - Uptime percentage with configurable time period
+   - Average response time with performance trend indicators
+   - Total incidents count with affected services
+   - Loading state with skeleton animation
+   - Responsive design that stacks on mobile
+   - Used stats data that was previously in statusdetails component
+
+### Demo Architecture
+- All demos have been updated to use dees-demowrapper with runAfterRender callbacks
+- Properties are set dynamically on elements within runAfterRender
+- Multiple demo sections show different use cases and states
+- Event logging demonstrates interactivity
+- Demos can be instrumented with multiple wrappers for different scenarios
+
+### Interfaces Implemented
+Created comprehensive TypeScript interfaces in ts_web/interfaces/index.ts:
+- IServiceStatus - Service monitoring data
+- IOverallStatus - Overall system status
+- IIncidentUpdate - Incident update entries
+- IIncidentDetails - Full incident information
+- IMonthlyUptime - Monthly uptime calendar data
+- IStatusHistoryPoint - Hourly status data points
+- IStatusPageConfig - Configuration options
+
+### Remaining Tasks
+- Integration with actual UptimeLink API
+- WebSocket/SSE for real-time updates
+- Authentication/authorization implementation
+- Accessibility improvements (ARIA labels, keyboard navigation)
+- More comprehensive responsive design
+- Internationalization system
+- Unit and integration tests
+
+### Important Fix Applied
+The `dees-demowrapper` component was not functioning because it wasn't being imported. Fixed by adding:
+```typescript
+import '@design.estate/dees-wcctools/demotools';
+```
+to `html/index.ts`. This registers the `dees-demowrapper` custom element which properly executes the `runAfterRender` callbacks in demos.