@pattern-stack/frontend-patterns 0.0.6 → 0.1.1

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import './frontend-patterns.css';
+import './style.css';
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -6,18 +6,19 @@ 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"
@@ -243,240 +244,6 @@ 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));
 }
@@ -1498,83 +1265,6 @@ 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,
@@ -5839,42 +5529,6 @@ 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,
@@ -5882,16 +5536,13 @@ const SidebarButton = ({
   category = 1,
   expanded = false,
   onClick,
-  className,
-  badge,
-  disabled = false
+  className
 }) => {
   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",
@@ -5925,19 +5576,12 @@ const SidebarButton = ({
             "text-sm font-medium flex-1 text-left",
             active ? `text-category-${category}` : "text-foreground"
           ), children: label }),
-          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(
+          active && /* @__PURE__ */ jsx("div", { className: cn(
             "w-2 h-2 rounded-full flex-shrink-0",
             `bg-category-${category}`
           ) })
         ] }),
-        !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(
+        !expanded && active && /* @__PURE__ */ jsx("div", { className: "absolute -top-1 -right-1", children: /* @__PURE__ */ jsx("div", { className: cn(
           "w-2.5 h-2.5 rounded-full",
           `bg-category-${category}`,
           "ring-2 ring-background"
@@ -5948,11 +5592,14 @@ const SidebarButton = ({
 };
 const Sidebar = ({ className }) => {
   const { isExpanded, toggleSidebar } = useSidebar();
-  const { navigation } = useNavigation();
   const location = useLocation();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
-  const items = getNavigationItems(navigation);
+  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 handleNavigation = (path) => {
     if (path.includes("?")) {
       const [basePath, query] = path.split("?");
@@ -6008,14 +5655,12 @@ const Sidebar = ({ className }) => {
           return /* @__PURE__ */ jsx(
             SidebarButton,
             {
-              icon: /* @__PURE__ */ jsx(Icon, { name: item.icon, className: "w-5 h-5" }),
+              icon: item.icon,
               label: item.label,
               active: isActive,
               category: item.category,
               expanded: isExpanded,
-              onClick: () => handleNavigation(item.path),
-              badge: item.badge,
-              disabled: item.disabled
+              onClick: () => handleNavigation(item.path)
             },
             item.value
           );
@@ -6081,28 +5726,6 @@ 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,
@@ -8125,7 +7748,6 @@ function createReactApp(config) {
     enableQuery = true,
     enableRouting = true,
     auth,
-    navigation,
     customProviders = []
   } = appConfig;
   const queryClient = new QueryClient({
@@ -8160,7 +7782,7 @@ function createReactApp(config) {
       tree = /* @__PURE__ */ jsx(Provider, { children: tree }, Provider.name);
     });
     if (enableRouting) {
-      tree = /* @__PURE__ */ jsx(NavigationProvider, { initialNavigation: navigation, children: /* @__PURE__ */ jsx(SidebarProvider, { children: tree }) });
+      tree = /* @__PURE__ */ jsx(SidebarProvider, { children: tree });
     }
     if (enableAuth) {
       tree = /* @__PURE__ */ jsx(AuthProvider, { config: auth, children: tree });
@@ -10427,7 +10049,6 @@ export {
   DashboardCard,
   DashboardGrid,
   DashboardTemplate,
-  DashboardWithSidePanel,
   DataBadge,
   DataDetailTemplate,
   DataTable,
@@ -10455,17 +10076,14 @@ export {
   FormField,
   FormGroup,
   GlobalSearch,
-  Icon,
   IconBadge,
   Input,
   Label,
   Loading,
   LoginForm,
   LogoutButton,
-  MetricCalculationEngine,
   Modal,
   NavMenu,
-  NavigationProvider,
   PageTemplate,
   Pagination,
   PaletteSwitcher,
@@ -10473,7 +10091,6 @@ export {
   ProtectedRoute,
   RESPONSIVE_CHART_HEIGHTS,
   ROUTES,
-  SalesPanel,
   SearchInput,
   SectionHeader,
   Select,
@@ -10482,7 +10099,6 @@ export {
   SelectTrigger,
   SelectValue,
   ShowcaseSection,
-  Sidebar,
   SidebarButton,
   SidebarProvider,
   Skeleton,
@@ -10518,10 +10134,7 @@ export {
   getAnimationClasses,
   getChartHeight,
   getContainerHeightClass,
-  getIcon,
-  getNavigationItems,
   interactionVariants,
-  isValidIcon,
   legacyPatterns,
   setGlobalAuthService,
   tooltipContent,
@@ -10531,7 +10144,6 @@ export {
   useCreateExample,
   useDeleteExample,
   useGetExample,
-  useNavigation,
   usePermissions,
   useSidebar,
   useTextOverflow,