78 lines
3.7 KiB
TypeScript
78 lines
3.7 KiB
TypeScript
import type { HomarrCustomWidgetV2Input } from "./custom-jsx-schema";
|
|
|
|
export interface CustomJsxExample {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
widget: HomarrCustomWidgetV2Input;
|
|
}
|
|
|
|
export const CUSTOM_JSX_STARTER = `<Stack gap="sm" p="sm">
|
|
<Group justify="space-between"><Text fw={700}>Service status</Text><RefreshButton /></Group>
|
|
{status.status?.loading ? <Skeleton height={72} radius="md" /> : status.status?.error ? <Alert color="red">{status.status.error}</Alert> : <Badge color={data.status?.online ? "green" : "red"}>{data.status?.online ? "Online" : "Offline"}</Badge>}
|
|
</Stack>`;
|
|
|
|
export const CUSTOM_WIDGET_STARTER: HomarrCustomWidgetV2Input = {
|
|
$schema: "homarr-custom-widget-v2",
|
|
name: "New custom widget",
|
|
description: "",
|
|
sources: { default: { name: "API", baseUrl: "https://example.com", networkScope: "public", auth: "none" } },
|
|
requests: { status: { path: "/api/status" } },
|
|
options: {},
|
|
template: CUSTOM_JSX_STARTER,
|
|
};
|
|
|
|
export const customJsxExamples: readonly CustomJsxExample[] = [
|
|
{
|
|
id: "service-dashboard",
|
|
title: "Service dashboard",
|
|
description: "A polished responsive dashboard with clear loading and error states.",
|
|
widget: {
|
|
$schema: "homarr-custom-widget-v2",
|
|
name: "Service dashboard",
|
|
sources: {
|
|
default: { name: "Service API", baseUrl: "https://example.com", networkScope: "public", auth: "none" },
|
|
},
|
|
requests: { overview: { path: "/api/overview", cacheSeconds: 30 } },
|
|
options: {},
|
|
template: `<Stack gap="md" p="md">
|
|
<Group justify="space-between"><Stack gap={2}><Text fw={700}>System overview</Text><Text size="xs" c="dimmed">Live service health</Text></Stack><RefreshButton /></Group>
|
|
{status.overview?.loading ? <Skeleton height={120} radius="lg" /> : status.overview?.error ? <Alert color="red" title="Could not load status">{status.overview.error}</Alert> : <SimpleGrid cols={{ base: 1, xs: 3 }}>{(data.overview?.services ?? []).map(service => <Paper key={service.name} withBorder p="sm" radius="md"><Group justify="space-between"><Text size="sm" fw={600}>{service.name}</Text><Badge color={service.online ? "green" : "red"} variant="light">{service.online ? "Online" : "Offline"}</Badge></Group><Text mt="xs" size="xl" fw={700}>{service.latency ?? "—"}<Text span size="xs" c="dimmed"> ms</Text></Text></Paper>)}</SimpleGrid>}
|
|
</Stack>`,
|
|
},
|
|
},
|
|
{
|
|
id: "search-and-action",
|
|
title: "Search and action",
|
|
description: "A temporary search input, manual query, and explicit mutation.",
|
|
widget: {
|
|
$schema: "homarr-custom-widget-v2",
|
|
name: "Series search",
|
|
sources: {
|
|
default: {
|
|
name: "Media API",
|
|
baseUrl: "https://example.com",
|
|
networkScope: "private",
|
|
auth: { type: "apiKeyHeader", name: "X-Api-Key" },
|
|
},
|
|
},
|
|
requests: {
|
|
search: { path: "/api/series/search", trigger: "manual", query: { term: { $param: "query" } } },
|
|
monitor: {
|
|
kind: "action",
|
|
method: "POST",
|
|
path: "/api/series/{param:id}/monitor",
|
|
confirmation: "Monitor this series?",
|
|
},
|
|
},
|
|
options: {},
|
|
template: `<Stack gap="sm" p="md">
|
|
<TextInput bind="search" label="Search TV shows" placeholder="Start typing…" />
|
|
<SubFetch requestId="search" params={{ query: inputs.search }}>
|
|
{(results) => <Stack gap="xs">{(results ?? []).map(series => <Paper key={series.id} withBorder p="sm" radius="md"><Group justify="space-between" wrap="nowrap"><Stack gap={2}><Text fw={600}>{series.title}</Text><Text size="xs" c="dimmed">{series.year ?? "Unknown year"}</Text></Stack><ActionButton requestId="monitor" params={{ id: series.id }}>Monitor</ActionButton></Group></Paper>)}</Stack>}
|
|
</SubFetch>
|
|
</Stack>`,
|
|
},
|
|
},
|
|
];
|