@schandlergarcia/sf-web-components 1.9.28 → 1.9.30

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

@@ -1,113 +0,0 @@
-import React from "react";
-import BaseCard, { BaseCardProps } from "./BaseCard";
-import UIText from "../ui/Text";
-
-export interface WidgetSection {
-  id?: string | number;
-  title?: string;
-  actions?: React.ReactNode;
-  content: React.ReactNode;
-}
-
-interface SectionProps {
-  title?: string;
-  actions?: React.ReactNode;
-  content: React.ReactNode;
-  divided: boolean;
-}
-
-function Section({ title, actions, content, divided }: SectionProps) {
-  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 interface WidgetCardProps extends Omit<BaseCardProps, "variant" | "header" | "body"> {
-  header: React.ReactNode;
-  sections?: WidgetSection[];
-  footer?: React.ReactNode;
-  divided?: boolean;
-  collapsible?: boolean;
-  defaultExpanded?: boolean;
-  loading?: boolean;
-  emptyMessage?: string;
-}
-
-export default function WidgetCard({
-  header,
-  sections = [],
-  footer,
-  divided = false,
-  collapsible = false,
-  defaultExpanded = true,
-  loading = false,
-  emptyMessage = "No sections.",
-  ...cardProps
-}: WidgetCardProps) {
-  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.tsx

@@ -1,129 +0,0 @@
-import React from "react";
-
-interface Dimensions {
-  width: number;
-  height: number;
-}
-
-export interface D3ChartProps {
-  data: unknown;
-  renderChart?: (svg: SVGSVGElement, data: unknown, dims: Dimensions, options: Record<string, unknown>) => void;
-  options?: Record<string, unknown>;
-  width?: number;
-  height?: number;
-  responsive?: boolean;
-  aspectRatio?: number;
-  className?: string;
-  style?: React.CSSProperties;
-  containerStyle?: React.CSSProperties;
-  svgStyle?: React.CSSProperties;
-  loading?: boolean;
-  error?: string | Error;
-  ariaLabel?: string;
-}
-
-/**
- * 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"
-}: D3ChartProps): React.ReactElement {
-  const containerRef = React.useRef<HTMLDivElement>(null);
-  const svgRef = React.useRef<SVGSVGElement>(null);
-  const [containerWidth, setContainerWidth] = React.useState<number | null>(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: Dimensions = {
-      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.tsx

@@ -1,158 +0,0 @@
-import * as d3 from "d3";
-
-interface Dimensions {
-  width: number;
-  height: number;
-}
-
-interface Margin {
-  top: number;
-  right: number;
-  bottom: number;
-  left: number;
-}
-
-interface LineChartOptions {
-  xKey?: string;
-  yKey?: string;
-  margin?: Margin;
-  stroke?: string;
-  strokeWidth?: number;
-  showAxes?: boolean;
-  showGrid?: boolean;
-}
-
-interface GroupedBarChartOptions {
-  groups?: string[];
-  margin?: Margin;
-  xKey?: string;
-  colors?: string[];
-  barRadius?: number;
-  yFormat?: string;
-  showGrid?: boolean;
-}
-
-type DataPoint = Record<string, unknown>;
-
-function clear(svg: SVGSVGElement): void {
-  d3.select(svg).selectAll("*").remove();
-}
-
-export const D3ChartTemplates = {
-  lineChart(svg: SVGSVGElement, data: DataPoint[], dims: Dimensions, opts: LineChartOptions = {}): void {
-    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) as number[];
-    const ys = data.map((d) => d?.[yKey]).filter((v) => v != null) as number[];
-
-    const xDomain = d3.extent(xs) as [number, number];
-    const yDomain = d3.extent(ys) as [number, number];
-
-    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: d3.Selection<SVGGElement, unknown, null, undefined>) => grid.selectAll("line").attr("stroke", "currentColor").attr("opacity", 0.12))
-        .call((grid: d3.Selection<SVGGElement, unknown, null, undefined>) => grid.selectAll("path").attr("stroke", "none"));
-    }
-
-    const line = d3
-      .line<DataPoint>()
-      .x((d) => x(d[xKey] as number))
-      .y((d) => y(d[yKey] as number))
-      .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: d3.Selection<SVGGElement, unknown, null, undefined>) => ax.selectAll("text").attr("font-size", 10));
-
-      g.append("g")
-        .call(d3.axisLeft(y).ticks(5))
-        .call((ax: d3.Selection<SVGGElement, unknown, null, undefined>) => ax.selectAll("text").attr("font-size", 10));
-    }
-  },
-
-  groupedBarChart(svg: SVGSVGElement, data: DataPoint[], dims: Dimensions, opts: GroupedBarChartOptions = {}): void {
-    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: DataPoint) => String(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: DataPoint) => d3.max(groupKeys, (k: string) => d[k] as number)) ?? 0) * 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: d3.Selection<SVGGElement, unknown, null, undefined>) => ax.selectAll("text").attr("fill", "#94a3b8").attr("font-size", "11px"))
-      .call((ax: d3.Selection<SVGGElement, unknown, null, undefined>) => ax.select(".domain").remove());
-
-    g.append("g")
-      .call(d3.axisLeft(y).ticks(5).tickFormat(d3.format(yFormat)).tickSize(showGrid ? -innerW : 0))
-      .call((ax: d3.Selection<SVGGElement, unknown, null, undefined>) => ax.selectAll("text").attr("fill", "#94a3b8").attr("font-size", "10px"))
-      .call((ax: d3.Selection<SVGGElement, unknown, null, undefined>) => ax.selectAll(".tick line").attr("stroke", "#e2e8f0").attr("stroke-dasharray", "2,2"))
-      .call((ax: d3.Selection<SVGGElement, unknown, null, undefined>) => ax.select(".domain").remove());
-
-    const rows = g.selectAll(".bar-group").data(data).join("g")
-      .attr("class", "bar-group")
-      .attr("transform", (d: DataPoint) => `translate(${x0(String(d[xKey]))},0)`);
-
-    groupKeys.forEach((key, i) => {
-      rows.append("rect")
-        .attr("x", x1(key) ?? 0)
-        .attr("y", (d: DataPoint) => y(d[key] as number))
-        .attr("width", x1.bandwidth())
-        .attr("height", (d: DataPoint) => innerH - y(d[key] as number))
-        .attr("rx", barRadius)
-        .attr("fill", colors[i % colors.length]);
-    });
-  },
-};