@actionexec/dashboards 0.1.0

package/README.md

@@ -0,0 +1,51 @@
+# @actionexec/dashboards
+
+Biblioteca React para consumo de dashboards servidos pela API `action-data`.
+Exporta o componente top-level `<Dashboard>`, renderizadores de widgets individuais,
+tipos e utilitarios de paleta.
+
+## Instalacao
+
+```bash
+npm install @actionexec/dashboards
+```
+
+Peer dependencies: `react`, `react-dom`, `recharts`, `react-datepicker`.
+
+## Uso basico
+
+```tsx
+import { Dashboard } from '@actionexec/dashboards';
+import '@actionexec/dashboards/styles.css';
+
+function App() {
+  return (
+    <Dashboard
+      apiUrl="https://action.example.com/api"
+      token="token-de-acesso"
+    />
+  );
+}
+```
+
+## Fetcher customizado (auth proprio)
+
+```tsx
+import { Dashboard, type DashboardFetcher } from '@actionexec/dashboards';
+
+const fetcher: DashboardFetcher = {
+  layout: async () => (await myClient.get('/dashboards/layout')).data,
+  render: async (params) => (await myClient.get('/dashboards/render', { params })).data,
+};
+
+<Dashboard fetcher={fetcher} />
+```
+
+## API publica
+
+- `<Dashboard>` — orquestrador completo (token + fetcher)
+- `<WidgetRenderer>` — dispatch por tipo (consumo avancado)
+- Widgets individuais: `KPIWidget`, `GaugeWidget`, `ChartWidget`, `FilterWidget`, `VariableWidget`, `ColorPaletteWidget`
+- `<ColorPaletteSelector>` — seletor de paletas (presets + custom)
+- Utils: `getPaletteCssVars`, `getSeries`, `ensurePaletteShape`, `PALETTES`
+- Tipos: `WidgetDefinition`, `LayoutConfig`, `RenderResponse`, configs por tipo, etc.

package/dist/Dashboard.d.ts

@@ -0,0 +1,20 @@
+import type { DashboardFetcher } from './api/fetcher';
+type AuthProps = {
+    apiUrl: string;
+    token: string;
+    fetcher?: never;
+} | {
+    fetcher: DashboardFetcher;
+    apiUrl?: never;
+    token?: never;
+};
+type DashboardProps = AuthProps & {
+    /** Altura de cada linha do grid em pixels. Default 40. */
+    rowHeight?: number;
+    /** Gap entre widgets em pixels. Default 6. */
+    gridGap?: number;
+    /** Renderer customizado para cada widget (avancado). */
+    className?: string;
+};
+export declare function Dashboard(props: DashboardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/api/fetcher.d.ts

@@ -0,0 +1,25 @@
+import type { LayoutResponse, RenderResponse } from '../types';
+export interface DashboardFetcher {
+    /** Retorna estrutura do dashboard (widgets, paleta, grid, date bounds). */
+    layout(): Promise<LayoutResponse>;
+    /** Retorna dados computados aplicando filtros/variaveis via query params. */
+    render(params?: Record<string, string>): Promise<RenderResponse>;
+}
+export declare class ApiError extends Error {
+    status?: number | undefined;
+    payload?: unknown | undefined;
+    constructor(message: string, status?: number | undefined, payload?: unknown | undefined);
+}
+interface TokenFetcherOptions {
+    /** URL base da API (ex: "https://action.example.com/api"). */
+    apiUrl: string;
+    /** Token de acesso do dashboard (Bearer). */
+    token: string;
+    /** Fetch customizado (default: globalThis.fetch). */
+    fetch?: typeof fetch;
+    /** Prefixo dos endpoints (default: "/external/dashboards"). */
+    endpointPrefix?: string;
+}
+/** Cria um fetcher baseado em token Bearer, consumindo /external/dashboards. */
+export declare function createTokenFetcher(options: TokenFetcherOptions): DashboardFetcher;
+export {};

package/dist/components/ColorPaletteSelector.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    selected?: string[];
+    onSelect: (colors: string[]) => void;
+    customMode?: boolean;
+    onCustomModeChange?: (custom: boolean) => void;
+    disabled?: boolean;
+}
+export declare function ColorPaletteSelector({ selected, onSelect, customMode, onCustomModeChange, disabled, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DashboardDatePicker.d.ts

@@ -0,0 +1,18 @@
+import 'react-datepicker/dist/react-datepicker.css';
+export declare function isoToDate(iso?: string | null): Date | null;
+export declare function dateToIso(date?: Date | null): string;
+interface Props {
+    value: string;
+    onChange: (iso: string) => void;
+    minIso?: string | null;
+    maxIso?: string | null;
+    placeholder?: string;
+    selectsStart?: boolean;
+    selectsEnd?: boolean;
+    startIso?: string | null;
+    endIso?: string | null;
+    className?: string;
+    disabled?: boolean;
+}
+export declare function DashboardDatePicker({ value, onChange, minIso, maxIso, placeholder, selectsStart, selectsEnd, startIso, endIso, className, disabled, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/hooks/useDashboardData.d.ts

@@ -0,0 +1,18 @@
+import type { DashboardFetcher } from '../api/fetcher';
+import type { LayoutResponse, RenderResponse } from '../types';
+export interface UseDashboardDataResult {
+    layout: LayoutResponse | null;
+    renderData: RenderResponse | null;
+    loading: boolean;
+    error: string | null;
+    /** Filtros selecionados (formato string por widget — date_range como "start|end"). */
+    filters: Record<string, string>;
+    /** Overrides de variaveis por widget. */
+    variables: Record<string, number>;
+    /** Paleta efetiva (override local substitui a do layout). */
+    palette: string[];
+    setFilter(widgetId: string, value: string): void;
+    setVariable(widgetId: string, value: number): void;
+    setPalette(colors: string[]): void;
+}
+export declare function useDashboardData(fetcher: DashboardFetcher): UseDashboardDataResult;

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+import './styles/index.css';
+export { Dashboard } from './Dashboard';
+export { WidgetRenderer } from './widgets/WidgetRenderer';
+export { KPIWidget } from './widgets/KPIWidget';
+export { GaugeWidget } from './widgets/GaugeWidget';
+export { ChartWidget } from './widgets/ChartWidget';
+export { FilterWidget } from './widgets/FilterWidget';
+export { VariableWidget } from './widgets/VariableWidget';
+export { ColorPaletteWidget } from './widgets/ColorPaletteWidget';
+export { ColorPaletteSelector } from './components/ColorPaletteSelector';
+export { DashboardDatePicker, isoToDate, dateToIso } from './components/DashboardDatePicker';
+export { useDashboardData } from './hooks/useDashboardData';
+export type { UseDashboardDataResult } from './hooks/useDashboardData';
+export { createTokenFetcher, ApiError } from './api/fetcher';
+export type { DashboardFetcher } from './api/fetcher';
+export { PALETTES, DEFAULT_PALETTE as DEFAULT_PALETTE_KEY, DEFAULT_PALETTE_COLORS, SLOT_INDEX, SLOT_LABELS, SERIES_COUNT, TOTAL_SLOTS, ensurePaletteShape, getSeries, getPaletteCssVars, } from './palettes';
+export type { Palette, PaletteKey } from './palettes';
+export { MONTH_NAMES_SHORT, MONTH_NAMES_FULL, getFullYearRange, getMonthRange, getWeekRange, getISOWeek, getWeeksInMonth, getMonthWeeks, parseYearFromRange, parseMonthFromRange, parseWeekFromRange, parseMonthWeekFromRange, getYearRange, } from './utils/date';
+export type { MonthWeek } from './utils/date';
+export type { AggregationType, ComparisonType, FilterType, WidgetType, DataWidgetType, ControlWidgetType, ChartType, FormatType, DateFilterMode, Granularity, FilterDefinition, TargetDefinition, GridPosition, ComparisonConfig, AggregationStep, ColumnExpressionTerm, KpiOperand, KpiTerm, ChartSeriesConfig, ChartAxisConfig, KpiCardConfig, GaugeConfig, ChartConfig, FilterConfig, VariableConfig, PaletteConfig, AnyWidgetConfig, WidgetDefinition, WidgetConfigOf, DashboardLayout, FilterValuesResponse, RenderResponse, LayoutResponse, } from './types';
+export { DEFAULT_PALETTE, DEFAULT_GRID_COLUMNS, DEFAULT_GRID_ROWS, EMPTY_LAYOUT, WIDGET_TYPE_LABELS, DATA_WIDGET_TYPES, CONTROL_WIDGET_TYPES, CONTROL_WIDGET_SET, AGGREGATION_LABELS, FORMAT_LABELS, NUMERIC_FORMAT_OPTIONS, COMPARISON_LABELS, CHART_TYPE_LABELS, FILTER_TYPE_LABELS, DEFAULT_GRID, DEFAULT_CONFIG, } from './types';