@multiplatform.one/components 6.6.0 → 7.0.0

package/dist/cjs/views/Dashboard.cjs

@@ -25,6 +25,9 @@ __export(Dashboard_exports, {
   ChartCard: () => ChartCard,
   Dashboard: () => Dashboard,
   KPICard: () => KPICard,
+  ListCard: () => ListCard,
+  ProgressCard: () => ProgressCard,
+  ShortcutCard: () => ShortcutCard,
   aggregateData: () => aggregateData,
   calculatePercentageChange: () => calculatePercentageChange,
   calculateTrend: () => calculateTrend,
@@ -34,11 +37,13 @@ module.exports = __toCommonJS(Dashboard_exports);
 var import_BarChart = require("../charts/BarChart.cjs");
 var import_LineChart = require("../charts/LineChart.cjs");
 var import_PieChart = require("../charts/PieChart.cjs");
+var import_Sparkline = require("../charts/Sparkline.cjs");
 var import_componentColors = require("../componentColors.cjs");
 var import_AsyncBoundary = require("../layouts/AsyncBoundary.cjs");
+var import_surfaces = require("../surfaces.cjs");
 var import_theme = require("@multiplatform.one/theme");
 var import_react = require("react");
-var import_react_i18next = require("react-i18next");
+var import_i18n = require("../shared/i18n.cjs");
 var import_tamagui = require("tamagui");
 var import_jsx_runtime = require("react/jsx-runtime");
 const SECTION_HEADING_TAGS = {
@@ -48,6 +53,92 @@ const SECTION_HEADING_TAGS = {
   5: import_tamagui.H5,
   6: import_tamagui.H6
 };
+function splitNestedControl(nested) {
+  const {
+    px,
+    hitSlop,
+    ...box
+  } = nested;
+  return {
+    px,
+    hitSlop,
+    box
+  };
+}
+function trendFill(color) {
+  if (color === import_componentColors.componentColors.semantic.success) return "$green4";
+  if (color === import_componentColors.componentColors.semantic.error) return "$red4";
+  return "$color4";
+}
+function useWidgetChrome(onPress) {
+  const resolved = (0, import_theme.useResolvedKnobs)();
+  const {
+    knobProps,
+    control
+  } = resolved;
+  const nested = splitNestedControl(knobProps.nestedControl);
+  const interactive = onPress ? {
+    cursor: "pointer",
+    hoverStyle: control.hoverKnobProps,
+    pressStyle: control.pressKnobProps,
+    focusVisibleStyle: control.focusVisibleKnobProps,
+    onPress,
+    role: "button"
+  } : void 0;
+  return {
+    knobProps,
+    control,
+    nested,
+    interactive
+  };
+}
+function NestedIconWell({
+  color,
+  box,
+  px,
+  radius,
+  children
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    ...box,
+    ...radius,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: color || "$accentBackground",
+    overflow: "hidden",
+    "data-nested-px": px,
+    children
+  });
+}
+function TrendPill({
+  symbol,
+  value,
+  color,
+  px,
+  radius,
+  label
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    height: px,
+    minHeight: px,
+    maxHeight: px,
+    paddingHorizontal: "$2",
+    alignItems: "center",
+    gap: "$1",
+    backgroundColor: trendFill(color),
+    ...radius,
+    "data-nested-px": px,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      ...label,
+      color,
+      children: symbol
+    }), value != null && value !== "" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      ...label,
+      color,
+      children: value
+    })]
+  });
+}
 function resolveTrendColor(trend, goodDirection) {
   if (!trend || trend === "neutral") return import_componentColors.componentColors.text.muted;
   if (!goodDirection || goodDirection === "none") return import_componentColors.componentColors.text.muted;
@@ -58,8 +149,17 @@ function KPICard({
   ...stackProps
 }) {
   const {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+    t
+  } = (0, import_i18n.useTranslation)();
+  const {
+    knobProps,
+    nested,
+    interactive
+  } = useWidgetChrome(config.onClick);
+  const {
+    px,
+    box
+  } = nested;
   const formatMetric = (0, import_react.useCallback)(num => {
     if (config.format === "currency") {
       return (0, import_theme.formatCurrency)(num, {
@@ -77,66 +177,54 @@ function KPICard({
     if (config.trend === "down") return "\u2193";
     return "\u2014";
   }, [config.trend]);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Card, {
-    size: knobProps.sizeToken,
-    ...knobProps.borderRadius,
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_surfaces.Card, {
+    width: "100%",
     elevation: knobProps.elevation,
-    borderWidth: 1,
-    borderColor: "$borderColor",
-    cursor: config.onClick ? "pointer" : void 0,
-    hoverStyle: config.onClick ? {
-      scale: 0.98,
-      borderColor: "$accentBackground"
-    } : void 0,
-    pressStyle: config.onClick ? {
-      scale: 0.97
-    } : void 0,
-    onPress: config.onClick,
+    ...knobProps.surface,
+    ...interactive,
     ...stackProps,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card.Header, {
-      ...knobProps.panelPadding,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-        justifyContent: "space-between",
-        alignItems: "flex-start",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: knobProps.sizeToken,
-          color: import_componentColors.componentColors.text.muted,
-          fontWeight: "500",
-          children: config.title
-        }), config.icon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-          backgroundColor: config.color || "$accentBackground",
-          padding: "$2",
-          ...knobProps.borderRadius,
-          children: config.icon
-        })]
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card.Footer, {
-      ...knobProps.panelPadding,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        ...knobProps.gap,
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: "$8",
-          fontWeight: "700",
-          color: "$color",
-          children: formattedValue
-        }), (config.trend || config.trendValue) && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-          gap: "$2",
-          alignItems: "center",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$2",
-            color: trendColor,
-            children: trendSymbol
-          }), config.trendValue && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$2",
-            color: trendColor,
-            children: config.trendValue
-          }), config.previousValue !== void 0 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-            fontSize: "$2",
-            color: import_componentColors.componentColors.text.muted,
-            children: ["vs ", formatMetric(config.previousValue)]
-          })]
-        })]
-      })
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      justifyContent: "space-between",
+      alignItems: "flex-start",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.label,
+        color: import_componentColors.componentColors.text.muted,
+        flex: 1,
+        children: config.title
+      }), config.icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(NestedIconWell, {
+        color: config.color,
+        box,
+        px,
+        radius: knobProps.borderRadius,
+        children: config.icon
+      }) : null]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: "$8",
+      color: "$color",
+      ...knobProps.heading,
+      children: formattedValue
+    }), config.sparkline && config.sparkline.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Sparkline.Sparkline, {
+      data: config.sparkline,
+      height: px,
+      title: config.title
+    }) : null, (config.trend || config.trendValue) && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      gap: "$2",
+      alignItems: "center",
+      flexWrap: "wrap",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(TrendPill, {
+        symbol: trendSymbol,
+        value: config.trendValue,
+        color: trendColor,
+        px,
+        radius: knobProps.borderRadius,
+        label: knobProps.label
+      }), config.previousValue !== void 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.label,
+        color: import_componentColors.componentColors.text.muted,
+        children: t("vs {{previousValue}}", {
+          previousValue: formatMetric(config.previousValue)
+        })
+      })]
     })]
   });
 }
@@ -154,44 +242,234 @@ function ChartCard({
   const showXAxis = config.showLabels !== false;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     ...knobProps.gap,
+    width: "100%",
     ...stackProps,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(HeadingTag, {
       margin: 0,
+      ...knobProps.heading,
       ...import_componentColors.sectionHeading,
       children: config.title
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
-      size: knobProps.sizeToken,
-      ...knobProps.borderRadius,
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_surfaces.Card, {
       elevation: knobProps.elevation,
-      borderWidth: 1,
-      borderColor: "$borderColor",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card.Footer, {
-        ...knobProps.panelPadding,
-        children: config.type === "pie" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_PieChart.PieChart, {
-          data: config.data,
-          height: config.height,
-          donut: 0.5,
-          colors: dataColors,
-          showLegend: config.showLegend,
-          title: config.title
-        }) : config.type === "line" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_LineChart.LineChart, {
-          data: config.data,
-          height: config.height,
-          color: dataColors?.[0],
-          showPoints: true,
-          showXAxis,
-          showYAxis: false
-        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BarChart.BarChart, {
-          data: config.data,
-          height: config.height,
-          colors: dataColors,
-          showXAxis,
-          showYAxis: false
-        })
+      ...knobProps.surface,
+      children: config.type === "pie" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_PieChart.PieChart, {
+        data: config.data,
+        height: config.height,
+        donut: 0.5,
+        colors: dataColors,
+        showLegend: config.showLegend,
+        title: config.title
+      }) : config.type === "line" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_LineChart.LineChart, {
+        data: config.data,
+        height: config.height,
+        color: dataColors?.[0],
+        showPoints: true,
+        showXAxis,
+        showYAxis: false
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BarChart.BarChart, {
+        data: config.data,
+        height: config.height,
+        colors: dataColors,
+        showXAxis,
+        showYAxis: false
+      })
+    })]
+  });
+}
+function ProgressCard({
+  config,
+  ...stackProps
+}) {
+  const {
+    knobProps,
+    nested
+  } = useWidgetChrome();
+  const {
+    px
+  } = nested;
+  const max = config.max && config.max > 0 ? config.max : 100;
+  const pct = Math.max(0, Math.min(100, config.value / max * 100));
+  const trackHeight = Math.max(6, Math.round(px / 4));
+  const label = config.format === "number" ? (0, import_theme.formatNumber)(config.value) : (0, import_theme.formatPercent)(Math.round(pct));
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_surfaces.Card, {
+    width: "100%",
+    elevation: knobProps.elevation,
+    ...knobProps.surface,
+    ...stackProps,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      justifyContent: "space-between",
+      alignItems: "baseline",
+      ...knobProps.gap,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.label,
+        color: import_componentColors.componentColors.text.muted,
+        flex: 1,
+        children: config.title
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        color: "$color",
+        ...knobProps.label,
+        children: label
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      height: trackHeight,
+      backgroundColor: "$color4",
+      overflow: "hidden",
+      ...knobProps.borderRadius,
+      role: "progressbar",
+      "aria-valuenow": config.value,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-label": config.title,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        height: "100%",
+        width: `${pct}%`,
+        backgroundColor: config.color || "$accentBackground"
       })
     })]
   });
 }
+function ShortcutCard({
+  config,
+  ...stackProps
+}) {
+  const {
+    knobProps,
+    nested,
+    interactive
+  } = useWidgetChrome(config.onClick);
+  const {
+    px,
+    box,
+    hitSlop
+  } = nested;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_surfaces.Card, {
+    width: "100%",
+    elevation: knobProps.elevation,
+    ...knobProps.surface,
+    ...interactive,
+    hitSlop: config.onClick ? hitSlop : void 0,
+    ...stackProps,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      alignItems: "center",
+      ...knobProps.gap,
+      children: [config.icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(NestedIconWell, {
+        color: config.color,
+        box,
+        px,
+        radius: knobProps.borderRadius,
+        children: config.icon
+      }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.body,
+        fontWeight: "600",
+        flex: 1,
+        numberOfLines: 1,
+        children: config.title
+      }), config.count != null && config.count !== "" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+        height: px,
+        minHeight: px,
+        maxHeight: px,
+        minWidth: px,
+        paddingHorizontal: "$2",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "$color4",
+        ...knobProps.borderRadius,
+        "data-nested-px": px,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...knobProps.label,
+          color: import_componentColors.componentColors.text.secondary,
+          children: config.count
+        })
+      }) : null]
+    })
+  });
+}
+function ListCard({
+  config,
+  headingLevel = 2,
+  ...stackProps
+}) {
+  const {
+    knobProps,
+    nested,
+    control
+  } = useWidgetChrome();
+  const {
+    px,
+    hitSlop
+  } = nested;
+  const HeadingTag = SECTION_HEADING_TAGS[headingLevel];
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    ...knobProps.gap,
+    width: "100%",
+    ...stackProps,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(HeadingTag, {
+      margin: 0,
+      ...knobProps.heading,
+      ...import_componentColors.sectionHeading,
+      children: config.title
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_surfaces.Card, {
+      elevation: knobProps.elevation,
+      ...knobProps.surface,
+      children: config.items.map(item => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        height: px,
+        minHeight: px,
+        maxHeight: px,
+        alignItems: "center",
+        justifyContent: "space-between",
+        ...knobProps.gap,
+        "data-nested-px": px,
+        cursor: item.onClick ? "pointer" : void 0,
+        hitSlop: item.onClick ? hitSlop : void 0,
+        hoverStyle: item.onClick ? control.hoverKnobProps : void 0,
+        pressStyle: item.onClick ? control.pressKnobProps : void 0,
+        focusVisibleStyle: item.onClick ? control.focusVisibleKnobProps : void 0,
+        onPress: item.onClick,
+        role: item.onClick ? "button" : void 0,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...knobProps.label,
+          flex: 1,
+          numberOfLines: 1,
+          children: item.label
+        }), item.meta ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...knobProps.label,
+          color: import_componentColors.componentColors.text.muted,
+          children: item.meta
+        }) : null]
+      }, item.id))
+    })]
+  });
+}
+function DefaultWidget({
+  widget
+}) {
+  switch (widget.type) {
+    case "kpi":
+      return widget.kpiConfig ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(KPICard, {
+        config: widget.kpiConfig
+      }) : null;
+    case "chart":
+      return widget.chartConfig ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChartCard, {
+        config: widget.chartConfig
+      }) : null;
+    case "progress":
+      return widget.progressConfig ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ProgressCard, {
+        config: widget.progressConfig
+      }) : null;
+    case "shortcut":
+      return widget.shortcutConfig ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ShortcutCard, {
+        config: widget.shortcutConfig
+      }) : null;
+    case "list":
+      return widget.listConfig ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ListCard, {
+        config: widget.listConfig
+      }) : null;
+    case "custom":
+      return widget.content ?? null;
+    default:
+      return null;
+  }
+}
 function Dashboard({
   widgets,
   renderWidget,
@@ -208,28 +486,30 @@ function Dashboard({
 }) {
   const {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
   const emptyMessage = emptyMessageProp ?? t("No widgets to display");
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
-  const sz = knobProps.sizeToken;
-  const gap = gapProp ?? (sz === "$3" ? 12 : sz === "$5" ? 20 : 16);
-  const padding = paddingProp ?? (sz === "$3" ? 12 : sz === "$5" ? 20 : 16);
+  const gap = gapProp ?? 16;
   const header = title || description ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     ...knobProps.gap,
-    marginBottom: "$2",
     children: [title && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
+      margin: 0,
+      ...knobProps.heading,
       children: title
     }), description && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: sz,
+      ...knobProps.body,
+      ...knobProps.label,
       color: import_componentColors.componentColors.text.muted,
       children: description
     })]
   }) : null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
     children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      padding,
+      ...(paddingProp != null ? {
+        padding: paddingProp
+      } : knobProps.panelPadding),
       gap,
       ...stackProps,
       children: [header, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_AsyncBoundary.AsyncBoundary, {
@@ -242,21 +522,33 @@ function Dashboard({
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
           flexWrap: "wrap",
           gap,
-          marginHorizontal: -gap / 2,
+          ...(import_tamagui.isWeb ?
+          // CSS grid props are web-only and absent from the RN-flavored
+          // View type; Tamagui forwards them to the DOM (house Record cast).
+          {
+            display: "grid",
+            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
+          } : {
+            marginHorizontal: -gap / 2
+          }),
           children: widgets.map(widget => {
-            const span = widget.colSpan || 1;
+            const span = Math.min(widget.colSpan || 1, columns);
             const widthPercent = span / columns * 100;
             const adjustedWidth = `calc(${widthPercent}% - ${gap}px)`;
             return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-              width: adjustedWidth,
-              minWidth: 200,
-              marginHorizontal: gap / 2,
-              children: renderWidget ? renderWidget(widget) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-                children: [widget.type === "kpi" && widget.kpiConfig && /* @__PURE__ */(0, import_jsx_runtime.jsx)(KPICard, {
-                  config: widget.kpiConfig
-                }), widget.type === "chart" && widget.chartConfig && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChartCard, {
-                  config: widget.chartConfig
-                })]
+              "data-dashboard-widget": widget.type,
+              ...(import_tamagui.isWeb ? {
+                gridColumn: `span ${span}`,
+                minWidth: 0,
+                width: "100%"
+              } : {
+                width: adjustedWidth,
+                minWidth: 200,
+                marginHorizontal: gap / 2,
+                marginBottom: gap
+              }),
+              children: renderWidget ? renderWidget(widget) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DefaultWidget, {
+                widget
               })
             }, widget.id);
           })