@sudobility/building_blocks 0.0.1

package/README.md

@@ -0,0 +1,220 @@
+# @sudobility/building_blocks
+
+Higher-level shared UI building blocks for Sudobility apps. These components integrate with authentication, wallet connection, i18n, and routing.
+
+## Installation
+
+```bash
+bun add @sudobility/building_blocks
+```
+
+## Peer Dependencies
+
+Required:
+- `@sudobility/components`
+- `@sudobility/design`
+- `@heroicons/react`
+- `react` (^18.0.0 || ^19.0.0)
+- `class-variance-authority`
+- `clsx`
+- `tailwind-merge`
+
+Optional (for specific features):
+- `@sudobility/auth-components` - For Firebase auth integration
+- `@sudobility/web3-components` - For wallet connection
+- `@sudobility/devops-components` - For status indicator
+
+## Components
+
+### TopBar Components
+
+#### AppTopBar (Base)
+Base topbar with logo, menu items, language selector, and render prop for auth.
+
+```tsx
+import { AppTopBar } from '@sudobility/building_blocks';
+import { Cog6ToothIcon, DocumentTextIcon } from '@heroicons/react/24/outline';
+
+<AppTopBar
+  logo={{
+    src: '/logo.png',
+    appName: 'My App',
+    onClick: () => navigate('/'),
+  }}
+  menuItems={[
+    { id: 'docs', label: 'Docs', icon: DocumentTextIcon, href: '/docs' },
+    { id: 'settings', label: 'Settings', icon: Cog6ToothIcon, href: '/settings' },
+  ]}
+  currentLanguage="en"
+  onLanguageChange={(lang) => switchLanguage(lang)}
+  renderAccountSection={() => <MyAuthButton />}
+  LinkComponent={LocalizedLink}
+/>
+```
+
+#### AppTopBarWithFirebaseAuth
+TopBar with Firebase authentication via @sudobility/auth-components.
+
+```tsx
+import { AppTopBarWithFirebaseAuth } from '@sudobility/building_blocks';
+import { AuthAction } from '@sudobility/auth-components';
+
+<AppTopBarWithFirebaseAuth
+  logo={{ src: '/logo.png', appName: 'My App' }}
+  menuItems={menuItems}
+  AuthActionComponent={AuthAction}
+  onLoginClick={() => navigate('/login')}
+  authenticatedMenuItems={[
+    { id: 'dashboard', label: 'Dashboard', onClick: () => navigate('/dashboard') },
+  ]}
+/>
+```
+
+#### AppTopBarWithWallet
+TopBar with wallet connection via @sudobility/web3-components.
+
+```tsx
+import { AppTopBarWithWallet } from '@sudobility/building_blocks';
+import { WalletDropdownMenu } from '@sudobility/web3-components';
+
+<AppTopBarWithWallet
+  logo={{ src: '/logo.png', appName: 'My App' }}
+  menuItems={menuItems}
+  WalletDropdownMenuComponent={WalletDropdownMenu}
+  isConnected={isConnected}
+  walletAddress={walletAddress}
+  authStatus={authStatus}
+  onConnect={() => navigate('/connect')}
+  onDisconnect={handleDisconnect}
+  walletMenuItems={walletMenuItems}
+/>
+```
+
+### Breadcrumbs
+
+#### AppBreadcrumbs
+Breadcrumbs with social share and "Talk to Founder" button.
+
+```tsx
+import { AppBreadcrumbs } from '@sudobility/building_blocks';
+
+<AppBreadcrumbs
+  items={[
+    { label: 'Home', href: '/' },
+    { label: 'Products', href: '/products' },
+    { label: 'Widget', current: true },
+  ]}
+  shareConfig={{
+    title: 'Check out this widget',
+    description: 'Amazing widget for your needs',
+    hashtags: ['widget', 'product'],
+  }}
+  talkToFounder={{
+    meetingUrl: 'https://calendly.com/founder/30min',
+    buttonText: 'Book a call',
+  }}
+/>
+```
+
+### Footer Components
+
+#### AppFooter (Compact)
+Compact footer for app pages with sticky positioning.
+
+```tsx
+import { AppFooter } from '@sudobility/building_blocks';
+import { SystemStatusIndicator } from '@sudobility/devops-components';
+
+<AppFooter
+  version="1.0.0"
+  companyName="Sudobility Inc."
+  companyUrl="/"
+  statusIndicator={{
+    statusPageUrl: 'https://status.example.com',
+  }}
+  StatusIndicatorComponent={SystemStatusIndicator}
+  links={[
+    { label: 'Privacy', href: '/privacy' },
+    { label: 'Terms', href: '/terms' },
+  ]}
+  sticky
+/>
+```
+
+#### AppFooterForHomePage (Full)
+Full footer for home/landing pages with link sections.
+
+```tsx
+import { AppFooterForHomePage } from '@sudobility/building_blocks';
+
+<AppFooterForHomePage
+  logo={{ appName: 'My App' }}
+  linkSections={[
+    {
+      title: 'Product',
+      links: [
+        { label: 'Features', href: '/features' },
+        { label: 'Pricing', href: '/pricing' },
+      ],
+    },
+    {
+      title: 'Company',
+      links: [
+        { label: 'About', href: '/about' },
+        { label: 'Contact', href: '/contact' },
+      ],
+    },
+  ]}
+  socialLinks={{
+    twitterUrl: 'https://twitter.com/myapp',
+    discordUrl: 'https://discord.gg/myapp',
+  }}
+  version="1.0.0"
+  companyName="Sudobility Inc."
+  description="Building the future of web3 communication"
+/>
+```
+
+### Layout
+
+#### AppPageLayout
+Layout wrapper combining TopBar, Breadcrumbs, Content, and Footer.
+
+```tsx
+import { AppPageLayout, AppTopBarWithFirebaseAuth, AppFooter } from '@sudobility/building_blocks';
+
+<AppPageLayout
+  topBar={<AppTopBarWithFirebaseAuth {...topBarProps} />}
+  breadcrumbs={{
+    items: breadcrumbItems,
+    shareConfig: shareConfig,
+  }}
+  footer={<AppFooter {...footerProps} />}
+  maxWidth="7xl"
+  background="default"
+>
+  <h1>Page Content</h1>
+</AppPageLayout>
+```
+
+## Constants
+
+### Default Languages
+16 languages with flags are included by default:
+
+```tsx
+import { DEFAULT_LANGUAGES } from '@sudobility/building_blocks';
+// ['en', 'ar', 'de', 'es', 'fr', 'it', 'ja', 'ko', 'pt', 'ru', 'sv', 'th', 'uk', 'vi', 'zh', 'zh-hant']
+```
+
+## Features
+
+- **Responsive**: All components support mobile with hamburger menu
+- **Dark Mode**: Full dark mode support via Tailwind CSS
+- **i18n Ready**: Language selector with 16 default languages
+- **Flexible Auth**: Support for Firebase auth or wallet connection
+- **Customizable**: All components accept custom classNames and Link components
+
+## License
+
+MIT

package/dist/__tests__/app-breadcrumbs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/app-footer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/app-page-layout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/app-topbar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/language-selector.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/languages.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/breadcrumbs/app-breadcrumbs.d.ts

@@ -0,0 +1,52 @@
+import React, { type ComponentType } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import type { BreadcrumbItem, ShareConfig, TalkToFounderConfig, LinkComponentProps } from '../../types';
+declare const breadcrumbContainerVariants: (props?: ({
+    variant?: "default" | "transparent" | "subtle" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AppBreadcrumbsProps extends VariantProps<typeof breadcrumbContainerVariants> {
+    /** Breadcrumb items */
+    items: BreadcrumbItem[];
+    /** Share configuration (shows social share buttons on right) */
+    shareConfig?: ShareConfig;
+    /** Talk to founder button configuration */
+    talkToFounder?: TalkToFounderConfig;
+    /** Custom Link component */
+    LinkComponent?: ComponentType<LinkComponentProps>;
+    /** Custom className for the container */
+    className?: string;
+    /** Custom className for the inner content */
+    contentClassName?: string;
+}
+/**
+ * AppBreadcrumbs - Breadcrumb navigation with social share and "Talk to Founder" button.
+ *
+ * Features:
+ * - Breadcrumb trail with links
+ * - Social share buttons on the right
+ * - Optional "Talk to Founder" meeting button
+ * - Always renders at max-w-7xl width
+ * - Dark mode support
+ *
+ * @example
+ * ```tsx
+ * <AppBreadcrumbs
+ *   items={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Products', href: '/products' },
+ *     { label: 'Widget', current: true },
+ *   ]}
+ *   shareConfig={{
+ *     title: 'Check out this widget',
+ *     description: 'Amazing widget for your needs',
+ *     hashtags: ['widget', 'product'],
+ *   }}
+ *   talkToFounder={{
+ *     meetingUrl: 'https://calendly.com/founder/30min',
+ *     buttonText: 'Book a call',
+ *   }}
+ * />
+ * ```
+ */
+export declare const AppBreadcrumbs: React.FC<AppBreadcrumbsProps>;
+export default AppBreadcrumbs;

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

@@ -0,0 +1 @@
+export { AppBreadcrumbs, type AppBreadcrumbsProps } from './app-breadcrumbs';

package/dist/components/footer/app-footer-for-home-page.d.ts

@@ -0,0 +1,92 @@
+import React, { type ComponentType } from 'react';
+import type { StatusIndicatorConfig, LinkComponentProps, FooterLinkSection as FooterLinkSectionConfig, SocialLinksConfig } from '../../types';
+import type { SystemStatusIndicatorProps } from './app-footer';
+export interface AppFooterForHomePageProps {
+    /** App logo configuration */
+    logo: {
+        /** Logo image src (optional - if not provided, uses Logo component) */
+        src?: string;
+        /** App name */
+        appName: string;
+    };
+    /** Footer link sections (columns of links) */
+    linkSections: FooterLinkSectionConfig[];
+    /** Social media links */
+    socialLinks?: SocialLinksConfig;
+    /** System status indicator configuration */
+    statusIndicator?: StatusIndicatorConfig;
+    /**
+     * SystemStatusIndicator component from @sudobility/devops-components.
+     * Pass this to enable status indicator functionality.
+     */
+    StatusIndicatorComponent?: ComponentType<SystemStatusIndicatorProps>;
+    /** App version string */
+    version?: string;
+    /** Copyright year or range */
+    copyrightYear?: string;
+    /** Company name for copyright */
+    companyName: string;
+    /** Company link URL (optional) */
+    companyUrl?: string;
+    /** Footer description text (below logo) */
+    description?: string;
+    /** Rights text (e.g., "All rights reserved") */
+    rightsText?: string;
+    /** Custom Link component */
+    LinkComponent?: ComponentType<LinkComponentProps>;
+    /** Network online status (for status indicator) */
+    isNetworkOnline?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Number of columns for link grid (default: auto based on section count) */
+    gridColumns?: 2 | 3 | 4 | 5;
+}
+/**
+ * AppFooterForHomePage - Full footer for home/landing pages.
+ *
+ * Features:
+ * - Multiple link sections in a grid
+ * - Logo and brand description
+ * - Social media links
+ * - System status indicator (optional)
+ * - Version and copyright
+ * - Dark mode support
+ *
+ * @example
+ * ```tsx
+ * import { SystemStatusIndicator } from '@sudobility/devops-components';
+ *
+ * <AppFooterForHomePage
+ *   logo={{ appName: 'My App' }}
+ *   linkSections={[
+ *     {
+ *       title: 'Product',
+ *       links: [
+ *         { label: 'Features', href: '/features' },
+ *         { label: 'Pricing', href: '/pricing' },
+ *       ],
+ *     },
+ *     {
+ *       title: 'Company',
+ *       links: [
+ *         { label: 'About', href: '/about' },
+ *         { label: 'Contact', href: '/contact' },
+ *       ],
+ *     },
+ *   ]}
+ *   socialLinks={{
+ *     twitterUrl: 'https://twitter.com/myapp',
+ *     discordUrl: 'https://discord.gg/myapp',
+ *   }}
+ *   statusIndicator={{
+ *     statusPageUrl: 'https://status.example.com',
+ *   }}
+ *   StatusIndicatorComponent={SystemStatusIndicator}
+ *   version="1.0.0"
+ *   companyName="Sudobility Inc."
+ *   description="Building the future of web3 communication"
+ * />
+ * ```
+ */
+export declare const AppFooterForHomePage: React.FC<AppFooterForHomePageProps>;
+export default AppFooterForHomePage;

package/dist/components/footer/app-footer.d.ts

@@ -0,0 +1,77 @@
+import React, { type ComponentType } from 'react';
+import type { StatusIndicatorConfig, LinkComponentProps, FooterLinkItem } from '../../types';
+/**
+ * Props for the SystemStatusIndicator component from @sudobility/devops-components.
+ */
+export interface SystemStatusIndicatorProps {
+    statusPageUrl: string;
+    apiEndpoint?: string;
+    refreshInterval?: number;
+    size?: 'sm' | 'md' | 'lg';
+    version?: string;
+    isNetworkOnline?: boolean;
+}
+export interface AppFooterProps {
+    /** App version string */
+    version?: string;
+    /** Copyright year or range (e.g., "2025" or "2025-2026") */
+    copyrightYear?: string;
+    /** Company name */
+    companyName: string;
+    /** Company URL (optional - creates a link if provided) */
+    companyUrl?: string;
+    /** Rights text (e.g., "All rights reserved") */
+    rightsText?: string;
+    /** Status indicator config (optional) */
+    statusIndicator?: StatusIndicatorConfig;
+    /**
+     * SystemStatusIndicator component from @sudobility/devops-components.
+     * Pass this to enable status indicator functionality.
+     */
+    StatusIndicatorComponent?: ComponentType<SystemStatusIndicatorProps>;
+    /** Right-side links (e.g., Privacy, Terms) */
+    links?: FooterLinkItem[];
+    /** Custom Link component */
+    LinkComponent?: ComponentType<LinkComponentProps>;
+    /** Sticky positioning (sticks to bottom of viewport) */
+    sticky?: boolean;
+    /** Network online status (for status indicator) */
+    isNetworkOnline?: boolean;
+    /** Custom className */
+    className?: string;
+}
+/**
+ * AppFooter - Compact footer for app pages.
+ *
+ * Features:
+ * - Version display
+ * - Copyright with company name
+ * - System status indicator (optional)
+ * - Right-side links (Privacy, Terms, etc.)
+ * - Sticky positioning option
+ * - Dark mode support
+ *
+ * @example
+ * ```tsx
+ * import { SystemStatusIndicator } from '@sudobility/devops-components';
+ *
+ * <AppFooter
+ *   version="1.0.0"
+ *   companyName="Sudobility Inc."
+ *   companyUrl="/"
+ *   rightsText="All rights reserved"
+ *   statusIndicator={{
+ *     statusPageUrl: 'https://status.example.com',
+ *     apiEndpoint: 'https://status.example.com/api/v1/status',
+ *   }}
+ *   StatusIndicatorComponent={SystemStatusIndicator}
+ *   links={[
+ *     { label: 'Privacy', href: '/privacy' },
+ *     { label: 'Terms', href: '/terms' },
+ *   ]}
+ *   sticky
+ * />
+ * ```
+ */
+export declare const AppFooter: React.FC<AppFooterProps>;
+export default AppFooter;

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

@@ -0,0 +1,2 @@
+export { AppFooter, type AppFooterProps, type SystemStatusIndicatorProps, } from './app-footer';
+export { AppFooterForHomePage, type AppFooterForHomePageProps, } from './app-footer-for-home-page';

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './topbar';
+export * from './breadcrumbs';
+export * from './footer';
+export * from './layout';

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

@@ -0,0 +1,73 @@
+import React, { type ReactNode } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type AppBreadcrumbsProps } from '../breadcrumbs/app-breadcrumbs';
+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;
+    /** Max width for content area (default: '7xl') */
+    maxWidth?: MaxWidth;
+    /** Content padding (default: 'md') */
+    contentPadding?: ContentPadding;
+    /** Background variant */
+    background?: BackgroundVariant;
+    /** Layout mode for LayoutProvider */
+    layoutMode?: 'standard';
+    /** Custom className for the layout container */
+    className?: string;
+    /** Custom className for the content area */
+    contentClassName?: string;
+    /** Custom className for the main element */
+    mainClassName?: string;
+}
+/**
+ * AppPageLayout - Layout wrapper combining TopBar, Breadcrumbs, Content, and Footer.
+ *
+ * Features:
+ * - Flexible slots for TopBar and Footer
+ * - Optional breadcrumbs with share and "Talk to Founder"
+ * - Configurable content max-width and padding
+ * - Background variants
+ * - Dark mode support
+ * - Sticky footer behavior
+ *
+ * @example
+ * ```tsx
+ * <AppPageLayout
+ *   topBar={
+ *     <AppTopBarWithFirebaseAuth
+ *       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"
+ * >
+ *   <h1>Page Content</h1>
+ * </AppPageLayout>
+ * ```
+ */
+export declare const AppPageLayout: React.FC<AppPageLayoutProps>;
+export default AppPageLayout;

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

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

package/dist/components/topbar/app-topbar-with-firebase-auth.d.ts

@@ -0,0 +1,80 @@
+import React, { type ReactNode, type ComponentType } from 'react';
+import { type AppTopBarProps } from './app-topbar';
+/**
+ * Auth menu item for the authenticated user dropdown.
+ * This matches the AuthMenuItem interface from @sudobility/auth-components.
+ */
+export interface AuthMenuItem {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Icon element (typically a small SVG) */
+    icon?: ReactNode;
+    /** Click handler */
+    onClick?: () => void;
+    /** Show divider after this item */
+    dividerAfter?: boolean;
+}
+/**
+ * Props for the AuthAction component from @sudobility/auth-components.
+ */
+export interface AuthActionProps {
+    /** Avatar size in pixels */
+    avatarSize?: number;
+    /** Dropdown alignment */
+    dropdownAlign?: 'left' | 'right';
+    /** Login button click handler */
+    onLoginClick?: () => void;
+    /** Menu items for authenticated user dropdown */
+    menuItems?: AuthMenuItem[];
+    /** Custom login button text */
+    loginButtonText?: string;
+    /** Custom className for login button */
+    loginButtonClassName?: string;
+}
+export interface AppTopBarWithFirebaseAuthProps extends Omit<AppTopBarProps, 'renderAccountSection'> {
+    /**
+     * AuthAction component from @sudobility/auth-components.
+     * This is passed as a prop to avoid hard dependency on auth-components.
+     */
+    AuthActionComponent: ComponentType<AuthActionProps>;
+    /** Additional menu items for authenticated users */
+    authenticatedMenuItems?: AuthMenuItem[];
+    /** Login button click handler */
+    onLoginClick?: () => void;
+    /** Avatar size in pixels */
+    avatarSize?: number;
+    /** Dropdown alignment */
+    dropdownAlign?: 'left' | 'right';
+    /** Custom login button text */
+    loginButtonText?: string;
+    /** Custom login button className */
+    loginButtonClassName?: string;
+}
+/**
+ * AppTopBarWithFirebaseAuth - TopBar with Firebase authentication integration.
+ *
+ * This component wraps AppTopBar and provides the AuthAction component
+ * from @sudobility/auth-components for the account section.
+ *
+ * Note: The AuthAction component must be passed as a prop to avoid
+ * hard dependency on @sudobility/auth-components.
+ *
+ * @example
+ * ```tsx
+ * import { AuthAction } from '@sudobility/auth-components';
+ *
+ * <AppTopBarWithFirebaseAuth
+ *   logo={{ src: '/logo.png', appName: 'My App' }}
+ *   menuItems={[...]}
+ *   AuthActionComponent={AuthAction}
+ *   onLoginClick={() => navigate('/login')}
+ *   authenticatedMenuItems={[
+ *     { id: 'dashboard', label: 'Dashboard', onClick: () => navigate('/dashboard') },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const AppTopBarWithFirebaseAuth: React.FC<AppTopBarWithFirebaseAuthProps>;
+export default AppTopBarWithFirebaseAuth;