@schandlergarcia/sf-web-components 1.9.28 → 1.9.30

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

@@ -1,128 +0,0 @@
-import React from "react";
-import BaseCard, { BaseCardProps } from "./BaseCard";
-
-type ChangeType = "positive" | "negative" | "neutral";
-type Color = "default" | "primary" | "success" | "warning" | "danger";
-type Layout = "default" | "compact";
-
-const CHANGE_STYLES: Record<ChangeType, string> = {
-  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: Record<Color, string> = {
-  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 interface MetricCardProps extends Omit<BaseCardProps, "variant" | "padding" | "size" | "header" | "body" | "footer"> {
-  title: string;
-  value: string | number;
-  subtitle?: string;
-  change?: string | number;
-  changeType?: ChangeType;
-  icon?: React.ReactNode;
-  color?: Color;
-  trend?: string;
-  trendIcon?: React.ReactNode;
-  layout?: Layout;
-  footer?: React.ReactNode;
-  actions?: React.ReactNode;
-  loading?: boolean;
-  error?: string | Error;
-}
-
-export default function MetricCard({
-  title,
-  value,
-  subtitle,
-  change,
-  changeType = "neutral",
-  icon,
-  color = "default",
-  trend,
-  trendIcon,
-  layout = "default",
-  footer,
-  actions,
-  loading = false,
-  error,
-  ...cardProps
-}: MetricCardProps) {
-  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.tsx

@@ -1,88 +0,0 @@
-import { useState } from "react";
-
-const PLACEHOLDER_METRICS = [
-  { label: "Metric A", value: "—", trend: null },
-  { label: "Metric B", value: "—", trend: null },
-  { label: "Metric C", value: "—", trend: null },
-];
-
-export interface Metric {
-  label: string;
-  value: string | number;
-  trend?: string | number | null;
-}
-
-export interface MetricsStripProps {
-  metrics?: Metric[];
-  title?: string;
-  collapsible?: boolean;
-  collapsed?: boolean;
-  className?: string;
-}
-
-export default function MetricsStrip({
-  metrics = [],
-  title,
-  collapsible = false,
-  collapsed: initialCollapsed = false,
-  className = "",
-}: MetricsStripProps) {
-  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>
-  );
-}
-
-interface TrendBadgeProps {
-  trend: string | number;
-}
-
-function TrendBadge({ trend }: TrendBadgeProps) {
-  const isPositive = String(trend).startsWith?.("+") || (typeof trend === "number" && 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.tsx

@@ -1,102 +0,0 @@
-import BaseCard, { BaseCardProps } from "./BaseCard";
-import UIText from "../ui/Text";
-
-type Variant = "default" | "primary" | "secondary" | "accent";
-type Size = "sm" | "md" | "lg" | "xl";
-type Alignment = "left" | "center" | "right";
-
-const VARIANT_STYLES: Record<Variant, string> = {
-  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"
-};
-
-interface SizeConfig {
-  title: string;
-  desc: string;
-  pad: string;
-}
-
-const SIZE_STYLES: Record<Size, SizeConfig> = {
-  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: Record<Alignment, string> = {
-  left: "text-left items-start",
-  center: "text-center items-center",
-  right: "text-right items-end"
-};
-
-export interface SectionCardProps extends Omit<BaseCardProps, "variant" | "padding" | "body"> {
-  title?: string;
-  description?: string;
-  label?: string;
-  variant?: Variant;
-  showDivider?: boolean;
-  alignment?: Alignment;
-  size?: Size;
-  isDark?: boolean;
-  className?: string;
-}
-
-export default function SectionCard({
-  title,
-  description,
-  label,
-  variant = "default",
-  showDivider = true,
-  alignment = "left",
-  size = "md",
-  isDark = false,
-  className = "",
-  ...cardProps
-}: SectionCardProps) {
-  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.tsx

@@ -1,64 +0,0 @@
-import React from "react";
-import MetricCard, { MetricCardProps } from "./MetricCard";
-import { getSemanticMetric } from "../data/chartDataProvider";
-
-export interface SemanticMetricCardProps extends Omit<MetricCardProps, "value"> {
-  semanticId: string;
-  metricId?: string;
-  value?: string | number;
-  unit?: string;
-  format?: string;
-  changeLabel?: string;
-  description?: string;
-  seriesName?: string;
-  availableFilters?: string[];
-  showFilters?: boolean;
-  compact?: boolean;
-}
-
-export default function SemanticMetricCard({
-  semanticId,
-  metricId,
-  title,
-  subtitle,
-  value,
-  unit,
-  format,
-  trend,
-  change,
-  changeLabel,
-  description,
-  seriesName,
-  availableFilters,
-  showFilters,
-  compact,
-  className,
-  loading = false,
-  ...rest
-}: SemanticMetricCardProps) {
-  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";
-
-  return (
-    <MetricCard
-      title={resolvedTitle}
-      subtitle={resolvedSubtitle}
-      value={resolvedValue}
-      change={changeLabel ? `${changeLabel} ${resolvedChange ?? ""}`.trim() : resolvedChange}
-      changeType={resolvedChangeType}
-      color={resolvedColor}
-      trend={resolvedTrend}
-      layout={compact ? "compact" : "default"}
-      loading={loading}
-      className={className}
-      {...rest}
-    />
-  );
-}

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

@@ -1,29 +0,0 @@
-import React from "react";
-import SemanticMetricCard, { SemanticMetricCardProps } from "./SemanticMetricCard";
-
-export interface SemanticMetricCardWithLoadingProps extends SemanticMetricCardProps {
-  simulateInitialLoad?: boolean;
-  minInitialDelayMs?: number;
-  maxInitialDelayMs?: number;
-  loading?: boolean;
-}
-
-export default function SemanticMetricCardWithLoading({
-  simulateInitialLoad = true,
-  minInitialDelayMs = 350,
-  maxInitialDelayMs = 900,
-  loading: loadingProp,
-  ...props
-}: SemanticMetricCardWithLoadingProps) {
-  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.tsx

@@ -1,59 +0,0 @@
-import React from "react";
-import TableCard, { TableCardProps, TableColumn } from "./TableCard";
-import { getSemanticDataset } from "../data/chartDataProvider";
-
-export interface SemanticTableCardProps extends Omit<TableCardProps, "data" | "columns"> {
-  semanticId: string;
-  dataOverride?: Record<string, unknown>[];
-  columnsOverride?: TableColumn[];
-  compact?: boolean;
-  striped?: boolean;
-  isDark?: boolean;
-  simulateInitialLoad?: boolean;
-  minInitialDelayMs?: number;
-  maxInitialDelayMs?: number;
-}
-
-export default function SemanticTableCard({
-  semanticId,
-  dataOverride,
-  columnsOverride,
-  title,
-  subtitle,
-  searchable = true,
-  sortable = true,
-  paginated = true,
-  pageSize = 10,
-  compact,
-  striped,
-  isDark,
-  simulateInitialLoad,
-  minInitialDelayMs,
-  maxInitialDelayMs,
-  ...rest
-}: SemanticTableCardProps) {
-  const ds = React.useMemo(() => getSemanticDataset(semanticId), [semanticId]);
-  const table = ds?.table;
-
-  const resolvedColumns = (columnsOverride ?? table?.columns ?? []) as TableColumn[];
-  const resolvedData = (dataOverride ?? table?.rows ?? []) as Record<string, unknown>[];
-  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.tsx

@@ -1,26 +0,0 @@
-import SemanticTableCard, { SemanticTableCardProps } from "./SemanticTableCard";
-
-export interface SemanticTableCardWithLoadingProps extends SemanticTableCardProps {
-  simulateInitialLoad?: boolean;
-  minInitialDelayMs?: number;
-  maxInitialDelayMs?: number;
-  loading?: boolean;
-}
-
-export default function SemanticTableCardWithLoading({
-  simulateInitialLoad = true,
-  minInitialDelayMs = 350,
-  maxInitialDelayMs = 900,
-  loading: loadingProp,
-  ...props
-}: SemanticTableCardWithLoadingProps) {
-  return (
-    <SemanticTableCard
-      {...props}
-      loading={loadingProp}
-      simulateInitialLoad={simulateInitialLoad}
-      minInitialDelayMs={minInitialDelayMs}
-      maxInitialDelayMs={maxInitialDelayMs}
-    />
-  );
-}