statuspage/readme.md

# @uptime.link/statuspage
a catalog with webcomponents for uptimelink dashboard

## Install

To install the `@uptime.link/statuspage` module, you can use npm. Make sure you have Node.js and npm installed, then run:

```sh
npm install @uptime.link/statuspage
```

## Usage

The `@uptime.link/statuspage` module provides a collection of web components to build a comprehensive status page for Uptime.link dashboards. This includes headers, status bars, asset selectors, status details, incident lists, and more.

Here’s a detailed guide on how to use each component in your TypeScript project with ESM syntax. We will walk through creating a complete status page using the provided components.

### Step-by-Step Example

1. **Setup Your Project:**

Ensure you have a TypeScript project setup. Here's a minimal `tsconfig.json` to get started:

```json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}
```

2. **Import Components:**

Create an `index.ts` file, and import the components you need:

```typescript
import './elements/index.js';
import { page1 } from './pages/index.js';
```

3. **Creating a Status Page:**

Here, we'll create a simple status page using the imported components. We'll create individual components like headers, status bars, footers, etc., and combine them into a single page.

### UplStatuspageHeader

```typescript
import { UplStatuspageHeader } from './elements/upl-statuspage-header.js';

const header: UplStatuspageHeader = document.createElement('upl-statuspage-header');
header.pageTitle = "Uptime Link Status Page";
document.body.appendChild(header);
```

### UplStatuspageStatusbar

```typescript
import { UplStatuspageStatusbar } from './elements/upl-statuspage-statusbar.js';

const statusBar: UplStatuspageStatusbar = document.createElement('upl-statuspage-statusbar');
document.body.appendChild(statusBar);
```

### UplStatuspageAssetsselector

```typescript
import { UplStatuspageAssetsselector } from './elements/upl-statuspage-assetsselector.js';

const assetsSelector: UplStatuspageAssetsselector = document.createElement('upl-statuspage-assetsselector');
document.body.appendChild(assetsSelector);
```

### UplStatuspageStatusdetails

```typescript
import { UplStatuspageStatusdetails } from './elements/upl-statuspage-statusdetails.js';

const statusDetails: UplStatuspageStatusdetails = document.createElement('upl-statuspage-statusdetails');
document.body.appendChild(statusDetails);
```

### UplStatuspageStatusmonth

```typescript
import { UplStatuspageStatusmonth } from './elements/upl-statuspage-statusmonth.js';

const statusMonth: UplStatuspageStatusmonth = document.createElement('upl-statuspage-statusmonth');
document.body.appendChild(statusMonth);
```

### UplStatuspageIncidents

```typescript
import { UplStatuspageIncidents } from './elements/upl-statuspage-incidents.js';
import { uplInterfaces } from './plugins.js';

const incidents: UplStatuspageIncidents = document.createElement('upl-statuspage-incidents');
incidents.currentIncidences = [
  // Example incident data
  {
    id: "incident1",
    title: "Server Outage",
    description: "There was an outage on the main server.",
    status: "resolved",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString()
  }
] as uplInterfaces.IIncident[];

incidents.pastIncidences = [
  // Example past incident data
  {
    id: "incident2",
    title: "Database Maintenance",
    description: "Scheduled maintenance on the database.",
    status: "completed",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString()
  }
] as uplInterfaces.IIncident[];

document.body.appendChild(incidents);
```

### UplStatuspageFooter

```typescript
import { UplStatuspageFooter } from './elements/upl-statuspage-footer.js';

const footer: UplStatuspageFooter = document.createElement('upl-statuspage-footer');
footer.legalInfo = "https://example.com/legal";
document.body.appendChild(footer);
```

### Full Example

Here’s how you can put it all together to create a full status page:

```typescript
import './elements/index.js';
import { page1 } from './pages/index.js';
import { UplStatuspageHeader } from './elements/upl-statuspage-header.js';
import { UplStatuspageStatusbar } from './elements/upl-statuspage-statusbar.js';
import { UplStatuspageAssetsselector } from './elements/upl-statuspage-assetsselector.js';
import { UplStatuspageStatusdetails } from './elements/upl-statuspage-statusdetails.js';
import { UplStatuspageStatusmonth } from './elements/upl-statuspage-statusmonth.js';
import { UplStatuspageIncidents } from './elements/upl-statuspage-incidents.js';
import { UplStatuspageFooter } from './elements/upl-statuspage-footer.js';
import { uplInterfaces } from './plugins.js';

const header: UplStatuspageHeader = document.createElement('upl-statuspage-header');
header.pageTitle = "Uptime Link Status Page";
document.body.appendChild(header);

const statusBar: UplStatuspageStatusbar = document.createElement('upl-statuspage-statusbar');
document.body.appendChild(statusBar);

const assetsSelector: UplStatuspageAssetsselector = document.createElement('upl-statuspage-assetsselector');
document.body.appendChild(assetsSelector);

const statusDetails: UplStatuspageStatusdetails = document.createElement('upl-statuspage-statusdetails');
document.body.appendChild(statusDetails);

const statusMonth: UplStatuspageStatusmonth = document.createElement('upl-statuspage-statusmonth');
document.body.appendChild(statusMonth);

const incidents: UplStatuspageIncidents = document.createElement('upl-statuspage-incidents');
incidents.currentIncidences = [
  {
    id: "incident1",
    title: "Server Outage",
    description: "There was an outage on the main server.",
    status: "resolved",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString()
  }
] as uplInterfaces.IIncident[];

incidents.pastIncidences = [
  {
    id: "incident2",
    title: "Database Maintenance",
    description: "Scheduled maintenance on the database.",
    status: "completed",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString()
  }
] as uplInterfaces.IIncident[];

document.body.appendChild(incidents);

const footer: UplStatuspageFooter = document.createElement('upl-statuspage-footer');
footer.legalInfo = "https://example.com/legal";
document.body.appendChild(footer);
```

This example uses all the components provided by `@uptime.link/statuspage` to create a functional status page. Modify the data, styles, and structure to suit your requirements.
undefined