@pattern-stack/frontend-patterns 0.2.0-alpha.11 → 0.2.0-alpha.13

package/dist/index.js

@@ -10693,7 +10693,7 @@ const SidebarButton = ({
     }
   );
 };
-const Sidebar = ({ className }) => {
+const Sidebar = ({ className, footer }) => {
   const { isExpanded, toggleSidebar } = useSidebar();
   const { navigation } = useNavigation();
   const location = reactRouterDom.useLocation();
@@ -10767,42 +10767,56 @@ const Sidebar = ({ className }) => {
             item.value
           );
         }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        footer != null && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn("p-4 border-t border-border", !isExpanded && "px-3"),
             "data-component-name": "SidebarFooter",
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "text-xs text-muted-foreground text-center",
-                    "absolute inset-0 transition-opacity duration-200 ease-out",
-                    !isExpanded ? "opacity-100" : "opacity-0"
-                  ),
-                  children: "v1.0"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "text-xs text-muted-foreground whitespace-nowrap",
-                    "transition-opacity duration-200 ease-out",
-                    isExpanded ? "opacity-100" : "opacity-0"
-                  ),
-                  children: "AloeVera v1.0"
-                }
-              )
-            ] })
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "text-xs text-muted-foreground",
+                  "transition-opacity duration-200 ease-out",
+                  isExpanded ? "opacity-100" : "opacity-70",
+                  !isExpanded && "text-center"
+                ),
+                children: footer
+              }
+            )
           }
         )
       ]
     }
   );
 };
-const AppHeader = ({ className }) => {
+function isBrandingObject(v) {
+  return v != null && typeof v === "object" && !React.isValidElement(v) && "title" in v;
+}
+const AppHeader = ({
+  className,
+  branding,
+  searchPlaceholder = "Search models, tests, jobs, and components...",
+  showSearch = false,
+  showUserMenu = false,
+  showConnectionStatus = false
+}) => {
+  const isTrialMode = false;
+  const brandingNode = (() => {
+    if (branding == null) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-bold text-foreground", children: "Frontend Template" }),
+        isTrialMode
+      ] });
+    }
+    if (isBrandingObject(branding)) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-bold text-foreground", children: branding.title }),
+        branding.badge
+      ] });
+    }
+    return branding;
+  })();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "header",
     {
@@ -10813,35 +10827,28 @@ const AppHeader = ({ className }) => {
         className
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-16 items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-bold text-foreground", children: "Frontend Template" }),
-          /* @__PURE__ */ jsxRuntime.jsx(DataBadge, { variant: "status", status: "info", display: "icon-text", children: "Trial Mode" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-2xl mx-8", children: /* @__PURE__ */ jsxRuntime.jsx(
-          GlobalSearch,
-          {
-            className: "w-full",
-            placeholder: "Search models, tests, jobs, and components..."
-          }
-        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: brandingNode }),
+        showSearch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-md mx-8", children: /* @__PURE__ */ jsxRuntime.jsx(GlobalSearch, { className: "w-full", placeholder: searchPlaceholder }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ConnectionStatus, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(UserMenu, { category: 8 })
+          showConnectionStatus && /* @__PURE__ */ jsxRuntime.jsx(ConnectionStatus, {}),
+          showUserMenu && /* @__PURE__ */ jsxRuntime.jsx(UserMenu, { category: 8 })
         ] })
       ] }) })
     }
   );
 };
-const AppLayout = () => {
+const AppLayout = ({ header, sidebar } = {}) => {
   const { isExpanded } = useSidebar();
+  const hideHeader = header === false;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-background", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(AppHeader, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(Sidebar, {}),
+    !hideHeader && /* @__PURE__ */ jsxRuntime.jsx(AppHeader, { ...header ?? {} }),
+    /* @__PURE__ */ jsxRuntime.jsx(Sidebar, { footer: sidebar == null ? void 0 : sidebar.footer }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "main",
       {
         className: cn(
-          "pt-16 min-h-screen transition-all duration-300 ease-in-out",
+          "min-h-screen transition-all duration-300 ease-in-out",
+          hideHeader ? "" : "pt-16",
           isExpanded ? "ml-64" : "ml-16"
         ),
         children: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
@@ -15643,6 +15650,8 @@ function createReactApp(config) {
     auth,
     navigation,
     customProviders = [],
+    header,
+    sidebar,
     persistQueryCache = false,
     queryCacheKey = "PATTERN_STACK_QUERY_CACHE"
   } = appConfig;
@@ -15738,8 +15747,10 @@ function createReactApp(config) {
         }
         return component;
       };
-      const AppContent = () => /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-screen", children: "Loading..." }), children: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Routes, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Route, { path: "/", element: /* @__PURE__ */ jsxRuntime.jsx(AppLayout, {}), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { index: true, element: wrapWithProtection("/", /* @__PURE__ */ jsxRuntime.jsx(DefaultHome, {})) }),
+      const consumerHasRoot = routes.some((r) => r.path === "/");
+      const showDefaultHome = routes.length === 0;
+      const AppContent = () => /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-screen", children: "Loading..." }), children: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Routes, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Route, { path: "/", element: /* @__PURE__ */ jsxRuntime.jsx(AppLayout, { header, sidebar }), children: [
+        showDefaultHome && !consumerHasRoot && /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { index: true, element: wrapWithProtection("/", /* @__PURE__ */ jsxRuntime.jsx(DefaultHome, {})) }),
         routes.map(({ path, component }, index) => /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path, element: wrapWithProtection(path, component) }, index))
       ] }) }) });
       return createProviderTree(/* @__PURE__ */ jsxRuntime.jsx(AppContent, {}));