@schandlergarcia/sf-web-components 1.9.37 → 1.9.39

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

@@ -0,0 +1,193 @@
+import React from "react";
+import BaseCard from "./BaseCard";
+import UIText from "../ui/Text";
+import UIChip from "../ui/Chip";
+
+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 Avatar({ item }) {
+  const avatar = item?.avatar;
+  const name = item?.title ?? item?.name ?? "Item";
+  if (!avatar) return null;
+  if (typeof avatar === "string") {
+    return (
+      <img
+        src={avatar}
+        alt=""
+        className="h-9 w-9 rounded-full border border-slate-200 object-cover dark:border-slate-800"
+      />
+    );
+  }
+  if (React.isValidElement(avatar)) {
+    return (
+      <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-800">
+        {avatar}
+      </div>
+    );
+  }
+  return (
+    <div className="h-9 w-9 rounded-full border border-slate-200 bg-slate-100 text-xs font-semibold text-slate-700 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-200 grid place-items-center">
+      {String(name).slice(0, 2).toUpperCase()}
+    </div>
+  );
+}
+
+export default function ListCard({
+  items = [],
+  title,
+  subtitle,
+  showAvatars = true,
+  showStatus = true,
+  showActions = true,
+  showTimestamp = true,
+  dense = false,
+  divided = true,
+  actions,
+  itemActions,
+  onItemClick,
+  loading = false,
+  error,
+  emptyMessage = "No items.",
+  emptyIcon,
+  maxBodyHeight,
+  ...cardProps
+}) {
+  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>
+      {actions ? <div className="shrink-0">{actions}</div> : null}
+    </div>
+  );
+
+  if (error) {
+    return (
+      <BaseCard
+        variant="widget"
+        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 padY = dense ? "py-2" : "py-3";
+
+  const scrollStyle = maxBodyHeight ? { maxHeight: maxBodyHeight, overflowY: "auto" } : {};
+
+  const body =
+    loading ? (
+      <div className="mt-4 space-y-3">
+        {Array.from({ length: 4 }).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">
+            {showAvatars ? <div className="h-9 w-9 animate-pulse rounded-full bg-slate-200 dark:bg-slate-800" /> : null}
+            <div className="flex-1 space-y-2">
+              <div className="h-4 w-1/3 animate-pulse rounded bg-slate-200 dark:bg-slate-800" />
+              <div className="h-3 w-2/3 animate-pulse rounded bg-slate-200 dark:bg-slate-800" />
+            </div>
+          </div>
+        ))}
+      </div>
+    ) : items.length === 0 ? (
+      <div className="mt-4 rounded-xl border border-dashed border-slate-300 bg-slate-50 p-6 text-center dark:border-slate-700 dark:bg-slate-950/30">
+        {emptyIcon ? <div className="mb-2">{emptyIcon}</div> : null}
+        <UIText size="sm" muted>
+          {emptyMessage}
+        </UIText>
+      </div>
+    ) : (
+      <div className="mt-4 overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
+        <ul className={divided ? "divide-y divide-slate-200 dark:divide-slate-800" : ""} style={scrollStyle}>
+          {items.map((item, idx) => {
+            const key = item?.id ?? idx;
+            const name = item?.title ?? item?.name ?? "Item";
+            const desc = item?.description;
+            const status = item?.status;
+            const ts = item?.timestamp;
+            const itemValue = item?.value;
+            const itemUnit = item?.unit;
+            const right = showActions ? itemActions?.(item, idx) : null;
+
+            return (
+              <li
+                key={key}
+                className={[
+                  "group flex items-start justify-between gap-3 px-4",
+                  padY,
+                  onItemClick ? "cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-950/30" : ""
+                ]
+                  .filter(Boolean)
+                  .join(" ")}
+                onClick={() => onItemClick?.(item, idx)}
+              >
+                <div className="flex min-w-0 items-start gap-3">
+                  {showAvatars ? <Avatar item={item} /> : null}
+                  <div className="min-w-0">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <div className="text-sm font-semibold text-slate-900 dark:text-slate-50">
+                        {name}
+                      </div>
+                      {showStatus && status ? (
+                        <UIChip>{String(status)}</UIChip>
+                      ) : 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>
+                </div>
+
+                <div className="flex shrink-0 items-center gap-2">
+                  {itemValue != null ? (
+                    <div className="text-right">
+                      <div className="text-sm font-semibold text-slate-900 dark:text-slate-50">
+                        {String(itemValue)}
+                        {itemUnit ? <span className="ml-1 text-xs font-medium text-slate-500 dark:text-slate-400">{itemUnit}</span> : null}
+                      </div>
+                    </div>
+                  ) : null}
+                  {right ? (
+                    <div className="opacity-100 sm:opacity-0 sm:group-hover:opacity-100">
+                      {right}
+                    </div>
+                  ) : null}
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    );
+
+  return <BaseCard variant="widget" header={header} body={body} isLoading={false} {...cardProps} />;
+}
+
+

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

@@ -0,0 +1,109 @@
+import React from "react";
+import BaseCard from "./BaseCard";
+
+const CHANGE_STYLES = {
+  positive: "text-emerald-700 dark:text-emerald-400",
+  negative: "text-rose-700 dark:text-rose-400",
+  neutral: "text-slate-600 dark:text-slate-300"
+};
+
+const COLOR_STYLES = {
+  default: "bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-100",
+  primary: "bg-brand-100 text-brand-800 dark:bg-brand-950/40 dark:text-brand-200",
+  success: "bg-emerald-100 text-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-200",
+  warning: "bg-amber-100 text-amber-900 dark:bg-amber-950/40 dark:text-amber-200",
+  danger: "bg-rose-100 text-rose-800 dark:bg-rose-950/40 dark:text-rose-200"
+};
+
+export default function MetricCard({
+  title,
+  value,
+  subtitle,
+  change,
+  changeType = "neutral",
+  icon,
+  color = "default",
+  trend,
+  trendIcon,
+  layout = "default",
+  footer,
+  actions,
+  loading = false,
+  error,
+  ...cardProps
+}) {
+  const changeClass = CHANGE_STYLES[changeType] ?? CHANGE_STYLES.neutral;
+  const pillClass = COLOR_STYLES[color] ?? COLOR_STYLES.default;
+
+  if (error) {
+    return (
+      <BaseCard
+        variant="metric"
+        body={
+          <div className="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 header = (
+    <div className="flex items-start justify-between gap-3">
+      <div className="min-w-0">
+        <div className="text-sm font-medium text-slate-600 dark:text-slate-300">{title}</div>
+        {subtitle ? (
+          <div className="mt-1 text-xs text-slate-500 dark:text-slate-400">{subtitle}</div>
+        ) : null}
+      </div>
+      {actions ? <div className="shrink-0">{actions}</div> : null}
+    </div>
+  );
+
+  const body = (
+    <div className={["mt-2", layout === "compact" ? "space-y-1" : "space-y-2"].join(" ")}>
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+        <div className="flex items-center gap-2">
+          {icon ? (
+            <span
+              className={[
+                "inline-flex h-8 w-8 items-center justify-center rounded-lg",
+                pillClass
+              ].join(" ")}
+              aria-hidden="true"
+            >
+              {icon}
+            </span>
+          ) : null}
+          <div className="text-2xl font-semibold tracking-tight text-slate-900 dark:text-slate-50">
+            {value}
+          </div>
+        </div>
+
+        {(change || trend) && (
+          <div className={["flex items-center gap-1.5 text-xs font-medium", changeClass].join(" ")}>
+            {trendIcon ? <span aria-hidden="true">{trendIcon}</span> : null}
+            {change ? <span>{change}</span> : null}
+            {trend ? <span className="text-[11px] font-normal text-slate-500 dark:text-slate-400">{trend}</span> : null}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <BaseCard
+      variant="metric"
+      padding="sm"
+      size="sm"
+      header={header}
+      body={body}
+      footer={footer ? <div className="mt-3">{footer}</div> : null}
+      isLoading={loading}
+      {...cardProps}
+    />
+  );
+}
+
+

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}
+    />
+  );
+}
+