@schandlergarcia/sf-web-components 1.9.28 → 1.9.30

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

@@ -1,136 +0,0 @@
-import React from "react";
-
-type Variant = "default" | "metric" | "chart" | "table" | "widget" | "status";
-type Size = "xs" | "sm" | "md" | "lg" | "xl" | "full";
-type Padding = "none" | "xs" | "sm" | "default" | "lg" | "xl";
-type Radius = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
-
-const VARIANT_CLASSES: Record<Variant, string> = {
-  default: "",
-  metric: "",
-  chart: "",
-  table: "",
-  widget: "",
-  status: ""
-};
-
-const SIZE_CLASSES: Record<Size, string> = {
-  xs: "",
-  sm: "min-h-[80px]",
-  md: "min-h-[120px]",
-  lg: "min-h-[160px]",
-  xl: "min-h-[220px]",
-  full: ""
-};
-
-const PADDING_CLASSES: Record<Padding, string> = {
-  none: "p-0",
-  xs: "p-2",
-  sm: "p-3",
-  default: "p-4",
-  lg: "p-6",
-  xl: "p-8"
-};
-
-export interface BaseCardProps extends Omit<React.HTMLAttributes<HTMLDivElement | HTMLButtonElement>, "onPress"> {
-  header?: React.ReactNode;
-  body?: React.ReactNode;
-  footer?: React.ReactNode;
-  children?: React.ReactNode;
-  variant?: Variant;
-  size?: Size;
-  padding?: Padding;
-  shadow?: boolean;
-  radius?: Radius;
-  border?: boolean;
-  isHoverable?: boolean;
-  isPressable?: boolean;
-  isLoading?: boolean;
-  isDisabled?: boolean;
-  isSelected?: boolean;
-  className?: string;
-  headerClassName?: string;
-  bodyClassName?: string;
-  footerClassName?: string;
-  onPress?: () => void;
-  onHover?: () => void;
-}
-
-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
-}: BaseCardProps) {
-  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.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-
-type Tone = "neutral" | "success" | "warning" | "danger" | "info";
-
-const TONE_CLASSES: Record<Tone, string> = {
-  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",
-};
-
-export interface CalloutCardProps {
-  title?: string;
-  message: string | React.ReactNode;
-  tone?: Tone;
-  icon?: React.ReactNode;
-  className?: string;
-}
-
-export default function CalloutCard({
-  title,
-  message,
-  tone = "neutral",
-  icon,
-  className = "",
-}: CalloutCardProps) {
-  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.tsx

@@ -1,131 +0,0 @@
-import React from "react";
-import BaseCard, { BaseCardProps } from "./BaseCard";
-import UIText from "../ui/Text";
-import UIChip from "../ui/Chip";
-
-interface TimeRangeOption {
-  value: string;
-  label: string;
-}
-
-export interface TimeRange {
-  current: string;
-  options?: (TimeRangeOption | string)[];
-  onChange?: (value: string) => void;
-}
-
-export interface ChartCardProps extends Omit<BaseCardProps, "variant" | "header" | "body"> {
-  chart: React.ReactNode;
-  chartType?: string;
-  title?: string;
-  subtitle?: string;
-  filters?: React.ReactNode;
-  timeRange?: TimeRange;
-  actions?: React.ReactNode;
-  legend?: React.ReactNode;
-  height?: number;
-  showGrid?: boolean;
-  showAxes?: boolean;
-  data?: unknown[];
-  loading?: boolean;
-  error?: string | Error;
-}
-
-export default function ChartCard({
-  chart,
-  chartType,
-  title,
-  subtitle,
-  filters,
-  timeRange,
-  actions,
-  legend,
-  height = 280,
-  showGrid,
-  showAxes,
-  data,
-  loading = false,
-  error,
-  ...cardProps
-}: ChartCardProps) {
-  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={typeof opt === "string" ? opt : opt.value} value={typeof opt === "string" ? opt : opt.value}>
-                {typeof opt === "string" ? opt : opt.label}
-              </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.tsx

@@ -1,50 +0,0 @@
-import React from "react";
-import UIText from "../ui/Text";
-
-export interface FeedPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
-  title?: string;
-  subtitle?: string;
-  actions?: React.ReactNode;
-  children?: React.ReactNode;
-  width?: number | string;
-  className?: string;
-  headerClassName?: string;
-  bodyClassName?: string;
-}
-
-export default function FeedPanel({
-  title,
-  subtitle,
-  actions,
-  children,
-  width,
-  className = "",
-  headerClassName = "",
-  bodyClassName = "",
-  ...rest
-}: FeedPanelProps) {
-  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="medium">{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.tsx

@@ -1,229 +0,0 @@
-import React from "react";
-import BaseCard, { BaseCardProps } from "./BaseCard";
-import UIText from "../ui/Text";
-import UIChip from "../ui/Chip";
-
-function formatTimestamp(ts: string | Date | undefined): string {
-  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);
-  }
-}
-
-interface AvatarProps {
-  item: ListItem;
-}
-
-function Avatar({ item }: AvatarProps) {
-  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 interface ListItem {
-  id?: string | number;
-  title?: string;
-  name?: string;
-  description?: string;
-  status?: string;
-  timestamp?: string | Date;
-  value?: string | number;
-  unit?: string;
-  avatar?: string | React.ReactNode;
-}
-
-export interface ListCardProps extends Omit<BaseCardProps, "variant" | "header" | "body"> {
-  items?: ListItem[];
-  title?: string;
-  subtitle?: string;
-  showAvatars?: boolean;
-  showStatus?: boolean;
-  showActions?: boolean;
-  showTimestamp?: boolean;
-  dense?: boolean;
-  divided?: boolean;
-  actions?: React.ReactNode;
-  itemActions?: (item: ListItem, index: number) => React.ReactNode;
-  onItemClick?: (item: ListItem, index: number) => void;
-  loading?: boolean;
-  error?: string | Error;
-  emptyMessage?: string;
-  emptyIcon?: React.ReactNode;
-  maxBodyHeight?: string | number;
-}
-
-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
-}: ListCardProps) {
-  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: React.CSSProperties = maxBodyHeight
-    ? { maxHeight: typeof maxBodyHeight === "number" ? `${maxBodyHeight}px` : 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} />;
-}