@schandlergarcia/sf-web-components 1.2.6 → 1.2.7

package/src/components/library/cards/MetricsStrip.jsx

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+
+const PLACEHOLDER_METRICS = [
+  { label: "Metric A", value: "—", trend: null },
+  { label: "Metric B", value: "—", trend: null },
+  { label: "Metric C", value: "—", trend: null },
+];
+
+/**
+ * Horizontal strip of KPI metrics — compact alternative to a row of MetricCards.
+ *
+ * @param {{ label: string, value: string|number, trend?: string|number }[]} metrics
+ * @param {string}  title
+ * @param {boolean} collapsible   Allow collapsing into a single-line summary
+ * @param {boolean} collapsed     Initial collapsed state
+ */
+export default function MetricsStrip({
+  metrics = [],
+  title,
+  collapsible = false,
+  collapsed: initialCollapsed = false,
+  className = "",
+}) {
+  const [collapsed, setCollapsed] = useState(initialCollapsed);
+  const items = metrics.length ? metrics : PLACEHOLDER_METRICS;
+
+  if (collapsible && collapsed) {
+    return (
+      <button
+        type="button"
+        onClick={() => setCollapsed(false)}
+        className={`flex w-full items-center justify-between rounded-lg border border-slate-200 bg-white px-3 py-2 text-left text-xs text-slate-500 hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 ${className}`}
+      >
+        <span>{title ?? "Metrics"}: {items.map((m) => `${m.label} ${m.value}`).join(" · ")}</span>
+        <span>▸</span>
+      </button>
+    );
+  }
+
+  return (
+    <div className={`rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-800 dark:bg-slate-900 ${className}`}>
+      {(title || collapsible) && (
+        <div className="mb-2 flex items-center justify-between">
+          <span className="text-xs font-medium text-slate-500 dark:text-slate-400">{title ?? "Metrics"}</span>
+          {collapsible && (
+            <button
+              type="button"
+              onClick={() => setCollapsed(true)}
+              className="text-xs text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300"
+            >
+              Collapse
+            </button>
+          )}
+        </div>
+      )}
+      <div className="flex flex-wrap gap-4">
+        {items.map((m) => (
+          <div key={m.label} className="min-w-[80px]">
+            <div className="text-xs text-slate-400 dark:text-slate-500">{m.label}</div>
+            <div className="flex items-baseline gap-1.5">
+              <span className="text-sm font-semibold text-slate-700 dark:text-slate-200">{m.value}</span>
+              {m.trend != null && (
+                <TrendBadge trend={m.trend} />
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function TrendBadge({ trend }) {
+  const isPositive = String(trend).startsWith?.("+") || trend > 0;
+  const color = isPositive ? "text-red-500" : "text-emerald-500";
+  const label = typeof trend === "number" ? (trend > 0 ? `+${trend}` : trend) : trend;
+  return <span className={`text-xs ${color}`}>{label}</span>;
+}

package/src/components/library/cards/SectionCard.jsx

@@ -0,0 +1,83 @@
+import React from "react";
+import BaseCard from "./BaseCard";
+import UIText from "../ui/Text";
+
+const VARIANT_STYLES = {
+  default: "bg-white dark:bg-slate-900",
+  primary: "bg-brand-50 dark:bg-brand-950/30",
+  secondary: "bg-slate-50 dark:bg-slate-950/30",
+  accent: "bg-emerald-50 dark:bg-emerald-950/25"
+};
+
+const SIZE_STYLES = {
+  sm: { title: "text-lg", desc: "text-sm", pad: "p-4" },
+  md: { title: "text-xl", desc: "text-sm", pad: "p-5" },
+  lg: { title: "text-2xl", desc: "text-base", pad: "p-6" },
+  xl: { title: "text-3xl", desc: "text-base", pad: "p-7" }
+};
+
+const ALIGN_STYLES = {
+  left: "text-left items-start",
+  center: "text-center items-center",
+  right: "text-right items-end"
+};
+
+export default function SectionCard({
+  title,
+  description,
+  label,
+  variant = "default",
+  showDivider = true,
+  alignment = "left",
+  size = "md",
+  isDark = false,
+  className = "",
+  ...cardProps
+}) {
+  const s = SIZE_STYLES[size] ?? SIZE_STYLES.md;
+  const align = ALIGN_STYLES[alignment] ?? ALIGN_STYLES.left;
+  const variantClass = VARIANT_STYLES[variant] ?? VARIANT_STYLES.default;
+
+  return (
+    <BaseCard
+      variant="widget"
+      padding="none"
+      className={[
+        variantClass,
+        isDark ? "dark" : "",
+        "overflow-hidden",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...cardProps}
+      body={
+        <div className={s.pad}>
+          <div className={["flex flex-col gap-2", align].join(" ")}>
+            {label ? (
+              <span className="inline-flex rounded-full bg-slate-900 px-2 py-1 text-[11px] font-semibold text-white dark:bg-slate-100 dark:text-slate-900">
+                {label}
+              </span>
+            ) : null}
+            {title ? (
+              <UIText as="h2" weight="bold" className={["tracking-tight", s.title].join(" ")}>
+                {title}
+              </UIText>
+            ) : null}
+            {description ? (
+              <UIText as="p" muted className={[s.desc, "max-w-3xl"].join(" ")}>
+                {description}
+              </UIText>
+            ) : null}
+          </div>
+
+          {showDivider ? (
+            <div className="mt-4 h-px w-full bg-slate-200 dark:bg-slate-800" />
+          ) : null}
+        </div>
+      }
+    />
+  );
+}
+
+

package/src/components/library/cards/SemanticMetricCard.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import MetricCard from "./MetricCard";
+import { getSemanticMetric } from "../data/chartDataProvider";
+
+export default function SemanticMetricCard({
+  semanticId,
+  metricId,
+  title,
+  subtitle,
+  value,
+  unit,
+  format,
+  trend,
+  change,
+  changeLabel,
+  description,
+  seriesName,
+  availableFilters,
+  showFilters,
+  compact,
+  className,
+  loading = false,
+  ...rest
+}) {
+  const metric = React.useMemo(() => getSemanticMetric(semanticId, metricId), [semanticId, metricId]);
+
+  const resolvedTitle = title ?? metric?.title ?? metricId ?? "Metric";
+  const resolvedSubtitle = subtitle ?? metric?.subtitle;
+  const resolvedValue = value ?? metric?.value ?? "";
+  const resolvedTrend = trend ?? metric?.trend;
+  const resolvedChange = change ?? metric?.change;
+  const resolvedChangeType = metric?.changeType ?? "neutral";
+  const resolvedColor = metric?.color ?? "default";
+
+  // Note: unit/format/etc. are accepted for forward compatibility; basic rendering is handled by MetricCard for now.
+  return (
+    <MetricCard
+      title={resolvedTitle}
+      subtitle={resolvedSubtitle}
+      value={resolvedValue}
+      change={resolvedChangeLabel ? `${resolvedChangeLabel} ${resolvedChange ?? ""}`.trim() : resolvedChange}
+      changeType={resolvedChangeType}
+      color={resolvedColor}
+      trend={resolvedTrend}
+      layout={compact ? "compact" : "default"}
+      loading={loading}
+      className={className}
+      {...rest}
+    />
+  );
+}
+

package/src/components/library/cards/SemanticMetricCardWithLoading.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import SemanticMetricCard from "./SemanticMetricCard";
+
+export default function SemanticMetricCardWithLoading({
+  simulateInitialLoad = true,
+  minInitialDelayMs = 350,
+  maxInitialDelayMs = 900,
+  loading: loadingProp,
+  ...props
+}) {
+  const [loading, setLoading] = React.useState(Boolean(simulateInitialLoad));
+
+  React.useEffect(() => {
+    if (!simulateInitialLoad) return;
+    const delay =
+      Math.floor(Math.random() * (maxInitialDelayMs - minInitialDelayMs + 1)) + minInitialDelayMs;
+    const t = setTimeout(() => setLoading(false), delay);
+    return () => clearTimeout(t);
+  }, [simulateInitialLoad, minInitialDelayMs, maxInitialDelayMs]);
+
+  return <SemanticMetricCard loading={loadingProp ?? loading} {...props} />;
+}
+

package/src/components/library/cards/SemanticTableCard.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import TableCard from "./TableCard";
+import { getSemanticDataset } from "../data/chartDataProvider";
+
+export default function SemanticTableCard({
+  semanticId,
+  dataOverride,
+  columnsOverride,
+  title,
+  subtitle,
+  searchable = true,
+  sortable = true,
+  paginated = true,
+  pageSize = 10,
+  compact,
+  striped,
+  isDark,
+  simulateInitialLoad,
+  minInitialDelayMs,
+  maxInitialDelayMs,
+  ...rest
+}) {
+  const ds = React.useMemo(() => getSemanticDataset(semanticId), [semanticId]);
+  const table = ds?.table;
+
+  const resolvedColumns = columnsOverride ?? table?.columns ?? [];
+  const resolvedData = dataOverride ?? table?.rows ?? [];
+  const resolvedTitle = title ?? table?.title ?? ds?.title ?? "Table";
+  const resolvedSubtitle = subtitle ?? table?.subtitle;
+
+  return (
+    <TableCard
+      title={resolvedTitle}
+      subtitle={resolvedSubtitle}
+      columns={resolvedColumns}
+      data={resolvedData}
+      searchable={searchable}
+      sortable={sortable}
+      paginated={paginated}
+      pageSize={pageSize}
+      simulateInitialLoad={simulateInitialLoad}
+      minInitialDelayMs={minInitialDelayMs}
+      maxInitialDelayMs={maxInitialDelayMs}
+      {...rest}
+    />
+  );
+}
+

package/src/components/library/cards/SemanticTableCardWithLoading.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import SemanticTableCard from "./SemanticTableCard";
+
+export default function SemanticTableCardWithLoading({
+  simulateInitialLoad = true,
+  minInitialDelayMs = 350,
+  maxInitialDelayMs = 900,
+  loading: loadingProp,
+  ...props
+}) {
+  // Leverage TableCard's simulateInitialLoad by default; also allow explicit loading override.
+  return (
+    <SemanticTableCard
+      {...props}
+      loading={loadingProp}
+      simulateInitialLoad={simulateInitialLoad}
+      minInitialDelayMs={minInitialDelayMs}
+      maxInitialDelayMs={maxInitialDelayMs}
+    />
+  );
+}
+

package/src/components/library/cards/StatusCard.jsx

@@ -0,0 +1,220 @@
+import React from "react";
+import BaseCard from "./BaseCard";
+import UIText from "../ui/Text";
+
+const STATUS_META = {
+  operational: {
+    label: "Operational",
+    dot: "bg-emerald-500",
+    chip: "bg-emerald-100 text-emerald-900 dark:bg-emerald-950/30 dark:text-emerald-200"
+  },
+  degraded: {
+    label: "Degraded",
+    dot: "bg-amber-500",
+    chip: "bg-amber-100 text-amber-900 dark:bg-amber-950/30 dark:text-amber-200"
+  },
+  outage: {
+    label: "Outage",
+    dot: "bg-rose-500",
+    chip: "bg-rose-100 text-rose-900 dark:bg-rose-950/30 dark:text-rose-200"
+  },
+  maintenance: {
+    label: "Maintenance",
+    dot: "bg-slate-500",
+    chip: "bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-100"
+  }
+};
+
+function normalizeStatus(status) {
+  const s = String(status ?? "operational").toLowerCase();
+  if (s === "ok" || s === "healthy" || s === "up") return "operational";
+  if (s === "warn" || s === "warning" || s === "partial") return "degraded";
+  if (s === "down" || s === "critical") return "outage";
+  return STATUS_META[s] ? s : "operational";
+}
+
+function formatTimestamp(ts) {
+  if (!ts) return "";
+  try {
+    const d = ts instanceof Date ? ts : new Date(ts);
+    if (Number.isNaN(d.getTime())) return String(ts);
+    return d.toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" });
+  } catch {
+    return String(ts);
+  }
+}
+
+function StatusChip({ status }) {
+  const key = normalizeStatus(status);
+  const meta = STATUS_META[key];
+  return (
+    <span className={["inline-flex items-center gap-2 rounded-full px-2.5 py-1 text-xs font-semibold", meta.chip].join(" ")}>
+      <span className={["h-2 w-2 rounded-full", meta.dot].join(" ")} aria-hidden="true" />
+      {meta.label}
+    </span>
+  );
+}
+
+function ItemRow({ item, showTimestamp }) {
+  const name = item?.title ?? item?.name ?? "Item";
+  const desc = item?.description;
+  const value = item?.value;
+  const unit = item?.unit;
+  const ts = item?.timestamp;
+  const status = item?.status;
+
+  return (
+    <div className="flex items-start justify-between gap-3 rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-800 dark:bg-slate-900">
+      <div className="min-w-0">
+        <div className="flex items-center gap-2">
+          <div className="truncate text-sm font-semibold text-slate-900 dark:text-slate-50">{name}</div>
+          {status ? <StatusChip status={status} /> : null}
+        </div>
+        {desc ? (
+          <div className="mt-1 text-sm text-slate-600 dark:text-slate-300">{desc}</div>
+        ) : null}
+        {showTimestamp && ts ? (
+          <div className="mt-1 text-xs text-slate-500 dark:text-slate-400">{formatTimestamp(ts)}</div>
+        ) : null}
+      </div>
+      {value != null ? (
+        <div className="shrink-0 text-right">
+          <div className="text-sm font-semibold text-slate-900 dark:text-slate-50">
+            {String(value)}
+            {unit ? <span className="ml-1 text-xs font-medium text-slate-500 dark:text-slate-400">{unit}</span> : null}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function Timeline({ items, showTimestamp }) {
+  return (
+    <div className="relative mt-4">
+      <div className="absolute left-3 top-0 h-full w-px bg-slate-200 dark:bg-slate-800" aria-hidden="true" />
+      <div className="space-y-3">
+        {items.map((item, idx) => {
+          const key = item?.id ?? idx;
+          const status = item?.status;
+          const meta = STATUS_META[normalizeStatus(status)];
+          return (
+            <div key={key} className="relative pl-8">
+              <div className={["absolute left-[9px] top-3 h-2.5 w-2.5 rounded-full", meta.dot].join(" ")} aria-hidden="true" />
+              <ItemRow item={item} showTimestamp={showTimestamp} />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default function StatusCard({
+  title,
+  subtitle,
+  status = "operational",
+  items = [],
+  layout = "list",
+  showProgress = false,
+  showTimestamp = true,
+  actions,
+  loading = false,
+  error,
+  emptyMessage = "No status items.",
+  maxBodyHeight,
+  ...cardProps
+}) {
+  const overall = normalizeStatus(status);
+  const header = (
+    <div className="flex items-start justify-between gap-3">
+      <div className="min-w-0">
+        {title ? (
+          <UIText as="div" size="sm" weight="medium">
+            {title}
+          </UIText>
+        ) : null}
+        {subtitle ? (
+          <UIText as="div" size="xs" muted className="mt-1">
+            {subtitle}
+          </UIText>
+        ) : null}
+      </div>
+      <div className="flex items-center gap-2">
+        <StatusChip status={overall} />
+        {actions ? <div className="ml-1">{actions}</div> : null}
+      </div>
+    </div>
+  );
+
+  if (error) {
+    return (
+      <BaseCard
+        variant="status"
+        header={header}
+        body={
+          <div className="mt-4 rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900 dark:border-rose-900/40 dark:bg-rose-950/30 dark:text-rose-100">
+            {String(error)}
+          </div>
+        }
+        {...cardProps}
+      />
+    );
+  }
+
+  const total = items.length;
+  const okCount = items.filter((it) => normalizeStatus(it?.status) === "operational").length;
+  const percentOk = total > 0 ? Math.round((okCount / total) * 100) : 100;
+
+  const scrollStyle = maxBodyHeight ? { maxHeight: maxBodyHeight, overflowY: "auto" } : {};
+
+  const itemsContent = loading ? (
+    <div className="space-y-3">
+      {Array.from({ length: 3 }).map((_, i) => (
+        <div key={i} className="flex items-center gap-3 rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-800 dark:bg-slate-900">
+          <div className="h-4 w-1/4 animate-pulse rounded bg-slate-200 dark:bg-slate-800" />
+          <div className="h-4 w-1/3 animate-pulse rounded bg-slate-200 dark:bg-slate-800" />
+        </div>
+      ))}
+    </div>
+  ) : items.length === 0 ? (
+    <div className="rounded-xl border border-dashed border-slate-300 bg-slate-50 p-6 text-center text-sm text-slate-600 dark:border-slate-700 dark:bg-slate-950/30 dark:text-slate-300">
+      {emptyMessage}
+    </div>
+  ) : layout === "grid" ? (
+    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+      {items.map((it, idx) => (
+        <ItemRow key={it?.id ?? idx} item={it} showTimestamp={showTimestamp} />
+      ))}
+    </div>
+  ) : layout === "timeline" ? (
+    <Timeline items={items} showTimestamp={showTimestamp} />
+  ) : (
+    <div className="space-y-3">
+      {items.map((it, idx) => (
+        <ItemRow key={it?.id ?? idx} item={it} showTimestamp={showTimestamp} />
+      ))}
+    </div>
+  );
+
+  const body = (
+    <div className="mt-4">
+      {showProgress && total > 0 ? (
+        <div className="mb-4">
+          <div className="flex items-center justify-between text-xs text-slate-600 dark:text-slate-300">
+            <span>{okCount} / {total} operational</span>
+            <span>{percentOk}%</span>
+          </div>
+          <div className="mt-2 h-2 w-full overflow-hidden rounded-full bg-slate-200 dark:bg-slate-800">
+            <div className="h-full bg-emerald-500" style={{ width: `${percentOk}%` }} />
+          </div>
+        </div>
+      ) : null}
+      <div style={scrollStyle}>{itemsContent}</div>
+    </div>
+  );
+
+  return <BaseCard variant="status" header={header} body={body} {...cardProps} />;
+}
+
+