@schandlergarcia/sf-web-components 1.2.6 → 1.2.8

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/templates/pages/Home.tsx.template

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { UIInput, Button } from '@schandlergarcia/sf-web-components';
+import UIInput from '@/components/ui/UIInput';
+import UIButton from '@/components/ui/UIButton';
 import { Search } from "lucide-react";
 
 export default function HomePage() {
@@ -40,12 +41,12 @@ export default function HomePage() {
 						/>
 					</div>
 					<div className="flex gap-3 justify-center">
-						<Button onClick={handleSearch} variant="primary">
+						<UIButton onClick={handleSearch} variant="primary">
 							Search
-						</Button>
-						<Button onClick={() => console.log("Browse All")} variant="secondary">
+						</UIButton>
+						<UIButton onClick={() => console.log("Browse All")} variant="secondary">
 							Browse All
-						</Button>
+						</UIButton>
 					</div>
 				</div>
 			</div>

package/src/templates/pages/NotFound.tsx.template

@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router";
-import { Button } from '@schandlergarcia/sf-web-components';
+import UIButton from '@/components/ui/UIButton';
 
 export default function NotFound() {
 	const navigate = useNavigate();
@@ -12,7 +12,7 @@ export default function NotFound() {
 				<p className="text-lg text-slate-600 dark:text-slate-400 mb-8">
 					The page you're looking for doesn't exist.
 				</p>
-				<Button onClick={() => navigate("/")}>Go Home</Button>
+				<UIButton onClick={() => navigate("/")}>Go Home</UIButton>
 			</div>
 		</div>
 	);