@sudobility/building_blocks 0.0.144 → 0.0.146

package/dist/components/layout/app-page-layout.d.ts

@@ -1,19 +1,30 @@
 import React, { type ReactNode } from 'react';
-import { type VariantProps } from 'class-variance-authority';
 import { type AppBreadcrumbsProps } from '../breadcrumbs/app-breadcrumbs';
+import { type AppTopBarProps } from '../topbar/app-topbar';
+import { type AppTopBarWithFirebaseAuthProps } from '../topbar/app-topbar-with-firebase-auth';
+import { type AppTopBarWithWalletProps } from '../topbar/app-topbar-with-wallet';
+import { type AppFooterProps } from '../footer/app-footer';
+import { type AppFooterForHomePageProps } from '../footer/app-footer-for-home-page';
 import type { MaxWidth, ContentPadding, BackgroundVariant } from '../../types';
-declare const layoutVariants: (props?: ({
-    background?: "default" | "white" | "gradient" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface AppPageLayoutProps extends VariantProps<typeof layoutVariants> {
-    /** Page content */
-    children: ReactNode;
-    /** TopBar slot - pass an AppTopBar variant or custom component */
-    topBar: ReactNode;
-    /** Breadcrumbs configuration (optional) */
-    breadcrumbs?: AppBreadcrumbsProps;
-    /** Footer slot - pass an AppFooter variant or custom component */
-    footer?: ReactNode;
+/** Discriminated union for selecting which TopBar component to render. */
+export type TopBarConfig = ({
+    variant: 'base';
+    topBarVariant?: 'default' | 'app';
+} & Omit<AppTopBarProps, 'variant'>) | ({
+    variant: 'firebase';
+    topBarVariant?: 'default' | 'app';
+} & Omit<AppTopBarWithFirebaseAuthProps, 'variant'>) | ({
+    variant: 'wallet';
+    topBarVariant?: 'default' | 'app';
+} & Omit<AppTopBarWithWalletProps, 'variant'>);
+/** Discriminated union for selecting which Footer component to render. */
+export type FooterConfig = ({
+    variant: 'compact';
+} & AppFooterProps) | ({
+    variant: 'full';
+} & AppFooterForHomePageProps);
+/** Page-level layout and styling options. */
+export interface AppPageProps {
     /** Max width for content area (default: '7xl') */
     maxWidth?: MaxWidth;
     /** Content padding (default: 'md') */
@@ -30,44 +41,51 @@ export interface AppPageLayoutProps extends VariantProps<typeof layoutVariants>
     mainClassName?: string;
     /** Optional aspect ratio (width / height) for content area. When set, children are placed inside a container with fixed aspect ratio using AspectFit behavior. */
     aspectRatio?: number;
-    /** When true, the footer sticks to the bottom of the viewport */
-    stickyFooter?: boolean;
+}
+export interface AppPageLayoutProps {
+    /** Page content */
+    children: ReactNode;
+    /** TopBar configuration - selects which TopBar component to render */
+    topBar: TopBarConfig;
+    /** Breadcrumbs configuration (optional) */
+    breadcrumbs?: AppBreadcrumbsProps;
+    /** Footer configuration - selects which Footer component to render */
+    footer?: FooterConfig;
+    /** Page-level layout and styling options */
+    page?: AppPageProps;
 }
 /**
  * AppPageLayout - Layout wrapper combining TopBar, Breadcrumbs, Content, and Footer.
  *
  * Features:
- * - Flexible slots for TopBar and Footer
+ * - Props-based TopBar and Footer via discriminated unions
  * - Optional breadcrumbs with share and "Talk to Founder"
  * - Configurable content max-width and padding
  * - Background variants
  * - Dark mode support
- * - Sticky footer behavior
+ * - Sticky footer behavior (automatic for compact footer)
  *
  * @example
  * ```tsx
  * <AppPageLayout
- *   topBar={
- *     <AppTopBarWithFirebaseAuth
- *       logo={{ src: '/logo.png', appName: 'My App' }}
- *       menuItems={menuItems}
- *       AuthActionComponent={AuthAction}
- *       onLoginClick={() => navigate('/login')}
- *     />
- *   }
+ *   topBar={{
+ *     variant: 'firebase',
+ *     logo: { src: '/logo.png', appName: 'My App' },
+ *     menuItems: menuItems,
+ *     AuthActionComponent: AuthAction,
+ *     onLoginClick: () => navigate('/login'),
+ *   }}
  *   breadcrumbs={{
  *     items: breadcrumbItems,
  *     shareConfig: { title: 'Page', description: 'Description', hashtags: [] },
  *   }}
- *   footer={
- *     <AppFooter
- *       version="1.0.0"
- *       companyName="My Company"
- *       links={[{ label: 'Privacy', href: '/privacy' }]}
- *     />
- *   }
- *   maxWidth="7xl"
- *   background="default"
+ *   footer={{
+ *     variant: 'compact',
+ *     version: '1.0.0',
+ *     companyName: 'My Company',
+ *     links: [{ label: 'Privacy', href: '/privacy' }],
+ *   }}
+ *   page={{ maxWidth: '7xl', background: 'default' }}
  * >
  *   <h1>Page Content</h1>
  * </AppPageLayout>

package/dist/components/layout/index.d.ts

@@ -1 +1 @@
-export { AppPageLayout, type AppPageLayoutProps } from './app-page-layout';
+export { AppPageLayout, type AppPageLayoutProps, type AppPageProps, type TopBarConfig, type FooterConfig, } from './app-page-layout';

package/dist/index.js

@@ -1065,31 +1065,65 @@ const paddingClasses = {
   md: "px-4 py-8",
   lg: "px-4 py-12"
 };
+function renderTopBar(config) {
+  const { variant, topBarVariant, ...rest } = config;
+  switch (variant) {
+    case "base":
+      return /* @__PURE__ */ jsx(
+        AppTopBar,
+        {
+          variant: topBarVariant,
+          ...rest
+        }
+      );
+    case "firebase":
+      return /* @__PURE__ */ jsx(
+        AppTopBarWithFirebaseAuth,
+        {
+          variant: topBarVariant,
+          ...rest
+        }
+      );
+    case "wallet":
+      return /* @__PURE__ */ jsx(
+        AppTopBarWithWallet,
+        {
+          variant: topBarVariant,
+          ...rest
+        }
+      );
+  }
+}
+function renderFooter(config) {
+  const { variant, ...rest } = config;
+  switch (variant) {
+    case "compact":
+      return /* @__PURE__ */ jsx(AppFooter, { ...rest });
+    case "full":
+      return /* @__PURE__ */ jsx(AppFooterForHomePage, { ...rest });
+  }
+}
 const AppPageLayout = ({
   children,
   topBar,
   breadcrumbs,
   footer,
-  maxWidth = "7xl",
-  contentPadding = "md",
-  background = "default",
-  layoutMode = "standard",
-  className,
-  contentClassName,
-  mainClassName,
-  aspectRatio,
-  stickyFooter = false
+  page
 }) => {
-  if (process.env.NODE_ENV !== "production") {
-    if (!topBar) {
-      console.warn(
-        "[AppPageLayout] No topBar provided. The layout will render without a navigation bar. Pass an AppTopBar variant or custom component via the topBar prop."
-      );
-    }
-  }
+  const {
+    maxWidth = "7xl",
+    contentPadding = "md",
+    background = "default",
+    layoutMode = "standard",
+    className,
+    contentClassName,
+    mainClassName,
+    aspectRatio
+  } = page ?? {};
+  const isCompactFooter = (footer == null ? void 0 : footer.variant) === "compact";
   const content = aspectRatio ? /* @__PURE__ */ jsx(AspectFitView, { aspectRatio, children }) : children;
   return /* @__PURE__ */ jsx(LayoutProvider, { mode: layoutMode, children: /* @__PURE__ */ jsxs("div", { className: cn(layoutVariants({ background }), className), children: [
-    /* @__PURE__ */ jsx("header", { children: topBar }),
+    /* @__PURE__ */ jsx("header", { children: renderTopBar(topBar) }),
     breadcrumbs && breadcrumbs.items && breadcrumbs.items.length > 0 && /* @__PURE__ */ jsx(AppBreadcrumbs, { ...breadcrumbs }),
     /* @__PURE__ */ jsx("main", { className: cn("flex-1 overflow-auto", mainClassName), children: /* @__PURE__ */ jsx(
       "div",
@@ -1103,7 +1137,13 @@ const AppPageLayout = ({
         children: content
       }
     ) }),
-    footer && /* @__PURE__ */ jsx("footer", { className: stickyFooter ? "sticky bottom-0 z-10" : void 0, children: footer })
+    footer && /* @__PURE__ */ jsx(
+      "footer",
+      {
+        className: isCompactFooter ? "sticky bottom-0 z-10" : void 0,
+        children: renderFooter(footer)
+      }
+    )
   ] }) });
 };
 var Theme = /* @__PURE__ */ ((Theme2) => {