@schandlergarcia/sf-web-components 1.2.6 → 1.2.8

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

@@ -0,0 +1,337 @@
+import React from "react";
+import BaseCard from "./BaseCard";
+import UIInput from "../ui/UIInput";
+import UIButton from "../ui/UIButton";
+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} />;
+}
+
+

package/src/components/library/charts/D3Chart.jsx

@@ -0,0 +1,109 @@
+import React from "react";
+
+/**
+ * Minimal D3 chart host:
+ * - Owns the <svg> element
+ * - Computes responsive dimensions from container size
+ * - Calls renderChart(svgEl, data, dims, options)
+ */
+export default function D3Chart({
+  data,
+  renderChart,
+  options = {},
+  width,
+  height = 280,
+  responsive = false,
+  aspectRatio,
+  className = "",
+  style,
+  containerStyle,
+  svgStyle,
+  loading = false,
+  error,
+  ariaLabel = "Chart"
+}) {
+  const containerRef = React.useRef(null);
+  const svgRef = React.useRef(null);
+  const [containerWidth, setContainerWidth] = React.useState(null);
+
+  React.useEffect(() => {
+    if (!responsive) return;
+    const el = containerRef.current;
+    if (!el) return;
+
+    const obs = new ResizeObserver((entries) => {
+      const w = entries?.[0]?.contentRect?.width;
+      if (typeof w === "number" && Number.isFinite(w)) setContainerWidth(w);
+    });
+    obs.observe(el);
+    return () => obs.disconnect();
+  }, [responsive]);
+
+  const computedWidth = responsive ? containerWidth : width;
+  const computedHeight = React.useMemo(() => {
+    if (!responsive) return height;
+    if (!containerWidth) return height;
+    if (aspectRatio && Number.isFinite(aspectRatio) && aspectRatio > 0) return containerWidth / aspectRatio;
+    return height;
+  }, [responsive, containerWidth, height, aspectRatio]);
+
+  React.useEffect(() => {
+    if (loading || error) return;
+    if (!renderChart) return;
+    const svgEl = svgRef.current;
+    if (!svgEl) return;
+
+    const dims = {
+      width: computedWidth ?? 0,
+      height: computedHeight ?? 0
+    };
+
+    // Avoid calling renderChart before we have a measurable width in responsive mode
+    if (responsive && (!dims.width || dims.width < 10)) return;
+    if (!dims.height || dims.height < 10) return;
+
+    renderChart(svgEl, data, dims, options);
+  }, [data, renderChart, options, computedWidth, computedHeight, responsive, loading, error]);
+
+  if (error) {
+    return (
+      <div
+        ref={containerRef}
+        className={["w-full 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", className]
+          .filter(Boolean)
+          .join(" ")}
+        style={containerStyle}
+      >
+        {String(error)}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={["w-full", className].filter(Boolean).join(" ")}
+      style={{ ...containerStyle, position: "relative" }}
+    >
+      {loading ? (
+        <div className="h-full w-full rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+          <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-44 w-full animate-pulse rounded bg-slate-200 dark:bg-slate-800" />
+          </div>
+        </div>
+      ) : (
+        <svg
+          ref={svgRef}
+          role="img"
+          aria-label={ariaLabel}
+          width={computedWidth ?? width ?? "100%"}
+          height={computedHeight}
+          style={{ ...svgStyle, ...style, display: "block" }}
+        />
+      )}
+    </div>
+  );
+}
+
+

package/src/components/library/charts/D3ChartTemplates.jsx

@@ -0,0 +1,126 @@
+import * as d3 from "d3";
+
+function clear(svg) {
+  d3.select(svg).selectAll("*").remove();
+}
+
+export const D3ChartTemplates = {
+  lineChart(svg, data, dims, opts = {}) {
+    const {
+      xKey = "x",
+      yKey = "y",
+      margin = { top: 12, right: 16, bottom: 28, left: 40 },
+      stroke = "#6366F1",
+      strokeWidth = 2,
+      showAxes = true,
+      showGrid = true
+    } = opts;
+
+    clear(svg);
+
+    const width = dims.width;
+    const height = dims.height;
+    const innerW = Math.max(0, width - margin.left - margin.right);
+    const innerH = Math.max(0, height - margin.top - margin.bottom);
+
+    const g = d3.select(svg).attr("viewBox", `0 0 ${width} ${height}`).append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const xs = data.map((d) => d?.[xKey]).filter((v) => v != null);
+    const ys = data.map((d) => d?.[yKey]).filter((v) => v != null);
+
+    const xDomain = d3.extent(xs);
+    const yDomain = d3.extent(ys);
+
+    const x = d3.scaleLinear().domain(xDomain).nice().range([0, innerW]);
+    const y = d3.scaleLinear().domain(yDomain).nice().range([innerH, 0]);
+
+    if (showGrid) {
+      g.append("g")
+        .attr("class", "grid")
+        .call(d3.axisLeft(y).ticks(5).tickSize(-innerW).tickFormat(""))
+        .call((grid) => grid.selectAll("line").attr("stroke", "currentColor").attr("opacity", 0.12))
+        .call((grid) => grid.selectAll("path").attr("stroke", "none"));
+    }
+
+    const line = d3
+      .line()
+      .x((d) => x(d[xKey]))
+      .y((d) => y(d[yKey]))
+      .defined((d) => d?.[xKey] != null && d?.[yKey] != null);
+
+    g.append("path")
+      .datum(data)
+      .attr("fill", "none")
+      .attr("stroke", stroke)
+      .attr("stroke-width", strokeWidth)
+      .attr("d", line);
+
+    if (showAxes) {
+      g.append("g")
+        .attr("transform", `translate(0,${innerH})`)
+        .call(d3.axisBottom(x).ticks(6))
+        .call((ax) => ax.selectAll("text").attr("font-size", 10));
+
+      g.append("g")
+        .call(d3.axisLeft(y).ticks(5))
+        .call((ax) => ax.selectAll("text").attr("font-size", 10));
+    }
+  },
+
+  groupedBarChart(svg, data, dims, opts = {}) {
+    const {
+      groups = [],
+      margin = { top: 20, right: 20, bottom: 40, left: 55 },
+      xKey = "x",
+      colors = ["#6366F1", "#CBD5E1"],
+      barRadius = 4,
+      yFormat = ",.0f",
+      showGrid = true,
+    } = opts;
+
+    clear(svg);
+
+    const width = dims.width;
+    const height = dims.height;
+    const innerW = Math.max(0, width - margin.left - margin.right);
+    const innerH = Math.max(0, height - margin.top - margin.bottom);
+
+    const sel = d3.select(svg).attr("viewBox", `0 0 ${width} ${height}`);
+    const g = sel.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const groupKeys = groups.length ? groups : Object.keys(data[0] || {}).filter((k) => k !== xKey);
+
+    const x0 = d3.scaleBand().domain(data.map((d) => d[xKey])).range([0, innerW]).padding(0.3);
+    const x1 = d3.scaleBand().domain(groupKeys).range([0, x0.bandwidth()]).padding(0.05);
+    const yMax = d3.max(data, (d) => d3.max(groupKeys, (k) => d[k])) * 1.15;
+    const y = d3.scaleLinear().domain([0, yMax]).range([innerH, 0]);
+
+    g.append("g")
+      .attr("transform", `translate(0,${innerH})`)
+      .call(d3.axisBottom(x0).tickSize(0))
+      .call((ax) => ax.selectAll("text").attr("fill", "#94a3b8").attr("font-size", "11px"))
+      .call((ax) => ax.select(".domain").remove());
+
+    g.append("g")
+      .call(d3.axisLeft(y).ticks(5).tickFormat(d3.format(yFormat)).tickSize(showGrid ? -innerW : 0))
+      .call((ax) => ax.selectAll("text").attr("fill", "#94a3b8").attr("font-size", "10px"))
+      .call((ax) => ax.selectAll(".tick line").attr("stroke", "#e2e8f0").attr("stroke-dasharray", "2,2"))
+      .call((ax) => ax.select(".domain").remove());
+
+    const rows = g.selectAll(".bar-group").data(data).join("g")
+      .attr("class", "bar-group")
+      .attr("transform", (d) => `translate(${x0(d[xKey])},0)`);
+
+    groupKeys.forEach((key, i) => {
+      rows.append("rect")
+        .attr("x", x1(key))
+        .attr("y", (d) => y(d[key]))
+        .attr("width", x1.bandwidth())
+        .attr("height", (d) => innerH - y(d[key]))
+        .attr("rx", barRadius)
+        .attr("fill", colors[i % colors.length]);
+    });
+  },
+};
+
+