@pattern-stack/frontend-patterns 0.2.0-alpha.5 → 0.2.0-alpha.6

package/dist/index.js

@@ -2052,6 +2052,362 @@ function renderField(value, fieldName, fieldType, breakpoint, item, customRender
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+const STATUS_COLOR_MAP = {
+  // Success states
+  active: "success",
+  completed: "success",
+  approved: "success",
+  paid: "success",
+  delivered: "success",
+  resolved: "success",
+  closed: "success",
+  // Warning states
+  pending: "warning",
+  processing: "warning",
+  review: "warning",
+  draft: "warning",
+  waiting: "warning",
+  // Error states
+  failed: "error",
+  rejected: "error",
+  cancelled: "error",
+  overdue: "error",
+  blocked: "error",
+  // Info states
+  new: "info",
+  open: "info",
+  in_progress: "info",
+  scheduled: "info",
+  // Neutral (default)
+  inactive: "neutral",
+  archived: "neutral",
+  unknown: "neutral"
+};
+function getStatusColor(value) {
+  if (typeof value !== "string") return "neutral";
+  const normalized = value.toLowerCase().replace(/[_-]/g, "_");
+  return STATUS_COLOR_MAP[normalized] ?? "neutral";
+}
+const CATEGORY_MAP = {
+  account: 1,
+  customer: 1,
+  client: 1,
+  user: 2,
+  contact: 2,
+  person: 2,
+  order: 3,
+  sale: 3,
+  transaction: 3,
+  product: 4,
+  item: 4,
+  inventory: 4,
+  task: 5,
+  activity: 5,
+  event: 5,
+  file: 6,
+  document: 6,
+  report: 6,
+  tag: 7,
+  category: 7,
+  label: 7,
+  default: 8
+};
+function getCategoryForEntity(entityType) {
+  if (!entityType) return 8;
+  const normalized = entityType.toLowerCase();
+  for (const [key, value] of Object.entries(CATEGORY_MAP)) {
+    if (normalized.includes(key)) return value;
+  }
+  return 8;
+}
+function getIconForEntity(entityType) {
+  if (!entityType) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "w-4 h-4" });
+  const normalized = entityType.toLowerCase();
+  if (normalized.includes("account") || normalized.includes("customer") || normalized.includes("client")) {
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "w-4 h-4" });
+  }
+  if (normalized.includes("user") || normalized.includes("contact") || normalized.includes("person")) {
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "w-4 h-4" });
+  }
+  if (normalized.includes("product") || normalized.includes("item")) {
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Package, { className: "w-4 h-4" });
+  }
+  if (normalized.includes("file") || normalized.includes("document")) {
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "w-4 h-4" });
+  }
+  if (normalized.includes("tag") || normalized.includes("category")) {
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Tag, { className: "w-4 h-4" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "w-4 h-4" });
+}
+function normalizeImportance(importance) {
+  switch (importance) {
+    case "critical":
+    case "high":
+    case "primary":
+      return "primary";
+    case "medium":
+    case "secondary":
+      return "secondary";
+    default:
+      return "tertiary";
+  }
+}
+function isPrimaryImportance(importance) {
+  return normalizeImportance(importance) === "primary";
+}
+function formatValueForCard(value, type, format) {
+  if (value === null || value === void 0) return "—";
+  switch (type) {
+    case "money": {
+      const num = Number(value);
+      const currency = (format == null ? void 0 : format.currency) ?? "USD";
+      if (num >= 1e6) {
+        return new Intl.NumberFormat("en-US", {
+          style: "currency",
+          currency,
+          notation: "compact",
+          maximumFractionDigits: 1
+        }).format(num);
+      }
+      if (num >= 1e3) {
+        return new Intl.NumberFormat("en-US", {
+          style: "currency",
+          currency,
+          notation: "compact",
+          maximumFractionDigits: 1
+        }).format(num);
+      }
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency,
+        maximumFractionDigits: 0
+      }).format(num);
+    }
+    case "percent": {
+      const num = Number(value);
+      return `${num.toFixed(0)}%`;
+    }
+    case "number": {
+      const num = Number(value);
+      if (num >= 1e6) return `${(num / 1e6).toFixed(1)}M`;
+      if (num >= 1e3) return `${(num / 1e3).toFixed(1)}K`;
+      return String(num);
+    }
+    case "date":
+    case "datetime": {
+      const date = new Date(String(value));
+      if (isNaN(date.getTime())) return String(value);
+      return date.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric"
+      });
+    }
+    case "boolean":
+      return value ? "Yes" : "No";
+    default:
+      return String(value);
+  }
+}
+function autoDetectMapping(columns) {
+  var _a, _b, _c, _d, _e, _f;
+  const primaryCols = columns.filter((c) => isPrimaryImportance(c.importance));
+  const titleField = ((_a = primaryCols.find((c) => ["text", "entity", "user"].includes(c.type))) == null ? void 0 : _a.field) ?? ((_b = primaryCols[0]) == null ? void 0 : _b.field) ?? ((_c = columns[0]) == null ? void 0 : _c.field);
+  const valueField = (_d = primaryCols.find((c) => c.type === "money")) == null ? void 0 : _d.field;
+  const statusField = (_e = primaryCols.find(
+    (c) => c.type === "status" || c.type === "badge"
+  )) == null ? void 0 : _e.field;
+  const usedForMain = new Set([titleField, valueField, statusField].filter(Boolean));
+  const remainingPrimary = primaryCols.filter((c) => !usedForMain.has(c.field));
+  const subtitleField = (_f = remainingPrimary[0]) == null ? void 0 : _f.field;
+  const usedFields = new Set(
+    [titleField, valueField, statusField, subtitleField].filter(Boolean)
+  );
+  const metadataFields = primaryCols.filter((c) => !usedFields.has(c.field)).slice(0, 3).map((c) => c.field);
+  return {
+    titleField: titleField ?? "id",
+    subtitleField,
+    valueField,
+    statusField,
+    metadataFields,
+    iconConfig: void 0
+  };
+}
+function entityToListCardProps(item, columns, mapping, entityType) {
+  const autoMapping = autoDetectMapping(columns);
+  const effectiveMapping = { ...autoMapping, ...mapping };
+  const {
+    titleField,
+    subtitleField,
+    valueField,
+    statusField,
+    metadataFields,
+    iconConfig
+  } = effectiveMapping;
+  const getColumn = (field) => field ? columns.find((c) => c.field === field) : void 0;
+  const title = item[titleField] != null ? String(item[titleField]) : "—";
+  const subtitle = subtitleField && item[subtitleField] != null ? String(item[subtitleField]) : void 0;
+  let value;
+  if (valueField && item[valueField] != null) {
+    const valueCol = getColumn(valueField);
+    const formatted = formatValueForCard(
+      item[valueField],
+      (valueCol == null ? void 0 : valueCol.type) ?? "text",
+      valueCol == null ? void 0 : valueCol.format
+    );
+    value = {
+      text: formatted,
+      variant: "success"
+      // Money typically green
+    };
+  }
+  let badge;
+  if (statusField && item[statusField] != null) {
+    const statusValue = String(item[statusField]);
+    badge = {
+      text: statusValue,
+      variant: "status",
+      status: getStatusColor(statusValue),
+      size: "sm"
+    };
+  }
+  const metadata = metadataFields == null ? void 0 : metadataFields.map((field) => {
+    const col = getColumn(field);
+    if (!col || item[field] == null) return null;
+    return formatValueForCard(item[field], col.type, col.format);
+  }).filter((v) => v !== null);
+  let icon;
+  if (iconConfig) {
+    const iconValue = iconConfig.field ? item[iconConfig.field] : void 0;
+    if (iconConfig.variant === "status" && iconValue) {
+      icon = {
+        icon: iconConfig.icon ?? getIconForEntity(entityType),
+        variant: "status",
+        status: getStatusColor(iconValue),
+        size: "sm"
+      };
+    } else {
+      icon = {
+        icon: iconConfig.icon ?? getIconForEntity(entityType),
+        variant: "category",
+        category: getCategoryForEntity(entityType),
+        size: "sm"
+      };
+    }
+  } else {
+    icon = {
+      icon: getIconForEntity(entityType),
+      variant: "category",
+      category: getCategoryForEntity(entityType),
+      size: "sm"
+    };
+  }
+  return {
+    icon,
+    title,
+    subtitle,
+    metadata,
+    value,
+    badge
+  };
+}
+const HEADER_ABBREVIATIONS = {
+  customer: "Cust",
+  account: "Acct",
+  amount: "Amt",
+  quantity: "Qty",
+  priority: "Pri",
+  status: "Status",
+  created: "Created",
+  updated: "Updated",
+  description: "Desc",
+  total: "Total",
+  items: "Items",
+  number: "#",
+  date: "Date",
+  time: "Time"
+};
+function abbreviateHeader(label) {
+  const lower = label.toLowerCase();
+  for (const [key, abbrev] of Object.entries(HEADER_ABBREVIATIONS)) {
+    if (lower.includes(key)) return abbrev;
+  }
+  if (label.length > 8) return label.slice(0, 6) + "…";
+  return label;
+}
+function generateCompactColumns(columns, options = {}) {
+  const {
+    maxColumns = 5,
+    abbreviateHeaders = true,
+    requiredFields = [],
+    excludeFields = []
+  } = options;
+  const excludeSet = new Set(excludeFields);
+  const requiredSet = new Set(requiredFields);
+  const filteredColumns = columns.filter((col) => {
+    if (excludeSet.has(col.field)) return false;
+    return true;
+  });
+  const required = filteredColumns.filter((c) => requiredSet.has(c.field));
+  const primary = filteredColumns.filter(
+    (c) => !requiredSet.has(c.field) && normalizeImportance(c.importance) === "primary"
+  );
+  const secondary = filteredColumns.filter(
+    (c) => !requiredSet.has(c.field) && normalizeImportance(c.importance) === "secondary"
+  );
+  const selectedColumns = [...required, ...primary, ...secondary].slice(
+    0,
+    maxColumns
+  );
+  return selectedColumns.map((col) => ({
+    key: col.field,
+    header: abbreviateHeaders ? abbreviateHeader(col.label) : col.label,
+    sortable: col.sortable,
+    type: col.type,
+    format: col.format,
+    // Compact widths
+    width: getCompactWidth(col.type)
+  }));
+}
+function getCompactWidth(type) {
+  switch (type) {
+    case "money":
+      return "70px";
+    case "number":
+    case "percent":
+      return "50px";
+    case "status":
+    case "badge":
+      return "80px";
+    case "date":
+      return "70px";
+    case "datetime":
+      return "90px";
+    case "boolean":
+      return "50px";
+    default:
+      return "120px";
+  }
+}
+function createMobileCardRenderer(columns, mapping, entityType) {
+  const { ListCard: ListCard2 } = require("../components/data/ListCard");
+  return ({ data, onItemClick }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: data.map((item, index) => {
+    const cardProps = entityToListCardProps(
+      item,
+      columns,
+      mapping,
+      entityType
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ListCard2,
+      {
+        ...cardProps,
+        onClick: onItemClick ? () => onItemClick(item) : void 0
+      },
+      item.id ?? index
+    );
+  }) });
+}
 let globalAuthService = null;
 function setGlobalAuthService(authService) {
   globalAuthService = authService;
@@ -2105,6 +2461,9 @@ class ApiClient {
       async (error) => {
         var _a, _b, _c, _d;
         const status = (_a = error.response) == null ? void 0 : _a.status;
+        if (!error.response) {
+          return Promise.reject(error);
+        }
         if (status === 401 || status === 403) {
           if (globalAuthService) {
             const tokenData = globalAuthService.getTokenData();
@@ -2122,12 +2481,12 @@ class ApiClient {
             const errorInfo = { status, message: (_c = (_b = error.response) == null ? void 0 : _b.data) == null ? void 0 : _c.detail };
             const handled = (_d = globalAuthService.onAuthError) == null ? void 0 : _d.call(globalAuthService, errorInfo);
             if (!handled) {
-              window.location.reload();
+              window.location.href = "/login";
             }
           } else {
             localStorage.removeItem("auth_token");
             localStorage.removeItem("auth_user");
-            window.location.reload();
+            window.location.href = "/login";
           }
         }
         return Promise.reject(error);
@@ -2502,6 +2861,61 @@ function useEntityDetail(entity, id, options = {}) {
     refetch
   };
 }
+function useOnlineStatus(healthEndpoint) {
+  const [isOnline, setIsOnline] = React.useState(
+    typeof navigator !== "undefined" ? navigator.onLine : true
+  );
+  const [isBackendReachable, setIsBackendReachable] = React.useState(true);
+  const [lastBackendContact, setLastBackendContact] = React.useState(
+    null
+  );
+  React.useEffect(() => {
+    const handleOnline = () => setIsOnline(true);
+    const handleOffline = () => {
+      setIsOnline(false);
+      setIsBackendReachable(false);
+    };
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, []);
+  const checkBackend = React.useCallback(async () => {
+    if (!isOnline) {
+      setIsBackendReachable(false);
+      return false;
+    }
+    try {
+      const endpoint = healthEndpoint || "/api/v1/health";
+      const response = await fetch(endpoint, {
+        method: "GET",
+        cache: "no-store"
+      });
+      const reachable = response.ok;
+      setIsBackendReachable(reachable);
+      if (reachable) {
+        setLastBackendContact(Date.now());
+      }
+      return reachable;
+    } catch {
+      setIsBackendReachable(false);
+      return false;
+    }
+  }, [isOnline, healthEndpoint]);
+  React.useEffect(() => {
+    if (isOnline) {
+      checkBackend();
+    }
+  }, [isOnline, checkBackend]);
+  return {
+    isOnline,
+    isBackendReachable,
+    lastBackendContact,
+    checkBackend
+  };
+}
 const buttonVariants = classVarianceAuthority.cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98]",
   {
@@ -5758,6 +6172,75 @@ const ActivityFeed = ({
     ] }) })
   ] });
 };
+const statusConfig = {
+  online: {
+    icon: lucideReact.Cloud,
+    label: "Online",
+    color: "text-green-600 dark:text-green-400",
+    bgColor: "bg-green-100 dark:bg-green-900/30"
+  },
+  degraded: {
+    icon: lucideReact.CloudOff,
+    label: "Server Offline",
+    color: "text-yellow-600 dark:text-yellow-400",
+    bgColor: "bg-yellow-100 dark:bg-yellow-900/30"
+  },
+  offline: {
+    icon: lucideReact.WifiOff,
+    label: "Offline",
+    color: "text-red-600 dark:text-red-400",
+    bgColor: "bg-red-100 dark:bg-red-900/30"
+  }
+};
+function ConnectionStatus({
+  healthEndpoint,
+  variant = "badge",
+  className,
+  showWhenOnline = false
+}) {
+  const { isOnline, isBackendReachable } = useOnlineStatus(healthEndpoint);
+  const status = !isOnline ? "offline" : !isBackendReachable ? "degraded" : "online";
+  if (status === "online" && !showWhenOnline) {
+    return null;
+  }
+  const config = statusConfig[status];
+  const Icon2 = config.icon;
+  if (variant === "badge") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium",
+          config.bgColor,
+          config.color,
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: config.label })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 px-3 py-2 rounded-lg",
+        config.bgColor,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: cn("h-4 w-4", config.color) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium", config.color), children: config.label }),
+          status === "degraded" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Working with cached data" }),
+          status === "offline" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Check your connection" })
+        ] })
+      ]
+    }
+  );
+}
 const FormField = ({
   label,
   description,
@@ -9099,7 +9582,10 @@ const AppHeader = ({ className }) => {
             placeholder: "Search models, tests, jobs, and components..."
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-4", children: /* @__PURE__ */ jsxRuntime.jsx(UserMenu, { category: 8 }) })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ConnectionStatus, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(UserMenu, { category: 8 })
+        ] })
       ] }) })
     }
   );
@@ -10452,10 +10938,12 @@ function AuthProvider({
               try {
                 await authService.refreshToken();
                 setUser(storedUser);
-                try {
-                  const freshUser = await authService.getCurrentUser();
-                  if (freshUser) setUser(freshUser);
-                } catch {
+                if (!(config == null ? void 0 : config.offlineFirst)) {
+                  try {
+                    const freshUser = await authService.getCurrentUser();
+                    if (freshUser) setUser(freshUser);
+                  } catch {
+                  }
                 }
               } catch {
                 authService.clearAuth();
@@ -10465,10 +10953,12 @@ function AuthProvider({
             }
           } else {
             setUser(storedUser);
-            try {
-              const freshUser = await authService.getCurrentUser();
-              if (freshUser) setUser(freshUser);
-            } catch {
+            if (!(config == null ? void 0 : config.offlineFirst)) {
+              try {
+                const freshUser = await authService.getCurrentUser();
+                if (freshUser) setUser(freshUser);
+              } catch {
+              }
             }
           }
         }
@@ -17150,6 +17640,7 @@ exports.Checkbox = Checkbox;
 exports.ColorSwatch = ColorSwatch;
 exports.ComponentShowcasePage = ComponentShowcasePage;
 exports.ComponentShowcaseTemplate = ComponentShowcaseTemplate;
+exports.ConnectionStatus = ConnectionStatus;
 exports.DASHBOARD_CHART_HEIGHTS = DASHBOARD_CHART_HEIGHTS;
 exports.DASHBOARD_CONTAINER_HEIGHTS = DASHBOARD_CONTAINER_HEIGHTS;
 exports.DASHBOARD_HEIGHT_CLASSES = DASHBOARD_HEIGHT_CLASSES;
@@ -17275,14 +17766,17 @@ exports.breakpoints = breakpoints;
 exports.cn = cn;
 exports.createAPIDataTemplate = createAPIDataTemplate;
 exports.createApiClient = createApiClient;
+exports.createMobileCardRenderer = createMobileCardRenderer;
 exports.createReactApp = createReactApp;
 exports.createSimpleApp = createSimpleApp;
 exports.defaultFieldRenderers = defaultFieldRenderers;
 exports.detectBulkOperationType = detectBulkOperationType;
 exports.detectUIConfig = detectUIConfig;
+exports.entityToListCardProps = entityToListCardProps;
 exports.env = env;
 exports.formatNumberWithTooltip = formatNumberWithTooltip;
 exports.generateBulkOperationName = generateBulkOperationName;
+exports.generateCompactColumns = generateCompactColumns;
 exports.getAnimationClasses = getAnimationClasses;
 exports.getChartHeight = getChartHeight;
 exports.getContainerHeightClass = getContainerHeightClass;
@@ -17324,6 +17818,7 @@ exports.useMaxMediaQuery = useMaxMediaQuery;
 exports.useMediaQuery = useMediaQuery;
 exports.useMockAuth = useMockAuth;
 exports.useNavigation = useNavigation;
+exports.useOnlineStatus = useOnlineStatus;
 exports.useOverflowDetection = useOverflowDetection;
 exports.usePermissions = usePermissions;
 exports.useResponsiveClasses = useResponsiveClasses;