@schandlergarcia/sf-web-components 1.9.28 → 1.9.30

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

@@ -1,269 +0,0 @@
-import React from "react";
-import BaseCard, { BaseCardProps } from "./BaseCard";
-import UIText from "../ui/Text";
-
-type Status = "operational" | "degraded" | "outage" | "maintenance";
-type Layout = "list" | "grid" | "timeline";
-
-interface StatusMeta {
-  label: string;
-  dot: string;
-  chip: string;
-}
-
-const STATUS_META: Record<Status, StatusMeta> = {
-  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: string | undefined): 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 as Status] ? (s as Status) : "operational";
-}
-
-function formatTimestamp(ts: string | Date | undefined): string {
-  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);
-  }
-}
-
-interface StatusChipProps {
-  status: string | undefined;
-}
-
-function StatusChip({ status }: StatusChipProps) {
-  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>
-  );
-}
-
-export interface StatusItem {
-  id?: string | number;
-  title?: string;
-  name?: string;
-  description?: string;
-  status?: string;
-  timestamp?: string | Date;
-  value?: string | number;
-  unit?: string;
-}
-
-interface ItemRowProps {
-  item: StatusItem;
-  showTimestamp: boolean;
-}
-
-function ItemRow({ item, showTimestamp }: ItemRowProps) {
-  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>
-  );
-}
-
-interface TimelineProps {
-  items: StatusItem[];
-  showTimestamp: boolean;
-}
-
-function Timeline({ items, showTimestamp }: TimelineProps) {
-  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 interface StatusCardProps extends Omit<BaseCardProps, "variant" | "header" | "body"> {
-  title?: string;
-  subtitle?: string;
-  status?: string;
-  items?: StatusItem[];
-  layout?: Layout;
-  showProgress?: boolean;
-  showTimestamp?: boolean;
-  actions?: React.ReactNode;
-  loading?: boolean;
-  error?: string | Error;
-  emptyMessage?: string;
-  maxBodyHeight?: string | number;
-}
-
-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
-}: StatusCardProps) {
-  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: React.CSSProperties = maxBodyHeight
-    ? { maxHeight: typeof maxBodyHeight === "number" ? `${maxBodyHeight}px` : 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.tsx

@@ -1,376 +0,0 @@
-import React from "react";
-import BaseCard, { BaseCardProps } from "./BaseCard";
-import UIInput from "../ui/UIInput";
-import UIButton from "../ui/UIButton";
-import UIText from "../ui/Text";
-
-type ColumnType = "currency" | "percentage" | "number" | "text";
-
-function defaultTypeFormat(type: ColumnType | undefined, value: unknown): string {
-  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<T>(data: T[], compare: (a: T, b: T) => number): T[] {
-  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 interface TableColumn {
-  key: string;
-  label: string;
-  type?: ColumnType;
-  sortable?: boolean;
-  mono?: boolean;
-  className?: string;
-  render?: (value: unknown, row: Record<string, unknown>) => React.ReactNode;
-}
-
-export interface SortState {
-  key: string;
-  direction: "asc" | "desc";
-}
-
-export interface TableCardProps extends Omit<BaseCardProps, "variant" | "header" | "body"> {
-  data?: Record<string, unknown>[];
-  columns?: TableColumn[];
-  title?: string;
-  subtitle?: string;
-  searchable?: boolean;
-  sortable?: boolean;
-  paginated?: boolean;
-  selectable?: boolean;
-  pageSize?: number;
-  actions?: React.ReactNode;
-  rowActions?: (row: Record<string, unknown>) => React.ReactNode;
-  onRowSelect?: (row: Record<string, unknown>) => void;
-  onSort?: (sort: SortState) => void;
-  onSearch?: (query: string) => void;
-  loading?: boolean;
-  error?: string | Error;
-  emptyMessage?: string;
-  simulateInitialLoad?: boolean;
-  minInitialDelayMs?: number;
-  maxInitialDelayMs?: number;
-}
-
-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
-}: TableCardProps) {
-  const [query, setQuery] = React.useState("");
-  const [sortKey, setSortKey] = React.useState<string | null>(null);
-  const [sortDir, setSortDir] = React.useState<"asc" | "desc">("asc");
-  const [page, setPage] = React.useState(1);
-  const [selectedId, setSelectedId] = React.useState<string | number | undefined>(undefined);
-  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: TableColumn) => 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 rawId = row?.id;
-                    const rowId: string | number = typeof rawId === "string" || typeof rawId === "number" ? rawId : idx;
-                    const selected = selectable && selectedId === rowId;
-                    return (
-                      <tr
-                        key={String(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}
-    />
-  );
-}