@schandlergarcia/sf-web-components 1.9.37 → 1.9.39

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

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

@@ -0,0 +1,337 @@
+import React from "react";
+import BaseCard from "./BaseCard";
+import UIInput from "../ui/Input";
+import UIButton from "../ui/Button";
+import UIText from "../ui/Text";
+
+function defaultTypeFormat(type, value) {
+  if (value == null) return "";
+  if (!type) return String(value);
+
+  if (type === "currency") {
+    const n = Number(value);
+    if (Number.isFinite(n)) return n.toLocaleString(undefined, { style: "currency", currency: "USD" });
+  }
+  if (type === "percentage") {
+    const n = Number(value);
+    if (Number.isFinite(n)) return `${n}%`;
+  }
+  if (type === "number") {
+    const n = Number(value);
+    if (Number.isFinite(n)) return n.toLocaleString();
+  }
+  return String(value);
+}
+
+function stableSort(data, compare) {
+  return data
+    .map((item, idx) => ({ item, idx }))
+    .sort((a, b) => {
+      const c = compare(a.item, b.item);
+      return c !== 0 ? c : a.idx - b.idx;
+    })
+    .map((x) => x.item);
+}
+
+export default function TableCard({
+  data = [],
+  columns = [],
+  title,
+  subtitle,
+  searchable = false,
+  sortable = false,
+  paginated = false,
+  selectable = false,
+  pageSize = 10,
+  actions,
+  rowActions,
+  onRowSelect,
+  onSort,
+  onSearch,
+  loading = false,
+  error,
+  emptyMessage = "No results.",
+  simulateInitialLoad = false,
+  minInitialDelayMs = 350,
+  maxInitialDelayMs = 900,
+  ...cardProps
+}) {
+  const [query, setQuery] = React.useState("");
+  const [sortKey, setSortKey] = React.useState(null);
+  const [sortDir, setSortDir] = React.useState("asc");
+  const [page, setPage] = React.useState(1);
+  const [selectedId, setSelectedId] = React.useState(null);
+  const [simLoading, setSimLoading] = React.useState(simulateInitialLoad);
+
+  React.useEffect(() => {
+    if (!simulateInitialLoad) return;
+    const delay =
+      Math.floor(Math.random() * (maxInitialDelayMs - minInitialDelayMs + 1)) + minInitialDelayMs;
+    const t = setTimeout(() => setSimLoading(false), delay);
+    return () => clearTimeout(t);
+  }, [simulateInitialLoad, minInitialDelayMs, maxInitialDelayMs]);
+
+  const effectiveLoading = loading || simLoading;
+
+  const filtered = React.useMemo(() => {
+    if (!searchable || !query.trim()) return data;
+    const q = query.trim().toLowerCase();
+    return data.filter((row) =>
+      columns.some((col) => {
+        const raw = row?.[col.key];
+        if (raw == null) return false;
+        return String(raw).toLowerCase().includes(q);
+      })
+    );
+  }, [data, columns, query, searchable]);
+
+  const sorted = React.useMemo(() => {
+    if (!sortable || !sortKey) return filtered;
+    const col = columns.find((c) => c.key === sortKey);
+    if (!col) return filtered;
+    const dir = sortDir === "desc" ? -1 : 1;
+    return stableSort(filtered, (a, b) => {
+      const av = a?.[sortKey];
+      const bv = b?.[sortKey];
+      if (av == null && bv == null) return 0;
+      if (av == null) return -1 * dir;
+      if (bv == null) return 1 * dir;
+      if (typeof av === "number" && typeof bv === "number") return (av - bv) * dir;
+      return String(av).localeCompare(String(bv)) * dir;
+    });
+  }, [filtered, sortable, sortKey, sortDir, columns]);
+
+  const total = sorted.length;
+  const totalPages = paginated ? Math.max(1, Math.ceil(total / pageSize)) : 1;
+  const clampedPage = Math.min(page, totalPages);
+
+  const pageData = React.useMemo(() => {
+    if (!paginated) return sorted;
+    const start = (clampedPage - 1) * pageSize;
+    return sorted.slice(start, start + pageSize);
+  }, [sorted, paginated, clampedPage, pageSize]);
+
+  React.useEffect(() => {
+    if (page !== clampedPage) setPage(clampedPage);
+  }, [page, clampedPage]);
+
+  const header = (
+    <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+      <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 flex-col gap-2 sm:flex-row sm:items-center sm:justify-end">
+        {searchable ? (
+          <div className="w-full sm:w-64">
+            <UIInput
+              value={query}
+              onChange={(e) => {
+                setQuery(e.target.value);
+                setPage(1);
+                onSearch?.(e.target.value);
+              }}
+              placeholder="Search…"
+              aria-label="Search table"
+            />
+          </div>
+        ) : null}
+        {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
+      </div>
+    </div>
+  );
+
+  if (error) {
+    return (
+      <BaseCard
+        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 canSort = (col) => sortable && (col.sortable ?? true);
+
+  return (
+    <BaseCard
+      variant="table"
+      header={header}
+      body={
+        <div className="mt-4 overflow-hidden rounded-xl border border-slate-200 dark:border-slate-800">
+          <div className="w-full overflow-x-auto">
+            <table className="min-w-full border-separate border-spacing-0">
+              <thead className="bg-slate-50 dark:bg-slate-950/30">
+                <tr>
+                  {columns.map((col) => {
+                    const active = sortKey === col.key;
+                    return (
+                      <th
+                        key={col.key}
+                        scope="col"
+                        className={[
+                          "whitespace-nowrap border-b border-slate-200 px-4 py-3 text-left text-xs font-semibold text-slate-600 dark:border-slate-800 dark:text-slate-300",
+                          col.className ?? ""
+                        ]
+                          .filter(Boolean)
+                          .join(" ")}
+                      >
+                        {canSort(col) ? (
+                          <button
+                            type="button"
+                            className="inline-flex items-center gap-2 hover:text-slate-900 dark:hover:text-slate-50"
+                            onClick={() => {
+                              const nextDir = active && sortDir === "asc" ? "desc" : "asc";
+                              setSortKey(col.key);
+                              setSortDir(nextDir);
+                              onSort?.({ key: col.key, direction: nextDir });
+                            }}
+                          >
+                            <span>{col.label}</span>
+                            <span className="text-[10px] opacity-70">
+                              {active ? (sortDir === "asc" ? "▲" : "▼") : "↕"}
+                            </span>
+                          </button>
+                        ) : (
+                          col.label
+                        )}
+                      </th>
+                    );
+                  })}
+                  {rowActions ? (
+                    <th className="border-b border-slate-200 px-4 py-3 text-right text-xs font-semibold text-slate-600 dark:border-slate-800 dark:text-slate-300">
+                      Actions
+                    </th>
+                  ) : null}
+                </tr>
+              </thead>
+
+              <tbody className="bg-white dark:bg-slate-900">
+                {effectiveLoading ? (
+                  Array.from({ length: Math.min(pageSize, 6) }).map((_, idx) => (
+                    <tr key={idx}>
+                      {columns.map((col) => (
+                        <td
+                          key={col.key}
+                          className="border-b border-slate-200 px-4 py-3 dark:border-slate-800"
+                        >
+                          <div className="h-4 w-3/4 animate-pulse rounded bg-slate-200 dark:bg-slate-800" />
+                        </td>
+                      ))}
+                      {rowActions ? (
+                        <td className="border-b border-slate-200 px-4 py-3 dark:border-slate-800">
+                          <div className="h-4 w-10 animate-pulse rounded bg-slate-200 dark:bg-slate-800" />
+                        </td>
+                      ) : null}
+                    </tr>
+                  ))
+                ) : pageData.length === 0 ? (
+                  <tr>
+                    <td
+                      colSpan={columns.length + (rowActions ? 1 : 0)}
+                      className="px-4 py-10 text-center text-sm text-slate-600 dark:text-slate-300"
+                    >
+                      {emptyMessage}
+                    </td>
+                  </tr>
+                ) : (
+                  pageData.map((row, idx) => {
+                    const rowId = row?.id ?? idx;
+                    const selected = selectable && selectedId === rowId;
+                    return (
+                      <tr
+                        key={rowId}
+                        className={[
+                          "group",
+                          selectable ? "cursor-pointer" : "",
+                          selected ? "bg-brand-50 dark:bg-brand-950/30" : ""
+                        ]
+                          .filter(Boolean)
+                          .join(" ")}
+                        onClick={() => {
+                          if (!selectable) return;
+                          setSelectedId(rowId);
+                          onRowSelect?.(row);
+                        }}
+                      >
+                        {columns.map((col) => {
+                          const raw = row?.[col.key];
+                          const content = col.render ? col.render(raw, row) : defaultTypeFormat(col.type, raw);
+                          return (
+                            <td
+                              key={col.key}
+                              className={[
+                                "border-b border-slate-200 px-4 py-3 text-sm text-slate-700 dark:border-slate-800 dark:text-slate-200",
+                                col.mono ? "font-mono text-[13px]" : "",
+                                col.className ?? ""
+                              ]
+                                .filter(Boolean)
+                                .join(" ")}
+                            >
+                              {content}
+                            </td>
+                          );
+                        })}
+                        {rowActions ? (
+                          <td className="border-b border-slate-200 px-4 py-3 text-right text-sm dark:border-slate-800">
+                            <div className="inline-flex items-center justify-end gap-2 opacity-100 sm:opacity-0 sm:group-hover:opacity-100">
+                              {rowActions(row)}
+                            </div>
+                          </td>
+                        ) : null}
+                      </tr>
+                    );
+                  })
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          {paginated && !effectiveLoading ? (
+            <div className="flex flex-col gap-2 border-t border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-800 dark:bg-slate-950/30 sm:flex-row sm:items-center sm:justify-between">
+              <div className="text-xs text-slate-600 dark:text-slate-300">
+                {total === 0 ? "0 results" : `Showing ${(clampedPage - 1) * pageSize + 1}-${Math.min(clampedPage * pageSize, total)} of ${total}`}
+              </div>
+              <div className="flex items-center gap-2">
+                <UIButton
+                  variant="outline"
+                  size="sm"
+                  disabled={clampedPage <= 1}
+                  onClick={() => setPage((p) => Math.max(1, p - 1))}
+                >
+                  Prev
+                </UIButton>
+                <div className="text-xs text-slate-600 dark:text-slate-300">
+                  Page {clampedPage} / {totalPages}
+                </div>
+                <UIButton
+                  variant="outline"
+                  size="sm"
+                  disabled={clampedPage >= totalPages}
+                  onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                >
+                  Next
+                </UIButton>
+              </div>
+            </div>
+          ) : null}
+        </div>
+      }
+      {...cardProps}
+    />
+  );
+}
+
+

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

@@ -0,0 +1,90 @@
+import React from "react";
+import BaseCard from "./BaseCard";
+import UIText from "../ui/Text";
+
+function Section({ title, actions, content, divided }) {
+  return (
+    <div className={divided ? "border-t border-slate-200 pt-4 dark:border-slate-800" : ""}>
+      {(title || actions) ? (
+        <div className="mb-3 flex items-start justify-between gap-3">
+          {title ? (
+            <UIText as="div" size="sm" weight="medium">
+              {title}
+            </UIText>
+          ) : (
+            <div />
+          )}
+          {actions ? <div className="shrink-0">{actions}</div> : null}
+        </div>
+      ) : null}
+      <div>{content}</div>
+    </div>
+  );
+}
+
+export default function WidgetCard({
+  header,
+  sections = [],
+  footer,
+  divided = false,
+  collapsible = false,
+  defaultExpanded = true,
+  loading = false,
+  emptyMessage = "No sections.",
+  ...cardProps
+}) {
+  const [expanded, setExpanded] = React.useState(defaultExpanded);
+
+  const hdr = (
+    <div className="flex items-start justify-between gap-3">
+      <div className="min-w-0">{header}</div>
+      {collapsible ? (
+        <button
+          type="button"
+          className="rounded-lg border border-slate-200 bg-white px-2 py-1 text-xs font-semibold text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
+          onClick={() => setExpanded((e) => !e)}
+          aria-expanded={expanded}
+          aria-label="Toggle widget"
+        >
+          {expanded ? "Collapse" : "Expand"}
+        </button>
+      ) : null}
+    </div>
+  );
+
+  const body = (
+    <div className="mt-4 space-y-4">
+      {loading ? (
+        <div className="space-y-3">
+          <div className="h-4 w-1/3 animate-pulse rounded bg-slate-200 dark:bg-slate-800" />
+          <div className="h-4 w-2/3 animate-pulse rounded bg-slate-200 dark:bg-slate-800" />
+          <div className="h-4 w-1/2 animate-pulse rounded bg-slate-200 dark:bg-slate-800" />
+        </div>
+      ) : expanded ? (
+        sections.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>
+        ) : (
+          sections.map((s, idx) => (
+            <Section
+              key={s?.id ?? idx}
+              title={s?.title}
+              actions={s?.actions}
+              content={s?.content}
+              divided={divided && idx !== 0}
+            />
+          ))
+        )
+      ) : (
+        <div className="text-sm text-slate-600 dark:text-slate-300">Collapsed.</div>
+      )}
+
+      {footer ? <div className={divided ? "border-t border-slate-200 pt-4 dark:border-slate-800" : ""}>{footer}</div> : null}
+    </div>
+  );
+
+  return <BaseCard variant="widget" header={hdr} body={body} {...cardProps} />;
+}
+
+