@gaia-ai/addon-gaia-ui 0.15.2 → 0.16.1

package/dist/src/Entity/ticket/Component/react-statistics.js

@@ -1,44 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-import { useTerminalDimensions } from '@opentui/react';
-import { Badge } from '../../../Vendor/termcn/ui/badge.js';
-import { BarChart } from '../../../Vendor/termcn/ui/bar-chart.js';
-import { Card } from '../../../Vendor/termcn/ui/card.js';
-import { Gauge } from '../../../Vendor/termcn/ui/gauge.js';
-import { LineChart } from '../../../Vendor/termcn/ui/line-chart.js';
-import { ProgressBar } from '../../../Vendor/termcn/ui/progress-bar.js';
-import { Sparkline } from '../../../Vendor/termcn/ui/sparkline.js';
-export const STATISTIC_EXAMPLES = [
-    {
-        name: 'Steady week',
-        states: [12, 7, 4, 26],
-        trend: [3, 5, 4, 8, 6, 9, 11],
-        progress: 65,
-        budget: 42,
-    },
-    {
-        name: 'Busy week',
-        states: [5, 14, 8, 42],
-        trend: [5, 8, 6, 13, 9, 15, 18],
-        progress: 90,
-        budget: 78,
-    },
-    { name: 'Empty project', states: [], trend: [], progress: 0, budget: 0 },
-];
-const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
-const LABELS = ['Ready', 'Coding', 'Review', 'Done'];
-const COLORS = ['#60a5fa', '#a78bfa', '#fbbf24', '#34d399'];
-export function ReactStatistics({ scenario }) {
-    const { width } = useTerminalDimensions();
+import { BoxRenderable, h } from '@opentui/core';
+import { Badge } from '../../../Component/badge/index.js';
+import { FOREGROUND, paragraphNode, plainRun } from '../../../lib/vnode.js';
+import { StatisticsFigures } from '../../../Statistics/figures.js';
+import { STATISTIC_EXAMPLES } from './demo-statistics.js';
+export { STATISTIC_EXAMPLES } from './demo-statistics.js';
+/**
+ * The demo's chart area: a labelled local scenario painted through the same
+ * `StatisticsFigures` the production Stats screens use.
+ */
+export function DemoStatistics({ id, scenario, width, onResize, }) {
     const example = STATISTIC_EXAMPLES[scenario] ?? STATISTIC_EXAMPLES[0];
-    const wide = width >= 100;
-    const panelWidth = Math.max(24, Math.min(70, Math.floor((width - 12) / (wide ? 2 : 1))));
-    const chartWidth = Math.max(18, panelWidth - 6);
-    return (_jsxs("box", { flexDirection: "column", gap: 1, children: [_jsxs("box", { flexDirection: "row", gap: 2, children: [_jsx(Badge, { variant: "info", bordered: false, children: "Example data" }), _jsxs("text", { children: [example.name, " \u00B7 n: next scenario"] })] }), _jsxs("box", { flexDirection: wide ? 'row' : 'column', gap: 1, children: [_jsx(Card, { title: "Tickets by state", width: panelWidth, children: _jsx(BarChart, { data: example.states.map((value, index) => ({
-                                label: LABELS[index] ?? '',
-                                value,
-                                color: COLORS[index] ?? '#60a5fa',
-                            })), width: chartWidth }) }), _jsx(Card, { title: "Completed per day", subtitle: "Last 7 days \u00B7 example counts", width: panelWidth, children: _jsx(LineChart, { data: example.trend.map((value, index) => ({
-                                value,
-                                label: DAYS[index] ?? '',
-                            })), width: chartWidth, height: 6, color: "#34d399" }) })] }), _jsxs("box", { flexDirection: wide ? 'row' : 'column', gap: 1, children: [_jsxs(Card, { title: "Sprint progress", width: panelWidth, children: [_jsx(ProgressBar, { value: example.progress, width: Math.max(8, chartWidth - 6), color: "#60a5fa" }), _jsx(Sparkline, { data: [...example.trend], width: Math.max(8, chartWidth - 10), label: "Activity", color: "#34d399" })] }), _jsx(Card, { title: "Budget used", width: panelWidth, children: _jsx(Gauge, { value: example.budget, size: "md", color: "#fbbf24" }) })] })] }));
+    return h(BoxRenderable, { id, flexDirection: 'column', gap: 1 }, h(BoxRenderable, { id: `${id}-label`, flexDirection: 'row', gap: 2 }, Badge({ id: `${id}-badge`, label: 'Example data', variant: 'info' }), paragraphNode({
+        id: `${id}-scenario`,
+        runs: [plainRun(`${example?.name ?? ''} · n: next scenario`)],
+        fg: FOREGROUND,
+    })), StatisticsFigures({
+        id: `${id}-grid`,
+        groups: example?.groups ?? [],
+        width,
+        onResize,
+    }));
 }

package/dist/src/Entity/ticket/Component/ticket-content/index.d.ts

@@ -1,6 +1,21 @@
-import { type ReactNode } from 'react';
-import { type TicketContentModel, type TicketContentTab, type TicketProperty } from './model.js';
+import { type VNode } from '@opentui/core';
+import { type TicketContentEntry, type TicketContentModel, type TicketContentTab, type TicketProperty, type TicketSidebar } from './model.js';
+export declare const SIDEBAR_TABS: readonly [{
+    readonly id: "details";
+    readonly label: "Details";
+}, {
+    readonly id: "stats";
+    readonly label: "Stats";
+}, {
+    readonly id: "related";
+    readonly label: "Related";
+}];
+export type SidebarTabId = (typeof SIDEBAR_TABS)[number]['id'];
+/** The pane a sidebar opens on: Stats once the ticket is done, else Details. */
+export declare const defaultSidebarTab: (sidebar: TicketSidebar) => SidebarTabId;
 export interface TicketContentProps {
+    /** The owner every node id derives from. */
+    readonly id: string;
     readonly model: TicketContentModel;
     readonly tab: TicketContentTab;
     readonly selectedKey?: string;
@@ -8,5 +23,15 @@ export interface TicketContentProps {
     readonly select: (key: string) => void;
     readonly toggle: (key: string) => void;
     readonly activateProperty?: (item: TicketProperty) => void;
+    /** Terminal width — the Overview's side-by-side breakpoint reads it. */
+    readonly terminalColumns: number;
+    /** The visit's sidebar pane; absent means {@link defaultSidebarTab}. */
+    readonly sidebarTab?: SidebarTabId;
+    readonly onSidebarTab: (tab: SidebarTabId) => void;
+    /** The Planning document tab last chosen in this visit. */
+    readonly documentKey?: string;
+    readonly onDocumentTab: (key: string) => void;
 }
-export declare function TicketContent({ model, tab, selectedKey, expandedKeys, select, toggle, activateProperty, }: TicketContentProps): ReactNode;
+/** The Planning pane's active document: the selection, the visit's tab, or Description. */
+export declare const activeDocumentKey: (documents: readonly TicketContentEntry[], selectedKey: string | undefined, documentKey: string | undefined) => string | undefined;
+export declare function TicketContent(props: TicketContentProps): VNode;