@schandlergarcia/sf-web-components 1.9.37 → 1.9.39

package/src/components/library/ui/Select.tsx

@@ -0,0 +1,113 @@
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger>) {
+  return (
+    <SelectPrimitive.Trigger
+      className={[
+        "flex h-10 w-full items-center justify-between rounded-lg border border-slate-200 bg-white px-3 py-2",
+        "text-sm text-slate-900 placeholder:text-slate-400",
+        "focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:focus:ring-offset-slate-950",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
+          <path
+            d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.26618 11.9026 7.38064 11.95 7.49999 11.95C7.61933 11.95 7.73379 11.9026 7.81819 11.8182L10.0682 9.56819Z"
+            fill="currentColor"
+          />
+        </svg>
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value {...props} />;
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        className={[
+          "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white text-slate-900 shadow-md",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        ].filter(Boolean).join(" ")}
+        position={position}
+        {...props}
+      >
+        <SelectPrimitive.Viewport
+          className={[
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ].filter(Boolean).join(" ")}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      className={[
+        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+        "focus:bg-slate-100 focus:text-slate-900",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "dark:focus:bg-slate-800 dark:focus:text-slate-50",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
+            <path
+              d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+              fill="currentColor"
+            />
+          </svg>
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+export {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+};

package/src/components/library/ui/Spinner.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+
+interface SpinnerProps extends React.SVGAttributes<SVGSVGElement> {
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  tone?: "brand" | "white" | "muted" | "current";
+  label?: string;
+  className?: string;
+}
+
+export default function Spinner(props: SpinnerProps): React.JSX.Element;

package/src/components/library/ui/Spinner.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+
+const SIZE_CLASSES = {
+  xs: "h-3 w-3",
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6",
+  xl: "h-8 w-8",
+};
+
+const TONE_CLASSES = {
+  brand: "text-brand-500",
+  white: "text-white",
+  muted: "text-slate-400 dark:text-slate-500",
+  current: "text-current",
+};
+
+/**
+ * Animated spinner.
+ *
+ * @param {"xs"|"sm"|"md"|"lg"|"xl"} size
+ * @param {"brand"|"white"|"muted"|"current"} tone
+ * @param {string} label — screen-reader label
+ */
+export default function Spinner({
+  size = "md",
+  tone = "brand",
+  label = "Loading",
+  className = "",
+  ...rest
+}) {
+  return (
+    <svg
+      {...rest}
+      className={[
+        "animate-spin",
+        SIZE_CLASSES[size] ?? SIZE_CLASSES.md,
+        TONE_CLASSES[tone] ?? TONE_CLASSES.brand,
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      role="status"
+      aria-label={label}
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  );
+}

package/src/components/library/ui/Text.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+const SIZE_CLASSES = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  xxl: "text-2xl"
+};
+
+const WEIGHT_CLASSES = {
+  regular: "font-normal",
+  medium: "font-medium",
+  bold: "font-semibold"
+};
+
+export default function UIText({
+  as: Comp = "span",
+  size = "md",
+  weight = "regular",
+  muted = false,
+  style,
+  className = "",
+  children,
+  ...rest
+}) {
+  return (
+    <Comp
+      style={style}
+      className={[
+        SIZE_CLASSES[size] ?? SIZE_CLASSES.md,
+        WEIGHT_CLASSES[weight] ?? WEIGHT_CLASSES.regular,
+        muted ? "text-slate-600 dark:text-slate-300" : "text-slate-900 dark:text-slate-50",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      {children}
+    </Comp>
+  );
+}
+
+

package/src/components/library/ui/Toggle.jsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { useThemeMode } from "../theme/AppThemeProvider";
+
+export default function UIToggle({ label = "Dark mode", style, className = "" }) {
+  const { mode, toggle } = useThemeMode();
+  const isDark = mode === "dark";
+
+  return (
+    <button
+      type="button"
+      onClick={toggle}
+      style={style}
+      className={[
+        "inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm",
+        "hover:bg-slate-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950",
+        "dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:hover:bg-slate-800",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      aria-pressed={isDark}
+      aria-label={label}
+    >
+      <span
+        className={[
+          "inline-flex h-5 w-9 items-center rounded-full border transition",
+          isDark ? "border-brand-400 bg-brand-500" : "border-slate-300 bg-slate-200"
+        ].join(" ")}
+      >
+        <span
+          className={[
+            "h-4 w-4 rounded-full bg-white shadow-sm transition",
+            isDark ? "translate-x-4" : "translate-x-1"
+          ].join(" ")}
+        />
+      </span>
+      <span className="hidden sm:inline">{label}</span>
+    </button>
+  );
+}
+
+

package/src/components/workspace/ComponentRegistry.jsx

@@ -0,0 +1,297 @@
+import React from "react";
+import {
+  BaseCard,
+  MetricCard,
+  TableCard,
+  ChartCard,
+  D3Chart,
+  D3ChartTemplates,
+  StatusCard,
+  ListCard,
+  UIButton,
+  UIChip,
+  UIText
+} from "@/components/library";
+
+const BUILTIN_COMPONENTS = {
+  NarrativeSummary({ summary, title }) {
+    return (
+      <div className="text-sm text-slate-600 dark:text-slate-300">
+        {title && <div className="mb-1 font-medium text-slate-900 dark:text-slate-50">{title}</div>}
+        {summary}
+      </div>
+    );
+  },
+
+  MetricsStrip({ metrics = [], title, collapsible = false, collapsed: initialCollapsed = false }) {
+    const [collapsed, setCollapsed] = React.useState(initialCollapsed);
+
+    const items = metrics.length ? metrics : [
+      { label: "Metric A", value: "—", trend: null },
+      { label: "Metric B", value: "—", trend: null },
+      { label: "Metric C", value: "—", trend: null }
+    ];
+
+    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"
+        >
+          <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">
+        {(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 && (
+                  <span className={`text-xs ${String(m.trend).startsWith?.("+") || m.trend > 0 ? "text-red-500" : "text-emerald-500"}`}>
+                    {typeof m.trend === "number" ? (m.trend > 0 ? `+${m.trend}` : m.trend) : m.trend}
+                  </span>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+
+  ItemList({ items = [], title, onItemClick }) {
+    const [expanded, setExpanded] = React.useState(null);
+    if (!items.length) {
+      return <div className="text-sm text-slate-500 dark:text-slate-400">No items.</div>;
+    }
+    return (
+      <div className="space-y-2">
+        {title && (
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium text-slate-900 dark:text-slate-50">{title}</span>
+            <span className="text-xs text-slate-400 dark:text-slate-500">{items.length} items</span>
+          </div>
+        )}
+        <div className="space-y-1.5">
+          {items.map((item, idx) => (
+            <div key={item.id ?? idx} className="rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
+              <button
+                type="button"
+                onClick={() => {
+                  setExpanded(expanded === (item.id ?? idx) ? null : (item.id ?? idx));
+                  onItemClick?.(item);
+                }}
+                className="flex w-full items-start justify-between gap-3 p-3 text-left"
+              >
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="text-sm font-medium text-slate-900 dark:text-slate-50">
+                      {item.title ?? item.name ?? `Item ${idx + 1}`}
+                    </div>
+                    {item.status && (
+                      <UIChip tone={item.status === "critical" ? "danger" : item.status === "warning" ? "warning" : "neutral"} className="shrink-0">
+                        {item.status}
+                      </UIChip>
+                    )}
+                  </div>
+                  {item.description && (
+                    <div className="mt-1 text-xs text-slate-500 dark:text-slate-400">{item.description}</div>
+                  )}
+                </div>
+              </button>
+              {expanded === (item.id ?? idx) && item.actions && (
+                <div className="border-t border-slate-100 px-3 py-2 dark:border-slate-800">
+                  <div className="flex flex-wrap gap-1.5">
+                    {item.actions.map((action, i) => (
+                      <button
+                        key={typeof action === "string" ? action : action.label}
+                        type="button"
+                        className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${
+                          i === 0
+                            ? "bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-200"
+                            : "bg-slate-100 text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
+                        }`}
+                      >
+                        {typeof action === "string" ? action : action.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+
+  DataTable({ title, subtitle, columns = [], data = [], rows, searchable = true, sortable = true, paginated = true, pageSize = 5 }) {
+    const tableData = data.length ? data : (rows ?? []);
+    const cols = columns.length ? columns : [
+      { key: "name", label: "Name" },
+      { key: "status", label: "Status" },
+      { key: "value", label: "Value" }
+    ];
+    return (
+      <TableCard
+        title={title ?? "Data"}
+        subtitle={subtitle}
+        columns={cols}
+        data={tableData}
+        searchable={searchable}
+        sortable={sortable}
+        paginated={paginated}
+        pageSize={pageSize}
+      />
+    );
+  },
+
+  DataChart({ title, subtitle, chartType = "line", data = [], height = 200 }) {
+    const series = data.length ? data : Array.from({ length: 12 }, (_, i) => ({ x: i, y: Math.random() * 100 }));
+    return (
+      <ChartCard
+        title={title ?? "Trend"}
+        subtitle={subtitle ?? "Data visualization"}
+        chartType={chartType}
+        height={height}
+        chart={
+          <D3Chart
+            data={series}
+            responsive
+            height={height}
+            ariaLabel={title}
+            renderChart={(svg, d, dims, opts) => D3ChartTemplates.lineChart(svg, d, dims, opts)}
+            options={{ xKey: "x", yKey: "y", showGrid: true, showAxes: true }}
+          />
+        }
+      />
+    );
+  },
+
+  MetricCard({ title, label, value, trend, change, changeType, color, icon, description }) {
+    return (
+      <MetricCard
+        title={title ?? label}
+        value={value ?? "—"}
+        trend={trend}
+        change={change}
+        changeType={changeType}
+        color={color}
+        icon={icon}
+        description={description}
+      />
+    );
+  },
+
+  StatusCard({ title, subtitle, status, items, layout, showProgress, showTimestamp }) {
+    return (
+      <StatusCard
+        title={title}
+        subtitle={subtitle}
+        status={status}
+        items={items}
+        layout={layout}
+        showProgress={showProgress}
+        showTimestamp={showTimestamp}
+      />
+    );
+  },
+
+  ActionList({ actions = [], title, onAction }) {
+    return (
+      <div className="rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
+        {title && <div className="mb-3 text-sm font-medium text-slate-900 dark:text-slate-50">{title}</div>}
+        <div className="flex flex-wrap gap-2">
+          {actions.map((action, i) => (
+            <UIButton
+              key={i}
+              size="sm"
+              variant={i === 0 ? "primary" : "outline"}
+              onClick={() => onAction?.(action)}
+            >
+              {typeof action === "string" ? action : action.label}
+            </UIButton>
+          ))}
+        </div>
+      </div>
+    );
+  },
+
+  CalloutCard({ title, message, tone = "neutral" }) {
+    const toneClasses = {
+      neutral: "border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-950/30 dark:text-slate-200",
+      success: "border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200",
+      warning: "border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200",
+      danger: "border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-900/40 dark:bg-rose-950/20 dark:text-rose-200"
+    };
+    return (
+      <div className={`rounded-xl border p-4 ${toneClasses[tone] ?? toneClasses.neutral}`}>
+        {title && <div className="mb-1 text-sm font-semibold">{title}</div>}
+        <div className="text-sm">{message}</div>
+      </div>
+    );
+  },
+
+  Divider() {
+    return <div className="h-px bg-slate-200 dark:bg-slate-800" />;
+  },
+
+  Spacer({ size = "md" }) {
+    const heights = { sm: "h-2", md: "h-4", lg: "h-6" };
+    return <div className={heights[size] ?? heights.md} />;
+  }
+};
+
+let _registry = { ...BUILTIN_COMPONENTS };
+
+export function getComponentRegistry() {
+  return _registry;
+}
+
+export function registerComponent(type, Component) {
+  _registry = { ..._registry, [type]: Component };
+}
+
+export function registerComponents(map) {
+  _registry = { ..._registry, ...map };
+}
+
+export function renderSchemaComponent(component, index) {
+  const registry = getComponentRegistry();
+  const Component = registry[component.type];
+  if (!Component) {
+    return (
+      <div key={index} className="rounded-lg border border-dashed border-slate-300 p-3 text-xs text-slate-500 dark:border-slate-700">
+        Unknown component: {component.type}
+      </div>
+    );
+  }
+  return <Component key={component.id ?? index} {...(component.props ?? {})} />;
+}
+
+export function renderSchema(components = []) {
+  return components.map((c, i) => renderSchemaComponent(c, i));
+}
+
+export default BUILTIN_COMPONENTS;

package/src/lib/index.ts

@@ -0,0 +1 @@
+export * from './utils';

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}