@sudobility/building_blocks 0.0.15 → 0.0.17

package/dist/components/index.d.ts

@@ -3,3 +3,4 @@ export * from './breadcrumbs';
 export * from './footer';
 export * from './layout';
 export * from './settings';
+export * from './subscription';

package/dist/components/settings/global-settings-page.d.ts

@@ -0,0 +1,96 @@
+import React, { type ReactNode, type ComponentType } from 'react';
+import { Theme, FontSize } from './appearance-settings';
+/**
+ * Configuration for a settings section in the navigation.
+ */
+export interface SettingsSectionConfig {
+    /** Unique identifier for the section */
+    id: string;
+    /** Icon component to display */
+    icon: ComponentType<{
+        className?: string;
+    }>;
+    /** Display label */
+    label: string;
+    /** Short description shown below label */
+    description: string;
+    /** The content to render when this section is selected */
+    content: ReactNode;
+}
+/**
+ * Translation keys used by GlobalSettingsPage.
+ */
+export interface GlobalSettingsPageTranslations {
+    title: string;
+    backButton: string;
+    appearanceLabel: string;
+    appearanceDescription: string;
+}
+export interface GlobalSettingsPageProps {
+    /** Current theme value */
+    theme: Theme | string;
+    /** Current font size value */
+    fontSize: FontSize | string;
+    /** Callback when theme changes */
+    onThemeChange: (theme: Theme) => void;
+    /** Callback when font size changes */
+    onFontSizeChange: (fontSize: FontSize) => void;
+    /**
+     * Additional settings sections to display after Appearance.
+     * Each section needs an id, icon, label, description, and content.
+     */
+    additionalSections?: SettingsSectionConfig[];
+    /**
+     * Optional translation function.
+     * Falls back to default English strings if not provided.
+     */
+    t?: (key: string, fallback?: string) => string;
+    /**
+     * Translation function for AppearanceSettings.
+     * If provided, will be passed to AppearanceSettings component.
+     */
+    appearanceT?: (key: string, fallback?: string) => string;
+    /** Optional className for the container */
+    className?: string;
+    /** Whether to show the info box in appearance settings */
+    showAppearanceInfoBox?: boolean;
+}
+/**
+ * GlobalSettingsPage - A reusable settings page with master-detail layout.
+ *
+ * Features:
+ * - Appearance settings built-in as the first section
+ * - Extensible via additionalSections prop
+ * - Responsive master-detail layout
+ * - Mobile-friendly with back navigation
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <GlobalSettingsPage
+ *   theme={theme}
+ *   fontSize={fontSize}
+ *   onThemeChange={setTheme}
+ *   onFontSizeChange={setFontSize}
+ * />
+ *
+ * // With additional sections
+ * <GlobalSettingsPage
+ *   theme={theme}
+ *   fontSize={fontSize}
+ *   onThemeChange={setTheme}
+ *   onFontSizeChange={setFontSize}
+ *   additionalSections={[
+ *     {
+ *       id: 'notifications',
+ *       icon: BellIcon,
+ *       label: 'Notifications',
+ *       description: 'Manage notification preferences',
+ *       content: <NotificationSettings />,
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const GlobalSettingsPage: React.FC<GlobalSettingsPageProps>;
+export default GlobalSettingsPage;

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

@@ -1 +1,2 @@
 export { AppearanceSettings, Theme, FontSize, type AppearanceSettingsProps, type AppearanceSettingsTranslations, } from './appearance-settings';
+export { GlobalSettingsPage, type GlobalSettingsPageProps, type GlobalSettingsPageTranslations, type SettingsSectionConfig, } from './global-settings-page';

package/dist/components/subscription/AppPricingPage.d.ts

@@ -0,0 +1,86 @@
+/**
+ * @fileoverview App Pricing Page
+ * @description Public pricing page for displaying subscription options
+ */
+/** Product from subscription provider */
+export interface PricingProduct {
+    identifier: string;
+    title: string;
+    price: string;
+    priceString: string;
+    period?: string;
+}
+/** FAQ item */
+export interface FAQItem {
+    question: string;
+    answer: string;
+}
+/** All localized labels for the pricing page */
+export interface PricingPageLabels {
+    title: string;
+    subtitle: string;
+    periodYear: string;
+    periodMonth: string;
+    periodWeek: string;
+    billingMonthly: string;
+    billingYearly: string;
+    freeTierTitle: string;
+    freeTierPrice: string;
+    freeTierFeatures: string[];
+    currentPlanBadge: string;
+    mostPopularBadge: string;
+    ctaLogIn: string;
+    ctaTryFree: string;
+    ctaUpgrade: string;
+    faqTitle: string;
+}
+/** Formatter functions for dynamic strings */
+export interface PricingPageFormatters {
+    /** Format savings badge: "Save 20%" */
+    formatSavePercent: (percent: number) => string;
+    /** Get features for a product by its identifier */
+    getProductFeatures: (productId: string) => string[];
+}
+/** Package ID to entitlement mapping */
+export interface EntitlementMap {
+    [packageId: string]: string;
+}
+/** Entitlement to level mapping for comparing plan tiers */
+export interface EntitlementLevels {
+    [entitlement: string]: number;
+}
+export interface AppPricingPageProps {
+    /** Available subscription products */
+    products: PricingProduct[];
+    /** Whether user is authenticated */
+    isAuthenticated: boolean;
+    /** Whether user has an active subscription */
+    hasActiveSubscription: boolean;
+    /** Current subscription product identifier (if any) */
+    currentProductIdentifier?: string;
+    /** User ID used for subscription (the selected entity's ID when logged in) */
+    subscriptionUserId?: string;
+    /** All localized labels */
+    labels: PricingPageLabels;
+    /** Formatter functions */
+    formatters: PricingPageFormatters;
+    /** Package ID to entitlement mapping for calculating savings */
+    entitlementMap: EntitlementMap;
+    /** Entitlement to level mapping for comparing tiers (higher = better) */
+    entitlementLevels: EntitlementLevels;
+    /** Called when user clicks on a plan */
+    onPlanClick: (planIdentifier: string) => void;
+    /** Called when user clicks on free plan */
+    onFreePlanClick: () => void;
+    /** Optional FAQ items */
+    faqItems?: FAQItem[];
+    /** Optional className for the container */
+    className?: string;
+}
+/**
+ * Public pricing page for displaying subscription options.
+ * - Non-authenticated: Free tile shows "Try it for Free", paid tiles show "Log in to Continue"
+ * - Authenticated on free: Free tile shows "Current Plan" badge (no CTA), paid tiles show "Upgrade"
+ * - Authenticated with subscription: Current plan shows badge (no CTA), higher tiers show "Upgrade"
+ */
+export declare function AppPricingPage({ products, isAuthenticated, hasActiveSubscription, currentProductIdentifier, labels, formatters, entitlementMap, entitlementLevels, onPlanClick, onFreePlanClick, faqItems, className, }: AppPricingPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/subscription/AppSubscriptionsPage.d.ts

@@ -0,0 +1,114 @@
+/**
+ * @fileoverview App Subscriptions Page
+ * @description Page for managing app subscriptions and viewing rate limits
+ */
+import type { RateLimitsConfigData } from '@sudobility/types';
+/** Product from subscription provider */
+export interface SubscriptionProduct {
+    identifier: string;
+    title: string;
+    price: string;
+    priceString: string;
+    period?: string;
+    freeTrialPeriod?: string;
+    introPrice?: string;
+}
+/** Current subscription state */
+export interface CurrentSubscription {
+    isActive: boolean;
+    productIdentifier?: string;
+    expirationDate?: Date;
+    willRenew?: boolean;
+}
+/** Subscription context value passed from consumer */
+export interface SubscriptionContextValue {
+    products: SubscriptionProduct[];
+    currentSubscription: CurrentSubscription | null;
+    isLoading: boolean;
+    error: string | null;
+    purchase: (productId: string) => Promise<boolean>;
+    restore: () => Promise<boolean>;
+    clearError: () => void;
+}
+/** All localized labels for the subscription page */
+export interface SubscriptionPageLabels {
+    title: string;
+    errorTitle: string;
+    purchaseError: string;
+    restoreError: string;
+    restoreNoPurchases: string;
+    periodYear: string;
+    periodMonth: string;
+    periodWeek: string;
+    billingMonthly: string;
+    billingYearly: string;
+    unlimited: string;
+    unlimitedRequests: string;
+    currentStatusLabel: string;
+    statusActive: string;
+    statusInactive: string;
+    statusInactiveMessage: string;
+    labelPlan: string;
+    labelPremium: string;
+    labelExpires: string;
+    labelWillRenew: string;
+    labelMonthlyUsage: string;
+    labelDailyUsage: string;
+    yes: string;
+    no: string;
+    buttonSubscribe: string;
+    buttonPurchasing: string;
+    buttonRestore: string;
+    buttonRestoring: string;
+    noProducts: string;
+    noProductsForPeriod: string;
+    freeTierTitle: string;
+    freeTierPrice: string;
+    freeTierFeatures: string[];
+    currentPlanBadge: string;
+}
+/** Formatter functions for dynamic strings */
+export interface SubscriptionPageFormatters {
+    /** Format rate limit: "1,000 requests/hour" */
+    formatHourlyLimit: (limit: string) => string;
+    /** Format rate limit: "10,000 requests/day" */
+    formatDailyLimit: (limit: string) => string;
+    /** Format rate limit: "100,000 requests/month" */
+    formatMonthlyLimit: (limit: string) => string;
+    /** Format trial period: "7 days free trial" */
+    formatTrialDays: (count: number) => string;
+    /** Format trial period: "2 weeks free trial" */
+    formatTrialWeeks: (count: number) => string;
+    /** Format trial period: "1 month free trial" */
+    formatTrialMonths: (count: number) => string;
+    /** Format savings badge: "Save 20%" */
+    formatSavePercent: (percent: number) => string;
+    /** Format intro price note */
+    formatIntroNote: (price: string) => string;
+}
+export interface AppSubscriptionsPageProps {
+    /** Subscription context value */
+    subscription: SubscriptionContextValue;
+    /** Rate limit configuration */
+    rateLimitsConfig?: RateLimitsConfigData | null;
+    /** User ID used for subscription (the selected entity's ID when logged in) */
+    subscriptionUserId?: string;
+    /** All localized labels */
+    labels: SubscriptionPageLabels;
+    /** Formatter functions for dynamic strings */
+    formatters: SubscriptionPageFormatters;
+    /** Package ID to entitlement mapping */
+    packageEntitlementMap?: Record<string, string>;
+    /** Called when purchase succeeds */
+    onPurchaseSuccess?: () => void;
+    /** Called when restore succeeds */
+    onRestoreSuccess?: () => void;
+    /** Called on error */
+    onError?: (title: string, message: string) => void;
+    /** Called on warning */
+    onWarning?: (title: string, message: string) => void;
+}
+/**
+ * Page for managing app subscriptions.
+ */
+export declare function AppSubscriptionsPage({ subscription, rateLimitsConfig, labels, formatters, packageEntitlementMap, onPurchaseSuccess, onRestoreSuccess, onError, onWarning, }: AppSubscriptionsPageProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+export { AppSubscriptionsPage } from './AppSubscriptionsPage';
+export type { AppSubscriptionsPageProps, SubscriptionProduct, CurrentSubscription, SubscriptionContextValue, SubscriptionPageLabels, SubscriptionPageFormatters, } from './AppSubscriptionsPage';
+export { AppPricingPage } from './AppPricingPage';
+export type { AppPricingPageProps, PricingProduct, FAQItem, PricingPageLabels, PricingPageFormatters, EntitlementMap, EntitlementLevels, } from './AppPricingPage';