@schandlergarcia/sf-web-components 1.2.5 → 1.2.7

package/src/components/library/cards/ActionList.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import UIButton from "../ui/UIButton";
+
+/**
+ * Row of action buttons — typically used at the bottom of a dashboard section.
+ *
+ * @param {{ label: string, [key]: any }[] | string[]} actions
+ * @param {string}     title
+ * @param {Function}   onAction  Called with the action object/string when clicked
+ */
+export default function ActionList({
+  actions = [],
+  title,
+  onAction,
+  className = "",
+}) {
+  return (
+    <div className={`rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900 ${className}`}>
+      {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>
+  );
+}

package/src/components/library/cards/ActivityCard.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { ArrowPathIcon, CheckCircleIcon, ExclamationCircleIcon, ClockIcon } from "@heroicons/react/24/outline";
+import UIText from "../ui/Text";
+
+const STATUS_ICON = {
+  working:  { Icon: ArrowPathIcon,        color: "text-indigo-500",  spin: true },
+  pending:  { Icon: ClockIcon,            color: "text-slate-400",   spin: false },
+  complete: { Icon: CheckCircleIcon,      color: "text-emerald-500", spin: false },
+  error:    { Icon: ExclamationCircleIcon, color: "text-red-500",     spin: false },
+};
+
+function ActionItem({ action }) {
+  const s = STATUS_ICON[action.status] ?? STATUS_ICON.pending;
+  return (
+    <motion.div
+      initial={{ y: 12, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      exit={{ y: -12, opacity: 0 }}
+      className="rounded-lg border border-slate-100 bg-slate-50 p-3 dark:border-slate-800 dark:bg-slate-950/40"
+    >
+      <div className="flex items-start gap-2">
+        <s.Icon className={`mt-0.5 h-4 w-4 shrink-0 ${s.color} ${s.spin ? "animate-spin" : ""}`} />
+        <div className="min-w-0">
+          <div className="text-xs font-medium text-slate-700 dark:text-slate-200">{action.title ?? action.action}</div>
+          {(action.subtitle ?? action.traveler ?? action.timestamp ?? action.startedAt) && (
+            <div className="mt-0.5 text-[10px] text-slate-400">
+              {[action.subtitle, action.traveler, action.timestamp ?? action.startedAt].filter(Boolean).join(" · ")}
+            </div>
+          )}
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+export default function ActivityCard({ title = "Activity", actions = [], className = "" }) {
+  if (actions.length === 0) return null;
+
+  return (
+    <div className={className}>
+      {title && (
+        <UIText as="div" size="xs" weight="semibold" muted className="mb-2 uppercase tracking-wider">
+          {title}
+        </UIText>
+      )}
+      <div className="space-y-2">
+        <AnimatePresence>
+          {actions.map(a => (
+            <ActionItem key={a.id} action={a} />
+          ))}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}

package/src/components/library/cards/BaseCard.jsx

@@ -0,0 +1,109 @@
+import React from "react";
+
+const VARIANT_CLASSES = {
+  default: "",
+  metric: "",
+  chart: "",
+  table: "",
+  widget: "",
+  status: ""
+};
+
+const SIZE_CLASSES = {
+  xs: "",
+  sm: "min-h-[80px]",
+  md: "min-h-[120px]",
+  lg: "min-h-[160px]",
+  xl: "min-h-[220px]",
+  full: ""
+};
+
+const PADDING_CLASSES = {
+  none: "p-0",
+  xs: "p-2",
+  sm: "p-3",
+  default: "p-4",
+  lg: "p-6",
+  xl: "p-8"
+};
+
+export default function BaseCard({
+  header,
+  body,
+  footer,
+  children,
+  variant = "default",
+  size = "md",
+  padding = "default",
+  shadow = true,
+  radius = "2xl",
+  border = true,
+  isHoverable = false,
+  isPressable = false,
+  isLoading = false,
+  isDisabled = false,
+  isSelected = false,
+  className = "",
+  headerClassName = "",
+  bodyClassName = "",
+  footerClassName = "",
+  onPress,
+  onHover,
+  ...rest
+}) {
+  const Comp = isPressable ? "button" : "div";
+
+  const radiusClass = radius ? `rounded-${radius}` : "rounded-2xl";
+  const paddingClass = PADDING_CLASSES[padding] ?? PADDING_CLASSES.default;
+  const sizeClass = SIZE_CLASSES[size] ?? SIZE_CLASSES.md;
+  const variantClass = VARIANT_CLASSES[variant] ?? VARIANT_CLASSES.default;
+
+  const interactive = isHoverable || isPressable;
+  const disabled = isDisabled || (isPressable && !onPress);
+
+  return (
+    <Comp
+      type={isPressable ? "button" : undefined}
+      onClick={isPressable ? onPress : undefined}
+      onMouseEnter={onHover}
+      disabled={isPressable ? disabled : undefined}
+      className={[
+        "w-full text-left",
+        radiusClass,
+        border ? "border border-slate-200 dark:border-slate-800" : "border border-transparent",
+        "bg-white dark:bg-slate-900",
+        shadow ? "shadow-sm" : "",
+        sizeClass,
+        variantClass,
+        interactive ? "transition hover:-translate-y-[1px] hover:shadow-md" : "",
+        isSelected ? "ring-2 ring-brand-500" : "",
+        disabled ? "opacity-60" : "",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      <div className={paddingClass}>
+        {header != null ? <div className={headerClassName}>{header}</div> : null}
+
+        {isLoading ? (
+          <div className={["mt-3 space-y-3", bodyClassName].filter(Boolean).join(" ")}>
+            <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>
+        ) : (
+          <>
+            {body != null ? <div className={bodyClassName}>{body}</div> : null}
+            {children}
+          </>
+        )}
+
+        {footer != null ? <div className={footerClassName}>{footer}</div> : null}
+      </div>
+    </Comp>
+  );
+}
+
+

package/src/components/library/cards/CalloutCard.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+const TONE_CLASSES = {
+  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",
+  info: "border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-900/40 dark:bg-blue-950/20 dark:text-blue-200",
+};
+
+/**
+ * Highlighted callout box for important inline messages.
+ *
+ * @param {string}  title
+ * @param {string|ReactNode} message
+ * @param {"neutral"|"success"|"warning"|"danger"|"info"} tone
+ * @param {ReactNode} icon   Optional leading icon
+ */
+export default function CalloutCard({
+  title,
+  message,
+  tone = "neutral",
+  icon,
+  className = "",
+}) {
+  return (
+    <div className={`rounded-xl border p-4 ${TONE_CLASSES[tone] ?? TONE_CLASSES.neutral} ${className}`}>
+      <div className="flex gap-3">
+        {icon && <div className="mt-0.5 shrink-0">{icon}</div>}
+        <div>
+          {title && <div className="mb-1 text-sm font-semibold">{title}</div>}
+          <div className="text-sm">{message}</div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/library/cards/ChartCard.jsx

@@ -0,0 +1,105 @@
+import React from "react";
+import BaseCard from "./BaseCard";
+import UIText from "../ui/Text";
+import UIChip from "../ui/Chip";
+
+export default function ChartCard({
+  chart,
+  chartType,
+  title,
+  subtitle,
+  filters,
+  timeRange,
+  actions,
+  legend,
+  height = 280,
+  showGrid,
+  showAxes,
+  data,
+  loading = false,
+  error,
+  ...cardProps
+}) {
+  const header = (
+    <div className="flex flex-col gap-3 sm:flex-row sm:items-start 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-wrap items-center justify-end gap-2">
+        {filters ? <div className="flex items-center gap-2">{filters}</div> : null}
+        {timeRange ? (
+          <select
+            className="h-9 rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50"
+            value={timeRange.current}
+            onChange={(e) => timeRange.onChange?.(e.target.value)}
+            aria-label="Time range"
+          >
+            {timeRange.options?.map((opt) => (
+              <option key={opt.value ?? opt} value={opt.value ?? opt}>
+                {opt.label ?? opt}
+              </option>
+            ))}
+          </select>
+        ) : null}
+        {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
+      </div>
+    </div>
+  );
+
+  if (error) {
+    return (
+      <BaseCard
+        variant="chart"
+        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 hint = chartType ? <UIChip>{chartType}</UIChip> : null;
+
+  return (
+    <BaseCard
+      variant="chart"
+      header={
+        <div className="flex items-center justify-between gap-3">
+          <div className="min-w-0">{header}</div>
+          {hint}
+        </div>
+      }
+      body={
+        <div className="mt-4">
+          <div className="w-full" style={{ height }}>
+            {chart}
+          </div>
+          {legend ? <div className="mt-3">{legend}</div> : null}
+          {(showGrid != null || showAxes != null) && data ? (
+            <div className="mt-2 text-xs text-slate-500 dark:text-slate-400">
+              grid: {String(!!showGrid)} · axes: {String(!!showAxes)} · points: {data.length}
+            </div>
+          ) : null}
+          {loading ? (
+            <div className="mt-3 text-xs text-slate-500 dark:text-slate-400">Loading…</div>
+          ) : null}
+        </div>
+      }
+      {...cardProps}
+    />
+  );
+}
+
+

package/src/components/library/cards/FeedPanel.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import UIText from "../ui/Text";
+
+export default function FeedPanel({
+  title,
+  subtitle,
+  actions,
+  children,
+  width,
+  className = "",
+  headerClassName = "",
+  bodyClassName = "",
+  ...rest
+}) {
+  const widthStyle = width ? (typeof width === "number" ? { width: `${width}px` } : { width }) : undefined;
+
+  return (
+    <div
+      className={`flex shrink-0 flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900 ${className}`}
+      style={widthStyle}
+      {...rest}
+    >
+      {(title || subtitle || actions) && (
+        <div className={`shrink-0 border-b border-slate-100 px-4 py-3 dark:border-slate-800 ${headerClassName}`}>
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0">
+              {title && <UIText as="div" size="sm" weight="semibold">{title}</UIText>}
+              {subtitle && <UIText as="div" size="xs" muted className="mt-0.5">{subtitle}</UIText>}
+            </div>
+            {actions && <div className="shrink-0">{actions}</div>}
+          </div>
+        </div>
+      )}
+      <div className={`flex-1 overflow-y-auto ${bodyClassName}`}>
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/library/cards/ListCard.jsx

@@ -0,0 +1,193 @@
+import React from "react";
+import BaseCard from "./BaseCard";
+import UIText from "../ui/Text";
+import UIChip from "../ui/Chip";
+
+function formatTimestamp(ts) {
+  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);
+  }
+}
+
+function Avatar({ item }) {
+  const avatar = item?.avatar;
+  const name = item?.title ?? item?.name ?? "Item";
+  if (!avatar) return null;
+  if (typeof avatar === "string") {
+    return (
+      <img
+        src={avatar}
+        alt=""
+        className="h-9 w-9 rounded-full border border-slate-200 object-cover dark:border-slate-800"
+      />
+    );
+  }
+  if (React.isValidElement(avatar)) {
+    return (
+      <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-800">
+        {avatar}
+      </div>
+    );
+  }
+  return (
+    <div className="h-9 w-9 rounded-full border border-slate-200 bg-slate-100 text-xs font-semibold text-slate-700 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-200 grid place-items-center">
+      {String(name).slice(0, 2).toUpperCase()}
+    </div>
+  );
+}
+
+export default function ListCard({
+  items = [],
+  title,
+  subtitle,
+  showAvatars = true,
+  showStatus = true,
+  showActions = true,
+  showTimestamp = true,
+  dense = false,
+  divided = true,
+  actions,
+  itemActions,
+  onItemClick,
+  loading = false,
+  error,
+  emptyMessage = "No items.",
+  emptyIcon,
+  maxBodyHeight,
+  ...cardProps
+}) {
+  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>
+      {actions ? <div className="shrink-0">{actions}</div> : null}
+    </div>
+  );
+
+  if (error) {
+    return (
+      <BaseCard
+        variant="widget"
+        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 padY = dense ? "py-2" : "py-3";
+
+  const scrollStyle = maxBodyHeight ? { maxHeight: maxBodyHeight, overflowY: "auto" } : {};
+
+  const body =
+    loading ? (
+      <div className="mt-4 space-y-3">
+        {Array.from({ length: 4 }).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">
+            {showAvatars ? <div className="h-9 w-9 animate-pulse rounded-full bg-slate-200 dark:bg-slate-800" /> : null}
+            <div className="flex-1 space-y-2">
+              <div className="h-4 w-1/3 animate-pulse rounded bg-slate-200 dark:bg-slate-800" />
+              <div className="h-3 w-2/3 animate-pulse rounded bg-slate-200 dark:bg-slate-800" />
+            </div>
+          </div>
+        ))}
+      </div>
+    ) : items.length === 0 ? (
+      <div className="mt-4 rounded-xl border border-dashed border-slate-300 bg-slate-50 p-6 text-center dark:border-slate-700 dark:bg-slate-950/30">
+        {emptyIcon ? <div className="mb-2">{emptyIcon}</div> : null}
+        <UIText size="sm" muted>
+          {emptyMessage}
+        </UIText>
+      </div>
+    ) : (
+      <div className="mt-4 overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
+        <ul className={divided ? "divide-y divide-slate-200 dark:divide-slate-800" : ""} style={scrollStyle}>
+          {items.map((item, idx) => {
+            const key = item?.id ?? idx;
+            const name = item?.title ?? item?.name ?? "Item";
+            const desc = item?.description;
+            const status = item?.status;
+            const ts = item?.timestamp;
+            const itemValue = item?.value;
+            const itemUnit = item?.unit;
+            const right = showActions ? itemActions?.(item, idx) : null;
+
+            return (
+              <li
+                key={key}
+                className={[
+                  "group flex items-start justify-between gap-3 px-4",
+                  padY,
+                  onItemClick ? "cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-950/30" : ""
+                ]
+                  .filter(Boolean)
+                  .join(" ")}
+                onClick={() => onItemClick?.(item, idx)}
+              >
+                <div className="flex min-w-0 items-start gap-3">
+                  {showAvatars ? <Avatar item={item} /> : null}
+                  <div className="min-w-0">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <div className="text-sm font-semibold text-slate-900 dark:text-slate-50">
+                        {name}
+                      </div>
+                      {showStatus && status ? (
+                        <UIChip>{String(status)}</UIChip>
+                      ) : 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>
+                </div>
+
+                <div className="flex shrink-0 items-center gap-2">
+                  {itemValue != null ? (
+                    <div className="text-right">
+                      <div className="text-sm font-semibold text-slate-900 dark:text-slate-50">
+                        {String(itemValue)}
+                        {itemUnit ? <span className="ml-1 text-xs font-medium text-slate-500 dark:text-slate-400">{itemUnit}</span> : null}
+                      </div>
+                    </div>
+                  ) : null}
+                  {right ? (
+                    <div className="opacity-100 sm:opacity-0 sm:group-hover:opacity-100">
+                      {right}
+                    </div>
+                  ) : null}
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    );
+
+  return <BaseCard variant="widget" header={header} body={body} isLoading={false} {...cardProps} />;
+}
+
+

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

@@ -0,0 +1,109 @@
+import React from "react";
+import BaseCard from "./BaseCard";
+
+const CHANGE_STYLES = {
+  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 = {
+  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 default function MetricCard({
+  title,
+  value,
+  subtitle,
+  change,
+  changeType = "neutral",
+  icon,
+  color = "default",
+  trend,
+  trendIcon,
+  layout = "default",
+  footer,
+  actions,
+  loading = false,
+  error,
+  ...cardProps
+}) {
+  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}
+    />
+  );
+}
+
+