@asteby/metacore-runtime-react 18.16.1 → 18.17.1

package/src/widgets/widget-renderer.tsx

@@ -0,0 +1,200 @@
+// Per-widget dispatcher: maps a spec.kind to its built-in renderer (or a
+// federated <Slot> for kind:"custom"), wrapped in an error boundary so a single
+// broken widget renders its own error card instead of tumbling the grid.
+
+import * as React from 'react'
+import { Slot } from '../slot'
+import type { DashboardWidgetSpec, WidgetData, WidgetSize } from '../dashboard-types'
+import { WidgetCard, WidgetError } from './widget-card'
+import {
+    StatWidget,
+    BarWidget,
+    LineWidget,
+    AreaWidget,
+    PieWidget,
+    DonutWidget,
+    ListWidget,
+    ProgressWidget,
+    type WidgetRenderProps,
+} from './renderers'
+
+/** Maps a widget size to its column span in the 4-col grid. */
+export const SIZE_SPAN: Record<WidgetSize, number> = {
+    sm: 1,
+    md: 2,
+    lg: 3,
+    full: 4,
+}
+
+/** Tailwind col-span class per size (static → scanned in this package build).
+ * Grid is 2 cols on mobile, 4 on lg: sm=quarter, md=half, lg=¾, full=row. */
+export const SIZE_CLASS: Record<WidgetSize, string> = {
+    sm: 'col-span-1 lg:col-span-1',
+    md: 'col-span-2 lg:col-span-2',
+    lg: 'col-span-2 lg:col-span-3',
+    full: 'col-span-2 lg:col-span-4',
+}
+
+/** Kinds that render a chart/list and want extra vertical room (2 grid rows).
+ * Stat/progress stay a single compact row so KPIs read like KPIs, not slabs. */
+const TALL_KINDS = new Set(['bar', 'line', 'area', 'pie', 'donut', 'list', 'custom'])
+
+/** Default footprint when a spec omits `size`: charts go half-width, stats a
+ * quarter — so a tablero of mixed widgets packs densely without manual sizing. */
+export function defaultSize(spec: DashboardWidgetSpec): WidgetSize {
+    if (spec.size) return spec.size
+    return TALL_KINDS.has(spec.kind) ? 'md' : 'sm'
+}
+
+/** Combined col + row span for a widget's grid cell. Row-span drives the
+ * height contrast (chart=2, stat=1) that makes the layout feel designed. */
+export function spanClass(spec: DashboardWidgetSpec): string {
+    const col = SIZE_CLASS[defaultSize(spec)]
+    return `${col} ${TALL_KINDS.has(spec.kind) ? 'row-span-2' : 'row-span-1'}`
+}
+
+const RENDERERS: Record<
+    string,
+    (p: WidgetRenderProps) => React.ReactElement
+> = {
+    stat: StatWidget,
+    bar: BarWidget,
+    line: LineWidget,
+    area: AreaWidget,
+    pie: PieWidget,
+    donut: DonutWidget,
+    list: ListWidget,
+    progress: ProgressWidget,
+}
+
+interface BoundaryProps {
+    spec: DashboardWidgetSpec
+    message: string
+    children: React.ReactNode
+}
+interface BoundaryState {
+    error: boolean
+}
+
+/** Isolated boundary: a throwing widget renders its own error card. */
+class WidgetErrorBoundary extends React.Component<BoundaryProps, BoundaryState> {
+    state: BoundaryState = { error: false }
+    static getDerivedStateFromError(): BoundaryState {
+        return { error: true }
+    }
+    render() {
+        if (this.state.error) {
+            return (
+                <WidgetCard
+                    data-testid={`widget-${this.props.spec.key}`}
+                    title={this.props.spec.title}
+                    subtitle={this.props.spec.subtitle}
+                    icon={this.props.spec.icon}
+                    accent={this.props.spec.accent}
+                >
+                    <WidgetError message={this.props.message} />
+                </WidgetCard>
+            )
+        }
+        return this.props.children
+    }
+}
+
+export interface WidgetRendererProps {
+    spec: DashboardWidgetSpec
+    data?: WidgetData
+    locale?: string
+    currency?: string
+    /** Translated empty fallback for this widget. */
+    emptyText: string
+    /** Translated error message for this widget. */
+    errorText: string
+}
+
+/**
+ * Renders one widget. `kind:"custom"` defers to the federated slot
+ * (`spec.slot ?? 'dashboard.widgets'`) inside the same card chrome so it
+ * combines with the declarative widgets.
+ */
+export function WidgetRenderer({
+    spec,
+    data,
+    locale,
+    currency,
+    emptyText,
+    errorText,
+}: WidgetRendererProps) {
+    let body: React.ReactNode
+    if (spec.kind === 'custom') {
+        body = (
+            <WidgetCard
+                data-testid={`widget-${spec.key}`}
+                title={spec.title}
+                subtitle={spec.subtitle}
+                icon={spec.icon}
+                accent={spec.accent}
+            >
+                <Slot
+                    name={spec.slot ?? 'dashboard.widgets'}
+                    props={{ spec, data, locale, currency }}
+                    fallback={
+                        <div className="flex flex-1 items-center justify-center py-6 text-xs text-muted-foreground">
+                            {emptyText}
+                        </div>
+                    }
+                />
+            </WidgetCard>
+        )
+    } else {
+        const Renderer = RENDERERS[spec.kind]
+        body = Renderer ? (
+            <Renderer
+                spec={spec}
+                data={data}
+                locale={locale}
+                currency={currency}
+                emptyText={emptyText}
+            />
+        ) : (
+            <WidgetCard
+                data-testid={`widget-${spec.key}`}
+                title={spec.title}
+                subtitle={spec.subtitle}
+                icon={spec.icon}
+                accent={spec.accent}
+            >
+                <WidgetError message={errorText} />
+            </WidgetCard>
+        )
+    }
+
+    return (
+        <WidgetErrorBoundary spec={spec} message={errorText}>
+            {body}
+        </WidgetErrorBoundary>
+    )
+}
+
+/** Skeleton placeholder shown per widget while data loads. */
+export function WidgetSkeleton({ spec }: { spec: DashboardWidgetSpec }) {
+    const isChart =
+        spec.kind !== 'stat' && spec.kind !== 'progress' && spec.kind !== 'custom'
+    return (
+        <WidgetCard
+            data-testid={`widget-skeleton-${spec.key}`}
+            title={spec.title}
+            subtitle={spec.subtitle}
+            icon={spec.icon}
+            accent={spec.accent}
+        >
+            {isChart ? (
+                <div className="h-[132px] w-full animate-pulse rounded-md bg-muted" />
+            ) : (
+                <div className="flex flex-col gap-2">
+                    <div className="h-8 w-2/3 animate-pulse rounded bg-muted" />
+                    <div className="h-2 w-full animate-pulse rounded bg-muted/60" />
+                </div>
+            )}
+        </WidgetCard>
+    )
+}