@sudobility/building_blocks_rn 0.0.2

package/dist/src/theme/ThemeContext.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import { useColorScheme } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { Theme } from '../types';
+import { lightColors, darkColors } from './colors';
+const THEME_STORAGE_KEY = '@building_blocks/theme';
+const ThemeContext = createContext(null);
+export function ThemeProvider({ children, initialTheme, storageKeyPrefix, }) {
+    const systemColorScheme = useColorScheme();
+    const [theme, setThemeState] = useState(initialTheme ?? Theme.SYSTEM);
+    const [loaded, setLoaded] = useState(false);
+    const storageKey = storageKeyPrefix
+        ? `${storageKeyPrefix}/${THEME_STORAGE_KEY}`
+        : THEME_STORAGE_KEY;
+    // Load persisted theme on mount
+    useEffect(() => {
+        AsyncStorage.getItem(storageKey).then(stored => {
+            if (stored && Object.values(Theme).includes(stored)) {
+                setThemeState(stored);
+            }
+            setLoaded(true);
+        });
+    }, [storageKey]);
+    const setTheme = useCallback((newTheme) => {
+        setThemeState(newTheme);
+        AsyncStorage.setItem(storageKey, newTheme);
+    }, [storageKey]);
+    const resolvedTheme = useMemo(() => {
+        if (theme === Theme.SYSTEM) {
+            return systemColorScheme === 'dark' ? 'dark' : 'light';
+        }
+        return theme === Theme.DARK ? 'dark' : 'light';
+    }, [theme, systemColorScheme]);
+    const colors = useMemo(() => (resolvedTheme === 'dark' ? darkColors : lightColors), [resolvedTheme]);
+    const value = useMemo(() => ({
+        theme,
+        resolvedTheme,
+        colors,
+        isDark: resolvedTheme === 'dark',
+        setTheme,
+    }), [theme, resolvedTheme, colors, setTheme]);
+    // Don't render children until we've loaded the persisted theme
+    if (!loaded) {
+        return null;
+    }
+    return (_jsx(ThemeContext.Provider, { value: value, children: children }));
+}
+/**
+ * Hook to access theme context.
+ * Must be used within a ThemeProvider.
+ */
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+}
+/**
+ * Safely access theme context.
+ * Returns null if not within a ThemeProvider.
+ */
+export function useThemeSafe() {
+    return useContext(ThemeContext);
+}

package/dist/src/theme/colors.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Color palette for building_blocks_rn.
+ * Matches the web app's Tailwind color tokens.
+ */
+export declare const palette: {
+    readonly primary: {
+        readonly 50: "#eff6ff";
+        readonly 100: "#dbeafe";
+        readonly 200: "#bfdbfe";
+        readonly 300: "#93c5fd";
+        readonly 400: "#60a5fa";
+        readonly 500: "#3b82f6";
+        readonly 600: "#2563eb";
+        readonly 700: "#1d4ed8";
+        readonly 800: "#1e40af";
+        readonly 900: "#1e3a8a";
+    };
+    readonly gray: {
+        readonly 50: "#f9fafb";
+        readonly 100: "#f3f4f6";
+        readonly 200: "#e5e7eb";
+        readonly 300: "#d1d5db";
+        readonly 400: "#9ca3af";
+        readonly 500: "#6b7280";
+        readonly 600: "#4b5563";
+        readonly 700: "#374151";
+        readonly 800: "#1f2937";
+        readonly 900: "#111827";
+    };
+    readonly success: "#22c55e";
+    readonly error: "#ef4444";
+    readonly warning: "#f59e0b";
+    readonly info: "#3b82f6";
+    readonly white: "#ffffff";
+    readonly black: "#000000";
+    readonly transparent: "transparent";
+};
+export interface ThemeColors {
+    primary: string;
+    background: string;
+    card: string;
+    text: string;
+    textSecondary: string;
+    textMuted: string;
+    border: string;
+    notification: string;
+    surface: string;
+    surfaceSecondary: string;
+    error: string;
+    success: string;
+    warning: string;
+    info: string;
+}
+export declare const lightColors: ThemeColors;
+export declare const darkColors: ThemeColors;

package/dist/src/theme/colors.js

@@ -0,0 +1,69 @@
+/**
+ * Color palette for building_blocks_rn.
+ * Matches the web app's Tailwind color tokens.
+ */
+export const palette = {
+    primary: {
+        50: '#eff6ff',
+        100: '#dbeafe',
+        200: '#bfdbfe',
+        300: '#93c5fd',
+        400: '#60a5fa',
+        500: '#3b82f6',
+        600: '#2563eb',
+        700: '#1d4ed8',
+        800: '#1e40af',
+        900: '#1e3a8a',
+    },
+    gray: {
+        50: '#f9fafb',
+        100: '#f3f4f6',
+        200: '#e5e7eb',
+        300: '#d1d5db',
+        400: '#9ca3af',
+        500: '#6b7280',
+        600: '#4b5563',
+        700: '#374151',
+        800: '#1f2937',
+        900: '#111827',
+    },
+    success: '#22c55e',
+    error: '#ef4444',
+    warning: '#f59e0b',
+    info: '#3b82f6',
+    white: '#ffffff',
+    black: '#000000',
+    transparent: 'transparent',
+};
+export const lightColors = {
+    primary: palette.primary[600],
+    background: palette.gray[50],
+    card: palette.white,
+    text: palette.gray[900],
+    textSecondary: palette.gray[600],
+    textMuted: palette.gray[400],
+    border: palette.gray[200],
+    notification: palette.error,
+    surface: palette.white,
+    surfaceSecondary: palette.gray[100],
+    error: palette.error,
+    success: palette.success,
+    warning: palette.warning,
+    info: palette.info,
+};
+export const darkColors = {
+    primary: palette.primary[400],
+    background: palette.gray[900],
+    card: palette.gray[800],
+    text: palette.gray[50],
+    textSecondary: palette.gray[400],
+    textMuted: palette.gray[500],
+    border: palette.gray[700],
+    notification: palette.error,
+    surface: palette.gray[800],
+    surfaceSecondary: palette.gray[700],
+    error: palette.error,
+    success: palette.success,
+    warning: palette.warning,
+    info: palette.info,
+};

package/dist/src/theme/index.d.ts

@@ -0,0 +1,7 @@
+export { palette, lightColors, darkColors } from './colors';
+export type { ThemeColors } from './colors';
+export { spacing } from './spacing';
+export type { SpacingKey } from './spacing';
+export { fontSizes, fontWeights, getFontSizeMultiplier } from './typography';
+export { ThemeProvider, useTheme, useThemeSafe } from './ThemeContext';
+export type { ThemeContextValue } from './ThemeContext';

package/dist/src/theme/index.js

@@ -0,0 +1,4 @@
+export { palette, lightColors, darkColors } from './colors';
+export { spacing } from './spacing';
+export { fontSizes, fontWeights, getFontSizeMultiplier } from './typography';
+export { ThemeProvider, useTheme, useThemeSafe } from './ThemeContext';

package/dist/src/theme/spacing.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Spacing scale for consistent layout.
+ * Values in logical pixels.
+ */
+export declare const spacing: {
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 12;
+    readonly lg: 16;
+    readonly xl: 20;
+    readonly '2xl': 24;
+    readonly '3xl': 32;
+    readonly '4xl': 40;
+    readonly '5xl': 48;
+};
+export type SpacingKey = keyof typeof spacing;

package/dist/src/theme/spacing.js

@@ -0,0 +1,15 @@
+/**
+ * Spacing scale for consistent layout.
+ * Values in logical pixels.
+ */
+export const spacing = {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 20,
+    '2xl': 24,
+    '3xl': 32,
+    '4xl': 40,
+    '5xl': 48,
+};

package/dist/src/theme/typography.d.ts

@@ -0,0 +1,24 @@
+import { FontSize } from '../types';
+/**
+ * Typography scale.
+ */
+export declare const fontSizes: {
+    readonly xs: 12;
+    readonly sm: 14;
+    readonly base: 16;
+    readonly lg: 18;
+    readonly xl: 20;
+    readonly '2xl': 24;
+    readonly '3xl': 30;
+    readonly '4xl': 36;
+};
+export declare const fontWeights: {
+    normal: "400";
+    medium: "500";
+    semibold: "600";
+    bold: "700";
+};
+/**
+ * Get font size scale multiplier based on FontSize setting.
+ */
+export declare function getFontSizeMultiplier(fontSize: FontSize | string): number;

package/dist/src/theme/typography.js

@@ -0,0 +1,34 @@
+import { FontSize } from '../types';
+/**
+ * Typography scale.
+ */
+export const fontSizes = {
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 20,
+    '2xl': 24,
+    '3xl': 30,
+    '4xl': 36,
+};
+export const fontWeights = {
+    normal: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+};
+/**
+ * Get font size scale multiplier based on FontSize setting.
+ */
+export function getFontSizeMultiplier(fontSize) {
+    switch (fontSize) {
+        case FontSize.SMALL:
+            return 0.875;
+        case FontSize.LARGE:
+            return 1.125;
+        case FontSize.MEDIUM:
+        default:
+            return 1;
+    }
+}

package/dist/src/types.d.ts

@@ -0,0 +1,152 @@
+/**
+ * @fileoverview Type definitions for @sudobility/building_blocks_rn
+ *
+ * Mirrors @sudobility/building_blocks types where possible,
+ * adapted for React Native (style instead of className, onPress instead of href, etc.).
+ */
+import type { ComponentType, ReactNode } from 'react';
+export type { LanguageConfig } from './constants/languages';
+/**
+ * Menu item configuration for AppHeader navigation.
+ * Adapted from web MenuItemConfig: icon accepts RN icon props, uses onPress instead of href.
+ */
+export interface MenuItemConfig {
+    /** Unique identifier for the menu item */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Icon component (RN style: accepts size and color) */
+    icon: ComponentType<{
+        size?: number;
+        color?: string;
+    }>;
+    /** Route name for React Navigation */
+    routeName: string;
+    /** Optional route params */
+    routeParams?: Record<string, unknown>;
+    /** Optional: press handler (overrides routeName navigation) */
+    onPress?: () => void;
+    /** Optional: show only when condition is true */
+    show?: boolean;
+}
+/**
+ * Logo configuration for AppHeader.
+ */
+export interface LogoConfig {
+    /** Logo image source (require() or { uri: string }) */
+    source?: number | {
+        uri: string;
+    };
+    /** App name to display next to logo */
+    appName: string;
+    /** Logo press handler (typically navigate to home) */
+    onPress?: () => void;
+}
+/**
+ * Footer link item.
+ * Uses onPress or url instead of href.
+ */
+export interface FooterLinkItem {
+    /** Display label */
+    label: string;
+    /** URL to open (via Linking.openURL) */
+    url?: string;
+    /** Route name for in-app navigation */
+    routeName?: string;
+    /** Optional press handler */
+    onPress?: () => void;
+}
+/**
+ * Max width options for layout.
+ * Maps to numeric pixel values in RN.
+ */
+export type MaxWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '4xl' | '7xl' | 'full';
+/**
+ * Content padding options.
+ */
+export type ContentPadding = 'none' | 'sm' | 'md' | 'lg';
+/**
+ * Background variant options.
+ */
+export type BackgroundVariant = 'default' | 'white' | 'gradient';
+export type AnalyticsEventType = 'button_click' | 'link_click' | 'navigation' | 'settings_change' | 'subscription_action' | 'page_view';
+export interface AnalyticsTrackingParams {
+    eventType: AnalyticsEventType;
+    componentName: string;
+    label: string;
+    params?: Record<string, unknown>;
+}
+export interface AnalyticsTracker {
+    onTrack: (params: AnalyticsTrackingParams) => void;
+}
+/**
+ * Theme options (shared with web).
+ */
+export declare enum Theme {
+    LIGHT = "light",
+    DARK = "dark",
+    SYSTEM = "system"
+}
+/**
+ * Font size options (shared with web).
+ */
+export declare enum FontSize {
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large"
+}
+export interface TextSection {
+    title: string;
+    content?: string;
+    items?: string[];
+    subsections?: TextSection[];
+}
+export interface TextPageContact {
+    title: string;
+    description: string;
+    info: string;
+    gdprNotice?: string;
+}
+export interface TextPageContent {
+    title: string;
+    lastUpdated?: string;
+    sections: TextSection[];
+    contact?: TextPageContact;
+}
+export interface SettingsSectionConfig {
+    id: string;
+    icon?: ComponentType<{
+        size?: number;
+        color?: string;
+    }>;
+    label: string;
+    description?: string;
+    content: ReactNode;
+}
+export interface SubscriptionPageLabels {
+    title?: string;
+    subtitle?: string;
+    currentPlan?: string;
+    changePlan?: string;
+    purchase?: string;
+    restore?: string;
+    restoreDescription?: string;
+    monthly?: string;
+    yearly?: string;
+    lifetime?: string;
+    free?: string;
+    freePlanDescription?: string;
+    mostPopular?: string;
+    savePercent?: string;
+    perMonth?: string;
+    perYear?: string;
+    oneTime?: string;
+    features?: string;
+    currentlyActive?: string;
+    rateLimitsTitle?: string;
+    rateLimitsDescription?: string;
+}
+export interface SubscriptionPageFormatters {
+    formatPrice?: (price: number, currency: string) => string;
+    formatPeriod?: (period: string) => string;
+}

package/dist/src/types.js

@@ -0,0 +1,27 @@
+/**
+ * @fileoverview Type definitions for @sudobility/building_blocks_rn
+ *
+ * Mirrors @sudobility/building_blocks types where possible,
+ * adapted for React Native (style instead of className, onPress instead of href, etc.).
+ */
+// ============================================================================
+// Settings Types
+// ============================================================================
+/**
+ * Theme options (shared with web).
+ */
+export var Theme;
+(function (Theme) {
+    Theme["LIGHT"] = "light";
+    Theme["DARK"] = "dark";
+    Theme["SYSTEM"] = "system";
+})(Theme || (Theme = {}));
+/**
+ * Font size options (shared with web).
+ */
+export var FontSize;
+(function (FontSize) {
+    FontSize["SMALL"] = "small";
+    FontSize["MEDIUM"] = "medium";
+    FontSize["LARGE"] = "large";
+})(FontSize || (FontSize = {}));

package/dist/src/utils/index.d.ts

@@ -0,0 +1 @@
+export { createThemedStyles } from './styles';

package/dist/src/utils/index.js

@@ -0,0 +1 @@
+export { createThemedStyles } from './styles';

package/dist/src/utils/styles.d.ts

@@ -0,0 +1,23 @@
+import type { ViewStyle, TextStyle, ImageStyle } from 'react-native';
+import type { ThemeColors } from '../theme/colors';
+type NamedStyles<T> = {
+    [P in keyof T]: ViewStyle | TextStyle | ImageStyle;
+};
+/**
+ * Create a hook that generates themed styles.
+ *
+ * @example
+ * ```tsx
+ * const useStyles = createThemedStyles((colors) => ({
+ *   container: { backgroundColor: colors.background },
+ *   text: { color: colors.text },
+ * }));
+ *
+ * function MyComponent() {
+ *   const styles = useStyles();
+ *   return <View style={styles.container}><Text style={styles.text}>Hello</Text></View>;
+ * }
+ * ```
+ */
+export declare function createThemedStyles<T extends NamedStyles<T>>(factory: (colors: ThemeColors) => T): () => T;
+export {};

package/dist/src/utils/styles.js

@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { useTheme } from '../theme/ThemeContext';
+/**
+ * Create a hook that generates themed styles.
+ *
+ * @example
+ * ```tsx
+ * const useStyles = createThemedStyles((colors) => ({
+ *   container: { backgroundColor: colors.background },
+ *   text: { color: colors.text },
+ * }));
+ *
+ * function MyComponent() {
+ *   const styles = useStyles();
+ *   return <View style={styles.container}><Text style={styles.text}>Hello</Text></View>;
+ * }
+ * ```
+ */
+export function createThemedStyles(factory) {
+    return function useStyles() {
+        const { colors } = useTheme();
+        return useMemo(() => StyleSheet.create(factory(colors)), [colors]);
+    };
+}

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@sudobility/building_blocks_rn",
+  "version": "0.0.2",
+  "description": "Higher-level shared UI building blocks for Sudobility React Native apps",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./firebase": {
+      "import": "./dist/firebase.js",
+      "require": "./dist/firebase.js",
+      "types": "./dist/firebase.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "dev": "tsc -p tsconfig.build.json --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "test": "echo 'No tests configured yet'",
+    "lint": "eslint . --ext ts,tsx --ignore-pattern 'dist' --ignore-pattern 'node_modules' --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint . --ext ts,tsx --ignore-pattern 'dist' --ignore-pattern 'node_modules' --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json}\"",
+    "prepublishOnly": "bun run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-native": ">=0.72.0",
+    "react-native-safe-area-context": ">=4.0.0",
+    "@react-navigation/native": ">=7.0.0",
+    "@react-navigation/native-stack": ">=7.0.0",
+    "i18next": "^23.0.0 || ^24.0.0 || ^25.0.0",
+    "react-i18next": "^14.0.0 || ^15.0.0 || ^16.0.0",
+    "@react-native-async-storage/async-storage": ">=1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "firebase": {
+      "optional": true
+    },
+    "@tanstack/react-query": {
+      "optional": true
+    },
+    "react-native-purchases": {
+      "optional": true
+    },
+    "react-native-localize": {
+      "optional": true
+    },
+    "react-native-gesture-handler": {
+      "optional": true
+    },
+    "@sudobility/types": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.38.0",
+    "@typescript-eslint/eslint-plugin": "^8.44.1",
+    "@typescript-eslint/parser": "^8.44.1",
+    "eslint": "^9.38.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react-hooks": "^7.0.0",
+    "eslint-plugin-react-refresh": "^0.4.0",
+    "prettier": "^3.6.2",
+    "@types/react": "~19.1.0",
+    "typescript": "~5.9.2",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-safe-area-context": "~5.6.0",
+    "@react-navigation/native": "^7.1.28",
+    "@react-navigation/native-stack": "^7.10.1",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "i18next": "^25.8.0",
+    "react-i18next": "^16.5.3",
+    "@tanstack/react-query": "^5.90.19",
+    "@sudobility/types": "^1.9.50"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "BUSL-1.1"
+}