goobs-frontend
Version:
A comprehensive React-based libary for building modern web applications
75 lines • 3.89 kB
TypeScript
import { default as React } from 'react';
import { MetricCardData } from '../types';
/**
* Grouped-metrics shape — each entry renders as a labelled row inside the
* accordion panel. Use when a route has multiple thematic groups of cards
* (e.g. automations: Templates / By Target / Step Types). Caller passes the
* structure; the accordion renders the group label + the cards row for each.
*/
export interface MetricsGroup {
/** Section label shown above this group's cards (uppercase, small, dim). */
label: string;
/** Cards rendered inside this group. */
cards: MetricCardData[];
}
export interface MetricsAccordionProps {
/** Cards (or any composition) shown inside the panel when expanded. Use
* this when the caller wants full control over the inner layout. Mutually
* exclusive with `metrics`. */
children?: React.ReactNode;
/**
* Data-driven mode. Accepts either:
* - flat: `MetricCardData[]` — one responsive row of cards. DataGrid's shape.
* - grouped: `MetricsGroup[]` — multiple labelled rows. Workspace dashboards
* with thematic sections (Templates / Status / By Target / etc) use this.
* Mutually exclusive with `children`.
*/
metrics?: MetricCardData[] | MetricsGroup[];
/** Toggle label. Default `"Metrics Summary"` matches the historical text
* ThothOS workspaces used, so existing `getByText(/Metrics Summary/i)`
* test selectors stay stable across the migration. DataGrid passes
* `"Metrics"` to match its prior `MetricSection` label. */
title?: string;
/** Default-collapsed mirrors ThothOS's prior per-workspace UX. Set to
* true if a route's metrics are load-bearing and should render visible
* on first paint. Honored in both children-mode AND `metrics`-array
* mode (when an accordion is rendered). */
initiallyOpen?: boolean;
/** Force the accordion to render even in `metrics`-array mode. Without
* this, `metrics` mode renders the cards directly on desktop. */
collapsible?: boolean;
/** When in `metrics`-array mode AND not already forced collapsible,
* auto-render in the accordion when viewport width is ≤ 1023px (tablet
* / mobile). Preserves the prior `MetricSection` behavior. */
responsiveCollapseOnTablet?: boolean;
/**
* Stable identifier surfaced as `data-metrics-accordion-field` so a
* page with several accordions (rare but possible — e.g. workspace
* metrics + per-tab metrics) can be disambiguated by tests.
*/
dataField?: string;
/** Style configuration. `theme: 'sacred'` switches to the dark/gold
* palette via a CSS-module class; `color` overrides the accent. */
styles?: {
theme?: string;
color?: string;
};
}
/**
* Canonical collapsible shell for KPI / metric cards, replacing the older
* per-workspace accordions and DataGrid's `MetricSection`. Two mutually
* exclusive content modes: `children` (caller-composed layout — always
* rendered inside the accordion shell) and `metrics` (data-driven — a flat
* `MetricCardData[]` row or labelled `MetricsGroup[]` rows of `MetricCard`s).
* In `metrics` mode the accordion shell renders when `collapsible` (default
* `true`) or, with `responsiveCollapseOnTablet`, when the viewport is
* narrower than 1024px — otherwise the cards render bare and expanded.
* Default state is collapsed (`initiallyOpen: false`) and the panel is only
* mounted while open, so tests must click the toggle before asserting on
* panel content. Test selectors: `data-metrics-accordion` + `data-state` on
* the wrapper and toggle, plus `data-testid="metrics-accordion-toggle"` /
* `"metrics-accordion-panel"`.
*/
export declare const MetricsAccordion: React.FC<MetricsAccordionProps>;
export default MetricsAccordion;
//# sourceMappingURL=index.d.ts.map