@pattern-stack/frontend-patterns 0.0.4 → 0.0.6

package/dist/index.es.js

@@ -6,19 +6,18 @@ import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import * as React from "react";
 import React__default, { useRef, useState, useEffect, Component, createContext, useContext, useMemo, useId, useCallback } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Menu, HelpCircle, Info, AlertCircle, Check, ArrowDown, ArrowUp, ArrowLeft, ArrowRight, ChevronUp, ChevronLeft, ChevronDown, ChevronRight, Music, Video, Image, Folder, File, Flag, Tag, Bookmark, Heart, Star, MapPin, Clock, Calendar, Phone, Mail, Unlock, Lock, Share, Upload, Download, Eye, Trash2, Edit, Plus, Search, Bell, Settings, Home, Layout, TrendingUp, Database, BarChart3, Users, Shield, X, Palette, Circle, Loader2, Target, ExternalLink, TrendingDown, Minus, FileX, Sparkles, User, Sun, Moon, UserCircle, LogOut, ChevronsUpDown, AreaChart, LineChart, CheckCircle, AlertTriangle, Square, Waves, Zap, TreePine, Sunset, Building2, DollarSign, ShoppingCart, MoreHorizontal, Filter, Activity, RefreshCw, FileText, History, Save, Copy, Grid3X3, Layers, XCircle } from "lucide-react";
 import { cva } from "class-variance-authority";
 import axios from "axios";
 import { useQuery, useQueryClient, useMutation, QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { ChevronRight, Check, Circle, Loader2, ArrowRight, TrendingUp, TrendingDown, Minus, FileX, AlertCircle, Search, Database, Sparkles, Mail, Lock, Shield, User, Sun, Moon, UserCircle, Settings, LogOut, X, ChevronsUpDown, ChevronUp, ChevronDown, ChevronLeft, Clock, Calendar, BarChart3, AreaChart, LineChart, Upload, Image, File, CheckCircle, Info, AlertTriangle, Home, Palette, Square, Waves, Zap, TreePine, Sunset, Building2, Users, DollarSign, ShoppingCart, Menu, MoreHorizontal, Plus, Filter, Download, Activity, RefreshCw, Eye, Edit, Trash2, FileText, History, ArrowLeft, Save, Copy, ExternalLink, Grid3X3, Layers, XCircle } from "lucide-react";
 import { createPortal } from "react-dom";
 import { useLocation, useNavigate, useSearchParams, Outlet, BrowserRouter, Routes, Route } from "react-router-dom";
 import { createRoot } from "react-dom/client";
-import "@tanstack/react-query-devtools";
 const APP_NAME = "Design System Showcase";
 const API_ENDPOINTS = {
   HEALTH: "/health"
@@ -244,6 +243,240 @@ const tooltipContent = {
   profile: "Profile",
   account: "Account settings"
 };
+class MetricCalculationEngine {
+  static calculateMetric(config, data, previousData) {
+    const currentValue = this.aggregateValue(config, data);
+    const previousValue = previousData ? this.aggregateValue(config, previousData) : void 0;
+    const trend = this.calculateTrend(currentValue, previousValue);
+    const formattedValue = this.formatValue(currentValue, config.format, config.type);
+    const target = typeof config.target === "function" ? config.target(data) : config.target;
+    return {
+      current: currentValue,
+      previous: previousValue,
+      trend,
+      target,
+      formattedValue
+    };
+  }
+  static aggregateValue(config, data) {
+    if (!data.length) return 0;
+    const values = data.map((item) => {
+      const value = this.extractValue(item, config.key);
+      return typeof value === "number" ? value : 0;
+    }).filter((value) => !isNaN(value));
+    if (!values.length) return 0;
+    switch (config.aggregation || "sum") {
+      case "sum":
+        return values.reduce((sum, value) => sum + value, 0);
+      case "avg":
+        return values.reduce((sum, value) => sum + value, 0) / values.length;
+      case "count":
+        return values.length;
+      case "min":
+        return Math.min(...values);
+      case "max":
+        return Math.max(...values);
+      default:
+        return values.reduce((sum, value) => sum + value, 0);
+    }
+  }
+  static extractValue(item, key) {
+    return key.split(".").reduce((obj, k) => obj == null ? void 0 : obj[k], item);
+  }
+  static calculateTrend(current, previous) {
+    if (previous === void 0 || previous === 0) return "neutral";
+    const change = (current - previous) / Math.abs(previous) * 100;
+    if (change > 1) return "up";
+    if (change < -1) return "down";
+    return "neutral";
+  }
+  static formatValue(value, format, type) {
+    let formatted = value;
+    if ((format == null ? void 0 : format.decimals) !== void 0) {
+      formatted = Number(value.toFixed(format.decimals));
+    }
+    let result = formatted.toString();
+    if ((format == null ? void 0 : format.thousands) !== false && Math.abs(formatted) >= 1e3) {
+      result = formatted.toLocaleString();
+    }
+    switch (type) {
+      case "currency":
+        result = new Intl.NumberFormat("en-US", {
+          style: "currency",
+          currency: "USD",
+          minimumFractionDigits: (format == null ? void 0 : format.decimals) ?? 2,
+          maximumFractionDigits: (format == null ? void 0 : format.decimals) ?? 2
+        }).format(formatted);
+        break;
+      case "percentage":
+        result = `${formatted.toFixed((format == null ? void 0 : format.decimals) ?? 1)}%`;
+        break;
+      case "duration":
+        result = this.formatDuration(formatted);
+        break;
+      case "ratio":
+        result = `${formatted.toFixed((format == null ? void 0 : format.decimals) ?? 2)}:1`;
+        break;
+      default:
+        if (format == null ? void 0 : format.prefix) result = format.prefix + result;
+        if (format == null ? void 0 : format.suffix) result = result + format.suffix;
+    }
+    return result;
+  }
+  static formatDuration(minutes) {
+    const hours = Math.floor(minutes / 60);
+    const mins = Math.floor(minutes % 60);
+    if (hours > 0) {
+      return `${hours}h ${mins}m`;
+    }
+    return `${mins}m`;
+  }
+  static calculateTrendData(config, data, dateField = "date", periods = 12) {
+    const groupedData = this.groupByPeriod(data, dateField);
+    const sortedDates = Object.keys(groupedData).sort();
+    return sortedDates.slice(-periods).map((date) => ({
+      date,
+      value: this.aggregateValue(config, groupedData[date]),
+      label: this.formatDateLabel(date)
+    }));
+  }
+  static groupByPeriod(data, dateField) {
+    return data.reduce((groups, item) => {
+      const date = this.extractValue(item, dateField);
+      if (!date) return groups;
+      const period = new Date(date).toISOString().split("T")[0];
+      if (!groups[period]) groups[period] = [];
+      groups[period].push(item);
+      return groups;
+    }, {});
+  }
+  static formatDateLabel(dateString) {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric"
+    });
+  }
+  static calculateCategoryBreakdown(data, categoryField, valueField, maxCategories = 8) {
+    const groups = data.reduce((acc, item) => {
+      const category = String(this.extractValue(item, categoryField) || "Unknown");
+      const value = this.extractValue(item, valueField) || 0;
+      if (!acc[category]) acc[category] = 0;
+      acc[category] += typeof value === "number" ? value : 0;
+      return acc;
+    }, {});
+    const total = Object.values(groups).reduce((sum, value) => sum + value, 0);
+    let categories = Object.entries(groups).map(([category, value]) => ({
+      category,
+      value,
+      percentage: total > 0 ? value / total * 100 : 0
+    })).sort((a, b) => b.value - a.value);
+    if (categories.length > maxCategories) {
+      const topCategories = categories.slice(0, maxCategories - 1);
+      const otherValue = categories.slice(maxCategories - 1).reduce((sum, cat) => sum + cat.value, 0);
+      topCategories.push({
+        category: "Other",
+        value: otherValue,
+        percentage: total > 0 ? otherValue / total * 100 : 0
+      });
+      categories = topCategories;
+    }
+    return categories;
+  }
+  static detectInsights(metrics, thresholds = {}) {
+    const insights = [];
+    for (const [key, metric] of Object.entries(metrics)) {
+      const threshold = thresholds[key];
+      if (metric.target && metric.current < metric.target * 0.8) {
+        insights.push({
+          type: "negative",
+          message: `${key} is significantly below target`,
+          value: metric.current
+        });
+      }
+      if (metric.trend === "up" && metric.previous && metric.current > metric.previous * 1.2) {
+        insights.push({
+          type: "positive",
+          message: `${key} showing strong growth`,
+          value: metric.current
+        });
+      }
+      if (threshold && metric.current >= threshold.critical) {
+        insights.push({
+          type: "negative",
+          message: `${key} has reached critical threshold`,
+          value: metric.current
+        });
+      }
+    }
+    return insights.slice(0, 5);
+  }
+}
+const iconMap = {
+  Palette,
+  Menu,
+  X,
+  Shield,
+  Users,
+  BarChart3,
+  Database,
+  TrendingUp,
+  Layout,
+  Home,
+  Settings,
+  Bell,
+  Search,
+  Plus,
+  Edit,
+  Trash2,
+  Eye,
+  Download,
+  Upload,
+  Share,
+  Lock,
+  Unlock,
+  Mail,
+  Phone,
+  Calendar,
+  Clock,
+  MapPin,
+  Star,
+  Heart,
+  Bookmark,
+  Tag,
+  Flag,
+  File,
+  Folder,
+  Image,
+  Video,
+  Music,
+  ChevronRight,
+  ChevronDown,
+  ChevronLeft,
+  ChevronUp,
+  ArrowRight,
+  ArrowLeft,
+  ArrowUp,
+  ArrowDown,
+  Check,
+  AlertCircle,
+  Info,
+  HelpCircle
+};
+const Icon = ({ name, className = "w-5 h-5", size, ...props }) => {
+  const IconComponent = iconMap[name];
+  if (!IconComponent) {
+    console.warn(`Icon "${name}" not found. Using default Menu icon.`);
+    return /* @__PURE__ */ jsx(Menu, { className, size, ...props });
+  }
+  return /* @__PURE__ */ jsx(IconComponent, { className, size, ...props });
+};
+const getIcon = (name) => {
+  return iconMap[name] || Menu;
+};
+const isValidIcon = (name) => {
+  return name in iconMap;
+};
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -1265,6 +1498,83 @@ const DataBadge = ({
   }
   return badge;
 };
+const getStageStatus = (stage) => {
+  switch (stage) {
+    case "Closed Won":
+      return "success";
+    case "Negotiation":
+      return "warning";
+    case "Proposal Sent":
+      return "info";
+    case "Qualified":
+      return "info";
+    case "Discovery":
+      return "neutral";
+    default:
+      return "neutral";
+  }
+};
+const SalesPanel = ({
+  sales,
+  onSaleClick,
+  onClose
+}) => {
+  const topDeals = sales.slice(0, 5);
+  const totalValue = sales.reduce((sum, sale) => sum + sale.amount, 0);
+  return /* @__PURE__ */ jsxs("div", { className: "fixed right-0 top-16 h-[calc(100vh-4rem)] w-72 bg-background border-l border-border shadow-lg flex flex-col z-30", children: [
+    /* @__PURE__ */ jsx("div", { className: "p-3 border-b border-border", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("h3", { className: "font-medium flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Target, { className: "w-4 h-4" }),
+        "Pipeline"
+      ] }),
+      onClose && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, children: "×" })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "p-3 border-b border-border", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Total Value" }),
+        /* @__PURE__ */ jsxs("span", { className: "font-semibold text-green-600", children: [
+          "$",
+          totalValue.toLocaleString()
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Active Deals" }),
+        /* @__PURE__ */ jsx("span", { className: "font-semibold", children: sales.length })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-auto p-3", children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-3", children: "Recent Opportunities" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: topDeals.map((sale) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "p-2 border border-border rounded-md hover:bg-muted/50 cursor-pointer transition-colors",
+          onClick: () => onSaleClick == null ? void 0 : onSaleClick(sale),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start mb-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: sale.customer }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: sale.product })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "text-right ml-2", children: /* @__PURE__ */ jsxs("p", { className: "text-sm font-semibold text-green-600", children: [
+                "$",
+                sale.amount.toLocaleString()
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+              /* @__PURE__ */ jsx(DataBadge, { variant: "status", status: getStageStatus(sale.stage), children: sale.stage }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: sale.salesperson })
+            ] })
+          ]
+        },
+        sale.id
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "p-3 border-t border-border", children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "w-full", children: [
+      /* @__PURE__ */ jsx(ExternalLink, { className: "w-4 h-4 mr-2" }),
+      "View All Deals"
+    ] }) })
+  ] });
+};
 const StatCard = ({
   title,
   value,
@@ -5529,6 +5839,42 @@ const useSidebar = () => {
   }
   return context;
 };
+const NavigationContext = createContext(void 0);
+const defaultShowcaseNavigation = [
+  { value: "showcase", label: "Showcase", icon: "Palette", path: "/showcase", category: 5 },
+  { value: "admin-dashboard", label: "Admin Dashboard", icon: "Shield", path: "/admin/dashboard", category: 2 },
+  { value: "admin-users", label: "User Management", icon: "Users", path: "/admin/users", category: 3 },
+  { value: "admin-sales", label: "Sales Dashboard", icon: "TrendingUp", path: "/admin/sales", category: 4 },
+  { value: "entity-performance", label: "Performance Dashboard", icon: "BarChart3", path: "/entity/performance", category: 6 },
+  { value: "entity-management", label: "Entity Management", icon: "Database", path: "/entity/management", category: 7 },
+  { value: "entity-template", label: "Template Example", icon: "Layout", path: "/entity/template-example", category: 1 }
+];
+const NavigationProvider = ({ children, initialNavigation }) => {
+  const [navigation, setNavigation] = React__default.useState(
+    initialNavigation || {
+      items: defaultShowcaseNavigation,
+      showDefaultNavigation: true,
+      defaultExpanded: true
+    }
+  );
+  return /* @__PURE__ */ jsx(NavigationContext.Provider, { value: { navigation, setNavigation }, children });
+};
+const useNavigation = () => {
+  const context = useContext(NavigationContext);
+  if (context === void 0) {
+    throw new Error("useNavigation must be used within a NavigationProvider");
+  }
+  return context;
+};
+const getNavigationItems = (config) => {
+  if (config.items.length > 0) {
+    return config.items;
+  }
+  if (config.showDefaultNavigation !== false) {
+    return defaultShowcaseNavigation;
+  }
+  return [];
+};
 const SidebarButton = ({
   icon,
   label,
@@ -5536,13 +5882,16 @@ const SidebarButton = ({
   category = 1,
   expanded = false,
   onClick,
-  className
+  className,
+  badge,
+  disabled = false
 }) => {
   return /* @__PURE__ */ jsxs(
     Button,
     {
       variant: active ? "secondary" : "ghost",
       onClick,
+      disabled,
       tooltip: !expanded ? label : void 0,
       className: cn(
         "relative w-full justify-start gap-3 h-12",
@@ -5576,12 +5925,19 @@ const SidebarButton = ({
             "text-sm font-medium flex-1 text-left",
             active ? `text-category-${category}` : "text-foreground"
           ), children: label }),
-          active && /* @__PURE__ */ jsx("div", { className: cn(
+          badge ? /* @__PURE__ */ jsx("span", { className: cn(
+            "px-2 py-0.5 text-xs font-medium rounded-full flex-shrink-0",
+            "bg-primary/10 text-primary"
+          ), children: badge }) : active && /* @__PURE__ */ jsx("div", { className: cn(
             "w-2 h-2 rounded-full flex-shrink-0",
             `bg-category-${category}`
           ) })
         ] }),
-        !expanded && active && /* @__PURE__ */ jsx("div", { className: "absolute -top-1 -right-1", children: /* @__PURE__ */ jsx("div", { className: cn(
+        !expanded && (badge || active) && /* @__PURE__ */ jsx("div", { className: "absolute -top-1 -right-1", children: badge ? /* @__PURE__ */ jsx("span", { className: cn(
+          "px-1.5 py-0.5 text-xs font-bold rounded-full",
+          "bg-primary text-primary-foreground",
+          "ring-2 ring-background"
+        ), children: badge }) : active && /* @__PURE__ */ jsx("div", { className: cn(
           "w-2.5 h-2.5 rounded-full",
           `bg-category-${category}`,
           "ring-2 ring-background"
@@ -5592,14 +5948,11 @@ const SidebarButton = ({
 };
 const Sidebar = ({ className }) => {
   const { isExpanded, toggleSidebar } = useSidebar();
+  const { navigation } = useNavigation();
   const location = useLocation();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
-  const items = [
-    { value: "showcase", label: "Showcase", icon: /* @__PURE__ */ jsx(Palette, { className: "w-5 h-5" }), path: "/showcase", category: 5 },
-    { value: "admin-dashboard", label: "Admin Dashboard", icon: /* @__PURE__ */ jsx(Shield, { className: "w-5 h-5" }), path: "/admin/dashboard", category: 2 },
-    { value: "admin-users", label: "User Management", icon: /* @__PURE__ */ jsx(Users, { className: "w-5 h-5" }), path: "/admin/users", category: 3 }
-  ];
+  const items = getNavigationItems(navigation);
   const handleNavigation = (path) => {
     if (path.includes("?")) {
       const [basePath, query] = path.split("?");
@@ -5655,12 +6008,14 @@ const Sidebar = ({ className }) => {
           return /* @__PURE__ */ jsx(
             SidebarButton,
             {
-              icon: item.icon,
+              icon: /* @__PURE__ */ jsx(Icon, { name: item.icon, className: "w-5 h-5" }),
               label: item.label,
               active: isActive,
               category: item.category,
               expanded: isExpanded,
-              onClick: () => handleNavigation(item.path)
+              onClick: () => handleNavigation(item.path),
+              badge: item.badge,
+              disabled: item.disabled
             },
             item.value
           );
@@ -5726,6 +6081,28 @@ const AppLayout = () => {
     )
   ] });
 };
+const DashboardWithSidePanel = ({
+  children,
+  sidePanel,
+  showSidePanel = false,
+  sidePanelWidth = 72,
+  className
+}) => {
+  const marginClass = `pr-${sidePanelWidth}`;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative h-full", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "transition-all duration-300",
+          showSidePanel ? marginClass : ""
+        ),
+        children
+      }
+    ),
+    showSidePanel && sidePanel
+  ] });
+};
 const SectionHeader = ({
   title,
   description,
@@ -7748,6 +8125,7 @@ function createReactApp(config) {
     enableQuery = true,
     enableRouting = true,
     auth,
+    navigation,
     customProviders = []
   } = appConfig;
   const queryClient = new QueryClient({
@@ -7782,7 +8160,7 @@ function createReactApp(config) {
       tree = /* @__PURE__ */ jsx(Provider, { children: tree }, Provider.name);
     });
     if (enableRouting) {
-      tree = /* @__PURE__ */ jsx(SidebarProvider, { children: tree });
+      tree = /* @__PURE__ */ jsx(NavigationProvider, { initialNavigation: navigation, children: /* @__PURE__ */ jsx(SidebarProvider, { children: tree }) });
     }
     if (enableAuth) {
       tree = /* @__PURE__ */ jsx(AuthProvider, { config: auth, children: tree });
@@ -10049,6 +10427,7 @@ export {
   DashboardCard,
   DashboardGrid,
   DashboardTemplate,
+  DashboardWithSidePanel,
   DataBadge,
   DataDetailTemplate,
   DataTable,
@@ -10076,14 +10455,17 @@ export {
   FormField,
   FormGroup,
   GlobalSearch,
+  Icon,
   IconBadge,
   Input,
   Label,
   Loading,
   LoginForm,
   LogoutButton,
+  MetricCalculationEngine,
   Modal,
   NavMenu,
+  NavigationProvider,
   PageTemplate,
   Pagination,
   PaletteSwitcher,
@@ -10091,6 +10473,7 @@ export {
   ProtectedRoute,
   RESPONSIVE_CHART_HEIGHTS,
   ROUTES,
+  SalesPanel,
   SearchInput,
   SectionHeader,
   Select,
@@ -10099,6 +10482,7 @@ export {
   SelectTrigger,
   SelectValue,
   ShowcaseSection,
+  Sidebar,
   SidebarButton,
   SidebarProvider,
   Skeleton,
@@ -10134,7 +10518,10 @@ export {
   getAnimationClasses,
   getChartHeight,
   getContainerHeightClass,
+  getIcon,
+  getNavigationItems,
   interactionVariants,
+  isValidIcon,
   legacyPatterns,
   setGlobalAuthService,
   tooltipContent,
@@ -10144,6 +10531,7 @@ export {
   useCreateExample,
   useDeleteExample,
   useGetExample,
+  useNavigation,
   usePermissions,
   useSidebar,
   useTextOverflow,