@statusas/react 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +99 -0
- package/dist/index.d.mts +14 -0
- package/dist/index.d.ts +14 -0
- package/dist/index.js +135 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +108 -0
- package/dist/index.mjs.map +1 -0
- package/dist/styles.css +2 -0
- package/package.json +62 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 LOYALTY LT, MB
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
# Statusas status widget for React
|
|
2
|
+
|
|
3
|
+
A badge that says whether your services are up, read straight from your
|
|
4
|
+
[statusas.lt](https://statusas.lt) status page. It is a React Server Component:
|
|
5
|
+
it fetches on the server, ships no client JavaScript, and degrades to
|
|
6
|
+
"Unknown" rather than throwing if the API cannot be reached.
|
|
7
|
+
|
|
8
|
+
## Install
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @statusas/react
|
|
12
|
+
pnpm add @statusas/react
|
|
13
|
+
yarn add @statusas/react
|
|
14
|
+
bun add @statusas/react
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
React 18 or 19.
|
|
18
|
+
|
|
19
|
+
## Use it
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import { StatusWidget } from "@statusas/react";
|
|
23
|
+
|
|
24
|
+
export default function Page() {
|
|
25
|
+
return <StatusWidget slug="your-page-slug" />;
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
The `slug` is your status page's subdomain — `your-page-slug.statusas.lt`. Pass
|
|
30
|
+
`href` to point the badge somewhere else, for instance your own domain:
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
<StatusWidget slug="your-page-slug" href="https://status.your-company.com" />
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Styles
|
|
37
|
+
|
|
38
|
+
With Tailwind v4, tell it to scan the package:
|
|
39
|
+
|
|
40
|
+
```css
|
|
41
|
+
/* app/globals.css */
|
|
42
|
+
@import "tailwindcss";
|
|
43
|
+
@source "../node_modules/@statusas/react/dist";
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
With Tailwind v3, extend `content`:
|
|
47
|
+
|
|
48
|
+
```js
|
|
49
|
+
// tailwind.config.js
|
|
50
|
+
module.exports = {
|
|
51
|
+
content: [
|
|
52
|
+
"./app/**/*.{tsx,ts,mdx,md}",
|
|
53
|
+
"./node_modules/@statusas/react/dist/**/*.{js,mjs}",
|
|
54
|
+
],
|
|
55
|
+
};
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Not using Tailwind? Import the compiled stylesheet once:
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
// app/layout.tsx
|
|
62
|
+
import "@statusas/react/styles.css";
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Style it yourself
|
|
66
|
+
|
|
67
|
+
`getStatus` is the badge without the markup.
|
|
68
|
+
|
|
69
|
+
```ts
|
|
70
|
+
import { getStatus } from "@statusas/react";
|
|
71
|
+
|
|
72
|
+
async function CustomStatusWidget() {
|
|
73
|
+
const { status } = await getStatus("your-page-slug");
|
|
74
|
+
return <div>{/* your own markup */}</div>;
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
```ts
|
|
79
|
+
type Status =
|
|
80
|
+
| "operational"
|
|
81
|
+
| "degraded_performance"
|
|
82
|
+
| "partial_outage"
|
|
83
|
+
| "major_outage"
|
|
84
|
+
| "under_maintenance"
|
|
85
|
+
| "incident"
|
|
86
|
+
| "unknown";
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
It calls `https://api.statusas.lt/public/status/:slug`, which needs no
|
|
90
|
+
credentials. Self-hosting? Set `STATUSAS_API_URL`, or pass a base URL as the
|
|
91
|
+
second argument.
|
|
92
|
+
|
|
93
|
+
## More
|
|
94
|
+
|
|
95
|
+
- [Widget guide](https://docs.statusas.lt/guides/how-to-use-react-widget)
|
|
96
|
+
- [API reference](https://api.statusas.lt/openapi)
|
|
97
|
+
- [Contact](https://www.statusas.lt/lt/contact)
|
|
98
|
+
|
|
99
|
+
MIT licensed. Built by [LOYALTY LT, MB](https://statusas.lt).
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
type Status = "operational" | "degraded_performance" | "partial_outage" | "major_outage" | "under_maintenance" | "unknown" | "incident";
|
|
4
|
+
type StatusResponse = {
|
|
5
|
+
status: Status;
|
|
6
|
+
};
|
|
7
|
+
declare function getStatus(slug: string, baseUrl?: string): Promise<StatusResponse>;
|
|
8
|
+
type StatusWidgetProps = {
|
|
9
|
+
slug: string;
|
|
10
|
+
href?: string;
|
|
11
|
+
};
|
|
12
|
+
declare function StatusWidget({ slug, href }: StatusWidgetProps): Promise<react_jsx_runtime.JSX.Element>;
|
|
13
|
+
|
|
14
|
+
export { Status, StatusResponse, StatusWidget, StatusWidgetProps, getStatus };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
type Status = "operational" | "degraded_performance" | "partial_outage" | "major_outage" | "under_maintenance" | "unknown" | "incident";
|
|
4
|
+
type StatusResponse = {
|
|
5
|
+
status: Status;
|
|
6
|
+
};
|
|
7
|
+
declare function getStatus(slug: string, baseUrl?: string): Promise<StatusResponse>;
|
|
8
|
+
type StatusWidgetProps = {
|
|
9
|
+
slug: string;
|
|
10
|
+
href?: string;
|
|
11
|
+
};
|
|
12
|
+
declare function StatusWidget({ slug, href }: StatusWidgetProps): Promise<react_jsx_runtime.JSX.Element>;
|
|
13
|
+
|
|
14
|
+
export { Status, StatusResponse, StatusWidget, StatusWidgetProps, getStatus };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var __async = (__this, __arguments, generator) => {
|
|
20
|
+
return new Promise((resolve, reject) => {
|
|
21
|
+
var fulfilled = (value) => {
|
|
22
|
+
try {
|
|
23
|
+
step(generator.next(value));
|
|
24
|
+
} catch (e) {
|
|
25
|
+
reject(e);
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
var rejected = (value) => {
|
|
29
|
+
try {
|
|
30
|
+
step(generator.throw(value));
|
|
31
|
+
} catch (e) {
|
|
32
|
+
reject(e);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
36
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
// src/index.ts
|
|
41
|
+
var src_exports = {};
|
|
42
|
+
__export(src_exports, {
|
|
43
|
+
StatusWidget: () => StatusWidget,
|
|
44
|
+
getStatus: () => getStatus
|
|
45
|
+
});
|
|
46
|
+
module.exports = __toCommonJS(src_exports);
|
|
47
|
+
|
|
48
|
+
// src/utils.ts
|
|
49
|
+
var statusDictionary = {
|
|
50
|
+
operational: {
|
|
51
|
+
label: "Operational",
|
|
52
|
+
color: "bg-green-500"
|
|
53
|
+
},
|
|
54
|
+
degraded_performance: {
|
|
55
|
+
label: "Degraded Performance",
|
|
56
|
+
color: "bg-yellow-500"
|
|
57
|
+
},
|
|
58
|
+
partial_outage: {
|
|
59
|
+
label: "Partial Outage",
|
|
60
|
+
color: "bg-yellow-500"
|
|
61
|
+
},
|
|
62
|
+
major_outage: {
|
|
63
|
+
label: "Major Outage",
|
|
64
|
+
color: "bg-red-500"
|
|
65
|
+
},
|
|
66
|
+
unknown: {
|
|
67
|
+
label: "Unknown",
|
|
68
|
+
color: "bg-gray-500"
|
|
69
|
+
},
|
|
70
|
+
incident: {
|
|
71
|
+
label: "Incident",
|
|
72
|
+
color: "bg-yellow-500"
|
|
73
|
+
},
|
|
74
|
+
under_maintenance: {
|
|
75
|
+
label: "Under Maintenance",
|
|
76
|
+
color: "bg-blue-500"
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
// src/widget.tsx
|
|
81
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
82
|
+
function getStatus(_0) {
|
|
83
|
+
return __async(this, arguments, function* (slug, baseUrl = ((_a) => (_a = process.env.STATUSAS_API_URL) != null ? _a : "https://api.statusas.lt")()) {
|
|
84
|
+
const base = baseUrl.replace(/\/+$/, "") || "https://api.statusas.lt";
|
|
85
|
+
try {
|
|
86
|
+
const res = yield fetch(`${base}/public/status/${slug}`, {
|
|
87
|
+
cache: "no-cache"
|
|
88
|
+
});
|
|
89
|
+
if (res.ok) {
|
|
90
|
+
const data = yield res.json();
|
|
91
|
+
return data;
|
|
92
|
+
}
|
|
93
|
+
} catch (e) {
|
|
94
|
+
}
|
|
95
|
+
return { status: "unknown" };
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
function StatusWidget(_0) {
|
|
99
|
+
return __async(this, arguments, function* ({ slug, href }) {
|
|
100
|
+
const { status } = yield getStatus(slug);
|
|
101
|
+
const { label, color } = statusDictionary[status];
|
|
102
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
103
|
+
"a",
|
|
104
|
+
{
|
|
105
|
+
className: "inline-flex max-w-fit items-center gap-2 rounded-md border border-gray-200 px-3 py-1 text-sm text-gray-700 hover:bg-gray-100 hover:text-black dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-900 dark:hover:text-white",
|
|
106
|
+
href: href || `https://${slug}.statusas.lt`,
|
|
107
|
+
target: "_blank",
|
|
108
|
+
rel: "noreferrer",
|
|
109
|
+
children: [
|
|
110
|
+
label,
|
|
111
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "relative flex h-2 w-2", children: [
|
|
112
|
+
status === "operational" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
113
|
+
"span",
|
|
114
|
+
{
|
|
115
|
+
className: `absolute inline-flex h-full w-full animate-ping rounded-full ${color} opacity-75 duration-1000`
|
|
116
|
+
}
|
|
117
|
+
) : null,
|
|
118
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
119
|
+
"span",
|
|
120
|
+
{
|
|
121
|
+
className: `relative inline-flex h-2 w-2 rounded-full ${color}`
|
|
122
|
+
}
|
|
123
|
+
)
|
|
124
|
+
] })
|
|
125
|
+
]
|
|
126
|
+
}
|
|
127
|
+
);
|
|
128
|
+
});
|
|
129
|
+
}
|
|
130
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
131
|
+
0 && (module.exports = {
|
|
132
|
+
StatusWidget,
|
|
133
|
+
getStatus
|
|
134
|
+
});
|
|
135
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/utils.ts","../src/widget.tsx"],"sourcesContent":["export * from \"./widget\";\n","import type { Status } from \"./widget\";\n\nexport const statusDictionary: Record<\n Status,\n { label: string; color: string }\n> = {\n operational: {\n label: \"Operational\",\n color: \"bg-green-500\",\n },\n degraded_performance: {\n label: \"Degraded Performance\",\n color: \"bg-yellow-500\",\n },\n partial_outage: {\n label: \"Partial Outage\",\n color: \"bg-yellow-500\",\n },\n major_outage: {\n label: \"Major Outage\",\n color: \"bg-red-500\",\n },\n unknown: {\n label: \"Unknown\",\n color: \"bg-gray-500\",\n },\n incident: {\n label: \"Incident\",\n color: \"bg-yellow-500\",\n },\n under_maintenance: {\n label: \"Under Maintenance\",\n color: \"bg-blue-500\",\n },\n} as const;\n","import { statusDictionary } from \"./utils\";\n\nexport type Status =\n | \"operational\"\n | \"degraded_performance\"\n | \"partial_outage\"\n | \"major_outage\"\n | \"under_maintenance\"\n | \"unknown\"\n | \"incident\";\n\nexport type StatusResponse = { status: Status };\n\nexport async function getStatus(\n slug: string,\n baseUrl = process.env.STATUSAS_API_URL ?? \"https://api.statusas.lt\",\n): Promise<StatusResponse> {\n // read at runtime on the server: no NEXT_PUBLIC_ prefix, so deployments\n // shipping prebuilt images can still point badges at their own API\n const base = baseUrl.replace(/\\/+$/, \"\") || \"https://api.statusas.lt\";\n try {\n const res = await fetch(`${base}/public/status/${slug}`, {\n cache: \"no-cache\",\n });\n\n if (res.ok) {\n const data = (await res.json()) as StatusResponse;\n return data;\n }\n } catch {\n // network-level failures (unreachable host, DNS, …) degrade to \"unknown\"\n // instead of bubbling a 500 out of the badge routes\n }\n return { status: \"unknown\" };\n}\n\nexport type StatusWidgetProps = {\n slug: string;\n href?: string;\n};\n\nexport async function StatusWidget({ slug, href }: StatusWidgetProps) {\n const { status } = await getStatus(slug);\n\n const { label, color } = statusDictionary[status];\n\n return (\n <a\n className=\"inline-flex max-w-fit items-center gap-2 rounded-md border border-gray-200 px-3 py-1 text-sm text-gray-700 hover:bg-gray-100 hover:text-black dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-900 dark:hover:text-white\"\n href={href || `https://${slug}.statusas.lt`}\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n {label}\n <span className=\"relative flex h-2 w-2\">\n {status === \"operational\" ? (\n <span\n className={`absolute inline-flex h-full w-full animate-ping rounded-full ${color} opacity-75 duration-1000`}\n />\n ) : null}\n <span\n className={`relative inline-flex h-2 w-2 rounded-full ${color}`}\n />\n </span>\n </a>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEO,IAAM,mBAGT;AAAA,EACF,aAAa;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,sBAAsB;AAAA,IACpB,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,gBAAgB;AAAA,IACd,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,cAAc;AAAA,IACZ,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;;;ACoBM;AAzCN,SAAsB,UACpB,IAEyB;AAAA,6CAFzB,MACA,WAAU,sBAAQ,IAAI,qBAAZ,YAAgC,8BACjB;AAGzB,UAAM,OAAO,QAAQ,QAAQ,QAAQ,EAAE,KAAK;AAC5C,QAAI;AACF,YAAM,MAAM,MAAM,MAAM,GAAG,IAAI,kBAAkB,IAAI,IAAI;AAAA,QACvD,OAAO;AAAA,MACT,CAAC;AAED,UAAI,IAAI,IAAI;AACV,cAAM,OAAQ,MAAM,IAAI,KAAK;AAC7B,eAAO;AAAA,MACT;AAAA,IACF,SAAQ;AAAA,IAGR;AACA,WAAO,EAAE,QAAQ,UAAU;AAAA,EAC7B;AAAA;AAOA,SAAsB,aAAa,IAAmC;AAAA,6CAAnC,EAAE,MAAM,KAAK,GAAsB;AACpE,UAAM,EAAE,OAAO,IAAI,MAAM,UAAU,IAAI;AAEvC,UAAM,EAAE,OAAO,MAAM,IAAI,iBAAiB,MAAM;AAEhD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAM,QAAQ,WAAW,IAAI;AAAA,QAC7B,QAAO;AAAA,QACP,KAAI;AAAA,QAEH;AAAA;AAAA,UACD,6CAAC,UAAK,WAAU,yBACb;AAAA,uBAAW,gBACV;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,gEAAgE,KAAK;AAAA;AAAA,YAClF,IACE;AAAA,YACJ;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,6CAA6C,KAAK;AAAA;AAAA,YAC/D;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AAAA;","names":[]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
var __async = (__this, __arguments, generator) => {
|
|
2
|
+
return new Promise((resolve, reject) => {
|
|
3
|
+
var fulfilled = (value) => {
|
|
4
|
+
try {
|
|
5
|
+
step(generator.next(value));
|
|
6
|
+
} catch (e) {
|
|
7
|
+
reject(e);
|
|
8
|
+
}
|
|
9
|
+
};
|
|
10
|
+
var rejected = (value) => {
|
|
11
|
+
try {
|
|
12
|
+
step(generator.throw(value));
|
|
13
|
+
} catch (e) {
|
|
14
|
+
reject(e);
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
18
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
// src/utils.ts
|
|
23
|
+
var statusDictionary = {
|
|
24
|
+
operational: {
|
|
25
|
+
label: "Operational",
|
|
26
|
+
color: "bg-green-500"
|
|
27
|
+
},
|
|
28
|
+
degraded_performance: {
|
|
29
|
+
label: "Degraded Performance",
|
|
30
|
+
color: "bg-yellow-500"
|
|
31
|
+
},
|
|
32
|
+
partial_outage: {
|
|
33
|
+
label: "Partial Outage",
|
|
34
|
+
color: "bg-yellow-500"
|
|
35
|
+
},
|
|
36
|
+
major_outage: {
|
|
37
|
+
label: "Major Outage",
|
|
38
|
+
color: "bg-red-500"
|
|
39
|
+
},
|
|
40
|
+
unknown: {
|
|
41
|
+
label: "Unknown",
|
|
42
|
+
color: "bg-gray-500"
|
|
43
|
+
},
|
|
44
|
+
incident: {
|
|
45
|
+
label: "Incident",
|
|
46
|
+
color: "bg-yellow-500"
|
|
47
|
+
},
|
|
48
|
+
under_maintenance: {
|
|
49
|
+
label: "Under Maintenance",
|
|
50
|
+
color: "bg-blue-500"
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
// src/widget.tsx
|
|
55
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
56
|
+
function getStatus(_0) {
|
|
57
|
+
return __async(this, arguments, function* (slug, baseUrl = ((_a) => (_a = process.env.STATUSAS_API_URL) != null ? _a : "https://api.statusas.lt")()) {
|
|
58
|
+
const base = baseUrl.replace(/\/+$/, "") || "https://api.statusas.lt";
|
|
59
|
+
try {
|
|
60
|
+
const res = yield fetch(`${base}/public/status/${slug}`, {
|
|
61
|
+
cache: "no-cache"
|
|
62
|
+
});
|
|
63
|
+
if (res.ok) {
|
|
64
|
+
const data = yield res.json();
|
|
65
|
+
return data;
|
|
66
|
+
}
|
|
67
|
+
} catch (e) {
|
|
68
|
+
}
|
|
69
|
+
return { status: "unknown" };
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
function StatusWidget(_0) {
|
|
73
|
+
return __async(this, arguments, function* ({ slug, href }) {
|
|
74
|
+
const { status } = yield getStatus(slug);
|
|
75
|
+
const { label, color } = statusDictionary[status];
|
|
76
|
+
return /* @__PURE__ */ jsxs(
|
|
77
|
+
"a",
|
|
78
|
+
{
|
|
79
|
+
className: "inline-flex max-w-fit items-center gap-2 rounded-md border border-gray-200 px-3 py-1 text-sm text-gray-700 hover:bg-gray-100 hover:text-black dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-900 dark:hover:text-white",
|
|
80
|
+
href: href || `https://${slug}.statusas.lt`,
|
|
81
|
+
target: "_blank",
|
|
82
|
+
rel: "noreferrer",
|
|
83
|
+
children: [
|
|
84
|
+
label,
|
|
85
|
+
/* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2", children: [
|
|
86
|
+
status === "operational" ? /* @__PURE__ */ jsx(
|
|
87
|
+
"span",
|
|
88
|
+
{
|
|
89
|
+
className: `absolute inline-flex h-full w-full animate-ping rounded-full ${color} opacity-75 duration-1000`
|
|
90
|
+
}
|
|
91
|
+
) : null,
|
|
92
|
+
/* @__PURE__ */ jsx(
|
|
93
|
+
"span",
|
|
94
|
+
{
|
|
95
|
+
className: `relative inline-flex h-2 w-2 rounded-full ${color}`
|
|
96
|
+
}
|
|
97
|
+
)
|
|
98
|
+
] })
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
);
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
export {
|
|
105
|
+
StatusWidget,
|
|
106
|
+
getStatus
|
|
107
|
+
};
|
|
108
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/utils.ts","../src/widget.tsx"],"sourcesContent":["import type { Status } from \"./widget\";\n\nexport const statusDictionary: Record<\n Status,\n { label: string; color: string }\n> = {\n operational: {\n label: \"Operational\",\n color: \"bg-green-500\",\n },\n degraded_performance: {\n label: \"Degraded Performance\",\n color: \"bg-yellow-500\",\n },\n partial_outage: {\n label: \"Partial Outage\",\n color: \"bg-yellow-500\",\n },\n major_outage: {\n label: \"Major Outage\",\n color: \"bg-red-500\",\n },\n unknown: {\n label: \"Unknown\",\n color: \"bg-gray-500\",\n },\n incident: {\n label: \"Incident\",\n color: \"bg-yellow-500\",\n },\n under_maintenance: {\n label: \"Under Maintenance\",\n color: \"bg-blue-500\",\n },\n} as const;\n","import { statusDictionary } from \"./utils\";\n\nexport type Status =\n | \"operational\"\n | \"degraded_performance\"\n | \"partial_outage\"\n | \"major_outage\"\n | \"under_maintenance\"\n | \"unknown\"\n | \"incident\";\n\nexport type StatusResponse = { status: Status };\n\nexport async function getStatus(\n slug: string,\n baseUrl = process.env.STATUSAS_API_URL ?? \"https://api.statusas.lt\",\n): Promise<StatusResponse> {\n // read at runtime on the server: no NEXT_PUBLIC_ prefix, so deployments\n // shipping prebuilt images can still point badges at their own API\n const base = baseUrl.replace(/\\/+$/, \"\") || \"https://api.statusas.lt\";\n try {\n const res = await fetch(`${base}/public/status/${slug}`, {\n cache: \"no-cache\",\n });\n\n if (res.ok) {\n const data = (await res.json()) as StatusResponse;\n return data;\n }\n } catch {\n // network-level failures (unreachable host, DNS, …) degrade to \"unknown\"\n // instead of bubbling a 500 out of the badge routes\n }\n return { status: \"unknown\" };\n}\n\nexport type StatusWidgetProps = {\n slug: string;\n href?: string;\n};\n\nexport async function StatusWidget({ slug, href }: StatusWidgetProps) {\n const { status } = await getStatus(slug);\n\n const { label, color } = statusDictionary[status];\n\n return (\n <a\n className=\"inline-flex max-w-fit items-center gap-2 rounded-md border border-gray-200 px-3 py-1 text-sm text-gray-700 hover:bg-gray-100 hover:text-black dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-900 dark:hover:text-white\"\n href={href || `https://${slug}.statusas.lt`}\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n {label}\n <span className=\"relative flex h-2 w-2\">\n {status === \"operational\" ? (\n <span\n className={`absolute inline-flex h-full w-full animate-ping rounded-full ${color} opacity-75 duration-1000`}\n />\n ) : null}\n <span\n className={`relative inline-flex h-2 w-2 rounded-full ${color}`}\n />\n </span>\n </a>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAEO,IAAM,mBAGT;AAAA,EACF,aAAa;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,sBAAsB;AAAA,IACpB,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,gBAAgB;AAAA,IACd,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,cAAc;AAAA,IACZ,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;;;ACoBM,SAEI,KAFJ;AAzCN,SAAsB,UACpB,IAEyB;AAAA,6CAFzB,MACA,WAAU,sBAAQ,IAAI,qBAAZ,YAAgC,8BACjB;AAGzB,UAAM,OAAO,QAAQ,QAAQ,QAAQ,EAAE,KAAK;AAC5C,QAAI;AACF,YAAM,MAAM,MAAM,MAAM,GAAG,IAAI,kBAAkB,IAAI,IAAI;AAAA,QACvD,OAAO;AAAA,MACT,CAAC;AAED,UAAI,IAAI,IAAI;AACV,cAAM,OAAQ,MAAM,IAAI,KAAK;AAC7B,eAAO;AAAA,MACT;AAAA,IACF,SAAQ;AAAA,IAGR;AACA,WAAO,EAAE,QAAQ,UAAU;AAAA,EAC7B;AAAA;AAOA,SAAsB,aAAa,IAAmC;AAAA,6CAAnC,EAAE,MAAM,KAAK,GAAsB;AACpE,UAAM,EAAE,OAAO,IAAI,MAAM,UAAU,IAAI;AAEvC,UAAM,EAAE,OAAO,MAAM,IAAI,iBAAiB,MAAM;AAEhD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAM,QAAQ,WAAW,IAAI;AAAA,QAC7B,QAAO;AAAA,QACP,KAAI;AAAA,QAEH;AAAA;AAAA,UACD,qBAAC,UAAK,WAAU,yBACb;AAAA,uBAAW,gBACV;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,gEAAgE,KAAK;AAAA;AAAA,YAClF,IACE;AAAA,YACJ;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,6CAA6C,KAAK;AAAA;AAAA,YAC/D;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AAAA;","names":[]}
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-500:oklch(63.7% .237 25.331);--color-yellow-500:oklch(79.5% .184 86.047);--color-green-500:oklch(72.3% .219 149.579);--color-blue-500:oklch(62.3% .214 259.815);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--radius-md:.375rem;--animate-ping:ping 1s cubic-bezier(0, 0, .2, 1) infinite;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*,:after,:before,::backdrop{border-color:var(--color-gray-200,currentcolor)}::file-selector-button{border-color:var(--color-gray-200,currentcolor)}}@layer components;@layer utilities{.absolute{position:absolute}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.h-2{height:calc(var(--spacing) * 2)}.h-full{height:100%}.w-2{width:calc(var(--spacing) * 2)}.w-full{width:100%}.max-w-fit{max-width:fit-content}.animate-ping{animation:var(--animate-ping)}.items-center{align-items:center}.gap-2{gap:calc(var(--spacing) * 2)}.rounded-full{border-radius:3.40282e38px}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-gray-200{border-color:var(--color-gray-200)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-green-500{background-color:var(--color-green-500)}.bg-red-500{background-color:var(--color-red-500)}.bg-yellow-500{background-color:var(--color-yellow-500)}.px-3{padding-inline:calc(var(--spacing) * 3)}.py-1{padding-block:calc(var(--spacing) * 1)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-gray-700{color:var(--color-gray-700)}.opacity-75{opacity:.75}.duration-1000{--tw-duration:1s;transition-duration:1s}@media (hover:hover){.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:text-black:hover{color:var(--color-black)}}@media (prefers-color-scheme:dark){.dark\:border-gray-800{border-color:var(--color-gray-800)}.dark\:text-gray-300{color:var(--color-gray-300)}@media (hover:hover){.dark\:hover\:bg-gray-900:hover{background-color:var(--color-gray-900)}.dark\:hover\:text-white:hover{color:var(--color-white)}}}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}
|
package/package.json
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@statusas/react",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Status badge for React: shows whether your services are up, straight from your statusas.lt status page.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"monitoring",
|
|
7
|
+
"uptime",
|
|
8
|
+
"status page",
|
|
9
|
+
"status badge",
|
|
10
|
+
"statusas",
|
|
11
|
+
"react"
|
|
12
|
+
],
|
|
13
|
+
"homepage": "https://docs.statusas.lt/guides/how-to-use-react-widget",
|
|
14
|
+
"bugs": {
|
|
15
|
+
"url": "https://www.statusas.lt/lt/contact",
|
|
16
|
+
"email": "hello@statusas.lt"
|
|
17
|
+
},
|
|
18
|
+
"license": "MIT",
|
|
19
|
+
"author": "LOYALTY LT, MB <hello@statusas.lt> (https://statusas.lt)",
|
|
20
|
+
"sideEffects": [
|
|
21
|
+
"*.css"
|
|
22
|
+
],
|
|
23
|
+
"exports": {
|
|
24
|
+
".": {
|
|
25
|
+
"types": "./dist/index.d.ts",
|
|
26
|
+
"import": "./dist/index.mjs",
|
|
27
|
+
"require": "./dist/index.js"
|
|
28
|
+
},
|
|
29
|
+
"./styles.css": "./dist/styles.css",
|
|
30
|
+
"./package.json": "./package.json"
|
|
31
|
+
},
|
|
32
|
+
"main": "./dist/index.js",
|
|
33
|
+
"module": "./dist/index.mjs",
|
|
34
|
+
"types": "./dist/index.d.ts",
|
|
35
|
+
"files": [
|
|
36
|
+
"dist",
|
|
37
|
+
"README.md",
|
|
38
|
+
"LICENSE"
|
|
39
|
+
],
|
|
40
|
+
"publishConfig": {
|
|
41
|
+
"access": "public"
|
|
42
|
+
},
|
|
43
|
+
"scripts": {
|
|
44
|
+
"dev": "tsup --watch && pnpm run dev:tailwind",
|
|
45
|
+
"dev:tailwind": "npx @tailwindcss/cli -i ./src/styles.css -o ./dist/styles.css --watch",
|
|
46
|
+
"build:tailwind": "npx @tailwindcss/cli -i ./src/styles.css -o ./dist/styles.css --minify",
|
|
47
|
+
"build": "tsup && pnpm run build:tailwind",
|
|
48
|
+
"prepack": "pnpm run build"
|
|
49
|
+
},
|
|
50
|
+
"devDependencies": {
|
|
51
|
+
"@statusas/tsconfig": "workspace:*",
|
|
52
|
+
"@tailwindcss/cli": "catalog:",
|
|
53
|
+
"@types/node": "catalog:",
|
|
54
|
+
"@types/react": "catalog:",
|
|
55
|
+
"tailwindcss": "catalog:",
|
|
56
|
+
"tsup": "catalog:",
|
|
57
|
+
"typescript": "catalog:"
|
|
58
|
+
},
|
|
59
|
+
"peerDependencies": {
|
|
60
|
+
"react": "^18.0.0 || ^19.0.0"
|
|
61
|
+
}
|
|
62
|
+
}
|