wehub-resource-sync
624 lines
17 KiB
TypeScript
624 lines
17 KiB
TypeScript
/**
|
|
* A2UI Catalog -- React Renderers
|
|
*
|
|
* Each renderer maps a component name from definitions.ts to a React
|
|
* implementation. Props are type-checked against the Zod schemas.
|
|
*/
|
|
|
|
import React, { useState } from "react";
|
|
import {
|
|
PieChart as RechartsPie,
|
|
Pie,
|
|
Cell,
|
|
ResponsiveContainer,
|
|
BarChart as RechartsBar,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
Tooltip,
|
|
CartesianGrid,
|
|
} from "recharts";
|
|
import {
|
|
createCatalog,
|
|
type CatalogRenderers,
|
|
} from "@copilotkit/a2ui-renderer";
|
|
import {
|
|
demonstrationCatalogDefinitions,
|
|
type DemonstrationCatalogDefinitions,
|
|
} from "./definitions";
|
|
|
|
// --- Theme-aware colors ---
|
|
|
|
const c = {
|
|
card: "var(--card)",
|
|
cardFg: "var(--card-foreground)",
|
|
border: "var(--border)",
|
|
muted: "var(--muted-foreground)",
|
|
divider: "color-mix(in srgb, var(--border) 50%, var(--card))",
|
|
shadow: "0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04)",
|
|
btnBg: "color-mix(in srgb, var(--muted) 40%, var(--card))",
|
|
btnDoneBg: "color-mix(in srgb, #22c55e 10%, var(--card))",
|
|
};
|
|
|
|
function ActionButton({
|
|
label,
|
|
doneLabel,
|
|
action,
|
|
children: child,
|
|
}: {
|
|
label: string;
|
|
doneLabel: string;
|
|
action: unknown;
|
|
children?: React.ReactNode;
|
|
}) {
|
|
const [done, setDone] = useState(false);
|
|
return (
|
|
<button
|
|
disabled={done}
|
|
style={{
|
|
width: "100%",
|
|
padding: "10px 16px",
|
|
borderRadius: "10px",
|
|
border: done ? "1px solid #bbf7d0" : `1px solid ${c.border}`,
|
|
background: done ? c.btnDoneBg : c.btnBg,
|
|
color: done ? "#059669" : c.cardFg,
|
|
fontSize: "0.85rem",
|
|
fontWeight: 500,
|
|
cursor: done ? "default" : "pointer",
|
|
transition: "all 0.2s ease",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: "6px",
|
|
}}
|
|
onClick={() => {
|
|
if (!done) {
|
|
(action as (() => void) | undefined)?.();
|
|
setDone(true);
|
|
}
|
|
}}
|
|
>
|
|
{done && (
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="#059669"
|
|
strokeWidth="2.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<polyline points="20 6 9 17 4 12" />
|
|
</svg>
|
|
)}
|
|
{done ? doneLabel : (child ?? label)}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
// --- Renderers (type-checked against schema definitions) ---
|
|
|
|
const demonstrationCatalogRenderers: CatalogRenderers<DemonstrationCatalogDefinitions> =
|
|
{
|
|
Title: ({ props }) => {
|
|
const Tag = (
|
|
props.level === "h1" ? "h1" : props.level === "h3" ? "h3" : "h2"
|
|
) as keyof React.JSX.IntrinsicElements;
|
|
const sizes: Record<string, string> = {
|
|
h1: "1.75rem",
|
|
h2: "1.25rem",
|
|
h3: "1rem",
|
|
};
|
|
return (
|
|
<Tag
|
|
style={{
|
|
margin: 0,
|
|
fontWeight: 600,
|
|
fontSize: sizes[props.level ?? "h2"],
|
|
color: c.cardFg,
|
|
letterSpacing: "-0.01em",
|
|
}}
|
|
>
|
|
{props.text}
|
|
</Tag>
|
|
);
|
|
},
|
|
|
|
Row: ({ props, children }) => {
|
|
const justifyMap: Record<string, string> = {
|
|
start: "flex-start",
|
|
center: "center",
|
|
end: "flex-end",
|
|
spaceBetween: "space-between",
|
|
};
|
|
const items = Array.isArray(props.children) ? props.children : [];
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
gap: `${props.gap ?? 16}px`,
|
|
alignItems: props.align ?? "stretch",
|
|
justifyContent:
|
|
justifyMap[props.justify ?? "start"] ?? "flex-start",
|
|
flexWrap: "wrap",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
{items.map((item: unknown, i: number) => {
|
|
if (typeof item === "string")
|
|
return (
|
|
<div
|
|
key={`${item}-${i}`}
|
|
style={{ flex: "1 1 0", minWidth: 0 }}
|
|
>
|
|
{children(item)}
|
|
</div>
|
|
);
|
|
if (
|
|
item &&
|
|
typeof item === "object" &&
|
|
"id" in (item as Record<string, unknown>)
|
|
)
|
|
return (
|
|
<div
|
|
key={`${(item as Record<string, unknown>).id}-${i}`}
|
|
style={{ flex: "1 1 0", minWidth: 0 }}
|
|
>
|
|
{(
|
|
children as (
|
|
id: string,
|
|
basePath?: string,
|
|
) => React.ReactNode
|
|
)(
|
|
(item as Record<string, unknown>).id,
|
|
(item as Record<string, unknown>).basePath,
|
|
)}
|
|
</div>
|
|
);
|
|
return null;
|
|
})}
|
|
</div>
|
|
);
|
|
},
|
|
|
|
Column: ({ props, children }) => {
|
|
const items = Array.isArray(props.children) ? props.children : [];
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: `${props.gap ?? 12}px`,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
{items.map((item: unknown, i: number) => {
|
|
if (typeof item === "string")
|
|
return (
|
|
<React.Fragment key={`${item}-${i}`}>
|
|
{children(item)}
|
|
</React.Fragment>
|
|
);
|
|
if (
|
|
item &&
|
|
typeof item === "object" &&
|
|
"id" in (item as Record<string, unknown>)
|
|
)
|
|
return (
|
|
<React.Fragment
|
|
key={`${(item as Record<string, unknown>).id}-${i}`}
|
|
>
|
|
{(
|
|
children as (
|
|
id: string,
|
|
basePath?: string,
|
|
) => React.ReactNode
|
|
)(
|
|
(item as Record<string, unknown>).id,
|
|
(item as Record<string, unknown>).basePath,
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
return null;
|
|
})}
|
|
</div>
|
|
);
|
|
},
|
|
|
|
DashboardCard: ({ props, children }) => (
|
|
<div
|
|
style={{
|
|
background: c.card,
|
|
borderRadius: "12px",
|
|
border: `1px solid ${c.border}`,
|
|
padding: "20px",
|
|
boxShadow: c.shadow,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "12px",
|
|
}}
|
|
>
|
|
<div>
|
|
<div style={{ fontWeight: 600, fontSize: "0.9rem", color: c.cardFg }}>
|
|
{props.title}
|
|
</div>
|
|
{props.subtitle && (
|
|
<div
|
|
style={{
|
|
fontSize: "0.75rem",
|
|
color: c.muted,
|
|
marginTop: "2px",
|
|
}}
|
|
>
|
|
{props.subtitle}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{props.child && children(props.child)}
|
|
</div>
|
|
),
|
|
|
|
Metric: ({ props }) => {
|
|
const trendColors: Record<string, string> = {
|
|
up: "#059669",
|
|
down: "#dc2626",
|
|
neutral: c.muted,
|
|
};
|
|
const trendIcons: Record<string, string> = {
|
|
up: "\u2191",
|
|
down: "\u2193",
|
|
neutral: "\u2192",
|
|
};
|
|
return (
|
|
<div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
|
|
<span
|
|
style={{
|
|
fontSize: "0.75rem",
|
|
color: c.muted,
|
|
fontWeight: 500,
|
|
textTransform: "uppercase",
|
|
letterSpacing: "0.05em",
|
|
}}
|
|
>
|
|
{props.label}
|
|
</span>
|
|
<div style={{ display: "flex", alignItems: "baseline", gap: "8px" }}>
|
|
<span
|
|
style={{
|
|
fontSize: "1.5rem",
|
|
fontWeight: 700,
|
|
color: c.cardFg,
|
|
letterSpacing: "-0.02em",
|
|
}}
|
|
>
|
|
{props.value}
|
|
</span>
|
|
{props.trend && props.trendValue && (
|
|
<span
|
|
style={{
|
|
fontSize: "0.8rem",
|
|
fontWeight: 500,
|
|
color: trendColors[props.trend] ?? c.muted,
|
|
}}
|
|
>
|
|
{trendIcons[props.trend]} {props.trendValue}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
|
|
PieChart: ({ props }) => {
|
|
const COLORS = [
|
|
"#3b82f6",
|
|
"#8b5cf6",
|
|
"#ec4899",
|
|
"#f59e0b",
|
|
"#10b981",
|
|
"#6366f1",
|
|
];
|
|
const data = props.data ?? [];
|
|
return (
|
|
<div style={{ width: "100%", height: 200 }}>
|
|
<ResponsiveContainer>
|
|
<RechartsPie>
|
|
<Pie
|
|
data={data}
|
|
dataKey="value"
|
|
nameKey="label"
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={props.innerRadius ?? 40}
|
|
outerRadius={80}
|
|
paddingAngle={2}
|
|
>
|
|
{data.map((entry: Record<string, unknown>, i: number) => (
|
|
<Cell
|
|
key={i}
|
|
fill={(entry.color as string) ?? COLORS[i % COLORS.length]}
|
|
/>
|
|
))}
|
|
</Pie>
|
|
<Tooltip />
|
|
</RechartsPie>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
},
|
|
|
|
BarChart: ({ props }) => {
|
|
const data = props.data ?? [];
|
|
return (
|
|
<div style={{ width: "100%", height: 200 }}>
|
|
<ResponsiveContainer>
|
|
<RechartsBar data={data}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke={c.divider} />
|
|
<XAxis dataKey="label" tick={{ fontSize: 11, fill: c.muted }} />
|
|
<YAxis tick={{ fontSize: 11, fill: c.muted }} />
|
|
<Tooltip />
|
|
<Bar
|
|
dataKey="value"
|
|
fill={props.color ?? "#3b82f6"}
|
|
radius={[4, 4, 0, 0]}
|
|
/>
|
|
</RechartsBar>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
},
|
|
|
|
Badge: ({ props }) => {
|
|
const variants: Record<string, { bg: string; color: string }> = {
|
|
success: { bg: "#dcfce7", color: "#166534" },
|
|
warning: { bg: "#fef3c7", color: "#92400e" },
|
|
error: { bg: "#fee2e2", color: "#991b1b" },
|
|
info: { bg: "#dbeafe", color: "#1e40af" },
|
|
neutral: { bg: "var(--muted)", color: c.cardFg },
|
|
};
|
|
const v = variants[props.variant ?? "neutral"] ?? variants.neutral;
|
|
return (
|
|
<span
|
|
style={{
|
|
display: "inline-block",
|
|
padding: "2px 8px",
|
|
borderRadius: "9999px",
|
|
fontSize: "0.7rem",
|
|
fontWeight: 500,
|
|
background: v.bg,
|
|
color: v.color,
|
|
}}
|
|
>
|
|
{props.text}
|
|
</span>
|
|
);
|
|
},
|
|
|
|
DataTable: ({ props }) => {
|
|
const cols = props.columns ?? [];
|
|
const rows = props.rows ?? [];
|
|
return (
|
|
<div style={{ overflowX: "auto", width: "100%" }}>
|
|
<table
|
|
style={{
|
|
width: "100%",
|
|
borderCollapse: "collapse",
|
|
fontSize: "0.8rem",
|
|
}}
|
|
>
|
|
<thead>
|
|
<tr>
|
|
{cols.map((col: Record<string, unknown>) => (
|
|
<th
|
|
key={col.key as string}
|
|
style={{
|
|
textAlign: "left",
|
|
padding: "8px 12px",
|
|
borderBottom: `2px solid ${c.border}`,
|
|
color: c.muted,
|
|
fontWeight: 600,
|
|
fontSize: "0.7rem",
|
|
textTransform: "uppercase",
|
|
letterSpacing: "0.05em",
|
|
}}
|
|
>
|
|
{col.label as string}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map((row: Record<string, unknown>, i: number) => (
|
|
<tr key={i} style={{ borderBottom: `1px solid ${c.divider}` }}>
|
|
{cols.map((col: Record<string, unknown>) => (
|
|
<td
|
|
key={col.key as string}
|
|
style={{ padding: "8px 12px", color: c.cardFg }}
|
|
>
|
|
{String(row[col.key as string] ?? "")}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
},
|
|
|
|
Button: ({ props, children }) => {
|
|
return (
|
|
<ActionButton label="Click" doneLabel="Done" action={props.action}>
|
|
{props.child ? children(props.child) : null}
|
|
</ActionButton>
|
|
);
|
|
},
|
|
|
|
FlightCard: ({ props: rawProps }) => {
|
|
// The binder resolves path bindings to strings at runtime.
|
|
const props = rawProps as Record<string, unknown>;
|
|
const statusColors: Record<string, string> = {
|
|
"On Time": "#22c55e",
|
|
Delayed: "#eab308",
|
|
Cancelled: "#ef4444",
|
|
};
|
|
const dotColor =
|
|
(props.statusColor as string) ??
|
|
statusColors[props.status as string] ??
|
|
"#22c55e";
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
border: `1px solid ${c.border}`,
|
|
borderRadius: "16px",
|
|
padding: "20px",
|
|
background: c.card,
|
|
color: c.cardFg,
|
|
minWidth: 260,
|
|
maxWidth: 340,
|
|
flex: "1 1 260px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "12px",
|
|
boxShadow: c.shadow,
|
|
}}
|
|
>
|
|
{/* Header: airline + price */}
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
|
|
<img
|
|
src={props.airlineLogo as string}
|
|
alt={props.airline as string}
|
|
style={{
|
|
width: 28,
|
|
height: 28,
|
|
borderRadius: "50%",
|
|
objectFit: "contain",
|
|
}}
|
|
/>
|
|
<span style={{ fontWeight: 600, fontSize: "0.95rem" }}>
|
|
{props.airline as string}
|
|
</span>
|
|
</div>
|
|
<span style={{ fontWeight: 700, fontSize: "1.15rem" }}>
|
|
{props.price as string}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Meta */}
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
fontSize: "0.8rem",
|
|
color: c.muted,
|
|
}}
|
|
>
|
|
<span>{props.flightNumber as string}</span>
|
|
<span>{props.date as string}</span>
|
|
</div>
|
|
|
|
<hr
|
|
style={{
|
|
border: "none",
|
|
borderTop: `1px solid ${c.divider}`,
|
|
margin: 0,
|
|
}}
|
|
/>
|
|
|
|
{/* Times */}
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<span style={{ fontWeight: 700, fontSize: "1.1rem" }}>
|
|
{props.departureTime as string}
|
|
</span>
|
|
<span style={{ fontSize: "0.75rem", color: c.muted }}>
|
|
{props.duration as string}
|
|
</span>
|
|
<span style={{ fontWeight: 700, fontSize: "1.1rem" }}>
|
|
{props.arrivalTime as string}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Route */}
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
fontSize: "0.95rem",
|
|
fontWeight: 600,
|
|
}}
|
|
>
|
|
<span>{props.origin as string}</span>
|
|
<span style={{ color: c.muted }}>{"\u2192"}</span>
|
|
<span>{props.destination as string}</span>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
marginTop: "auto",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "12px",
|
|
}}
|
|
>
|
|
<hr
|
|
style={{
|
|
border: "none",
|
|
borderTop: `1px solid ${c.divider}`,
|
|
margin: 0,
|
|
}}
|
|
/>
|
|
|
|
{/* Status */}
|
|
<div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
|
|
<span
|
|
style={{
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: "50%",
|
|
background: dotColor,
|
|
display: "inline-block",
|
|
}}
|
|
/>
|
|
<span style={{ fontSize: "0.8rem", color: c.muted }}>
|
|
{props.status as string}
|
|
</span>
|
|
</div>
|
|
|
|
<ActionButton
|
|
label="Select"
|
|
doneLabel="Selected"
|
|
action={props.action}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
// --- Assembled Catalog ---
|
|
|
|
export const demonstrationCatalog = createCatalog(
|
|
demonstrationCatalogDefinitions,
|
|
demonstrationCatalogRenderers,
|
|
{
|
|
catalogId: "copilotkit://app-dashboard-catalog",
|
|
},
|
|
);
|